aeico-components 0.1.8 → 0.1.10

package/src/styles/components/alert.css

@@ -14,7 +14,7 @@
   margin-bottom: 0;
 }
 
-/* default color (no [color] attribute) — 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);

package/src/styles/components/breadcrumb-item.css

@@ -9,7 +9,7 @@
   white-space: nowrap;
 }
 
-/* Separator — 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;
@@ -33,7 +33,7 @@
   color: var(--ae-color-text-muted);
 }
 
-/* Current page — last item */
+/* Current page - last item */
 :host([aria-current="page"]) .label {
   color: var(--ae-color-text-main);
   font-weight: 500;

package/src/styles/components/button.css

@@ -116,7 +116,6 @@ button:disabled {
   background: var(--ae-color-subtle-hover);
 }
 
-/* Icon-only: single ae-icon child → square compact layout */
 :host([icon-only]) {
   display: inline-flex;
 }

package/src/styles/components/divider.css

@@ -4,7 +4,7 @@
   height: var(--thickness, 1px);
   flex-shrink: 0;
 
-  /* Override color.css default — divider uses the subtle border token when no [color] is set */
+  /* Override color.css default - divider uses the subtle border token when no [color] is set */
   --ae-color-border: var(--ae-border-default);
 
   background: var(--ae-color-border);

package/src/styles/components/dropdown-item.css

@@ -56,14 +56,14 @@
   pointer-events: none;
 }
 
-/* Active item — 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 — fixed-width indicator column */
+/* Checkbox mode - fixed-width indicator column */
 .check-indicator {
   display: inline-flex;
   align-items: center;

package/src/styles/components/dropdown.css

@@ -49,7 +49,7 @@
   pointer-events: none;
 }
 
-/* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */
+/* Bootstrap-style CSS border caret - shadow DOM only, no global injection needed */
 .ae-dropdown-arrow {
   display: inline-block;
   width: 0;

package/src/styles/layout.css

@@ -1,5 +1,5 @@
 /*
-   layout.css — Light DOM utility classes
+   layout.css - Light DOM utility classes
    This file is for use in the user's light DOM (regular HTML),
    NOT imported by any Web Component internally.
 
@@ -20,7 +20,7 @@
 */
 
 /**
- * Tokens — defined on :root outside @layer so they are always resolvable,
+ * Tokens - defined on :root outside @layer so they are always resolvable,
  * even when the cascade layer order is re-arranged by the consuming app.
  */
 :root {
@@ -30,7 +30,7 @@
   --container-md-max-width:  960px;
   --container-xl-max-width: 1440px;
 
-  /* Spacing scale — numeric steps based on a 4px unit.
+  /* Spacing scale - numeric steps based on a 4px unit.
    * Usage: gap: var(--space-4);  padding: var(--space-2) var(--space-6);
    */
   --space-1:  0.25rem;  /*  4px */
@@ -45,7 +45,7 @@
 }
 
 /**
- * @layer aeico-layout — all utility rules live here.
+ * @layer aeico-layout - all utility rules live here.
  * Unlayered user styles win automatically. To override from a named layer,
  * declare the order before importing this file:
  *   @layer aeico-layout, your-layer;
@@ -122,11 +122,11 @@
     gap: var(--stack-gap, var(--space-4, 1rem));
   }
 
-  /* Reset block margins on direct children — prevents h1/p/ul from adding
+  /* Reset block margins on direct children - prevents h1/p/ul from adding
      unintended spacing on top of the flex gap. */
   .stack > * { margin-block: 0; margin-inline: 0; }
 
-  /* Default alignment — zero specificity so a single class rule overrides it. */
+  /* Default alignment - zero specificity so a single class rule overrides it. */
   :where(.stack) { align-items: stretch; }
 
   .stack-1  { --stack-gap: var(--space-1,  0.25rem); }
@@ -169,7 +169,7 @@
     gap: var(--cluster-gap, var(--space-4, 1rem));
   }
 
-  /* Defaults — override via CSS custom properties or modifier classes.
+  /* Defaults - override via CSS custom properties or modifier classes.
      :where() keeps specificity at zero so a plain class rule always wins. */
   :where(.cluster) {
     align-items: var(--cluster-align, center);
@@ -222,7 +222,7 @@
     gap: var(--grid-gap, var(--space-4, 1rem));
   }
 
-  /* Reset block margins on direct children — same rationale as .stack. */
+  /* Reset block margins on direct children - same rationale as .stack. */
   .grid > * { margin-block: 0; margin-inline: 0; }
 
   /* Fixed-column presets */
@@ -244,10 +244,10 @@
     gap: var(--grid-gap, var(--space-4, 1rem));
   }
 
-  /* .grid-span — child spans all columns */
+  /* .grid-span - child spans all columns */
   .grid-span { grid-column: 1 / -1; }
 
