aeico-components 0.1.8 → 0.1.10

package/dist/index.cjs

@@ -159,7 +159,7 @@ var require_variables = __commonJS({
   --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);
@@ -170,7 +170,7 @@ var require_variables = __commonJS({
   --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);
@@ -206,7 +206,7 @@ var require_variables = __commonJS({
 
 :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%;
 
@@ -240,7 +240,7 @@ var require_variables = __commonJS({
   --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));
@@ -256,7 +256,7 @@ var require_variables = __commonJS({
 :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);
@@ -288,7 +288,7 @@ var require_variables = __commonJS({
   --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);
@@ -319,7 +319,7 @@ var require_variables = __commonJS({
   --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);
@@ -354,14 +354,12 @@ var require_variables = __commonJS({
   --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
@@ -383,7 +381,7 @@ var require_variables = __commonJS({
   --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;
@@ -396,18 +394,18 @@ var require_variables = __commonJS({
 :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);
 
@@ -436,7 +434,7 @@ var require_variables = __commonJS({
   --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);
@@ -467,7 +465,7 @@ var require_variables = __commonJS({
   --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);
@@ -496,7 +494,7 @@ var require_field_label = __commonJS({
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/action-button.css
 var require_action_button = __commonJS({
   "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/action-button.css"(exports2, module2) {
-    module2.exports = "/* 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";
+    module2.exports = "/* 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";
   }
 });
 
@@ -911,7 +909,7 @@ var require_breadcrumb_item = __commonJS({
   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;
@@ -935,7 +933,7 @@ var require_breadcrumb_item = __commonJS({
   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;
@@ -1084,7 +1082,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;
 }
@@ -1291,7 +1288,7 @@ var require_tooltip = __commonJS({
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/dropdown.css
 var require_dropdown = __commonJS({
   "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/dropdown.css"(exports2, module2) {
-    module2.exports = ":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";
+    module2.exports = ":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";
   }
 });
 
@@ -1356,14 +1353,14 @@ var require_dropdown_item = __commonJS({
   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;
@@ -1425,7 +1422,7 @@ var require_alert = __commonJS({
   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);
@@ -1549,7 +1546,7 @@ var require_tab_panel = __commonJS({
 // css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/divider.css
 var require_divider = __commonJS({
   "css-inline:/home/runner/work/aeico-components/aeico-components/src/styles/components/divider.css"(exports2, module2) {
-    module2.exports = ":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";
+    module2.exports = ":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";
   }
 });
 
@@ -1887,20 +1884,12 @@ var import_aeico2 = require("aeico");
 
 // src/aeico-component.ts
 var import_aeico = require("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 import_aeico.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;
@@ -2055,7 +2044,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) {
@@ -2199,7 +2188,6 @@ var import_action_button = __toESM(require_action_button(), 1);
 var import_text_input = __toESM(require_text_input(), 1);
 var TextInput = class extends aeico_field_default {
   fieldElement = null;
-  static tagName = "text-input";
   static props = {
     placeholder: { type: String },
     type: { type: String }
@@ -2236,7 +2224,7 @@ var TextInput = class extends aeico_field_default {
     }
   }
 };
-TextInput.register();
+TextInput.define("text-input");
 var text_input_default = TextInput;
 
 // src/number-input/number-input.ts
@@ -2248,7 +2236,6 @@ var import_action_button2 = __toESM(require_action_button(), 1);
 var import_number_input = __toESM(require_number_input(), 1);
 var NumberInput = class extends aeico_field_default {
   fieldElement = null;
-  static tagName = "number-input";
   static props = {
     placeholder: { type: String },
     min: { type: Number },
@@ -2341,7 +2328,7 @@ var NumberInput = class extends aeico_field_default {
     return { value, oldValue, action };
   }
 };
-NumberInput.register();
+NumberInput.define("number-input");
 var number_input_default = NumberInput;
 
 // src/textarea/textarea.ts
@@ -2432,9 +2419,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", [import_variables3.default, import_size3.default, import_field_label3.default, import_action_button3.default, import_textarea.default]);
-Textarea.register();
+Textarea.define("textarea");
 var textarea_default = Textarea;
 
 // src/select/select.ts
@@ -2505,7 +2491,7 @@ __decorateElement(_init2, 4, "disabled", _disabled_dec, Tag, _disabled);
 __decorateElement(_init2, 4, "pill", _pill_dec, Tag, _pill);
 __decoratorMetadata(_init2, Tag);
 __publicField(Tag, "styles", [import_variables4.default, import_size4.default, import_color.default, import_tag.default]);
-Tag.register();
+Tag.define("tag");
 var tag_default = Tag;
 
 // src/select/select.ts
@@ -2829,9 +2815,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", [import_variables5.default, import_size5.default, import_field_label4.default, import_action_button4.default, import_select.default]);
-Select.register();
+Select.define("select");
 var select_default = Select;
 
 // src/select/select-option.ts
@@ -2878,9 +2863,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", [import_variables6.default, import_select_option.default]);
-SelectOption.register();
+SelectOption.define("select-option");
 
 // src/slider/slider.ts
 var import_aeico12 = require("aeico");
@@ -2894,7 +2878,6 @@ var import_aeico13 = require("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 = [(0, import_aeico13.prop)({ type: Array })], _percentage_dec = [(0, import_aeico13.prop)({ type: Boolean })], _min_dec = [(0, import_aeico13.prop)({ type: Number })], _max_dec = [(0, import_aeico13.prop)({ type: Number })], _step_dec = [(0, import_aeico13.prop)({ type: Number })], _editable_dec = [(0, import_aeico13.prop)({ type: Boolean })], _tracked_dec = [(0, import_aeico13.prop)({ type: Boolean })], _marks_dec = [(0, import_aeico13.prop)({
   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;
@@ -3158,9 +3141,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", [import_variables7.default, import_size6.default, import_color2.default, import_field_label5.default, import_action_button5.default, import_slider.default]);
-Slider.register();
+Slider.define("slider");
 var slider_default = Slider;
 
 // src/checkbox/checkbox.ts
@@ -3173,7 +3155,6 @@ var import_action_button6 = __toESM(require_action_button(), 1);
 var import_checkbox = __toESM(require_checkbox(), 1);
 var Checkbox = class extends aeico_field_default {
   fieldElement = null;
-  static tagName = "checkbox";
   static props = {
     checked: { type: Boolean },
     defaultChecked: { type: Boolean },
@@ -3240,7 +3221,7 @@ var Checkbox = class extends aeico_field_default {
     });
   }
 };
-Checkbox.register();
+Checkbox.define("checkbox");
 var checkbox_default = Checkbox;
 
 // src/radio-group/radio-group.ts
@@ -3257,7 +3238,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 },
@@ -3301,7 +3281,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.
@@ -3411,25 +3391,27 @@ var RadioGroup = class _RadioGroup extends aeico_field_default {
     }
   }
 };
-RadioGroup.register();
+RadioGroup.define("radio-group");
 var radio_group_default = 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
 var import_aeico17 = require("aeico");
 
+// src/utils.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+
 // src/icon/icon.ts
 var import_aeico16 = require("aeico");
 var import_variables10 = __toESM(require_variables(), 1);
@@ -3443,7 +3425,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) {
@@ -3495,7 +3477,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 },
@@ -3555,7 +3536,7 @@ var Icon = class extends aeico_component_default {
     });
   }
 };
-Icon.register();
+Icon.define("icon");
 var icon_default = Icon;
 
 // src/switch/switch.ts
@@ -3667,7 +3648,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", [
   import_variables11.default,
   import_size10.default,
@@ -3676,7 +3656,7 @@ __publicField(Switch, "styles", [
   import_action_button8.default,
   import_switch.default
 ]);
-Switch.register();
+Switch.define("switch");
 var switch_default = Switch;
 
 // src/breadcrumb/breadcrumb.ts
@@ -3750,9 +3730,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", [import_variables12.default, import_color7.default, import_breadcrumb.default]);
-Breadcrumb.register();
+Breadcrumb.define("breadcrumb");
 var breadcrumb_default = Breadcrumb;
 
 // src/breadcrumb/breadcrumb-item.ts
@@ -3789,9 +3768,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", [import_variables13.default, import_breadcrumb_item.default]);
-BreadcrumbItem.register();
+BreadcrumbItem.define("breadcrumb-item");
 var breadcrumb_item_default = BreadcrumbItem;
 
 // src/button/button.ts
@@ -3891,7 +3869,7 @@ __decorateElement(_init9, 5, "active", _active_dec, Button);
 __decorateElement(_init9, 5, "block", _block_dec, Button);
 __decoratorMetadata(_init9, Button);
 __publicField(Button, "styles", [import_variables14.default, import_size11.default, import_color8.default, import_button.default]);
-Button.register();
+Button.define("button");
 var button_default = Button;
 
 // src/copy-button/copy-button.ts
@@ -4042,7 +4020,7 @@ __decorateElement(_init10, 4, "trigger", _trigger_dec, Tooltip, _trigger);
 __decorateElement(_init10, 4, "open", _open_dec, Tooltip, _open);
 __decoratorMetadata(_init10, Tooltip);
 __publicField(Tooltip, "styles", [import_variables15.default, import_tooltip.default]);
-Tooltip.register();
+Tooltip.define("tooltip");
 var tooltip_default = Tooltip;
 
 // src/copy-button/copy-button.ts
@@ -4161,7 +4139,7 @@ __decorateElement(_init11, 4, "tooltipCopied", _tooltipCopied_dec, CopyButton, _
 __decorateElement(_init11, 4, "tooltipPlacement", _tooltipPlacement_dec, CopyButton, _tooltipPlacement);
 __decoratorMetadata(_init11, CopyButton);
 __publicField(CopyButton, "styles", [import_variables16.default, import_size12.default, import_color9.default, import_copy_button.default]);
-CopyButton.register();
+CopyButton.define("copy-button");
 var copy_button_default = CopyButton;
 
 // src/dropdown/dropdown.ts
@@ -4257,9 +4235,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", [import_variables17.default, import_dropdown_item.default]);
-DropdownItem.register();
+DropdownItem.define("dropdown-item");
 var dropdown_item_default = DropdownItem;
 
 // src/dropdown/dropdown.ts
@@ -4275,7 +4252,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();
     });
@@ -4393,9 +4370,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", [import_variables18.default, import_dropdown.default]);
-Dropdown.register();
+Dropdown.define("dropdown");
 var dropdown_default = Dropdown;
 
 // src/dropdown/dropdown-button.ts
@@ -4469,7 +4445,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", [
@@ -4480,7 +4455,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;
 
 // src/button-group/button-group.ts
@@ -4553,7 +4528,7 @@ var ButtonGroup = class extends aeico_component_default {
     btn.style.removeProperty("--_btn-r-bl");
   }
 };
-ButtonGroup.register();
+ButtonGroup.define("button-group");
 var button_group_default = ButtonGroup;
 
 // src/badge/badge.ts
@@ -4593,7 +4568,7 @@ __decorateElement(_init15, 4, "size", _size_dec5, Badge, _size4);
 __decorateElement(_init15, 4, "pill", _pill_dec2, Badge, _pill2);
 __decoratorMetadata(_init15, Badge);
 __publicField(Badge, "styles", [import_variables20.default, import_size13.default, import_color10.default, import_badge.default]);
-Badge.register();
+Badge.define("badge");
 var badge_default = Badge;
 
 // src/alert/alert.ts
@@ -4652,7 +4627,7 @@ var Alert = class extends aeico_component_default {
     this.remove();
   };
 };
-Alert.register();
+Alert.define("alert");
 var alert_default = Alert;
 
 // src/dialog/dialog.ts
@@ -4766,7 +4741,7 @@ var Dialog = class extends aeico_component_default {
     return this._dialogEl?.open ?? false;
   }
 };
-Dialog.register();
+Dialog.define("dialog");
 var dialog_default = Dialog;
 
 // src/drawer/drawer.ts
@@ -4914,13 +4889,12 @@ __decorateElement(_init16, 4, "header", _header_dec, Drawer, _header);
 __decorateElement(_init16, 4, "closeOnOverlayClick", _closeOnOverlayClick_dec, Drawer, _closeOnOverlayClick);
 __decoratorMetadata(_init16, Drawer);
 __publicField(Drawer, "styles", [import_variables23.default, import_drawer.default]);
-Drawer.register();
+Drawer.define("drawer");
 var drawer_default = Drawer;
 
 // src/icon-button/icon-button.ts
 var import_aeico39 = require("aeico");
 var IconButton = class extends aeico_component_default {
-  static tagName = "icon-button";
   static props = {
     icon: { type: String },
     size: { type: String },
@@ -4945,7 +4919,7 @@ var IconButton = class extends aeico_component_default {
     });
   }
 };
-IconButton.register();
+IconButton.define("icon-button");
 var icon_button_default = IconButton;
 
 // src/tabs/tabs.ts
@@ -5055,7 +5029,7 @@ var Tabs = class extends aeico_component_default {
     });
   }
 };
-Tabs.register();
+Tabs.define("tabs");
 var tabs_default = Tabs;
 
 // src/tabs/tab.ts
@@ -5100,7 +5074,7 @@ var Tab = class extends aeico_component_default {
     });
   }
 };
-Tab.register();
+Tab.define("tab");
 var tab_default = Tab;
 
 // src/tabs/tab-panel.ts
@@ -5114,7 +5088,7 @@ var TabPanel = class extends aeico_component_default {
     });
   }
 };
-TabPanel.register();
+TabPanel.define("tab-panel");
 var tab_panel_default = TabPanel;
 
 // src/divider/divider.ts
@@ -5146,9 +5120,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", [import_variables25.default, import_color12.default, import_divider.default]);
-Divider.register();
+Divider.define("divider");
 var divider_default = Divider;
 
 // src/card/card.ts
@@ -5194,9 +5167,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", [import_variables26.default, import_color13.default, import_card.default]);
-Card.register();
+Card.define("card");
 var card_default = Card;
 
 // src/navbar/navbar.ts
@@ -5290,9 +5262,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", [import_variables27.default, import_color14.default, import_navbar.default]);
-Navbar.register();
+Navbar.define("navbar");
 var navbar_default = Navbar;
 
 // src/spinner/spinner.ts
@@ -5346,9 +5317,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", [import_variables28.default, import_size14.default, import_color15.default, import_spinner.default]);
-Spinner.register();
+Spinner.define("spinner");
 var spinner_default = Spinner;
 
 // src/detail/detail.ts
@@ -5447,9 +5417,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", [import_variables29.default, import_color16.default, import_detail.default]);
-Detail.register();
+Detail.define("detail");
 var detail_default = Detail;
 
 // src/detail-group/detail-group.ts
@@ -5457,7 +5426,6 @@ var import_variables30 = __toESM(require_variables(), 1);
 var import_detail_group = __toESM(require_detail_group(), 1);
 var import_aeico51 = require("aeico");
 var DetailGroup = class extends aeico_component_default {
-  static tagName = "detail-group";
   static props = {
     multiple: { type: Boolean },
     variant: { type: String },
@@ -5507,7 +5475,7 @@ var DetailGroup = class extends aeico_component_default {
     });
   }
 };
-DetailGroup.register();
+DetailGroup.define("detail-group");
 var detail_group_default = DetailGroup;
 
 // src/progress-bar/progress-bar.ts
@@ -5560,9 +5528,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", [import_variables31.default, import_color17.default, import_progress_bar.default]);
-ProgressBar.register();
+ProgressBar.define("progress-bar");
 var progress_bar_default = ProgressBar;
 
 // src/menu/menu.ts
@@ -5819,9 +5786,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", [import_variables32.default, import_menu_item.default]);
-MenuItem.register();
+MenuItem.define("menu-item");
 var menu_item_default = MenuItem;
 
 // src/menu/menu.ts
@@ -5876,9 +5842,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", [import_variables33.default, import_menu.default]);
-Menu.register();
+Menu.define("menu");
 var menu_default = Menu;
 
 // src/pagination/pagination.ts
@@ -6100,9 +6065,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", [import_variables34.default, import_size15.default, import_pagination.default]);
-Pagination.register();
+Pagination.define("pagination");
 var pagination_default = Pagination;
 
 // src/tree/tree.ts
@@ -6310,9 +6274,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", [import_variables35.default, import_tree_item.default]);
-TreeItem.register();
+TreeItem.define("tree-item");
 var tree_item_default = TreeItem;
 
 // src/tree/tree.ts
@@ -6483,9 +6446,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", [import_variables36.default, import_tree.default]);
-Tree.register();
+Tree.define("tree");
 var tree_default = Tree;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {