aeico-components 0.1.1

package/src/breadcrumb/breadcrumb-item.ts

@@ -0,0 +1,61 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import style from '../styles/components/breadcrumb-item.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import { prop } from 'aeico';
+
+/**
+ * BreadcrumbItem Component
+ *
+ * A single item in the `ae-breadcrumb` navigation trail.
+ * Renders as a link (`<a>`) when `href` is provided, otherwise as plain text.
+ * The separator is injected by the parent `ae-breadcrumb`.
+ *
+ * @example
+ * ```html
+ * <ae-breadcrumb>
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Current Page</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ * ```
+ */
+class BreadcrumbItem extends AeicoComponent {
+  static tagName = 'breadcrumb-item';
+
+  protected static styles = [styleVariables, style];
+
+  @prop({ type: String })
+  accessor href: string | undefined;
+
+  protected render() {
+    return html(({ li, span, slot, a }) => {
+      li({ part: 'item', className: 'item' }, () => {
+        span({ part: 'separator', className: 'sep', 'aria-hidden': 'true' }, () => {
+          slot({ name: 'separator' });
+        });
+        span({ part: 'label', className: 'label' }, () => {
+          if (this.href) {
+            a({ href: this.href, part: 'link' }, () => {
+              slot();
+            });
+          } else {
+            slot();
+          }
+        });
+      });
+    });
+  }
+}
+
+BreadcrumbItem.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-breadcrumb-item': BreadcrumbItem;
+  }
+}
+
+export default BreadcrumbItem;
+export type BreadcrumbItemProps = InferProps<typeof BreadcrumbItem>;

package/src/breadcrumb/breadcrumb.ts

@@ -0,0 +1,138 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import style from '../styles/components/breadcrumb.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import { prop } from 'aeico';
+import type BreadcrumbItem from './breadcrumb-item';
+
+/**
+ * Breadcrumb Component
+ *
+ * A navigation trail that shows the user's location in a hierarchy.
+ * Automatically injects separators between items and marks the last 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
+ *
+ * Supports `color` for theming item link colors. The separator intentionally
+ * uses a fixed muted color and does NOT respond to the `color` prop.
+ *
+ * @example
+ * ```html
+ * <!-- Default separator "/" -->
+ * <ae-breadcrumb>
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item href="/docs">Docs</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Getting Started</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ *
+ * <!-- Custom text separator -->
+ * <ae-breadcrumb separator=">">
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Current</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ *
+ * <!-- Icon separator (slot takes priority over separator attribute) -->
+ * <ae-breadcrumb>
+ *   <ae-icon slot="separator" name="chevron-right" size="xs"></ae-icon>
+ *   <ae-breadcrumb-item href="/">Home</ae-breadcrumb-item>
+ *   <ae-breadcrumb-item>Current</ae-breadcrumb-item>
+ * </ae-breadcrumb>
+ * ```
+ */
+class Breadcrumb extends AeicoComponent {
+  static tagName = 'breadcrumb';
+
+  protected static styles = [styleVariables, colorCSS, style];
+
+  /** Text separator shown between items. Ignored when `slot="separator"` is provided. */
+  @prop({ type: String })
+  accessor separator: string = '/';
+
+  @prop({ type: String })
+  accessor color: string | undefined;
+
+  private _itemsSlot: HTMLSlotElement | null = null;
+  private _sepSlot: HTMLSlotElement | null = null;
+
+  protected render() {
+    return html(({ nav, ol, slot }) => {
+      nav({ 'aria-label': 'breadcrumb', part: 'nav' }, () => {
+        ol({ part: 'list', className: 'list' }, () => {
+          this._itemsSlot = slot({
+            '@slotchange': () => this._syncSeparators(),
+          });
+        });
+      });
+      this._sepSlot = slot({
+        name: 'separator',
+        className: 'sep-template',
+        '@slotchange': () => this._syncSeparators(),
+      });
+    });
+  }
+
+  protected onUpdated() {
+    this._syncSeparators();
+  }
+
+  private _getItems(): BreadcrumbItem[] {
+    return (this._itemsSlot?.assignedElements() ?? []) as BreadcrumbItem[];
+  }
+
+  private _getSepElement(): Element | null {
+    return this._sepSlot?.assignedElements()[0] ?? null;
+  }
+
+  private _syncSeparators = () => {
+    const items = this._getItems();
+    const sepEl = this._getSepElement();
+
+    items.forEach((item, i) => {
+      // Remove previously injected separators to avoid duplicates
+      item.querySelectorAll('[data-ae-sep]').forEach((n) => n.remove());
+
+      const isLast = i === items.length - 1;
+
+      // Mark the last item as the current page for accessibility
+      if (isLast) {
+        item.setAttribute('aria-current', 'page');
+      } else {
+        item.removeAttribute('aria-current');
+      }
+
+      // First item gets no separator
+      if (i === 0) return;
+
+      const wrapper = document.createElement('span');
+      wrapper.setAttribute('slot', 'separator');
+      wrapper.setAttribute('data-ae-sep', '');
+      wrapper.setAttribute('aria-hidden', 'true');
+
+      if (sepEl) {
+        // Clone the slotted separator element (e.g. ae-icon)
+        wrapper.appendChild(sepEl.cloneNode(true));
+      } else {
+        // Fall back to text separator
+        wrapper.textContent = this.separator;
+      }
+
+      item.prepend(wrapper);
+    });
+  };
+}
+
+Breadcrumb.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-breadcrumb': Breadcrumb;
+  }
+}
+
+export default Breadcrumb;
+export type BreadcrumbProps = InferProps<typeof Breadcrumb>;

