aeico-components 0.1.5 → 0.1.7

package/dist/select.js

@@ -1,8 +1,8 @@
 import { S, S as S2 } from "./chunks/select.js";
 import { A as AeicoComponent } from "./chunks/aeico-component.js";
 import { prop, html } from "aeico";
-import { s as styleVariables } from "./chunks/variables.js";
-const style = ":host {\n  display: block;\n\n  --option-padding: 0.417em 0.667em;\n  --option-bg: transparent;\n  --option-bg-hover: var(--surface-raised);\n  --option-bg-selected: color-mix(in srgb, var(--color-primary) 12%, transparent);\n  --option-color: var(--color-text-main);\n  --option-color-disabled: var(--color-text-disabled);\n  --option-color-selected: var(--color-primary);\n  --option-font-size: 1em;\n  --option-transition: background 0.1s;\n}\n\n.option-item {\n  padding: var(--option-padding);\n  font-size: var(--option-font-size);\n  color: var(--option-color);\n  background: var(--option-bg);\n  cursor: pointer;\n  transition: var(--option-transition);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n}\n\n:host(:hover:not([disabled])) .option-item {\n  background: var(--option-bg-hover);\n}\n\n:host([selected]) .option-item {\n  background: var(--option-bg-selected);\n  color: var(--option-color-selected);\n}\n\n:host([disabled]) .option-item {\n  color: var(--option-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n\n";
+import { v as variables } from "./chunks/variables.js";
+const style = ":host {\n  display: block;\n\n  --option-padding: 0.417em 0.667em;\n  --option-bg: transparent;\n  --option-bg-hover: var(--ae-surface-raised);\n  --option-bg-selected: color-mix(in srgb, var(--ae-color-primary) 12%, transparent);\n  --option-color: var(--ae-color-text-main);\n  --option-color-disabled: var(--ae-color-text-disabled);\n  --option-color-selected: var(--ae-color-primary);\n  --option-font-size: 1em;\n  --option-transition: background 0.1s;\n}\n\n.option-item {\n  padding: var(--option-padding);\n  font-size: var(--option-font-size);\n  color: var(--option-color);\n  background: var(--option-bg);\n  cursor: pointer;\n  transition: var(--option-transition);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  user-select: none;\n}\n\n:host(:hover:not([disabled])) .option-item {\n  background: var(--option-bg-hover);\n}\n\n:host([selected]) .option-item {\n  background: var(--option-bg-selected);\n  color: var(--option-color-selected);\n}\n\n:host([disabled]) .option-item {\n  color: var(--option-color-disabled);\n  cursor: default;\n  pointer-events: none;\n}\n\n\n";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -89,7 +89,7 @@ __decorateElement(_init, 4, "disabled", _disabled_dec, SelectOption, _disabled);
 __decorateElement(_init, 4, "selected", _selected_dec, SelectOption, _selected);
 __decoratorMetadata(_init, SelectOption);
 __publicField(SelectOption, "tagName", "select-option");
