aeico-components 0.1.5 → 0.1.6

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

@@ -0,0 +1,35 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import type { SpinnerColor, SpinnerSize, SpinnerVariant } from './defines';
+/**
+ * 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
+ * design-token system.
+ *
+ * @example
+ * ```html
+ * <ae-spinner></ae-spinner>
+ * <ae-spinner variant="dots" color="primary" size="lg"></ae-spinner>
+ * <ae-spinner color="success" speed="0.5s" label="Saving…"></ae-spinner>
+ * ```
+ */
+declare class Spinner extends AeicoComponent {
+    static tagName: string;
+    accessor variant: SpinnerVariant;
+    accessor size: SpinnerSize;
+    accessor color: SpinnerColor;
+    accessor label: string;
+    accessor speed: string | undefined;
+    protected static styles: string[];
+    connectedCallback(): void;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-spinner': Spinner;
+    }
+}
+export default Spinner;
+export type SpinnerProps = InferProps<typeof Spinner>;

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

@@ -0,0 +1 @@
+export type SwitchIconPlacement = 'knob' | 'track';

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

@@ -1,11 +1,15 @@
 import AeicoField, { type FieldAction } from '../aeico-field';
-import type { InferProps, Props } from 'aeico';
+import type { InferProps } from 'aeico';
+import type { SwitchIconPlacement } from './defines';
+import '../icon/icon';
 declare class Switch extends AeicoField<boolean> {
     protected fieldElement: HTMLInputElement | null;
     static tagName: string;
-    static props: Props;
-    checked?: boolean;
-    defaultChecked?: boolean;
+    accessor checked: boolean | undefined;
+    accessor defaultChecked: boolean | undefined;
+    accessor icon: string | undefined;
+    accessor iconChecked: string | undefined;
+    accessor iconPlacement: SwitchIconPlacement | undefined;
     protected static styles: string[];
     protected getValue(): boolean;
     protected writeValue(checked: boolean): void;

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

@@ -8,10 +8,6 @@ declare class TextInput extends AeicoField {
     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)
      */

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

@@ -0,0 +1 @@
+export { default, type TextareaProps, type TextareaResize } from './textarea';

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

@@ -0,0 +1,26 @@
+import AeicoField from '../aeico-field';
+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;
+    accessor minlength: number | undefined;
+    accessor resize: TextareaResize | undefined;
+    accessor autoResize: boolean;
+    protected static styles: string[];
+    private readonly _boundOnInput;
+    render(): import("aeico-view").RenderResult;
+    private _syncAutoResize;
+    private _updateClearButtonVisibility;
+    protected writeValue(value: string): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-textarea': Textarea;
+    }
+}
+export default Textarea;
+export type TextareaProps = InferProps<typeof Textarea>;

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

@@ -0,0 +1,2 @@
+export type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+export type TooltipTrigger = 'hover' | 'click';

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

@@ -0,0 +1,4 @@
+export { default } from './tooltip';
+export { default as Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';
+export type { TooltipPlacement, TooltipTrigger } from './defines';

package/dist/types/tooltip/tooltip.d.ts

@@ -0,0 +1,48 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { TooltipPlacement, TooltipTrigger } from './defines';
+/**
+ * Tooltip Component
+ *
+ * A floating label that appears on hover or focus around its trigger content.
+ * Wrap any element in `<ae-tooltip>` and provide content via the `content`
+ * attribute (plain text) or the `tooltip` named slot (rich HTML).
+ *
+ * @example
+ * ```html
+ * <ae-tooltip content="Save file">
+ *   <ae-button>Save</ae-button>
+ * </ae-tooltip>
+ *
+ * <ae-tooltip placement="bottom-start">
+ *   <span slot="tooltip"><strong>Bold</strong> tip</span>
+ *   <ae-icon-button name="info"></ae-icon-button>
+ * </ae-tooltip>
+ * ```
+ */
+declare class Tooltip extends AeicoComponent {
+    protected static styles: string[];
+    accessor content: string | undefined;
+    accessor placement: TooltipPlacement;
+    accessor disabled: boolean;
+    accessor trigger: TooltipTrigger;
+    accessor open: boolean;
+    private _outsideClickHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleFocusin;
+    private _handleFocusout;
+    private _handleClick;
+    private _updatePosition;
+    protected onUpdated(changedProps: Map<string, unknown>): void;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tooltip': Tooltip;
+    }
+}
+export type TooltipProps = InferProps<typeof Tooltip>;
+export default Tooltip;

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

