aeico-components 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -1,6 +1,10 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const textInput = require("./chunks/text-input.cjs");
+const textarea = require("./chunks/textarea.cjs");
 const select = require("./chunks/select.cjs");
 const slider = require("./chunks/slider.cjs");
 const checkbox = require("./chunks/checkbox.cjs");
@@ -8,20 +12,190 @@ const radio = require("./chunks/radio.cjs");
 const _switch = require("./chunks/switch.cjs");
 const breadcrumbItem = require("./chunks/breadcrumb-item.cjs");
 const button = require("./chunks/button.cjs");
+const copyButton = require("./chunks/copy-button.cjs");
 const dropdownButton = require("./chunks/dropdown-button.cjs");
 const buttonGroup = require("./chunks/button-group.cjs");
 const badge = require("./chunks/badge.cjs");
 const tag = require("./chunks/tag.cjs");
 const alert = require("./chunks/alert.cjs");
 const dialog = require("./chunks/dialog.cjs");
+const drawer = require("./chunks/drawer.cjs");
 const icon = require("./chunks/icon.cjs");
 const iconButton = require("./chunks/icon-button.cjs");
 const tabPanel = require("./chunks/tab-panel.cjs");
 const divider = require("./chunks/divider.cjs");
 const card = require("./chunks/card.cjs");
 const navbar = require("./chunks/navbar.cjs");
+const spinner = require("./chunks/spinner.cjs");
 const detail = require("./chunks/detail.cjs");