-__publicField(SelectOption, "styles", [styleVariables, style]);
+__publicField(SelectOption, "styles", [variables, style]);
 SelectOption.register();
 export {
   S as Select,

package/dist/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../src/select/select-option.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/select-option.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n\nclass SelectOption extends AeicoComponent {\n  static tagName = 'select-option';\n\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean | undefined = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    const displayLabel = this.label || this.textContent?.trim() || '';\n    this.emit('selectoption', { detail: { value: this.value ?? '', label: displayLabel } });\n  };\n\n  render() {\n    return html(({ div, slot }) => {\n      div({ className: 'option-item' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nSelectOption.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select-option': SelectOption;\n  }\n}\n\nexport default SelectOption;\nexport type SelectOptionProps = InferProps<typeof SelectOption>;\n"],"names":["_a","variables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,eAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,WAAA;AAOA,MAAM,sBAAqB,KAAA,gBAGzB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAZE,IAAe;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAgC,kBAAzC,OAAA,IAAA,MAAyC,KAAA,CAAA,GAAzC,kBAAA,OAAA,IAAA,IAAA;AASA,kBAAA,MAAQ,gBAAe,CAAC,MAAmB;;AACzC,UAAI,KAAK,UAAU;AACjB,UAAE,gBAAA;AAEF;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,WAASA,MAAA,KAAK,gBAAL,gBAAAA,IAAkB,WAAU;AAC/D,WAAK,KAAK,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,aAAA,EAAa,CAAG;AAAA,IACxF,CAAA;AAAA,EAAA;AAAA,EAdA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,SAAS,KAAK,YAAY;AAAA,EACxC;AAAA,EAaA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,WAAW,cAAA,GAAiB,MAAM;AACtC,aAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAxCA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAHI,cAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YANI,cAOK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eATI,cAUK,SAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAZI,cAaK,SAAA;AAbX,oBAAA,OAAM,YAAA;AACJ,cADI,cACG,WAAU,eAAA;AAcjB,cAfI,cAea,UAAS,CAACC,gBAAW,KAAK,CAAA;AA2B7C,aAAa,SAAA;"}
+{"version":3,"file":"select.js","sources":["../src/select/select-option.ts"],"sourcesContent":["import AeicoComponent from '../aeico-component';\nimport type { InferProps } from 'aeico';\nimport { html } from 'aeico';\nimport style from '../styles/components/select-option.css?inline';\nimport variables from '../styles/variables.css?inline';\nimport { prop } from 'aeico';\n\nclass SelectOption extends AeicoComponent {\n  static tagName = 'select-option';\n\n  @prop({ type: String })\n  accessor value: string | undefined;\n\n  @prop({ type: String })\n  accessor label: string | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor selected: boolean | undefined = false;\n\n  protected static styles = [variables, style];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('click', this._handleClick);\n  }\n\n  private _handleClick = (e: Event): void => {\n    if (this.disabled) {\n      e.stopPropagation();\n\n      return;\n    }\n\n    const displayLabel = this.label || this.textContent?.trim() || '';\n    this.emit('selectoption', { detail: { value: this.value ?? '', label: displayLabel } });\n  };\n\n  render() {\n    return html(({ div, slot }) => {\n      div({ className: 'option-item' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nSelectOption.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-select-option': SelectOption;\n  }\n}\n\nexport default SelectOption;\nexport type SelectOptionProps = InferProps<typeof SelectOption>;\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,eAAA,eAAA,YAAA,YAAA,IAAA,OAAA,QAAA,QAAA,WAAA;AAOA,MAAM,sBAAqB,KAAA,gBAGzB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAZE,IAAe;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,QAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAgC,kBAAzC,OAAA,IAAA,MAAyC,KAAA,CAAA,GAAzC,kBAAA,OAAA,IAAA,IAAA;AASA,kBAAA,MAAQ,gBAAe,CAAC,MAAmB;;AACzC,UAAI,KAAK,UAAU;AACjB,UAAE,gBAAA;AAEF;AAAA,MACF;AAEA,YAAM,eAAe,KAAK,WAASA,MAAA,KAAK,gBAAL,gBAAAA,IAAkB,WAAU;AAC/D,WAAK,KAAK,gBAAgB,EAAE,QAAQ,EAAE,OAAO,KAAK,SAAS,IAAI,OAAO,aAAA,EAAa,CAAG;AAAA,IACxF,CAAA;AAAA,EAAA;AAAA,EAdA,oBAAoB;AAClB,UAAM,kBAAA;AACN,SAAK,OAAO,SAAS,KAAK,YAAY;AAAA,EACxC;AAAA,EAaA,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,WAAW;AAC7B,UAAI,EAAE,WAAW,cAAA,GAAiB,MAAM;AACtC,aAAA;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AAxCA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,SAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AATT,kBAAA,OAAA,GAAS,SADT,YAHI,cAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,SADT,YANI,cAOK,MAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eATI,cAUK,SAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAZI,cAaK,SAAA;AAbX,oBAAA,OAAM,YAAA;AACJ,cADI,cACG,WAAU,eAAA;AAcjB,cAfI,cAea,UAAS,CAAC,WAAW,KAAK,CAAA;AA2B7C,aAAa,SAAA;"}

package/dist/spinner.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const spinner = require("./chunks/spinner.cjs");
+exports.Spinner = spinner.Spinner;
+exports.default = spinner.Spinner;
+//# sourceMappingURL=spinner.cjs.map

package/dist/spinner.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/spinner.js

@@ -0,0 +1,6 @@
+import { S, S as S2 } from "./chunks/spinner.js";
+export {
+  S as Spinner,
+  S2 as default
+};
+//# sourceMappingURL=spinner.js.map

package/dist/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/textarea.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const textarea = require("./chunks/textarea.cjs");
+exports.default = textarea.Textarea;
+//# sourceMappingURL=textarea.cjs.map

package/dist/textarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/textarea.js

@@ -0,0 +1,5 @@
+import { T } from "./chunks/textarea.js";
+export {
+  T as default
+};
+//# sourceMappingURL=textarea.js.map

package/dist/textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tooltip.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const tooltip = require("./chunks/tooltip.cjs");
+exports.Tooltip = tooltip.Tooltip;
+exports.default = tooltip.Tooltip;
+//# sourceMappingURL=tooltip.cjs.map

package/dist/tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/tooltip.js

@@ -0,0 +1,6 @@
+import { T, T as T2 } from "./chunks/tooltip.js";
+export {
+  T as Tooltip,
+  T2 as default
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tree.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tree = require("./chunks/tree.cjs");
+exports.Tree = tree.Tree;
+exports.TreeItem = tree.TreeItem;
+//# sourceMappingURL=tree.cjs.map

package/dist/tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/tree.js

@@ -0,0 +1,6 @@
+import { T, a } from "./chunks/tree.js";
+export {
+  T as Tree,
+  a as TreeItem
+};
+//# sourceMappingURL=tree.js.map

package/dist/tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/aeico-field.d.ts

@@ -2,6 +2,7 @@ import type { InferProps, Props, Watchers } from 'aeico';
 import AeicoComponent from './aeico-component';
 export type FieldAction = 'clear' | 'reset' | 'change';
 export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
+export type ActionButtonStyle = 'standalone' | 'integrated';
 /**
  * Base class for form field components
  *
@@ -21,6 +22,9 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
      * Property watchers
      */
     static watchers: Watchers;
+    private static _fieldIdCounter;
+    private readonly _fieldId;
+    constructor();
     /**
      * The underlying form control element (input, select, etc.)
      * Subclasses should set this to their specific element
@@ -35,10 +39,18 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
     defaultValue?: TValue | string;
     resettable?: boolean;
     resetText?: string;
+    resetTitle?: string;
     clearable?: boolean;
     clearText?: string;
+    clearTitle?: string;
+    actionButtonStyle?: ActionButtonStyle;
     size?: string;
     disabled?: boolean;
+    label?: string;
+    labelPlacement?: 'top' | 'left';
+    required?: boolean;
+    helperText?: string;
+    error?: string;
     /**
      * Lifecycle: Component connected to DOM
      */
@@ -54,10 +66,50 @@ declare class AeicoField<TValue = string> extends AeicoComponent {
     protected renderActionButtons(force?: boolean): void;
     protected renderResetButton(force?: boolean): void;
     protected renderClearButton(force?: boolean): void;
+    /**
+     * Returns a stable unique ID for this field instance,
+     * used to associate <label htmlFor> with the underlying input.
+     */
+    protected getFieldId(): string;
+    /**
+     * 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;
+    /**
+     * Renders helper text below the field. Hidden when `error` is set.
+     * Call this after the field-body div in render().
+     */
+    protected renderHelperText(): void;
+    /**
+     * Renders an error message below the field when `error` is set.
+     * Call this after renderHelperText() in render().
+     */
+    protected renderError(): void;
     /**
      * Watcher for disabled property
      */
     protected onDisabledChanged(newValue: boolean): void;
+    /**
+     * Watcher for error property — syncs aria-invalid on the field element
+     */
+    protected onErrorChanged(newValue: string | undefined): void;
+    /**
+     * Lifecycle: called after every render update.
+     * Keeps aria-invalid on fieldElement in sync regardless of watcher timing.
+     */
+    protected onUpdated(_changedProps: Map<string, unknown>): void;
+    /**
+     * Returns true if the field passes constraint validation.
+     * Delegates to the underlying fieldElement when available;
+     * falls back to a manual required-check otherwise.
+     */
+    checkValidity(): boolean;
+    /**
+     * Reports validity, showing the browser's built-in validation UI when possible.
+     */
+    reportValidity(): boolean;
     /**
      * Render the field component
      * Override in subclass to provide custom rendering

package/dist/types/alert/alert.d.ts

@@ -35,6 +35,7 @@ declare class Alert extends AeicoComponent {
     size?: AlertSize;
     dismissible?: boolean;
     invisible?: boolean;
+    closeText?: string;
     protected render(): import("aeico-view").RenderResult;
     show(): void;
     hide(): void;

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

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

package/dist/types/copy-button/copy-button.d.ts

@@ -0,0 +1,32 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import '../icon/icon';
+import '../tooltip/tooltip';
+import type { TooltipPlacement } from '../tooltip/defines';
+import type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';
+declare class CopyButton extends AeicoComponent {
+    protected static styles: string[];
+    accessor text: string | undefined;
+    accessor color: CopyButtonColor | undefined;
+    accessor variant: CopyButtonVariant | undefined;
+    accessor size: CopyButtonSize | undefined;
+    accessor disabled: boolean | undefined;
+    accessor duration: number | undefined;
+    accessor tooltip: string;
+    accessor tooltipCopied: string;
+    accessor tooltipPlacement: TooltipPlacement;
+    private _slotElement;
+    private _tooltipEl;
+    private _resetTimer;
+    private _getTextToCopy;
+    private _handleClick;
+    protected onUnmounted(): void;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-copy-button': CopyButton;
+    }
+}
+export default CopyButton;
+export type CopyButtonProps = InferProps<typeof CopyButton>;

package/dist/types/copy-button/defines.d.ts

@@ -0,0 +1 @@
+export type { ButtonColor as CopyButtonColor, ButtonVariant as CopyButtonVariant, ButtonSize as CopyButtonSize, } from '../button/defines';

package/dist/types/copy-button/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';
+export type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';

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

@@ -1,2 +1,3 @@
-export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type DetailVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
+export type DetailIconPlacement = 'start' | 'end';
 export type DetailColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';

package/dist/types/detail/detail.d.ts

@@ -1,6 +1,6 @@
 import type { InferProps } from 'aeico';
 import AeicoComponent from '../aeico-component';
-import type { DetailColor, DetailVariant } from './defines';
+import type { DetailColor, DetailVariant, DetailIconPlacement } from './defines';
 /**
  * Detail component that can be used to show/hide additional content.
  *
@@ -19,6 +19,7 @@ declare class Detail extends AeicoComponent {
     accessor variant: DetailVariant;
     accessor color: DetailColor;
     accessor disabled: boolean;
+    accessor iconPlacement: DetailIconPlacement;
     private _open;
     /** Opens the detail panel. */
     open(): void;
@@ -38,3 +39,4 @@ declare global {
 }
 export default Detail;
 export type DetailProps = InferProps<typeof Detail>;
+export type { DetailIconPlacement };

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

@@ -1,3 +1,3 @@
 export { default, default as Detail } from './detail';
 export type { DetailProps } from './detail';
-export type { DetailVariant, DetailColor } from './defines';
+export type { DetailVariant, DetailColor, DetailIconPlacement } from './defines';

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

@@ -0,0 +1,39 @@
+import type { InferProps, Props } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { DetailColor, DetailVariant } from '../detail/defines';
+/**
+ * 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.
+ *
+ * @example
+ * ```html
+ * <ae-detail-group>
+ *   <ae-detail summary="Section 1">Content 1</ae-detail>
+ *   <ae-detail summary="Section 2">Content 2</ae-detail>
+ *   <ae-detail summary="Section 3">Content 3</ae-detail>
+ * </ae-detail-group>
+ * ```
+ */
+declare class DetailGroup extends AeicoComponent {
+    static tagName: string;
+    static props: Props;
+    protected static styles: string[];
+    multiple?: boolean;
+    variant?: DetailVariant;
+    color?: DetailColor;
+    private slotEl;
+    private readonly DETAIL_RADIUS;
+    connectedCallback(): void;
+    private _getDetails;
+    private _syncChildren;
+    private _handleOpen;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-detail-group': DetailGroup;
+    }
+}
+export default DetailGroup;
+export type DetailGroupProps = InferProps<typeof DetailGroup>;

package/dist/types/detail-group/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as DetailGroup } from './detail-group';
+export type { DetailGroupProps } from './detail-group';

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

@@ -0,0 +1 @@
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';

package/dist/types/drawer/drawer.d.ts

@@ -0,0 +1,31 @@
+import type { InferProps } from 'aeico';
+import AeicoComponent from '../aeico-component';
+import type { DrawerPlacement } from './defines';
+declare class Drawer extends AeicoComponent {
+    protected static styles: string[];
+    accessor label: string | undefined;
+    accessor placement: DrawerPlacement | undefined;
+    accessor size: string | undefined;
+    accessor modal: boolean;
+    accessor closable: boolean;
+    accessor header: boolean;
+    accessor closeOnOverlayClick: boolean;
+    private _panelEl;
+    private _hasFooter;
+    protected render(): import("aeico-view").RenderResult;
+    private _handleBackdropClick;
+    private _handlePanelClick;
+    private _handleKeydown;
+    private _handleFooterSlotChange;
+    open(): void;
+    close(): void;
+    isOpen(): boolean;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-drawer': Drawer;
+    }
+}
+export default Drawer;
+export type DrawerProps = InferProps<typeof Drawer>;

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

@@ -0,0 +1,3 @@
+export { default, default as Drawer } from './drawer';
+export type { DrawerProps } from './drawer';
+export type { DrawerPlacement } from './defines';

package/dist/types/icon/built-in-icons.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,11 @@
 export type IconSize = '3xs' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
 export type IconColor = 'default' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+export interface IconPathDef {
+    d: string;
+    fill?: string;
+}
 export interface IconDefinition {
-    path: string;
+    paths: string | IconPathDef[];
     viewBox?: string;
     stroke?: boolean;
     strokeWidth?: number;

package/dist/types/icon/icon.d.ts

@@ -1,6 +1,7 @@
 import type { InferProps, Props } from 'aeico';
 import AeicoComponent from '../aeico-component';
 import type { IconSize, IconColor } from './defines';
+import './built-in-icons';
 declare class Icon extends AeicoComponent {
     static tagName: string;
     static props: Props;

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

@@ -1,4 +1,4 @@
 export { default as Icon } from './icon';
 export type { IconProps } from './icon';
 export { default as IconRegistry } from './registry';
-export type { IconSize, IconColor, IconDefinition, IconRegistryData } from './defines';
+export type { IconSize, IconColor, IconDefinition, IconPathDef, IconRegistryData } from './defines';

package/dist/types/icon/registry.d.ts

@@ -1,7 +1,15 @@
 import { IconDefinition, IconRegistryData } from './defines';
 declare class IconRegistry {
     private static _icons;
+    /** Names registered via addBuiltIn — can be overridden by user add() calls */
+    private static _builtInKeys;
+    /** Register user icons. Always takes priority over built-in icons. */
     static add(icons: IconRegistryData): void;
+    /**
+     * Register built-in icons provided by the library.
+     * A built-in icon will NOT overwrite an icon already registered by the user.
+     */
+    static addBuiltIn(icons: IconRegistryData): void;
     static get(name: string): IconDefinition | undefined;
     static has(name: string): boolean;
 }

package/dist/types/index.d.ts

@@ -31,6 +31,8 @@
  * ```
  */
 export { default as TextInput } from './text-input';
+export { default as NumberInput } from './number-input';
+export { default as Textarea, type TextareaResize } from './textarea';
 export { default as Select } from './select';
 export { default as Slider } from './slider';
 export { default as Checkbox } from './checkbox';
@@ -39,12 +41,14 @@ export { Radio } from './radio-group';
 export { default as Switch } from './switch';
 export { default as Breadcrumb, BreadcrumbItem } from './breadcrumb';
 export { default as Button } from './button';
+export { default as CopyButton } from './copy-button';
 export { default as Dropdown, DropdownItem, DropdownButton } from './dropdown';
 export { default as ButtonGroup } from './button-group';
 export { default as Badge } from './badge';
 export { default as Tag } from './tag';
 export { default as Alert } from './alert';
 export { default as Dialog } from './dialog';
+export { default as Drawer } from './drawer';
 export { default as Icon } from './icon/icon';
 export { default as IconRegistry } from './icon/registry';
 export { default as IconButton } from './icon-button';
@@ -52,8 +56,14 @@ export { Tabs, Tab, TabPanel } from './tabs';
 export { default as Divider } from './divider';
 export { default as Card } from './card';
 export { default as Navbar } from './navbar';
+export { default as Spinner } from './spinner';
 export { default as Detail } from './detail';
+export { default as DetailGroup } from './detail-group';
 export { default as ProgressBar } from './progress-bar';
+export { Menu, MenuItem } from './menu';
+export { default as Tooltip } from './tooltip';
+export { default as Pagination } from './pagination';
+export { Tree, TreeItem } from './tree';
 export type { SelectProps, SelectOption, SelectOptions, SelectOptionValue } from './select';
 export type { SliderProps, SliderOption, SliderOptions, SliderOptionValue } from './slider';
 export type { CheckboxProps, CheckboxVariant } from './checkbox';
@@ -61,12 +71,16 @@ export type { RadioGroupProps, RadioGroupMode, RadioGroupOption, RadioGroupOptio
 export type { RadioProps } from './radio-group';
 export type { SwitchProps } from './switch';
 export type { TextInputProps } from './text-input';
+export type { NumberInputProps } from './number-input';
+export type { TextareaProps } from './textarea';
 export type { ButtonProps, ButtonColor, ButtonSize, ButtonVariant } from './button';
 export type { ButtonGroupProps } from './button-group';
+export type { PaginationProps, PaginationSize } from './pagination';
 export type { AlertProps, AlertColor, AlertSize, AlertVariant } from './alert';
 export type { BadgeProps, BadgeColor, BadgeSize, BadgeVariant } from './badge';
 export type { TagProps, TagColor, TagSize, TagVariant } from './tag';
 export type { DialogProps } from './dialog';
+export type { DrawerProps, DrawerPlacement } from './drawer';
 export type { IconProps, IconSize, IconColor, IconDefinition, IconRegistryData } from './icon';
 export type { ProgressBarProps, ProgressBarColor } from './progress-bar';
 export type { IconButtonProps, IconButtonVariant, IconButtonSize } from './icon-button';
@@ -74,3 +88,6 @@ export type { DividerProps } from './divider';
 export type { CardProps, CardVariant, CardColor } from './card';
 export type { NavbarProps, NavbarColor, NavbarAppearance } from './navbar';
 export type { DetailProps, DetailVariant, DetailColor } from './detail';
+export type { MenuProps, MenuItemProps, MenuMode, MenuOrientation, MenuTrigger, MenuSelectDetail, } from './menu';
+export type { TooltipProps, TooltipPlacement, TooltipTrigger } from './tooltip';
+export type { TreeProps, TreeItemProps, TreeSelectDetail, TreeExpandDetail, TreeCheckDetail, } from './tree';

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

@@ -0,0 +1,15 @@
+export type MenuMode = 'flyout' | 'inline';
+export type MenuOrientation = 'horizontal' | 'vertical';
+export type MenuTrigger = 'click' | 'hover';
+export type MenuIconPlacement = 'start' | 'end';
+/** Minimal interface used by menu-item to read config from its parent ae-menu. */
+export interface ParentMenuLike extends Element {
+    mode?: MenuMode;
+    orientation?: MenuOrientation;
+    trigger?: MenuTrigger;
+}
+export interface MenuSelectDetail {
+    key: string;
+    label: string;
+    keyPath: string[];
+}

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

@@ -0,0 +1,5 @@
+export { default as Menu } from './menu';
+export { default as MenuItem } from './menu-item';
+export type { MenuProps } from './menu';
+export type { MenuItemProps } from './menu-item';
+export type { MenuMode, MenuOrientation, MenuTrigger, MenuSelectDetail } from './defines';

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

@@ -0,0 +1,63 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import type { MenuIconPlacement } from './defines';
+/**
+ * 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.
+ * - **Parent item**: set `label` to the trigger text; slot children are
+ *   `<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).
+ *
+ * @example
+ * ```html
+ * <ae-menu-item label="Settings" icon-placement="start">
+ *   <ae-icon name="chevron-right" slot="expand"></ae-icon>
+ *   <ae-icon name="chevron-down" slot="collapse"></ae-icon>
+ *   <ae-menu-item key="profile">Profile</ae-menu-item>
+ * </ae-menu-item>
+ * ```
+ */
+declare class MenuItem extends AeicoComponent {
+    static tagName: string;
+    protected static styles: string[];
+    accessor key: string | undefined;
+    accessor label: string | undefined;
+    accessor disabled: boolean;
+    accessor href: string | undefined;
+    accessor selected: boolean;
+    accessor open: boolean;
+    accessor iconPlacement: MenuIconPlacement;
+    private _outsideClickHandler;
+    private _closeTimer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private get _parentMenu();
+    private get _mode();
+    private get _orientation();
+    private get _trigger();
+    private get _isParent();
+    /** Compute flyout panel placement based on depth and parent orientation. */
+    private get _panelPlacement();
+    private _isHoverTrigger;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private _handleParentClick;
+    private _handleLeafClick;
+    private _handleChildSelect;
+    private _handleKeydown;
+    private _buildKeyPath;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-menu-item': MenuItem;
+    }
+}
+export default MenuItem;
+export type MenuItemProps = InferProps<typeof MenuItem>;
+export type { MenuIconPlacement };

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

@@ -0,0 +1,34 @@
+import AeicoComponent from '../aeico-component';
+import type { InferProps } from 'aeico';
+import type { MenuMode, MenuOrientation, MenuTrigger } from './defines';
+import './menu-item';
+/**
+ * Menu navigation component. Renders a horizontal or vertical menu with
+ * optional two-level flyout or inline (accordion) submenus.
+ *
+ * Two modes:
+ * - `flyout` (default) — submenus open as floating panels (like a nav bar or
+ *   context menu).
+ * - `inline` — submenus expand in-place (accordion-style sidebar).
+ *
+ * Emits:
+ * - `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;
+    accessor trigger: MenuTrigger;
+    accessor selectedKey: string | undefined;
+    connectedCallback(): void;
+    private _handleItemSelect;
+    protected render(): import("aeico-view").RenderResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ae-menu': Menu;
+    }
+}
+export default Menu;
+export type MenuProps = InferProps<typeof Menu>;

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

@@ -0,0 +1,2 @@
+export { default, default as NumberInput } from './number-input';
+export type { NumberInputProps } from './number-input';