@@ -0,0 +1,23 @@
+/** Minimal interface used by tree-item to read config from its parent ae-tree. */
+export interface ParentTreeLike extends Element {
+    checkable?: boolean;
+    multiple?: boolean;
+    showLine?: boolean;
+    defaultExpandAll?: boolean;
+    icon?: string;
+}
+export interface TreeSelectDetail {
+    key: string;
+    selected: boolean;
+    selectedKeys: string[];
+}
+export interface TreeExpandDetail {
+    key: string;
+    expanded: boolean;
+    expandedKeys: string[];
+}
+export interface TreeCheckDetail {
+    key: string;
+    checked: boolean;
+    checkedKeys: string[];
+}

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

@@ -0,0 +1,5 @@
+export { default as Tree } from './tree';
+export { default as TreeItem } from './tree-item';
+export type { TreeProps } from './tree';
+export type { TreeItemProps } from './tree-item';
+export type { TreeSelectDetail, TreeExpandDetail, TreeCheckDetail } from './defines';

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

@@ -0,0 +1,54 @@
+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
+ * `<ae-tree-item>` to create a multi-level tree.
+ *
+ * - **Parent item**: nest `<ae-tree-item>` children inside; an expand toggle is shown.
+ * - **Leaf item**: no `<ae-tree-item>` children; no expand toggle is shown.
+ *
+ * @prop {string}  key          - Unique identifier for this item.
+ * @prop {string}  icon         - Icon name (uses `<ae-icon>`). Optional.
+ * @prop {boolean} disabled     - Disables interaction.
+ * @prop {boolean} expanded     - Whether children are visible.
+ * @prop {boolean} selected     - Whether this item is visually selected.
+ * @prop {boolean} checked      - Checkbox state (checkable mode).
+ * @prop {boolean} indeterminate - Checkbox partial state (checkable mode, JS-only).
+ *
+ * @slot default - Child `<ae-tree-item>` elements.
+ * @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;
+    /** Stable auto-generated key used when `key` prop is not set. */
+    private readonly _autoKey;
+    private get _effectiveKey();
+    accessor disabled: boolean;
+    accessor expanded: boolean;
+    accessor selected: boolean;
+    accessor checked: boolean;
+    accessor indeterminate: boolean;
+    private _checkboxEl;
+    connectedCallback(): void;
+    protected onMounted(): void;
+    private get _parentTree();
+    private get _isCheckable();
+    private get _hasChildren();
+    private _handleExpandClick;
+    private _handleLabelClick;
+    private _handleCheckChange;
+    private _handleKeydown;
+    protected onUpdated(): void;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tree-item': TreeItem;
+    }
+}
+export default TreeItem;
+export type TreeItemProps = InferProps<typeof TreeItem>;

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