package/src/breadcrumb/defines.ts

@@ -0,0 +1,10 @@
+export type BreadcrumbColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';

package/src/breadcrumb/index.ts

@@ -0,0 +1,5 @@
+export { default, default as Breadcrumb } from './breadcrumb';
+export { default as BreadcrumbItem } from './breadcrumb-item';
+export type { BreadcrumbProps } from './breadcrumb';
+export type { BreadcrumbItemProps } from './breadcrumb-item';
+export type { BreadcrumbColor } from './defines';

package/src/button/button.ts

@@ -0,0 +1,147 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import buttonStyle from '../styles/components/button.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import { ButtonColor, ButtonSize, ButtonVariant } from './defines';
+import { prop } from 'aeico';
+
+/**
+ * Button Component
+ *
+ * A customizable button component with multiple variants and sizes.
+ * Supports theme and internationalization through mixins.
+ *
+ * @example
+ * ```typescript
+ * // Using the static create method
+ * const button = Button.create({
+ *   variant: 'primary',
+ *   size: 'md'
+ * })
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using as Web Component -->
+ * <ae-button variant="primary" size="md">Save</ae-button>
+ * <ae-button variant="danger" size="sm">Delete</ae-button>
+ * <ae-button variant="subtle">Cancel</ae-button>
+ * ```
+ */
+class Button extends AeicoComponent {
+  protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];
+
+  @prop({ type: String })
+  color?: ButtonColor;
+
+  @prop({ type: String })
+  variant?: ButtonVariant;
+
+  @prop({ type: String })
+  size?: ButtonSize;
+
+  @prop({ type: Boolean })
+  disabled?: boolean;
+
+  @prop({ type: String })
+  type?: 'button' | 'submit' | 'reset';
+
+  @prop({ type: Boolean })
+  active?: boolean;
+
+  @prop({ type: Boolean })
+  block?: boolean;
+
+  private buttonElement: HTMLButtonElement | null = null;
+  private _autoAriaLabel = false;
+
+  protected onMounted() {
+    const slot = this.shadowRoot?.querySelector('slot:not([name])');
+    if (slot) this.listen(slot, 'slotchange', this._handleSlotChange);
+    this._handleSlotChange();
+  }
+
+  private _handleSlotChange = () => {
+    const slot = this.shadowRoot?.querySelector('slot:not([name])') as HTMLSlotElement | null;
+    const nodes = slot?.assignedNodes() ?? [];
+    // Icon-only: exactly one element (ae-icon) and no meaningful text nodes
+    const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);
+    const hasText = nodes.some(
+      (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',
+    );
+    const isIconOnly =
+      !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';
+
+    if (isIconOnly) {
+      this.setAttribute('icon-only', '');
+      if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {
+        this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');
+        this._autoAriaLabel = true;
+      }
+    } else {
+      this.removeAttribute('icon-only');
+      if (this._autoAriaLabel) {
+        this.removeAttribute('aria-label');
+        this._autoAriaLabel = false;
+      }
+    }
+  };
+
+  protected render() {
+    return html(({ button, slot }) => {
+      this.buttonElement = button(
+        {
+          type: this.type || 'button',
+          disabled: this.disabled,
+          part: 'button',
+          'aria-pressed': this.active,
+          'aria-disabled': this.disabled,
+        },
+        () => {
+          slot();
+        },
+      );
+    });
+  }
+
+  /**
+   * Programmatically click the button
+   */
+  click() {
+    if (!this.disabled && this.buttonElement) {
+      this.buttonElement.click();
+    }
+  }
+
+  /**
+   * Focus the button
+   */
+  focus() {
+    if (this.buttonElement) {
+      this.buttonElement.focus();
+    }
+  }
+
+  /**
+   * Blur the button
+   */
+  blur() {
+    if (this.buttonElement) {
+      this.buttonElement.blur();
+    }
+  }
+}
+
+Button.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-button': Button;
+  }
+}
+
+export default Button;
+export type ButtonProps = InferProps<typeof Button>;