-  /* Responsive column modifiers — sm ≥ 576px */
+  /* Responsive column modifiers - sm ≥ 576px */
   @media (min-width: 576px) {
     .grid-cols-sm-1  { --grid-cols: 1;  }
     .grid-cols-sm-2  { --grid-cols: 2;  }
@@ -255,7 +255,7 @@
     .grid-cols-sm-4  { --grid-cols: 4;  }
   }
 
-  /* Responsive column modifiers — md ≥ 768px */
+  /* Responsive column modifiers - md ≥ 768px */
   @media (min-width: 768px) {
     .grid-cols-md-1  { --grid-cols: 1;  }
     .grid-cols-md-2  { --grid-cols: 2;  }
@@ -264,7 +264,7 @@
     .grid-cols-md-6  { --grid-cols: 6;  }
   }
 
-  /* Responsive column modifiers — lg ≥ 992px */
+  /* Responsive column modifiers - lg ≥ 992px */
   @media (min-width: 992px) {
     .grid-cols-lg-1  { --grid-cols: 1;  }
     .grid-cols-lg-2  { --grid-cols: 2;  }
@@ -274,7 +274,7 @@
     .grid-cols-lg-12 { --grid-cols: 12; }
   }
 
-  /* Responsive column modifiers — xl ≥ 1200px */
+  /* Responsive column modifiers - xl ≥ 1200px */
   @media (min-width: 1200px) {
     .grid-cols-xl-1  { --grid-cols: 1;  }
     .grid-cols-xl-2  { --grid-cols: 2;  }
@@ -330,7 +330,7 @@
     min-inline-size: var(--flank-content-min, 50%);
   }
 
-  /* .flank-end — last child becomes the flank, first child is the content */
+  /* .flank-end - last child becomes the flank, first child is the content */
   .flank-end > :last-child {
     flex-basis: var(--flank-size, auto);
     flex-grow: 1;

package/src/styles/radius.css

@@ -1,5 +1,5 @@
 /*
-   radius.css — Light DOM border-radius utility classes
+   radius.css - Light DOM border-radius utility classes
    This file is for use in the user's light DOM (regular HTML),
    NOT imported by any Web Component internally.
 

package/src/styles/variables.css

@@ -74,7 +74,7 @@
   --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 — 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);
@@ -85,7 +85,7 @@
   --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 — 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);
@@ -121,7 +121,7 @@
 
 :root,
 :host {
-  /* Hover / active mix (light default — overridden in § 6 dark) */
+  /* Hover / active mix (light default - overridden in § 6 dark) */
   --ae-color-mix-hover:  black 10%;
   --ae-color-mix-active: black 20%;
 
@@ -155,7 +155,7 @@
   --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) — base differs per theme, overridden in § 6 dark */