@@ -0,0 +1,64 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import './tree-item';
+/**
+ * Tree component. Renders a hierarchical tree of `<ae-tree-item>` elements.
+ *
+ * @prop {boolean} checkable       - Enable checkbox selection mode with parent-child sync.
+ * @prop {boolean} multiple        - Allow multi-select (click to toggle). Ignored when checkable.
+ * @prop {boolean} showLine        - Show dashed connecting lines between items.
+ * @prop {boolean} defaultExpandAll - Expand all items on initial connect.
+ * @prop {string}  selectedKey     - Currently selected key (single-select convenience prop).
+ *
+ * @property {string[]} selectedKeys - Currently selected keys (multi-select).
+ * @property {string[]} checkedKeys  - Currently checked keys (checkable mode).
+ * @property {string[]} expandedKeys - Currently expanded keys.
+ *
+ * @event {CustomEvent<TreeSelectDetail>} select - Fires when an item is selected/deselected.
+ * @event {CustomEvent<TreeExpandDetail>} expand - Fires when an item is expanded/collapsed.
+ * @event {CustomEvent<TreeCheckDetail>}  check  - Fires when an item checkbox changes.
+ *
+ * @example
+ * ```html
+ * <ae-tree>
+ *   <ae-tree-item key="1" label="Parent">
+ *     <ae-tree-item key="1-1" label="Child A"></ae-tree-item>
+ *     <ae-tree-item key="1-2" label="Child B"></ae-tree-item>
+ *   </ae-tree-item>
+ * </ae-tree>
+ * ```
+ */
+declare class Tree extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor checkable: boolean;
+    accessor multiple: boolean;
+    accessor showLine: boolean;
+    accessor defaultExpandAll: boolean;
+    accessor selectedKey: string | undefined;
+    /** Icon name used for the expand/collapse toggle on all items (overridable per item). */
+    accessor icon: string | undefined;
+    /** Currently selected keys (multi-select). Set programmatically. */
+    selectedKeys: string[];
+    /** Currently checked keys (checkable mode). Set programmatically. */
+    checkedKeys: string[];
+    /** Currently expanded keys. Set programmatically. */
+    expandedKeys: string[];
+    connectedCallback(): void;
+    private _getAllItems;
+    private _getDirectChildren;
+    private _computeCheckedKeys;
+    private _handleItemToggleExpand;
+    private _handleItemSelect;
+    private _handleItemCheck;
+    private _setCheckedRecursive;
+    private _syncAncestors;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-tree': Tree;
+    }
+}
+export default Tree;
+export type TreeProps = InferProps<typeof Tree>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeico-components",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -24,6 +24,7 @@
     "src"
   ],
   "sideEffects": [
+    "./src/icon/built-in-icons.ts",
     "./dist/*.js",
     "./dist/*.cjs",
     "./dist/chunks/*.js",
@@ -49,11 +50,10 @@
     "components",
     "aeico"
   ],
