aeico-components 0.1.5 → 0.1.7

package/dist/chunks/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n  };\n\n  declare activeIndex?: number;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncActive();\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"tab-panel.js","sources":["../../src/tabs/tabs.ts","../../src/tabs/tab.ts","../../src/tabs/tab-panel.ts"],"sourcesContent":["import type { Props } from 'aeico';\nimport styleVariables from '../styles/variables.css?inline';\nimport tabsStyle from '../styles/components/tabs.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type Tab from './tab';\nimport type { TabVariant } from './defines';\n\nclass Tabs extends AeicoComponent {\n  static props: Props = {\n    activeIndex: { type: Number },\n    variant: { type: String },\n  };\n\n  declare activeIndex?: number;\n  declare variant?: TabVariant;\n\n  protected static styles = [styleVariables, tabsStyle];\n\n  private _observer: MutationObserver | null = null;\n\n  private get _tabs(): Tab[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab',\n    ) as unknown as Tab[];\n  }\n\n  private get _panels(): HTMLElement[] {\n    return [...this.children].filter(\n      (el) => el.tagName.toLowerCase() === 'ae-tab-panel',\n    ) as HTMLElement[];\n  }\n\n  private _getPairs(): [Tab, HTMLElement | null][] {\n    const tabs = this._tabs;\n    const panels = this._panels;\n\n    const idMap = new Map<string, HTMLElement>();\n    for (const panel of panels) {\n      const id = panel.id;\n      if (id) idMap.set(id, panel);\n    }\n\n    const usedPanels = new Set<HTMLElement>();\n    const pairs: [Tab, HTMLElement | null][] = [];\n\n    // First pass: ID-matched tabs\n    for (const tab of tabs) {\n      const panelId = tab.panel;\n      if (panelId) {\n        const panel = idMap.get(panelId) ?? null;\n        if (panel) usedPanels.add(panel);\n        pairs.push([tab, panel]);\n      }\n    }\n\n    // Second pass: position-matched tabs (no panel attr)\n    const unmatchedPanels = panels.filter((p) => !usedPanels.has(p));\n    let posIndex = 0;\n    for (const tab of tabs) {\n      if (!tab.panel) {\n        pairs.push([tab, unmatchedPanels[posIndex] ?? null]);\n        posIndex++;\n      }\n    }\n\n    return pairs;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._observer = new MutationObserver(() => this.update());\n    this._observer.observe(this, { childList: true });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this._observer?.disconnect();\n    this._observer = null;\n  }\n\n  protected onUpdated() {\n    this._syncVariant();\n    this._syncActive();\n  }\n\n  private _syncVariant() {\n    const variant = this.variant ?? 'text';\n    this.setAttribute('variant', variant);\n    for (const tab of this._tabs) {\n      tab.setAttribute('variant', variant);\n    }\n  }\n\n  private _handleTabClick = (e: Event) => {\n    const pairs = this._getPairs();\n    const target = e.target as Element;\n    const index = pairs.findIndex(([tab]) => tab === target);\n    if (index !== -1) this.selectTab(index);\n  };\n\n  private _syncActive() {\n    const activeIndex = this.activeIndex ?? 0;\n    const pairs = this._getPairs();\n\n    pairs.forEach(([tab, panel], i) => {\n      const isActive = i === activeIndex;\n      if (isActive) {\n        tab.setAttribute('active', '');\n        panel?.setAttribute('active', '');\n      } else {\n        tab.removeAttribute('active');\n        panel?.removeAttribute('active');\n      }\n    });\n  }\n\n  selectTab(index: number): void {\n    const pairs = this._getPairs();\n    if (index === (this.activeIndex ?? 0) || index >= pairs.length) return;\n    this.activeIndex = index;\n    this.emit('change', { detail: { index } });\n  }\n\n  protected render() {\n    return html(({ nav, div, slot }) => {\n      nav({ part: 'tab-nav', role: 'tablist', '@_tab-click': this._handleTabClick }, () => {\n        slot({ name: 'tab' });\n      });\n      div({ part: 'panels' }, () => {\n        slot();\n      });\n    });\n  }\n}\n\nTabs.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tabs': Tabs;\n  }\n}\n\nexport default Tabs;\n","import type { Props } from 'aeico';\nimport tabStyle from '../styles/components/tab.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass Tab extends AeicoComponent {\n  static props: Props = {\n    active: { type: Boolean },\n    disabled: { type: Boolean },\n    panel: { type: String },\n  };\n\n  declare active?: boolean;\n  declare disabled?: boolean;\n  declare panel?: string;\n\n  protected static styles = [tabStyle];\n\n  connectedCallback() {\n    this.setAttribute('slot', 'tab');\n    super.connectedCallback();\n  }\n\n  private _handleClick = () => {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('_tab-click', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  protected render() {\n    return html(({ button, slot }) => {\n      button(\n        {\n          part: 'tab',\n          type: 'button',\n          role: 'tab',\n          'aria-selected': this.active,\n          'aria-disabled': this.disabled,\n          disabled: this.disabled,\n          '@click': this._handleClick,\n        },\n        () => {\n          slot();\n        },\n      );\n    });\n  }\n}\n\nTab.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab': Tab;\n  }\n}\n\nexport default Tab;\n","import tabPanelStyle from '../styles/components/tab-panel.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\n\nclass TabPanel extends AeicoComponent {\n  protected static styles = [tabPanelStyle];\n\n  protected render() {\n    return html(({ slot }) => {\n      slot();\n    });\n  }\n}\n\nTabPanel.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tab-panel': TabPanel;\n  }\n}\n\nexport default TabPanel;\n"],"names":["styleVariables"],"mappings":"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"}

package/dist/chunks/tag.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 tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
+const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  border: 1px solid var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: var(--ae-color-border-subtle);\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -102,7 +102,7 @@ __decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
 __decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
 __decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
 __decoratorMetadata(_init, Tag);
-__publicField(Tag, "styles", [variables.styleVariables, size.sizeCSS, color.colorCSS, tagStyle]);
+__publicField(Tag, "styles", [variables.variables, size.sizeCSS, color.colorCSS, tagStyle]);
 Tag.register();
 exports.Tag = Tag;
 //# sourceMappingURL=tag.cjs.map

