dap-design-system 0.62.0 → 0.62.2

package/dist/components/snackbar/snackbar.component.js

@@ -1,41 +1,42 @@
-var y = Object.defineProperty, w = Object.defineProperties;
-var v = Object.getOwnPropertyDescriptors;
+var y = Object.defineProperty, v = Object.defineProperties;
+var k = Object.getOwnPropertyDescriptors;
 var p = Object.getOwnPropertySymbols;
-var k = Object.prototype.hasOwnProperty, E = Object.prototype.propertyIsEnumerable;
+var E = Object.prototype.hasOwnProperty, M = Object.prototype.propertyIsEnumerable;
 var m = (t, e, s) => e in t ? y(t, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : t[e] = s, r = (t, e) => {
   for (var s in e || (e = {}))
-    k.call(e, s) && m(t, s, e[s]);
+    E.call(e, s) && m(t, s, e[s]);
   if (p)
     for (var s of p(e))
-      E.call(e, s) && m(t, s, e[s]);
+      M.call(e, s) && m(t, s, e[s]);
   return t;
-}, c = (t, e) => w(t, v(e));
-import { clsx as M } from "../../node_modules/clsx/dist/clsx.js";
+}, c = (t, e) => v(t, k(e));
+import { clsx as C } 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 h } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { state as g } from "../../node_modules/@lit/reactive-element/decorators/state.js";
-import { ifDefined as f } from "../../node_modules/lit-html/directives/if-defined.js";
-import { repeat as C } from "../../node_modules/lit-html/directives/repeat.js";
-import { html as b } from "../../node_modules/lit-html/static.js";
+import { state as w } from "../../node_modules/@lit/reactive-element/decorators/state.js";
+import { ifDefined as b } from "../../node_modules/lit-html/directives/if-defined.js";
+import { repeat as T } from "../../node_modules/lit-html/directives/repeat.js";
+import { html as f } from "../../node_modules/lit-html/static.js";
 import "../../localization/localization.js";
