aeico-components 0.1.8 → 0.1.10

package/src/dropdown/dropdown-button.ts

@@ -1,4 +1,4 @@
-import AeicoComponent from '../aeico-component';
+import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html } from 'aeico';
 import { prop } from 'aeico';
@@ -9,7 +9,7 @@ import './dropdown';
 import '../button/button';
 
 /**
- * DropdownButton — a pre-composed trigger + dropdown panel.
+ * DropdownButton - a pre-composed trigger + dropdown panel.
  *
  * Renders an `ae-button`-styled trigger with a built-in chevron,
  * and a floating panel for `<ae-dropdown-item>` children.
@@ -35,13 +35,11 @@ import '../button/button';
  * ```
  *
  * Emits:
- * - `open`   — when the panel opens
- * - `close`  — when the panel closes
- * - `select` — `{ detail: { value, label } }` when a menu item is selected
+ * - `open`   - when the panel opens
+ * - `close`  - when the panel closes
+ * - `select` - `{ detail: { value, label } }` when a menu item is selected
  */
 class DropdownButton extends AeicoComponent {
-  static 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.
   protected static styles = [
@@ -118,7 +116,7 @@ class DropdownButton extends AeicoComponent {
   }
 }
 
-DropdownButton.register();
+DropdownButton.define('dropdown-button');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/dropdown/dropdown-item.ts

@@ -1,4 +1,4 @@
-import AeicoComponent from '../aeico-component';
+import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html } from 'aeico';
 import style from '../styles/components/dropdown-item.css';
@@ -8,7 +8,7 @@ import { prop } from 'aeico';
 import '../icon/icon';
 
 /**
- * Dropdown menu item — used as a direct child of `<ae-dropdown>`.
+ * Dropdown menu item - used as a direct child of `<ae-dropdown>`.
  *
  * Renders as a `<button>` by default, or as an `<a>` anchor when `href` is set.
  * Use `<ae-icon>` inside to add icons, and CSS `color` / `--dropdown-item-color`
@@ -22,13 +22,11 @@ import '../icon/icon';
  * ```
  */
 class DropdownItem extends AeicoComponent {
-  static tagName = 'dropdown-item';
-
   /** Value emitted in the `select` event detail on the parent dropdown. */
   @prop({ type: String })
   accessor value: string | undefined;
 
-  /** Disables the item — it becomes non-interactive and visually dimmed. */
+  /** Disables the item - it becomes non-interactive and visually dimmed. */
   @prop({ type: Boolean })
   accessor disabled: boolean = false;
 
@@ -55,7 +53,7 @@ class DropdownItem extends AeicoComponent {
 
   /**
    * Marks the item as the currently active/selected option (e.g. current route,
-   * current sort order). Purely visual — applies a highlighted background and
+   * current sort order). Purely visual - applies a highlighted background and
    * accent colour.
    */
   @prop({ type: Boolean })
@@ -124,7 +122,7 @@ class DropdownItem extends AeicoComponent {
   }
 }
 
-DropdownItem.register();
+DropdownItem.define('dropdown-item');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/dropdown/dropdown.ts

@@ -1,4 +1,4 @@
-import AeicoComponent from '../aeico-component';
+import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html } from 'aeico';
 import { prop } from 'aeico';