package/dist/chunks/tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tag.cjs","sources":["../../src/tag/tag.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 tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n *   <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n *   Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n  @prop({ type: String })\n  accessor color: TagColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: TagVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: TagSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor dismissible: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor pill: boolean = false;\n\n  protected render() {\n    return html(({ span, button, slot }) => {\n      span({ part: 'tag', className: 'tag' }, () => {\n        slot({ name: 'start' });\n        span({ className: 'tag-content' }, () => {\n          slot();\n        });\n        slot({ name: 'end' });\n        button(\n          {\n            type: 'button',\n            className: 'tag-dismiss',\n            'aria-label': 'dismiss',\n            '@click': (e: Event) => {\n              e.stopPropagation();\n              if (this.disabled) return;\n              this.emit('dismiss');\n            },\n          },\n          () => {\n            span({ textContent: '\\u00d7' });\n          },\n        );\n      });\n    });\n  }\n}\n\nTag.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tag': Tag;\n  }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":["prop","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,oCAGhB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAACA,WAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAACC,UAAAA,gBAAgBC,KAAAA,SAASC,MAAAA,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;;"}
+{"version":3,"file":"tag.cjs","sources":["../../src/tag/tag.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 tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n *   <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n *   Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n  @prop({ type: String })\n  accessor color: TagColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: TagVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: TagSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor dismissible: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor pill: boolean = false;\n\n  protected render() {\n    return html(({ span, button, slot }) => {\n      span({ part: 'tag', className: 'tag' }, () => {\n        slot({ name: 'start' });\n        span({ className: 'tag-content' }, () => {\n          slot();\n        });\n        slot({ name: 'end' });\n        button(\n          {\n            type: 'button',\n            className: 'tag-dismiss',\n            'aria-label': 'dismiss',\n            '@click': (e: Event) => {\n              e.stopPropagation();\n              if (this.disabled) return;\n              this.emit('dismiss');\n            },\n          },\n          () => {\n            span({ textContent: '\\u00d7' });\n          },\n        );\n      });\n    });\n  }\n}\n\nTag.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tag': Tag;\n  }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":["prop","html","styleVariables","sizeCSS","colorCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,oCAGhB,aAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAACA,WAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAOC,MAAAA,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAACC,UAAAA,WAAgBC,KAAAA,SAASC,MAAAA,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;;"}

package/dist/chunks/tag.js

@@ -1,9 +1,9 @@
-import { s as styleVariables } from "./variables.js";
+import { v as variables } from "./variables.js";
 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 tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n  --tag-solid-bg:        var(--color-solid);\n  --tag-solid-color:     var(--color-on-solid);\n  --tag-border:          var(--color-border);\n  --tag-accent:          var(--color-accent);\n  --tag-subtle-bg:       var(--color-bg-subtle);\n  --tag-subtle-color:    var(--color-text-subtle);\n  --tag-subtle-border:   var(--color-border-subtle);\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: 4px;\n  border: 1px solid var(--tag-solid-bg);\n  background: var(--tag-solid-bg);\n  color: var(--tag-solid-color);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--tag-border);\n  color:        var(--tag-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: var(--tag-subtle-border);\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--tag-subtle-bg);\n  border-color: transparent;\n  color:        var(--tag-subtle-color);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--tag-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: 999px; }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: 2px;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
+const tagStyle = ':host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.tag {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: inherit;\n  font-weight: 500;\n  white-space: nowrap;\n  vertical-align: middle;\n  line-height: 1.2;\n  font-size: 1em;\n  padding: 0.15em 0.5em 0.15em 0.6em;\n  border-radius: var(--ae-border-radius, var(--ae-radius-sm));\n  border: 1px solid var(--ae-color-solid);\n  background: var(--ae-color-solid);\n  color: var(--ae-color-on-solid);\n  max-width: 160px;\n  min-width: 0;\n}\n\n:host([variant="outlined"]) .tag {\n  background:   transparent;\n  border-color: var(--ae-color-border);\n  color:        var(--ae-color-accent);\n}\n\n:host([variant="faint"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: var(--ae-color-border-subtle);\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="subtle"]) .tag {\n  background:   var(--ae-color-bg-subtle);\n  border-color: transparent;\n  color:        var(--ae-color-text-subtle);\n}\n\n:host([variant="text"]) .tag {\n  background:   transparent;\n  border-color: transparent;\n  color:        var(--ae-color-accent);\n  padding-left:  0;\n  padding-right: 0;\n}\n\n\n:host([pill]) .tag { border-radius: var(--ae-radius-pill); }\n\n.tag-content {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n::slotted(ae-icon) { font-size: 1.1em; }\n\n.tag-dismiss {\n  display: none;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  opacity: 0.55;\n  line-height: 1;\n  font-size: 1em;\n  padding: 0 1px;\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-family: inherit;\n  transition: opacity 0.1s, background 0.1s;\n}\n\n:host([dismissible]) .tag-dismiss {\n  display: inline-flex;\n}\n\n.tag-dismiss:hover {\n  opacity: 1;\n  background: color-mix(in srgb, currentColor 15%, transparent);\n}\n\n/* disabled: button remains visible but is inert */\n:host([disabled]) .tag-dismiss {\n  opacity: 0.4;\n  pointer-events: none;\n  cursor: default;\n}\n\n:host([disabled]) .tag {\n  opacity: 0.6;\n}\n';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -101,7 +101,7 @@ __decorateElement(_init, 4, "dismissible", _dismissible_dec, Tag, _dismissible);
 __decorateElement(_init, 4, "disabled", _disabled_dec, Tag, _disabled);
 __decorateElement(_init, 4, "pill", _pill_dec, Tag, _pill);
 __decoratorMetadata(_init, Tag);