-import { DdsElement as T } from "../../internal/dds-hu-element.js";
-import $ from "./snackbar.scss.js";
-import x from "./snackbar-message.component.js";
-import { unsafeCSS as A } from "../../node_modules/@lit/reactive-element/css-tag.js";
-import { translate as S } from "../../node_modules/lit-i18n/src/lit-i18n.js";
-var L = Object.defineProperty, l = (t, e, s, o) => {
+import { DdsElement as A } from "../../internal/dds-hu-element.js";
+import x from "./snackbar.scss.js";
+import $ from "./snackbar-message.component.js";
+import { unsafeCSS as S } from "../../node_modules/@lit/reactive-element/css-tag.js";
+import { translate as L } from "../../node_modules/lit-i18n/src/lit-i18n.js";
+var N = Object.defineProperty, l = (t, e, s, o) => {
   for (var i = void 0, n = t.length - 1, u; n >= 0; n--)
     (u = t[n]) && (i = u(e, s, i) || i);
-  return i && L(e, s, i), i;
+  return i && N(e, s, i), i;
 };
+const g = "dds-snackbar-announcer";
 typeof window != "undefined" && (window.showDapSnackbar = (t, e) => {
   a.show(t, e);
 }, window.closeAllDapSnackbars = () => {
   a.closeAll();
 });
-const d = class d extends T {
+const d = class d extends A {
   constructor() {
     super(...arguments), this.maxItems = 4, this.position = "bottom-right", this.duration = 6e3, this.announceMessages = !0, this.messages = [], this.idCounter = 0, this.timeouts = /* @__PURE__ */ new Map(), this.handleShowSnackbarEvent = (e) => {
       const { message: s, options: o } = e.detail;
@@ -167,37 +168,49 @@ const d = class d extends T {
       this.handleCloseAllEvent
     ), document.removeEventListener("keydown", this.handleKeyDown), super.disconnectedCallback();
   }
+  // Single announcement channel (WCAG 4.1.3, Figma #127). A polite status region
+  // in light DOM is announced reliably by VoiceOver, unlike live regions inside
+  // shadow roots, so the messages themselves carry no live role.
   announceToScreenReader(e) {
-    const s = document.createElement("div");
-    s.setAttribute("aria-live", "assertive"), s.setAttribute("aria-atomic", "true"), s.style.position = "absolute", s.style.left = "-10000px", s.style.width = "1px", s.style.height = "1px", s.style.overflow = "hidden", document.body.appendChild(s), s.textContent = e, setTimeout(() => {
-      document.body.removeChild(s);
-    }, 1e3);
+    let s = document.getElementById(g);
+    s || (s = document.createElement("div"), s.id = g, s.setAttribute("role", "status"), s.setAttribute("aria-live", "polite"), s.setAttribute("aria-atomic", "true"), Object.assign(s.style, {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0 0 0 0)",
+      whiteSpace: "nowrap"
+    }), document.body.appendChild(s)), s.textContent = "";
+    const o = s;
+    setTimeout(() => {
+      o.textContent = e;
+    }, 100);
   }
   _closeMessage(e) {
     var s;
     (s = e == null ? void 0 : e.detail) != null && s.id && this.removeMessage(e.detail.id);
   }
   render() {
-    return b`<div
-      class=${M("snackbar", `snackbar--${this.position}`)}
+    return f`<div
+      class=${C("snackbar", `snackbar--${this.position}`)}
       role="region"
-      aria-live="polite"
-      aria-label=${S("snackbar.notifications")}>
-      ${C(
+      aria-label=${L("snackbar.notifications")}>
+      ${T(
       this.messages,
       (e) => e.id,
       (e) => {
         var s, o, i, n;
-        return b`
+        return f`
           <dap-ds-snackbar-message
             part="message"
             exportparts="base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions"
             @dds-close=${this._closeMessage}
             id=${e.id}
             message=${e.message}
-            alertType=${f((s = e == null ? void 0 : e.options) == null ? void 0 : s.alertType)}
+            alertType=${b((s = e == null ? void 0 : e.options) == null ? void 0 : s.alertType)}
             .actions=${(o = e == null ? void 0 : e.options) == null ? void 0 : o.actions}
-            closeButton=${f((i = e == null ? void 0 : e.options) == null ? void 0 : i.closeButton)}
+            closeButton=${b((i = e == null ? void 0 : e.options) == null ? void 0 : i.closeButton)}
             .customStyle=${(n = e == null ? void 0 : e.options) == null ? void 0 : n.customStyle}
             position=${this.position}></dap-ds-snackbar-message>
         `;
@@ -207,8 +220,8 @@ const d = class d extends T {
   }
 };
 d.tagName = "dap-ds-snackbar", d.dependencies = {
-  "dap-ds-snackbar-message": x
-}, d.styles = A($);
+  "dap-ds-snackbar-message": $
+}, d.styles = S(x);
 let a = d;
 l([
   h({ type: Number })
@@ -223,10 +236,10 @@ l([
   h({ type: Boolean })
 ], a.prototype, "announceMessages");
 l([
-  g()
+  w()
 ], a.prototype, "messages");
 l([
-  g()
+  w()
 ], a.prototype, "idCounter");
 export {
   a as default

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

@@ -1 +1 @@
-{"version":3,"file":"snackbar.component.js","sources":["../../../src/components/snackbar/snackbar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  MessageOptionsType,\n  SnackbarMessage,\n  SnackbarPosition,\n} from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './snackbar.scss?inline'\nimport DapDSSnackbarMessage from './snackbar-message.component'\n\nif (typeof window !== 'undefined') {\n  window.showDapSnackbar = (message: string, options?: MessageOptionsType) => {\n    DapDSSnackbar.show(message, options)\n  }\n\n  window.closeAllDapSnackbars = () => {\n    DapDSSnackbar.closeAll()\n  }\n}\n\n/**\n * `dap-ds-snackbar`\n * @summary The Snackbar is a container of sliding messages.\n * @element dap-ds-snackbar\n * @title - Snackbar\n *\n * @csspart host - The host element\n * @csspart message - The message part of the snackbar\n * @csspart message-base - The base part of the message\n * @csspart message-text - The text part of the message\n * @csspart message-closebutton - The close button part of the message\n * @csspart message-close-icon - The close icon part of the message\n * @csspart message-actions - The actions part of the message\n *\n * @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)\n * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)\n */\nexport default class DapDSSnackbar extends DdsElement {\n  static tagName = 'dap-ds-snackbar'\n\n  static dependencies = {\n    'dap-ds-snackbar-message': DapDSSnackbarMessage,\n  }\n\n  /** The maximum number of snackbar messages at a given time. */\n  @property({ type: Number }) maxItems = 4\n\n  /** The position of the snackbar\n   * @type {'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center'}\n   */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n\n  /** The duration of the snackbar message in milliseconds */\n  @property({ type: Number }) duration = 6000\n\n  /** Whether the snackbar should announce new messages to screen readers */\n  @property({ type: Boolean }) announceMessages = true\n\n  @state() private messages: SnackbarMessage[] = []\n  @state() private idCounter = 0\n  private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map()\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * Static method to show a snackbar message anywhere in the application\n   * @param message - The message to display\n   * @param options - Optional configuration for the message\n   */\n  static show(message: string, options?: MessageOptionsType): void {\n    document.dispatchEvent(\n      new CustomEvent('dds-show-snackbar', {\n        detail: { message, options },\n        bubbles: true,\n      }),\n    )\n  }\n\n  /**\n   * Static method to show a success message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'successful')\n   */\n  static success(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'successful' })\n  }\n\n  /**\n   * Static method to show an error message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'error')\n   */\n  static error(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'error' })\n  }\n\n  /**\n   * Static method to show an information message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'information')\n   */\n  static info(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'information' })\n  }\n\n  /**\n   * Static method to show a default message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'default')\n   */\n  static default(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'default' })\n  }\n\n  /**\n   * Static method to close all snackbar messages globally\n   */\n  static closeAll(): void {\n    document.dispatchEvent(\n      new CustomEvent('dds-close-all-snackbars', {\n        bubbles: true,\n      }),\n    )\n  }\n\n  /**\n   * Close all currently displayed messages\n   */\n  closeAll(): void {\n    this.clearAllTimeouts()\n    this.messages = []\n  }\n\n  private generateId(): string {\n    this.idCounter++\n\n    return `dap-snackbar-${this.idCounter}`\n  }\n\n  addMessage(message: string, options?: MessageOptionsType): void {\n    if (!message || typeof message !== 'string') {\n      console.warn('DapDSSnackbar: Message must be a non-empty string')\n      return\n    }\n\n    const newId = this.generateId()\n    if (this.messages.length >= this.maxItems) {\n      this.sliceMessage()\n    }\n\n    const newMessage: SnackbarMessage = {\n      id: newId,\n      message: message.trim(),\n      ...(options && { options }),\n    }\n\n    this.messages = [...this.messages, newMessage]\n    this.elapseMessages(newId, options?.duration, options?.persistent)\n\n    // Announce the message if enabled\n    if (this.announceMessages) {\n      this.announceToScreenReader(message)\n    }\n  }\n\n  private sliceMessage(): void {\n    if (this.messages) {\n      this.messages = this.messages.slice(1)\n    }\n  }\n\n  private removeMessage(id: string): void {\n    if (id) {\n      this.messages = this.messages.filter(\n        (messageItem: SnackbarMessage) => messageItem.id !== id,\n      )\n      this.clearTimeout(id)\n    }\n  }\n\n  private elapseMessages(\n    id: string,\n    duration?: number,\n    persistent?: boolean,\n  ): void {\n    // Persistent messages stay until the user closes them manually\n    if (persistent) {\n      return\n    }\n\n    const durationTime = duration ?? this.duration\n    const timeoutId = setTimeout(() => {\n      this.removeMessage(id)\n    }, durationTime)\n    this.timeouts.set(id, timeoutId)\n  }\n\n  private clearTimeout(id: string): void {\n    const timeoutId = this.timeouts.get(id)\n    if (timeoutId) {\n      clearTimeout(timeoutId)\n      this.timeouts.delete(id)\n    }\n  }\n\n  private clearAllTimeouts(): void {\n    this.timeouts.forEach(timeoutId => clearTimeout(timeoutId))\n    this.timeouts.clear()\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    document.addEventListener(\n      'dds-show-snackbar',\n      this.handleShowSnackbarEvent as EventListener,\n    )\n    document.addEventListener(\n      'dds-close-all-snackbars',\n      this.handleCloseAllEvent as EventListener,\n    )\n    document.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    this.clearAllTimeouts()\n    document.removeEventListener(\n      'dds-show-snackbar',\n      this.handleShowSnackbarEvent as EventListener,\n    )\n    document.removeEventListener(\n      'dds-close-all-snackbars',\n      this.handleCloseAllEvent as EventListener,\n    )\n    document.removeEventListener('keydown', this.handleKeyDown)\n    super.disconnectedCallback()\n  }\n\n  private handleShowSnackbarEvent = (\n    event: CustomEvent<{ message: string; options?: MessageOptionsType }>,\n  ) => {\n    const { message, options } = event.detail\n    this.addMessage(message, options)\n  }\n\n  private handleCloseAllEvent = () => {\n    this.closeAll()\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.messages.length > 0) {\n      // Close the most recent message\n      const lastMessage = this.messages[this.messages.length - 1]\n      if (lastMessage) {\n        this.removeMessage(lastMessage.id)\n      }\n    }\n  }\n\n  private announceToScreenReader(message: string): void {\n    const announcer = document.createElement('div')\n    announcer.setAttribute('aria-live', 'assertive')\n    announcer.setAttribute('aria-atomic', 'true')\n    announcer.style.position = 'absolute'\n    announcer.style.left = '-10000px'\n    announcer.style.width = '1px'\n    announcer.style.height = '1px'\n    announcer.style.overflow = 'hidden'\n\n    document.body.appendChild(announcer)\n    announcer.textContent = message\n\n    // Remove the announcer after a short delay\n    setTimeout(() => {\n      document.body.removeChild(announcer)\n    }, 1000)\n  }\n\n  private _closeMessage(event: CustomEvent<{ id: string }>) {\n    if (event?.detail?.id) {\n      this.removeMessage(event.detail.id)\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${clsx('snackbar', `snackbar--${this.position}`)}\n      role=\"region\"\n      aria-live=\"polite\"\n      aria-label=${translate('snackbar.notifications')}>\n      ${repeat(\n        this.messages,\n        messageItem => messageItem.id,\n        messageItem => html`\n          <dap-ds-snackbar-message\n            part=\"message\"\n            exportparts=\"base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions\"\n            @dds-close=${this._closeMessage}\n            id=${messageItem.id}\n            message=${messageItem.message}\n            alertType=${ifDefined(messageItem?.options?.alertType)}\n            .actions=${messageItem?.options?.actions}\n            closeButton=${ifDefined(messageItem?.options?.closeButton)}\n            .customStyle=${messageItem?.options?.customStyle}\n            position=${this.position}></dap-ds-snackbar-message>\n        `,\n      )}\n    </div>`\n  }\n}\n"],"names":["message","options","DapDSSnackbar","_DapDSSnackbar","DdsElement","event","lastMessage","__spreadProps","__spreadValues","newId","newMessage","id","messageItem","duration","persistent","durationTime","timeoutId","announcer","_a","html","clsx","translate","repeat","ifDefined","_b","_c","_d","DapDSSnackbarMessage","unsafeCSS","styles","__decorateClass","property","state"],"mappings":"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"}
+{"version":3,"file":"snackbar.component.js","sources":["../../../src/components/snackbar/snackbar.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { html } from 'lit/static-html.js'\n\nimport {\n  MessageOptionsType,\n  SnackbarMessage,\n  SnackbarPosition,\n} from '@/common/types'\nimport { translate } from '@/localization/localization'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './snackbar.scss?inline'\nimport DapDSSnackbarMessage from './snackbar-message.component'\n\n// Shared by every snackbar instance so a message is announced exactly once\nconst ANNOUNCER_ID = 'dds-snackbar-announcer'\n\nif (typeof window !== 'undefined') {\n  window.showDapSnackbar = (message: string, options?: MessageOptionsType) => {\n    DapDSSnackbar.show(message, options)\n  }\n\n  window.closeAllDapSnackbars = () => {\n    DapDSSnackbar.closeAll()\n  }\n}\n\n/**\n * `dap-ds-snackbar`\n * @summary The Snackbar is a container of sliding messages.\n * @element dap-ds-snackbar\n * @title - Snackbar\n *\n * @csspart host - The host element\n * @csspart message - The message part of the snackbar\n * @csspart message-base - The base part of the message\n * @csspart message-text - The text part of the message\n * @csspart message-closebutton - The close button part of the message\n * @csspart message-close-icon - The close icon part of the message\n * @csspart message-actions - The actions part of the message\n *\n * @cssproperty --dds-snackbar-spacing - Spacing used for positioning the snackbar (default: var(--dds-spacing-400))\n * @cssproperty --dds-snackbar-z-index - Z-index of the snackbar container (default: 10000)\n * @cssproperty --dds-snackbar-pointer-events - Pointer events behavior for the snackbar (default: auto)\n */\nexport default class DapDSSnackbar extends DdsElement {\n  static tagName = 'dap-ds-snackbar'\n\n  static dependencies = {\n    'dap-ds-snackbar-message': DapDSSnackbarMessage,\n  }\n\n  /** The maximum number of snackbar messages at a given time. */\n  @property({ type: Number }) maxItems = 4\n\n  /** The position of the snackbar\n   * @type {'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-right' | 'top-center'}\n   */\n  @property({ type: String }) position: SnackbarPosition = 'bottom-right'\n\n  /** The duration of the snackbar message in milliseconds */\n  @property({ type: Number }) duration = 6000\n\n  /** Whether the snackbar should announce new messages to screen readers */\n  @property({ type: Boolean }) announceMessages = true\n\n  @state() private messages: SnackbarMessage[] = []\n  @state() private idCounter = 0\n  private timeouts: Map<string, ReturnType<typeof setTimeout>> = new Map()\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**\n   * Static method to show a snackbar message anywhere in the application\n   * @param message - The message to display\n   * @param options - Optional configuration for the message\n   */\n  static show(message: string, options?: MessageOptionsType): void {\n    document.dispatchEvent(\n      new CustomEvent('dds-show-snackbar', {\n        detail: { message, options },\n        bubbles: true,\n      }),\n    )\n  }\n\n  /**\n   * Static method to show a success message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'successful')\n   */\n  static success(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'successful' })\n  }\n\n  /**\n   * Static method to show an error message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'error')\n   */\n  static error(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'error' })\n  }\n\n  /**\n   * Static method to show an information message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'information')\n   */\n  static info(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'information' })\n  }\n\n  /**\n   * Static method to show a default message\n   * @param message - The message to display\n   * @param options - Optional configuration (alertType will be overridden to 'default')\n   */\n  static default(\n    message: string,\n    options?: Omit<MessageOptionsType, 'alertType'>,\n  ): void {\n    this.show(message, { ...options, alertType: 'default' })\n  }\n\n  /**\n   * Static method to close all snackbar messages globally\n   */\n  static closeAll(): void {\n    document.dispatchEvent(\n      new CustomEvent('dds-close-all-snackbars', {\n        bubbles: true,\n      }),\n    )\n  }\n\n  /**\n   * Close all currently displayed messages\n   */\n  closeAll(): void {\n    this.clearAllTimeouts()\n    this.messages = []\n  }\n\n  private generateId(): string {\n    this.idCounter++\n\n    return `dap-snackbar-${this.idCounter}`\n  }\n\n  addMessage(message: string, options?: MessageOptionsType): void {\n    if (!message || typeof message !== 'string') {\n      console.warn('DapDSSnackbar: Message must be a non-empty string')\n      return\n    }\n\n    const newId = this.generateId()\n    if (this.messages.length >= this.maxItems) {\n      this.sliceMessage()\n    }\n\n    const newMessage: SnackbarMessage = {\n      id: newId,\n      message: message.trim(),\n      ...(options && { options }),\n    }\n\n    this.messages = [...this.messages, newMessage]\n    this.elapseMessages(newId, options?.duration, options?.persistent)\n\n    // Announce the message if enabled\n    if (this.announceMessages) {\n      this.announceToScreenReader(message)\n    }\n  }\n\n  private sliceMessage(): void {\n    if (this.messages) {\n      this.messages = this.messages.slice(1)\n    }\n  }\n\n  private removeMessage(id: string): void {\n    if (id) {\n      this.messages = this.messages.filter(\n        (messageItem: SnackbarMessage) => messageItem.id !== id,\n      )\n      this.clearTimeout(id)\n    }\n  }\n\n  private elapseMessages(\n    id: string,\n    duration?: number,\n    persistent?: boolean,\n  ): void {\n    // Persistent messages stay until the user closes them manually\n    if (persistent) {\n      return\n    }\n\n    const durationTime = duration ?? this.duration\n    const timeoutId = setTimeout(() => {\n      this.removeMessage(id)\n    }, durationTime)\n    this.timeouts.set(id, timeoutId)\n  }\n\n  private clearTimeout(id: string): void {\n    const timeoutId = this.timeouts.get(id)\n    if (timeoutId) {\n      clearTimeout(timeoutId)\n      this.timeouts.delete(id)\n    }\n  }\n\n  private clearAllTimeouts(): void {\n    this.timeouts.forEach(timeoutId => clearTimeout(timeoutId))\n    this.timeouts.clear()\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    document.addEventListener(\n      'dds-show-snackbar',\n      this.handleShowSnackbarEvent as EventListener,\n    )\n    document.addEventListener(\n      'dds-close-all-snackbars',\n      this.handleCloseAllEvent as EventListener,\n    )\n    document.addEventListener('keydown', this.handleKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    this.clearAllTimeouts()\n    document.removeEventListener(\n      'dds-show-snackbar',\n      this.handleShowSnackbarEvent as EventListener,\n    )\n    document.removeEventListener(\n      'dds-close-all-snackbars',\n      this.handleCloseAllEvent as EventListener,\n    )\n    document.removeEventListener('keydown', this.handleKeyDown)\n    super.disconnectedCallback()\n  }\n\n  private handleShowSnackbarEvent = (\n    event: CustomEvent<{ message: string; options?: MessageOptionsType }>,\n  ) => {\n    const { message, options } = event.detail\n    this.addMessage(message, options)\n  }\n\n  private handleCloseAllEvent = () => {\n    this.closeAll()\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Escape' && this.messages.length > 0) {\n      // Close the most recent message\n      const lastMessage = this.messages[this.messages.length - 1]\n      if (lastMessage) {\n        this.removeMessage(lastMessage.id)\n      }\n    }\n  }\n\n  // Single announcement channel (WCAG 4.1.3, Figma #127). A polite status region\n  // in light DOM is announced reliably by VoiceOver, unlike live regions inside\n  // shadow roots, so the messages themselves carry no live role.\n  private announceToScreenReader(message: string): void {\n    let announcer = document.getElementById(ANNOUNCER_ID)\n    if (!announcer) {\n      announcer = document.createElement('div')\n      announcer.id = ANNOUNCER_ID\n      announcer.setAttribute('role', 'status')\n      announcer.setAttribute('aria-live', 'polite')\n      announcer.setAttribute('aria-atomic', 'true')\n      Object.assign(announcer.style, {\n        position: 'absolute',\n        width: '1px',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        clip: 'rect(0 0 0 0)',\n        whiteSpace: 'nowrap',\n      })\n      document.body.appendChild(announcer)\n    }\n\n    // Clear first so repeating the same message is announced again\n    announcer.textContent = ''\n    const region = announcer\n    setTimeout(() => {\n      region.textContent = message\n    }, 100)\n  }\n\n  private _closeMessage(event: CustomEvent<{ id: string }>) {\n    if (event?.detail?.id) {\n      this.removeMessage(event.detail.id)\n    }\n  }\n\n  render() {\n    return html`<div\n      class=${clsx('snackbar', `snackbar--${this.position}`)}\n      role=\"region\"\n      aria-label=${translate('snackbar.notifications')}>\n      ${repeat(\n        this.messages,\n        messageItem => messageItem.id,\n        messageItem => html`\n          <dap-ds-snackbar-message\n            part=\"message\"\n            exportparts=\"base:message-base, text:message-text, closebutton:message-closebutton, close-icon:message-close-icon, actions:message-actions\"\n            @dds-close=${this._closeMessage}\n            id=${messageItem.id}\n            message=${messageItem.message}\n            alertType=${ifDefined(messageItem?.options?.alertType)}\n            .actions=${messageItem?.options?.actions}\n            closeButton=${ifDefined(messageItem?.options?.closeButton)}\n            .customStyle=${messageItem?.options?.customStyle}\n            position=${this.position}></dap-ds-snackbar-message>\n        `,\n      )}\n    </div>`\n  }\n}\n"],"names":["ANNOUNCER_ID","message","options","DapDSSnackbar","_DapDSSnackbar","DdsElement","event","lastMessage","__spreadProps","__spreadValues","newId","newMessage","id","messageItem","duration","persistent","durationTime","timeoutId","announcer","region","_a","html","clsx","translate","repeat","ifDefined","_b","_c","_d","DapDSSnackbarMessage","unsafeCSS","styles","__decorateClass","property","state"],"mappings":"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"}

package/dist/components/table/table.component.d.ts

@@ -16,6 +16,8 @@ export default class DapDSTable extends DdsElement {
     static tagName: string;
     /**@ignore */
     rows: Array<HTMLElement>;
+    /** The html role of the table. A static data table is a `table`; `grid` is
+     * only right for an interactive widget with keyboard-navigable cells. */
     role: string;
     /**If the table has mobile design */
     mobile: boolean;
@@ -23,5 +25,6 @@ export default class DapDSTable extends DdsElement {
     caption: string;
     static readonly styles: import('lit').CSSResult;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import('lit-html').TemplateResult;
 }

package/dist/components/table/table.component.js

@@ -1,48 +1,51 @@
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
+import { nothing as c } from "../../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 { queryAssignedElements as f } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
-import { html as c } from "../../node_modules/lit-html/static.js";
-import { DdsElement as h } from "../../internal/dds-hu-element.js";
-import d from "./table.scss.js";
-import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, s = (n, i, e, l) => {
-  for (var t = void 0, p = n.length - 1, m; p >= 0; p--)
-    (m = n[p]) && (t = m(i, e, t) || t);
-  return t && y(i, e, t), t;
+import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as h } from "../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.js";
+import { html as f } from "../../node_modules/lit-html/static.js";
+import { DdsElement as d } from "../../internal/dds-hu-element.js";
+import u from "./table.scss.js";
+import { unsafeCSS as y } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var g = Object.defineProperty, s = (n, e, o, l) => {
+  for (var t = void 0, a = n.length - 1, m; a >= 0; a--)
+    (m = n[a]) && (t = m(e, o, t) || t);
+  return t && g(e, o, t), t;
 };
-const o = class o extends h {
+const i = class i extends d {
   constructor() {
-    super(...arguments), this.role = "grid", this.mobile = !1, this.caption = "";
+    super(...arguments), this.role = "table", this.mobile = !1, this.caption = "";
   }
-  firstUpdated(i) {
-    this.rows.forEach((e, l) => {
-      l === this.rows.length - 1 && e.toggleAttribute("last");
-    }), this.setAttribute("aria-label", this.caption);
+  firstUpdated(e) {
+    this.rows.forEach((o, l) => {
+      l === this.rows.length - 1 && o.toggleAttribute("last");
+    });
+  }
+  updated(e) {
+    e.has("caption") && (this.caption ? this.setAttribute("aria-label", this.caption) : this.removeAttribute("aria-label"));
   }
   render() {
-    return c`
-      <caption class="caption" part="caption">
-        ${this.caption}
-      </caption>
+    return f`
+      ${this.caption ? f`<caption class="caption" part="caption" aria-hidden="true">
+            ${this.caption}
+          </caption>` : c}
       <slot></slot>
     `;
   }
 };
-o.tagName = "dap-ds-table", o.styles = u(d);
-let r = o;
+i.tagName = "dap-ds-table", i.styles = y(u);
+let r = i;
 s([
-  f()
+  h()
 ], r.prototype, "rows");
 s([
-  a({ reflect: !0 })
+  p({ reflect: !0 })
 ], r.prototype, "role");
 s([
-  a({ type: Boolean, reflect: !0 })
+  p({ type: Boolean, reflect: !0 })
 ], r.prototype, "mobile");
 s([
-  a({ type: String })
+  p({ type: String })
 ], r.prototype, "caption");
 export {
   r as default

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

@@ -1 +1 @@
-{"version":3,"file":"table.component.js","sources":["../../../src/components/table/table.component.ts"],"sourcesContent":["import { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table.scss?inline'\n\n/**\n * Data table component.\n * @element dap-ds-table\n * @title - Table\n *\n * @slot - The default slot. Accepts `dap-ds-table-row` elements.\n *\n * @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n */\nexport default class DapDSTable extends DdsElement {\n  static tagName = 'dap-ds-table'\n\n  /**@ignore */\n  @queryAssignedElements() rows!: Array<HTMLElement>\n  @property({ reflect: true }) public role = 'grid'\n  /**If the table has mobile design */\n  @property({ type: Boolean, reflect: true }) mobile = false\n\n  /** The caption of the table */\n  @property({ type: String }) caption = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    this.rows.forEach((row, index) => {\n      if (index === this.rows.length - 1) {\n        row.toggleAttribute('last')\n      }\n    })\n\n    this.setAttribute('aria-label', this.caption)\n  }\n\n  render() {\n    return html`\n      <caption class=\"caption\" part=\"caption\">\n        ${this.caption}\n      </caption>\n      <slot></slot>\n    `\n  }\n}\n"],"names":["_DapDSTable","DdsElement","_changedProperties","row","index","html","unsafeCSS","styles","DapDSTable","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAK+B,KAAO,OAAO,QAEU,KAAA,SAAA,IAGf,KAAA,UAAA;AAAA,EAAA;AAAA,EAI5B,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD,GAEI,KAAA,aAAa,cAAc,KAAK,OAAO;AAAA,EAAA;AAAA,EAG9C,SAAS;AACA,WAAAE;AAAAA;AAAAA,UAED,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,EAAA;AAKtB;AAjCEL,EAAO,UAAU,gBAWDA,EAAA,SAASM,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBR;AAI2BS,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAJJF,EAIM,WAAA,MAAA;AACWC,EAAA;AAAA,EAAnCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GALRH,EAKiB,WAAA,MAAA;AAEQC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAPvBH,EAOyB,WAAA,QAAA;AAGhBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPH,EAUS,WAAA,SAAA;"}
+{"version":3,"file":"table.component.js","sources":["../../../src/components/table/table.component.ts"],"sourcesContent":["import { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table.scss?inline'\n\n/**\n * Data table component.\n * @element dap-ds-table\n * @title - Table\n *\n * @slot - The default slot. Accepts `dap-ds-table-row` elements.\n *\n * @cssprop --dds-table-border-width - Width of the table border. (default: var(--dds-border-width-base, 1px))\n * @cssprop --dds-table-border-color - Color of the table border. (default: var(--dds-border-neutral-subtle))\n * @cssprop --dds-table-border-radius - Border radius of the table. (default: var(--dds-radius-small, 4px))\n * @cssprop --dds-table-row-divider-color - Color of the divider between rows in mobile view. (default: var(--dds-border-neutral-subtle))\n */\nexport default class DapDSTable extends DdsElement {\n  static tagName = 'dap-ds-table'\n\n  /**@ignore */\n  @queryAssignedElements() rows!: Array<HTMLElement>\n  /** The html role of the table. A static data table is a `table`; `grid` is\n   * only right for an interactive widget with keyboard-navigable cells. */\n  @property({ reflect: true }) public role = 'table'\n  /**If the table has mobile design */\n  @property({ type: Boolean, reflect: true }) mobile = false\n\n  /** The caption of the table */\n  @property({ type: String }) caption = ''\n\n  static readonly styles = unsafeCSS(styles)\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    this.rows.forEach((row, index) => {\n      if (index === this.rows.length - 1) {\n        row.toggleAttribute('last')\n      }\n    })\n  }\n\n  protected updated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    // The caption names the table. The rendered <caption> is in the shadow root\n    // and not tied to the host's role, so the name goes on the host instead;\n    // never set an empty label.\n    if (_changedProperties.has('caption')) {\n      if (this.caption) {\n        this.setAttribute('aria-label', this.caption)\n      } else {\n        this.removeAttribute('aria-label')\n      }\n    }\n  }\n\n  render() {\n    // aria-hidden: the caption text is already the host's aria-label, so screen\n    // readers would otherwise announce it twice\n    return html`\n      ${this.caption\n        ? html`<caption class=\"caption\" part=\"caption\" aria-hidden=\"true\">\n            ${this.caption}\n          </caption>`\n        : nothing}\n      <slot></slot>\n    `\n  }\n}\n"],"names":["_DapDSTable","DdsElement","_changedProperties","row","index","html","nothing","unsafeCSS","styles","DapDSTable","__decorateClass","queryAssignedElements","property"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAO+B,KAAO,OAAO,SAEU,KAAA,SAAA,IAGf,KAAA,UAAA;AAAA,EAAA;AAAA,EAI5B,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD;AAAA,EAAA;AAAA,EAGO,QACRD,GACM;AAIF,IAAAA,EAAmB,IAAI,SAAS,MAC9B,KAAK,UACF,KAAA,aAAa,cAAc,KAAK,OAAO,IAE5C,KAAK,gBAAgB,YAAY;AAAA,EAErC;AAAA,EAGF,SAAS;AAGA,WAAAG;AAAAA,QACH,KAAK,UACHA;AAAAA,cACI,KAAK,OAAO;AAAA,wBAEhBC,CAAO;AAAA;AAAA;AAAA,EAAA;AAIjB;AApDEN,EAAO,UAAU,gBAaDA,EAAA,SAASO,EAAUC,CAAM;AAd3C,IAAqBC,IAArBT;AAI2BU,EAAA;AAAA,EAAxBC,EAAsB;AAAA,GAJJF,EAIM,WAAA,MAAA;AAGWC,EAAA;AAAA,EAAnCE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAPRH,EAOiB,WAAA,MAAA;AAEQC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GATvBH,EASyB,WAAA,QAAA;AAGhBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;"}

package/dist/components/textarea/textarea.component.d.ts

@@ -72,7 +72,6 @@ export default class DapDSTextarea extends GenericFormElement {
     private static nextId;
     private readonly inputId;
     private readonly labelId;
-    private readonly descriptionId;
     private readonly counterId;
     /**@ignore */
     input: HTMLTextAreaElement;
@@ -103,6 +102,12 @@ export default class DapDSTextarea extends GenericFormElement {
     onSelect(e: Event): void;
     formResetCallback(): void;
     handleInvalid(event: Event): void;
+    /**
+     * Combines description and feedback ids. Built as one value because a Lit
+     * attribute with several parts is removed entirely if any part is `nothing`.
+     * The description element is rendered by LabelableMixin with id="description".
+     */
+    private getAriaDescribedBy;
     private _renderFooter;
     render(): unknown;
     private _renderFeedback;

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

@@ -1,46 +1,46 @@
 var v = Object.getPrototypeOf;
 var x = Reflect.get;
-var y = (h, t, e) => x(v(h), e, t);
-var g = (h, t, e) => new Promise((n, r) => {
+var $ = (h, t, e) => x(v(h), e, t);
+var y = (h, t, e) => new Promise((n, r) => {
   var c = (d) => {
     try {
-      b(e.next(d));
-    } catch (m) {
-      r(m);
+      f(e.next(d));
+    } catch (b) {
+      r(b);
     }
-  }, p = (d) => {
+  }, u = (d) => {
     try {
-      b(e.throw(d));
-    } catch (m) {
-      r(m);
+      f(e.throw(d));
+    } catch (b) {
+      r(b);
     }
-  }, b = (d) => d.done ? n(d.value) : Promise.resolve(d.value).then(c, p);
-  b((e = e.apply(h, t)).next());
+  }, f = (d) => d.done ? n(d.value) : Promise.resolve(d.value).then(c, u);
+  f((e = e.apply(h, t)).next());
 });
-import { clsx as $ } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as u } from "../../node_modules/lit-html/lit-html.js";
+import { nothing as g } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
 import { property as l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { state as k } from "../../node_modules/@lit/reactive-element/decorators/state.js";
 import { query as I } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
+import { html as p } from "../../node_modules/lit-html/static.js";
 import { GenericFormElement as C } from "../../internal/mixin/genericFormElement.js";
 import S from "../feedback/feedback.component.js";
-import w from "../typography/typography.component.js";
-import _ from "./textarea.scss.js";
+import _ from "../typography/typography.component.js";
+import w from "./textarea.scss.js";
 import { unsafeCSS as F } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var z = Object.defineProperty, o = (h, t, e, n) => {
-  for (var r = void 0, c = h.length - 1, p; c >= 0; c--)
-    (p = h[c]) && (r = p(t, e, r) || r);
-  return r && z(t, e, r), r;
+var D = Object.defineProperty, o = (h, t, e, n) => {
+  for (var r = void 0, c = h.length - 1, u; c >= 0; c--)
+    (u = h[c]) && (r = u(t, e, r) || r);
+  return r && D(t, e, r), r;
 }, a;
 const i = (a = class extends C {
   constructor() {
     super(), this.hideCounter = !1, this.rows = 6, this.placeholder = "", this.count = 0, a.nextId++;
     const t = typeof crypto != "undefined" && crypto.randomUUID ? crypto.randomUUID().slice(0, 8) : Date.now().toString(36);
-    this.inputId = `input-${a.nextId}-${t}`, this.labelId = `label-${a.nextId}-${t}`, this.descriptionId = `description-${a.nextId}-${t}`, this.counterId = `counter-${a.nextId}-${t}`, this.feedbackId = `feedback-${a.nextId}-${t}`;
+    this.inputId = `input-${a.nextId}-${t}`, this.labelId = `label-${a.nextId}-${t}`, this.counterId = `counter-${a.nextId}-${t}`, this.feedbackId = `feedback-${a.nextId}-${t}`;
   }
   get focusElement() {
     return this.input;
@@ -49,9 +49,9 @@ const i = (a = class extends C {
     (t == null ? void 0 : t.target).setAttribute("slot", "icon");
   }
   connectedCallback() {
-    return g(this, null, function* () {
+    return y(this, null, function* () {
       var t;
-      y(a.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.input.value = (t = this.value) != null ? t : "", this.count = this.input.value.length;
+      $(a.prototype, this, "connectedCallback").call(this), yield this.updateComplete, this.input.value = (t = this.value) != null ? t : "", this.count = this.input.value.length;
     });
   }
   attributeChangedCallback(t, e, n) {
@@ -76,12 +76,21 @@ const i = (a = class extends C {
   handleInvalid(t) {
     t.preventDefault();
   }
+  /**
+   * Combines description and feedback ids. Built as one value because a Lit
+   * attribute with several parts is removed entirely if any part is `nothing`.
+   * The description element is rendered by LabelableMixin with id="description".
+   */
+  getAriaDescribedBy() {
+    const t = [];
+    return this.description && t.push("description"), this.feedback && this.feedbackId && t.push(this.feedbackId), t.length > 0 ? t.join(" ") : void 0;
+  }
   _renderFooter() {
-    const t = this.hideCounter ? u : f`
+    const t = this.hideCounter ? g : p`
     <dap-ds-typography
           part="counter"
           exportparts="base: counter-base"
-          class=${$("textarea__counter", {
+          class=${m("textarea__counter", {
       "textarea__counter--error": this.status === "error"
     })}
           variant="caption"
@@ -92,7 +101,7 @@ const i = (a = class extends C {
         </dap-ds-typography>
       </div>
     `;
-    return f`
+    return p`
       <div class="textarea__footer" part="footer">
         ${this.feedback && this._renderFeedback()}
         <span part="counter-container">${t}</span>
@@ -102,10 +111,10 @@ const i = (a = class extends C {
   render() {
     return this.renderLabel(
       this.labelId,
-      f`
+      p`
         <div
           part="base"
-          class=${$(
+          class=${m(
         "textarea",
         `textarea--${this.effectiveSize}`,
         { "textarea--success": this.status === "success" },
@@ -119,9 +128,7 @@ const i = (a = class extends C {
             part="input"
             class="textarea__control"
             aria-disabled=${this.disabled}
-            aria-describedby="${s(
-        this.description ? this.descriptionId : u
-      )} ${this.feedback ? this.feedbackId : u}"
+            aria-describedby=${s(this.getAriaDescribedBy())}
             ?disabled=${this.disabled}
             ?readonly=${this.readonly}
             ?required=${this.required}
@@ -133,7 +140,7 @@ const i = (a = class extends C {
             placeholder=${s(this.placeholder)}
             ?autofocus=${this.autofocus}
             ?value=${this.value}
-            aria-labelledby=${s(this.label ? this.labelId : u)}
+            aria-labelledby=${s(this.label ? this.labelId : g)}
             @input=${this.onInput}
             @keydown=${this.onKeydown}
             @change=${this.onChange}
@@ -148,12 +155,12 @@ const i = (a = class extends C {
     );
   }
   _renderFeedback() {
-    return f`
+    return p`
       <dap-ds-feedback
         part="feedback"
         feedbackType=${s(this.feedbackType)}
         feedbackSize=${s(this.effectiveSize)}
-        class=${$("textarea__feedback", {
+        class=${m("textarea__feedback", {
       "textarea__feedback--sm": this.effectiveSize === "sm"
     })}
         id=${s(this.feedbackId)}
@@ -167,9 +174,9 @@ const i = (a = class extends C {
     `;
   }
 }, a.tagName = "dap-ds-textarea", a.dependencies = {
-  "dap-ds-typography": w,
+  "dap-ds-typography": _,
   "dap-ds-feedback": S
-}, a.nextId = 0, a.styles = F(_), a);
+}, a.nextId = 0, a.styles = F(w), a);
 o([
   I(".textarea__control")
 ], i.prototype, "input");

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    // 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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"}
+{"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 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.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  /**\n   * Combines description and feedback ids. Built as one value because a Lit\n   * attribute with several parts is removed entirely if any part is `nothing`.\n   * The description element is rendered by LabelableMixin with id=\"description\".\n   */\n  private getAriaDescribedBy(): string | undefined {\n    const ids: string[] = []\n\n    if (this.description) {\n      ids.push('description')\n    }\n\n    if (this.feedback && this.feedbackId) {\n      ids.push(this.feedbackId)\n    }\n\n    return ids.length > 0 ? ids.join(' ') : undefined\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(this.getAriaDescribedBy())}\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","ids","counter","nothing","html","clsx","ifDefined","DapDSTypography","DapDSFeedback","unsafeCSS","styles","__decorateClass","query","property","state","DapDSTextarea"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAqBA,KAArBC,IAAA,cAA2CC,EAAmB;AAAA,EAoC5D,cAAc;AACN,UAAA,GApBkD,KAAA,cAAA,IAMd,KAAA,OAAA,GAIlB,KAAA,cAAA,IAKT,KAAA,QAAA,GAMDD,EAAA;AACd,UAAME,IACJ,OAAO,UAAW,eAAe,OAAO,aACpC,OAAO,WAAA,EAAa,MAAM,GAAG,CAAC,IAC9B,KAAK,IAAI,EAAE,SAAS,EAAE;AAC5B,SAAK,UAAU,SAASF,EAAc,MAAM,IAAIE,CAAY,IAC5D,KAAK,UAAU,SAASF,EAAc,MAAM,IAAIE,CAAY,IAC5D,KAAK,YAAY,WAAWF,EAAc,MAAM,IAAIE,CAAY,IAEhE,KAAK,aAAa,YAAYF,EAAc,MAAM,IAAIE,CAAY;AAAA,EAAA;AAAA,EAGpE,IAAI,eAAe;AACjB,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,kBAAkBC,GAAc;AAE/B,KADQA,KAAA,gBAAAA,EAAO,QACf,aAAa,QAAQ,MAAM;AAAA,EAAA;AAAA,EAG9B,oBAAoB;AAAA,WAAAC,EAAA;;AACxB,MAAAC,EAAAL,EAAA,iBAAM,0BAAN,IAAwB,GAExB,MAAM,KAAK,gBACN,KAAA,MAAM,SAAQA,IAAA,KAAK,UAAL,OAAAA,IAAc,IAC5B,KAAA,QAAQ,KAAK,MAAM,MAAM;AAAA,IAAA;AAAA;AAAA,EAGhC,yBAAyBM,GAAcC,GAAeC,GAAe;AAC7D,UAAA,yBAAyBF,GAAMC,GAAUC,CAAQ,GAEnDF,MAAS,WAAW,KAAK,UAC3B,KAAK,MAAM,QAAQE;AAAA,EACrB;AAAA,EAGF,UAAU;AAKH,SAAA,QAAQ,KAAK,MAAM,MAAM,QACzB,KAAA,QAAQ,KAAK,MAAM,OAExB,MAAM,QAAQ,GAEd,KAAK,KAAK,oBAAoB,EAAE,OAAO,KAAK,OAAO,GAEnD,KAAK,YAAY;AAAA,EAAA;AAAA,EAGnB,WAAW;AAEJ,SAAA,QAAQ,KAAK,MAAM,MAAM,QACzB,KAAA,QAAQ,KAAK,MAAM,OAExB,MAAM,SAAS,GAEf,KAAK,KAAK,oBAAoB,EAAE,OAAO,KAAK,OAAO,GAEnD,KAAK,YAAY;AAAA,EAAA;AAAA,EAGnB,SAASC,GAAU;AACjB,UAAMC,IAASD,EAAE,QACXE,IAAYD,EAAO,MAAM;AAAA,MAC7BA,EAAO;AAAA,MACPA,EAAO;AAAA,IACT;AACA,SAAK,KAAK,cAAc,EAAE,OAAOC,GAAW;AAAA,EAAA;AAAA,EAG9C,oBAAoB;AACb,SAAA,UAAU,YAAY,EAAE,GAC7B,KAAK,UAAU,aAAa,KAAK,gBAAgB,EAAE,GAC9C,KAAA,QAAQ,KAAK,gBAAgB,IAC7B,KAAA,MAAM,QAAQ,KAAK,gBAAgB;AAAA,EAAA;AAAA,EAG1C,cAAcR,GAAc;AAC1B,IAAAA,EAAM,eAAe;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQf,qBAAyC;AAC/C,UAAMS,IAAgB,CAAC;AAEvB,WAAI,KAAK,eACPA,EAAI,KAAK,aAAa,GAGpB,KAAK,YAAY,KAAK,cACpBA,EAAA,KAAK,KAAK,UAAU,GAGnBA,EAAI,SAAS,IAAIA,EAAI,KAAK,GAAG,IAAI;AAAA,EAAA;AAAA,EAGlC,gBAAgB;AAChB,UAAAC,IAAW,KAAK,cAgBlBC,IAfAC;AAAAA;AAAAA;AAAAA;AAAAA,kBAIUC,EAAK,qBAAqB;AAAA,MAChC,4BAA4B,KAAK,WAAW;AAAA,IAAA,CAC7C,CAAC;AAAA;AAAA,kBAEM,KAAK,IAA6B;AAAA,eACrC,KAAK,SAAS;AAAA;AAAA,YAEjB,KAAK,KAAK;AAAA;AAAA;AAAA;AAMX,WAAAD;AAAAA;AAAAA,UAED,KAAK,YAAY,KAAK,gBAAiB,CAAA;AAAA,yCACRF,CAAO;AAAA;AAAA;AAAA,EAAA;AAAA,EAK9C,SAAS;AACP,WAAO,KAAK;AAAA,MACV,KAAK;AAAA,MACLE;AAAAA;AAAAA;AAAAA,kBAGYC;AAAA,QACN;AAAA,QACA,aAAa,KAAK,aAAa;AAAA,QAC/B,EAAE,qBAAqB,KAAK,WAAW,UAAU;AAAA,QACjD,EAAE,mBAAmB,KAAK,WAAW,QAAQ;AAAA,QAC7C,EAAE,sBAAsB,KAAK,SAAS;AAAA,QACtC,EAAE,sBAAsB,KAAK,SAAS;AAAA,QACtC,EAAE,sBAAsB,KAAK,SAAS;AAAA,MAAA,CACvC;AAAA;AAAA,iBAEM,KAAK,OAAO;AAAA;AAAA;AAAA,4BAGD,KAAK,QAAQ;AAAA,+BACVC,EAAU,KAAK,oBAAoB,CAAC;AAAA,wBAC3C,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACb,KAAK,QAAQ;AAAA,wBACbA,EAAU,KAAK,SAAS,CAAC;AAAA,wBACzBA,EAAU,KAAK,SAAS,CAAC;AAAA,mBAC9BA,EAAU,KAAK,IAAI,CAAC;AAAA,mBACpBA,EAAU,KAAK,IAAI,CAAC;AAAA,mBACpBA,EAAU,KAAK,IAAI,CAAC;AAAA,0BACbA,EAAU,KAAK,WAAW,CAAC;AAAA,yBAC5B,KAAK,SAAS;AAAA,qBAClB,KAAK,KAAK;AAAA,8BACDA,EAAU,KAAK,QAAQ,KAAK,UAAUH,CAAO,CAAC;AAAA,qBACvD,KAAK,OAAO;AAAA,uBACV,KAAK,SAAS;AAAA,sBACf,KAAK,QAAQ;AAAA,oBACf,KAAK,MAAM;AAAA,qBACV,KAAK,OAAO;AAAA,sBACX,KAAK,QAAQ;AAAA,uBACZ,KAAK,aAAa;AAAA;AAAA,YAE7B,KAAK,cAAe,CAAA;AAAA;AAAA;AAAA,IAG5B;AAAA,EAAA;AAAA,EAGM,kBAAkB;AACjB,WAAAC;AAAAA;AAAAA;AAAAA,uBAGYE,EAAU,KAAK,YAAY,CAAC;AAAA,uBAC5BA,EAAU,KAAK,aAAa,CAAe;AAAA,gBAClDD,EAAK,sBAAsB;AAAA,MACjC,0BAA0B,KAAK,kBAAkB;AAAA,IAAA,CAClD,CAAC;AAAA,aACGC,EAAU,KAAK,UAAU,CAAC;AAAA;AAAA,kBAErB,KAAK,MAAM;AAAA;AAAA;AAAA,yBAGJ,KAAK,iBAAiB;AAAA,UACrC,KAAK,QAAQ;AAAA;AAAA;AAAA,EAAA;AAIvB,GAzOEjB,EAAO,UAAU,mBAEjBA,EAAO,eAAe;AAAA,EACpB,qBAAqBkB;AAAA,EACrB,mBAAmBC;AACrB,GAEAnB,EAAe,SAAS,GA0BRA,EAAA,SAASoB,EAAUC,CAAM,GAlC3CrB;AAe+BsB,EAAA;AAAA,EAA5BC,EAAM,oBAAoB;AAAA,GAfRxB,EAeU,WAAA,OAAA;AAEeuB,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAjBvBzB,EAiByB,WAAA,aAAA;AAEhBuB,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAnBPzB,EAmBS,WAAA,WAAA;AAEAuB,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GArBPzB,EAqBS,WAAA,WAAA;AAEAuB,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvBPzB,EAuBS,WAAA,MAAA;AAEAuB,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAzBPzB,EAyBS,WAAA,MAAA;AAEhBuB,EAAA;AAAA,EAAXE,EAAS;AAAA,GA3BSzB,EA2BP,WAAA,aAAA;AAEAuB,EAAA;AAAA,EAAXE,EAAS;AAAA,GA7BSzB,EA6BP,WAAA,MAAA;AAGHuB,EAAA;AAAA,EAARG,EAAM;AAAA,GAhCY1B,EAgCV,WAAA,OAAA;AAhCX,IAAqB2B,IAArB3B;"}