dap-design-system 0.62.1 → 0.62.3

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-header.component.d.ts

@@ -1,3 +1,4 @@
+import { PropertyValueMap } from 'lit';
 import { DdsElement } from '../../internal/dds-hu-element';
 /**
  * Table header cell component.
@@ -23,7 +24,10 @@ export default class DapDSTableHeader extends DdsElement {
     static readonly styles: import('lit').CSSResult;
     /**If the header cell is the last one.*/
     last: boolean;
-    /** The html role of the header cell */
+    /** The html role of the header cell. Derived from `scope` unless set explicitly. */
     role: string;
+    /** Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside). */
+    scope: 'col' | 'row';
+    protected willUpdate(changedProperties: PropertyValueMap<this>): void;
     render(): import('lit-html').TemplateResult;
 }

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

@@ -1,32 +1,38 @@
 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 l } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { html as f } from "../../node_modules/lit-html/static.js";
-import { DdsElement as n } from "../../internal/dds-hu-element.js";
-import u from "./table-header.scss.js";
-import { unsafeCSS as c } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var d = Object.defineProperty, a = (s, m, p, h) => {
-  for (var t = void 0, o = s.length - 1, i; o >= 0; o--)
-    (i = s[o]) && (t = i(m, p, t) || t);
-  return t && d(m, p, t), t;
+import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { html as c } from "../../node_modules/lit-html/static.js";
+import { DdsElement as f } from "../../internal/dds-hu-element.js";
+import n from "./table-header.scss.js";
+import { unsafeCSS as h } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var u = Object.defineProperty, i = (l, e, a, d) => {
+  for (var t = void 0, s = l.length - 1, m; s >= 0; s--)
+    (m = l[s]) && (t = m(e, a, t) || t);
+  return t && u(e, a, t), t;
 };
-const e = class e extends n {
+const o = class o extends f {
   constructor() {
-    super(...arguments), this.role = "columnheader";
+    super(...arguments), this.role = "columnheader", this.scope = "col";
+  }
+  willUpdate(e) {
+    e.has("scope") && this.hasAttribute("scope") && (this.role = this.scope === "row" ? "rowheader" : "columnheader");
   }
   render() {
-    return f` <slot part="base"></slot> `;
+    return c` <slot part="base"></slot> `;
   }
 };
-e.tagName = "dap-ds-table-header", e.styles = c(u);
-let r = e;
-a([
-  l({ type: Boolean, reflect: !0 })
+o.tagName = "dap-ds-table-header", o.styles = h(n);
+let r = o;
+i([
+  p({ type: Boolean, reflect: !0 })
 ], r.prototype, "last");
-a([
-  l({ reflect: !0 })
+i([
+  p({ reflect: !0 })
 ], r.prototype, "role");
+i([
+  p({ type: String, reflect: !0 })
+], r.prototype, "scope");
 export {
   r as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"table-header.component.js","sources":["../../../src/components/table/table-header.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table-header.scss?inline'\n\n/**\n * Table header cell component.\n * @element dap-ds-table-header\n * @title - Table header\n * @group table\n *\n * @slot - The default slot.\n *\n * @csspart base - The main header cell container.\n *\n * @cssproperty --dds-table-header-padding-block - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-padding-inline-start - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-header-padding-inline-end - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-border-width - Width of the header cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-header-border-color - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-header-text-color - Text color of the header cell. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-table-header-font-weight - Font weight of the header cell text. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-table-header-line-height - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge))\n */\nexport default class DapDSTableHeader extends DdsElement {\n  static tagName = 'dap-ds-table-header'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**If the header cell is the last one.*/\n  @property({ type: Boolean, reflect: true }) last: boolean\n  /** The html role of the header cell */\n  @property({ reflect: true })\n  public role = 'columnheader'\n\n  render() {\n    return html` <slot part=\"base\"></slot> `\n  }\n}\n"],"names":["_DapDSTableHeader","DdsElement","html","unsafeCSS","styles","DapDSTableHeader","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO;AAAA,EAAA;AAAA,EAEd,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;AAbEF,EAAO,UAAU,uBAEDA,EAAA,SAASG,EAAUC,CAAM;AAH3C,IAAqBC,IAArBL;AAM8CM,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;"}
+{"version":3,"file":"table-header.component.js","sources":["../../../src/components/table/table-header.component.ts"],"sourcesContent":["import { PropertyValueMap, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './table-header.scss?inline'\n\n/**\n * Table header cell component.\n * @element dap-ds-table-header\n * @title - Table header\n * @group table\n *\n * @slot - The default slot.\n *\n * @csspart base - The main header cell container.\n *\n * @cssproperty --dds-table-header-padding-block - Padding for the top and bottom of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-padding-inline-start - Padding for the start (left in LTR) of the header cell. (default: var(--dds-spacing-500))\n * @cssproperty --dds-table-header-padding-inline-end - Padding for the end (right in LTR) of the header cell. (default: var(--dds-spacing-200))\n * @cssproperty --dds-table-header-border-width - Width of the header cell's bottom border. (default: var(--dds-border-width-base))\n * @cssproperty --dds-table-header-border-color - Color of the header cell's bottom border. (default: var(--dds-border-neutral-subtle))\n * @cssproperty --dds-table-header-text-color - Text color of the header cell. (default: var(--dds-text-neutral-strong))\n * @cssproperty --dds-table-header-font-weight - Font weight of the header cell text. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-table-header-line-height - Line height of the header cell text. (default: var(--dds-font-line-height-xlarge))\n */\nexport default class DapDSTableHeader extends DdsElement {\n  static tagName = 'dap-ds-table-header'\n\n  static readonly styles = unsafeCSS(styles)\n\n  /**If the header cell is the last one.*/\n  @property({ type: Boolean, reflect: true }) last: boolean\n  /** The html role of the header cell. Derived from `scope` unless set explicitly. */\n  @property({ reflect: true })\n  public role = 'columnheader'\n\n  /** Which cells the header labels, like the native `<th scope>`: `col` (cells below) or `row` (cells beside). */\n  @property({ type: String, reflect: true }) scope: 'col' | 'row' = 'col'\n\n  protected willUpdate(changedProperties: PropertyValueMap<this>): void {\n    // Only follow scope after the first render's default, so an explicit\n    // role=\"...\" attribute without a scope is kept\n    if (changedProperties.has('scope') && this.hasAttribute('scope')) {\n      this.role = this.scope === 'row' ? 'rowheader' : 'columnheader'\n    }\n  }\n\n  render() {\n    return html` <slot part=\"base\"></slot> `\n  }\n}\n"],"names":["_DapDSTableHeader","DdsElement","changedProperties","html","unsafeCSS","styles","DapDSTableHeader","__decorateClass","property"],"mappings":";;;;;;;;;;;;;AA0BA,MAAqBA,IAArB,MAAqBA,UAAyBC,EAAW;AAAA,EAAzD,cAAA;AAAA,UAAA,GAAA,SAAA,GASE,KAAO,OAAO,gBAGoD,KAAA,QAAA;AAAA,EAAA;AAAA,EAExD,WAAWC,GAAiD;AAGpE,IAAIA,EAAkB,IAAI,OAAO,KAAK,KAAK,aAAa,OAAO,MAC7D,KAAK,OAAO,KAAK,UAAU,QAAQ,cAAc;AAAA,EACnD;AAAA,EAGF,SAAS;AACA,WAAAC;AAAAA,EAAA;AAEX;AAxBEH,EAAO,UAAU,uBAEDA,EAAA,SAASI,EAAUC,CAAM;AAH3C,IAAqBC,IAArBN;AAM8CO,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GANvBF,EAMyB,WAAA,MAAA;AAGrCC,EAAA;AAAA,EADNC,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GARRF,EASZ,WAAA,MAAA;AAGoCC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GAZtBF,EAYwB,WAAA,OAAA;"}

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

@@ -16,12 +16,15 @@ export default class DapDSTable extends DdsElement {
     static tagName: string;
     /**@ignore */
     rows: Array<HTMLElement>;
+    /** The html role of the table. Defaults to `table`; use `grid` only for an interactive table. */
     role: string;
     /**If the table has mobile design */
     mobile: boolean;
     /** The caption of the table */
     caption: string;
     static readonly styles: import('lit').CSSResult;
+    private captionLabelApplied;
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected willUpdate(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import('lit-html').TemplateResult;
 }

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

@@ -1,50 +1,55 @@
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
+import { nothing as f } 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 { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { queryAssignedElements as d } 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 { DdsElement as m } from "../../internal/dds-hu-element.js";
+import b 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;
+var y = Object.defineProperty, s = (l, i, a, n) => {
+  for (var t = void 0, o = l.length - 1, h; o >= 0; o--)
+    (h = l[o]) && (t = h(i, a, t) || t);
+  return t && y(i, a, t), t;
 };
-const o = class o extends h {
+const r = class r extends m {
   constructor() {
-    super(...arguments), this.role = "grid", this.mobile = !1, this.caption = "";
+    super(...arguments), this.role = "table", this.mobile = !1, this.caption = "", this.captionLabelApplied = !1;
   }
   firstUpdated(i) {
-    this.rows.forEach((e, l) => {
-      l === this.rows.length - 1 && e.toggleAttribute("last");
-    }), this.setAttribute("aria-label", this.caption);
+    this.rows.forEach((a, n) => {
+      n === this.rows.length - 1 && a.toggleAttribute("last");
+    }), !this.caption && !this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby") && console.warn(
+      "dap-ds-table: the table has no accessible name. Set a caption (or aria-label / aria-labelledby) that describes its purpose."
+    );
+  }
+  willUpdate(i) {
+    i.has("caption") && (this.caption ? (this.setAttribute("aria-label", this.caption), this.captionLabelApplied = !0) : this.captionLabelApplied && (this.removeAttribute("aria-label"), this.captionLabelApplied = !1));
   }
   render() {
     return c`
-      <caption class="caption" part="caption">
-        ${this.caption}
-      </caption>
+      ${this.caption ? c`<caption class="caption" part="caption" aria-hidden="true">
+            ${this.caption}
+          </caption>` : f}
       <slot></slot>
     `;
   }
 };
-o.tagName = "dap-ds-table", o.styles = u(d);
-let r = o;
+r.tagName = "dap-ds-table", r.styles = u(b);
+let e = r;
 s([
-  f()
-], r.prototype, "rows");
+  d()
+], e.prototype, "rows");
 s([
-  a({ reflect: !0 })
-], r.prototype, "role");
+  p({ reflect: !0 })
+], e.prototype, "role");
 s([
-  a({ type: Boolean, reflect: !0 })
-], r.prototype, "mobile");
+  p({ type: Boolean, reflect: !0 })
+], e.prototype, "mobile");
 s([
-  a({ type: String })
-], r.prototype, "caption");
+  p({ type: String })
+], e.prototype, "caption");
 export {
-  r as default
+  e as default
 };
 //# sourceMappingURL=table.component.js.map

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  // `grid` is only right for an interactive table with keyboard-navigable cells\n  /** The html role of the table. Defaults to `table`; use `grid` only for an interactive table. */\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  // Whether the host's aria-label came from the caption (and so is ours to\n  // remove); an aria-label the author set is left alone\n  private captionLabelApplied = false\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    if (\n      !this.caption &&\n      !this.hasAttribute('aria-label') &&\n      !this.hasAttribute('aria-labelledby')\n    ) {\n      console.warn(\n        'dap-ds-table: the table has no accessible name. Set a caption (or aria-label / aria-labelledby) that describes its purpose.',\n      )\n    }\n  }\n\n  protected willUpdate(\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. Done before render (not in updated()) because\n    // aria-label is a reactive property and setting it after would re-render.\n    if (_changedProperties.has('caption')) {\n      if (this.caption) {\n        this.setAttribute('aria-label', this.caption)\n        this.captionLabelApplied = true\n      } else if (this.captionLabelApplied) {\n        this.removeAttribute('aria-label')\n        this.captionLabelApplied = false\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,IAMtC,KAAQ,sBAAsB;AAAA,EAAA;AAAA,EAEpB,aACRC,GACM;AACN,SAAK,KAAK,QAAQ,CAACC,GAAKC,MAAU;AAChC,MAAIA,MAAU,KAAK,KAAK,SAAS,KAC/BD,EAAI,gBAAgB,MAAM;AAAA,IAC5B,CACD,GAGC,CAAC,KAAK,WACN,CAAC,KAAK,aAAa,YAAY,KAC/B,CAAC,KAAK,aAAa,iBAAiB,KAE5B,QAAA;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAAA,EAGQ,WACRD,GACM;AAKF,IAAAA,EAAmB,IAAI,SAAS,MAC9B,KAAK,WACF,KAAA,aAAa,cAAc,KAAK,OAAO,GAC5C,KAAK,sBAAsB,MAClB,KAAK,wBACd,KAAK,gBAAgB,YAAY,GACjC,KAAK,sBAAsB;AAAA,EAE/B;AAAA,EAGF,SAAS;AAGA,WAAAG;AAAAA,QACH,KAAK,UACHA;AAAAA,cACI,KAAK,OAAO;AAAA,wBAEhBC,CAAO;AAAA;AAAA;AAAA,EAAA;AAIjB;AArEEN,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;