-__publicField(Tag, "styles", [styleVariables, sizeCSS, colorCSS, tagStyle]);
+__publicField(Tag, "styles", [variables, sizeCSS, colorCSS, tagStyle]);
 Tag.register();
 export {
   Tag as T

package/dist/chunks/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","sources":["../../src/tag/tag.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 tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n *   <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n *   Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n  @prop({ type: String })\n  accessor color: TagColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: TagVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: TagSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor dismissible: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor pill: boolean = false;\n\n  protected render() {\n    return html(({ span, button, slot }) => {\n      span({ part: 'tag', className: 'tag' }, () => {\n        slot({ name: 'start' });\n        span({ className: 'tag-content' }, () => {\n          slot();\n        });\n        slot({ name: 'end' });\n        button(\n          {\n            type: 'button',\n            className: 'tag-dismiss',\n            'aria-label': 'dismiss',\n            '@click': (e: Event) => {\n              e.stopPropagation();\n              if (this.disabled) return;\n              this.emit('dismiss');\n            },\n          },\n          () => {\n            span({ textContent: '\\u00d7' });\n          },\n        );\n      });\n    });\n  }\n}\n\nTag.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tag': Tag;\n  }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,qBAGhB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAAC,gBAAgB,SAAS,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;"}
+{"version":3,"file":"tag.js","sources":["../../src/tag/tag.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 tagStyle from '../styles/components/tag.css?inline';\nimport AeicoComponent from '../aeico-component';\nimport { html } from 'aeico';\nimport type { TagColor, TagSize, TagVariant } from './defines';\nimport { prop } from 'aeico';\n\n/**\n * Tag Component\n *\n * An inline label component with optional dismiss button.\n * Supports the same color, variant, and size options as Button.\n *\n * @example\n * ```html\n * <ae-tag color=\"primary\" variant=\"faint\">Label</ae-tag>\n * <ae-tag color=\"success\" variant=\"outlined\" dismissible>Removable</ae-tag>\n * <ae-tag color=\"danger\" size=\"sm\">\n *   <ae-icon slot=\"start\" name=\"warning\"></ae-icon>\n *   Error\n * </ae-tag>\n * ```\n */\nclass Tag extends AeicoComponent {\n  protected static styles = [styleVariables, sizeCSS, colorCSS, tagStyle];\n\n  @prop({ type: String })\n  accessor color: TagColor | undefined;\n\n  @prop({ type: String })\n  accessor variant: TagVariant | undefined;\n\n  @prop({ type: String })\n  accessor size: TagSize | undefined;\n\n  @prop({ type: Boolean })\n  accessor dismissible: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor disabled: boolean = false;\n\n  @prop({ type: Boolean })\n  accessor pill: boolean = false;\n\n  protected render() {\n    return html(({ span, button, slot }) => {\n      span({ part: 'tag', className: 'tag' }, () => {\n        slot({ name: 'start' });\n        span({ className: 'tag-content' }, () => {\n          slot();\n        });\n        slot({ name: 'end' });\n        button(\n          {\n            type: 'button',\n            className: 'tag-dismiss',\n            'aria-label': 'dismiss',\n            '@click': (e: Event) => {\n              e.stopPropagation();\n              if (this.disabled) return;\n              this.emit('dismiss');\n            },\n          },\n          () => {\n            span({ textContent: '\\u00d7' });\n          },\n        );\n      });\n    });\n  }\n}\n\nTag.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-tag': Tag;\n  }\n}\n\nexport default Tag;\nexport type TagProps = InferProps<typeof Tag>;\n"],"names":["styleVariables"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,WAAA,eAAA,kBAAA,WAAA,cAAA,YAAA,IAAA,OAAA,QAAA,UAAA,OAAA,cAAA,WAAA;AA0BA,MAAM,aAAY,qBAGhB,aAAA,CAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,eAAA,CAAC,KAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,aAAC,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,mBAAA,CAAC,KAAK,EAAE,MAAM,QAAA,CAAS,CAAA,GAGvB,gBAAA,CAAC,KAAK,EAAE,MAAM,SAAS,CAAA,GAGvB,aAAC,KAAK,EAAE,MAAM,QAAA,CAAS,IAlBP,IAAe;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA;AAIE,iBAAA,MAAS,QAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,UAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,cAAuB,kBAAhC,OAAA,IAAA,MAAgC,KAAA,CAAA,GAAhC,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,WAAoB,kBAA7B,OAAA,IAAA,MAA6B,KAAA,CAAA,GAA7B,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAgB,kBAAzB,OAAA,IAAA,MAAyB,KAAA,CAAA,GAAzB,kBAAA,OAAA,IAAA,IAAA;AAAA,EAAA;AAAA,EAEU,SAAS;AACjB,WAAO,KAAK,CAAC,EAAE,MAAM,QAAQ,WAAW;AACtC,WAAK,EAAE,MAAM,OAAO,WAAW,MAAA,GAAS,MAAM;AAC5C,aAAK,EAAE,MAAM,SAAS;AACtB,aAAK,EAAE,WAAW,cAAA,GAAiB,MAAM;AACvC,eAAA;AAAA,QACF,CAAC;AACD,aAAK,EAAE,MAAM,OAAO;AACpB;AAAA,UACE;AAAA,YACE,MAAM;AAAA,YACN,WAAW;AAAA,YACX,cAAc;AAAA,YACd,UAAU,CAAC,MAAa;AACtB,gBAAE,gBAAA;AACF,kBAAI,KAAK,SAAU;AACnB,mBAAK,KAAK,SAAS;AAAA,YACrB;AAAA,UAAA;AAAA,UAEF,MAAM;AACJ,iBAAK,EAAE,aAAa,KAAU;AAAA,UAChC;AAAA,QAAA;AAAA,MAEJ,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AACF;AA/CA,QAAA,iBAAA,EAAA;AAIW,SAAA,oBAAA,QAAA;AAGA,WAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,eAAA,oBAAA,QAAA;AAGA,YAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,SADT,YAHI,KAIK,MAAA;AAGT,kBAAA,OAAA,GAAS,WADT,cANI,KAOK,QAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WATI,KAUK,KAAA;AAGT,kBAAA,OAAA,GAAS,eADT,kBAZI,KAaK,YAAA;AAGT,kBAAA,OAAA,GAAS,YADT,eAfI,KAgBK,SAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WAlBI,KAmBK,KAAA;AAnBX,oBAAA,OAAM,GAAA;AACJ,cADI,KACa,UAAS,CAACA,WAAgB,SAAS,UAAU,QAAQ,CAAA;AAgDxE,IAAI,SAAA;"}

package/dist/chunks/text-input.cjs

@@ -2,41 +2,37 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-const aeicoField = require("./aeico-field.cjs");
+const actionButton = require("./action-button.cjs");
 const aeico = require("aeico");
 const variables = require("./variables.cjs");
 const size = require("./size.cjs");
-const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Clear button styles */\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n/* Reset button styles */\n.reset-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n\n\n";
-class TextInput extends aeicoField.AeicoField {
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n";
+class TextInput extends actionButton.AeicoField {
   constructor() {
     super(...arguments);
     __publicField(this, "fieldElement", null);
   }
   render() {
     return aeico.html(({ div, input }) => {
-      div({ className: "input-container" }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "input-container field-body" }, () => {
         this.fieldElement = input({
+          id,
           type: this.type || "text",
           placeholder: this.placeholder || "",
+          required: Boolean(this.required),
           "@input": this.boundOnChange
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
       if (this.fieldElement && this.value != null) {
         this.fieldElement.value = String(this.value);
       }
-      this.updateClearButtonVisibility();
     });
   }
-  /**
-   * Update clear button visibility based on input value
-   */
-  updateClearButtonVisibility() {
-    if (this.clearBtn && this.fieldElement) {
-      const hasValue = this.fieldElement.value.length > 0;
-      this.clearBtn.style.display = hasValue ? "" : "none";
-    }
-  }
   /**
    * Write value to the input element (DOM only)
    */
@@ -45,7 +41,6 @@ class TextInput extends aeicoField.AeicoField {
     if (this.fieldElement) {
       this.fieldElement.value = strValue;
     }
-    this.updateClearButtonVisibility();
   }
 }
 __publicField(TextInput, "tagName", "text-input");
@@ -53,7 +48,7 @@ __publicField(TextInput, "props", {
   placeholder: { type: String },
   type: { type: String }
 });
-__publicField(TextInput, "styles", [variables.styleVariables, size.sizeCSS, style]);
+__publicField(TextInput, "styles", [variables.variables, size.sizeCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
 TextInput.register();
 exports.TextInput = TextInput;
 //# sourceMappingURL=text-input.cjs.map

package/dist/chunks/text-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.cjs","sources":["../../src/text-input/text-input.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport style from '../styles/components/text-input.css?inline';\n\nclass TextInput extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'text-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    type: { type: String },\n  };\n\n  declare placeholder?: string;\n  declare type?: string;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  render() {\n    return html(({ div, input }) => {\n      div({ className: 'input-container' }, () => {\n        this.fieldElement = input({\n          type: this.type || 'text',\n          placeholder: this.placeholder || '',\n          '@input': this.boundOnChange,\n        });\n\n        this.renderActionButtons();\n      });\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n      this.updateClearButtonVisibility();\n    });\n  }\n\n  /**\n   * Update clear button visibility based on input value\n   */\n  private updateClearButtonVisibility() {\n    if (this.clearBtn && this.fieldElement) {\n      const hasValue = this.fieldElement.value.length > 0;\n      this.clearBtn.style.display = hasValue ? '' : 'none';\n    }\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: string): void {\n    const strValue = String(value || '');\n\n    if (this.fieldElement) {\n      this.fieldElement.value = strValue;\n    }\n\n    this.updateClearButtonVisibility();\n  }\n}\n\nTextInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-text-input': TextInput;\n  }\n}\n\nexport default TextInput;\nexport type TextInputProps = InferProps<typeof TextInput>;\n"],"names":["AeicoField","html","variables","sizeCSS"],"mappings":";;;;;;;;;AAOA,MAAM,kBAAkBA,WAAAA,WAAW;AAAA,EAAnC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAclD,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,UAAI,EAAE,WAAW,kBAAA,GAAqB,MAAM;AAC1C,aAAK,eAAe,MAAM;AAAA,UACxB,MAAM,KAAK,QAAQ;AAAA,UACnB,aAAa,KAAK,eAAe;AAAA,UACjC,UAAU,KAAK;AAAA,QAAA,CAChB;AAED,aAAK,oBAAA;AAAA,MACP,CAAC;AAED,UAAI,KAAK,gBAAgB,KAAK,SAAS,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,MAC7C;AACA,WAAK,4BAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKQ,8BAA8B;AACpC,QAAI,KAAK,YAAY,KAAK,cAAc;AACtC,YAAM,WAAW,KAAK,aAAa,MAAM,SAAS;AAClD,WAAK,SAAS,MAAM,UAAU,WAAW,KAAK;AAAA,IAChD;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKU,WAAW,OAAqB;AACxC,UAAM,WAAW,OAAO,SAAS,EAAE;AAEnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ;AAAA,IAC5B;AAEA,SAAK,4BAAA;AAAA,EACP;AACF;AArDE,cAHI,WAGG,WAAU;AAEjB,cALI,WAKG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAA,EACrB,MAAM,EAAE,MAAM,OAAA;AAAO;AAMvB,cAbI,WAaa,UAAS,CAACC,0BAAWC,KAAAA,SAAS,KAAK;AA6CtD,UAAU,SAAA;;"}
+{"version":3,"file":"text-input.cjs","sources":["../../src/text-input/text-input.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/text-input.css?inline';\n\nclass TextInput extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'text-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    type: { type: String },\n  };\n\n  declare placeholder?: string;\n  declare type?: string;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: this.type || 'text',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          '@input': this.boundOnChange,\n        });\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: string): void {\n    const strValue = String(value || '');\n\n    if (this.fieldElement) {\n      this.fieldElement.value = strValue;\n    }\n  }\n}\n\nTextInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-text-input': TextInput;\n  }\n}\n\nexport default TextInput;\nexport type TextInputProps = InferProps<typeof TextInput>;\n"],"names":["AeicoField","html","variables","sizeCSS","fieldLabelCSS","actionButtonCSS"],"mappings":";;;;;;;;;AASA,MAAM,kBAAkBA,aAAAA,WAAW;AAAA,EAAnC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAclD,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,6BAAA,GAAgC,MAAM;AACrD,aAAK,eAAe,MAAM;AAAA,UACxB;AAAA,UACA,MAAM,KAAK,QAAQ;AAAA,UACnB,aAAa,KAAK,eAAe;AAAA,UACjC,UAAU,QAAQ,KAAK,QAAQ;AAAA,UAC/B,UAAU,KAAK;AAAA,QAAA,CAChB;AAED,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAEL,UAAI,KAAK,gBAAgB,KAAK,SAAS,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,MAC7C;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKU,WAAW,OAAqB;AACxC,UAAM,WAAW,OAAO,SAAS,EAAE;AAEnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ;AAAA,IAC5B;AAAA,EACF;AACF;AA9CE,cAHI,WAGG,WAAU;AAEjB,cALI,WAKG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAA,EACrB,MAAM,EAAE,MAAM,OAAA;AAAO;AAMvB,cAbI,WAaa,UAAS,CAACC,UAAAA,WAAWC,KAAAA,SAASC,aAAAA,eAAeC,aAAAA,iBAAiB,KAAK;AAsCtF,UAAU,SAAA;;"}

package/dist/chunks/text-input.js

@@ -1,11 +1,11 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { A as AeicoField } from "./aeico-field.js";
+import { A as AeicoField, f as fieldLabelCSS, a as actionButtonCSS } from "./action-button.js";
 import { html } from "aeico";
-import { s as styleVariables } from "./variables.js";
+import { v as variables } from "./variables.js";
 import { s as sizeCSS } from "./size.js";
-const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--size-base);\n\n  /* Layout variables */\n  --input-field-gap: 4px;\n  \n  /* Input element variables */\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-border-radius: 2px;\n  --input-border-color: var(--border-subtle);\n  --input-border-color-hover: var(--border-default);\n  --input-border-color-focus: var(--border-focus);\n  --input-bg: var(--surface-base);\n  --input-bg-hover: var(--surface-raised);\n  --input-bg-focus: var(--surface-raised);\n  --input-color: var(--color-text-muted);\n  --input-placeholder-color: var(--color-text-disabled);\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-border-radius);\n  background: var(--input-bg);\n  color: var(--input-color);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--input-placeholder-color);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--input-border-color-focus);\n  background: var(--input-bg-focus);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--input-border-color-hover);\n  background: var(--input-bg-hover);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Clear button styles */\n.clear-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--clear-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--clear-btn-bg);\n  color: var(--clear-btn-color);\n  transition: var(--clear-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background: var(--clear-btn-bg-hover);\n  color: var(--clear-btn-color-hover);\n}\n\n/* Reset button styles */\n.reset-btn {\n  width: 1.333em;\n  height: 1.333em;\n  border: none;\n  border-radius: var(--reset-btn-border-radius);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--reset-btn-bg);\n  color: var(--reset-btn-color);\n  transition: var(--reset-btn-transition);\n  flex-shrink: 0;\n  line-height: 1;\n}\n\n.reset-btn:hover {\n  background: var(--reset-btn-bg-hover);\n  color: var(--reset-btn-color-hover);\n}\n\n\n\n";
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n  --input-field-gap: 4px;\n  --input-font-size: 1em;\n  --input-padding: 0.333em 0.583em;\n  --input-border-width: 1px;\n  --input-transition: border-color 0.12s, background 0.12s;\n}\n\n.input-container {\n  display: flex;\n  align-items: center;\n  gap: var(--input-field-gap);\n  width: 100%;\n}\n\ninput {\n  flex: 1;\n  min-width: 0;\n  font-size: var(--input-font-size);\n  padding: var(--input-padding);\n  border: var(--input-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--input-transition);\n}\n\ninput::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ninput:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ninput:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ninput:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n:host([error]) input {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) input:hover:not(:focus),\n:host([error]) input:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n.input-container:has(.action-controls) input {\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));\n}\n";
 class TextInput extends AeicoField {
   constructor() {
     super(...arguments);
@@ -13,29 +13,25 @@ class TextInput extends AeicoField {
   }
   render() {
     return html(({ div, input }) => {
-      div({ className: "input-container" }, () => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "input-container field-body" }, () => {
         this.fieldElement = input({
+          id,
           type: this.type || "text",
           placeholder: this.placeholder || "",
+          required: Boolean(this.required),
           "@input": this.boundOnChange
         });
         this.renderActionButtons();
       });
+      this.renderHelperText();
+      this.renderError();
       if (this.fieldElement && this.value != null) {
         this.fieldElement.value = String(this.value);
       }
-      this.updateClearButtonVisibility();
     });
   }
-  /**
-   * Update clear button visibility based on input value
-   */
-  updateClearButtonVisibility() {
-    if (this.clearBtn && this.fieldElement) {
-      const hasValue = this.fieldElement.value.length > 0;
-      this.clearBtn.style.display = hasValue ? "" : "none";
-    }
-  }
   /**
    * Write value to the input element (DOM only)
    */
@@ -44,7 +40,6 @@ class TextInput extends AeicoField {
     if (this.fieldElement) {
       this.fieldElement.value = strValue;
     }
-    this.updateClearButtonVisibility();
   }
 }
 __publicField(TextInput, "tagName", "text-input");