-  "author": "",
-  "license": "ISC",
+  "author": "Eowl",
+  "license": "MIT",
   "peerDependencies": {
-    "aeico": "^0.1.5",
-    "aeico-localize": "^0.1.1"
+    "aeico": "^0.1.5"
   },
   "devDependencies": {
     "aeico": "^0.1.5",

package/src/aeico-field.ts

@@ -1,10 +1,10 @@
 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;
+export type ActionButtonStyle = 'standalone' | 'integrated';
 
 /**
  * Base class for form field components
@@ -25,10 +25,18 @@ class AeicoField<TValue = string> extends AeicoComponent {
     defaultValue: { type: String },
     resettable: { type: Boolean },
     resetText: { type: String },
+    resetTitle: { type: String },
     clearable: { type: Boolean },
     clearText: { type: String },
+    clearTitle: { type: String },
+    actionButtonStyle: { type: String },
     size: { type: String },
     disabled: { type: Boolean },
+    label: { type: String },
+    labelPlacement: { type: String },
+    required: { type: Boolean },
+    helperText: { type: String },
+    error: { type: String },
   };
 
   /**
@@ -36,8 +44,17 @@ class AeicoField<TValue = string> extends AeicoComponent {
    */
   static watchers: Watchers = {
     disabled: 'onDisabledChanged',
+    error: 'onErrorChanged',
   };
 
+  private static _fieldIdCounter = 0;
+  private readonly _fieldId: string;
+
+  constructor() {
+    super();
+    this._fieldId = `ae-field-${++AeicoField._fieldIdCounter}`;
+  }
+
   /**
    * The underlying form control element (input, select, etc.)
    * Subclasses should set this to their specific element
@@ -58,10 +75,18 @@ class AeicoField<TValue = string> extends AeicoComponent {
   declare defaultValue?: TValue | string;
   declare resettable?: boolean;
   declare resetText?: string;
+  declare resetTitle?: string;
   declare clearable?: boolean;
   declare clearText?: string;
+  declare clearTitle?: string;
+  declare actionButtonStyle?: ActionButtonStyle;
   declare size?: string;
   declare disabled?: boolean;
+  declare label?: string;
+  declare labelPlacement?: 'top' | 'left';
+  declare required?: boolean;
+  declare helperText?: string;
+  declare error?: string;
 
   /**
    * Lifecycle: Component connected to DOM
@@ -82,18 +107,30 @@ class AeicoField<TValue = string> extends AeicoComponent {
    * Must be called from within a build() callback.
    */
   protected renderActionButtons(force: boolean = false) {
-    this.renderClearButton(force);
-    this.renderResetButton(force);
+    const style = this.actionButtonStyle || 'integrated';
+    const hasActions = force || this.clearable || this.resettable;
+
+    if (hasActions && style === 'integrated') {
+      tags.div({ className: 'action-controls' }, () => {
+        this.renderClearButton(force);
+        this.renderResetButton(force);
+      });
+    } else {
+      this.renderClearButton(force);
+      this.renderResetButton(force);
+    }
   }
 
   protected renderResetButton(force: boolean = false) {
     const { button } = tags;
+    const style = this.actionButtonStyle || 'integrated';
 
     if (force || this.resettable) {
+      const className = style === 'integrated' ? 'reset-btn action-btn' : 'reset-btn';
       this.resetBtn = button({
-        className: 'reset-btn',
+        className,
         textContent: this.resetText || '↺',
-        title: t('buttons.reset', '↺'),
+        title: this.resetTitle || '↺',
         '@click': this.boundOnReset,
       });
     }
@@ -101,17 +138,63 @@ class AeicoField<TValue = string> extends AeicoComponent {
 
   protected renderClearButton(force: boolean = false) {
     const { button } = tags;
+    const style = this.actionButtonStyle || 'integrated';
 
     if (force || this.clearable) {
+      const className = style === 'integrated' ? 'clear-btn action-btn' : 'clear-btn';
       this.clearBtn = button({
-        className: 'clear-btn',
+        className,
         textContent: this.clearText || '✕',
-        title: t('buttons.clear', '✕'),
+        title: this.clearTitle || '✕',
         '@click': this.boundOnClear,
       });
     }
   }
 
+  /**
+   * Returns a stable unique ID for this field instance,
+   * used to associate <label htmlFor> with the underlying input.
+   */
+  protected getFieldId(): string {
+    return this._fieldId;
+  }
+
+  /**
+   * Renders a <label> element when the `label` prop is set.
+   * Call this as the first statement inside the render() html() callback.
+   * @param fieldId - The id to set on the underlying form control element (pass to input via id prop)
+   */
+  protected renderLabel(fieldId: string): void {
+    if (!this.label) return;
+    const { span } = tags;
+    tags.label({ id: `${fieldId}-label`, className: 'field-label', for: fieldId }, () => {
+      span({ textContent: this.label! });
+      if (this.required) {
+        span({ className: 'field-required', 'aria-hidden': 'true', textContent: ' *' });
+      }
+    });
+  }
+
+  /**
+   * Renders helper text below the field. Hidden when `error` is set.
+   * Call this after the field-body div in render().
+   */
+  protected renderHelperText(): void {
+    if (!this.helperText || this.error) return;
+    const { span } = tags;
+    span({ className: 'field-helper', textContent: this.helperText });
+  }
+
+  /**
+   * Renders an error message below the field when `error` is set.
+   * Call this after renderHelperText() in render().
+   */
+  protected renderError(): void {
+    if (!this.error) return;
+    const { span } = tags;
+    span({ className: 'field-error', textContent: this.error });
+  }
+
   /**
    * Watcher for disabled property
    */
@@ -121,6 +204,58 @@ class AeicoField<TValue = string> extends AeicoComponent {
     }
   }
 
+  /**
+   * Watcher for error property — syncs aria-invalid on the field element
+   */
+  protected onErrorChanged(newValue: string | undefined): void {
+    if (this.fieldElement) {
+      if (newValue) {
+        this.fieldElement.setAttribute('aria-invalid', 'true');
+      } else {
+        this.fieldElement.removeAttribute('aria-invalid');
+      }
+    }
+  }
+
+  /**
+   * Lifecycle: called after every render update.
+   * Keeps aria-invalid on fieldElement in sync regardless of watcher timing.
+   */
+  protected onUpdated(_changedProps: Map<string, unknown>): void {
+    if (!this.fieldElement) return;
+    if (this.error) {
+      this.fieldElement.setAttribute('aria-invalid', 'true');
+    } else {
+      this.fieldElement.removeAttribute('aria-invalid');
+    }
+  }
+
+  /**
+   * Returns true if the field passes constraint validation.
+   * Delegates to the underlying fieldElement when available;
+   * falls back to a manual required-check otherwise.
+   */
+  public checkValidity(): boolean {
+    if (this.fieldElement) {
+      return this.fieldElement.checkValidity();
+    }
+    if (this.required) {
+      const v = this.value;
+      return v !== undefined && v !== '' && v !== null;
+    }
+    return true;
+  }
+
+  /**
+   * Reports validity, showing the browser's built-in validation UI when possible.
+   */
+  public reportValidity(): boolean {
+    if (this.fieldElement) {
+      return this.fieldElement.reportValidity();
+    }
+    return this.checkValidity();
+  }
+
   /**
    * Render the field component
    * Override in subclass to provide custom rendering

package/src/alert/alert.ts

@@ -4,7 +4,6 @@ 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';
 
 /**
@@ -39,6 +38,7 @@ class Alert extends AeicoComponent {
     size: { type: String },
     dismissible: { type: Boolean },
     invisible: { type: Boolean },
+    closeText: { type: String },
   };
 
   protected static useStyles = ['alert'];
@@ -49,6 +49,7 @@ class Alert extends AeicoComponent {
   declare size?: AlertSize;
   declare dismissible?: boolean;
   declare invisible?: boolean;
+  declare closeText?: string;
 
   protected render() {
     return html(({ div, slot, button, span }) => {
@@ -67,7 +68,7 @@ class Alert extends AeicoComponent {
               {
                 className: 'alert-close',
                 '@click': () => this._handleClose(),
-                title: t('alert.close', 'Close alert'),
+                title: this.closeText || 'Close alert',
               },
               () => {
                 span({ 'aria-hidden': 'true', textContent: '\u00d7' });

package/src/checkbox/checkbox.ts

@@ -4,6 +4,8 @@ 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 fieldLabelCSS from '../styles/components/field-label.css?inline';
+import actionButtonCSS from '../styles/components/action-button.css?inline';
 import styles from '../styles/components/checkbox.css?inline';
 import { CheckboxVariant } from './defines';
 
@@ -22,7 +24,14 @@ class Checkbox extends AeicoField<boolean> {
   declare defaultChecked?: boolean;
   declare variant?: CheckboxVariant;
 
-  protected static styles = [styleVariables, sizeCSS, colorCSS, styles];
+  protected static styles = [
+    styleVariables,
+    sizeCSS,
+    colorCSS,
+    fieldLabelCSS,
+    actionButtonCSS,
+    styles,
+  ];
 
   protected getValue(): boolean {
     return this.fieldElement?.checked ?? false;
@@ -62,18 +71,24 @@ class Checkbox extends AeicoField<boolean> {
 
   render() {
     return html(({ div, input }) => {
-      div({ className: 'checkbox-container', variant: this.variant }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: 'checkbox-container field-body', variant: this.variant }, () => {
         div({ className: 'checkbox-wrapper' }, () => {
           this.fieldElement = input({
+            id,
             type: 'checkbox',
             className: 'field-input',
             checked: Boolean(this.checked),
             disabled: Boolean(this.disabled),
+            required: Boolean(this.required),
             '@change': this.boundOnChange,
           });
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
     });
   }
 }