aeico-components 0.1.9 → 0.1.10

package/dist/index.js

@@ -53,20 +53,12 @@ import { tags } from "aeico";
 
 // src/aeico-component.ts
 import { AeicoElement } from "aeico";
-
-// src/utils.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-function toKebab(str) {
-  const cleaned = str.replace(/^[_\d]+/, "");
-  return cleaned.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-
-// src/aeico-component.ts
 var TAG_NAME_PREFIX = "ae";
 var AeicoComponent = class extends AeicoElement {
-  static register(name) {
-    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
-    super.register(tagName);
+  static define(name) {
+    const prefix = `${TAG_NAME_PREFIX}-`;
+    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
+    super.define(tagName);
   }
 };
 var aeico_component_default = AeicoComponent;
@@ -221,7 +213,7 @@ var AeicoField = class _AeicoField extends aeico_component_default {
     }
   }
   /**
-   * Watcher for error property — syncs aria-invalid on the field element
+   * Watcher for error property - syncs aria-invalid on the field element
    */
   onErrorChanged(newValue) {
     if (this.fieldElement) {
@@ -436,7 +428,7 @@ var variables_default = `:root,
   --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
   --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
 
-  /* Gray  (neutral \u2014 base #6e6e6e) */
+  /* Gray  (neutral - base #6e6e6e) */
   --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
   --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
   --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
@@ -447,7 +439,7 @@ var variables_default = `:root,
   --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
   --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
 
-  /* Slate  (blue-gray \u2014 base #64748b, used for 'secondary') */
+  /* Slate  (blue-gray - base #64748b, used for 'secondary') */
   --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
   --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
   --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
@@ -483,7 +475,7 @@ var variables_default = `:root,
 
 :root,
 :host {
-  /* Hover / active mix (light default \u2014 overridden in \xA7 6 dark) */
+  /* Hover / active mix (light default - overridden in \xA7 6 dark) */
   --ae-color-mix-hover:  black 10%;
   --ae-color-mix-active: black 20%;
 
@@ -517,7 +509,7 @@ var variables_default = `:root,
   --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
   --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
 
-  /* Secondary (Slate) \u2014 base differs per theme, overridden in \xA7 6 dark */
+  /* Secondary (Slate) - base differs per theme, overridden in \xA7 6 dark */
   --ae-color-secondary:        var(--ae-slate-500);
   --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
   --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
@@ -533,7 +525,7 @@ var variables_default = `:root,
 :host {
   color-scheme: light;
 
-  /* Gray UI aliases \u2014 lighter palette steps for elements on white background */
+  /* Gray UI aliases - lighter palette steps for elements on white background */
   --ae-color-gray-dark:     var(--ae-gray-400);
   --ae-color-gray:          var(--ae-gray-300);
   --ae-color-gray-light:    var(--ae-gray-200);
@@ -565,7 +557,7 @@ var variables_default = `:root,
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
 
-  /* Subtle intent tokens \u2014 light context */
+  /* Subtle intent tokens - light context */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
   --ae-color-primary-text-emphasis:   var(--ae-blue-700);
@@ -596,7 +588,7 @@ var variables_default = `:root,
   --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
   --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
 
-  /* Component tokens \u2014 light defaults */
+  /* Component tokens - light defaults */
   --ae-action-btn-bg:          var(--ae-gray-200);
   --ae-action-btn-bg-hover:    var(--ae-color-primary);
   --ae-action-btn-color:       var(--ae-gray-600);
@@ -631,14 +623,12 @@ var variables_default = `:root,
   --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
 }
 
-/* Border-radius tokens \u2014 shared across all components */
+/* Border-radius tokens - shared across all components */
 :root,
 :host {
   /**
    * Unified border-radius hook for all components.
    *
-   * Not set by default \u2014 each component falls back to its own --ae-radius-*
-   * token (e.g. button \u2192 sm, card \u2192 lg, input \u2192 xs).
    *
    * Usage:
    *   :root { --ae-border-radius: 0; }       // global: all components square
@@ -660,7 +650,7 @@ var variables_default = `:root,
   --ae-radius-circle:  50%;
 }
 
-/* Layout tokens \u2014 defined on :root so all light DOM elements can use them */
+/* Layout tokens - defined on :root so all light DOM elements can use them */
 :root,
 :host {
   --container-max-width: 1280px;
@@ -673,18 +663,18 @@ var variables_default = `:root,
 :host-context([theme="dark"]) {
   color-scheme: dark;
 
-  /* Hover / active \u2014 slightly gentler on dark backgrounds */
+  /* Hover / active - slightly gentler on dark backgrounds */
   --ae-color-mix-hover:  black 8%;
   --ae-color-mix-active: black 16%;
 
-  /* Gray UI aliases \u2014 darker palette steps for elements on dark background */
+  /* Gray UI aliases - darker palette steps for elements on dark background */
   --ae-color-gray-dark:     var(--ae-gray-800);
   --ae-color-gray:          var(--ae-gray-700);
   --ae-color-gray-light:    var(--ae-gray-600);
   --ae-color-gray-lighter:  var(--ae-gray-500);
   --ae-color-gray-lightest: var(--ae-gray-400);
 
-  /* Secondary \u2014 deeper base on dark background */
+  /* Secondary - deeper base on dark background */
   --ae-color-secondary:      var(--ae-slate-700);
   --ae-color-secondary-text: var(--ae-slate-300);
 
@@ -713,7 +703,7 @@ var variables_default = `:root,
   --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
   --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
 
-  /* Subtle intent tokens \u2014 dark context (more alpha, lighter text-emphasis) */
+  /* Subtle intent tokens - dark context (more alpha, lighter text-emphasis) */
   --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
   --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
   --ae-color-primary-text-emphasis:   var(--ae-blue-300);
@@ -744,7 +734,7 @@ var variables_default = `:root,
   --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
   --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
 
-  /* Component tokens \u2014 dark overrides */
+  /* Component tokens - dark overrides */
   --ae-action-btn-bg:          var(--ae-color-gray);
   --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
   --ae-action-btn-color:       var(--ae-gray-400);
@@ -761,7 +751,7 @@ var size_default = ':host([size="xs"]) { font-size: var(--ae-size-xs); }\n:host(
 var field_label_default = ':host {\n  --field-label-gap: 4px;\n  --field-label-col-gap: 8px;\n  --field-label-width: 100px;\n  --field-label-font-size: 0.875em;\n  --field-label-color: inherit;\n  --field-required-color: var(--ae-red, #dc3545);\n  --field-helper-color: var(--ae-color-text-muted, #6e6e6e);\n  --field-error-color: var(--ae-red, #dc3545);\n}\n\n:host([label]) {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--field-label-gap);\n}\n\n:host([label][label-placement="left"]) {\n  display: grid;\n  grid-template-columns: var(--field-label-width) 1fr;\n  column-gap: var(--field-label-col-gap);\n  row-gap: var(--field-label-gap);\n  align-items: center;\n}\n\n:host([label][label-placement="left"]) .field-label {\n  align-self: center;\n}\n\n:host([label][label-placement="left"]) .field-helper,\n:host([label][label-placement="left"]) .field-error {\n  grid-column: 2;\n}\n\n.field-label {\n  font-size: var(--field-label-font-size);\n  color: var(--field-label-color);\n  user-select: none;\n  line-height: 1.4;\n}\n\n.field-required {\n  color: var(--field-required-color);\n  margin-left: 2px;\n}\n\n.field-helper {\n  font-size: 0.8em;\n  color: var(--field-helper-color);\n  line-height: 1.4;\n}\n\n.field-error {\n  font-size: 0.8em;\n  color: var(--field-error-color);\n  line-height: 1.4;\n}\n\n/* Action controls container (integrated style) */\n.action-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--field-action-gap, 4px) - 1px);\n  border: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--ae-border-subtle));\n  border-radius: 0 var(--field-action-border-radius, var(--ae-radius-xs)) var(--field-action-border-radius, var(--ae-radius-xs)) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: border-color 0.12s;\n  background: var(--field-action-bg, var(--ae-surface-base));\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.action-controls .action-btn {\n  border: none;\n  background: transparent;\n  color: var(--field-action-color, var(--ae-color-text-muted));\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.action-controls .action-btn:hover:not(:disabled) {\n  background: var(--field-action-bg-hover, var(--ae-surface-raised));\n}\n\n.action-controls .action-btn:active:not(:disabled) {\n  background: var(--field-action-bg-focus, var(--ae-surface-raised));\n}\n\n.action-controls .action-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.action-controls .action-btn + .action-btn {\n  border-left: var(--field-action-border-width, 1px) solid var(--field-action-border-color, var(--ae-border-subtle));\n}\n\n.input-container:has(input:focus) ~ .action-controls,\n.input-container:has(input:focus) .action-controls,\n.container:has(.trigger.open) ~ .action-controls,\n.container:has(.trigger.open) .action-controls {\n  border-color: var(--field-action-border-color-focus, var(--ae-border-focus));\n}\n\n.input-container:has(input:hover:not(:focus)) ~ .action-controls,\n.input-container:has(input:hover:not(:focus)) .action-controls,\n.container:has(.trigger:hover:not(.disabled)) ~ .action-controls,\n.container:has(.trigger:hover:not(.disabled)) .action-controls {\n  border-color: var(--field-action-border-color-hover, var(--ae-border-default));\n}\n';
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/action-button.css
-var action_button_default = "/* Action button base styles \u2014 shared by clear-btn and reset-btn (standalone mode) */\n.clear-btn:not(.action-btn),\n.reset-btn:not(.action-btn) {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:not(.action-btn) {\n  border-radius: var(--ae-clear-btn-border-radius);\n  background: var(--ae-clear-btn-bg);\n  color: var(--ae-clear-btn-color);\n  transition: var(--ae-clear-btn-transition);\n}\n\n.reset-btn:not(.action-btn) {\n  border-radius: var(--ae-reset-btn-border-radius);\n  background: var(--ae-reset-btn-bg);\n  color: var(--ae-reset-btn-color);\n  transition: var(--ae-reset-btn-transition);\n}\n\n.clear-btn:not(.action-btn):hover {\n  background: var(--ae-clear-btn-bg-hover);\n  color: var(--ae-clear-btn-color-hover);\n}\n\n.reset-btn:not(.action-btn):hover {\n  background: var(--ae-reset-btn-bg-hover);\n  color: var(--ae-reset-btn-color-hover);\n}\n";
+var action_button_default = "/* Action button base styles - shared by clear-btn and reset-btn (standalone mode) */\n.clear-btn:not(.action-btn),\n.reset-btn:not(.action-btn) {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:not(.action-btn) {\n  border-radius: var(--ae-clear-btn-border-radius);\n  background: var(--ae-clear-btn-bg);\n  color: var(--ae-clear-btn-color);\n  transition: var(--ae-clear-btn-transition);\n}\n\n.reset-btn:not(.action-btn) {\n  border-radius: var(--ae-reset-btn-border-radius);\n  background: var(--ae-reset-btn-bg);\n  color: var(--ae-reset-btn-color);\n  transition: var(--ae-reset-btn-transition);\n}\n\n.clear-btn:not(.action-btn):hover {\n  background: var(--ae-clear-btn-bg-hover);\n  color: var(--ae-clear-btn-color-hover);\n}\n\n.reset-btn:not(.action-btn):hover {\n  background: var(--ae-reset-btn-bg-hover);\n  color: var(--ae-reset-btn-color-hover);\n}\n";
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/text-input.css
 var text_input_default = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n";
@@ -769,7 +759,6 @@ var text_input_default = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0
 // src/text-input/text-input.ts
 var TextInput = class extends aeico_field_default {
   fieldElement = null;
-  static tagName = "text-input";
   static props = {
     placeholder: { type: String },
     type: { type: String }
@@ -806,7 +795,7 @@ var TextInput = class extends aeico_field_default {
     }
   }
 };
-TextInput.register();
+TextInput.define("text-input");
 var text_input_default2 = TextInput;
 
 // src/number-input/number-input.ts
@@ -818,7 +807,6 @@ var number_input_default = ":host {\n  display: block;\n  flex: 1;\n  min-width:
 // src/number-input/number-input.ts
 var NumberInput = class extends aeico_field_default {
   fieldElement = null;
-  static tagName = "number-input";
   static props = {
     placeholder: { type: String },
     min: { type: Number },
@@ -911,7 +899,7 @@ var NumberInput = class extends aeico_field_default {
     return { value, oldValue, action };
   }
 };
-NumberInput.register();
+NumberInput.define("number-input");
 var number_input_default2 = NumberInput;
 
 // src/textarea/textarea.ts
@@ -1002,9 +990,8 @@ __decorateElement(_init, 4, "minlength", _minlength_dec, Textarea, _minlength);
 __decorateElement(_init, 4, "resize", _resize_dec, Textarea, _resize);
 __decorateElement(_init, 4, "autoResize", _autoResize_dec, Textarea, _autoResize);
 __decoratorMetadata(_init, Textarea);
-__publicField(Textarea, "tagName", "textarea");
 __publicField(Textarea, "styles", [variables_default, size_default, field_label_default, action_button_default, textarea_default]);
-Textarea.register();
+Textarea.define("textarea");
 var textarea_default2 = Textarea;
 
 // src/select/select.ts
@@ -1075,7 +1062,7 @@ __decorateElement(_init2, 4, "disabled", _disabled_dec, Tag, _disabled);
 __decorateElement(_init2, 4, "pill", _pill_dec, Tag, _pill);
 __decoratorMetadata(_init2, Tag);
 __publicField(Tag, "styles", [variables_default, size_default, color_default, tag_default]);
-Tag.register();
+Tag.define("tag");
 var tag_default2 = Tag;
 
 // src/select/select.ts
@@ -1399,9 +1386,8 @@ __decorateElement(_init3, 4, "expandable", _expandable_dec, Select, _expandable)
 __decorateElement(_init3, 5, "value", _value_dec, Select);
 __decorateElement(_init3, 5, "defaultValue", _defaultValue_dec, Select);
 __decoratorMetadata(_init3, Select);
-__publicField(Select, "tagName", "select");
 __publicField(Select, "styles", [variables_default, size_default, field_label_default, action_button_default, select_default]);
-Select.register();
+Select.define("select");
 var select_default2 = Select;
 
 // src/select/select-option.ts
@@ -1451,9 +1437,8 @@ __decorateElement(_init4, 4, "label", _label_dec, SelectOption, _label);
 __decorateElement(_init4, 4, "disabled", _disabled_dec2, SelectOption, _disabled2);
 __decorateElement(_init4, 4, "selected", _selected_dec, SelectOption, _selected);
 __decoratorMetadata(_init4, SelectOption);
-__publicField(SelectOption, "tagName", "select-option");
 __publicField(SelectOption, "styles", [variables_default, select_option_default]);
-SelectOption.register();
+SelectOption.define("select-option");
 
 // src/slider/slider.ts
 import { html as html7, tags as tags3 } from "aeico";
@@ -1772,7 +1757,6 @@ import { prop as prop5 } from "aeico";
 var _marks_dec, _tracked_dec, _editable_dec, _step_dec, _max_dec, _min_dec, _percentage_dec, _options_dec2, _a5, _init5, _options2, _percentage, _min, _max, _step, _editable, _tracked, _marks;
 var Slider = class extends (_a5 = aeico_field_default, _options_dec2 = [prop5({ type: Array })], _percentage_dec = [prop5({ type: Boolean })], _min_dec = [prop5({ type: Number })], _max_dec = [prop5({ type: Number })], _step_dec = [prop5({ type: Number })], _editable_dec = [prop5({ type: Boolean })], _tracked_dec = [prop5({ type: Boolean })], _marks_dec = [prop5({
   type: Array,
-  // bare attribute (<ae-slider marks>) → true; JSON array → MarkItem[]
   parser: (value) => {
     if (value === null) return void 0;
     if (value === "" || value === "true") return true;
@@ -2036,9 +2020,8 @@ __decorateElement(_init5, 4, "editable", _editable_dec, Slider, _editable);
 __decorateElement(_init5, 4, "tracked", _tracked_dec, Slider, _tracked);
 __decorateElement(_init5, 4, "marks", _marks_dec, Slider, _marks);
 __decoratorMetadata(_init5, Slider);
-__publicField(Slider, "tagName", "slider");
 __publicField(Slider, "styles", [variables_default, size_default, color_default, field_label_default, action_button_default, slider_default]);
-Slider.register();
+Slider.define("slider");
 var slider_default2 = Slider;
 
 // src/checkbox/checkbox.ts
@@ -2050,7 +2033,6 @@ var checkbox_default = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\
 // src/checkbox/checkbox.ts
 var Checkbox = class extends aeico_field_default {
   fieldElement = null;
-  static tagName = "checkbox";
   static props = {
     checked: { type: Boolean },
     defaultChecked: { type: Boolean },
@@ -2117,7 +2099,7 @@ var Checkbox = class extends aeico_field_default {
     });
   }
 };
-Checkbox.register();
+Checkbox.define("checkbox");
 var checkbox_default2 = Checkbox;
 
 // src/radio-group/radio-group.ts
@@ -2133,7 +2115,6 @@ var RadioGroup = class _RadioGroup extends aeico_field_default {
   _slotOptions = [];
   static _instanceCount = 0;
   _groupName;
-  static tagName = "radio-group";
   static props = {
     options: { type: Array },
     mode: { type: String },
@@ -2177,7 +2158,7 @@ var RadioGroup = class _RadioGroup extends aeico_field_default {
     );
     this.update();
   }
-  // Single handler for radio inputs — handles both select and deselect.
+  // Single handler for radio inputs - handles both select and deselect.
   // Only uses `click` (not `change`) because `change` fires before `click`;
   // if we set value in `change`, the `click` handler would see the updated
   // value and immediately deselect.
@@ -2287,25 +2268,27 @@ var RadioGroup = class _RadioGroup extends aeico_field_default {
     }
   }
 };
-RadioGroup.register();
+RadioGroup.define("radio-group");
 var radio_group_default2 = RadioGroup;
 
 // src/radio-group/radio.ts
 var Radio = class extends aeico_component_default {
-  static tagName = "radio";
-  /** No shadow DOM — this element is a transparent data/content carrier. */
+  /** No shadow DOM - this element is a transparent data/content carrier. */
   static useShadowDOM = false;
   static props = {
     value: { type: String },
     disabled: { type: Boolean }
   };
 };
-Radio.register();
+Radio.define("radio");
 var radio_default = Radio;
 
 // src/switch/switch.ts
 import { html as html11, prop as prop6 } from "aeico";
 
+// src/utils.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+
 // src/icon/icon.ts
 import { html as html10 } from "aeico";
 
@@ -2318,7 +2301,7 @@ var defaultViewBox = "0 0 24 24";
 // src/icon/registry.ts
 var IconRegistry = class {
   static _icons = /* @__PURE__ */ new Map();
-  /** Names registered via addBuiltIn — can be overridden by user add() calls */
+  /** Names registered via addBuiltIn - can be overridden by user add() calls */
   static _builtInKeys = /* @__PURE__ */ new Set();
   /** Register user icons. Always takes priority over built-in icons. */
   static add(icons) {
@@ -2370,7 +2353,6 @@ registry_default.addBuiltIn({
 
 // src/icon/icon.ts
 var Icon = class extends aeico_component_default {
-  static tagName = "icon";
   static props = {
     name: { type: String },
     size: { type: String },
@@ -2430,7 +2412,7 @@ var Icon = class extends aeico_component_default {
     });
   }
 };
-Icon.register();
+Icon.define("icon");
 var icon_default2 = Icon;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/switch.css
@@ -2539,7 +2521,6 @@ __decorateElement(_init6, 4, "icon", _icon_dec, Switch, _icon);
 __decorateElement(_init6, 4, "iconChecked", _iconChecked_dec, Switch, _iconChecked);
 __decorateElement(_init6, 4, "iconPlacement", _iconPlacement_dec, Switch, _iconPlacement);
 __decoratorMetadata(_init6, Switch);
-__publicField(Switch, "tagName", "switch");
 __publicField(Switch, "styles", [
   variables_default,
   size_default,
@@ -2548,7 +2529,7 @@ __publicField(Switch, "styles", [
   action_button_default,
   switch_default
 ]);
-Switch.register();
+Switch.define("switch");
 var switch_default2 = Switch;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/breadcrumb.css
@@ -2622,9 +2603,8 @@ _color2 = new WeakMap();
 __decorateElement(_init7, 4, "separator", _separator_dec, Breadcrumb, _separator);
 __decorateElement(_init7, 4, "color", _color_dec2, Breadcrumb, _color2);
 __decoratorMetadata(_init7, Breadcrumb);
-__publicField(Breadcrumb, "tagName", "breadcrumb");
 __publicField(Breadcrumb, "styles", [variables_default, color_default, breadcrumb_default]);
-Breadcrumb.register();
+Breadcrumb.define("breadcrumb");
 var breadcrumb_default2 = Breadcrumb;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/breadcrumb-item.css
@@ -2639,7 +2619,7 @@ var breadcrumb_item_default = `:host {
   white-space: nowrap;
 }
 
-/* Separator \u2014 uses a fixed muted color that does NOT follow the breadcrumb's color prop */
+/* Separator - uses a fixed muted color that does NOT follow the breadcrumb's color prop */
 .sep {
   display: inline-flex;
   align-items: center;
@@ -2663,7 +2643,7 @@ var breadcrumb_item_default = `:host {
   color: var(--ae-color-text-muted);
 }
 
-/* Current page \u2014 last item */
+/* Current page - last item */
 :host([aria-current="page"]) .label {
   color: var(--ae-color-text-main);
   font-weight: 500;
@@ -2721,9 +2701,8 @@ _init8 = __decoratorStart(_a8);
 _href = new WeakMap();
 __decorateElement(_init8, 4, "href", _href_dec, BreadcrumbItem, _href);
 __decoratorMetadata(_init8, BreadcrumbItem);
-__publicField(BreadcrumbItem, "tagName", "breadcrumb-item");
 __publicField(BreadcrumbItem, "styles", [variables_default, breadcrumb_item_default]);
-BreadcrumbItem.register();
+BreadcrumbItem.define("breadcrumb-item");
 var breadcrumb_item_default2 = BreadcrumbItem;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/button.css
@@ -2845,7 +2824,6 @@ button:disabled {
   background: var(--ae-color-subtle-hover);
 }
 
-/* Icon-only: single ae-icon child \u2192 square compact layout */
 :host([icon-only]) {
   display: inline-flex;
 }
@@ -3024,7 +3002,7 @@ __decorateElement(_init9, 5, "active", _active_dec, Button);
 __decorateElement(_init9, 5, "block", _block_dec, Button);
 __decoratorMetadata(_init9, Button);
 __publicField(Button, "styles", [variables_default, size_default, color_default, button_default]);
-Button.register();
+Button.define("button");
 var button_default2 = Button;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/copy-button.css
@@ -3277,7 +3255,7 @@ __decorateElement(_init10, 4, "trigger", _trigger_dec, Tooltip, _trigger);
 __decorateElement(_init10, 4, "open", _open_dec, Tooltip, _open);
 __decoratorMetadata(_init10, Tooltip);
 __publicField(Tooltip, "styles", [variables_default, tooltip_default]);
-Tooltip.register();
+Tooltip.define("tooltip");
 var tooltip_default2 = Tooltip;
 
 // src/copy-button/copy-button.ts
@@ -3396,7 +3374,7 @@ __decorateElement(_init11, 4, "tooltipCopied", _tooltipCopied_dec, CopyButton, _
 __decorateElement(_init11, 4, "tooltipPlacement", _tooltipPlacement_dec, CopyButton, _tooltipPlacement);
 __decoratorMetadata(_init11, CopyButton);
 __publicField(CopyButton, "styles", [variables_default, size_default, color_default, copy_button_default]);
-CopyButton.register();
+CopyButton.define("copy-button");
 var copy_button_default2 = CopyButton;
 
 // src/dropdown/dropdown.ts
@@ -3404,7 +3382,7 @@ import { html as html18 } from "aeico";
 import { prop as prop13 } from "aeico";
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/dropdown.css
-var dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n\n  --dropdown-z-index: 1000;\n  --dropdown-bg: var(--ae-surface-overlay, #fff);\n  --dropdown-border: 1px solid var(--ae-color-border, rgba(0, 0, 0, 0.12));\n  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --dropdown-min-width: 10rem;\n  --dropdown-padding: 0.25rem 0;\n}\n\n.trigger-wrapper {\n  display: flex;\n  align-items: stretch;\n  height: 100%;\n}\n\n/* Internal trigger rendered when `label` prop is set.\n   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)\n   map their own tokens to these variables via ::slotted(ae-dropdown). */\n.trigger-label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dropdown-trigger-height, auto);\n  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);\n  color: var(--dropdown-trigger-color, inherit);\n  background: var(--dropdown-trigger-bg, none);\n  border: none;\n  border-radius: var(--dropdown-trigger-radius, 0);\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--dropdown-trigger-font-size, inherit);\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n.trigger-label:hover {\n  color: var(--dropdown-trigger-hover-color, inherit);\n  background-color: var(--dropdown-trigger-hover-bg, transparent);\n}\n\n:host([disabled]) .trigger-label {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Bootstrap-style CSS border caret \u2014 shadow DOM only, no global injection needed */\n.ae-dropdown-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.3em;\n  vertical-align: 0.2em;\n  flex-shrink: 0;\n}\n.ae-dropdown-arrow--bottom {\n  border-top: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--top {\n  border-bottom: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--right {\n  border-left: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--left {\n  border-right: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n\n.panel {\n  display: none;\n  position: absolute;\n  z-index: var(--dropdown-z-index);\n  background: var(--dropdown-bg);\n  border: var(--dropdown-border);\n  border-radius: var(--ae-border-radius, var(--ae-radius-md));\n  box-shadow: var(--dropdown-shadow);\n  min-width: var(--dropdown-min-width);\n  padding: var(--dropdown-padding);\n  box-sizing: border-box;\n  /* Prevent panel from being wider than viewport */\n  max-width: calc(100vw - 16px);\n}\n\n.panel.open {\n  display: block;\n}\n\n/* placement variants */\n.panel.placement-bottom-start {\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom-end {\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 4px;\n}\n\n.panel.placement-top-start {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top-end {\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 4px;\n}\n\n/* right placements */\n.panel.placement-right-start {\n  top: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right-end {\n  bottom: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right {\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n  margin-left: 4px;\n}\n\n/* left placements */\n.panel.placement-left-start {\n  top: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left-end {\n  bottom: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left {\n  top: 50%;\n  right: 100%;\n  transform: translateY(-50%);\n  margin-right: 4px;\n}\n";
+var dropdown_default = ":host {\n  display: inline-block;\n  position: relative;\n\n  --dropdown-z-index: 1000;\n  --dropdown-bg: var(--ae-surface-overlay, #fff);\n  --dropdown-border: 1px solid var(--ae-color-border, rgba(0, 0, 0, 0.12));\n  --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  --dropdown-min-width: 10rem;\n  --dropdown-padding: 0.25rem 0;\n}\n\n.trigger-wrapper {\n  display: flex;\n  align-items: stretch;\n  height: 100%;\n}\n\n/* Internal trigger rendered when `label` prop is set.\n   Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)\n   map their own tokens to these variables via ::slotted(ae-dropdown). */\n.trigger-label {\n  display: inline-flex;\n  align-items: center;\n  height: var(--dropdown-trigger-height, auto);\n  padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);\n  color: var(--dropdown-trigger-color, inherit);\n  background: var(--dropdown-trigger-bg, none);\n  border: none;\n  border-radius: var(--dropdown-trigger-radius, 0);\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  font: inherit;\n  font-size: var(--dropdown-trigger-font-size, inherit);\n  white-space: nowrap;\n  transition: color 0.15s ease, background-color 0.15s ease;\n  outline-offset: 2px;\n}\n\n.trigger-label:hover {\n  color: var(--dropdown-trigger-hover-color, inherit);\n  background-color: var(--dropdown-trigger-hover-bg, transparent);\n}\n\n:host([disabled]) .trigger-label {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Bootstrap-style CSS border caret - shadow DOM only, no global injection needed */\n.ae-dropdown-arrow {\n  display: inline-block;\n  width: 0;\n  height: 0;\n  margin-left: 0.3em;\n  vertical-align: 0.2em;\n  flex-shrink: 0;\n}\n.ae-dropdown-arrow--bottom {\n  border-top: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--top {\n  border-bottom: 0.35em solid;\n  border-right: 0.35em solid transparent;\n  border-left: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--right {\n  border-left: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n.ae-dropdown-arrow--left {\n  border-right: 0.35em solid;\n  border-top: 0.35em solid transparent;\n  border-bottom: 0.35em solid transparent;\n}\n\n.panel {\n  display: none;\n  position: absolute;\n  z-index: var(--dropdown-z-index);\n  background: var(--dropdown-bg);\n  border: var(--dropdown-border);\n  border-radius: var(--ae-border-radius, var(--ae-radius-md));\n  box-shadow: var(--dropdown-shadow);\n  min-width: var(--dropdown-min-width);\n  padding: var(--dropdown-padding);\n  box-sizing: border-box;\n  /* Prevent panel from being wider than viewport */\n  max-width: calc(100vw - 16px);\n}\n\n.panel.open {\n  display: block;\n}\n\n/* placement variants */\n.panel.placement-bottom-start {\n  top: 100%;\n  left: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom-end {\n  top: 100%;\n  right: 0;\n  margin-top: 4px;\n}\n\n.panel.placement-bottom {\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: 4px;\n}\n\n.panel.placement-top-start {\n  bottom: 100%;\n  left: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top-end {\n  bottom: 100%;\n  right: 0;\n  margin-bottom: 4px;\n}\n\n.panel.placement-top {\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: 4px;\n}\n\n/* right placements */\n.panel.placement-right-start {\n  top: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right-end {\n  bottom: 0;\n  left: 100%;\n  margin-left: 4px;\n}\n\n.panel.placement-right {\n  top: 50%;\n  left: 100%;\n  transform: translateY(-50%);\n  margin-left: 4px;\n}\n\n/* left placements */\n.panel.placement-left-start {\n  top: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left-end {\n  bottom: 0;\n  right: 100%;\n  margin-right: 4px;\n}\n\n.panel.placement-left {\n  top: 50%;\n  right: 100%;\n  transform: translateY(-50%);\n  margin-right: 4px;\n}\n";
 
 // src/dropdown/dropdown-item.ts
 import { html as html17 } from "aeico";
@@ -3468,14 +3446,14 @@ var dropdown_item_default = `:host {
   pointer-events: none;
 }
 
-/* Active item \u2014 current selection, current route, etc. */
+/* Active item - current selection, current route, etc. */
 :host([active]) .item {
   background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
   color: var(--dropdown-item-color-active, var(--ae-color-primary, #0e639c));
   font-weight: 500;
 }
 
-/* Checkbox mode \u2014 fixed-width indicator column */
+/* Checkbox mode - fixed-width indicator column */
 .check-indicator {
   display: inline-flex;
   align-items: center;
@@ -3586,9 +3564,8 @@ __decorateElement(_init12, 4, "type", _type_dec2, DropdownItem, _type);
 __decorateElement(_init12, 4, "checked", _checked_dec2, DropdownItem, _checked2);
 __decorateElement(_init12, 4, "active", _active_dec2, DropdownItem, _active);
 __decoratorMetadata(_init12, DropdownItem);
-__publicField(DropdownItem, "tagName", "dropdown-item");
 __publicField(DropdownItem, "styles", [variables_default, dropdown_item_default]);
-DropdownItem.register();
+DropdownItem.define("dropdown-item");
 var dropdown_item_default2 = DropdownItem;
 
 // src/dropdown/dropdown.ts
@@ -3604,7 +3581,7 @@ var Dropdown = class extends (_a13 = aeico_component_default, _placement_dec2 =
     __publicField(this, "_outsideClickHandler", null);
     // Called via declarative @click on the trigger-wrapper div inside the shadow DOM.
     // Events from slotted trigger content bubble through the shadow DOM slot path,
-    // so this fires for trigger clicks only — not for panel item clicks.
+    // so this fires for trigger clicks only - not for panel item clicks.
     __publicField(this, "_handleTriggerClick", () => {
       this.toggle();
     });
@@ -3722,9 +3699,8 @@ __decorateElement(_init13, 4, "closeOnSelect", _closeOnSelect_dec, Dropdown, _cl
 __decorateElement(_init13, 4, "disabled", _disabled_dec7, Dropdown, _disabled6);
 __decorateElement(_init13, 4, "label", _label_dec2, Dropdown, _label2);
 __decoratorMetadata(_init13, Dropdown);
-__publicField(Dropdown, "tagName", "dropdown");
 __publicField(Dropdown, "styles", [variables_default, dropdown_default]);
-Dropdown.register();
+Dropdown.define("dropdown");
 var dropdown_default2 = Dropdown;
 
 // src/dropdown/dropdown-button.ts
@@ -3798,7 +3774,6 @@ __decorateElement(_init14, 4, "disabled", _disabled_dec8, DropdownButton, _disab
 __decorateElement(_init14, 4, "placement", _placement_dec3, DropdownButton, _placement3);
 __decorateElement(_init14, 4, "closeOnSelect", _closeOnSelect_dec2, DropdownButton, _closeOnSelect2);
 __decoratorMetadata(_init14, DropdownButton);
-__publicField(DropdownButton, "tagName", "dropdown-button");
 // ae-button and ae-dropdown each carry their own shadow DOM styles.
 // Only the host display is set here so button-group compact layout works.
 __publicField(DropdownButton, "styles", [
@@ -3809,7 +3784,7 @@ __publicField(DropdownButton, "styles", [
   ".caret--right { border-left: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }",
   ".caret--left { border-right: 0.35em solid; border-top: 0.35em solid transparent; border-bottom: 0.35em solid transparent; }"
 ]);
-DropdownButton.register();
+DropdownButton.define("dropdown-button");
 var dropdown_button_default = DropdownButton;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/button-group.css
@@ -3883,7 +3858,7 @@ var ButtonGroup = class extends aeico_component_default {
     btn.style.removeProperty("--_btn-r-bl");
   }
 };
-ButtonGroup.register();
+ButtonGroup.define("button-group");
 var button_group_default2 = ButtonGroup;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/badge.css
@@ -3922,7 +3897,7 @@ __decorateElement(_init15, 4, "size", _size_dec5, Badge, _size4);
 __decorateElement(_init15, 4, "pill", _pill_dec2, Badge, _pill2);
 __decoratorMetadata(_init15, Badge);
 __publicField(Badge, "styles", [variables_default, size_default, color_default, badge_default]);
-Badge.register();
+Badge.define("badge");
 var badge_default2 = Badge;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/alert.css
@@ -3942,7 +3917,7 @@ var alert_default = `.alert {
   margin-bottom: 0;
 }
 
-/* default color (no [color] attribute) \u2014 primary */
+/* default color (no [color] attribute) - primary */
 :host(:not([color])) {
   --ae-color-solid:           var(--ae-color-primary);
   --ae-color-on-solid:        var(--ae-color-text-main);
@@ -4079,7 +4054,7 @@ var Alert = class extends aeico_component_default {
     this.remove();
   };
 };
-Alert.register();
+Alert.define("alert");
 var alert_default2 = Alert;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/dialog.css
@@ -4194,7 +4169,7 @@ var Dialog = class extends aeico_component_default {
     return this._dialogEl?.open ?? false;
   }
 };
-Dialog.register();
+Dialog.define("dialog");
 var dialog_default2 = Dialog;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/drawer.css
@@ -4343,13 +4318,12 @@ __decorateElement(_init16, 4, "header", _header_dec, Drawer, _header);
 __decorateElement(_init16, 4, "closeOnOverlayClick", _closeOnOverlayClick_dec, Drawer, _closeOnOverlayClick);
 __decoratorMetadata(_init16, Drawer);
 __publicField(Drawer, "styles", [variables_default, drawer_default]);
-Drawer.register();
+Drawer.define("drawer");
 var drawer_default2 = Drawer;
 
 // src/icon-button/icon-button.ts
 import { html as html25 } from "aeico";
 var IconButton = class extends aeico_component_default {
-  static tagName = "icon-button";
   static props = {
     icon: { type: String },
     size: { type: String },
@@ -4374,7 +4348,7 @@ var IconButton = class extends aeico_component_default {
     });
   }
 };
-IconButton.register();
+IconButton.define("icon-button");
 var icon_button_default = IconButton;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tabs.css
@@ -4485,7 +4459,7 @@ var Tabs = class extends aeico_component_default {
     });
   }
 };
-Tabs.register();
+Tabs.define("tabs");
 var tabs_default2 = Tabs;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab.css
@@ -4532,7 +4506,7 @@ var Tab = class extends aeico_component_default {
     });
   }
 };
-Tab.register();
+Tab.define("tab");
 var tab_default2 = Tab;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/tab-panel.css
@@ -4548,11 +4522,11 @@ var TabPanel = class extends aeico_component_default {
     });
   }
 };
-TabPanel.register();
+TabPanel.define("tab-panel");
 var tab_panel_default2 = TabPanel;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/divider.css
-var divider_default = ":host {\n  display: block;\n  width: 100%;\n  height: var(--thickness, 1px);\n  flex-shrink: 0;\n\n  /* Override color.css default \u2014 divider uses the subtle border token when no [color] is set */\n  --ae-color-border: var(--ae-border-default);\n\n  background: var(--ae-color-border);\n}\n\n:host([vertical]) {\n  display: inline-block;\n  width: var(--thickness, 1px);\n  height: 1lh;\n  vertical-align: middle;\n}\n";
+var divider_default = ":host {\n  display: block;\n  width: 100%;\n  height: var(--thickness, 1px);\n  flex-shrink: 0;\n\n  /* Override color.css default - divider uses the subtle border token when no [color] is set */\n  --ae-color-border: var(--ae-border-default);\n\n  background: var(--ae-color-border);\n}\n\n:host([vertical]) {\n  display: inline-block;\n  width: var(--thickness, 1px);\n  height: 1lh;\n  vertical-align: middle;\n}\n";
 
 // src/divider/divider.ts
 import { prop as prop17 } from "aeico";
@@ -4580,9 +4554,8 @@ __decorateElement(_init17, 4, "vertical", _vertical_dec, Divider, _vertical);
 __decorateElement(_init17, 4, "thickness", _thickness_dec, Divider, _thickness);
 __decorateElement(_init17, 4, "color", _color_dec7, Divider, _color6);
 __decoratorMetadata(_init17, Divider);
-__publicField(Divider, "tagName", "divider");
 __publicField(Divider, "styles", [variables_default, color_default, divider_default]);
-Divider.register();
+Divider.define("divider");
 var divider_default2 = Divider;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/card.css
@@ -4628,9 +4601,8 @@ _variant5 = new WeakMap();
 __decorateElement(_init18, 4, "color", _color_dec8, Card, _color7);
 __decorateElement(_init18, 4, "variant", _variant_dec6, Card, _variant5);
 __decoratorMetadata(_init18, Card);
-__publicField(Card, "tagName", "card");
 __publicField(Card, "styles", [variables_default, color_default, card_default]);
-Card.register();
+Card.define("card");
 var card_default2 = Card;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/navbar.css
@@ -4724,9 +4696,8 @@ __decorateElement(_init19, 4, "sticky", _sticky_dec, Navbar, _sticky);
 __decorateElement(_init19, 4, "appearance", _appearance_dec, Navbar, _appearance);
 __decorateElement(_init19, 4, "open", _open_dec3, Navbar, _open3);
 __decoratorMetadata(_init19, Navbar);
-__publicField(Navbar, "tagName", "navbar");
 __publicField(Navbar, "styles", [variables_default, color_default, navbar_default]);
-Navbar.register();
+Navbar.define("navbar");
 var navbar_default2 = Navbar;
 
 // src/spinner/spinner.ts
@@ -4781,9 +4752,8 @@ __decorateElement(_init20, 4, "color", _color_dec10, Spinner, _color9);
 __decorateElement(_init20, 4, "label", _label_dec4, Spinner, _label4);
 __decorateElement(_init20, 4, "speed", _speed_dec, Spinner, _speed);
 __decoratorMetadata(_init20, Spinner);
-__publicField(Spinner, "tagName", "spinner");
 __publicField(Spinner, "styles", [variables_default, size_default, color_default, spinner_default]);
-Spinner.register();
+Spinner.define("spinner");
 var spinner_default2 = Spinner;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/detail.css
@@ -4882,9 +4852,8 @@ __decorateElement(_init21, 4, "color", _color_dec11, Detail, _color10);
 __decorateElement(_init21, 4, "disabled", _disabled_dec9, Detail, _disabled8);
 __decorateElement(_init21, 4, "iconPlacement", _iconPlacement_dec2, Detail, _iconPlacement2);
 __decoratorMetadata(_init21, Detail);
-__publicField(Detail, "tagName", "detail");
 __publicField(Detail, "styles", [variables_default, color_default, detail_default]);
-Detail.register();
+Detail.define("detail");
 var detail_default2 = Detail;
 
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/detail-group.css
@@ -4893,7 +4862,6 @@ var detail_group_default = ":host {\n  display: block;\n}\n\n/* Raise hovered/fo
 // src/detail-group/detail-group.ts
 import { html as html33 } from "aeico";
 var DetailGroup = class extends aeico_component_default {
-  static tagName = "detail-group";
   static props = {
     multiple: { type: Boolean },
     variant: { type: String },
@@ -4943,7 +4911,7 @@ var DetailGroup = class extends aeico_component_default {
     });
   }
 };
-DetailGroup.register();
+DetailGroup.define("detail-group");
 var detail_group_default2 = DetailGroup;
 
 // src/progress-bar/progress-bar.ts
@@ -4998,9 +4966,8 @@ __decorateElement(_init22, 4, "label", _label_dec5, ProgressBar, _label5);
 __decorateElement(_init22, 4, "color", _color_dec12, ProgressBar, _color11);
 __decorateElement(_init22, 4, "animated", _animated_dec, ProgressBar, _animated);
 __decoratorMetadata(_init22, ProgressBar);
-__publicField(ProgressBar, "tagName", "progress-bar");
 __publicField(ProgressBar, "styles", [variables_default, color_default, progress_bar_default]);
-ProgressBar.register();
+ProgressBar.define("progress-bar");
 var progress_bar_default2 = ProgressBar;
 
 // src/menu/menu.ts
@@ -5261,9 +5228,8 @@ __decorateElement(_init23, 4, "selected", _selected_dec2, MenuItem, _selected2);
 __decorateElement(_init23, 4, "open", _open_dec4, MenuItem, _open4);
 __decorateElement(_init23, 4, "iconPlacement", _iconPlacement_dec3, MenuItem, _iconPlacement3);
 __decoratorMetadata(_init23, MenuItem);
-__publicField(MenuItem, "tagName", "menu-item");
 __publicField(MenuItem, "styles", [variables_default, menu_item_default]);
-MenuItem.register();
+MenuItem.define("menu-item");
 var menu_item_default2 = MenuItem;
 
 // src/menu/menu.ts
@@ -5318,9 +5284,8 @@ __decorateElement(_init24, 4, "trigger", _trigger_dec2, Menu, _trigger2);
 __decorateElement(_init24, 4, "selectedKey", _selectedKey_dec, Menu, _selectedKey);
 __decorateElement(_init24, 4, "wrapText", _wrapText_dec, Menu, _wrapText);
 __decoratorMetadata(_init24, Menu);
-__publicField(Menu, "tagName", "menu");
 __publicField(Menu, "styles", [variables_default, menu_default]);
-Menu.register();
+Menu.define("menu");
 var menu_default2 = Menu;
 
 // src/pagination/pagination.ts
@@ -5749,9 +5714,8 @@ __decorateElement(_init25, 4, "simple", _simple_dec, Pagination, _simple);
 __decorateElement(_init25, 4, "showFirstLast", _showFirstLast_dec, Pagination, _showFirstLast);
 __decorateElement(_init25, 4, "variant", _variant_dec9, Pagination, _variant8);
 __decoratorMetadata(_init25, Pagination);
-__publicField(Pagination, "tagName", "pagination");
 __publicField(Pagination, "styles", [variables_default, size_default, pagination_default]);
-Pagination.register();
+Pagination.define("pagination");
 var pagination_default2 = Pagination;
 
 // src/tree/tree.ts
@@ -5963,9 +5927,8 @@ __decorateElement(_init26, 4, "selected", _selected_dec3, TreeItem, _selected3);
 __decorateElement(_init26, 4, "checked", _checked_dec3, TreeItem, _checked3);
 __decorateElement(_init26, 4, "indeterminate", _indeterminate_dec, TreeItem, _indeterminate);
 __decoratorMetadata(_init26, TreeItem);
-__publicField(TreeItem, "tagName", "tree-item");
 __publicField(TreeItem, "styles", [variables_default, tree_item_default]);
-TreeItem.register();
+TreeItem.define("tree-item");
 var tree_item_default2 = TreeItem;
 
 // src/tree/tree.ts
@@ -6136,9 +6099,8 @@ __decorateElement(_init27, 4, "defaultExpandAll", _defaultExpandAll_dec, Tree, _
 __decorateElement(_init27, 4, "selectedKey", _selectedKey_dec2, Tree, _selectedKey2);
 __decorateElement(_init27, 4, "icon", _icon_dec3, Tree, _icon3);
 __decoratorMetadata(_init27, Tree);
-__publicField(Tree, "tagName", "tree");
 __publicField(Tree, "styles", [variables_default, tree_default]);
-Tree.register();
+Tree.define("tree");
 var tree_default2 = Tree;
 export {
   alert_default2 as Alert,