@@ -52,7 +47,7 @@ __publicField(TextInput, "props", {
   placeholder: { type: String },
   type: { type: String }
 });
-__publicField(TextInput, "styles", [styleVariables, sizeCSS, style]);
+__publicField(TextInput, "styles", [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style]);
 TextInput.register();
 export {
   TextInput as T

package/dist/chunks/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../src/text-input/text-input.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport style from '../styles/components/text-input.css?inline';\n\nclass TextInput extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'text-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    type: { type: String },\n  };\n\n  declare placeholder?: string;\n  declare type?: string;\n\n  protected static styles = [variables, sizeCSS, style];\n\n  render() {\n    return html(({ div, input }) => {\n      div({ className: 'input-container' }, () => {\n        this.fieldElement = input({\n          type: this.type || 'text',\n          placeholder: this.placeholder || '',\n          '@input': this.boundOnChange,\n        });\n\n        this.renderActionButtons();\n      });\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n      this.updateClearButtonVisibility();\n    });\n  }\n\n  /**\n   * Update clear button visibility based on input value\n   */\n  private updateClearButtonVisibility() {\n    if (this.clearBtn && this.fieldElement) {\n      const hasValue = this.fieldElement.value.length > 0;\n      this.clearBtn.style.display = hasValue ? '' : 'none';\n    }\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: string): void {\n    const strValue = String(value || '');\n\n    if (this.fieldElement) {\n      this.fieldElement.value = strValue;\n    }\n\n    this.updateClearButtonVisibility();\n  }\n}\n\nTextInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-text-input': TextInput;\n  }\n}\n\nexport default TextInput;\nexport type TextInputProps = InferProps<typeof TextInput>;\n"],"names":["variables"],"mappings":";;;;;;;;AAOA,MAAM,kBAAkB,WAAW;AAAA,EAAnC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAclD,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,UAAI,EAAE,WAAW,kBAAA,GAAqB,MAAM;AAC1C,aAAK,eAAe,MAAM;AAAA,UACxB,MAAM,KAAK,QAAQ;AAAA,UACnB,aAAa,KAAK,eAAe;AAAA,UACjC,UAAU,KAAK;AAAA,QAAA,CAChB;AAED,aAAK,oBAAA;AAAA,MACP,CAAC;AAED,UAAI,KAAK,gBAAgB,KAAK,SAAS,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,MAC7C;AACA,WAAK,4BAAA;AAAA,IACP,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKQ,8BAA8B;AACpC,QAAI,KAAK,YAAY,KAAK,cAAc;AACtC,YAAM,WAAW,KAAK,aAAa,MAAM,SAAS;AAClD,WAAK,SAAS,MAAM,UAAU,WAAW,KAAK;AAAA,IAChD;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKU,WAAW,OAAqB;AACxC,UAAM,WAAW,OAAO,SAAS,EAAE;AAEnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ;AAAA,IAC5B;AAEA,SAAK,4BAAA;AAAA,EACP;AACF;AArDE,cAHI,WAGG,WAAU;AAEjB,cALI,WAKG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAA,EACrB,MAAM,EAAE,MAAM,OAAA;AAAO;AAMvB,cAbI,WAaa,UAAS,CAACA,gBAAW,SAAS,KAAK;AA6CtD,UAAU,SAAA;"}
+{"version":3,"file":"text-input.js","sources":["../../src/text-input/text-input.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps, Props } from 'aeico';\nimport { html } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/text-input.css?inline';\n\nclass TextInput extends AeicoField {\n  protected fieldElement: HTMLInputElement | null = null;\n\n  static tagName = 'text-input';\n\n  static props: Props = {\n    placeholder: { type: String },\n    type: { type: String },\n  };\n\n  declare placeholder?: string;\n  declare type?: string;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  render() {\n    return html(({ div, input }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'input-container field-body' }, () => {\n        this.fieldElement = input({\n          id,\n          type: this.type || 'text',\n          placeholder: this.placeholder || '',\n          required: Boolean(this.required),\n          '@input': this.boundOnChange,\n        });\n\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement && this.value != null) {\n        this.fieldElement.value = String(this.value);\n      }\n    });\n  }\n\n  /**\n   * Write value to the input element (DOM only)\n   */\n  protected writeValue(value: string): void {\n    const strValue = String(value || '');\n\n    if (this.fieldElement) {\n      this.fieldElement.value = strValue;\n    }\n  }\n}\n\nTextInput.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-text-input': TextInput;\n  }\n}\n\nexport default TextInput;\nexport type TextInputProps = InferProps<typeof TextInput>;\n"],"names":[],"mappings":";;;;;;;;AASA,MAAM,kBAAkB,WAAW;AAAA,EAAnC;AAAA;AACY,wCAAwC;AAAA;AAAA,EAclD,SAAS;AACP,WAAO,KAAK,CAAC,EAAE,KAAK,YAAY;AAC9B,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,6BAAA,GAAgC,MAAM;AACrD,aAAK,eAAe,MAAM;AAAA,UACxB;AAAA,UACA,MAAM,KAAK,QAAQ;AAAA,UACnB,aAAa,KAAK,eAAe;AAAA,UACjC,UAAU,QAAQ,KAAK,QAAQ;AAAA,UAC/B,UAAU,KAAK;AAAA,QAAA,CAChB;AAED,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAEL,UAAI,KAAK,gBAAgB,KAAK,SAAS,MAAM;AAC3C,aAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,MAC7C;AAAA,IACF,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAKU,WAAW,OAAqB;AACxC,UAAM,WAAW,OAAO,SAAS,EAAE;AAEnC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ;AAAA,IAC5B;AAAA,EACF;AACF;AA9CE,cAHI,WAGG,WAAU;AAEjB,cALI,WAKG,SAAe;AAAA,EACpB,aAAa,EAAE,MAAM,OAAA;AAAA,EACrB,MAAM,EAAE,MAAM,OAAA;AAAO;AAMvB,cAbI,WAaa,UAAS,CAAC,WAAW,SAAS,eAAe,iBAAiB,KAAK;AAsCtF,UAAU,SAAA;"}

