aeico-components 0.1.6 → 0.1.7

package/dist/detail-group.js

@@ -0,0 +1,6 @@
+import { D, D as D2 } from "./chunks/detail-group.js";
+export {
+  D as DetailGroup,
+  D2 as default
+};
+//# sourceMappingURL=detail-group.js.map

package/dist/detail-group.js.map

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

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-import { D, a, b } from "./chunks/dropdown-button.js";
+import { a, b, D } from "./chunks/dropdown-button.js";
 export {
-  D as DropdownButton,
-  a as DropdownItem,
-  b as default
+  a as DropdownButton,
+  b as DropdownItem,
+  D as default
 };
 //# sourceMappingURL=dropdown.js.map

package/dist/index.cjs

@@ -1,9 +1,7 @@
 "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 numberInput = require("./chunks/number-input.cjs");
 const textarea = require("./chunks/textarea.cjs");
 const select = require("./chunks/select.cjs");
 const slider = require("./chunks/slider.cjs");
@@ -28,173 +26,14 @@ 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 detailGroup = require("./chunks/detail-group.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.NumberInput = numberInput.NumberInput;
 exports.Textarea = textarea.Textarea;
 exports.Select = select.Select;
 exports.Slider = slider.Slider;
@@ -226,6 +65,7 @@ exports.Card = card.Card;
 exports.Navbar = navbar.Navbar;
 exports.Spinner = spinner.Spinner;
 exports.Detail = detail.Detail;
+exports.DetailGroup = detailGroup.DetailGroup;
 exports.ProgressBar = progressBar.ProgressBar;
 exports.Menu = menu.Menu;
 exports.MenuItem = menu.MenuItem;
@@ -233,6 +73,4 @@ 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":["../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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"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -1,7 +1,5 @@
-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 { N } from "./chunks/number-input.js";
 import { T as T2 } from "./chunks/textarea.js";
 import { S } from "./chunks/select.js";
 import { S as S2 } from "./chunks/slider.js";
@@ -11,7 +9,7 @@ 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 { C as C2 } from "./chunks/copy-button.js";
-import { b, D, a as a3 } from "./chunks/dropdown-button.js";
+import { D, a as a3, b } 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 T3 } from "./chunks/tag.js";
@@ -23,175 +21,15 @@ import { I as I2 } from "./chunks/icon-button.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 { N as N2 } from "./chunks/navbar.js";
 import { S as S4 } from "./chunks/spinner.js";
 import { D as D5 } from "./chunks/detail.js";
+import { D as D6 } from "./chunks/detail-group.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,
@@ -203,20 +41,20 @@ export {
   C as Checkbox,
   C2 as CopyButton,
   D5 as Detail,
-  DetailGroup,
+  D6 as DetailGroup,
   D2 as Dialog,
   D4 as Divider,
   D3 as Drawer,
-  b as Dropdown,
-  D as DropdownButton,
-  a3 as DropdownItem,
+  D as Dropdown,
+  a3 as DropdownButton,
+  b as DropdownItem,
   I as Icon,
   I2 as IconButton,
   a4 as IconRegistry,
   M as Menu,
   a6 as MenuItem,
-  N as Navbar,
-  NumberInput,
+  N2 as Navbar,
+  N as NumberInput,
   P2 as Pagination,
   P as ProgressBar,
   R as Radio,

package/dist/index.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/number-input.cjs

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

package/dist/number-input.cjs.map

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

package/dist/number-input.js

@@ -0,0 +1,6 @@
+import { N, N as N2 } from "./chunks/number-input.js";
+export {
+  N as NumberInput,
+  N2 as default
+};
+//# sourceMappingURL=number-input.js.map

package/dist/number-input.js.map

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

package/dist/select.cjs

@@ -4,7 +4,7 @@ const select = require("./chunks/select.cjs");
 const aeicoComponent = require("./chunks/aeico-component.cjs");
 const aeico = require("aeico");
 const variables = require("./chunks/variables.cjs");
-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";
+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;

package/dist/select.js

@@ -2,7 +2,7 @@ import { S, S as S2 } from "./chunks/select.js";
 import { A as AeicoComponent } from "./chunks/aeico-component.js";
 import { prop, html } from "aeico";
 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(--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";
+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;

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/detail/defines.d.ts

@@ -1,3 +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/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/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/tabs/defines.d.ts

@@ -1 +1,2 @@
 export type TabActiveIndex = number;
+export type TabVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';

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

@@ -1,8 +1,10 @@
 import type { Props } from 'aeico';
 import AeicoComponent from '../aeico-component';
+import type { TabVariant } from './defines';
 declare class Tabs extends AeicoComponent {
     static props: Props;
     activeIndex?: number;
+    variant?: TabVariant;
     protected static styles: string[];
     private _observer;
     private get _tabs();
@@ -11,6 +13,7 @@ declare class Tabs extends AeicoComponent {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected onUpdated(): void;
+    private _syncVariant;
     private _handleTabClick;
     private _syncActive;
     selectTab(index: number): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeico-components",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Built-in UI components for the Aeico Web Components framework",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/card/defines.ts

@@ -1,4 +1,4 @@
-export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined';
+export type CardVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';
 export type CardColor =
   | 'default'
   | 'primary'