cleanup and some added style tweaks

src/attributes/Alignment.php

@@ -14,7 +14,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/alignment', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/alignment', [
             'name' => get_class($this),
             'value' => $this->value,
         ]);

src/attributes/Background.php

@@ -16,7 +16,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return Craft::$app->getView()->renderTemplate('keystone/styles/background', [
+        return Craft::$app->getView()->renderTemplate('keystone/attributes/background', [
             'label' => 'Background',
             'name' => get_class($this),
             'value' => $this->value ?? null,

src/attributes/Border.php

@@ -15,7 +15,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/border', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/border', [
             'label' => 'Border Radius',
             'name' => get_class($this),
             'value' => $this->value ?? null,

src/attributes/Grid.php

@@ -14,7 +14,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/grid', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/grid', [
             'name' => get_class($this),
             'value' => $this->value,
         ]);

src/attributes/Margin.php

@@ -15,7 +15,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/margin', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/margin', [
             'label' => 'Margin',
             'name' => get_class($this),
             'value' => $this->value ?? null,

src/attributes/Padding.php

@@ -15,7 +15,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/margin', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/margin', [
             'label' => 'Padding',
             'name' => get_class($this),
             'value' => $this->value ?? null,

src/attributes/Rotate.php

@@ -14,7 +14,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/slider', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/slider', [
             'label' => 'Rotate',
             'name' => get_class($this),
             'value' => $this->value ?? null,

src/attributes/Size.php

@@ -14,7 +14,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/size', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/size', [
             'name' => get_class($this),
             'value' => $this->value ?? null,
         ]);

src/attributes/SpaceBetween.php

@@ -13,7 +13,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/space-between', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/space-between', [
             'label' => 'Space Between',
             'name' => get_class($this),
             'value' => $this->value ?? null,

src/attributes/Text.php

@@ -14,7 +14,7 @@ public function __construct(
 
     public function getInputHtml(): string
     {
-        return \Craft::$app->getView()->renderTemplate('keystone/styles/text', [
+        return \Craft::$app->getView()->renderTemplate('keystone/attributes/text', [
             'name' => get_class($this),
             'value' => $this->value,
         ]);

src/base/AttributeBag.php

@@ -4,7 +4,7 @@
 
 use Illuminate\Support\Collection;
 
-class AttributeBag
+class AttributeBag implements \ArrayAccess
 {
     /** @var Collection<class-string<Attribute>, mixed> */
     protected Collection $attributes;
@@ -71,4 +71,24 @@ public function __toString()
     {
         return $this->toHtml();
     }
+
+    public function offsetExists(mixed $offset): bool
+    {
+        return true;
+    }
+
+    public function offsetGet(mixed $offset): mixed
+    {
+        return $this->attributes->get($offset);
+    }
+
+    public function offsetSet(mixed $offset, mixed $value): void
+    {
+        $this->attributes->put($offset, $value);
+    }
+
+    public function offsetUnset(mixed $offset): void
+    {
+        $this->attributes->forget([$offset]);
+    }
 }

src/templates/styles/border.twig → src/templates/attributes/border.twig

@@ -8,7 +8,7 @@
     }) }}
 
     <div class="k-grid k-grid-cols-3 k-gap-6">
-        {% include "keystone/styles/margin" with {
+        {% include "keystone/attributes/margin" with {
             label: 'Width',
             name: name ~ '[width]',
             value: value.width|default

src/templates/styles/text.twig → src/templates/attributes/text.twig

@@ -17,6 +17,25 @@
                 value: value.alpha|default('1')
             }) }}
         </div>
+        <div>
+            {{ selectField({
+                label: 'Weight',
+                name: name ~ '[font-weight]',
+                options: [
+                    {label: 'Default', value: ''},
+                    {label: '100', value: '100'},
+                    {label: '200', value: '200'},
+                    {label: '300', value: '300'},
+                    {label: '400', value: '400'},
+                    {label: '500', value: '500'},
+                    {label: '600', value: '600'},
+                    {label: '700', value: '700'},
+                    {label: '800', value: '800'},
+                    {label: '900', value: '900'},
+                ],
+                value: value['font-weight']|default('400')
+            }) }}
+        </div>
         <div>
             {{ selectField({
                 label: 'Decoration',

src/templates/components/elementquery.twig

@@ -2,8 +2,6 @@
 {% export icon %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M34,64a6,6,0,0,1,6-6H216a6,6,0,0,1,0,12H40A6,6,0,0,1,34,64Zm6,70h72a6,6,0,0,0,0-12H40a6,6,0,0,0,0,12Zm88,52H40a6,6,0,0,0,0,12h88a6,6,0,0,0,0-12Zm108.24,10.24a6,6,0,0,1-8.48,0l-21.49-21.48a38.06,38.06,0,1,1,8.49-8.49l21.48,21.49A6,6,0,0,1,236.24,196.24ZM184,170a26,26,0,1,0-26-26A26,26,0,0,0,184,170Z"></path></svg>{% endexport %}
 {% set defaultSlot = component.defineSlot() %}
 {% set elements = craft.entries.search(props.search).all() %}
-<div>
-    {% for element in elements %}
-        {{ defaultSlot.render({element: element}) }}
-    {% endfor %}
-</div>
+{% for element in elements %}
+    {{ defaultSlot.render({element: element}) }}
+{% endfor %}

src/templates/components/icon.twig

@@ -7,5 +7,5 @@
 } %}
 {% export icon %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M69.69,62.1a6,6,0,0,0-11.38,0l-40,120A6,6,0,0,0,24,190h80a6,6,0,0,0,5.69-7.9ZM32.32,178,64,83l31.68,95ZM206,76a50,50,0,1,0-50,50A50.06,50.06,0,0,0,206,76Zm-88,0a38,38,0,1,1,38,38A38,38,0,0,1,118,76Zm106,70H136a6,6,0,0,0-6,6v56a6,6,0,0,0,6,6h88a6,6,0,0,0,6-6V152A6,6,0,0,0,224,146Zm-6,56H142V158h76Z"></path></svg>{% endexport %}
 {% if props.icon %}
-    {{ svg(parseEnv('@templates/icons/' ~ props.icon)) }}
+    {{ svg(parseEnv('@templates/icons/' ~ props.icon))|attr(attributes.toArray()) }}
 {% endif %}

src/templates/edit/design.twig

@@ -28,7 +28,7 @@
     {% endnamespace %}
 
     <div>
-        <p class="k-text-gray-400 k-text-sm">Design your component by adding design attributes from the dropdown below.</p>
+        <p class="k-text-gray-400 k-text-sm">Design your component by adding attributes from the dropdown.</p>
         <div class="k-flex k-gap-4">
             <div class="k-flex-grow">
                 {% include '_includes/forms/selectize' with {