package/dist/chunks/textarea.cjs

@@ -0,0 +1,137 @@
+"use strict";
+const actionButton = require("./action-button.cjs");
+const aeico = require("aeico");
+const variables = require("./variables.cjs");
+const size = require("./size.cjs");
+const style = ":host {\n  display: block;\n  flex: 1;\n  min-width: 0;\n  font-size: var(--ae-size-base);\n\n  --textarea-font-size: 1em;\n  --textarea-padding: 0.333em 0.583em;\n  --textarea-border-width: 1px;\n  --textarea-transition: border-color 0.12s, background 0.12s;\n}\n\n.textarea-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n}\n\ntextarea {\n  flex: 1;\n  min-width: 0;\n  width: 100%;\n  box-sizing: border-box;\n  font-size: var(--textarea-font-size);\n  font-family: inherit;\n  line-height: 1.5;\n  padding: var(--textarea-padding);\n  border: var(--textarea-border-width) solid var(--ae-border-subtle);\n  border-radius: var(--ae-border-radius, var(--ae-radius-xs));\n  background: var(--ae-surface-base);\n  color: var(--ae-color-text-muted);\n  transition: var(--textarea-transition);\n  resize: vertical;\n}\n\ntextarea::placeholder {\n  color: var(--ae-color-text-disabled);\n}\n\ntextarea:focus {\n  outline: none;\n  border-color: var(--ae-border-focus);\n  background: var(--ae-surface-raised);\n}\n\ntextarea:hover:not(:focus) {\n  border-color: var(--ae-border-default);\n  background: var(--ae-surface-raised);\n}\n\ntextarea:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  resize: none;\n}\n\n/* Error state */\n:host([error]) textarea {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n\n:host([error]) textarea:hover:not(:focus),\n:host([error]) textarea:focus {\n  border-color: var(--field-error-color, var(--ae-red));\n}\n";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : Symbol.for("Symbol." + name);
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __decoratorStart = (base) => [, , , __create((base == null ? void 0 : base[__knownSymbol("metadata")]) ?? null)];
+var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
+var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
+var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
+var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
+var __runInitializers = (array, flags, self, value) => {
+  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
+  return value;
+};
+var __decorateElement = (array, flags, name, decorators, target, extra) => {
+  var fn, it, done, ctx, access, k = flags & 7, s = false, p = false;
+  var j = array.length + 1, key = __decoratorStrings[k + 5];
+  var initializers = array[j - 1] = [], extraInitializers = array[j] || (array[j] = []);
+  var desc = (target = target.prototype, __getOwnPropDesc({ get [name]() {
+    return __privateGet(this, extra);
+  }, set [name](x) {
+    return __privateSet(this, extra, x);
+  } }, name));
+  for (var i = decorators.length - 1; i >= 0; i--) {
+    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
+    {
+      ctx.static = s, ctx.private = p, access = ctx.access = { has: (x) => name in x };
+      access.get = (x) => x[name];
+      access.set = (x, y) => x[name] = y;
+    }
+    it = (0, decorators[i])({ get: desc.get, set: desc.set }, ctx), done._ = 1;
+    if (it === void 0) __expectFn(it) && (desc[key] = it);
+    else if (typeof it !== "object" || it === null) __typeError("Object expected");
+    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
+  }
+  return desc && __defProp(target, name, desc), target;
+};
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _autoResize_dec, _resize_dec, _minlength_dec, _maxlength_dec, _rows_dec, _placeholder_dec, _a, _init, _placeholder, _rows, _maxlength, _minlength, _resize, _autoResize;
+class Textarea extends (_a = actionButton.AeicoField, _placeholder_dec = [aeico.prop({ type: String })], _rows_dec = [aeico.prop({ type: Number })], _maxlength_dec = [aeico.prop({ type: Number })], _minlength_dec = [aeico.prop({ type: Number })], _resize_dec = [aeico.prop({ type: String })], _autoResize_dec = [aeico.prop({ type: Boolean })], _a) {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "fieldElement", null);
+    __privateAdd(this, _placeholder, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _rows, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
+    __privateAdd(this, _maxlength, __runInitializers(_init, 16, this)), __runInitializers(_init, 19, this);
+    __privateAdd(this, _minlength, __runInitializers(_init, 20, this)), __runInitializers(_init, 23, this);
+    __privateAdd(this, _resize, __runInitializers(_init, 24, this)), __runInitializers(_init, 27, this);
+    __privateAdd(this, _autoResize, __runInitializers(_init, 28, this, false)), __runInitializers(_init, 31, this);
+    __publicField(this, "_boundOnInput", () => {
+      if (this.autoResize && this.fieldElement) {
+        this._syncAutoResize(this.fieldElement);
+      }
+      this.setValue(this.getValue(), { silent: false, action: "change" });
+    });
+  }
+  render() {
+    return aeico.html(({ div, textarea }) => {
+      const id = this.getFieldId();
+      this.renderLabel(id);
+      div({ className: "textarea-container field-body" }, () => {
+        this.fieldElement = textarea({
+          id,
+          placeholder: this.placeholder || "",
+          rows: this.rows ?? 3,
+          required: Boolean(this.required),
+          "@input": this._boundOnInput
+        });
+        this.renderActionButtons();
+      });
+      this.renderHelperText();
+      this.renderError();
+      if (this.fieldElement) {
+        if (this.value != null) {
+          this.fieldElement.value = String(this.value);
+        }
+        if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;
+        if (this.minlength != null) this.fieldElement.minLength = this.minlength;
+        this.fieldElement.style.resize = this.autoResize ? "none" : this.resize ?? "vertical";
+        if (this.autoResize) {
+          this._syncAutoResize(this.fieldElement);
+        }
+        this._updateClearButtonVisibility();
+      }
+    });
+  }
+  _syncAutoResize(ta) {
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  }
+  _updateClearButtonVisibility() {
+    if (this.clearBtn && this.fieldElement) {
+      this.clearBtn.style.display = this.fieldElement.value.length > 0 ? "" : "none";
+    }
+  }
+  writeValue(value) {
+    if (this.fieldElement) {
+      this.fieldElement.value = String(value || "");
+      if (this.autoResize) {
+        this._syncAutoResize(this.fieldElement);
+      }
+      this._updateClearButtonVisibility();
+    }
+  }
+}
+_init = __decoratorStart(_a);
+_placeholder = /* @__PURE__ */ new WeakMap();
+_rows = /* @__PURE__ */ new WeakMap();
+_maxlength = /* @__PURE__ */ new WeakMap();
+_minlength = /* @__PURE__ */ new WeakMap();
+_resize = /* @__PURE__ */ new WeakMap();
+_autoResize = /* @__PURE__ */ new WeakMap();
+__decorateElement(_init, 4, "placeholder", _placeholder_dec, Textarea, _placeholder);
+__decorateElement(_init, 4, "rows", _rows_dec, Textarea, _rows);
+__decorateElement(_init, 4, "maxlength", _maxlength_dec, Textarea, _maxlength);
+__decorateElement(_init, 4, "minlength", _minlength_dec, Textarea, _minlength);
+__decorateElement(_init, 4, "resize", _resize_dec, Textarea, _resize);
+__decorateElement(_init, 4, "autoResize", _autoResize_dec, Textarea, _autoResize);
+__decoratorMetadata(_init, Textarea);
+__publicField(Textarea, "tagName", "textarea");
+__publicField(Textarea, "styles", [variables.variables, size.sizeCSS, actionButton.fieldLabelCSS, actionButton.actionButtonCSS, style]);
+Textarea.register();
+exports.Textarea = Textarea;
+//# sourceMappingURL=textarea.cjs.map

