aeico-components 0.1.7 → 0.1.8

package/dist/chunks/button-group.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-group.cjs","sources":["../../src/button-group/button-group.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport buttonGroupStyle from '../styles/components/button-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport Button from '../button/button';\nimport DropdownButton from '../dropdown/dropdown-button';\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,\n * `size`, and `disabled` props to each child. Supports a `compact` mode that\n * joins buttons into a seamless connected strip (like Bootstrap's button group).\n *\n * @example\n * ```html\n * <!-- Loose group (gap between buttons) -->\n * <ae-button-group variant=\"outlined\" color=\"primary\">\n *   <ae-button>One</ae-button>\n *   <ae-button>Two</ae-button>\n *   <ae-button>Three</ae-button>\n * </ae-button-group>\n *\n * <!-- Compact — joined strip -->\n * <ae-button-group compact color=\"primary\">\n *   <ae-button>Left</ae-button>\n *   <ae-button>Middle</ae-button>\n *   <ae-button>Right</ae-button>\n * </ae-button-group>\n *\n * <!-- Full-width -->\n * <ae-button-group block color=\"danger\" variant=\"outlined\">\n *   <ae-button>Delete</ae-button>\n *   <ae-button>Archive</ae-button>\n * </ae-button-group>\n * ```\n */\nclass ButtonGroup extends AeicoComponent {\n  static props: Props = {\n    variant: { type: String },\n    color: { type: String },\n    size: { type: String },\n    compact: { type: Boolean },\n    block: { type: Boolean },\n    disabled: { type: Boolean },\n  };\n\n  protected static styles = [styleVariables, buttonGroupStyle];\n\n  declare variant?: ButtonVariant;\n  declare color?: ButtonColor;\n  declare size?: ButtonSize;\n  declare compact?: boolean;\n  declare block?: boolean;\n  declare disabled?: boolean;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.variant === undefined) this.variant = 'filled';\n    if (this.color === undefined) this.color = 'default';\n    if (this.size === undefined) this.size = 'md';\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  private _getButtons(): Array<Button | DropdownButton> {\n    if (!this.slotEl) return [];\n\n    return (\n      this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>\n    ).filter((el) => {\n      const tag = el.tagName.toLowerCase();\n      return tag === 'ae-button' || tag === 'ae-dropdown-button';\n    });\n  }\n\n  private _syncChildren() {\n    const buttons = this._getButtons();\n    const r = this.size === 'xs' || this.size === 'sm' ? 3 : 4;\n\n    buttons.forEach((btn: Button | DropdownButton, i) => {\n      btn.variant = this.variant;\n      btn.color = this.color;\n      btn.size = this.size;\n\n      if (this.disabled) {\n        btn.disabled = true;\n      } else {\n        btn.disabled = false;\n      }\n\n      if (this.compact) {\n        const isFirst = i === 0;\n        const isLast = i === buttons.length - 1;\n\n        // Overlap adjacent borders by pulling non-first buttons left 1px\n        btn.style.marginLeft = isFirst ? '' : '-1px';\n\n        // Shape corners: only the outer edges of the strip keep radius\n        btn.style.setProperty('--_btn-r-tl', isFirst ? `${r}px` : '0');\n        btn.style.setProperty('--_btn-r-bl', isFirst ? `${r}px` : '0');\n        btn.style.setProperty('--_btn-r-tr', isLast ? `${r}px` : '0');\n        btn.style.setProperty('--_btn-r-br', isLast ? `${r}px` : '0');\n      } else {\n        btn.style.marginLeft = '';\n        this._clearRadius(btn);\n      }\n    });\n  }\n\n  private _clearRadius(btn: HTMLElement) {\n    btn.style.removeProperty('--_btn-r-tl');\n    btn.style.removeProperty('--_btn-r-tr');\n    btn.style.removeProperty('--_btn-r-br');\n    btn.style.removeProperty('--_btn-r-bl');\n  }\n}\n\nButtonGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-button-group': ButtonGroup;\n  }\n}\n\nexport default ButtonGroup;\nexport type ButtonGroupProps = InferProps<typeof ButtonGroup>;\n"],"names":["AeicoComponent","html","styleVariables"],"mappings":";;;;;;;;AAuCA,MAAM,oBAAoBA,eAAAA,eAAe;AAAA,EAAzC;AAAA;AAmBU,kCAAiC;AAAA;AAAA,EAEzC,oBAAoB;AAClB,UAAM,kBAAA;AAEN,QAAI,KAAK,YAAY,OAAW,MAAK,UAAU;AAC/C,QAAI,KAAK,UAAU,OAAW,MAAK,QAAQ;AAC3C,QAAI,KAAK,SAAS,OAAW,MAAK,OAAO;AAAA,EAC3C;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,WAAW;AACxB,WAAK,SAAS,KAAK;AAAA,QACjB,eAAe,MAAM,KAAK,cAAA;AAAA,MAAc,CACzC;AACD,WAAK,cAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAEQ,cAA8C;AACpD,QAAI,CAAC,KAAK,OAAQ,QAAO,CAAA;AAEzB,WACE,KAAK,OAAO,iBAAiB,EAAE,SAAS,MAAM,EAC9C,OAAO,CAAC,OAAO;AACf,YAAM,MAAM,GAAG,QAAQ,YAAA;AACvB,aAAO,QAAQ,eAAe,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB;AACtB,UAAM,UAAU,KAAK,YAAA;AACrB,UAAM,IAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,OAAO,IAAI;AAEzD,YAAQ,QAAQ,CAAC,KAA8B,MAAM;AACnD,UAAI,UAAU,KAAK;AACnB,UAAI,QAAQ,KAAK;AACjB,UAAI,OAAO,KAAK;AAEhB,UAAI,KAAK,UAAU;AACjB,YAAI,WAAW;AAAA,MACjB,OAAO;AACL,YAAI,WAAW;AAAA,MACjB;AAEA,UAAI,KAAK,SAAS;AAChB,cAAM,UAAU,MAAM;AACtB,cAAM,SAAS,MAAM,QAAQ,SAAS;AAGtC,YAAI,MAAM,aAAa,UAAU,KAAK;AAGtC,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAC5D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAAA,MAC9D,OAAO;AACL,YAAI,MAAM,aAAa;AACvB,aAAK,aAAa,GAAG;AAAA,MACvB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,KAAkB;AACrC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AAAA,EACxC;AACF;AAxFE,cADI,aACG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,OAAO,EAAE,MAAM,QAAA;AAAA,EACf,UAAU,EAAE,MAAM,QAAA;AAAQ;AAG5B,cAVI,aAUa,UAAS,CAACC,UAAAA,WAAgB,gBAAgB;AAiF7D,YAAY,SAAA;;"}

package/dist/chunks/button-group.js

@@ -1,80 +0,0 @@
-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 { v as variables } from "./variables.js";
-import { A as AeicoComponent } from "./aeico-component.js";
-import { html } from "aeico";
-const buttonGroupStyle = ":host {\n  display: inline-flex;\n  align-items: stretch;\n  gap: 8px;\n}\n\n:host([block]) {\n  display: flex;\n  width: 100%;\n}\n\n:host([block]) ::slotted(ae-button) {\n  flex: 1;\n}\n\n:host([compact]) {\n  gap: 0;\n}\n\n/* Raise hovered/focused button so its border shows above neighbours */\n:host([compact]) ::slotted(ae-button:hover),\n:host([compact]) ::slotted(ae-button:focus-within) {\n  position: relative;\n  z-index: 1;\n}\n";
-class ButtonGroup extends AeicoComponent {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "slotEl", null);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.variant === void 0) this.variant = "filled";
-    if (this.color === void 0) this.color = "default";
-    if (this.size === void 0) this.size = "md";
-  }
-  render() {
-    return html(({ slot }) => {
-      this.slotEl = slot({
-        "@slotchange": () => this._syncChildren()
-      });
-      this._syncChildren();
-    });
-  }
-  _getButtons() {
-    if (!this.slotEl) return [];
-    return this.slotEl.assignedElements({ flatten: true }).filter((el) => {
-      const tag = el.tagName.toLowerCase();
-      return tag === "ae-button" || tag === "ae-dropdown-button";
-    });
-  }
-  _syncChildren() {
-    const buttons = this._getButtons();
-    const r = this.size === "xs" || this.size === "sm" ? 3 : 4;
-    buttons.forEach((btn, i) => {
-      btn.variant = this.variant;
-      btn.color = this.color;
-      btn.size = this.size;
-      if (this.disabled) {
-        btn.disabled = true;
-      } else {
-        btn.disabled = false;
-      }
-      if (this.compact) {
-        const isFirst = i === 0;
-        const isLast = i === buttons.length - 1;
-        btn.style.marginLeft = isFirst ? "" : "-1px";
-        btn.style.setProperty("--_btn-r-tl", isFirst ? `${r}px` : "0");
-        btn.style.setProperty("--_btn-r-bl", isFirst ? `${r}px` : "0");
-        btn.style.setProperty("--_btn-r-tr", isLast ? `${r}px` : "0");
-        btn.style.setProperty("--_btn-r-br", isLast ? `${r}px` : "0");
-      } else {
-        btn.style.marginLeft = "";
-        this._clearRadius(btn);
-      }
-    });
-  }
-  _clearRadius(btn) {
-    btn.style.removeProperty("--_btn-r-tl");
-    btn.style.removeProperty("--_btn-r-tr");
-    btn.style.removeProperty("--_btn-r-br");
-    btn.style.removeProperty("--_btn-r-bl");
-  }
-}
-__publicField(ButtonGroup, "props", {
-  variant: { type: String },
-  color: { type: String },
-  size: { type: String },
-  compact: { type: Boolean },
-  block: { type: Boolean },
-  disabled: { type: Boolean }
-});
-__publicField(ButtonGroup, "styles", [variables, buttonGroupStyle]);
-ButtonGroup.register();
-export {
-  ButtonGroup as B
-};
-//# sourceMappingURL=button-group.js.map

package/dist/chunks/button-group.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-group.js","sources":["../../src/button-group/button-group.ts"],"sourcesContent":["import type { InferProps, Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport buttonGroupStyle from '../styles/components/button-group.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { ButtonColor, ButtonVariant, ButtonSize } from '../button';\nimport Button from '../button/button';\nimport DropdownButton from '../dropdown/dropdown-button';\n\n/**\n * ButtonGroup Component\n *\n * Groups multiple `ae-button` elements, propagating shared `variant`, `color`,\n * `size`, and `disabled` props to each child. Supports a `compact` mode that\n * joins buttons into a seamless connected strip (like Bootstrap's button group).\n *\n * @example\n * ```html\n * <!-- Loose group (gap between buttons) -->\n * <ae-button-group variant=\"outlined\" color=\"primary\">\n *   <ae-button>One</ae-button>\n *   <ae-button>Two</ae-button>\n *   <ae-button>Three</ae-button>\n * </ae-button-group>\n *\n * <!-- Compact — joined strip -->\n * <ae-button-group compact color=\"primary\">\n *   <ae-button>Left</ae-button>\n *   <ae-button>Middle</ae-button>\n *   <ae-button>Right</ae-button>\n * </ae-button-group>\n *\n * <!-- Full-width -->\n * <ae-button-group block color=\"danger\" variant=\"outlined\">\n *   <ae-button>Delete</ae-button>\n *   <ae-button>Archive</ae-button>\n * </ae-button-group>\n * ```\n */\nclass ButtonGroup extends AeicoComponent {\n  static props: Props = {\n    variant: { type: String },\n    color: { type: String },\n    size: { type: String },\n    compact: { type: Boolean },\n    block: { type: Boolean },\n    disabled: { type: Boolean },\n  };\n\n  protected static styles = [styleVariables, buttonGroupStyle];\n\n  declare variant?: ButtonVariant;\n  declare color?: ButtonColor;\n  declare size?: ButtonSize;\n  declare compact?: boolean;\n  declare block?: boolean;\n  declare disabled?: boolean;\n\n  private slotEl: HTMLSlotElement | null = null;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    if (this.variant === undefined) this.variant = 'filled';\n    if (this.color === undefined) this.color = 'default';\n    if (this.size === undefined) this.size = 'md';\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  private _getButtons(): Array<Button | DropdownButton> {\n    if (!this.slotEl) return [];\n\n    return (\n      this.slotEl.assignedElements({ flatten: true }) as Array<Button | DropdownButton>\n    ).filter((el) => {\n      const tag = el.tagName.toLowerCase();\n      return tag === 'ae-button' || tag === 'ae-dropdown-button';\n    });\n  }\n\n  private _syncChildren() {\n    const buttons = this._getButtons();\n    const r = this.size === 'xs' || this.size === 'sm' ? 3 : 4;\n\n    buttons.forEach((btn: Button | DropdownButton, i) => {\n      btn.variant = this.variant;\n      btn.color = this.color;\n      btn.size = this.size;\n\n      if (this.disabled) {\n        btn.disabled = true;\n      } else {\n        btn.disabled = false;\n      }\n\n      if (this.compact) {\n        const isFirst = i === 0;\n        const isLast = i === buttons.length - 1;\n\n        // Overlap adjacent borders by pulling non-first buttons left 1px\n        btn.style.marginLeft = isFirst ? '' : '-1px';\n\n        // Shape corners: only the outer edges of the strip keep radius\n        btn.style.setProperty('--_btn-r-tl', isFirst ? `${r}px` : '0');\n        btn.style.setProperty('--_btn-r-bl', isFirst ? `${r}px` : '0');\n        btn.style.setProperty('--_btn-r-tr', isLast ? `${r}px` : '0');\n        btn.style.setProperty('--_btn-r-br', isLast ? `${r}px` : '0');\n      } else {\n        btn.style.marginLeft = '';\n        this._clearRadius(btn);\n      }\n    });\n  }\n\n  private _clearRadius(btn: HTMLElement) {\n    btn.style.removeProperty('--_btn-r-tl');\n    btn.style.removeProperty('--_btn-r-tr');\n    btn.style.removeProperty('--_btn-r-br');\n    btn.style.removeProperty('--_btn-r-bl');\n  }\n}\n\nButtonGroup.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-button-group': ButtonGroup;\n  }\n}\n\nexport default ButtonGroup;\nexport type ButtonGroupProps = InferProps<typeof ButtonGroup>;\n"],"names":["styleVariables"],"mappings":";;;;;;;AAuCA,MAAM,oBAAoB,eAAe;AAAA,EAAzC;AAAA;AAmBU,kCAAiC;AAAA;AAAA,EAEzC,oBAAoB;AAClB,UAAM,kBAAA;AAEN,QAAI,KAAK,YAAY,OAAW,MAAK,UAAU;AAC/C,QAAI,KAAK,UAAU,OAAW,MAAK,QAAQ;AAC3C,QAAI,KAAK,SAAS,OAAW,MAAK,OAAO;AAAA,EAC3C;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,WAAW;AACxB,WAAK,SAAS,KAAK;AAAA,QACjB,eAAe,MAAM,KAAK,cAAA;AAAA,MAAc,CACzC;AACD,WAAK,cAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA,EAEQ,cAA8C;AACpD,QAAI,CAAC,KAAK,OAAQ,QAAO,CAAA;AAEzB,WACE,KAAK,OAAO,iBAAiB,EAAE,SAAS,MAAM,EAC9C,OAAO,CAAC,OAAO;AACf,YAAM,MAAM,GAAG,QAAQ,YAAA;AACvB,aAAO,QAAQ,eAAe,QAAQ;AAAA,IACxC,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB;AACtB,UAAM,UAAU,KAAK,YAAA;AACrB,UAAM,IAAI,KAAK,SAAS,QAAQ,KAAK,SAAS,OAAO,IAAI;AAEzD,YAAQ,QAAQ,CAAC,KAA8B,MAAM;AACnD,UAAI,UAAU,KAAK;AACnB,UAAI,QAAQ,KAAK;AACjB,UAAI,OAAO,KAAK;AAEhB,UAAI,KAAK,UAAU;AACjB,YAAI,WAAW;AAAA,MACjB,OAAO;AACL,YAAI,WAAW;AAAA,MACjB;AAEA,UAAI,KAAK,SAAS;AAChB,cAAM,UAAU,MAAM;AACtB,cAAM,SAAS,MAAM,QAAQ,SAAS;AAGtC,YAAI,MAAM,aAAa,UAAU,KAAK;AAGtC,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,UAAU,GAAG,CAAC,OAAO,GAAG;AAC7D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAC5D,YAAI,MAAM,YAAY,eAAe,SAAS,GAAG,CAAC,OAAO,GAAG;AAAA,MAC9D,OAAO;AACL,YAAI,MAAM,aAAa;AACvB,aAAK,aAAa,GAAG;AAAA,MACvB;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,aAAa,KAAkB;AACrC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AACtC,QAAI,MAAM,eAAe,aAAa;AAAA,EACxC;AACF;AAxFE,cADI,aACG,SAAe;AAAA,EACpB,SAAS,EAAE,MAAM,OAAA;AAAA,EACjB,OAAO,EAAE,MAAM,OAAA;AAAA,EACf,MAAM,EAAE,MAAM,OAAA;AAAA,EACd,SAAS,EAAE,MAAM,QAAA;AAAA,EACjB,OAAO,EAAE,MAAM,QAAA;AAAA,EACf,UAAU,EAAE,MAAM,QAAA;AAAQ;AAG5B,cAVI,aAUa,UAAS,CAACA,WAAgB,gBAAgB;AAiF7D,YAAY,SAAA;"}

package/dist/chunks/button.cjs

@@ -1,337 +0,0 @@
-"use strict";
-const variables = require("./variables.cjs");
-const size = require("./size.cjs");
-const color = require("./color.cjs");
-const aeicoComponent = require("./aeico-component.cjs");
-const aeico = require("aeico");
-const buttonStyle = `:host {
-  display: inline-block;
-}
-
-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-family: inherit;
-  font-weight: 400;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  user-select: none;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  outline: none;
-  position: relative;
-  padding: 0.429em 1.071em;
-  font-size: 1em;
-  line-height: 1.5;
-  border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));
-  min-width: 4.571em;
-  height: 2.286em;
-  width: 100%;
-
-  background:   var(--ae-color-solid);
-  border: 1px solid var(--ae-color-solid);
-  color:        var(--ae-color-on-solid);
-}
-
-button:focus  { outline: none; }
-button:active { transform: translateY(1px); }
-
-button:hover:not(:disabled) {
-  background:   var(--ae-color-solid-hover);
-  border-color: var(--ae-color-border-hover);
-  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
-}
-
-button:active:not(:disabled) { background: var(--ae-color-solid-active); }
-
-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-:host([size="xs"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
-:host([size="sm"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
-
-/* --- Variants --- */
-
-:host([variant="outlined"]) button {
-  background:   transparent;
-  border-color: var(--ae-color-border);
-  color:        var(--ae-color-accent);
-}
-
-:host([variant="outlined"]) button:hover:not(:disabled) {
-  background:   var(--ae-color-subtle);
-  border-color: var(--ae-color-border-hover);
-  color:        var(--ae-color-accent-hover);
-}
-
-:host([variant="outlined"]) button:active:not(:disabled) {
-  background: var(--ae-color-subtle-hover);
-}
-
-:host([variant="subtle"]) button {
-  background:   var(--ae-color-subtle);
-  border-color: transparent;
-  color:        var(--ae-color-accent);
-}
-
-:host([variant="subtle"]) button:hover:not(:disabled) {
-  background: var(--ae-color-subtle-hover);
-  color:      var(--ae-color-accent-hover);
-}
-
-:host([variant="subtle"]) button:active:not(:disabled) {
-  background: var(--ae-color-subtle-hover);
-}
-
-:host([variant="faint"]) button {
-  background:   var(--ae-color-subtle);
-  border-color: var(--ae-color-border);
-  color:        var(--ae-color-accent);
-}
-
-:host([variant="faint"]) button:hover:not(:disabled) {
-  background:   var(--ae-color-subtle-hover);
-  border-color: var(--ae-color-border-hover);
-  color:        var(--ae-color-accent-hover);
-}
-
-:host([variant="faint"]) button:active:not(:disabled) {
-  background: var(--ae-color-subtle-hover);
-}
-
-:host([variant="text"]) button {
-  background:   transparent;
-  border-color: transparent;
-  color:        var(--ae-color-accent);
-  min-width:     auto;
-  padding-left:  4px;
-  padding-right: 4px;
-}
-
-:host([variant="text"]) button:hover:not(:disabled) {
-  background: var(--ae-color-subtle);
-  color:      var(--ae-color-accent-hover);
-}
-
-:host([variant="text"]) button:active:not(:disabled) {
-  background: var(--ae-color-subtle-hover);
-}
-
-/* Icon-only: single ae-icon child → square compact layout */
-:host([icon-only]) {
-  display: inline-flex;
-}
-
-:host([icon-only]:not([size])) {
-  font-size: var(--ae-size-m);
-}
-
-:host([icon-only]) button {
-  padding:   0;
-  min-width: auto;
-  width:     2.286em;
-  height:    2.286em;
-  line-height: 1;
-}
-
-:host([icon-only]) ::slotted(ae-icon) {
-  font-size: 1.5em;
-}
-
-:host([active]) button {
-  background:   var(--ae-color-solid-active);
-  border-color: var(--ae-color-border-hover);
-  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
-}
-
-.btn-icon {
-  padding: 0;
-  min-width: auto;
-  width: 2.286em;
-  height: 2.286em;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--ae-radius-sm);
-}
-
-.btn-icon.btn-lg {
-  width: 2.857em;
-  height: 2.857em;
-}
-
-.btn-circle {
-  border-radius: var(--ae-radius-circle);
-}
-
-:host([block]) {
-  display: block;
-}
-
-button.btn-loading {
-  position: relative;
-  pointer-events: none;
-  color: transparent;
-}
-
-button.btn-loading::before {
-  content: '';
-  position: absolute;
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-top-color: transparent;
-  border-radius: var(--ae-radius-circle);
-  animation: btn-spin 0.6s linear infinite;
-  color: currentColor;
-  opacity: 0.8;
-}
-
-@keyframes btn-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.btn-icon-left {
-  margin-right: -2px;
-}
-
-.btn-icon-right {
-  margin-left: -2px;
-}
-
-`;
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var it, done, ctx, access, k = flags & 7, s = false, p = false;
-  var j = array.length + 1;
-  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
-  target = target.prototype, k < 5;
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
-      access.get = (x) => x[name];
-      access.set = (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(void 0, ctx), done._ = 1;
-    __expectFn(it) && initializers.unshift(it);
-  }
-  return target;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _block_dec, _active_dec, _type_dec, _disabled_dec, _size_dec, _variant_dec, _color_dec, _a, _init;
-class Button extends (_a = aeicoComponent.AeicoComponent, _color_dec = [aeico.prop({ type: String })], _variant_dec = [aeico.prop({ type: String })], _size_dec = [aeico.prop({ type: String })], _disabled_dec = [aeico.prop({ type: Boolean })], _type_dec = [aeico.prop({ type: String })], _active_dec = [aeico.prop({ type: Boolean })], _block_dec = [aeico.prop({ type: Boolean })], _a) {
-  constructor() {
-    super(...arguments);
-    __publicField(this, "color", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    __publicField(this, "variant", __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __publicField(this, "size", __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
-    __publicField(this, "disabled", __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
-    __publicField(this, "type", __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
-    __publicField(this, "active", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
-    __publicField(this, "block", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
-    __publicField(this, "_buttonElement", null);
-    __publicField(this, "_slotElement", null);
-    __publicField(this, "_autoAriaLabel", false);
-    __publicField(this, "_handleSlotChange", () => {
-      var _a2;
-      const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes()) ?? [];
-      const elements = nodes.filter((n) => n.nodeType === Node.ELEMENT_NODE);
-      const hasText = nodes.some(
-        (n) => n.nodeType === Node.TEXT_NODE && n.textContent.trim() !== ""
-      );
-      const isIconOnly = !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === "ae-icon";
-      if (isIconOnly) {
-        this.setAttribute("icon-only", "");
-        if (!this.hasAttribute("aria-label") || this._autoAriaLabel) {
-          this.setAttribute("aria-label", elements[0].getAttribute("name") ?? "");
-          this._autoAriaLabel = true;
-        }
-      } else {
-        this.removeAttribute("icon-only");
-        if (this._autoAriaLabel) {
-          this.removeAttribute("aria-label");
-          this._autoAriaLabel = false;
-        }
-      }
-    });
-  }
-  onMounted() {
-    this._handleSlotChange();
-  }
-  render() {
-    return aeico.html(({ button, slot }) => {
-      this._buttonElement = button(
-        {
-          type: this.type || "button",
-          disabled: this.disabled,
-          part: "button",
-          "aria-pressed": this.active,
-          "aria-disabled": this.disabled
-        },
-        () => {
-          this._slotElement = slot({ "@slotchange": this._handleSlotChange });
-        }
-      );
-    });
-  }
-  /**
-   * Programmatically click the button
-   */
-  click() {
-    if (!this.disabled && this._buttonElement) {
-      this._buttonElement.click();
-    }
-  }
-  /**
-   * Focus the button
-   */
-  focus() {
-    if (this._buttonElement) {
-      this._buttonElement.focus();
-    }
-  }
-  /**
-   * Blur the button
-   */
-  blur() {
-    if (this._buttonElement) {
-      this._buttonElement.blur();
-    }
-  }
-}
-_init = __decoratorStart(_a);
-__decorateElement(_init, 5, "color", _color_dec, Button);
-__decorateElement(_init, 5, "variant", _variant_dec, Button);
-__decorateElement(_init, 5, "size", _size_dec, Button);
-__decorateElement(_init, 5, "disabled", _disabled_dec, Button);
-__decorateElement(_init, 5, "type", _type_dec, Button);
-__decorateElement(_init, 5, "active", _active_dec, Button);
-__decorateElement(_init, 5, "block", _block_dec, Button);
-__decoratorMetadata(_init, Button);
-__publicField(Button, "styles", [variables.variables, size.sizeCSS, color.colorCSS, buttonStyle]);
-Button.register();
-exports.Button = Button;
-//# sourceMappingURL=button.cjs.map

package/dist/chunks/button.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.cjs","sources":["../../src/button/button.ts"],"sourcesContent":["import type { InferProps } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport colorCSS from '../styles/color.css?inline';\nimport buttonStyle from '../styles/components/button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { ButtonColor, ButtonSize, ButtonVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Button Component\n *\n * A customizable button component with multiple variants and sizes.\n * Supports theme and internationalization through mixins.\n *\n * @example\n * ```typescript\n * // Using the static create method\n * const button = Button.create({\n *   variant: 'primary',\n *   size: 'md'\n * })\n * ```\n *\n * @example\n * ```html\n * <!-- Using as Web Component -->\n * <ae-button variant=\"primary\" size=\"md\">Save</ae-button>\n * <ae-button variant=\"danger\" size=\"sm\">Delete</ae-button>\n * <ae-button variant=\"subtle\">Cancel</ae-button>\n * ```\n */\nclass Button extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, buttonStyle];\n\n  @prop({ type: String })\n  color?: ButtonColor;\n\n  @prop({ type: String })\n  variant?: ButtonVariant;\n\n  @prop({ type: String })\n  size?: ButtonSize;\n\n  @prop({ type: Boolean })\n  disabled?: boolean;\n\n  @prop({ type: String })\n  type?: 'button' | 'submit' | 'reset';\n\n  @prop({ type: Boolean })\n  active?: boolean;\n\n  @prop({ type: Boolean })\n  block?: boolean;\n\n  private _buttonElement: HTMLButtonElement | null = null;\n  private _slotElement: HTMLSlotElement | null = null;\n  private _autoAriaLabel = false;\n\n  protected onMounted() {\n    this._handleSlotChange();\n  }\n\n  private _handleSlotChange = () => {\n    const nodes = this._slotElement?.assignedNodes() ?? [];\n    // Icon-only: exactly one element (ae-icon) and no meaningful text nodes\n    const elements = nodes.filter((n): n is Element => n.nodeType === Node.ELEMENT_NODE);\n    const hasText = nodes.some(\n      (n) => n.nodeType === Node.TEXT_NODE && n.textContent!.trim() !== '',\n    );\n    const isIconOnly =\n      !hasText && elements.length === 1 && elements[0].tagName.toLowerCase() === 'ae-icon';\n\n    if (isIconOnly) {\n      this.setAttribute('icon-only', '');\n      if (!this.hasAttribute('aria-label') || this._autoAriaLabel) {\n        this.setAttribute('aria-label', elements[0].getAttribute('name') ?? '');\n        this._autoAriaLabel = true;\n      }\n    } else {\n      this.removeAttribute('icon-only');\n      if (this._autoAriaLabel) {\n        this.removeAttribute('aria-label');\n        this._autoAriaLabel = false;\n      }\n    }\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      this._buttonElement = button(\n        {\n          type: this.type || 'button',\n          disabled: this.disabled,\n          part: 'button',\n          'aria-pressed': this.active,\n          'aria-disabled': this.disabled,\n        },\n        () => {\n          this._slotElement = slot({ '@slotchange': this._handleSlotChange });\n        },\n      );\n    });\n  }\n\n  /**\n   * Programmatically click the button\n   */\n  click() {\n    if (!this.disabled && this._buttonElement) {\n      this._buttonElement.click();\n    }\n  }\n\n  /**\n   * Focus the button\n   */\n  focus() {\n    if (this._buttonElement) {\n      this._buttonElement.focus();\n    }\n  }\n\n  /**\n   * Blur the button\n   */\n  blur() {\n    if (this._buttonElement) {\n      this._buttonElement.blur();\n    }\n  }\n}\n\nButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-button': Button;\n  }\n}\n\nexport default Button;\nexport type ButtonProps = InferProps<typeof Button>;\n"],"names":["prop","_a","html","styleVariables","sizeCSS","colorCSS"],"mappings":"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"}