package/src/button/defines.ts

@@ -0,0 +1,12 @@
+export type ButtonColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';
+export type ButtonVariant = 'filled' | 'outlined' | 'faint' | 'subtle' | 'text';
+export type ButtonSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg';

package/src/button/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Button } from './button';
+export type { ButtonProps } from './button';
+export type { ButtonColor, ButtonSize, ButtonVariant } from './defines';

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

@@ -0,0 +1,140 @@
+import type { InferProps, Props } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import buttonGroupStyle from '../styles/components/button-group.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type { ButtonColor, ButtonVariant, ButtonSize } from '../button';
+import Button from '../button/button';
+import DropdownButton from '../dropdown/dropdown-button';
+
+/**
+ * ButtonGroup Component
+ *
+ * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,
+ * `size`, and `disabled` props to each child. Supports a `compact` mode that
+ * joins buttons into a seamless connected strip (like Bootstrap's button group).
+ *
+ * @example
+ * ```html
+ * <!-- Loose group (gap between buttons) -->
+ * <ae-button-group variant="outlined" color="primary">
+ *   <ae-button>One</ae-button>
+ *   <ae-button>Two</ae-button>
+ *   <ae-button>Three</ae-button>
+ * </ae-button-group>
+ *
+ * <!-- Compact — joined strip -->
+ * <ae-button-group compact color="primary">
+ *   <ae-button>Left</ae-button>
+ *   <ae-button>Middle</ae-button>
+ *   <ae-button>Right</ae-button>
+ * </ae-button-group>
+ *
+ * <!-- Full-width -->
+ * <ae-button-group block color="danger" variant="outlined">
+ *   <ae-button>Delete</ae-button>
+ *   <ae-button>Archive</ae-button>
+ * </ae-button-group>
+ * ```
+ */
+class ButtonGroup extends AeicoComponent {
+  static props: Props = {
+    variant: { type: String },
+    color: { type: String },
+    size: { type: String },
+    compact: { type: Boolean },
+    block: { type: Boolean },
+    disabled: { type: Boolean },
+  };
+
+  protected static styles = [styleVariables, buttonGroupStyle];
+
+  declare variant?: ButtonVariant;
+  declare color?: ButtonColor;
+  declare size?: ButtonSize;
+  declare compact?: boolean;
+  declare block?: boolean;
+  declare disabled?: boolean;
+
+  private slotEl: HTMLSlotElement | null = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    if (this.variant === undefined) this.variant = 'filled';
+    if (this.color === undefined) this.color = 'default';
+    if (this.size === undefined) this.size = 'md';
+  }
+
+  protected render() {
+    return html(({ slot }) => {
+      this.slotEl = slot({
+        '@slotchange': () => this._syncChildren(),
+      });
+      this._syncChildren();
+    });
+  }
+
+  private _getButtons(): Array<Button | DropdownButton> {
+    if (!this.slotEl) return [];
+
+    return (
+      this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>
+    ).filter((el) => {
+      const tag = el.tagName.toLowerCase();
+      return tag === 'ae-button' || tag === 'ae-dropdown-button';
+    });
+  }
+
+  private _syncChildren() {
+    const buttons = this._getButtons();
+    const r = this.size === 'xs' || this.size === 'sm' ? 3 : 4;
+
+    buttons.forEach((btn: Button | DropdownButton, i) => {
+      btn.variant = this.variant;
+      btn.color = this.color;
+      btn.size = this.size;
+
+      if (this.disabled) {
+        btn.disabled = true;
+      } else {
+        btn.disabled = false;
+      }
+
+      if (this.compact) {
+        const isFirst = i === 0;
+        const isLast = i === buttons.length - 1;
+
+        // Overlap adjacent borders by pulling non-first buttons left 1px
+        btn.style.marginLeft = isFirst ? '' : '-1px';
+
+        // Shape corners: only the outer edges of the strip keep radius
+        btn.style.setProperty('--_btn-r-tl', isFirst ? `${r}px` : '0');
+        btn.style.setProperty('--_btn-r-bl', isFirst ? `${r}px` : '0');
+        btn.style.setProperty('--_btn-r-tr', isLast ? `${r}px` : '0');
+        btn.style.setProperty('--_btn-r-br', isLast ? `${r}px` : '0');
+      } else {
+        btn.style.marginLeft = '';
+        this._clearRadius(btn);
+      }
+    });
+  }
+
+  private _clearRadius(btn: HTMLElement) {
+    btn.style.removeProperty('--_btn-r-tl');
+    btn.style.removeProperty('--_btn-r-tr');
+    btn.style.removeProperty('--_btn-r-br');
+    btn.style.removeProperty('--_btn-r-bl');
+  }
+}
+
+ButtonGroup.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-button-group': ButtonGroup;
+  }
+}
+
+export default ButtonGroup;
+export type ButtonGroupProps = InferProps<typeof ButtonGroup>;