package/dist/chunks/textarea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.cjs","sources":["../../src/textarea/textarea.ts"],"sourcesContent":["import AeicoField from '../aeico-field';\nimport type { InferProps } from 'aeico';\nimport { html, prop } from 'aeico';\nimport variables from '../styles/variables.css?inline';\nimport sizeCSS from '../styles/size.css?inline';\nimport fieldLabelCSS from '../styles/components/field-label.css?inline';\nimport actionButtonCSS from '../styles/components/action-button.css?inline';\nimport style from '../styles/components/textarea.css?inline';\n\nexport type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';\n\nclass Textarea extends AeicoField {\n  protected fieldElement: HTMLTextAreaElement | null = null;\n\n  static tagName = 'textarea';\n\n  @prop({ type: String })\n  accessor placeholder: string | undefined;\n\n  @prop({ type: Number })\n  accessor rows: number | undefined;\n\n  @prop({ type: Number })\n  accessor maxlength: number | undefined;\n\n  @prop({ type: Number })\n  accessor minlength: number | undefined;\n\n  @prop({ type: String })\n  accessor resize: TextareaResize | undefined;\n\n  @prop({ type: Boolean })\n  accessor autoResize: boolean = false;\n\n  protected static styles = [variables, sizeCSS, fieldLabelCSS, actionButtonCSS, style];\n\n  private readonly _boundOnInput = () => {\n    if (this.autoResize && this.fieldElement) {\n      this._syncAutoResize(this.fieldElement);\n    }\n    this.setValue(this.getValue(), { silent: false, action: 'change' });\n  };\n\n  render() {\n    return html(({ div, textarea }) => {\n      const id = this.getFieldId();\n      this.renderLabel(id);\n      div({ className: 'textarea-container field-body' }, () => {\n        this.fieldElement = textarea({\n          id,\n          placeholder: this.placeholder || '',\n          rows: this.rows ?? 3,\n          required: Boolean(this.required),\n          '@input': this._boundOnInput,\n        });\n        this.renderActionButtons();\n      });\n      this.renderHelperText();\n      this.renderError();\n\n      if (this.fieldElement) {\n        if (this.value != null) {\n          this.fieldElement.value = String(this.value);\n        }\n        if (this.maxlength != null) this.fieldElement.maxLength = this.maxlength;\n        if (this.minlength != null) this.fieldElement.minLength = this.minlength;\n        this.fieldElement.style.resize = this.autoResize ? 'none' : (this.resize ?? 'vertical');\n        if (this.autoResize) {\n          this._syncAutoResize(this.fieldElement);\n        }\n        this._updateClearButtonVisibility();\n      }\n    });\n  }\n\n  private _syncAutoResize(ta: HTMLTextAreaElement): void {\n    ta.style.height = 'auto';\n    ta.style.height = `${ta.scrollHeight}px`;\n  }\n\n  private _updateClearButtonVisibility(): void {\n    if (this.clearBtn && this.fieldElement) {\n      this.clearBtn.style.display = this.fieldElement.value.length > 0 ? '' : 'none';\n    }\n  }\n\n  protected writeValue(value: string): void {\n    if (this.fieldElement) {\n      this.fieldElement.value = String(value || '');\n      if (this.autoResize) {\n        this._syncAutoResize(this.fieldElement);\n      }\n      this._updateClearButtonVisibility();\n    }\n  }\n}\n\nTextarea.register();\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ae-textarea': Textarea;\n  }\n}\n\nexport default Textarea;\nexport type TextareaProps = InferProps<typeof Textarea>;\n"],"names":["prop","html","variables","sizeCSS","fieldLabelCSS","actionButtonCSS"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAA,iBAAA,aAAA,gBAAA,gBAAA,WAAA,kBAAA,IAAA,OAAA,cAAA,OAAA,YAAA,YAAA,SAAA;AAWA,MAAM,kBAAiB,8BAKrB,mBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,YAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,kBAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,IAGtB,iBAAA,CAACA,MAAAA,KAAK,EAAE,MAAM,OAAA,CAAQ,CAAA,GAGtB,cAAA,CAACA,WAAK,EAAE,MAAM,QAAQ,CAAA,GAGtB,mBAACA,MAAAA,KAAK,EAAE,MAAM,QAAA,CAAS,IApBF,IAAW;AAAA,EAAlC,cAAA;AAAA,UAAA,GAAA,SAAA;AACE,kBAAA,MAAU,gBAA2C,IAAA;AAKrD,iBAAA,MAAS,cAAT,kBAAA,OAAA,GAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,OAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,YAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,SAAT,kBAAA,OAAA,IAAA,IAAA,CAAA,GAAA,kBAAA,OAAA,IAAA,IAAA;AAGA,iBAAA,MAAS,aAAsB,kBAA/B,OAAA,IAAA,MAA+B,KAAA,CAAA,GAA/B,kBAAA,OAAA,IAAA,IAAA;AAIA,kBAAA,MAAiB,iBAAgB,MAAM;AACrC,UAAI,KAAK,cAAc,KAAK,cAAc;AACxC,aAAK,gBAAgB,KAAK,YAAY;AAAA,MACxC;AACA,WAAK,SAAS,KAAK,SAAA,GAAY,EAAE,QAAQ,OAAO,QAAQ,UAAU;AAAA,IACpE,CAAA;AAAA,EAAA;AAAA,EAEA,SAAS;AACP,WAAOC,WAAK,CAAC,EAAE,KAAK,eAAe;AACjC,YAAM,KAAK,KAAK,WAAA;AAChB,WAAK,YAAY,EAAE;AACnB,UAAI,EAAE,WAAW,gCAAA,GAAmC,MAAM;AACxD,aAAK,eAAe,SAAS;AAAA,UAC3B;AAAA,UACA,aAAa,KAAK,eAAe;AAAA,UACjC,MAAM,KAAK,QAAQ;AAAA,UACnB,UAAU,QAAQ,KAAK,QAAQ;AAAA,UAC/B,UAAU,KAAK;AAAA,QAAA,CAChB;AACD,aAAK,oBAAA;AAAA,MACP,CAAC;AACD,WAAK,iBAAA;AACL,WAAK,YAAA;AAEL,UAAI,KAAK,cAAc;AACrB,YAAI,KAAK,SAAS,MAAM;AACtB,eAAK,aAAa,QAAQ,OAAO,KAAK,KAAK;AAAA,QAC7C;AACA,YAAI,KAAK,aAAa,KAAM,MAAK,aAAa,YAAY,KAAK;AAC/D,YAAI,KAAK,aAAa,KAAM,MAAK,aAAa,YAAY,KAAK;AAC/D,aAAK,aAAa,MAAM,SAAS,KAAK,aAAa,SAAU,KAAK,UAAU;AAC5E,YAAI,KAAK,YAAY;AACnB,eAAK,gBAAgB,KAAK,YAAY;AAAA,QACxC;AACA,aAAK,6BAAA;AAAA,MACP;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEQ,gBAAgB,IAA+B;AACrD,OAAG,MAAM,SAAS;AAClB,OAAG,MAAM,SAAS,GAAG,GAAG,YAAY;AAAA,EACtC;AAAA,EAEQ,+BAAqC;AAC3C,QAAI,KAAK,YAAY,KAAK,cAAc;AACtC,WAAK,SAAS,MAAM,UAAU,KAAK,aAAa,MAAM,SAAS,IAAI,KAAK;AAAA,IAC1E;AAAA,EACF;AAAA,EAEU,WAAW,OAAqB;AACxC,QAAI,KAAK,cAAc;AACrB,WAAK,aAAa,QAAQ,OAAO,SAAS,EAAE;AAC5C,UAAI,KAAK,YAAY;AACnB,aAAK,gBAAgB,KAAK,YAAY;AAAA,MACxC;AACA,WAAK,6BAAA;AAAA,IACP;AAAA,EACF;AACF;AApFA,QAAA,iBAAA,EAAA;AAMW,eAAA,oBAAA,QAAA;AAGA,QAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,aAAA,oBAAA,QAAA;AAGA,UAAA,oBAAA,QAAA;AAGA,cAAA,oBAAA,QAAA;AAfT,kBAAA,OAAA,GAAS,eADT,kBALI,UAMK,YAAA;AAGT,kBAAA,OAAA,GAAS,QADT,WARI,UASK,KAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBAXI,UAYK,UAAA;AAGT,kBAAA,OAAA,GAAS,aADT,gBAdI,UAeK,UAAA;AAGT,kBAAA,OAAA,GAAS,UADT,aAjBI,UAkBK,OAAA;AAGT,kBAAA,OAAA,GAAS,cADT,iBApBI,UAqBK,WAAA;AArBX,oBAAA,OAAM,QAAA;AAGJ,cAHI,UAGG,WAAU,UAAA;AAoBjB,cAvBI,UAuBa,UAAS,CAACC,UAAAA,WAAWC,KAAAA,SAASC,4BAAeC,aAAAA,iBAAiB,KAAK,CAAA;AA+DtF,SAAS,SAAA;;"}