aeico-components 0.1.8 → 0.1.10

package/dist/types/menu/menu.d.ts

@@ -7,15 +7,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.
  */
 declare class Menu extends AeicoComponent {
-    static tagName: string;
     protected static styles: string[];
     accessor mode: MenuMode;
     accessor orientation: MenuOrientation;

package/dist/types/navbar/navbar.d.ts

@@ -8,9 +8,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"`.
@@ -37,7 +37,6 @@ import type { NavbarColor, NavbarAppearance } from './defines';
  * ```
  */
 declare class Navbar extends AeicoComponent {
-    static tagName: string;
     protected static styles: string[];
     /** Background color using the design-system color token set. */
     accessor color: NavbarColor | undefined;
@@ -45,8 +44,8 @@ declare class Navbar extends AeicoComponent {
     accessor sticky: boolean;
     /**
      * 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.

package/dist/types/number-input/number-input.d.ts

@@ -2,7 +2,6 @@ import AeicoField from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 declare class NumberInput extends AeicoField<number> {
     protected fieldElement: HTMLInputElement | null;
-    static tagName: string;
     static props: Props;
     placeholder?: string;
     min?: number;

package/dist/types/pagination/pagination.d.ts

@@ -39,7 +39,6 @@ import '../icon/icon';
  * ```
  */
 declare class Pagination extends AeicoComponent {
-    static tagName: string;
     protected static styles: string[];
     accessor page: number;
     accessor pageSize: number;

package/dist/types/progress-bar/progress-bar.d.ts

@@ -20,7 +20,6 @@ import type { ProgressBarColor } from './defines';
  *   When set, takes precedence over the `color` prop entirely.
  */
 declare class ProgressBar extends AeicoComponent {
-    static tagName: string;
     protected static styles: string[];
     accessor value: number;
     accessor label: string;

package/dist/types/radio-group/radio-group.d.ts

@@ -8,7 +8,6 @@ declare class RadioGroup extends AeicoField {
     private _slotOptions;
     private static _instanceCount;
     private readonly _groupName;
-    static tagName: string;
     static props: Props;
     options?: RadioGroupOptions;
     mode?: RadioGroupMode;

package/dist/types/radio-group/radio.d.ts

@@ -1,15 +1,15 @@
 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, …).
  *
@@ -31,8 +31,7 @@ import type { InferProps, Props } from 'aeico';
  * ```
  */
 declare class Radio extends AeicoComponent {
-    static tagName: string;
-    /** No shadow DOM — this element is a transparent data/content carrier. */
+    /** No shadow DOM - this element is a transparent data/content carrier. */
     static useShadowDOM: boolean;
     static props: Props;
     value: string;

package/dist/types/select/select-option.d.ts

@@ -1,7 +1,6 @@
 import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 declare class SelectOption extends AeicoComponent {
-    static tagName: string;
     accessor value: string | undefined;
     accessor label: string | undefined;
     accessor disabled: boolean;

package/dist/types/select/select.d.ts

@@ -21,7 +21,6 @@ declare class Select extends AeicoField<SelectOptionValue | SelectMultiValue> {
     private _slotEl;
     private _slotOptionData;
     private _selectedListEl;
-    static tagName: string;
     accessor _expanded: boolean;
     accessor options: SelectOptions | undefined;
     accessor position: SelectPosition | undefined;

package/dist/types/slider/defines.d.ts

@@ -11,8 +11,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`.
@@ -24,8 +24,8 @@ export type MarkItem = number | {
 };
 /**
  * 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/dist/types/slider/slider.d.ts

@@ -7,7 +7,6 @@ declare class Slider extends AeicoField {
     private _numberInput;
     private _boundOnRangeInput;
     private _boundOnNumberInput;
-    static tagName: string;
     accessor options: SliderOptions;
     accessor percentage: boolean;
     accessor min: number;

package/dist/types/spinner/spinner.d.ts

@@ -2,7 +2,7 @@ import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 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
@@ -16,7 +16,6 @@ import type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';
  * ```
  */
 declare class Spinner extends AeicoComponent {
-    static tagName: string;
     accessor variant: SpinnerVariant;
     accessor size: SpinnerSize;
     accessor color: SpinnerColor;

package/dist/types/switch/switch.d.ts

@@ -4,7 +4,6 @@ import type { SwitchIconPlacement } from './defines';
 import '../icon/icon';
 declare class Switch extends AeicoField<boolean> {
     protected fieldElement: HTMLInputElement | null;
-    static tagName: string;
     accessor checked: boolean | undefined;
     accessor defaultChecked: boolean | undefined;
     accessor icon: string | undefined;

package/dist/types/text-input/text-input.d.ts

@@ -2,7 +2,6 @@ import AeicoField from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 declare class TextInput extends AeicoField {
     protected fieldElement: HTMLInputElement | null;
-    static tagName: string;
     static props: Props;
     placeholder?: string;
     type?: string;

package/dist/types/textarea/textarea.d.ts

@@ -3,7 +3,6 @@ import type { InferProps } from 'aeico';
 export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 declare class Textarea extends AeicoField {
     protected fieldElement: HTMLTextAreaElement | null;
-    static tagName: string;
     accessor placeholder: string | undefined;
     accessor rows: number | undefined;
     accessor maxlength: number | undefined;

package/dist/types/tree/tree-item.d.ts

@@ -2,7 +2,7 @@ import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import '../icon';
 /**
- * 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.
@@ -20,7 +20,6 @@ import '../icon';
  * @slot label   - Custom label content (falls back to the `label` attribute text).
  */
 declare class TreeItem extends AeicoComponent {
-    static tagName: string;
     protected static styles: string[];
     accessor key: string | undefined;
     accessor icon: string | undefined;

package/dist/types/tree/tree.d.ts

@@ -29,7 +29,6 @@ import './tree-item';
  * ```
  */
 declare class Tree extends AeicoComponent {
-    static tagName: string;
     protected static styles: string[];
     accessor checkable: boolean;
     accessor multiple: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeico-components",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -57,6 +57,8 @@
     "build": "node scripts/build.mjs && node scripts/build-cjs.mjs && node scripts/build-styles.mjs && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
     "dev": "node scripts/build.mjs --watch",
     "dev:example": "vite --config vite.example.config.ts",
+    "dev:example:components": "vite --config vite.example.config.ts",
+    "dev:example:simple": "cd examples/simple && vite",
     "type-check": "tsc --noEmit",
     "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
     "lint:fix": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --fix",
@@ -76,7 +78,7 @@
   "author": "Eowl",
   "license": "MIT",
   "peerDependencies": {
-    "aeico": "^0.1.5"
+    "aeico": "^0.1.8"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -85,7 +87,7 @@
     "@web/dev-server-esbuild": "^1.0.5",
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-playwright": "^0.11.1",
-    "aeico": "^0.1.5",
+    "aeico": "^0.1.8",
     "aeico-localize": "^0.1.1",
     "esbuild": "^0.28.1",
     "eslint": "^10.1.0",

package/src/aeico-component.ts

@@ -1,5 +1,4 @@
-import { AeicoElement } from 'aeico';
-import { toKebab } from './utils';
+import { AeicoElement } from 'aeico';
 
 const TAG_NAME_PREFIX = 'ae';
 
@@ -7,10 +6,12 @@ const TAG_NAME_PREFIX = 'ae';
  * AeicoComponent is the base class for all built-in Aeico components.
  */
 class AeicoComponent extends AeicoElement {
-  static register(name?: string) {
-    const tagName = name || `${TAG_NAME_PREFIX}-${this.tagName || toKebab(this.name)}`;
+  static define(name: string) {
+    const prefix = `${TAG_NAME_PREFIX}-`;
 
-    super.register(tagName);
+    const tagName = name.startsWith(prefix) ? name : `${prefix}${name}`;
+
+    super.define(tagName);
   }
 }
 

package/src/aeico-field.ts

@@ -1,4 +1,4 @@
-import type { InferProps, Props, Watchers } from 'aeico';
+import type { InferProps, Props, Watchers } from 'aeico';
 import { tags } from 'aeico';
 import AeicoComponent from './aeico-component';
 
@@ -205,7 +205,7 @@ class AeicoField<TValue = string> extends AeicoComponent {
   }
 
   /**
-   * Watcher for error property — syncs aria-invalid on the field element
+   * Watcher for error property - syncs aria-invalid on the field element
    */
   protected onErrorChanged(newValue: string | undefined): void {
     if (this.fieldElement) {

package/src/alert/alert.ts

@@ -1,4 +1,4 @@
-import type { InferProps, Props } from 'aeico';
+import type { InferProps, Props } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import colorCSS from '../styles/color.css';
 import alertStyle from '../styles/components/alert.css';
@@ -96,7 +96,7 @@ class Alert extends AeicoComponent {
   };
 }
 
-Alert.register();
+Alert.define('alert');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/badge/badge.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';
@@ -50,7 +50,7 @@ class Badge extends AeicoComponent {
   }
 }
 
-Badge.register();
+Badge.define('badge');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/breadcrumb/breadcrumb-item.ts

@@ -1,4 +1,4 @@
-import type { InferProps } from 'aeico';
+import type { InferProps } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import style from '../styles/components/breadcrumb-item.css';
 import AeicoComponent from '../aeico-component';
@@ -22,8 +22,6 @@ import { prop } from 'aeico';
  * ```
  */
 class BreadcrumbItem extends AeicoComponent {
-  static tagName = 'breadcrumb-item';
-
   protected static styles = [styleVariables, style];
 
   @prop({ type: String })
@@ -49,7 +47,7 @@ class BreadcrumbItem extends AeicoComponent {
   }
 }
 
-BreadcrumbItem.register();
+BreadcrumbItem.define('breadcrumb-item');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/breadcrumb/breadcrumb.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 style from '../styles/components/breadcrumb.css';
@@ -15,8 +15,8 @@ import type BreadcrumbItem from './breadcrumb-item';
  * as `aria-current="page"`.
  *
  * The separator is configurable via:
- * - `separator` attribute (text, default `/`) — simple and concise
- * - `slot="separator"` (any element, e.g. `ae-icon`) — takes priority over the attribute
+ * - `separator` attribute (text, default `/`) - simple and concise
+ * - `slot="separator"` (any element, e.g. `ae-icon`) - takes priority over the attribute
  *
  * Supports `color` for theming item link colors. The separator intentionally
  * uses a fixed muted color and does NOT respond to the `color` prop.
@@ -45,8 +45,6 @@ import type BreadcrumbItem from './breadcrumb-item';
  * ```
  */
 class Breadcrumb extends AeicoComponent {
-  static tagName = 'breadcrumb';
-
   protected static styles = [styleVariables, colorCSS, style];
 
   /** Text separator shown between items. Ignored when `slot="separator"` is provided. */
@@ -126,7 +124,7 @@ class Breadcrumb extends AeicoComponent {
   };
 }
 
-Breadcrumb.register();
+Breadcrumb.define('breadcrumb');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/button/button.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';
@@ -133,7 +133,7 @@ class Button extends AeicoComponent {
   }
 }
 
-Button.register();
+Button.define('button');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/button-group/button-group.ts

@@ -1,4 +1,4 @@
-import type { InferProps, Props } from 'aeico';
+import type { InferProps, Props } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import buttonGroupStyle from '../styles/components/button-group.css';
 import AeicoComponent from '../aeico-component';
@@ -23,7 +23,7 @@ import DropdownButton from '../dropdown/dropdown-button';
  *   <ae-button>Three</ae-button>
  * </ae-button-group>
  *
- * <!-- Compact — joined strip -->
+ * <!-- Compact - joined strip -->
  * <ae-button-group compact color="primary">
  *   <ae-button>Left</ae-button>
  *   <ae-button>Middle</ae-button>
@@ -127,7 +127,7 @@ class ButtonGroup extends AeicoComponent {
   }
 }
 
-ButtonGroup.register();
+ButtonGroup.define('button-group');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/card/card.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 cardStyle from '../styles/components/card.css';
@@ -8,8 +8,6 @@ import type { CardVariant, CardColor } from './defines';
 import { prop } from 'aeico';
 
 class Card extends AeicoComponent {
-  static tagName = 'card';
-
   protected static styles = [styleVariables, colorCSS, cardStyle];
 
   @prop({ type: String })
@@ -45,7 +43,7 @@ class Card extends AeicoComponent {
   }
 }
 
-Card.register();
+Card.define('card');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/card/defines.ts

@@ -1,4 +1,4 @@
-export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
+export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
 export type CardColor =
   | 'default'
   | 'primary'

package/src/card/index.ts

@@ -1,3 +1,3 @@
-export { default, default as Card } from './card';
+export { default, default as Card } from './card';
 export type { CardProps } from './card';
 export type { CardVariant, CardColor } from './defines';

package/src/checkbox/checkbox.ts

@@ -1,4 +1,4 @@
-import AeicoField, { type FieldAction } from '../aeico-field';
+import AeicoField, { type FieldAction } from '../aeico-field';
 import type { InferProps, Props } from 'aeico';
 import { html } from 'aeico';
 import styleVariables from '../styles/variables.css';
@@ -12,8 +12,6 @@ import { CheckboxVariant } from './defines';
 class Checkbox extends AeicoField<boolean> {
   protected fieldElement: HTMLInputElement | null = null;
 
-  static tagName = 'checkbox';
-
   static props: Props = {
     checked: { type: Boolean },
     defaultChecked: { type: Boolean },
@@ -93,7 +91,7 @@ class Checkbox extends AeicoField<boolean> {
   }
 }
 
-Checkbox.register();
+Checkbox.define('checkbox');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/copy-button/copy-button.ts

@@ -138,7 +138,7 @@ class CopyButton extends AeicoComponent {
   }
 }
 
-CopyButton.register();
+CopyButton.define('copy-button');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/detail/detail.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 detailStyle from '../styles/components/detail.css';
@@ -19,8 +19,6 @@ import type { DetailColor, DetailVariant, DetailIconPlacement } from './defines'
  * </ae-detail>
  */
 class Detail extends AeicoComponent {
-  static tagName = 'detail';
-
   protected static styles = [styleVariables, colorCSS, detailStyle];
 
   @prop({ type: String })
@@ -113,7 +111,7 @@ class Detail extends AeicoComponent {
   }
 }
 
-Detail.register();
+Detail.define('detail');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/detail-group/detail-group.ts

@@ -7,7 +7,7 @@ import type Detail from '../detail/detail';
 import type { DetailColor, DetailVariant } from '../detail/defines';
 
 /**
- * DetailGroup component — wraps multiple `ae-detail` elements into an
+ * DetailGroup component - wraps multiple `ae-detail` elements into an
  * accordion-style group. By default only one item can be open at a time;
  * set `multiple` to allow several items open simultaneously.
  *
@@ -21,8 +21,6 @@ import type { DetailColor, DetailVariant } from '../detail/defines';
  * ```
  */
 class DetailGroup extends AeicoComponent {
-  static tagName = 'detail-group';
-
   static props: Props = {
     multiple: { type: Boolean },
     variant: { type: String },
@@ -92,7 +90,7 @@ class DetailGroup extends AeicoComponent {
   }
 }
 
-DetailGroup.register();
+DetailGroup.define('detail-group');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/dialog/dialog.ts

@@ -1,4 +1,4 @@
-import type { InferProps, Props } from 'aeico';
+import type { InferProps, Props } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import style from '../styles/components/dialog.css';
 import AeicoComponent from '../aeico-component';
@@ -138,7 +138,7 @@ class Dialog extends AeicoComponent {
   }
 }
 
-Dialog.register();
+Dialog.define('dialog');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/divider/divider.ts

@@ -1,4 +1,4 @@
-import AeicoComponent from '../aeico-component';
+import AeicoComponent from '../aeico-component';
 import type { InferProps } from 'aeico';
 import styleVariables from '../styles/variables.css';
 import colorCSS from '../styles/color.css';
@@ -22,8 +22,6 @@ import { prop } from 'aeico';
  * @cssproperty --thickness - Custom property to set the thickness of the divider when the `thickness` prop is used.
  */
 class Divider extends AeicoComponent {
-  static tagName = 'divider';
-
   @prop({ type: Boolean })
   accessor vertical: boolean = false;
 
@@ -44,7 +42,7 @@ class Divider extends AeicoComponent {
   }
 }
 
-Divider.register();
+Divider.define('divider');
 
 declare global {
   interface HTMLElementTagNameMap {

package/src/drawer/drawer.ts

@@ -84,7 +84,7 @@ class Drawer extends AeicoComponent {
             slot();
           });
 
-          // Footer — always rendered to capture slotchange, hidden when empty
+          // Footer - always rendered to capture slotchange, hidden when empty
           footer({ style: { display: this._hasFooter ? '' : 'none' } }, () => {
             slot({ name: 'footer', '@slotchange': this._handleFooterSlotChange });
           });
@@ -162,7 +162,7 @@ class Drawer extends AeicoComponent {
   }
 }
 
-Drawer.register();
+Drawer.define('drawer');
 
 declare global {
   interface HTMLElementTagNameMap {