@@ -9,15 +9,15 @@ import type { DropdownPlacement } from './defines';
 import './dropdown-item';
 
 /**
- * Dropdown component — renders a floating menu panel anchored to a trigger slot.
+ * Dropdown component - renders a floating menu panel anchored to a trigger slot.
  *
  * The trigger is provided via `slot="trigger"` (typically an `<ae-button>`).
  * Menu items are provided as `<ae-dropdown-item>` default-slot children.
  *
  * Emits:
- * - `open`   — when the panel opens
- * - `close`  — when the panel closes
- * - `select` — `{ detail: { value, label } }` when a menu item is clicked
+ * - `open`   - when the panel opens
+ * - `close`  - when the panel closes
+ * - `select` - `{ detail: { value, label } }` when a menu item is clicked
  *
  * @example
  * ```html
@@ -42,8 +42,6 @@ import './dropdown-item';
  * ```
  */
 class Dropdown extends AeicoComponent {
-  static tagName = 'dropdown';
-
   protected static styles = [variables, style];
 
   /**
@@ -133,7 +131,7 @@ class Dropdown extends AeicoComponent {
 
   // 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.
   private _handleTriggerClick = (): void => {
     this.toggle();
   };
@@ -199,7 +197,7 @@ class Dropdown extends AeicoComponent {
   }
 }
 
-Dropdown.register();
+Dropdown.define('dropdown');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/icon/icon.ts

@@ -1,4 +1,4 @@
-import type { InferProps, Props } from 'aeico';
+import type { InferProps, Props } from 'aeico';
 import { SVG_NS } from '../utils';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
@@ -12,8 +12,6 @@ import IconRegistry from './registry';
 import './built-in-icons';
 
 class Icon extends AeicoComponent {
-  static tagName = 'icon';
-
   static props: Props = {
     name: { type: String },
     size: { type: String },
@@ -91,7 +89,7 @@ class Icon extends AeicoComponent {
   }
 }
 
-Icon.register();
+Icon.define('icon');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/icon/registry.ts

@@ -2,7 +2,7 @@ import { IconDefinition, IconRegistryData, defaultViewBox } from './defines';
 
 class IconRegistry {
   private static _icons: Map<string, IconDefinition> = new Map();
-  /** Names registered via addBuiltIn — can be overridden by user add() calls */
+  /** Names registered via addBuiltIn - can be overridden by user add() calls */
   private static _builtInKeys: Set<string> = new Set();
 
   /** Register user icons. Always takes priority over built-in icons. */

package/src/icon-button/icon-button.ts

@@ -1,4 +1,4 @@
-import type { InferProps, Props } from 'aeico';
+import type { InferProps, Props } from 'aeico';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type { IconColor } from '../icon/defines';
@@ -17,8 +17,6 @@ export type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
  * ```
  */
 class IconButton extends AeicoComponent {
-  static tagName = 'icon-button';
-
   static props: Props = {
     icon: { type: String },
     size: { type: String },
@@ -52,7 +50,7 @@ class IconButton extends AeicoComponent {
   }
 }
 
-IconButton.register();
+IconButton.define('icon-button');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/index.ts

@@ -9,12 +9,12 @@
  * import { SelectField, RangeField, Button } from 'aeico/components'
  *
  * // Manually register components
- * SelectField.register()
- * RangeField.register()
- * Button.register()
+ * SelectField.define()
+ * RangeField.define()
+ * Button.define()
  *
  * // Or use with custom names
- * SelectField.register('my-select')
+ * SelectField.define('my-select')
  * ```
  *
  * @example

package/src/menu/menu-item.ts

@@ -12,7 +12,7 @@ import type {
 } from './defines';
 
 /**
- * Menu item — used as a direct child of `<ae-menu>` or nested inside another
+ * Menu item - used as a direct child of `<ae-menu>` or nested inside another
  * `<ae-menu-item>` to create a two-level submenu.
  *
  * - **Leaf item**: omit `label`; slot contains the item text.
@@ -20,8 +20,8 @@ import type {
  *   `<ae-menu-item>` elements that appear in the submenu panel/section.
  *
  * **Slots (parent items only)**
- * - `expand`  — icon shown when the submenu is closed (default: CSS triangle).
- * - `collapse` — icon shown when the submenu is open (default: rotated CSS triangle).
+ * - `expand`  - icon shown when the submenu is closed (default: CSS triangle).
+ * - `collapse` - icon shown when the submenu is open (default: rotated CSS triangle).
  *
  * @example
  * ```html
@@ -33,8 +33,6 @@ import type {
  * ```
  */
 class MenuItem extends AeicoComponent {
-  static tagName = 'menu-item';
-
   protected static styles = [variables, style];
 
   @prop({ type: String })
@@ -68,7 +66,7 @@ class MenuItem extends AeicoComponent {
     const depth = this.parentElement?.closest('ae-menu-item') ? 1 : 0;
     this.dataset.depth = String(depth);
 
-    // Hover listeners — check mode/trigger at runtime
+    // Hover listeners - check mode/trigger at runtime
     this.listen('mouseenter', this._handleMouseEnter);
     this.listen('mouseleave', this._handleMouseLeave);
 
@@ -312,7 +310,7 @@ class MenuItem extends AeicoComponent {
   }
 }
 
-MenuItem.register();
+MenuItem.define('menu-item');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/menu/menu.ts

@@ -12,16 +12,14 @@ import './menu-item';
  * optional two-level flyout or inline (accordion) submenus.
  *
  * Two modes:
- * - `flyout` (default) — submenus open as floating panels (like a nav bar or
+ * - `flyout` (default) - submenus open as floating panels (like a nav bar or
  *   context menu).
- * - `inline` — submenus expand in-place (accordion-style sidebar).
+ * - `inline` - submenus expand in-place (accordion-style sidebar).
  *
  * Emits:
- * - `select` — `{ detail: { key, label, keyPath } }` when a leaf item is clicked.
+ * - `select` - `{ detail: { key, label, keyPath } }` when a leaf item is clicked.
  */
 class Menu extends AeicoComponent {
-  static tagName = 'menu';
-
   protected static styles = [variables, style];
 
   @prop({ type: String })
@@ -72,7 +70,7 @@ class Menu extends AeicoComponent {
   }
 }
 
-Menu.register();
+Menu.define('menu');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/navbar/navbar.ts

@@ -1,4 +1,4 @@
-import type { InferProps } from 'aeico';
+import type { InferProps } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import colorCSS from '../styles/color.css';
 import navbarStyle from '../styles/components/navbar.css';
@@ -14,9 +14,9 @@ import type { NavbarColor, NavbarAppearance } from './defines';
  * mobile hamburger collapse.
  *
  * Slots:
- * - `brand`  — leftmost area, typically a logo or site name link
- * - `start`  — main navigation links / dropdowns
- * - `end`    — right-side actions (login button, avatar, etc.)
+ * - `brand`  - leftmost area, typically a logo or site name link
+ * - `start`  - main navigation links / dropdowns
+ * - `end`    - right-side actions (login button, avatar, etc.)
  *
  * Slotted `<a>` elements receive default link styling controlled via
  * CSS custom properties. Mark the active link with `aria-current="page"`.
@@ -43,8 +43,6 @@ import type { NavbarColor, NavbarAppearance } from './defines';
  * ```
  */
 class Navbar extends AeicoComponent {
-  static tagName = 'navbar';
-
   protected static styles = [styleVariables, colorCSS, navbarStyle];
 
   /** Background color using the design-system color token set. */
@@ -57,8 +55,8 @@ class Navbar extends AeicoComponent {
 
   /**
    * Hover style preset for slotted `<a>` links.
-   * - `text`  — only the font color changes on hover (default)
-   * - `block` — a subtle filled background block appears on hover
+   * - `text`  - only the font color changes on hover (default)
+   * - `block` - a subtle filled background block appears on hover
    *
    * Fine-tune further with `--ae-navbar-link-hover-color` /
    * `--ae-navbar-link-hover-bg` CSS variables.
@@ -148,7 +146,7 @@ class Navbar extends AeicoComponent {
   }
 }
 
-Navbar.register();
+Navbar.define('navbar');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/number-input/number-input.ts

@@ -10,8 +10,6 @@ import style from '../styles/components/number-input.css';
 class NumberInput extends AeicoField<number> {
   protected fieldElement: HTMLInputElement | null = null;
 
-  static tagName = 'number-input';
-
   static props: Props = {
     placeholder: { type: String },
     min: { type: Number },
@@ -125,7 +123,7 @@ class NumberInput extends AeicoField<number> {
   }
 }
 
-NumberInput.register();
+NumberInput.define('number-input');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/pagination/pagination.ts

@@ -46,8 +46,6 @@ type PageItem = number | 'ellipsis-start' | 'ellipsis-end';
  * ```
  */
 class Pagination extends AeicoComponent {
-  static tagName = 'pagination';
-
   protected static styles = [styleVariables, sizeCSS, paginationStyle];
 
   @prop({ type: Number })
@@ -298,7 +296,7 @@ class Pagination extends AeicoComponent {
   }
 }
 
-Pagination.register();
+Pagination.define('pagination');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/progress-bar/progress-bar.ts

@@ -25,7 +25,6 @@ import type { ProgressBarColor } from './defines';
  *   When set, takes precedence over the `color` prop entirely.
  */
 class ProgressBar extends AeicoComponent {
-  static tagName = 'progress-bar';
   protected static styles = [styleVariables, colorCSS, style];
 
   @prop({ type: Number })
@@ -68,7 +67,7 @@ class ProgressBar extends AeicoComponent {
   }
 }
 
-ProgressBar.register();
+ProgressBar.define('progress-bar');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/radio-group/radio-group.ts

@@ -1,4 +1,4 @@
-import AeicoField from '../aeico-field';
+import AeicoField from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html, tags } from 'aeico';
 import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
@@ -20,8 +20,6 @@ class RadioGroup extends AeicoField {
   private static _instanceCount = 0;
   private readonly _groupName: string;
 
-  static tagName = 'radio-group';
-
   static props: Props = {
     options: { type: Array },
     mode: { type: String },
@@ -82,7 +80,7 @@ class RadioGroup extends AeicoField {
     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.
@@ -155,7 +153,7 @@ class RadioGroup extends AeicoField {
         this.renderResetButton();
       }
 
-      // Hidden slot — captures <option> light DOM children
+      // Hidden slot - captures <option> light DOM children
       this._slotEl = slot({
         style: { display: 'none' },
         '@slotchange': () => this._onSlotChange(),
@@ -184,7 +182,7 @@ class RadioGroup extends AeicoField {
           required: Boolean(this.required),
           '@click': this._boundOnRadioClick,
         });
-        // Sync DOM property directly — setAttribute('checked') doesn't work
+        // Sync DOM property directly - setAttribute('checked') doesn't work
         // after user interaction; only the .checked property controls state.
         el.checked = isChecked;
         // Keep fieldElement pointing to first radio for base-class compat
@@ -226,7 +224,7 @@ class RadioGroup extends AeicoField {
   }
 }
 
-RadioGroup.register();
+RadioGroup.define('radio-group');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/radio-group/radio.ts

@@ -1,16 +1,16 @@
-import AeicoComponent from '../aeico-component';
+import AeicoComponent from '../aeico-component';
 import type { InferProps, Props } from 'aeico';
 
 /**
- * AeRadio — structured option element for ae-radio-group.
+ * AeRadio - structured option element for ae-radio-group.
  *
  * Replaces the native `<option>` approach with a custom element that is
  * fully extensible.  Current surface:
- *   - `value`    — option value submitted / matched against radio-group value
- *   - `disabled` — disables this individual option (independent of the group)
- *   - Light DOM  — label content; can be plain text or rich HTML (icons, etc.)
+ *   - `value`    - option value submitted / matched against radio-group value
+ *   - `disabled` - disables this individual option (independent of the group)
+ *   - Light DOM  - label content; can be plain text or rich HTML (icons, etc.)
  *
- * This element has **no shadow DOM** — it is a pure data / content carrier.
+ * This element has **no shadow DOM** - it is a pure data / content carrier.
  * ae-radio-group reads its properties and light-DOM content, then renders
  * the appropriate UI (radio input, button, segmented pill, …).
  *
@@ -32,9 +32,7 @@ import type { InferProps, Props } from 'aeico';
  * ```
  */
 class Radio extends AeicoComponent {
-  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 override useShadowDOM = false;
 
   static override props: Props = {
@@ -46,7 +44,7 @@ class Radio extends AeicoComponent {
   declare disabled?: boolean;
 }
 
-Radio.register();
+Radio.define('radio');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/select/select-option.ts

@@ -1,4 +1,4 @@
-import AeicoComponent from '../aeico-component';
+import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import { html } from 'aeico';
 import style from '../styles/components/select-option.css';
@@ -6,8 +6,6 @@ import variables from '../styles/variables.css';
 import { prop } from 'aeico';
 
 class SelectOption extends AeicoComponent {
-  static tagName = 'select-option';
-
   @prop({ type: String })
   accessor value: string | undefined;
 
@@ -47,7 +45,7 @@ class SelectOption extends AeicoComponent {
   }
 }
 
-SelectOption.register();
+SelectOption.define('select-option');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/select/select.ts

@@ -1,4 +1,4 @@
-import AeicoField from '../aeico-field';
+import AeicoField from '../aeico-field';
 import type { InferProps } from 'aeico';
 import { html, tags } from 'aeico';
 import type {
@@ -37,8 +37,6 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
   private _slotOptionData: Array<{ value: string; label: string }> = [];
   private _selectedListEl: HTMLElement | null = null;
 
-  static tagName = 'select';
-
   @prop({ type: Boolean, observe: false, reflect: false })
   accessor _expanded: boolean = false;
 
@@ -122,7 +120,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
   }
 
   protected onDisabledChanged(_newValue: boolean): void {
-    // disabled is a reactive prop — render() already picks it up automatically
+    // disabled is a reactive prop - render() already picks it up automatically
   }
 
   protected onUpdated(changedProps: Map<string, unknown>): void {
@@ -345,7 +343,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
       this.renderError();
 
       // Visually-hidden input so native form constraint validation works for `required`.
-      // type="text" (not "hidden") is required — type="hidden" is exempt from constraint validation.
+      // type="text" (not "hidden") is required - type="hidden" is exempt from constraint validation.
       const currentValue =
         this.value != null &&
         this.value !== '' &&
@@ -416,7 +414,7 @@ class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
   }
 }
 
-Select.register();
+Select.define('select');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/slider/defines.ts

@@ -15,8 +15,8 @@ export type NormalizedOption = {
 
 /**
  * A single mark on the slider track.
- * - `number` — mark at that numeric position, no label
- * - `{ value, label? }` — mark at `value` with optional label
+ * - `number` - mark at that numeric position, no label
+ * - `{ value, label? }` - mark at `value` with optional label
  *
  * Marks are purely visual; they do NOT constrain snapping.
  * The slider still snaps according to `step` / `options`.
@@ -26,8 +26,8 @@ export type MarkItem = number | { value: number; label?: string };
 
 /**
  * The `marks` prop accepts:
- * - `true`  — auto-generate marks (at option positions, or min+max in free mode)
- * - `MarkItem[]` — custom marks at the given positions
- * - `false` / omitted — no marks
+ * - `true`  - auto-generate marks (at option positions, or min+max in free mode)
+ * - `MarkItem[]` - custom marks at the given positions
+ * - `false` / omitted - no marks
  */
 export type SliderMarks = boolean | MarkItem[];

package/src/slider/slider.ts

@@ -1,4 +1,4 @@
-import AeicoField from '../aeico-field';
+import AeicoField from '../aeico-field';
 import type { InferProps } from 'aeico';
 import { html, tags } from 'aeico';
 import type { NormalizedOption, SliderMarks, SliderOption, SliderOptions } from './defines';
@@ -18,8 +18,6 @@ class Slider extends AeicoField {
   private _boundOnRangeInput: () => void;
   private _boundOnNumberInput: () => void;
 
-  static tagName = 'slider';
-
   @prop({ type: Array })
   accessor options: SliderOptions = [];
 
@@ -43,7 +41,6 @@ class Slider extends AeicoField {
 
   @prop({
     type: Array,
-    // bare attribute (<ae-slider marks>) → true; JSON array → MarkItem[]
     parser: (value: string | null) => {
       if (value === null) return undefined;
       if (value === '' || value === 'true') return true;
@@ -180,7 +177,7 @@ class Slider extends AeicoField {
 
     const marks = this.marks;
 
-    // Custom marks array — purely visual, no snapping effect
+    // Custom marks array - purely visual, no snapping effect
     if (Array.isArray(marks)) {
       const result: Array<{ value: string; label: string; pct: number }> = [];
       for (const m of marks) {
@@ -198,7 +195,7 @@ class Slider extends AeicoField {
       return result;
     }
 
-    // marks === true — auto-generate from options or free-mode endpoints
+    // marks === true - auto-generate from options or free-mode endpoints
     if (normalized) {
       return normalized.map((o) => ({
         value: o.value,
@@ -207,7 +204,7 @@ class Slider extends AeicoField {
       }));
     }
 
-    // Free mode — show min and max endpoints only
+    // Free mode - show min and max endpoints only
     return [
       { value: attrs.min, label: this.percentage ? `${minVal}%` : String(minVal), pct: 0 },
       { value: attrs.max, label: this.percentage ? `${maxVal}%` : String(maxVal), pct: 100 },
@@ -359,7 +356,7 @@ class Slider extends AeicoField {
   }
 }
 
-Slider.register();
+Slider.define('slider');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/spinner/spinner.ts

@@ -8,7 +8,7 @@ import style from '../styles/components/spinner.css';
 import type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';
 
 /**
- * Spinner — animated loading indicator.
+ * Spinner - animated loading indicator.
  *
  * Supports two visual variants: a rotating ring (`border`, default) and
  * three bouncing dots (`dots`). Size and colour are driven by the shared
@@ -22,8 +22,6 @@ import type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';
  * ```
  */
 class Spinner extends AeicoComponent {
-  static tagName = 'spinner';
-
   @prop({ type: String })
   accessor variant: SpinnerVariant = 'border';
 
@@ -69,7 +67,7 @@ class Spinner extends AeicoComponent {
   }
 }
 
-Spinner.register();
+Spinner.define('spinner');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/styles/components/action-button.css

@@ -1,4 +1,4 @@
-/* Action button base styles — shared by clear-btn and reset-btn (standalone mode) */
+/* Action button base styles - shared by clear-btn and reset-btn (standalone mode) */
 .clear-btn:not(.action-btn),
 .reset-btn:not(.action-btn) {
   width: 1.333em;