+const progressBar = require("./chunks/progress-bar.cjs");
+const menu = require("./chunks/menu.cjs");
+const tooltip = require("./chunks/tooltip.cjs");
+const pagination = require("./chunks/pagination.cjs");
+const tree = require("./chunks/tree.cjs");
+const variables = require("./chunks/variables.cjs");
+const aeicoComponent = require("./chunks/aeico-component.cjs");
+const aeico = require("aeico");
+const actionButton = require("./chunks/action-button.cjs");
+const size = require("./chunks/size.cjs");
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* Hide number spinner arrows in WebKit browsers */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Number stepper controls (right side, integrated, horizontal) */\n.number-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: var(--input-transition);\n  background: var(--input-bg);\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.number-btn {\n  border: none;\n  background: transparent;\n  color: var(--input-color);\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.number-btn:hover:not(:disabled) {\n  background: var(--input-bg-hover);\n}\n\n.number-btn:active:not(:disabled) {\n  background: var(--input-bg-focus);\n}\n\n.number-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.number-btn-increment {\n  border-right: var(--input-border-width) solid var(--input-border-color);\n}\n\n.input-container:has(input:focus) .number-controls {\n  border-color: var(--input-border-color-focus);\n}\n\n.input-container:has(input:hover:not(:focus)) .number-controls {\n  border-color: var(--input-border-color-hover);\n}\n\n:host(:has(.number-controls)) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n:host(:has(.action-controls)) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n.number-controls ~ .action-controls {\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n}\n\n.input-container:has(.number-controls):has(.action-controls) .number-controls {\n  border-right: none;\n  border-radius: 0;\n}\n\n.input-container:has(.number-controls) ~ .action-controls,\n.input-container:has(.action-controls) .number-controls {\n  border-radius: 0;\n}\n\n.input-container:has(.number-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n";
+class NumberInput extends actionButton.AeicoField {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+    __publicField(this, "boundOnIncrement", () => {
+      const current = this.getValue() || 0;
+      const step = this.step ?? 1;
+      let next = current + step;
+      if (this.max != null && next > this.max) {
+        next = this.max;
+      }
+      this.setValue(next, { silent: false, action: "change" });
+    });
+    __publicField(this, "boundOnDecrement", () => {
+      const current = this.getValue() || 0;
+      const step = this.step ?? 1;
+      let next = current - step;
+      if (this.min != null && next < this.min) {
+        next = this.min;
+      }
+      this.setValue(next, { silent: false, action: "change" });
+    });
+  }
+  render() {
+    return aeico.html(({ div, input, button: button2 }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "input-container field-body" }, () => {
+        this.fieldElement = input({
+          id,
+          type: "number",
+          placeholder: this.placeholder || "",
+          required: Boolean(this.required),
+          disabled: Boolean(this.disabled),
+          min: this.min != null ? String(this.min) : void 0,
+          max: this.max != null ? String(this.max) : void 0,
+          step: this.step != null ? String(this.step) : void 0,
+          "@input": this.boundOnChange
+        });
+        if (this.controls) {
+          div({ className: "number-controls" }, () => {
+            button2({
+              className: "number-btn number-btn-increment",
+              textContent: "+",
+              disabled: Boolean(this.disabled),
+              "@click": this.boundOnIncrement
+            });
+            button2({
+              className: "number-btn number-btn-decrement",
+              textContent: "-",
+              disabled: Boolean(this.disabled),
+              "@click": this.boundOnDecrement
+            });
+          });
+        }
+        this.renderActionButtons();
+      });
+      this.renderHelperText();
+      this.renderError();
+      if (this.fieldElement && this.value != null) {
+        this.fieldElement.value = String(this.value);
+      }
+    });
+  }
+  /**
+   * Get current value as number
+   */
+  getValue() {
+    if (!this.fieldElement) return 0;
+    const val = this.fieldElement.value;
+    if (val === "") return 0;
+    const num = parseFloat(val);
+    return isNaN(num) ? 0 : num;
+  }
+  /**
+   * Write value to the input element (DOM only)
+   */
+  writeValue(value) {
+    if (this.fieldElement) {
+      this.fieldElement.value = value != null ? String(value) : "";
+    }
+  }
+  /**
+   * Get event payload for change events
+   */
+  getEventPayload(value, oldValue, action) {
+    return { value, oldValue, action };
+  }
+}
+__publicField(NumberInput, "tagName", "number-input");
+__publicField(NumberInput, "props", {
+  placeholder: { type: String },
+  min: { type: Number },
+  max: { type: Number },
+  step: { type: Number },
+  controls: { type: Boolean }
+});
+__publicField(NumberInput, "styles", [variables.variables, size.sizeCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
+NumberInput.register();
+const detailGroupStyle = ":host {\n  display: block;\n}\n\n/* Raise hovered/focused item so its border shows above neighbours */\n::slotted(ae-detail:hover),\n::slotted(ae-detail:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
+class DetailGroup extends aeicoComponent.AeicoComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "slotEl", null);
+    __publicField(this, "DETAIL_RADIUS", 6);
+    __publicField(this, "_handleOpen", (event) => {
+      if (this.multiple) return;
+      const opened = event.target;
+      this._getDetails().forEach((detail2) => {
+        if (detail2 !== opened) detail2.close();
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("open", this._handleOpen);
+  }
+  _getDetails() {
+    if (!this.slotEl) return [];
+    return this.slotEl.assignedElements({ flatten: true }).filter(
+      (el) => el.tagName.toLowerCase() === "ae-detail"
+    );
+  }
+  _syncChildren() {
+    const details = this._getDetails();
+    const r = this.DETAIL_RADIUS;
+    details.forEach((detail2, i) => {
+      const isFirst = i === 0;
+      const isLast = i === details.length - 1;
+      detail2.style.marginTop = isFirst ? "" : "-1px";
+      detail2.style.setProperty("--detail-r-tl", isFirst ? `${r}px` : "0");
+      detail2.style.setProperty("--detail-r-tr", isFirst ? `${r}px` : "0");
+      detail2.style.setProperty("--detail-r-br", isLast ? `${r}px` : "0");
+      detail2.style.setProperty("--detail-r-bl", isLast ? `${r}px` : "0");
+      if (this.variant !== void 0) detail2.variant = this.variant;
+      if (this.color !== void 0) detail2.color = this.color;
+    });
+  }
+  render() {
+    return aeico.html(({ slot }) => {
+      this.slotEl = slot({
+        "@slotchange": () => this._syncChildren()
+      });
+      this._syncChildren();
+    });
+  }
+}
+__publicField(DetailGroup, "tagName", "detail-group");
+__publicField(DetailGroup, "props", {
+  multiple: { type: Boolean },
+  variant: { type: String },
+  color: { type: String }
+});
+__publicField(DetailGroup, "styles", [variables.variables, detailGroupStyle]);
+DetailGroup.register();
 exports.TextInput = textInput.TextInput;
+exports.Textarea = textarea.Textarea;
 exports.Select = select.Select;
 exports.Slider = slider.Slider;
 exports.Checkbox = checkbox.Checkbox;
@@ -31,6 +205,7 @@ exports.Switch = _switch.Switch;
 exports.Breadcrumb = breadcrumbItem.Breadcrumb;
 exports.BreadcrumbItem = breadcrumbItem.BreadcrumbItem;
 exports.Button = button.Button;
+exports.CopyButton = copyButton.CopyButton;
 exports.Dropdown = dropdownButton.Dropdown;
 exports.DropdownButton = dropdownButton.DropdownButton;
 exports.DropdownItem = dropdownButton.DropdownItem;
@@ -39,6 +214,7 @@ exports.Badge = badge.Badge;
 exports.Tag = tag.Tag;
 exports.Alert = alert.Alert;
 exports.Dialog = dialog.Dialog;
+exports.Drawer = drawer.Drawer;
 exports.Icon = icon.Icon;
 exports.IconRegistry = icon.IconRegistry;
 exports.IconButton = iconButton.IconButton;
@@ -48,5 +224,15 @@ exports.Tabs = tabPanel.Tabs;
 exports.Divider = divider.Divider;
 exports.Card = card.Card;
 exports.Navbar = navbar.Navbar;
+exports.Spinner = spinner.Spinner;
 exports.Detail = detail.Detail;
+exports.ProgressBar = progressBar.ProgressBar;
+exports.Menu = menu.Menu;
+exports.MenuItem = menu.MenuItem;
+exports.Tooltip = tooltip.Tooltip;
+exports.Pagination = pagination.Pagination;
+exports.Tree = tree.Tree;
+exports.TreeItem = tree.TreeItem;
+exports.DetailGroup = DetailGroup;
+exports.NumberInput = NumberInput;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/number-input/number-input.ts","../src/detail-group/detail-group.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/number-input.css?inline';\n\nclass NumberInput extends AeicoField<number> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'number-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    controls: { type: Boolean },\n  };\n\n  declare placeholder?: string;\n  declare min?: number;\n  declare max?: number;\n  declare step?: number;\n  declare controls?: boolean;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input, button }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: 'number',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          disabled: Boolean(this.disabled),\n          min: this.min != null ? String(this.min) : undefined,\n          max: this.max != null ? String(this.max) : undefined,\n          step: this.step != null ? String(this.step) : undefined,\n          '@input': this.boundOnChange,\n        });\n\n        if (this.controls) {\n          div({ className: 'number-controls' }, () => {\n            button({\n              className: 'number-btn number-btn-increment',\n              textContent: '+',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnIncrement,\n            });\n            button({\n              className: 'number-btn number-btn-decrement',\n              textContent: '-',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnDecrement,\n            });\n          });\n        }\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  protected readonly boundOnIncrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current + step;\n    if (this.max != null && next > this.max) {\n      next = this.max;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  protected readonly boundOnDecrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current - step;\n    if (this.min != null && next < this.min) {\n      next = this.min;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  /**\n   * Get current value as number\n   */\n  protected getValue(): number {\n    if (!this.fieldElement) return 0;\n    const val = this.fieldElement.value;\n    if (val === '') return 0;\n    const num = parseFloat(val);\n    return isNaN(num) ? 0 : num;\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: number): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = value != null ? String(value) : '';\n    }\n  }\n\n  /**\n   * Get event payload for change events\n   */\n  protected getEventPayload(\n    value: number,\n    oldValue: number,\n    action: import('../aeico-field').FieldAction,\n  ): Record<string, unknown> {\n    return { value, oldValue, action };\n  }\n}\n\nNumberInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-number-input': NumberInput;\n  }\n}\n\nexport default NumberInput;\nexport type NumberInputProps = InferProps<typeof NumberInput>;\n","import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport detailGroupStyle from '../styles/components/detail-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Detail from '../detail/detail';\nimport type { DetailColor, DetailVariant } from '../detail/defines';\n\n/**\n * DetailGroup component — wraps multiple `ae-detail` elements into an\n * accordion-style group. By default only one item can be open at a time;\n * set `multiple` to allow several items open simultaneously.\n *\n * @example\n * ```html\n * <ae-detail-group>\n *   <ae-detail summary=\"Section 1\">Content 1</ae-detail>\n *   <ae-detail summary=\"Section 2\">Content 2</ae-detail>\n *   <ae-detail summary=\"Section 3\">Content 3</ae-detail>\n * </ae-detail-group>\n * ```\n */\nclass DetailGroup extends AeicoComponent {\n  static tagName = 'detail-group';\n\n  static props: Props = {\n    multiple: { type: Boolean },\n    variant: { type: String },\n    color: { type: String },\n  };\n\n  protected static styles = [styleVariables, detailGroupStyle];\n\n  declare multiple?: boolean;\n  declare variant?: DetailVariant;\n  declare color?: DetailColor;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  private readonly DETAIL_RADIUS = 6;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('open', this._handleOpen);\n  }\n\n  private _getDetails(): Detail[] {\n    if (!this.slotEl) return [];\n    return (this.slotEl.assignedElements({ flatten: true }) as Detail[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-detail',\n    );\n  }\n\n  private _syncChildren(): void {\n    const details = this._getDetails();\n    const r = this.DETAIL_RADIUS;\n\n    details.forEach((detail, i) => {\n      const isFirst = i === 0;\n      const isLast = i === details.length - 1;\n\n      // Collapse borders between adjacent items\n      detail.style.marginTop = isFirst ? '' : '-1px';\n\n      // Adjust per-corner radius so only the outer edges of the group keep it\n      detail.style.setProperty('--detail-r-tl', isFirst ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-tr', isFirst ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-br', isLast ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-bl', isLast ? `${r}px` : '0');\n\n      // Propagate variant / color only when explicitly set on the group\n      if (this.variant !== undefined) detail.variant = this.variant;\n      if (this.color !== undefined) detail.color = this.color;\n    });\n  }\n\n  private _handleOpen = (event: Event): void => {\n    if (this.multiple) return;\n    const opened = event.target as Element;\n    this._getDetails().forEach((detail) => {\n      if (detail !== opened) detail.close();\n    });\n  };\n\n  protected render() {\n    return html(({ slot }) => {\n      this.slotEl = slot({\n        '@slotchange': () => this._syncChildren(),\n      });\n      this._syncChildren();\n    });\n  }\n}\n\nDetailGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail-group': DetailGroup;\n  }\n}\n\nexport default DetailGroup;\nexport type DetailGroupProps = InferProps<typeof DetailGroup>;\n"],"names":["AeicoField","html","button","variables","sizeCSS","fieldLabelCSS","actionButtonCSS","AeicoComponent","detail","styleVariables"],"mappings":"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"}

package/dist/index.js

@@ -1,4 +1,8 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { T } from "./chunks/text-input.js";
+import { T as T2 } from "./chunks/textarea.js";
 import { S } from "./chunks/select.js";
 import { S as S2 } from "./chunks/slider.js";
 import { C } from "./chunks/checkbox.js";
@@ -6,19 +10,188 @@ import { R, a } from "./chunks/radio.js";
 import { S as S3 } from "./chunks/switch.js";
 import { B, a as a2 } from "./chunks/breadcrumb-item.js";
 import { B as B2 } from "./chunks/button.js";
-import { D, a as a3, b } from "./chunks/dropdown-button.js";
+import { C as C2 } from "./chunks/copy-button.js";
+import { b, D, a as a3 } from "./chunks/dropdown-button.js";
 import { B as B3 } from "./chunks/button-group.js";
 import { B as B4 } from "./chunks/badge.js";
-import { T as T2 } from "./chunks/tag.js";
+import { T as T3 } from "./chunks/tag.js";
 import { A } from "./chunks/alert.js";
 import { D as D2 } from "./chunks/dialog.js";
+import { D as D3 } from "./chunks/drawer.js";
 import { I, a as a4 } from "./chunks/icon.js";
 import { I as I2 } from "./chunks/icon-button.js";
-import { T as T3, a as a5, b as b2 } from "./chunks/tab-panel.js";
-import { D as D3 } from "./chunks/divider.js";
-import { C as C2 } from "./chunks/card.js";
+import { T as T4, a as a5, b as b2 } from "./chunks/tab-panel.js";
+import { D as D4 } from "./chunks/divider.js";
+import { C as C3 } from "./chunks/card.js";
 import { N } from "./chunks/navbar.js";
-import { D as D4 } from "./chunks/detail.js";
+import { S as S4 } from "./chunks/spinner.js";
+import { D as D5 } from "./chunks/detail.js";
+import { P } from "./chunks/progress-bar.js";
+import { M, a as a6 } from "./chunks/menu.js";
+import { T as T5 } from "./chunks/tooltip.js";
+import { P as P2 } from "./chunks/pagination.js";
+import { T as T6, a as a7 } from "./chunks/tree.js";
+import { v as variables } from "./chunks/variables.js";
+import { A as AeicoComponent } from "./chunks/aeico-component.js";
+import { html } from "aeico";
+import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./chunks/action-button.js";
+import { s as sizeCSS } from "./chunks/size.js";
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n  -moz-appearance: textfield;\n  appearance: textfield;\n}\n\n/* Hide number spinner arrows in WebKit browsers */\ninput::-webkit-outer-spin-button,\ninput::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Number stepper controls (right side, integrated, horizontal) */\n.number-controls {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;\n  overflow: hidden;\n  flex-shrink: 0;\n  transition: var(--input-transition);\n  background: var(--input-bg);\n  position: relative;\n  z-index: 1;\n  align-self: stretch;\n}\n\n.number-btn {\n  border: none;\n  background: transparent;\n  color: var(--input-color);\n  font-size: 0.875em;\n  line-height: 1;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 0.5em;\n  transition: background 0.12s;\n}\n\n.number-btn:hover:not(:disabled) {\n  background: var(--input-bg-hover);\n}\n\n.number-btn:active:not(:disabled) {\n  background: var(--input-bg-focus);\n}\n\n.number-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.number-btn-increment {\n  border-right: var(--input-border-width) solid var(--input-border-color);\n}\n\n.input-container:has(input:focus) .number-controls {\n  border-color: var(--input-border-color-focus);\n}\n\n.input-container:has(input:hover:not(:focus)) .number-controls {\n  border-color: var(--input-border-color-hover);\n}\n\n:host(:has(.number-controls)) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n:host(:has(.action-controls)) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n.number-controls ~ .action-controls {\n  margin-left: calc(-1 * var(--input-field-gap) - 1px);\n}\n\n.input-container:has(.number-controls):has(.action-controls) .number-controls {\n  border-right: none;\n  border-radius: 0;\n}\n\n.input-container:has(.number-controls) ~ .action-controls,\n.input-container:has(.action-controls) .number-controls {\n  border-radius: 0;\n}\n\n.input-container:has(.number-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--red));\n}\n";
+class NumberInput extends AeicoField {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+    __publicField(this, "boundOnIncrement", () => {
+      const current = this.getValue() || 0;
+      const step = this.step ?? 1;
+      let next = current + step;
+      if (this.max != null && next > this.max) {
+        next = this.max;
+      }
+      this.setValue(next, { silent: false, action: "change" });
+    });
+    __publicField(this, "boundOnDecrement", () => {
+      const current = this.getValue() || 0;
+      const step = this.step ?? 1;
+      let next = current - step;
+      if (this.min != null && next < this.min) {
+        next = this.min;
+      }
+      this.setValue(next, { silent: false, action: "change" });
+    });
+  }
+  render() {
+    return html(({ div, input, button }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "input-container field-body" }, () => {
+        this.fieldElement = input({
+          id,
+          type: "number",
+          placeholder: this.placeholder || "",
+          required: Boolean(this.required),
+          disabled: Boolean(this.disabled),
+          min: this.min != null ? String(this.min) : void 0,
+          max: this.max != null ? String(this.max) : void 0,
+          step: this.step != null ? String(this.step) : void 0,
+          "@input": this.boundOnChange
+        });
+        if (this.controls) {
+          div({ className: "number-controls" }, () => {
+            button({
+              className: "number-btn number-btn-increment",
+              textContent: "+",
+              disabled: Boolean(this.disabled),
+              "@click": this.boundOnIncrement
+            });
+            button({
+              className: "number-btn number-btn-decrement",
+              textContent: "-",
+              disabled: Boolean(this.disabled),
+              "@click": this.boundOnDecrement
+            });
+          });
+        }
+        this.renderActionButtons();
+      });
+      this.renderHelperText();
+      this.renderError();
+      if (this.fieldElement && this.value != null) {
+        this.fieldElement.value = String(this.value);
+      }
+    });
+  }
+  /**
+   * Get current value as number
+   */
+  getValue() {
+    if (!this.fieldElement) return 0;
+    const val = this.fieldElement.value;
+    if (val === "") return 0;
+    const num = parseFloat(val);
+    return isNaN(num) ? 0 : num;
+  }
+  /**
+   * Write value to the input element (DOM only)
+   */
+  writeValue(value) {
+    if (this.fieldElement) {
+      this.fieldElement.value = value != null ? String(value) : "";
+    }
+  }
+  /**
+   * Get event payload for change events
+   */
+  getEventPayload(value, oldValue, action) {
+    return { value, oldValue, action };
+  }
+}
+__publicField(NumberInput, "tagName", "number-input");
+__publicField(NumberInput, "props", {
+  placeholder: { type: String },
+  min: { type: Number },
+  max: { type: Number },
+  step: { type: Number },
+  controls: { type: Boolean }
+});
+__publicField(NumberInput, "styles", [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style]);
+NumberInput.register();
+const detailGroupStyle = ":host {\n  display: block;\n}\n\n/* Raise hovered/focused item so its border shows above neighbours */\n::slotted(ae-detail:hover),\n::slotted(ae-detail:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
+class DetailGroup extends AeicoComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "slotEl", null);
+    __publicField(this, "DETAIL_RADIUS", 6);
+    __publicField(this, "_handleOpen", (event) => {
+      if (this.multiple) return;
+      const opened = event.target;
+      this._getDetails().forEach((detail) => {
+        if (detail !== opened) detail.close();
+      });
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.listen("open", this._handleOpen);
+  }
+  _getDetails() {
+    if (!this.slotEl) return [];
+    return this.slotEl.assignedElements({ flatten: true }).filter(
+      (el) => el.tagName.toLowerCase() === "ae-detail"
+    );
+  }
+  _syncChildren() {
+    const details = this._getDetails();
+    const r = this.DETAIL_RADIUS;
+    details.forEach((detail, i) => {
+      const isFirst = i === 0;
+      const isLast = i === details.length - 1;
+      detail.style.marginTop = isFirst ? "" : "-1px";
+      detail.style.setProperty("--detail-r-tl", isFirst ? `${r}px` : "0");
+      detail.style.setProperty("--detail-r-tr", isFirst ? `${r}px` : "0");
+      detail.style.setProperty("--detail-r-br", isLast ? `${r}px` : "0");
+      detail.style.setProperty("--detail-r-bl", isLast ? `${r}px` : "0");
+      if (this.variant !== void 0) detail.variant = this.variant;
+      if (this.color !== void 0) detail.color = this.color;
+    });
+  }
+  render() {
+    return html(({ slot }) => {
+      this.slotEl = slot({
+        "@slotchange": () => this._syncChildren()
+      });
+      this._syncChildren();
+    });
+  }
+}
+__publicField(DetailGroup, "tagName", "detail-group");
+__publicField(DetailGroup, "props", {
+  multiple: { type: Boolean },
+  variant: { type: String },
+  color: { type: String }
+});
+__publicField(DetailGroup, "styles", [variables, detailGroupStyle]);
+DetailGroup.register();
 export {
   A as Alert,
   B4 as Badge,
@@ -26,27 +199,40 @@ export {
   a2 as BreadcrumbItem,
   B2 as Button,
   B3 as ButtonGroup,
-  C2 as Card,
+  C3 as Card,
   C as Checkbox,
-  D4 as Detail,
+  C2 as CopyButton,
+  D5 as Detail,
+  DetailGroup,
   D2 as Dialog,
-  D3 as Divider,
-  D as Dropdown,
-  a3 as DropdownButton,
-  b as DropdownItem,
+  D4 as Divider,
+  D3 as Drawer,
+  b as Dropdown,
+  D as DropdownButton,
+  a3 as DropdownItem,
   I as Icon,
   I2 as IconButton,
   a4 as IconRegistry,
+  M as Menu,
+  a6 as MenuItem,
   N as Navbar,
+  NumberInput,
+  P2 as Pagination,
+  P as ProgressBar,
   R as Radio,
   a as RadioGroup,
   S as Select,
   S2 as Slider,
+  S4 as Spinner,
   S3 as Switch,
-  T3 as Tab,
+  T4 as Tab,
   a5 as TabPanel,
   b2 as Tabs,
-  T2 as Tag,
-  T as TextInput
+  T3 as Tag,
+  T as TextInput,
+  T2 as Textarea,
+  T5 as Tooltip,
+  T6 as Tree,
+  a7 as TreeItem
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/number-input/number-input.ts","../src/detail-group/detail-group.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/number-input.css?inline';\n\nclass NumberInput extends AeicoField<number> {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'number-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    min: { type: Number },\n    max: { type: Number },\n    step: { type: Number },\n    controls: { type: Boolean },\n  };\n\n  declare placeholder?: string;\n  declare min?: number;\n  declare max?: number;\n  declare step?: number;\n  declare controls?: boolean;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input, button }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: 'number',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          disabled: Boolean(this.disabled),\n          min: this.min != null ? String(this.min) : undefined,\n          max: this.max != null ? String(this.max) : undefined,\n          step: this.step != null ? String(this.step) : undefined,\n          '@input': this.boundOnChange,\n        });\n\n        if (this.controls) {\n          div({ className: 'number-controls' }, () => {\n            button({\n              className: 'number-btn number-btn-increment',\n              textContent: '+',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnIncrement,\n            });\n            button({\n              className: 'number-btn number-btn-decrement',\n              textContent: '-',\n              disabled: Boolean(this.disabled),\n              '@click': this.boundOnDecrement,\n            });\n          });\n        }\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  protected readonly boundOnIncrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current + step;\n    if (this.max != null && next > this.max) {\n      next = this.max;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  protected readonly boundOnDecrement = () => {\n    const current = this.getValue() || 0;\n    const step = this.step ?? 1;\n    let next = current - step;\n    if (this.min != null && next < this.min) {\n      next = this.min;\n    }\n    this.setValue(next, { silent: false, action: 'change' });\n  };\n\n  /**\n   * Get current value as number\n   */\n  protected getValue(): number {\n    if (!this.fieldElement) return 0;\n    const val = this.fieldElement.value;\n    if (val === '') return 0;\n    const num = parseFloat(val);\n    return isNaN(num) ? 0 : num;\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: number): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = value != null ? String(value) : '';\n    }\n  }\n\n  /**\n   * Get event payload for change events\n   */\n  protected getEventPayload(\n    value: number,\n    oldValue: number,\n    action: import('../aeico-field').FieldAction,\n  ): Record<string, unknown> {\n    return { value, oldValue, action };\n  }\n}\n\nNumberInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-number-input': NumberInput;\n  }\n}\n\nexport default NumberInput;\nexport type NumberInputProps = InferProps<typeof NumberInput>;\n","import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport detailGroupStyle from '../styles/components/detail-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Detail from '../detail/detail';\nimport type { DetailColor, DetailVariant } from '../detail/defines';\n\n/**\n * DetailGroup component — wraps multiple `ae-detail` elements into an\n * accordion-style group. By default only one item can be open at a time;\n * set `multiple` to allow several items open simultaneously.\n *\n * @example\n * ```html\n * <ae-detail-group>\n *   <ae-detail summary=\"Section 1\">Content 1</ae-detail>\n *   <ae-detail summary=\"Section 2\">Content 2</ae-detail>\n *   <ae-detail summary=\"Section 3\">Content 3</ae-detail>\n * </ae-detail-group>\n * ```\n */\nclass DetailGroup extends AeicoComponent {\n  static tagName = 'detail-group';\n\n  static props: Props = {\n    multiple: { type: Boolean },\n    variant: { type: String },\n    color: { type: String },\n  };\n\n  protected static styles = [styleVariables, detailGroupStyle];\n\n  declare multiple?: boolean;\n  declare variant?: DetailVariant;\n  declare color?: DetailColor;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  private readonly DETAIL_RADIUS = 6;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.listen('open', this._handleOpen);\n  }\n\n  private _getDetails(): Detail[] {\n    if (!this.slotEl) return [];\n    return (this.slotEl.assignedElements({ flatten: true }) as Detail[]).filter(\n      (el) => el.tagName.toLowerCase() === 'ae-detail',\n    );\n  }\n\n  private _syncChildren(): void {\n    const details = this._getDetails();\n    const r = this.DETAIL_RADIUS;\n\n    details.forEach((detail, i) => {\n      const isFirst = i === 0;\n      const isLast = i === details.length - 1;\n\n      // Collapse borders between adjacent items\n      detail.style.marginTop = isFirst ? '' : '-1px';\n\n      // Adjust per-corner radius so only the outer edges of the group keep it\n      detail.style.setProperty('--detail-r-tl', isFirst ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-tr', isFirst ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-br', isLast ? `${r}px` : '0');\n      detail.style.setProperty('--detail-r-bl', isLast ? `${r}px` : '0');\n\n      // Propagate variant / color only when explicitly set on the group\n      if (this.variant !== undefined) detail.variant = this.variant;\n      if (this.color !== undefined) detail.color = this.color;\n    });\n  }\n\n  private _handleOpen = (event: Event): void => {\n    if (this.multiple) return;\n    const opened = event.target as Element;\n    this._getDetails().forEach((detail) => {\n      if (detail !== opened) detail.close();\n    });\n  };\n\n  protected render() {\n    return html(({ slot }) => {\n      this.slotEl = slot({\n        '@slotchange': () => this._syncChildren(),\n      });\n      this._syncChildren();\n    });\n  }\n}\n\nDetailGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-detail-group': DetailGroup;\n  }\n}\n\nexport default DetailGroup;\nexport type DetailGroupProps = InferProps<typeof DetailGroup>;\n"],"names":["styleVariables"],"mappings":"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"}

package/dist/menu.cjs

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

package/dist/menu.cjs.map

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

package/dist/menu.js

@@ -0,0 +1,6 @@
+import { M, a } from "./chunks/menu.js";
+export {
+  M as Menu,
+  a as MenuItem
+};
+//# sourceMappingURL=menu.js.map

package/dist/menu.js.map

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

package/dist/pagination.cjs

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

package/dist/pagination.cjs.map

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

package/dist/pagination.js

@@ -0,0 +1,6 @@
+import { P, P as P2 } from "./chunks/pagination.js";
+export {
+  P as Pagination,
+  P2 as default
+};
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

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

package/dist/progress-bar.cjs

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

package/dist/progress-bar.cjs.map

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

package/dist/progress-bar.js

@@ -0,0 +1,6 @@
+import { P, P as P2 } from "./chunks/progress-bar.js";
+export {
+  P as ProgressBar,
+  P2 as default
+};
+//# sourceMappingURL=progress-bar.js.map

package/dist/progress-bar.js.map

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

package/dist/select.cjs

@@ -91,7 +91,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", [variables.styleVariables, style]);
+__publicField(SelectOption, "styles", [variables.variables, style]);
 SelectOption.register();
 exports.Select = select.Select;
 exports.default = select.Select;