+  /* Secondary (Slate) - base differs per theme, overridden in § 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));
@@ -171,7 +171,7 @@
 :host {
   color-scheme: light;
 
-  /* Gray UI aliases — 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);
@@ -203,7 +203,7 @@
   --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 — 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);
@@ -234,7 +234,7 @@
   --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 — 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);
@@ -269,14 +269,12 @@
   --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
 }
 
-/* Border-radius tokens — shared across all components */
+/* Border-radius tokens - shared across all components */
 :root,
 :host {
   /**
    * Unified border-radius hook for all components.
    *
-   * Not set by default — each component falls back to its own --ae-radius-*
-   * token (e.g. button → sm, card → lg, input → xs).
    *
    * Usage:
    *   :root { --ae-border-radius: 0; }       // global: all components square
@@ -298,7 +296,7 @@
   --ae-radius-circle:  50%;
 }
 
-/* Layout tokens — 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;
@@ -311,18 +309,18 @@
 :host-context([theme="dark"]) {
   color-scheme: dark;
 
-  /* Hover / active — 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 — 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 — 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);
 
@@ -351,7 +349,7 @@
   --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 — 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);
@@ -382,7 +380,7 @@
   --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 — 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);

package/src/switch/switch.ts

@@ -1,4 +1,4 @@
-import AeicoField, { type FieldAction } from '../aeico-field';
+import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps } from 'aeico';
 import { html, prop } from 'aeico';
 import type { SwitchIconPlacement } from './defines';
@@ -13,8 +13,6 @@ import styles from '../styles/components/switch.css';
 class Switch extends AeicoField<boolean> {
   protected fieldElement: HTMLInputElement | null = null;
 
-  static tagName = 'switch';
-
   @prop({ type: Boolean })
   accessor checked: boolean | undefined;
 
@@ -125,7 +123,7 @@ class Switch extends AeicoField<boolean> {
   }
 }
 
-Switch.register();
+Switch.define('switch');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tabs/tab-panel.ts

@@ -1,4 +1,4 @@
-import tabPanelStyle from '../styles/components/tab-panel.css';
+import tabPanelStyle from '../styles/components/tab-panel.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 
@@ -12,7 +12,7 @@ class TabPanel extends AeicoComponent {
   }
 }
 
-TabPanel.register();
+TabPanel.define('tab-panel');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tabs/tab.ts

@@ -1,4 +1,4 @@
-import type { Props } from 'aeico';
+import type { Props } from 'aeico';
 import tabStyle from '../styles/components/tab.css';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
@@ -51,7 +51,7 @@ class Tab extends AeicoComponent {
   }
 }
 
-Tab.register();
+Tab.define('tab');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tabs/tabs.ts

@@ -1,4 +1,4 @@
-import type { Props } from 'aeico';
+import type { Props } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import tabsStyle from '../styles/components/tabs.css';
 import AeicoComponent from '../aeico-component';
@@ -134,7 +134,7 @@ class Tabs extends AeicoComponent {
   }
 }
 
-Tabs.register();
+Tabs.define('tabs');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tag/tag.ts

@@ -1,4 +1,4 @@
-import type { InferProps } from 'aeico';
+import type { InferProps } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import sizeCSS from '../styles/size.css';
 import colorCSS from '../styles/color.css';
@@ -73,7 +73,7 @@ class Tag extends AeicoComponent {
   }
 }
 
-Tag.register();
+Tag.define('tag');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/text-input/text-input.ts

@@ -1,4 +1,4 @@
-import AeicoField from '../aeico-field';
+import AeicoField from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
 import variables from '../styles/variables.css';
@@ -10,8 +10,6 @@ import style from '../styles/components/text-input.css';
 class TextInput extends AeicoField {
   protected fieldElement: HTMLInputElement | null = null;
 
-  static tagName = 'text-input';
-
   static props: Props = {
     placeholder: { type: String },
     type: { type: String },
@@ -58,7 +56,7 @@ class TextInput extends AeicoField {
   }
 }
 
-TextInput.register();
+TextInput.define('text-input');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/textarea/textarea.ts

@@ -12,8 +12,6 @@ export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 class Textarea extends AeicoField {
   protected fieldElement: HTMLTextAreaElement | null = null;
 
-  static tagName = 'textarea';
-
   @prop({ type: String })
   accessor placeholder: string | undefined;
 
@@ -95,7 +93,7 @@ class Textarea extends AeicoField {
   }
 }
 
-Textarea.register();
+Textarea.define('textarea');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tooltip/tooltip.ts

@@ -171,7 +171,7 @@ class Tooltip extends AeicoComponent {
   }
 }
 
-Tooltip.register();
+Tooltip.define('tooltip');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tree/tree-item.ts

@@ -10,7 +10,7 @@ import '../icon';
 let _autoKeyCounter = 0;
 
 /**
- * Tree item — used as a direct child of `<ae-tree>` or nested inside another
+ * Tree item - used as a direct child of `<ae-tree>` or nested inside another
  * `<ae-tree-item>` to create a multi-level tree.
  *
  * - **Parent item**: nest `<ae-tree-item>` children inside; an expand toggle is shown.
@@ -28,8 +28,6 @@ let _autoKeyCounter = 0;
  * @slot label   - Custom label content (falls back to the `label` attribute text).
  */
 class TreeItem extends AeicoComponent {
-  static tagName = 'tree-item';
-
   protected static styles = [variables, style];
 
   @prop({ type: String })
@@ -160,7 +158,7 @@ class TreeItem extends AeicoComponent {
   };
 
   protected onUpdated(): void {
-    // indeterminate/checked cannot be set correctly via HTML attribute — must set via JS property
+    // indeterminate/checked cannot be set correctly via HTML attribute - must set via JS property
     if (this._checkboxEl) {
       this._checkboxEl.checked = this.checked;
       this._checkboxEl.indeterminate = this.indeterminate;
@@ -246,7 +244,7 @@ class TreeItem extends AeicoComponent {
   }
 }
 
-TreeItem.register();
+TreeItem.define('tree-item');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/tree/tree.ts

@@ -35,8 +35,6 @@ import type TreeItem from './tree-item';
  * ```
  */
 class Tree extends AeicoComponent {
-  static tagName = 'tree';
-
   protected static styles = [variables, style];
 
   @prop({ type: Boolean })
@@ -141,7 +139,7 @@ class Tree extends AeicoComponent {
         } satisfies TreeSelectDetail,
       });
     } else {
-      // Single select — deselect all, select target
+      // Single select - deselect all, select target
       const alreadySelected = this.selectedKey === key;
       this._getAllItems().forEach((item) => {
         item.selected = !alreadySelected && item.key === key;
@@ -225,7 +223,7 @@ class Tree extends AeicoComponent {
   }
 }
 
-Tree.register();
+Tree.define('tree');
 
 declare global {
   interface HTMLElementTagNameMap {