aeico-components 0.1.6 → 0.1.7

package/dist/chunks/button.cjs.map

@@ -1 +1 @@
-{"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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"}
+{"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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"}

package/dist/chunks/button.js

@@ -5,17 +5,6 @@ import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
 const buttonStyle = `:host {
   display: inline-block;
-  --btn-solid-bg:          var(--color-solid);
-  --btn-solid-bg-hover:    var(--color-solid-hover);
-  --btn-solid-bg-active:   var(--color-solid-active);
-  --btn-solid-color:       var(--color-on-solid);
-  --btn-solid-color-hover: var(--color-on-solid-hover);
-  --btn-border:            var(--color-border);
-  --btn-border-hover:      var(--color-border-hover);
-  --btn-accent:            var(--color-accent);
-  --btn-accent-hover:      var(--color-accent-hover);
-  --btn-subtle-bg:         var(--color-subtle);
-  --btn-subtle-bg-hover:   var(--color-subtle-hover);
 }
 
 button {
@@ -36,100 +25,100 @@ button {
   padding: 0.429em 1.071em;
   font-size: 1em;
   line-height: 1.5;
-  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
+  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(--btn-solid-bg);
-  border: 1px solid var(--btn-solid-bg);
-  color:        var(--btn-solid-color);
+  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(--btn-solid-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+  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(--btn-solid-bg-active); }
+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(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+: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(--btn-border);
-  color:        var(--btn-accent);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="outlined"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
+  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(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="subtle"]) button {
-  background:   var(--btn-subtle-bg);
+  background:   var(--ae-color-subtle);
   border-color: transparent;
-  color:        var(--btn-accent);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="subtle"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-  color:      var(--btn-accent-hover);
+  background: var(--ae-color-subtle-hover);
+  color:      var(--ae-color-accent-hover);
 }
 
 :host([variant="subtle"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="faint"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
+  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(--btn-subtle-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
+  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(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="text"]) button {
   background:   transparent;
   border-color: transparent;
-  color:        var(--btn-accent);
+  color:        var(--ae-color-accent);
   min-width:     auto;
   padding-left:  4px;
   padding-right: 4px;
 }
 
 :host([variant="text"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg);
-  color:      var(--btn-accent-hover);
+  background: var(--ae-color-subtle);
+  color:      var(--ae-color-accent-hover);
 }
 
 :host([variant="text"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 /* Icon-only: single ae-icon child → square compact layout */
@@ -138,7 +127,7 @@ button:disabled {
 }
 
 :host([icon-only]:not([size])) {
-  font-size: var(--size-m);
+  font-size: var(--ae-size-m);
 }
 
 :host([icon-only]) button {
@@ -154,9 +143,9 @@ button:disabled {
 }
 
 :host([active]) button {
-  background:   var(--btn-solid-bg-active);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+  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 {
@@ -167,7 +156,7 @@ button:disabled {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--ae-radius-sm);
 }
 
 .btn-icon.btn-lg {
@@ -176,7 +165,7 @@ button:disabled {
 }
 
 .btn-circle {
-  border-radius: 50%;
+  border-radius: var(--ae-radius-circle);
 }
 
 :host([block]) {
@@ -196,7 +185,7 @@ button.btn-loading::before {
   height: 1em;
   border: 2px solid currentColor;
   border-top-color: transparent;
-  border-radius: 50%;
+  border-radius: var(--ae-radius-circle);
   animation: btn-spin 0.6s linear infinite;
   color: currentColor;
   opacity: 0.8;

package/dist/chunks/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","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":["_a","styleVariables"],"mappings":"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"}
+{"version":3,"file":"button.js","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":["_a","styleVariables"],"mappings":"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"}

package/dist/chunks/card.cjs

@@ -3,7 +3,7 @@ const variables = require("./variables.cjs");
 const color = require("./color.cjs");
 const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
-const cardStyle = ':host {\n  display: block;\n\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n  --card-border:  transparent;\n  --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n  --card-bg:      var(--color-solid);\n  --card-color:   var(--color-on-solid);\n  --card-border:  var(--color-solid);\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n  --card-bg:      transparent;\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border);\n  --card-divider: var(--color-border-subtle);\n}\n\n.card {\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  background: var(--card-bg);\n  color: var(--card-color);\n  overflow: hidden;\n}\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--card-divider);\n}\n\n.body {\n  padding: 16px;\n}\n';
+const cardStyle = ':host {\n  display: block;\n}\n\n.card {\n  border: 1px solid var(--ae-color-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-lg));\n  background: var(--ae-color-bg-subtle);\n  color: var(--ae-color-text-subtle);\n  overflow: hidden;\n}\n\n/* variant overrides */\n:host([variant="faint"]) .card {\n  border-color: var(--ae-color-border-subtle);\n  background: var(--ae-color-bg-subtle);\n  color: var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .card {\n  border-color: transparent;\n}\n\n:host([variant="subtle"]) .header { border-bottom-color: transparent; }\n:host([variant="subtle"]) .footer { border-top-color: transparent; }\n\n:host([variant="filled"]) .card {\n  border-color: var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n}\n\n:host([variant="filled"]) .header {\n  border-bottom-color: color-mix(in srgb, var(--ae-color-solid), black 15%);\n}\n\n:host([variant="filled"]) .footer {\n  border-top-color: color-mix(in srgb, var(--ae-color-solid), black 15%);\n}\n\n:host([variant="outlined"]) .card {\n  border-color: var(--ae-color-border);\n  background: transparent;\n  color: var(--ae-color-text-subtle);\n}\n\n:host([variant="outlined"]) .header { border-bottom-color: var(--ae-color-border-subtle); }\n:host([variant="outlined"]) .footer { border-top-color: var(--ae-color-border-subtle); }\n\n:host([variant="text"]) .card {\n  border-color: transparent;\n  background: transparent;\n  color: var(--ae-color-text-main);\n}\n\n:host([variant="text"]) .header { border-bottom-color: transparent; color: var(--ae-color-accent); }\n:host([variant="text"]) .footer { border-top-color: transparent; color: var(--ae-color-accent); }\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--ae-color-border-subtle);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--ae-color-border-subtle);\n}\n\n.body {\n  padding: 16px;\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/card.js

@@ -2,7 +2,7 @@ import { v as variables } from "./variables.js";
 import { c as colorCSS } from "./color.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
-const cardStyle = ':host {\n  display: block;\n\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="faint"]) {\n  --card-bg:      var(--color-bg-subtle);\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border-subtle);\n  --card-divider: var(--color-border-subtle);\n}\n\n:host([variant="subtle"]) {\n  --card-border:  transparent;\n  --card-divider: transparent;\n}\n\n:host([variant="filled"]) {\n  --card-bg:      var(--color-solid);\n  --card-color:   var(--color-on-solid);\n  --card-border:  var(--color-solid);\n  --card-divider: color-mix(in srgb, var(--color-solid), black 15%);\n}\n\n:host([variant="outlined"]) {\n  --card-bg:      transparent;\n  --card-color:   var(--color-text-subtle);\n  --card-border:  var(--color-border);\n  --card-divider: var(--color-border-subtle);\n}\n\n.card {\n  border: 1px solid var(--card-border);\n  border-radius: 8px;\n  background: var(--card-bg);\n  color: var(--card-color);\n  overflow: hidden;\n}\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--card-divider);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--card-divider);\n}\n\n.body {\n  padding: 16px;\n}\n';
+const cardStyle = ':host {\n  display: block;\n}\n\n.card {\n  border: 1px solid var(--ae-color-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-lg));\n  background: var(--ae-color-bg-subtle);\n  color: var(--ae-color-text-subtle);\n  overflow: hidden;\n}\n\n/* variant overrides */\n:host([variant="faint"]) .card {\n  border-color: var(--ae-color-border-subtle);\n  background: var(--ae-color-bg-subtle);\n  color: var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .card {\n  border-color: transparent;\n}\n\n:host([variant="subtle"]) .header { border-bottom-color: transparent; }\n:host([variant="subtle"]) .footer { border-top-color: transparent; }\n\n:host([variant="filled"]) .card {\n  border-color: var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n}\n\n:host([variant="filled"]) .header {\n  border-bottom-color: color-mix(in srgb, var(--ae-color-solid), black 15%);\n}\n\n:host([variant="filled"]) .footer {\n  border-top-color: color-mix(in srgb, var(--ae-color-solid), black 15%);\n}\n\n:host([variant="outlined"]) .card {\n  border-color: var(--ae-color-border);\n  background: transparent;\n  color: var(--ae-color-text-subtle);\n}\n\n:host([variant="outlined"]) .header { border-bottom-color: var(--ae-color-border-subtle); }\n:host([variant="outlined"]) .footer { border-top-color: var(--ae-color-border-subtle); }\n\n:host([variant="text"]) .card {\n  border-color: transparent;\n  background: transparent;\n  color: var(--ae-color-text-main);\n}\n\n:host([variant="text"]) .header { border-bottom-color: transparent; color: var(--ae-color-accent); }\n:host([variant="text"]) .footer { border-top-color: transparent; color: var(--ae-color-accent); }\n\n.header,\n.footer {\n  display: none;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 500;\n}\n\n:host([has-header]) .header {\n  display: block;\n  border-bottom: 1px solid var(--ae-color-border-subtle);\n}\n\n:host([has-footer]) .footer {\n  display: block;\n  border-top: 1px solid var(--ae-color-border-subtle);\n}\n\n.body {\n  padding: 16px;\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/chunks/checkbox.cjs

@@ -7,7 +7,7 @@ const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
 const color = require("./color.cjs");
-const styles = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-radius: 2px;\n  --checkbox-border-color: var(--border-subtle);\n  --checkbox-bg: var(--surface-base);\n  --checkbox-accent-color: var(--color-solid);\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  background: var(--checkbox-bg);\n  accent-color: var(--checkbox-accent-color);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Error state */\n:host([error]) .field-input {\n  outline: 2px solid var(--field-error-color, var(--red));\n  outline-offset: 1px;\n}\n";
+const styles = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-color: var(--ae-border-subtle);\n  --checkbox-bg: var(--ae-surface-base);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--checkbox-bg);\n  accent-color: var(--ae-color-solid);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Error state */\n:host([error]) .field-input {\n  outline: 2px solid var(--field-error-color, var(--ae-red));\n  outline-offset: 1px;\n}\n";
 class Checkbox extends actionButton.AeicoField {
   constructor() {
     super(...arguments);

package/dist/chunks/checkbox.js

@@ -6,7 +6,7 @@ import { html } from "aeico";
 import { v as variables } from "./variables.js";
 import { s as sizeCSS } from "./size.js";
 import { c as colorCSS } from "./color.js";
-const styles = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-radius: 2px;\n  --checkbox-border-color: var(--border-subtle);\n  --checkbox-bg: var(--surface-base);\n  --checkbox-accent-color: var(--color-solid);\n\n  /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */\n  --color-solid: var(--color-primary);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--checkbox-border-radius);\n  background: var(--checkbox-bg);\n  accent-color: var(--checkbox-accent-color);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Error state */\n:host([error]) .field-input {\n  outline: 2px solid var(--field-error-color, var(--red));\n  outline-offset: 1px;\n}\n";
+const styles = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  /* Layout */\n  --checkbox-field-gap: 4px;\n\n  /* Checkbox */\n  --checkbox-size: 1.167em;\n  --checkbox-border-width: 1px;\n  --checkbox-border-color: var(--ae-border-subtle);\n  --checkbox-bg: var(--ae-surface-base);\n}\n\n.checkbox-container {\n  display: flex;\n  align-items: center;\n  gap: var(--checkbox-field-gap);\n  width: 100%;\n}\n\n.checkbox-wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.field-input {\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  cursor: pointer;\n  border: var(--checkbox-border-width) solid var(--checkbox-border-color);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--checkbox-bg);\n  accent-color: var(--ae-color-solid);\n  margin: 0;\n  flex-shrink: 0;\n}\n\n.field-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Error state */\n:host([error]) .field-input {\n  outline: 2px solid var(--field-error-color, var(--ae-red));\n  outline-offset: 1px;\n}\n";
 class Checkbox extends AeicoField {
   constructor() {
     super(...arguments);

package/dist/chunks/color.cjs

@@ -1,4 +1,4 @@
 "use strict";
-const colorCSS = ':host {\n  --color-solid:           var(--color-gray);\n  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\n  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));\n  --color-on-solid:        var(--color-text-main);\n  --color-border:          var(--color-gray);\n  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));\n  --color-accent:          var(--color-text-muted);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--border-subtle);\n  --color-subtle-hover:    var(--border-default);\n  --color-bg-subtle:       var(--border-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--border-default);\n}\n\n:host([color="primary"]) {\n  --color-solid:           var(--color-primary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-primary);\n  --color-accent:          var(--color-text-link);\n  --color-accent-hover:    var(--color-text-link-hover);\n  --color-subtle:          var(--color-primary-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);\n  --color-bg-subtle:       var(--color-primary-bg-subtle);\n  --color-text-subtle:     var(--color-primary-text-emphasis);\n  --color-border-subtle:   var(--color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --color-solid:           var(--color-secondary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-secondary-hover);\n  --color-accent:          var(--color-secondary-text-emphasis);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          rgb(from var(--slate) r g b / 0.06);\n  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);\n  --color-bg-subtle:       var(--color-secondary-bg-subtle);\n  --color-text-subtle:     var(--color-secondary-text-emphasis);\n  --color-border-subtle:   var(--color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --color-solid:           var(--color-success);\n  --color-on-solid:        white;\n  --color-border:          var(--color-success);\n  --color-accent:          var(--color-success-text-emphasis);\n  --color-accent-hover:    var(--color-success-hover);\n  --color-subtle:          var(--color-success-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);\n  --color-bg-subtle:       var(--color-success-bg-subtle);\n  --color-text-subtle:     var(--color-success-text-emphasis);\n  --color-border-subtle:   var(--color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --color-solid:           var(--color-danger);\n  --color-on-solid:        white;\n  --color-border:          var(--color-danger);\n  --color-accent:          var(--color-danger-text-emphasis);\n  --color-accent-hover:    var(--color-danger-hover);\n  --color-subtle:          var(--color-danger-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);\n  --color-bg-subtle:       var(--color-danger-bg-subtle);\n  --color-text-subtle:     var(--color-danger-text-emphasis);\n  --color-border-subtle:   var(--color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --color-solid:           var(--color-warning);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--color-warning);\n  --color-accent:          var(--color-warning-text-emphasis);\n  --color-accent-hover:    var(--color-warning-hover);\n  --color-subtle:          var(--color-warning-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);\n  --color-bg-subtle:       var(--color-warning-bg-subtle);\n  --color-text-subtle:     var(--color-warning-text-emphasis);\n  --color-border-subtle:   var(--color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --color-solid:           var(--color-info);\n  --color-on-solid:        white;\n  --color-border:          var(--color-info);\n  --color-accent:          var(--color-info-text-emphasis);\n  --color-accent-hover:    var(--color-info-hover);\n  --color-subtle:          var(--color-info-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);\n  --color-bg-subtle:       var(--color-info-bg-subtle);\n  --color-text-subtle:     var(--color-info-text-emphasis);\n  --color-border-subtle:   var(--color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --color-solid:           var(--light);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--border-hover);\n  --color-subtle:          var(--color-light-bg-subtle);\n  --color-subtle-hover:    var(--color-light-border-subtle);\n  --color-bg-subtle:       var(--color-light-bg-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --color-solid:           var(--dark-500);\n  --color-on-solid:        white;\n  --color-border:          var(--dark-500);\n  --color-accent:          var(--color-text-main);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--color-dark-bg-subtle);\n  --color-subtle-hover:    var(--color-dark-border-subtle);\n  --color-bg-subtle:       var(--color-dark-bg-subtle);\n  --color-text-subtle:     var(--color-text-main);\n  --color-border-subtle:   var(--color-dark-border-subtle);\n}\n';
+const colorCSS = ':host {\n  --ae-color-solid:           var(--ae-color-gray);\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\n  --ae-color-on-solid:        var(--ae-color-text-main);\n  --ae-color-border:          var(--ae-color-gray);\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\n  --ae-color-accent:          var(--ae-color-text-muted);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          var(--ae-border-subtle);\n  --ae-color-subtle-hover:    var(--ae-border-default);\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\n  --ae-color-border-subtle:   var(--ae-border-default);\n}\n\n:host([color="primary"]) {\n  --ae-color-solid:           var(--ae-color-primary);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-primary);\n  --ae-color-accent:          var(--ae-color-text-link);\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --ae-color-solid:           var(--ae-color-secondary);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-secondary-hover);\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --ae-color-solid:           var(--ae-color-success);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-success);\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --ae-color-solid:           var(--ae-color-danger);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-danger);\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --ae-color-solid:           var(--ae-color-warning);\n  --ae-color-on-solid:        var(--ae-gray-900);\n  --ae-color-border:          var(--ae-color-warning);\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --ae-color-solid:           var(--ae-color-info);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-info);\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --ae-color-solid:           var(--ae-light);\n  --ae-color-on-solid:        var(--ae-gray-900);\n  --ae-color-border:          var(--ae-border-hover);\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --ae-color-solid:           var(--ae-dark-500);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-dark-500);\n  --ae-color-accent:          var(--ae-color-text-main);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-main);\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\n}\n';
 exports.colorCSS = colorCSS;
 //# sourceMappingURL=color.cjs.map

package/dist/chunks/color.js

@@ -1,4 +1,4 @@
-const colorCSS = ':host {\n  --color-solid:           var(--color-gray);\n  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));\n  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));\n  --color-on-solid:        var(--color-text-main);\n  --color-border:          var(--color-gray);\n  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));\n  --color-accent:          var(--color-text-muted);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--border-subtle);\n  --color-subtle-hover:    var(--border-default);\n  --color-bg-subtle:       var(--border-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--border-default);\n}\n\n:host([color="primary"]) {\n  --color-solid:           var(--color-primary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-primary);\n  --color-accent:          var(--color-text-link);\n  --color-accent-hover:    var(--color-text-link-hover);\n  --color-subtle:          var(--color-primary-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);\n  --color-bg-subtle:       var(--color-primary-bg-subtle);\n  --color-text-subtle:     var(--color-primary-text-emphasis);\n  --color-border-subtle:   var(--color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --color-solid:           var(--color-secondary);\n  --color-on-solid:        white;\n  --color-border:          var(--color-secondary-hover);\n  --color-accent:          var(--color-secondary-text-emphasis);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          rgb(from var(--slate) r g b / 0.06);\n  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);\n  --color-bg-subtle:       var(--color-secondary-bg-subtle);\n  --color-text-subtle:     var(--color-secondary-text-emphasis);\n  --color-border-subtle:   var(--color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --color-solid:           var(--color-success);\n  --color-on-solid:        white;\n  --color-border:          var(--color-success);\n  --color-accent:          var(--color-success-text-emphasis);\n  --color-accent-hover:    var(--color-success-hover);\n  --color-subtle:          var(--color-success-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);\n  --color-bg-subtle:       var(--color-success-bg-subtle);\n  --color-text-subtle:     var(--color-success-text-emphasis);\n  --color-border-subtle:   var(--color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --color-solid:           var(--color-danger);\n  --color-on-solid:        white;\n  --color-border:          var(--color-danger);\n  --color-accent:          var(--color-danger-text-emphasis);\n  --color-accent-hover:    var(--color-danger-hover);\n  --color-subtle:          var(--color-danger-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);\n  --color-bg-subtle:       var(--color-danger-bg-subtle);\n  --color-text-subtle:     var(--color-danger-text-emphasis);\n  --color-border-subtle:   var(--color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --color-solid:           var(--color-warning);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--color-warning);\n  --color-accent:          var(--color-warning-text-emphasis);\n  --color-accent-hover:    var(--color-warning-hover);\n  --color-subtle:          var(--color-warning-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);\n  --color-bg-subtle:       var(--color-warning-bg-subtle);\n  --color-text-subtle:     var(--color-warning-text-emphasis);\n  --color-border-subtle:   var(--color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --color-solid:           var(--color-info);\n  --color-on-solid:        white;\n  --color-border:          var(--color-info);\n  --color-accent:          var(--color-info-text-emphasis);\n  --color-accent-hover:    var(--color-info-hover);\n  --color-subtle:          var(--color-info-bg-subtle);\n  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);\n  --color-bg-subtle:       var(--color-info-bg-subtle);\n  --color-text-subtle:     var(--color-info-text-emphasis);\n  --color-border-subtle:   var(--color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --color-solid:           var(--light);\n  --color-on-solid:        var(--gray-900);\n  --color-border:          var(--border-hover);\n  --color-subtle:          var(--color-light-bg-subtle);\n  --color-subtle-hover:    var(--color-light-border-subtle);\n  --color-bg-subtle:       var(--color-light-bg-subtle);\n  --color-text-subtle:     var(--color-text-muted);\n  --color-border-subtle:   var(--color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --color-solid:           var(--dark-500);\n  --color-on-solid:        white;\n  --color-border:          var(--dark-500);\n  --color-accent:          var(--color-text-main);\n  --color-accent-hover:    var(--color-text-main);\n  --color-subtle:          var(--color-dark-bg-subtle);\n  --color-subtle-hover:    var(--color-dark-border-subtle);\n  --color-bg-subtle:       var(--color-dark-bg-subtle);\n  --color-text-subtle:     var(--color-text-main);\n  --color-border-subtle:   var(--color-dark-border-subtle);\n}\n';
+const colorCSS = ':host {\n  --ae-color-solid:           var(--ae-color-gray);\n  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));\n  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));\n  --ae-color-on-solid:        var(--ae-color-text-main);\n  --ae-color-border:          var(--ae-color-gray);\n  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));\n  --ae-color-accent:          var(--ae-color-text-muted);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          var(--ae-border-subtle);\n  --ae-color-subtle-hover:    var(--ae-border-default);\n  --ae-color-bg-subtle:       var(--ae-border-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\n  --ae-color-border-subtle:   var(--ae-border-default);\n}\n\n:host([color="primary"]) {\n  --ae-color-solid:           var(--ae-color-primary);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-primary);\n  --ae-color-accent:          var(--ae-color-text-link);\n  --ae-color-accent-hover:    var(--ae-color-text-link-hover);\n  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);\n}\n\n:host([color="secondary"]) {\n  --ae-color-solid:           var(--ae-color-secondary);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-secondary-hover);\n  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);\n  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);\n  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);\n}\n\n:host([color="success"]) {\n  --ae-color-solid:           var(--ae-color-success);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-success);\n  --ae-color-accent:          var(--ae-color-success-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-success-hover);\n  --ae-color-subtle:          var(--ae-color-success-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);\n}\n\n:host([color="danger"]) {\n  --ae-color-solid:           var(--ae-color-danger);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-danger);\n  --ae-color-accent:          var(--ae-color-danger-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-danger-hover);\n  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);\n}\n\n:host([color="warning"]) {\n  --ae-color-solid:           var(--ae-color-warning);\n  --ae-color-on-solid:        var(--ae-gray-900);\n  --ae-color-border:          var(--ae-color-warning);\n  --ae-color-accent:          var(--ae-color-warning-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-warning-hover);\n  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);\n}\n\n:host([color="info"]) {\n  --ae-color-solid:           var(--ae-color-info);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-color-info);\n  --ae-color-accent:          var(--ae-color-info-text-emphasis);\n  --ae-color-accent-hover:    var(--ae-color-info-hover);\n  --ae-color-subtle:          var(--ae-color-info-bg-subtle);\n  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);\n  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);\n  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);\n}\n\n:host([color="light"]) {\n  --ae-color-solid:           var(--ae-light);\n  --ae-color-on-solid:        var(--ae-gray-900);\n  --ae-color-border:          var(--ae-border-hover);\n  --ae-color-subtle:          var(--ae-color-light-bg-subtle);\n  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);\n  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-muted);\n  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);\n}\n\n:host([color="dark"]) {\n  --ae-color-solid:           var(--ae-dark-500);\n  --ae-color-on-solid:        white;\n  --ae-color-border:          var(--ae-dark-500);\n  --ae-color-accent:          var(--ae-color-text-main);\n  --ae-color-accent-hover:    var(--ae-color-text-main);\n  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);\n  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);\n  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);\n  --ae-color-text-subtle:     var(--ae-color-text-main);\n  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);\n}\n';
 export {
   colorCSS as c
 };

package/dist/chunks/copy-button.cjs

@@ -4,7 +4,7 @@ const size = require("./size.cjs");
 const color = require("./color.cjs");
 const aeicoComponent = require("./aeico-component.cjs");
 const aeico = require("aeico");
-const copyButtonStyle = ':host {\n  display: inline-block;\n  --btn-solid-bg:          var(--color-solid);\n  --btn-solid-bg-hover:    var(--color-solid-hover);\n  --btn-solid-bg-active:   var(--color-solid-active);\n  --btn-solid-color:       var(--color-on-solid);\n  --btn-solid-color-hover: var(--color-on-solid-hover);\n  --btn-border:            var(--color-border);\n  --btn-border-hover:      var(--color-border-hover);\n  --btn-accent:            var(--color-accent);\n  --btn-accent-hover:      var(--color-accent-hover);\n  --btn-subtle-bg:         var(--color-subtle);\n  --btn-subtle-bg-hover:   var(--color-subtle-hover);\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-family: inherit;\n  font-weight: 400;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  outline: none;\n  position: relative;\n  padding: 0.429em 0.571em;\n  font-size: 1em;\n  line-height: 1.5;\n  border-radius: 4px;\n  height: 2.286em;\n  width: 2.286em;\n  min-width: unset;\n\n  background:  var(--btn-solid-bg);\n  border: 1px solid var(--btn-solid-bg);\n  color:       var(--btn-solid-color);\n}\n\nbutton:focus  { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n  background:   var(--btn-solid-bg-hover);\n  border-color: var(--btn-border-hover);\n  color:        var(--btn-solid-color-hover, var(--btn-solid-color));\n}\n\nbutton:active:not(:disabled) { background: var(--btn-solid-bg-active); }\n\nbutton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy  { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy  { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n  background: transparent;\n  border-color: var(--btn-border);\n  color: var(--btn-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg);\n  border-color: var(--btn-border-hover);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="faint"]) button {\n  background: var(--btn-subtle-bg);\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg-hover);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="text"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n  color: var(--btn-accent-hover);\n}\n';
+const copyButtonStyle = ':host {\n  display: inline-block;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-family: inherit;\n  font-weight: 400;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  outline: none;\n  position: relative;\n  padding: 0.429em 0.571em;\n  font-size: 1em;\n  line-height: 1.5;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  height: 2.286em;\n  width: 2.286em;\n  min-width: unset;\n\n  background:  var(--ae-color-solid);\n  border: 1px solid var(--ae-color-solid);\n  color:       var(--ae-color-on-solid);\n}\n\nbutton:focus  { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n  background:   var(--ae-color-solid-hover);\n  border-color: var(--ae-color-border-hover);\n  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\n}\n\nbutton:active:not(:disabled) { background: var(--ae-color-solid-active); }\n\nbutton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy  { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy  { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n  background: transparent;\n  border-color: var(--ae-color-border);\n  color: var(--ae-color-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n  background: var(--ae-color-subtle);\n  border-color: var(--ae-color-border-hover);\n  color: var(--ae-color-accent-hover);\n}\n\n:host([variant="faint"]) button {\n  background: var(--ae-color-subtle);\n  border-color: transparent;\n  color: var(--ae-color-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n  background: var(--ae-color-subtle-hover);\n  color: var(--ae-color-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--ae-color-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n  background: var(--ae-color-subtle);\n  color: var(--ae-color-accent-hover);\n}\n\n:host([variant="text"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--ae-color-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n  color: var(--ae-color-accent-hover);\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -101,7 +101,10 @@ class CopyButton extends (_a = aeicoComponent.AeicoComponent, _text_dec = [aeico
     var _a2;
     if (this.text != null) return this.text;
     const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes({ flatten: true })) ?? [];
-    return nodes.filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").trim();
+    return nodes.reduce((text, n) => {
+      if (n.nodeType === Node.TEXT_NODE) return text + (n.textContent ?? "");
+      return text;
+    }, "").trim();
   }
   onUnmounted() {
     if (this._resetTimer !== null) {
@@ -129,10 +132,10 @@ class CopyButton extends (_a = aeicoComponent.AeicoComponent, _text_dec = [aeico
             },
             () => {
               span({ className: "icon-copy" }, () => {
-                aeIcon({ name: "copy" });
+                aeIcon({ name: "copy", size: this.size });
               });
               span({ className: "icon-check" }, () => {
-                aeIcon({ name: "check" });
+                aeIcon({ name: "check", size: this.size });
               });
               this._slotElement = slot();
             }

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

@@ -1 +1 @@
-{"version":3,"file":"copy-button.cjs","sources":["../../src/copy-button/copy-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 copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n  @prop({ type: String })\n  accessor text: string | undefined;\n\n  @prop({ type: String })\n  accessor color: CopyButtonColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: CopyButtonVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: CopyButtonSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean | undefined;\n\n  @prop({ type: Number })\n  accessor duration: number | undefined;\n\n  @prop({ type: String })\n  accessor tooltip: string = 'Copy';\n\n  @prop({ type: String })\n  accessor tooltipCopied: string = 'Copied!';\n\n  @prop({ type: String })\n  accessor tooltipPlacement: TooltipPlacement = 'top';\n\n  private _slotElement: HTMLSlotElement | null = null;\n  private _tooltipEl: Tooltip | null = null;\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private _getTextToCopy(): string {\n    if (this.text != null) return this.text;\n    const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n    return nodes\n      .filter((n) => n.nodeType === Node.TEXT_NODE)\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n\n    const textToCopy = this._getTextToCopy();\n\n    void navigator.clipboard.writeText(textToCopy).then(() => {\n      this.setAttribute('copied', '');\n\n      if (this._tooltipEl) {\n        this._tooltipEl.content = this.tooltipCopied;\n        this._tooltipEl.open = true;\n      }\n\n      if (this._resetTimer !== null) {\n        clearTimeout(this._resetTimer);\n      }\n      const duration = this.duration ?? 2000;\n      this._resetTimer = setTimeout(() => {\n        this.removeAttribute('copied');\n        if (this._tooltipEl) {\n          this._tooltipEl.content = this.tooltip;\n          this._tooltipEl.open = false;\n        }\n        this._resetTimer = null;\n      }, duration);\n\n      this.dispatchEvent(\n        new CustomEvent('copy', {\n          bubbles: true,\n          composed: true,\n          detail: { text: textToCopy },\n        }),\n      );\n    });\n  };\n\n  protected onUnmounted() {\n    if (this._resetTimer !== null) {\n      clearTimeout(this._resetTimer);\n      this._resetTimer = null;\n    }\n  }\n\n  protected render() {\n    return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n      this._tooltipEl = aeTooltip(\n        {\n          content: this.tooltip,\n          placement: this.tooltipPlacement,\n          disabled: this.disabled,\n        },\n        () => {\n          button(\n            {\n              type: 'button',\n              disabled: this.disabled,\n              part: 'button',\n              'aria-label': this.tooltip,\n              'aria-disabled': this.disabled,\n              '@click': this._handleClick,\n            },\n            () => {\n              span({ className: 'icon-copy' }, () => {\n                aeIcon({ name: 'copy' });\n              });\n              span({ className: 'icon-check' }, () => {\n                aeIcon({ name: 'check' });\n              });\n              this._slotElement = slot();\n            },\n          );\n        },\n      );\n    });\n  }\n}\n\nCopyButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-copy-button': CopyButton;\n  }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables","sizeCSS","colorCSS"],"mappings":"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"}
+{"version":3,"file":"copy-button.cjs","sources":["../../src/copy-button/copy-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 copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n  @prop({ type: String })\n  accessor text: string | undefined;\n\n  @prop({ type: String })\n  accessor color: CopyButtonColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: CopyButtonVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: CopyButtonSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean | undefined;\n\n  @prop({ type: Number })\n  accessor duration: number | undefined;\n\n  @prop({ type: String })\n  accessor tooltip: string = 'Copy';\n\n  @prop({ type: String })\n  accessor tooltipCopied: string = 'Copied!';\n\n  @prop({ type: String })\n  accessor tooltipPlacement: TooltipPlacement = 'top';\n\n  private _slotElement: HTMLSlotElement | null = null;\n  private _tooltipEl: Tooltip | null = null;\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private _getTextToCopy(): string {\n    if (this.text != null) return this.text;\n\n    const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n\n    return nodes\n      .reduce<string>((text, n) => {\n        if (n.nodeType === Node.TEXT_NODE) return text + (n.textContent ?? '');\n\n        return text;\n      }, '')\n      .trim();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n\n    const textToCopy = this._getTextToCopy();\n\n    void navigator.clipboard.writeText(textToCopy).then(() => {\n      this.setAttribute('copied', '');\n\n      if (this._tooltipEl) {\n        this._tooltipEl.content = this.tooltipCopied;\n        this._tooltipEl.open = true;\n      }\n\n      if (this._resetTimer !== null) {\n        clearTimeout(this._resetTimer);\n      }\n      const duration = this.duration ?? 2000;\n      this._resetTimer = setTimeout(() => {\n        this.removeAttribute('copied');\n        if (this._tooltipEl) {\n          this._tooltipEl.content = this.tooltip;\n          this._tooltipEl.open = false;\n        }\n        this._resetTimer = null;\n      }, duration);\n\n      this.dispatchEvent(\n        new CustomEvent('copy', {\n          bubbles: true,\n          composed: true,\n          detail: { text: textToCopy },\n        }),\n      );\n    });\n  };\n\n  protected onUnmounted() {\n    if (this._resetTimer !== null) {\n      clearTimeout(this._resetTimer);\n      this._resetTimer = null;\n    }\n  }\n\n  protected render() {\n    return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n      this._tooltipEl = aeTooltip(\n        {\n          content: this.tooltip,\n          placement: this.tooltipPlacement,\n          disabled: this.disabled,\n        },\n        () => {\n          button(\n            {\n              type: 'button',\n              disabled: this.disabled,\n              part: 'button',\n              'aria-label': this.tooltip,\n              'aria-disabled': this.disabled,\n              '@click': this._handleClick,\n            },\n            () => {\n              span({ className: 'icon-copy' }, () => {\n                aeIcon({ name: 'copy', size: this.size });\n              });\n              span({ className: 'icon-check' }, () => {\n                aeIcon({ name: 'check', size: this.size });\n              });\n              this._slotElement = slot();\n            },\n          );\n        },\n      );\n    });\n  }\n}\n\nCopyButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-copy-button': CopyButton;\n  }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["AeicoComponent","prop","_a","html","styleVariables","sizeCSS","colorCSS"],"mappings":"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"}

package/dist/chunks/copy-button.js

@@ -3,7 +3,7 @@ import { s as sizeCSS } from "./size.js";
 import { c as colorCSS } from "./color.js";
 import { A as AeicoComponent } from "./aeico-component.js";
 import { prop, html } from "aeico";
-const copyButtonStyle = ':host {\n  display: inline-block;\n  --btn-solid-bg:          var(--color-solid);\n  --btn-solid-bg-hover:    var(--color-solid-hover);\n  --btn-solid-bg-active:   var(--color-solid-active);\n  --btn-solid-color:       var(--color-on-solid);\n  --btn-solid-color-hover: var(--color-on-solid-hover);\n  --btn-border:            var(--color-border);\n  --btn-border-hover:      var(--color-border-hover);\n  --btn-accent:            var(--color-accent);\n  --btn-accent-hover:      var(--color-accent-hover);\n  --btn-subtle-bg:         var(--color-subtle);\n  --btn-subtle-bg-hover:   var(--color-subtle-hover);\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-family: inherit;\n  font-weight: 400;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  outline: none;\n  position: relative;\n  padding: 0.429em 0.571em;\n  font-size: 1em;\n  line-height: 1.5;\n  border-radius: 4px;\n  height: 2.286em;\n  width: 2.286em;\n  min-width: unset;\n\n  background:  var(--btn-solid-bg);\n  border: 1px solid var(--btn-solid-bg);\n  color:       var(--btn-solid-color);\n}\n\nbutton:focus  { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n  background:   var(--btn-solid-bg-hover);\n  border-color: var(--btn-border-hover);\n  color:        var(--btn-solid-color-hover, var(--btn-solid-color));\n}\n\nbutton:active:not(:disabled) { background: var(--btn-solid-bg-active); }\n\nbutton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy  { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy  { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n  background: transparent;\n  border-color: var(--btn-border);\n  color: var(--btn-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg);\n  border-color: var(--btn-border-hover);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="faint"]) button {\n  background: var(--btn-subtle-bg);\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg-hover);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n  background: var(--btn-subtle-bg);\n  color: var(--btn-accent-hover);\n}\n\n:host([variant="text"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--btn-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n  color: var(--btn-accent-hover);\n}\n';
+const copyButtonStyle = ':host {\n  display: inline-block;\n}\n\nbutton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  font-family: inherit;\n  font-weight: 400;\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\n  outline: none;\n  position: relative;\n  padding: 0.429em 0.571em;\n  font-size: 1em;\n  line-height: 1.5;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  height: 2.286em;\n  width: 2.286em;\n  min-width: unset;\n\n  background:  var(--ae-color-solid);\n  border: 1px solid var(--ae-color-solid);\n  color:       var(--ae-color-on-solid);\n}\n\nbutton:focus  { outline: none; }\nbutton:active { transform: translateY(1px); }\n\nbutton:hover:not(:disabled) {\n  background:   var(--ae-color-solid-hover);\n  border-color: var(--ae-color-border-hover);\n  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));\n}\n\nbutton:active:not(:disabled) { background: var(--ae-color-solid-active); }\n\nbutton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Hide the fallback-text slot */\nslot { display: none; }\n\n/* Icon visibility */\n.icon-copy,\n.icon-check {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n\n.icon-copy  { opacity: 1; transform: scale(1); }\n.icon-check { opacity: 0; transform: scale(0.6); }\n\n:host([copied]) .icon-copy  { opacity: 0; transform: scale(0.6); }\n:host([copied]) .icon-check { opacity: 1; transform: scale(1); }\n\n/* Variants */\n:host([variant="outlined"]) button {\n  background: transparent;\n  border-color: var(--ae-color-border);\n  color: var(--ae-color-accent);\n}\n:host([variant="outlined"]) button:hover:not(:disabled) {\n  background: var(--ae-color-subtle);\n  border-color: var(--ae-color-border-hover);\n  color: var(--ae-color-accent-hover);\n}\n\n:host([variant="faint"]) button {\n  background: var(--ae-color-subtle);\n  border-color: transparent;\n  color: var(--ae-color-accent);\n}\n:host([variant="faint"]) button:hover:not(:disabled) {\n  background: var(--ae-color-subtle-hover);\n  color: var(--ae-color-accent-hover);\n}\n\n:host([variant="subtle"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--ae-color-accent);\n}\n:host([variant="subtle"]) button:hover:not(:disabled) {\n  background: var(--ae-color-subtle);\n  color: var(--ae-color-accent-hover);\n}\n\n:host([variant="text"]) button {\n  background: transparent;\n  border-color: transparent;\n  color: var(--ae-color-accent);\n}\n:host([variant="text"]) button:hover:not(:disabled) {\n  color: var(--ae-color-accent-hover);\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -100,7 +100,10 @@ class CopyButton extends (_a = AeicoComponent, _text_dec = [prop({ type: String
     var _a2;
     if (this.text != null) return this.text;
     const nodes = ((_a2 = this._slotElement) == null ? void 0 : _a2.assignedNodes({ flatten: true })) ?? [];
-    return nodes.filter((n) => n.nodeType === Node.TEXT_NODE).map((n) => n.textContent ?? "").join("").trim();
+    return nodes.reduce((text, n) => {
+      if (n.nodeType === Node.TEXT_NODE) return text + (n.textContent ?? "");
+      return text;
+    }, "").trim();
   }
   onUnmounted() {
     if (this._resetTimer !== null) {
@@ -128,10 +131,10 @@ class CopyButton extends (_a = AeicoComponent, _text_dec = [prop({ type: String
             },
             () => {
               span({ className: "icon-copy" }, () => {
-                aeIcon({ name: "copy" });
+                aeIcon({ name: "copy", size: this.size });
               });
               span({ className: "icon-check" }, () => {
-                aeIcon({ name: "check" });
+                aeIcon({ name: "check", size: this.size });
               });
               this._slotElement = slot();
             }

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

@@ -1 +1 @@
-{"version":3,"file":"copy-button.js","sources":["../../src/copy-button/copy-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 copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n  @prop({ type: String })\n  accessor text: string | undefined;\n\n  @prop({ type: String })\n  accessor color: CopyButtonColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: CopyButtonVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: CopyButtonSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean | undefined;\n\n  @prop({ type: Number })\n  accessor duration: number | undefined;\n\n  @prop({ type: String })\n  accessor tooltip: string = 'Copy';\n\n  @prop({ type: String })\n  accessor tooltipCopied: string = 'Copied!';\n\n  @prop({ type: String })\n  accessor tooltipPlacement: TooltipPlacement = 'top';\n\n  private _slotElement: HTMLSlotElement | null = null;\n  private _tooltipEl: Tooltip | null = null;\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private _getTextToCopy(): string {\n    if (this.text != null) return this.text;\n    const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n    return nodes\n      .filter((n) => n.nodeType === Node.TEXT_NODE)\n      .map((n) => n.textContent ?? '')\n      .join('')\n      .trim();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n\n    const textToCopy = this._getTextToCopy();\n\n    void navigator.clipboard.writeText(textToCopy).then(() => {\n      this.setAttribute('copied', '');\n\n      if (this._tooltipEl) {\n        this._tooltipEl.content = this.tooltipCopied;\n        this._tooltipEl.open = true;\n      }\n\n      if (this._resetTimer !== null) {\n        clearTimeout(this._resetTimer);\n      }\n      const duration = this.duration ?? 2000;\n      this._resetTimer = setTimeout(() => {\n        this.removeAttribute('copied');\n        if (this._tooltipEl) {\n          this._tooltipEl.content = this.tooltip;\n          this._tooltipEl.open = false;\n        }\n        this._resetTimer = null;\n      }, duration);\n\n      this.dispatchEvent(\n        new CustomEvent('copy', {\n          bubbles: true,\n          composed: true,\n          detail: { text: textToCopy },\n        }),\n      );\n    });\n  };\n\n  protected onUnmounted() {\n    if (this._resetTimer !== null) {\n      clearTimeout(this._resetTimer);\n      this._resetTimer = null;\n    }\n  }\n\n  protected render() {\n    return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n      this._tooltipEl = aeTooltip(\n        {\n          content: this.tooltip,\n          placement: this.tooltipPlacement,\n          disabled: this.disabled,\n        },\n        () => {\n          button(\n            {\n              type: 'button',\n              disabled: this.disabled,\n              part: 'button',\n              'aria-label': this.tooltip,\n              'aria-disabled': this.disabled,\n              '@click': this._handleClick,\n            },\n            () => {\n              span({ className: 'icon-copy' }, () => {\n                aeIcon({ name: 'copy' });\n              });\n              span({ className: 'icon-check' }, () => {\n                aeIcon({ name: 'check' });\n              });\n              this._slotElement = slot();\n            },\n          );\n        },\n      );\n    });\n  }\n}\n\nCopyButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-copy-button': CopyButton;\n  }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["_a","styleVariables"],"mappings":"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"}
+{"version":3,"file":"copy-button.js","sources":["../../src/copy-button/copy-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 copyButtonStyle from '../styles/components/copy-button.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport { prop } from 'aeico';\n// Ensure ae-icon and ae-tooltip are registered\nimport '../icon/icon';\nimport '../tooltip/tooltip';\nimport type Tooltip from '../tooltip/tooltip';\nimport type { TooltipPlacement } from '../tooltip/defines';\nimport type { CopyButtonColor, CopyButtonSize, CopyButtonVariant } from './defines';\n\nclass CopyButton extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, copyButtonStyle];\n\n  @prop({ type: String })\n  accessor text: string | undefined;\n\n  @prop({ type: String })\n  accessor color: CopyButtonColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: CopyButtonVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: CopyButtonSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean | undefined;\n\n  @prop({ type: Number })\n  accessor duration: number | undefined;\n\n  @prop({ type: String })\n  accessor tooltip: string = 'Copy';\n\n  @prop({ type: String })\n  accessor tooltipCopied: string = 'Copied!';\n\n  @prop({ type: String })\n  accessor tooltipPlacement: TooltipPlacement = 'top';\n\n  private _slotElement: HTMLSlotElement | null = null;\n  private _tooltipEl: Tooltip | null = null;\n  private _resetTimer: ReturnType<typeof setTimeout> | null = null;\n\n  private _getTextToCopy(): string {\n    if (this.text != null) return this.text;\n\n    const nodes = this._slotElement?.assignedNodes({ flatten: true }) ?? [];\n\n    return nodes\n      .reduce<string>((text, n) => {\n        if (n.nodeType === Node.TEXT_NODE) return text + (n.textContent ?? '');\n\n        return text;\n      }, '')\n      .trim();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n\n    const textToCopy = this._getTextToCopy();\n\n    void navigator.clipboard.writeText(textToCopy).then(() => {\n      this.setAttribute('copied', '');\n\n      if (this._tooltipEl) {\n        this._tooltipEl.content = this.tooltipCopied;\n        this._tooltipEl.open = true;\n      }\n\n      if (this._resetTimer !== null) {\n        clearTimeout(this._resetTimer);\n      }\n      const duration = this.duration ?? 2000;\n      this._resetTimer = setTimeout(() => {\n        this.removeAttribute('copied');\n        if (this._tooltipEl) {\n          this._tooltipEl.content = this.tooltip;\n          this._tooltipEl.open = false;\n        }\n        this._resetTimer = null;\n      }, duration);\n\n      this.dispatchEvent(\n        new CustomEvent('copy', {\n          bubbles: true,\n          composed: true,\n          detail: { text: textToCopy },\n        }),\n      );\n    });\n  };\n\n  protected onUnmounted() {\n    if (this._resetTimer !== null) {\n      clearTimeout(this._resetTimer);\n      this._resetTimer = null;\n    }\n  }\n\n  protected render() {\n    return html(({ aeTooltip, button, span, slot, aeIcon }) => {\n      this._tooltipEl = aeTooltip(\n        {\n          content: this.tooltip,\n          placement: this.tooltipPlacement,\n          disabled: this.disabled,\n        },\n        () => {\n          button(\n            {\n              type: 'button',\n              disabled: this.disabled,\n              part: 'button',\n              'aria-label': this.tooltip,\n              'aria-disabled': this.disabled,\n              '@click': this._handleClick,\n            },\n            () => {\n              span({ className: 'icon-copy' }, () => {\n                aeIcon({ name: 'copy', size: this.size });\n              });\n              span({ className: 'icon-check' }, () => {\n                aeIcon({ name: 'check', size: this.size });\n              });\n              this._slotElement = slot();\n            },\n          );\n        },\n      );\n    });\n  }\n}\n\nCopyButton.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-copy-button': CopyButton;\n  }\n}\n\nexport default CopyButton;\nexport type CopyButtonProps = InferProps<typeof CopyButton>;\n"],"names":["_a","styleVariables"],"mappings":"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"}