package/src/button-group/index.ts

@@ -0,0 +1,2 @@
+export { default, default as ButtonGroup } from './button-group';
+export type { ButtonGroupProps } from './button-group';

package/src/card/card.ts

@@ -0,0 +1,57 @@
+import type { InferProps } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import cardStyle from '../styles/components/card.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+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 })
+  accessor color: CardColor = 'default';
+
+  @prop({ type: String })
+  accessor variant: CardVariant = 'filled';
+
+  protected render() {
+    return html(({ div, header, footer, slot }) => {
+      div({ className: 'card', part: 'card' }, () => {
+        header({ className: 'header', part: 'header' }, () => {
+          slot({ name: 'header', '@slotchange': (e: Event) => this._onHeaderSlotChange(e) });
+        });
+        div({ className: 'body', part: 'body' }, () => {
+          slot();
+        });
+        footer({ className: 'footer', part: 'footer' }, () => {
+          slot({ name: 'footer', '@slotchange': (e: Event) => this._onFooterSlotChange(e) });
+        });
+      });
+    });
+  }
+
+  private _onHeaderSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.toggleAttribute('has-header', slot.assignedNodes({ flatten: true }).length > 0);
+  }
+
+  private _onFooterSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.toggleAttribute('has-footer', slot.assignedNodes({ flatten: true }).length > 0);
+  }
+}
+
+Card.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-card': Card;
+  }
+}
+
+export default Card;
+export type CardProps = InferProps<typeof Card>;

package/src/card/defines.ts

@@ -0,0 +1,11 @@
+export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type CardColor =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';

package/src/card/index.ts

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

package/src/checkbox/checkbox.ts

@@ -0,0 +1,90 @@
+import AeicoField from '../aeico-field';
+import type { InferProps, Props } from 'aeico';
+import { html } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import sizeCSS from '../styles/size.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import styles from '../styles/components/checkbox.css?inline';
+import { CheckboxVariant } from './defines';
+
+class Checkbox extends AeicoField {
+  protected fieldElement: HTMLInputElement | null = null;
+
+  static tagName = 'checkbox';
+
+  static props: Props = {
+    checked: { type: Boolean },
+    defaultChecked: { type: Boolean },
+    variant: { type: String },
+  };
+
+  declare checked?: boolean;
+  declare defaultChecked?: boolean;
+  declare variant?: CheckboxVariant;
+
+  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];
+
+  protected getValue(): boolean {
+    return this.fieldElement?.checked ?? false;
+  }
+
+  protected writeValue(checked: boolean): void {
+    if (this.fieldElement) {
+      this.fieldElement.checked = Boolean(checked);
+    }
+  }
+
+  protected getEventPayload(checked: boolean, oldChecked: boolean, action: any) {
+    return { checked, oldChecked, action };
+  }
+
+  protected setValue(checked: boolean, options?: { silent?: boolean; action?: any }): void {
+    const oldChecked = this.getValue();
+    this.checked = checked;
+    this.writeValue(checked);
+    if (options?.silent === false) {
+      this.emit('change', {
+        detail: this.getEventPayload(checked, oldChecked, options.action || 'change'),
+      });
+    }
+  }
+
+  public reset(checked?: boolean, options?: { silent?: boolean }): void {
+    this.setValue(checked !== undefined ? checked : (this.defaultChecked ?? false), {
+      ...options,
+      action: 'reset',
+    });
+  }
+
+  public clear(options?: { silent?: boolean }): void {
+    this.setValue(false, { ...options, action: 'clear' });
+  }
+
+  render() {
+    return html(({ div, input }) => {
+      div({ className: 'checkbox-container', variant: this.variant }, () => {
+        div({ className: 'checkbox-wrapper' }, () => {
+          this.fieldElement = input({
+            type: 'checkbox',
+            className: 'field-input',
+            checked: Boolean(this.checked),
+            disabled: Boolean(this.disabled),
+            '@change': this.boundOnChange,
+          });
+        });
+        this.renderActionButtons();
+      });
+    });
+  }
+}
+
+Checkbox.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-checkbox': Checkbox;
+  }
+}
+
+export default Checkbox;
+export type CheckboxProps = InferProps<typeof Checkbox>;

package/src/checkbox/defines.ts

@@ -0,0 +1 @@
+export type CheckboxVariant = 'checkbox';