aeico-components 0.1.1

package/dist/types/tabs/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Tabs } from './tabs';
+export { default as Tab } from './tab';
+export { default as TabPanel } from './tab-panel';

package/dist/types/tabs/tab-panel.d.ts

@@ -0,0 +1,11 @@
+import AeicoComponent from '../aeico-component';
+declare class TabPanel extends AeicoComponent {
+    protected static styles: string[];
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tab-panel': TabPanel;
+    }
+}
+export default TabPanel;

package/dist/types/tabs/tab.d.ts

@@ -0,0 +1,18 @@
+import type { Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+declare class Tab extends AeicoComponent {
+    static props: Props;
+    active?: boolean;
+    disabled?: boolean;
+    panel?: string;
+    protected static styles: string[];
+    connectedCallback(): void;
+    private _handleClick;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tab': Tab;
+    }
+}
+export default Tab;

package/dist/types/tabs/tabs.d.ts

@@ -0,0 +1,24 @@
+import type { Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+declare class Tabs extends AeicoComponent {
+    static props: Props;
+    activeIndex?: number;
+    protected static styles: string[];
+    private _observer;
+    private get _tabs();
+    private get _panels();
+    private _getPairs;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected onUpdated(): void;
+    private _handleTabClick;
+    private _syncActive;
+    selectTab(index: number): void;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tabs': Tabs;
+    }
+}
+export default Tabs;

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

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

package/dist/types/tag/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './tag';
+export type { TagProps } from './tag';
+export type { TagColor, TagVariant, TagSize } from './defines';

package/dist/types/tag/tag.d.ts

@@ -0,0 +1,36 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { TagColor, TagSize, TagVariant } from './defines';
+/**
+ * Tag Component
+ *
+ * An inline label component with optional dismiss button.
+ * Supports the same color, variant, and size options as Button.
+ *
+ * @example
+ * ```html
+ * <ae-tag color="primary" variant="faint">Label</ae-tag>
+ * <ae-tag color="success" variant="outlined" dismissible>Removable</ae-tag>
+ * <ae-tag color="danger" size="sm">
+ *   <ae-icon slot="start" name="warning"></ae-icon>
+ *   Error
+ * </ae-tag>
+ * ```
+ */
+declare class Tag extends AeicoComponent {
+    protected static styles: string[];
+    accessor color: TagColor | undefined;
+    accessor variant: TagVariant | undefined;
+    accessor size: TagSize | undefined;
+    accessor dismissible: boolean;
+    accessor disabled: boolean;
+    accessor pill: boolean;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tag': Tag;
+    }
+}
+export default Tag;
+export type TagProps = InferProps<typeof Tag>;

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

@@ -0,0 +1,2 @@
+export { default, default as TextInput } from './text-input';
+export type { TextInputProps } from './text-input';

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

@@ -0,0 +1,26 @@
+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;
+    protected static styles: string[];
+    render(): import("aeico-view").RenderResult;
+    /**
+     * Update clear button visibility based on input value
+     */
+    private updateClearButtonVisibility;
+    /**
+     * Write value to the input element (DOM only)
+     */
+    protected writeValue(value: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-text-input': TextInput;
+    }
+}
+export default TextInput;
+export type TextInputProps = InferProps<typeof TextInput>;

package/dist/types/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const SVG_NS = "http://www.w3.org/2000/svg";
+export declare function toKebab(str: string): string;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "aeico-components",
+  "version": "0.1.1",
+  "description": "Built-in UI components for the Aeico Web Components framework",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/*.tsbuildinfo",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "vite build && tsc --declaration --emitDeclarationOnly --outDir dist/types -p tsconfig.json",
+    "dev": "vite build --watch",
+    "dev:example": "vite --config vite.example.config.ts",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.ts\" \"test/**/*.ts\"",
+    "lint:fix": "eslint \"src/**/*.ts\" \"test/**/*.ts\" --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "format:check": "prettier --check \"src/**/*.ts\"",
+    "test": "web-test-runner --config web-test-runner.config.mjs",
+    "test:watch": "web-test-runner --config web-test-runner.config.mjs --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "ui",
+    "components",
+    "aeico"
+  ],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "aeico": "^0.1.2",
+    "aeico-localize": "^0.1.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@esm-bundle/chai": "^4.3.4-fix.0",
+    "@types/mocha": "^10.0.10",
+    "@web/dev-server-esbuild": "^1.0.5",
+    "@web/test-runner": "^0.20.2",
+    "@web/test-runner-playwright": "^0.11.1",
+    "eslint": "^10.1.0",
+    "eslint-config-prettier": "^10.1.8",
+    "globals": "^16.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.57.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/aeico-component.ts

