dap-design-system 0.61.0 → 0.61.2

package/dist/components/icon-button/icon-button.component.js

@@ -1,29 +1,29 @@
-import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
 import "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as a } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as u } from "../../node_modules/lit-html/directives/if-defined.js";
+import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
 import { html as d } from "../../node_modules/lit-html/static.js";
 import { DdsElement as m } from "../../internal/dds-hu-element.js";
 import { SizedMixin as S } from "../../internal/mixin/sizedMixin.js";
 import b from "../icon/icon.component.js";
 import z from "./icon-button.scss.js";
 import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, r = (h, t, e, s) => {
-  for (var n = void 0, i = h.length - 1, l; i >= 0; i--)
-    (l = h[i]) && (n = l(t, e, n) || n);
+var v = Object.defineProperty, r = (h, t, e, i) => {
+  for (var n = void 0, s = h.length - 1, l; s >= 0; s--)
+    (l = h[s]) && (n = l(t, e, n) || n);
   return n && v(t, e, n), n;
 };
-const L = S(m), c = class c extends L {
+const g = S(m), c = class c extends g {
   constructor() {
     super(), this.variant = "neutral", this.clean = !1, this.disabled = !1, this.htmlType = "button", this._ariaLabelForButton = null, this.handleSlotChange = () => {
       if (this.shadowRoot) {
         const t = this.shadowRoot.querySelector("slot");
         if (t) {
           const e = t.assignedElements({ flatten: !0 });
-          for (const s of e)
-            s instanceof HTMLSlotElement && (s.__ddsSlotListenerAdded || (s.addEventListener("slotchange", this.handleSlotChange), s.__ddsSlotListenerAdded = !0));
+          for (const i of e)
+            i instanceof HTMLSlotElement && (i.__ddsSlotListenerAdded || (i.addEventListener("slotchange", this.handleSlotChange), i.__ddsSlotListenerAdded = !0));
         }
       }
       this.applySizeToSlotIcons();
@@ -38,23 +38,23 @@ const L = S(m), c = class c extends L {
    * Recursively finds all icon elements in slots and nested slots
    */
   findIconElementsInSlot(t) {
-    const e = [], s = t.assignedElements({ flatten: !0 }), n = t.assignedNodes({ flatten: !0 });
-    for (const i of s)
-      if (i.tagName === "DAP-DS-ICON")
-        e.push(i);
-      else if (i instanceof HTMLSlotElement)
-        e.push(...this.findIconElementsInSlot(i));
-      else if (i.children) {
+    const e = [], i = t.assignedElements({ flatten: !0 }), n = t.assignedNodes({ flatten: !0 });
+    for (const s of i)
+      if (s.tagName === "DAP-DS-ICON")
+        e.push(s);
+      else if (s instanceof HTMLSlotElement)
+        e.push(...this.findIconElementsInSlot(s));
+      else if (s.children) {
         const l = Array.from(
-          i.querySelectorAll("dap-ds-icon")
+          s.querySelectorAll("dap-ds-icon")
         );
         e.push(...l);
       }
-    for (const i of n)
-      if (i instanceof Element && i.tagName === "DAP-DS-ICON")
-        e.includes(i) || e.push(i);
-      else if (i instanceof Element) {
-        const l = Array.from(i.querySelectorAll("dap-ds-icon"));
+    for (const s of n)
+      if (s instanceof Element && s.tagName === "DAP-DS-ICON")
+        e.includes(s) || e.push(s);
+      else if (s instanceof Element) {
+        const l = Array.from(s.querySelectorAll("dap-ds-icon"));
         for (const f of l)
           e.includes(f) || e.push(f);
       }
@@ -68,8 +68,8 @@ const L = S(m), c = class c extends L {
     const t = this.shadowRoot.querySelector("slot");
     if (!t) return;
     const e = this.findIconElementsInSlot(t);
-    for (const s of e)
-      this.iconSize !== void 0 ? (s.setAttribute("staticSize", this.iconSize.toString()), s.setAttribute("size", this.iconSize.toString())) : (s.setAttribute("size", this.effectiveSize), s.removeAttribute("staticSize"));
+    for (const i of e)
+      this.iconSize !== void 0 ? (i.setAttribute("staticSize", this.iconSize.toString()), i.setAttribute("size", this.iconSize.toString())) : (i.setAttribute("size", this.effectiveSize), i.removeAttribute("staticSize"));
   }
   /**
    * Sets up slotchange listeners for the main slot and any nested slots
@@ -77,8 +77,8 @@ const L = S(m), c = class c extends L {
   setupSlotListeners(t) {
     t.addEventListener("slotchange", this.handleSlotChange);
     const e = t.assignedElements({ flatten: !0 });
-    for (const s of e)
-      s instanceof HTMLSlotElement && (s.addEventListener("slotchange", this.handleSlotChange), s.__ddsSlotListenerAdded = !0);
+    for (const i of e)
+      i instanceof HTMLSlotElement && (i.addEventListener("slotchange", this.handleSlotChange), i.__ddsSlotListenerAdded = !0);
   }
   firstUpdated(t) {
     if (super.firstUpdated(t), this.shadowRoot) {
@@ -90,7 +90,10 @@ const L = S(m), c = class c extends L {
     });
   }
   updated(t) {
-    super.updated(t), this.ariaLabel != null && this.ariaLabel !== "" ? this._ariaLabelForButton = this.ariaLabel : t.has("ariaLabel") && (this._ariaLabelForButton = null), this.removeAttribute("aria-label"), (t.has("size") || t.has("sizeMap") || t.has("iconSize") || this.sizeMap) && requestAnimationFrame(() => {
+    var i;
+    super.updated(t);
+    const e = (i = this.getAttribute("aria-label")) != null ? i : this.ariaLabel;
+    e != null && e !== "" && (this._ariaLabelForButton = e), this.removeAttribute("aria-label"), (t.has("size") || t.has("sizeMap") || t.has("iconSize") || this.sizeMap) && requestAnimationFrame(() => {
       this.applySizeToSlotIcons();
     });
   }
@@ -104,8 +107,8 @@ const L = S(m), c = class c extends L {
         part="base"
         .disabled=${this.disabled}
         type=${this.htmlType}
-        aria-label=${u(this.effectiveAriaLabel) || ""}
-        class=${p(
+        aria-label=${p(this.effectiveAriaLabel) || ""}
+        class=${u(
       "icon-button",
       {
         [`icon-button--${this.effectiveSize}`]: this.effectiveSize && this.iconSize === void 0
@@ -121,7 +124,7 @@ const L = S(m), c = class c extends L {
               exportparts="icon, base: icon-base"
               name="${this.icon}"
               aria-hidden="true"
-              staticSize=${u(this.iconSize)}
+              staticSize=${p(this.iconSize)}
               size=${this.effectiveSize === "xxs" ? "xs" : this.effectiveSize}>
             </dap-ds-icon>` : d` <slot></slot> `}
       </button>

package/dist/components/icon-button/icon-button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.component.js","sources":["../../../src/components/icon-button/icon-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './icon-button.scss?inline'\n\nconst IconButtonBaseWithSized = SizedMixin(DdsElement)\n\nexport type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'\nexport type HtmlButtonType = 'button' | 'submit' | 'reset'\nexport type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nexport default class DapDSIconButton extends IconButtonBaseWithSized {\n  static tagName = 'dap-ds-icon-button'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The type of the button.\n   * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}\n   */\n  @property({ reflect: true }) variant?: ButtonVariant = 'neutral'\n\n  /** Adds a transparent background to the button */\n  @property({ type: Boolean, reflect: true }) clean? = false\n\n  /**\n   * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.\n   */\n  @property({ type: Number }) iconSize: number\n\n  constructor() {\n    super()\n    this.size = 'md' as ButtonSize\n  }\n\n  /** The disabled state of the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /**\n   * The type of the button.\n   * @type {'button' | 'submit' | 'reset'}\n   */\n  @property() htmlType: HtmlButtonType = 'button'\n\n  /** The icon of the button. You can use the icon names from the icon component */\n  @property() icon: string\n\n  /** The name of the button */\n  @property() name: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n  private _ariaLabelForButton: string | null = null\n\n  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n  private get effectiveAriaLabel(): string | null {\n    return this.ariaLabel ?? this._ariaLabelForButton\n  }\n\n  /**\n   * Recursively finds all icon elements in slots and nested slots\n   */\n  private findIconElementsInSlot(slot: HTMLSlotElement): Element[] {\n    const iconElements: Element[] = []\n\n    // Get both assigned elements and nodes (to catch all content)\n    const assignedElements = slot.assignedElements({ flatten: true })\n    const assignedNodes = slot.assignedNodes({ flatten: true })\n\n    // First, check assigned elements\n    for (const element of assignedElements) {\n      // If it's an icon element, add it\n      if (element.tagName === 'DAP-DS-ICON') {\n        iconElements.push(element)\n      }\n      // If it's a nested slot, recursively find icons in it\n      else if (element instanceof HTMLSlotElement) {\n        iconElements.push(...this.findIconElementsInSlot(element))\n      }\n      // If it's a custom element, search for icons in its light DOM children\n      // (slot default content appears in light DOM)\n      else if (element.children) {\n        const lightDomIcons = Array.from(\n          element.querySelectorAll('dap-ds-icon'),\n        )\n        iconElements.push(...lightDomIcons)\n      }\n    }\n\n    // Also check assigned nodes for icon elements (in case they're not in assignedElements)\n    for (const node of assignedNodes) {\n      if (node instanceof Element && node.tagName === 'DAP-DS-ICON') {\n        if (!iconElements.includes(node)) {\n          iconElements.push(node)\n        }\n      }\n      // Check children of element nodes\n      else if (node instanceof Element) {\n        const childIcons = Array.from(node.querySelectorAll('dap-ds-icon'))\n        for (const icon of childIcons) {\n          if (!iconElements.includes(icon)) {\n            iconElements.push(icon)\n          }\n        }\n      }\n    }\n\n    return iconElements\n  }\n\n  /**\n   * Applies size props to all icon elements in the slot\n   */\n  private applySizeToSlotIcons(): void {\n    if (!this.shadowRoot) return\n\n    const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n    if (!iconSlot) return\n\n    const iconElements = this.findIconElementsInSlot(iconSlot)\n\n    for (const iconElement of iconElements) {\n      if (this.iconSize !== undefined) {\n        iconElement.setAttribute('staticSize', this.iconSize.toString())\n        iconElement.setAttribute('size', this.iconSize.toString())\n      } else {\n        iconElement.setAttribute('size', this.effectiveSize)\n        iconElement.removeAttribute('staticSize')\n      }\n    }\n  }\n\n  /**\n   * Handles slot change events to update icon sizes\n   */\n  private handleSlotChange = (): void => {\n    // Set up listeners on any newly assigned nested slots\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        const assignedElements = iconSlot.assignedElements({ flatten: true })\n        for (const element of assignedElements) {\n          if (element instanceof HTMLSlotElement) {\n            // Check if we already have a listener on this slot\n            if (!(element as any).__ddsSlotListenerAdded) {\n              element.addEventListener('slotchange', this.handleSlotChange)\n              ;(element as any).__ddsSlotListenerAdded = true\n            }\n          }\n        }\n      }\n    }\n\n    // Apply size to icons\n    this.applySizeToSlotIcons()\n  }\n\n  /**\n   * Sets up slotchange listeners for the main slot and any nested slots\n   */\n  private setupSlotListeners(slot: HTMLSlotElement): void {\n    slot.addEventListener('slotchange', this.handleSlotChange)\n\n    // Also listen to nested slots that are already assigned\n    const assignedElements = slot.assignedElements({ flatten: true })\n    for (const element of assignedElements) {\n      if (element instanceof HTMLSlotElement) {\n        element.addEventListener('slotchange', this.handleSlotChange)\n        ;(element as any).__ddsSlotListenerAdded = true\n      }\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        this.setupSlotListeners(iconSlot)\n      }\n    }\n\n    // Use requestAnimationFrame to ensure slots are fully assigned\n    requestAnimationFrame(() => {\n      this.applySizeToSlotIcons()\n    })\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Persist value before removing host attribute so the inner button keeps it\n    if (this.ariaLabel != null && this.ariaLabel !== '') {\n      this._ariaLabelForButton = this.ariaLabel\n    } else if (changedProperties.has('ariaLabel')) {\n      this._ariaLabelForButton = null\n    }\n    this.removeAttribute('aria-label')\n\n    // Update slot icons when size, sizeMap, or iconSize changes (sizeMap drives effectiveSize on viewport change)\n    if (\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('iconSize') ||\n      this.sizeMap\n    ) {\n      requestAnimationFrame(() => {\n        this.applySizeToSlotIcons()\n      })\n    }\n  }\n\n  focus() {\n    this.shadowRoot?.querySelector('button')?.focus()\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        type=${this.htmlType}\n        aria-label=${ifDefined(this.effectiveAriaLabel) || ''}\n        class=${clsx(\n          'icon-button',\n          {\n            [`icon-button--${this.effectiveSize}`]:\n              this.effectiveSize && this.iconSize === undefined,\n          },\n          { [`icon-button--${this.size}`]: this.size },\n          { 'icon-button--disabled': this.disabled },\n          { 'icon-button--clean': this.clean },\n          `icon-button--${this.variant}`,\n        )}>\n        <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n        ${this.icon\n          ? html` <dap-ds-icon\n              part=\"content\"\n              exportparts=\"icon, base: icon-base\"\n              name=\"${this.icon}\"\n              aria-hidden=\"true\"\n              staticSize=${ifDefined(this.iconSize)}\n              size=${(this.effectiveSize === 'xxs'\n                ? 'xs'\n                : this.effectiveSize) as ButtonSize}>\n            </dap-ds-icon>`\n          : html` <slot></slot> `}\n      </button>\n    `\n  }\n}\n"],"names":["IconButtonBaseWithSized","SizedMixin","DdsElement","_DapDSIconButton","iconSlot","assignedElements","element","_a","slot","iconElements","assignedNodes","lightDomIcons","node","childIcons","icon","iconElement","_changedProperties","changedProperties","_b","html","ifDefined","clsx","DapDSIcon","unsafeCSS","styles","DapDSIconButton","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAMA,IAA0BC,EAAWC,CAAU,GAyDhCC,IAArB,MAAqBA,UAAwBH,EAAwB;AAAA,EAoBnE,cAAc;AACN,UAAA,GAX+C,KAAA,UAAA,WAGF,KAAA,QAAA,IAaE,KAAA,WAAA,IAMhB,KAAA,WAAA,UAWvC,KAAQ,sBAAqC,MAmF7C,KAAQ,mBAAmB,MAAY;AAErC,UAAI,KAAK,YAAY;AACnB,cAAMI,IAAW,KAAK,WAAW,cAAc,MAAM;AACrD,YAAIA,GAAU;AACZ,gBAAMC,IAAmBD,EAAS,iBAAiB,EAAE,SAAS,IAAM;AACpE,qBAAWE,KAAWD;AACpB,YAAIC,aAAmB,oBAEfA,EAAgB,2BACZA,EAAA,iBAAiB,cAAc,KAAK,gBAAgB,GAC1DA,EAAgB,yBAAyB;AAAA,QAGjD;AAAA,MACF;AAIF,WAAK,qBAAqB;AAAA,IAC5B,GA5HE,KAAK,OAAO;AAAA,EAAA;AAAA;AAAA,EAwBd,IAAY,qBAAoC;;AACvC,YAAAC,IAAA,KAAK,cAAL,OAAAA,IAAkB,KAAK;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMxB,uBAAuBC,GAAkC;AAC/D,UAAMC,IAA0B,CAAC,GAG3BJ,IAAmBG,EAAK,iBAAiB,EAAE,SAAS,IAAM,GAC1DE,IAAgBF,EAAK,cAAc,EAAE,SAAS,IAAM;AAG1D,eAAWF,KAAWD;AAEhB,UAAAC,EAAQ,YAAY;AACtB,QAAAG,EAAa,KAAKH,CAAO;AAAA,eAGlBA,aAAmB;AAC1B,QAAAG,EAAa,KAAK,GAAG,KAAK,uBAAuBH,CAAO,CAAC;AAAA,eAIlDA,EAAQ,UAAU;AACzB,cAAMK,IAAgB,MAAM;AAAA,UAC1BL,EAAQ,iBAAiB,aAAa;AAAA,QACxC;AACa,QAAAG,EAAA,KAAK,GAAGE,CAAa;AAAA,MAAA;AAKtC,eAAWC,KAAQF;AACjB,UAAIE,aAAgB,WAAWA,EAAK,YAAY;AAC9C,QAAKH,EAAa,SAASG,CAAI,KAC7BH,EAAa,KAAKG,CAAI;AAAA,eAIjBA,aAAgB,SAAS;AAChC,cAAMC,IAAa,MAAM,KAAKD,EAAK,iBAAiB,aAAa,CAAC;AAClE,mBAAWE,KAAQD;AACjB,UAAKJ,EAAa,SAASK,CAAI,KAC7BL,EAAa,KAAKK,CAAI;AAAA,MAE1B;AAIG,WAAAL;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,EAMD,uBAA6B;AAC/B,QAAA,CAAC,KAAK,WAAY;AAEtB,UAAML,IAAW,KAAK,WAAW,cAAc,MAAM;AACrD,QAAI,CAACA,EAAU;AAET,UAAAK,IAAe,KAAK,uBAAuBL,CAAQ;AAEzD,eAAWW,KAAeN;AACpB,MAAA,KAAK,aAAa,UACpBM,EAAY,aAAa,cAAc,KAAK,SAAS,UAAU,GAC/DA,EAAY,aAAa,QAAQ,KAAK,SAAS,UAAU,MAE7CA,EAAA,aAAa,QAAQ,KAAK,aAAa,GACnDA,EAAY,gBAAgB,YAAY;AAAA,EAE5C;AAAA;AAAA;AAAA;AAAA,EA+BM,mBAAmBP,GAA6B;AACjD,IAAAA,EAAA,iBAAiB,cAAc,KAAK,gBAAgB;AAGzD,UAAMH,IAAmBG,EAAK,iBAAiB,EAAE,SAAS,IAAM;AAChE,eAAWF,KAAWD;AACpB,MAAIC,aAAmB,oBACbA,EAAA,iBAAiB,cAAc,KAAK,gBAAgB,GAC1DA,EAAgB,yBAAyB;AAAA,EAE/C;AAAA,EAGQ,aACRU,GACM;AAGN,QAFA,MAAM,aAAaA,CAAkB,GAEjC,KAAK,YAAY;AACnB,YAAMZ,IAAW,KAAK,WAAW,cAAc,MAAM;AACrD,MAAIA,KACF,KAAK,mBAAmBA,CAAQ;AAAA,IAClC;AAIF,0BAAsB,MAAM;AAC1B,WAAK,qBAAqB;AAAA,IAAA,CAC3B;AAAA,EAAA;AAAA,EAGO,QACRa,GACM;AACN,UAAM,QAAQA,CAAiB,GAG3B,KAAK,aAAa,QAAQ,KAAK,cAAc,KAC/C,KAAK,sBAAsB,KAAK,YACvBA,EAAkB,IAAI,WAAW,MAC1C,KAAK,sBAAsB,OAE7B,KAAK,gBAAgB,YAAY,IAI/BA,EAAkB,IAAI,MAAM,KAC5BA,EAAkB,IAAI,SAAS,KAC/BA,EAAkB,IAAI,UAAU,KAChC,KAAK,YAEL,sBAAsB,MAAM;AAC1B,WAAK,qBAAqB;AAAA,IAAA,CAC3B;AAAA,EACH;AAAA,EAGF,QAAQ;;AACN,KAAAC,KAAAX,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,cAA/B,QAAAW,EAA0C;AAAA,EAAM;AAAA,EAGlD,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,oBAGS,KAAK,QAAQ;AAAA,eAClB,KAAK,QAAQ;AAAA,qBACPC,EAAU,KAAK,kBAAkB,KAAK,EAAE;AAAA,gBAC7CC;AAAA,MACN;AAAA,MACA;AAAA,QACE,CAAC,gBAAgB,KAAK,aAAa,EAAE,GACnC,KAAK,iBAAiB,KAAK,aAAa;AAAA,MAC5C;AAAA,MACA,EAAE,CAAC,gBAAgB,KAAK,IAAI,EAAE,GAAG,KAAK,KAAK;AAAA,MAC3C,EAAE,yBAAyB,KAAK,SAAS;AAAA,MACzC,EAAE,sBAAsB,KAAK,MAAM;AAAA,MACnC,gBAAgB,KAAK,OAAO;AAAA,IAAA,CAC7B;AAAA;AAAA,UAEC,KAAK,OACHF;AAAAA;AAAAA;AAAAA,sBAGU,KAAK,IAAI;AAAA;AAAA,2BAEJC,EAAU,KAAK,QAAQ,CAAC;AAAA,qBAC7B,KAAK,kBAAkB,QAC3B,OACA,KAAK,aAA4B;AAAA,8BAEvCD,kBAAqB;AAAA;AAAA;AAAA,EAAA;AAIjC;AArPEhB,EAAO,UAAU,sBAEjBA,EAAO,eAAe;AAAA,EACpB,eAAemB;AACjB,GAmCgBnB,EAAA,SAASoB,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBtB;AAU+BuB,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAVRF,EAUU,WAAA,SAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAbvBF,EAayB,WAAA,OAAA;AAKhBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAlBPF,EAkBS,WAAA,UAAA;AAQgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GA1BvBF,EA0ByB,WAAA,UAAA;AAMhCC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAhCSF,EAgCP,WAAA,UAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAnCSF,EAmCP,WAAA,MAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAtCSF,EAsCP,WAAA,MAAA;"}
+{"version":3,"file":"icon-button.component.js","sources":["../../../src/components/icon-button/icon-button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { Size } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport { SizedMixin } from '../../internal/mixin/sizedMixin'\nimport DapDSIcon from '../icon/icon.component'\nimport styles from './icon-button.scss?inline'\n\nconst IconButtonBaseWithSized = SizedMixin(DdsElement)\n\nexport type ButtonVariant = 'neutral' | 'brand' | 'inverted' | 'inverted-brand'\nexport type HtmlButtonType = 'button' | 'submit' | 'reset'\nexport type ButtonSize = Extract<Size, 'lg' | 'md' | 'sm' | 'xs'>\n\n/**\n * `dap-ds-icon-button`\n * @summary An icon button is a button with an icon.\n * @element dap-ds-icon-button\n * @title - Icon button\n *\n * @property {string} ariaLabel - The aria label of the button.\n *\n * @slot - The icon of the button.\n *\n * @csspart base - The main button container.\n * @csspart content - The icon of the button.\n * @csspart icon - The icon of the icon.\n * @csspart icon-base - The base of the icon.\n *\n * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base))\n * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500))\n * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large))\n * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge))\n * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all))\n * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer)\n * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed)\n * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0))\n * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100))\n * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50))\n * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25))\n * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800))\n * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600))\n * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400))\n * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300))\n * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle))\n * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base))\n * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base))\n * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium))\n * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled))\n * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle))\n * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base))\n * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium))\n * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled))\n * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent)\n */\nexport default class DapDSIconButton extends IconButtonBaseWithSized {\n  static tagName = 'dap-ds-icon-button'\n\n  static dependencies = {\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The type of the button.\n   * @type {'neutral' | 'brand' | 'inverted' | 'inverted-brand'}\n   */\n  @property({ reflect: true }) variant?: ButtonVariant = 'neutral'\n\n  /** Adds a transparent background to the button */\n  @property({ type: Boolean, reflect: true }) clean? = false\n\n  /**\n   * The size of the icon in pixels. By default the icon gets the size of the button. This property overwrites the size of the icon.\n   */\n  @property({ type: Number }) iconSize: number\n\n  constructor() {\n    super()\n    this.size = 'md' as ButtonSize\n  }\n\n  /** The disabled state of the button. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /**\n   * The type of the button.\n   * @type {'button' | 'submit' | 'reset'}\n   */\n  @property() htmlType: HtmlButtonType = 'button'\n\n  /** The icon of the button. You can use the icon names from the icon component */\n  @property() icon: string\n\n  /** The name of the button */\n  @property() name: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n  private _ariaLabelForButton: string | null = null\n\n  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n  private get effectiveAriaLabel(): string | null {\n    return this.ariaLabel ?? this._ariaLabelForButton\n  }\n\n  /**\n   * Recursively finds all icon elements in slots and nested slots\n   */\n  private findIconElementsInSlot(slot: HTMLSlotElement): Element[] {\n    const iconElements: Element[] = []\n\n    // Get both assigned elements and nodes (to catch all content)\n    const assignedElements = slot.assignedElements({ flatten: true })\n    const assignedNodes = slot.assignedNodes({ flatten: true })\n\n    // First, check assigned elements\n    for (const element of assignedElements) {\n      // If it's an icon element, add it\n      if (element.tagName === 'DAP-DS-ICON') {\n        iconElements.push(element)\n      }\n      // If it's a nested slot, recursively find icons in it\n      else if (element instanceof HTMLSlotElement) {\n        iconElements.push(...this.findIconElementsInSlot(element))\n      }\n      // If it's a custom element, search for icons in its light DOM children\n      // (slot default content appears in light DOM)\n      else if (element.children) {\n        const lightDomIcons = Array.from(\n          element.querySelectorAll('dap-ds-icon'),\n        )\n        iconElements.push(...lightDomIcons)\n      }\n    }\n\n    // Also check assigned nodes for icon elements (in case they're not in assignedElements)\n    for (const node of assignedNodes) {\n      if (node instanceof Element && node.tagName === 'DAP-DS-ICON') {\n        if (!iconElements.includes(node)) {\n          iconElements.push(node)\n        }\n      }\n      // Check children of element nodes\n      else if (node instanceof Element) {\n        const childIcons = Array.from(node.querySelectorAll('dap-ds-icon'))\n        for (const icon of childIcons) {\n          if (!iconElements.includes(icon)) {\n            iconElements.push(icon)\n          }\n        }\n      }\n    }\n\n    return iconElements\n  }\n\n  /**\n   * Applies size props to all icon elements in the slot\n   */\n  private applySizeToSlotIcons(): void {\n    if (!this.shadowRoot) return\n\n    const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n    if (!iconSlot) return\n\n    const iconElements = this.findIconElementsInSlot(iconSlot)\n\n    for (const iconElement of iconElements) {\n      if (this.iconSize !== undefined) {\n        iconElement.setAttribute('staticSize', this.iconSize.toString())\n        iconElement.setAttribute('size', this.iconSize.toString())\n      } else {\n        iconElement.setAttribute('size', this.effectiveSize)\n        iconElement.removeAttribute('staticSize')\n      }\n    }\n  }\n\n  /**\n   * Handles slot change events to update icon sizes\n   */\n  private handleSlotChange = (): void => {\n    // Set up listeners on any newly assigned nested slots\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        const assignedElements = iconSlot.assignedElements({ flatten: true })\n        for (const element of assignedElements) {\n          if (element instanceof HTMLSlotElement) {\n            // Check if we already have a listener on this slot\n            if (!(element as any).__ddsSlotListenerAdded) {\n              element.addEventListener('slotchange', this.handleSlotChange)\n              ;(element as any).__ddsSlotListenerAdded = true\n            }\n          }\n        }\n      }\n    }\n\n    // Apply size to icons\n    this.applySizeToSlotIcons()\n  }\n\n  /**\n   * Sets up slotchange listeners for the main slot and any nested slots\n   */\n  private setupSlotListeners(slot: HTMLSlotElement): void {\n    slot.addEventListener('slotchange', this.handleSlotChange)\n\n    // Also listen to nested slots that are already assigned\n    const assignedElements = slot.assignedElements({ flatten: true })\n    for (const element of assignedElements) {\n      if (element instanceof HTMLSlotElement) {\n        element.addEventListener('slotchange', this.handleSlotChange)\n        ;(element as any).__ddsSlotListenerAdded = true\n      }\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n\n    if (this.shadowRoot) {\n      const iconSlot = this.shadowRoot.querySelector('slot') as HTMLSlotElement\n      if (iconSlot) {\n        this.setupSlotListeners(iconSlot)\n      }\n    }\n\n    // Use requestAnimationFrame to ensure slots are fully assigned\n    requestAnimationFrame(() => {\n      this.applySizeToSlotIcons()\n    })\n  }\n\n  protected updated(\n    changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    // Persist value before removing host attribute so the inner button keeps it.\n    // Read the attribute string directly: the native `ariaLabel` getter is empty\n    // once the attribute is stripped, and Lit's AttributePart caches the value so\n    // it is never re-applied to the host on later re-renders (e.g. when the button\n    // toggles disabled). Fall back to the native property for consumers that set it\n    // via `.ariaLabel`. Only overwrite when a value is actually present so the\n    // persisted label survives re-renders that no longer carry the attribute.\n    const incomingAriaLabel = this.getAttribute('aria-label') ?? this.ariaLabel\n    if (incomingAriaLabel != null && incomingAriaLabel !== '') {\n      this._ariaLabelForButton = incomingAriaLabel\n    }\n    this.removeAttribute('aria-label')\n\n    // Update slot icons when size, sizeMap, or iconSize changes (sizeMap drives effectiveSize on viewport change)\n    if (\n      changedProperties.has('size') ||\n      changedProperties.has('sizeMap') ||\n      changedProperties.has('iconSize') ||\n      this.sizeMap\n    ) {\n      requestAnimationFrame(() => {\n        this.applySizeToSlotIcons()\n      })\n    }\n  }\n\n  focus() {\n    this.shadowRoot?.querySelector('button')?.focus()\n  }\n\n  render() {\n    return html`\n      <button\n        part=\"base\"\n        .disabled=${this.disabled}\n        type=${this.htmlType}\n        aria-label=${ifDefined(this.effectiveAriaLabel) || ''}\n        class=${clsx(\n          'icon-button',\n          {\n            [`icon-button--${this.effectiveSize}`]:\n              this.effectiveSize && this.iconSize === undefined,\n          },\n          { [`icon-button--${this.size}`]: this.size },\n          { 'icon-button--disabled': this.disabled },\n          { 'icon-button--clean': this.clean },\n          `icon-button--${this.variant}`,\n        )}>\n        <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n        ${this.icon\n          ? html` <dap-ds-icon\n              part=\"content\"\n              exportparts=\"icon, base: icon-base\"\n              name=\"${this.icon}\"\n              aria-hidden=\"true\"\n              staticSize=${ifDefined(this.iconSize)}\n              size=${(this.effectiveSize === 'xxs'\n                ? 'xs'\n                : this.effectiveSize) as ButtonSize}>\n            </dap-ds-icon>`\n          : html` <slot></slot> `}\n      </button>\n    `\n  }\n}\n"],"names":["IconButtonBaseWithSized","SizedMixin","DdsElement","_DapDSIconButton","iconSlot","assignedElements","element","_a","slot","iconElements","assignedNodes","lightDomIcons","node","childIcons","icon","iconElement","_changedProperties","changedProperties","incomingAriaLabel","_b","html","ifDefined","clsx","DapDSIcon","unsafeCSS","styles","DapDSIconButton","__decorateClass","property"],"mappings":"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"}

package/dist/components/textarea/textarea.component.js

@@ -58,10 +58,10 @@ const i = (a = class extends C {
     super.attributeChangedCallback(t, e, n), t === "value" && this.input && (this.input.value = n);
   }
   onInput() {
-    super.onInput(), this.count = this.input.value.length, this.value = this.input.value, this.emit("dds-count-change", { value: this.count }), this.setValidity();
+    this.count = this.input.value.length, this.value = this.input.value, super.onInput(), this.emit("dds-count-change", { value: this.count }), this.setValidity();
   }
   onChange() {
-    super.onChange(), this.count = this.input.value.length, this.value = this.input.value, this.emit("dds-count-change", { value: this.count }), this.setValidity();
+    this.count = this.input.value.length, this.value = this.input.value, super.onChange(), this.emit("dds-count-change", { value: this.count }), this.setValidity();
   }
   onSelect(t) {
     const e = t.target, n = e.value.substring(

package/dist/components/textarea/textarea.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n  static tagName = 'dap-ds-textarea'\n\n  static dependencies = {\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n  private readonly counterId: string\n\n  /**@ignore */\n  @query('.textarea__control') input!: HTMLTextAreaElement\n  /** Hide character counter. */\n  @property({ type: Boolean, reflect: true }) hideCounter = false\n  /** The minimum length of the textarea. */\n  @property({ type: Number }) minlength?: number\n  /** The maximum length of the textarea. */\n  @property({ type: Number }) maxlength?: number\n  /** The number of rows in the textarea. */\n  @property({ type: Number }) rows?: number = 6\n  /** The number of columns in the textarea. */\n  @property({ type: Number }) cols?: number\n  /** The placeholder of the textarea. */\n  @property() placeholder = ''\n  /** Indicates how the control should wrap the value for form submission. */\n  @property() wrap: 'hard' | 'soft'\n\n  /**@ignore */\n  @state() count = 0\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSTextarea.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n  }\n\n  get focusElement() {\n    return this.input\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.input.value = this.value ?? ''\n    this.count = this.input.value.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput() {\n    super.onInput()\n\n    this.count = this.input.value.length\n    this.value = this.input.value\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onChange() {\n    super.onChange()\n\n    this.count = this.input.value.length\n    this.value = this.input.value\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onSelect(e: Event) {\n    const target = e.target as HTMLTextAreaElement\n    const selection = target.value.substring(\n      target.selectionStart,\n      target.selectionEnd,\n    )\n    this.emit('dds-select', { value: selection })\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue || '')\n    this.value = this.defaultValue || ''\n    this.input.value = this.defaultValue || ''\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  private _renderFooter() {\n    const counter = !this.hideCounter\n      ? html`\n    <dap-ds-typography\n          part=\"counter\"\n          exportparts=\"base: counter-base\"\n          class=${clsx('textarea__counter', {\n            'textarea__counter--error': this.status === 'error',\n          })}\n          variant=\"caption\"\n          size=\"${this.size as CommonFormElementSize}\"\n          id=${this.counterId}\n          aria-hidden=\"true\">\n          ${this.count}\n        </dap-ds-typography>\n      </div>\n    `\n      : nothing\n\n    return html`\n      <div class=\"textarea__footer\" part=\"footer\">\n        ${this.feedback && this._renderFeedback()}\n        <span part=\"counter-container\">${counter}</span>\n      </div>\n    `\n  }\n\n  render() {\n    return this.renderLabel(\n      this.labelId,\n      html`\n        <div\n          part=\"base\"\n          class=${clsx(\n            'textarea',\n            `textarea--${this.effectiveSize}`,\n            { 'textarea--success': this.status === 'success' },\n            { 'textarea--error': this.status === 'error' },\n            { 'textarea--disabled': this.disabled },\n            { 'textarea--readonly': this.readonly },\n            { 'textarea--optional': this.optional },\n          )}>\n          <textarea\n            id=${this.inputId}\n            part=\"input\"\n            class=\"textarea__control\"\n            aria-disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(\n              this.description ? this.descriptionId : nothing,\n            )} ${this.feedback ? this.feedbackId : nothing}\"\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            wrap=${ifDefined(this.wrap)}\n            cols=${ifDefined(this.cols)}\n            rows=${ifDefined(this.rows)}\n            placeholder=${ifDefined(this.placeholder)}\n            ?autofocus=${this.autofocus}\n            ?value=${this.value}\n            aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @change=${this.onChange}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @select=${this.onSelect}\n            @invalid=${this.handleInvalid}></textarea>\n\n          ${this._renderFooter()}\n        </div>\n      `,\n    )\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n        class=${clsx('textarea__feedback', {\n          'textarea__feedback--sm': this.effectiveSize === 'sm',\n        })}\n        id=${ifDefined(this.feedbackId)}\n        exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}
+{"version":3,"file":"textarea.component.js","sources":["../../../src/components/textarea/textarea.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\n\nimport { CommonFormElementSize, CommonSize } from '../../common/types'\nimport DapDSFeedback from '../feedback/feedback.component'\nimport DapDSTypography from '../typography/typography.component'\nimport styles from './textarea.scss?inline'\n\n/**\n * `dap-ds-textarea`\n * @summary A textarea is a multi-line text input field.\n * @element dap-ds-textarea\n * @title - Textarea\n *\n * @property {'xs' | 'sm' | 'lg'} size - The size of the textarea. Default is `md`.\n * @property {boolean} disabled - The disabled state of the textarea.\n * @property {number} minlength - The minimum length of the textarea.\n * @property {string} value - The value of the textarea.\n * @property {string} tooltip - The tooltip of the textarea.\n * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the textarea.\n * @property {InputStatus} status - The status of the textarea. Can be `success` or `error`.\n * @property {boolean} readonly - The readonly state of the textarea.\n * @property {boolean} required - The required state of the textarea.\n * @property {string} label - The label of the textarea.\n * @property {boolean} hideLabel - Visually hides the label while keeping it available to assistive technology. (default: false)\n * @property {string} description - The description of the textarea.\n * @property {string} feedback - The feedback of the textarea.\n * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the textarea. Can be `negative`, `positive`, or `warning`.\n * @property {boolean} optional - The optional state of the textarea.\n * @property {string} optionalLabel - The optional label of the textarea.\n * @property {string} requiredLabel - The required indicator of the textarea. (default: '*')\n * @property {boolean} subtle - The weight of the label. Default is `false`\n * @property {boolean} autofocus - The autofocus state of the textarea.\n *\n * @event {{ value: number }} dds-count-change - Fires when the count of the textarea changes.\n * @event {{ value: string }} dds-change - Fired when the textarea value changes.\n * @event {{ value: string }} dds-input - Fired when the textarea value changes.\n * @event {{ value: string, originalEvent: Event }} dds-keydown - Fired when a key is pressed down.\n * @event {{ void }} dds-blur - Fired when the textarea loses focus.\n * @event {{ void }} dds-focus - Emitted when the textarea gains focus.\n * @event {{ value: string }} dds-select - Emitted when select text in textarea.\n *\n * @slot feedback-icon - The custom icon of the feedback.\n *\n * @csspart base - The main textarea container.\n * @csspart input - The native input of the textarea.\n * @csspart counter - The counter of the textarea.\n * @csspart counter-base - The base of the counter.\n * @csspart feedback - The feedback of the textarea.\n * @csspart feedback-base - The base of the feedback.\n * @csspart feedback-text - The text of the feedback.\n * @csspart feedback-icon - The icon of the feedback.\n *\n * @cssproperty --dds-textarea-min-rows - Minimum number of rows in the textarea. (default: 2)\n * @cssproperty --dds-textarea-spacing - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-gap - Gap between elements in the textarea container. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-margin-top - Top margin of the textarea. (default: var(--dds-spacing-200))\n * @cssproperty --dds-textarea-padding - Padding of the textarea control. (default: var(--dds-spacing-200) var(--dds-spacing-300))\n * @cssproperty --dds-textarea-border-width - Border width of the textarea. (default: var(--dds-border-width-base))\n * @cssproperty --dds-textarea-border-color - Border color of the textarea. (default: var(--dds-border-neutral-base))\n * @cssproperty --dds-textarea-background - Background color of the textarea. (default: var(--dds-fields-background-default))\n * @cssproperty --dds-textarea-color - Text color of the textarea. (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-textarea-border-radius - Border radius of the textarea. (default: var(--dds-radius-base))\n * @cssproperty --dds-textarea-disabled-bg - Background color when disabled. (default: var(--dds-fields-background-disabled))\n * @cssproperty --dds-textarea-disabled-color - Text color when disabled. (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-textarea-readonly-bg - Background color when readonly. (default: var(--dds-fields-background-read-only))\n * @cssproperty --dds-textarea-readonly-color - Text color when readonly. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-textarea-error-border - Border color when in error state. (default: var(--dds-border-negative-base))\n * @cssproperty --dds-textarea-success-border - Border color when in success state. (default: var(--dds-border-positive-base))\n */\nexport default class DapDSTextarea extends GenericFormElement {\n  static tagName = 'dap-ds-textarea'\n\n  static dependencies = {\n    'dap-ds-typography': DapDSTypography,\n    'dap-ds-feedback': DapDSFeedback,\n  }\n\n  private static nextId = 0\n\n  private readonly inputId: string\n  private readonly labelId: string\n  private readonly descriptionId: string\n  private readonly counterId: string\n\n  /**@ignore */\n  @query('.textarea__control') input!: HTMLTextAreaElement\n  /** Hide character counter. */\n  @property({ type: Boolean, reflect: true }) hideCounter = false\n  /** The minimum length of the textarea. */\n  @property({ type: Number }) minlength?: number\n  /** The maximum length of the textarea. */\n  @property({ type: Number }) maxlength?: number\n  /** The number of rows in the textarea. */\n  @property({ type: Number }) rows?: number = 6\n  /** The number of columns in the textarea. */\n  @property({ type: Number }) cols?: number\n  /** The placeholder of the textarea. */\n  @property() placeholder = ''\n  /** Indicates how the control should wrap the value for form submission. */\n  @property() wrap: 'hard' | 'soft'\n\n  /**@ignore */\n  @state() count = 0\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    DapDSTextarea.nextId++\n    const uniqueSuffix =\n      typeof crypto !== 'undefined' && crypto.randomUUID\n        ? crypto.randomUUID().slice(0, 8)\n        : Date.now().toString(36)\n    this.inputId = `input-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.labelId = `label-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.descriptionId = `description-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    this.counterId = `counter-${DapDSTextarea.nextId}-${uniqueSuffix}`\n    // Initialize the feedbackId from FeedbackMixin\n    this.feedbackId = `feedback-${DapDSTextarea.nextId}-${uniqueSuffix}`\n  }\n\n  get focusElement() {\n    return this.input\n  }\n\n  private _handleSlotChange(event: Event) {\n    const target = event?.target as HTMLInputElement\n    target.setAttribute('slot', 'icon')\n  }\n\n  async connectedCallback() {\n    super.connectedCallback()\n\n    await this.updateComplete\n    this.input.value = this.value ?? ''\n    this.count = this.input.value.length\n  }\n\n  attributeChangedCallback(name: string, oldValue: any, newValue: any) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n\n    if (name === 'value' && this.input) {\n      this.input.value = newValue\n    }\n  }\n\n  onInput() {\n    // Sync the host `value` property BEFORE emitting dds-input. super.onInput()\n    // dispatches dds-input synchronously, so consumers that read the host `value`\n    // in that listener (e.g. RHF bindings) would otherwise see the previous value\n    // and lag one keystroke behind. Matches dap-ds-input's ordering.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onInput()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onChange() {\n    // Same ordering as onInput: update the host `value` before super emits dds-change.\n    this.count = this.input.value.length\n    this.value = this.input.value\n\n    super.onChange()\n\n    this.emit('dds-count-change', { value: this.count })\n\n    this.setValidity()\n  }\n\n  onSelect(e: Event) {\n    const target = e.target as HTMLTextAreaElement\n    const selection = target.value.substring(\n      target.selectionStart,\n      target.selectionEnd,\n    )\n    this.emit('dds-select', { value: selection })\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({})\n    this.internals.setFormValue(this.defaultValue || '')\n    this.value = this.defaultValue || ''\n    this.input.value = this.defaultValue || ''\n  }\n\n  handleInvalid(event: Event) {\n    event.preventDefault()\n  }\n\n  private _renderFooter() {\n    const counter = !this.hideCounter\n      ? html`\n    <dap-ds-typography\n          part=\"counter\"\n          exportparts=\"base: counter-base\"\n          class=${clsx('textarea__counter', {\n            'textarea__counter--error': this.status === 'error',\n          })}\n          variant=\"caption\"\n          size=\"${this.size as CommonFormElementSize}\"\n          id=${this.counterId}\n          aria-hidden=\"true\">\n          ${this.count}\n        </dap-ds-typography>\n      </div>\n    `\n      : nothing\n\n    return html`\n      <div class=\"textarea__footer\" part=\"footer\">\n        ${this.feedback && this._renderFeedback()}\n        <span part=\"counter-container\">${counter}</span>\n      </div>\n    `\n  }\n\n  render() {\n    return this.renderLabel(\n      this.labelId,\n      html`\n        <div\n          part=\"base\"\n          class=${clsx(\n            'textarea',\n            `textarea--${this.effectiveSize}`,\n            { 'textarea--success': this.status === 'success' },\n            { 'textarea--error': this.status === 'error' },\n            { 'textarea--disabled': this.disabled },\n            { 'textarea--readonly': this.readonly },\n            { 'textarea--optional': this.optional },\n          )}>\n          <textarea\n            id=${this.inputId}\n            part=\"input\"\n            class=\"textarea__control\"\n            aria-disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(\n              this.description ? this.descriptionId : nothing,\n            )} ${this.feedback ? this.feedbackId : nothing}\"\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            wrap=${ifDefined(this.wrap)}\n            cols=${ifDefined(this.cols)}\n            rows=${ifDefined(this.rows)}\n            placeholder=${ifDefined(this.placeholder)}\n            ?autofocus=${this.autofocus}\n            ?value=${this.value}\n            aria-labelledby=${ifDefined(this.label ? this.labelId : nothing)}\n            @input=${this.onInput}\n            @keydown=${this.onKeydown}\n            @change=${this.onChange}\n            @blur=${this.onBlur}\n            @focus=${this.onFocus}\n            @select=${this.onSelect}\n            @invalid=${this.handleInvalid}></textarea>\n\n          ${this._renderFooter()}\n        </div>\n      `,\n    )\n  }\n\n  private _renderFeedback() {\n    return html`\n      <dap-ds-feedback\n        part=\"feedback\"\n        feedbackType=${ifDefined(this.feedbackType)}\n        feedbackSize=${ifDefined(this.effectiveSize) as CommonSize}\n        class=${clsx('textarea__feedback', {\n          'textarea__feedback--sm': this.effectiveSize === 'sm',\n        })}\n        id=${ifDefined(this.feedbackId)}\n        exportparts=\"base:feedback-base, text:feedback-text, icon:feedback-icon\"\n        .subtle=${this.subtle}>\n        <slot\n          name=\"feedback-icon\"\n          @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.feedback}\n      </dap-ds-feedback>\n    `\n  }\n}\n"],"names":["_DapDSTextarea","_a","GenericFormElement","uniqueSuffix","event","__async","__superGet","name","oldValue","newValue","e","target","selection","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":"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"}