@@ -0,0 +1,17 @@
+import { AeicoElement } from 'aeico';
+import { toKebab } from './utils';
+
+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)}`;
+
+    super.register(tagName);
+  }
+}
+
+export default AeicoComponent;

package/src/aeico-field.ts

@@ -0,0 +1,228 @@
+import type { InferProps, Props, Watchers } from 'aeico';
+import { tags } from 'aeico';
+import AeicoComponent from './aeico-component';
+import { t } from 'aeico-localize';
+
+export type FieldAction = 'clear' | 'reset' | 'change';
+export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+
+/**
+ * Base class for form field components
+ *
+ * Provides common functionality for field components including:
+ * - Theme support
+ * - i18n integration (via Localizable mixin)
+ * - Reset button management
+ * - Value management
+ * - Common configuration handling
+ */
+class AeicoField<TValue = string> extends AeicoComponent {
+  /**
+   * Define base field properties (extends AeicoElement properties)
+   */
+  static props: Props = {
+    value: { type: String },
+    defaultValue: { type: String },
+    resettable: { type: Boolean },
+    resetText: { type: String },
+    clearable: { type: Boolean },
+    clearText: { type: String },
+    size: { type: String },
+    disabled: { type: Boolean },
+  };
+
+  /**
+   * Property watchers
+   */
+  static watchers: Watchers = {
+    disabled: 'onDisabledChanged',
+  };
+
+  /**
+   * The underlying form control element (input, select, etc.)
+   * Subclasses should set this to their specific element
+   */
+  protected fieldElement: FieldElement | null = null;
+
+  protected resetBtn: HTMLButtonElement | null = null;
+  protected clearBtn: HTMLButtonElement | null = null;
+
+  protected readonly boundOnChange = () =>
+    this.setValue(this.getValue(), { silent: false, action: 'change' });
+
+  protected readonly boundOnReset = () => this.onReset();
+  protected readonly boundOnClear = () => this.onClear();
+
+  // Declare reactive properties for TypeScript
+  declare value?: TValue;
+  declare defaultValue?: TValue | string;
+  declare resettable?: boolean;
+  declare resetText?: string;
+  declare clearable?: boolean;
+  declare clearText?: string;
+  declare size?: string;
+  declare disabled?: boolean;
+
+  /**
+   * Lifecycle: Component connected to DOM
+   */
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  /**
+   * Lifecycle: Component disconnected from DOM
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  /**
+   * Render action buttons (clear/reset) using this.builder.
+   * Must be called from within a build() callback.
+   */
+  protected renderActionButtons(force: boolean = false) {
+    this.renderClearButton(force);
+    this.renderResetButton(force);
+  }
+
+  protected renderResetButton(force: boolean = false) {
+    const { button } = tags;
+
+    if (force || this.resettable) {
+      this.resetBtn = button({
+        className: 'reset-btn',
+        textContent: this.resetText || '↺',
+        title: t('buttons.reset', '↺'),
+        '@click': this.boundOnReset,
+      });
+    }
+  }
+
+  protected renderClearButton(force: boolean = false) {
+    const { button } = tags;
+
+    if (force || this.clearable) {
+      this.clearBtn = button({
+        className: 'clear-btn',
+        textContent: this.clearText || '✕',
+        title: t('buttons.clear', '✕'),
+        '@click': this.boundOnClear,
+      });
+    }
+  }
+
+  /**
+   * Watcher for disabled property
+   */
+  protected onDisabledChanged(newValue: boolean) {
+    if (this.fieldElement) {
+      (this.fieldElement as HTMLInputElement | HTMLSelectElement).disabled = Boolean(newValue);
+    }
+  }
+
+  /**
+   * Render the field component
+   * Override in subclass to provide custom rendering
+   */
+  render(): void {
+    // Default implementation - subclasses can override
+  }
+
+  /**
+   * Get current value from the field element
+   * Default implementation returns the value property of fieldElement
+   * Override in subclasses if needed (e.g., checkbox uses checked instead of value)
+   *
+   * @returns Current field value
+   */
+  protected getValue(): any {
+    return this.fieldElement?.value || '';
+  }
+
+  /**
+   * Write value to the underlying UI element and sync props
+   * Subclasses must override this to update their specific UI element
+   *
+   * @param _value New value to write to the element
+   */
+  protected writeValue(_value: any): void {
+    // Base implementation - subclasses override
+  }
+
+  /**
+   * Get event payload for change events
+   * Override in subclasses to customize event data (e.g., { checked, oldChecked } for checkbox)
+   *
+   * @param value New value
+   * @param oldValue Previous value
+   * @param action Action type
+   * @returns Event payload object
+   */
+  protected getEventPayload(value: any, oldValue: any, action: FieldAction): Record<string, any> {
+    return { value, oldValue, action };
+  }
+
+  /**
+   * Update field value programmatically (internal method)
+   * Subclasses should provide type-safe public wrappers (e.g., change() method)
+   *
+   * @param value New value
+   * @param options.silent If true, won't emit change event (default: true)
+   * @param options.action Action type for the event (default: 'change')
+   */
+  protected setValue(value: any, options?: { silent?: boolean; action?: FieldAction }): void {
+    const oldValue = this.getValue();
+
+    // Update property value
+    this.value = value;
+
+    // Write to UI element (DOM only)
+    this.writeValue(value);
+
+    // Emit event if not silent
+    if (options?.silent === false) {
+      const payload = this.getEventPayload(value, oldValue, options.action || 'change');
+      this.emit('change', { detail: payload });
+    }
+  }
+
+  /**
+   * Reset field to specified value or default value
+   *
+   * @param value Value to reset to, defaults to defaultValue prop
+   * @param options.silent If false, will emit reset event (default: true)
+   */
+  public reset(value?: any, options?: { silent?: boolean }): void {
+    const resetValue = value !== undefined ? value : this.defaultValue;
+    this.setValue(resetValue, { ...options, action: 'reset' });
+  }
+
+  /**
+   * Clear the field value
+   *
+   * @param options.silent If false, will emit clear event (default: true)
+   */
+  public clear(options?: { silent?: boolean }): void {
+    this.setValue('', { ...options, action: 'clear' });
+  }
+
+  /**
+   * Handle clear button click
+   * Clears the field and dispatches event
+   */
+  protected onClear(): void {
+    this.clear({ silent: false });
+  }
+
+  /**
+   * Handle reset button click
+   * Resets to default value and dispatches event
+   */
+  protected onReset(): void {
+    this.reset(undefined, { silent: false });
+  }
+}
+
+export default AeicoField;
+export type AeicoFieldProps = InferProps<typeof AeicoField>;

package/src/alert/alert.ts

@@ -0,0 +1,107 @@
+import type { InferProps, Props } from 'aeico';
+import styleVariables from '../styles/variables.css?inline';
+import colorCSS from '../styles/color.css?inline';
+import alertStyle from '../styles/components/alert.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import { t } from 'aeico-localize';
+import type { AlertColor, AlertSize, AlertVariant } from './defines';
+
+/**
+ * Alert Component
+ *
+ * A customizable alert/notification component with multiple variants and sizes.
+ * Supports dismissible alerts and icon display.
+ *
+ * @example
+ * ```typescript
+ * // Using the static create method
+ * const alert = Alert.create({
+ *   variant: 'info',
+ *   dismissible: true
+ * })
+ * alert.textContent = 'This is an informational message'
+ * document.body.appendChild(alert)
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using as Web Component -->
+ * <ae-alert variant="info">Information message</ae-alert>
+ * <ae-alert variant="success" dismissible>Operation successful!</ae-alert>
+ * <ae-alert variant="warning" size="sm">Small warning</ae-alert>
+ * ```
+ */
+class Alert extends AeicoComponent {
+  static props: Props = {
+    color: { type: String },
+    variant: { type: String },
+    size: { type: String },
+    dismissible: { type: Boolean },
+    invisible: { type: Boolean },
+  };
+
+  protected static useStyles = ['alert'];
+  protected static styles = [styleVariables, colorCSS, alertStyle];
+
+  declare color?: AlertColor;
+  declare variant?: AlertVariant;
+  declare size?: AlertSize;
+  declare dismissible?: boolean;
+  declare invisible?: boolean;
+
+  protected render() {
+    return html(({ div, slot, button, span }) => {
+      div(
+        {
+          className: 'alert',
+          role: 'alert',
+          part: 'alert',
+          style: { display: this.invisible ? 'none' : '' },
+        },
+        () => {
+          slot();
+
+          if (this.dismissible) {
+            button(
+              {
+                className: 'alert-close',
+                '@click': () => this._handleClose(),
+                title: t('alert.close', 'Close alert'),
+              },
+              () => {
+                span({ 'aria-hidden': 'true', textContent: '\u00d7' });
+              },
+            );
+          }
+        },
+      );
+    });
+  }
+
+  show() {
+    if (this.invisible) {
+      this.invisible = false;
+    }
+  }
+
+  hide() {
+    this.invisible = true;
+  }
+
+  private _handleClose = () => {
+    this.emit('alert-close', { detail: { target: this } });
+    this.remove();
+  };
+}
+
+Alert.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-alert': Alert;
+  }
+}
+
+export default Alert;
+export type AlertProps = InferProps<typeof Alert>;

package/src/alert/defines.ts

@@ -0,0 +1,11 @@
+export type AlertVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type AlertSize = 'sm' | 'md' | 'lg';
+export type AlertColor =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'warning'
+  | 'info'
+  | 'light'
+  | 'dark';

package/src/alert/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Alert } from './alert';
+export type { AlertProps } from './alert';
+export type { AlertColor, AlertSize, AlertVariant } from './defines';

package/src/badge/badge.ts

@@ -0,0 +1,62 @@
+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 badgeStyle from '../styles/components/badge.css?inline';
+import AeicoComponent from '../aeico-component';
+import { html } from 'aeico';
+import type { BadgeColor, BadgeSize, BadgeVariant } from './defines';
+import { prop } from 'aeico';
+
+/**
+ * Badge Component
+ *
+ * A small inline label for status, category, or count indicators.
+ * Supports color, variant, size, and an optional leading/trailing ae-icon slot.
+ *
+ * @example
+ * ```html
+ * <ae-badge color="primary">New</ae-badge>
+ * <ae-badge variant="outlined" color="success">Active</ae-badge>
+ * <ae-badge variant="subtle" color="danger" size="sm">
+ *   <ae-icon slot="start" name="warning"></ae-icon>
+ *   Error
+ * </ae-badge>
+ * ```
+ */
+class Badge extends AeicoComponent {
+  protected static styles = [styleVariables, sizeCSS, colorCSS, badgeStyle];
+
+  @prop({ type: String })
+  accessor color: BadgeColor = 'default';
+
+  @prop({ type: String })
+  accessor variant: BadgeVariant = 'filled';
+
+  @prop({ type: String })
+  accessor size: BadgeSize = 'md';
+
+  @prop({ type: Boolean })
+  accessor pill: boolean = false;
+
+  protected render() {
+    return html(({ span, slot }) => {
+      span({ part: 'badge', className: 'badge' }, () => {
+        slot({ name: 'start' });
+        slot();
+        slot({ name: 'end' });
+      });
+    });
+  }
+}
+
+Badge.register();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ae-badge': Badge;
+  }
+}
+
+export default Badge;
+export type BadgeProps = InferProps<typeof Badge>;

package/src/badge/defines.ts

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

package/src/badge/index.ts

@@ -0,0 +1,3 @@
+export { default, default as Badge } from './badge';
+export type { BadgeProps } from './badge';
+export type { BadgeColor, BadgeSize, BadgeVariant } from './defines';