dap-design-system 0.61.4 → 0.61.5

package/dist/components/breadcrumb/breadcrumb.component.js

@@ -1,28 +1,27 @@
-import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
+import { clsx as u } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { html as u } from "../../node_modules/lit-html/lit-html.js";
+import { html as c } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
-import { property as p } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { property as n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { query as h } from "../../node_modules/@lit/reactive-element/decorators/query.js";
 import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
 import { DdsElement as f } from "../../internal/dds-hu-element.js";
 import b from "../breadcrumb-item/breadcrumb-item.component.js";
 import y from "./breadcrumb.scss.js";
 import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, i = (d, r, o, t) => {
-  for (var e = void 0, a = d.length - 1, l; a >= 0; a--)
-    (l = d[a]) && (e = l(r, o, e) || e);
-  return e && v(r, o, e), e;
+var v = Object.defineProperty, o = (p, r, l, t) => {
+  for (var e = void 0, a = p.length - 1, d; a >= 0; a--)
+    (d = p[a]) && (e = d(r, l, e) || e);
+  return e && v(r, l, e), e;
 };
-const n = class n extends f {
+const i = class i extends f {
   constructor() {
     super(...arguments), this.variant = "normal", this.mobile = !1, this._cachedItems = [];
   }
   cloneSeparator() {
-    const o = this.separatorSlot.assignedElements({
+    return this.separatorSlot.assignedElements({
       flatten: !0
     })[0].cloneNode(!0);
-    return o.slot = "separator", o;
   }
   handleSlotChange() {
     this._debounceTimeout && clearTimeout(this._debounceTimeout), this._debounceTimeout = window.setTimeout(() => {
@@ -42,18 +41,16 @@ const n = class n extends f {
         return;
       } else
         t.style.display = "";
-      t.toggleAttribute("inverted", this.variant === "inverted"), t.variant = this.variant, a ? t.setAttribute("aria-current", "page") : t.removeAttribute("aria-current"), t.toggleAttribute("disabled", a);
-      const l = t.querySelector('[slot="separator"]');
-      !a && !l && t.append(this.cloneSeparator());
+      t.toggleAttribute("inverted", this.variant === "inverted"), t.variant = this.variant, a ? t.setAttribute("aria-current", "page") : t.removeAttribute("aria-current"), t.toggleAttribute("disabled", a), t.inheritedSeparator = a ? void 0 : this.cloneSeparator();
     }));
   }
   render() {
-    return u`
+    return c`
       <nav
         part="base"
         aria-label="${m(this.ariaLabel) || ""}"
         aria-labelledby="${m(this.ariaLabelledBy) || ""}"
-        class="${c("breadcrumb")}">
+        class="${u("breadcrumb")}">
         <ol class="breadcrumb__list" part="list">
           <slot @slotchange="${this.handleSlotChange}"></slot>
         </ol>
@@ -64,22 +61,22 @@ const n = class n extends f {
     `;
   }
 };
-n.tagName = "dap-ds-breadcrumb", n.styles = g(y);
-let s = n;
-i([
+i.tagName = "dap-ds-breadcrumb", i.styles = g(y);
+let s = i;
+o([
   h("slot")
 ], s.prototype, "defaultSlot");
-i([
+o([
   h('slot[name="separator"]')
 ], s.prototype, "separatorSlot");
-i([
-  p({ type: String })
+o([
+  n({ type: String })
 ], s.prototype, "variant");
-i([
-  p({ type: Boolean })
+o([
+  n({ type: Boolean })
 ], s.prototype, "mobile");
-i([
-  p({ type: String, attribute: "aria-labelledby" })
+o([
+  n({ type: String, attribute: "aria-labelledby" })
 ], s.prototype, "ariaLabelledBy");
 export {
   s as default

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.component.js","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.component'\nimport styles from './breadcrumb.scss?inline'\n\n/**\n * `dap-ds-breadcrumb`\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @element dap-ds-breadcrumb\n * @title - Breadcrumb\n *\n * @slot - The content of the breadcrumb.\n * @slot separator - The separator between breadcrumb items. Default is '/'.\n *\n * @csspart base - The main breadcrumb container.\n * @csspart separator - The separator of the breadcrumb.\n *\n * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container (default: 100%)\n * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb (default: auto)\n * @cssproperty --dds-breadcrumb-transition - The transition property for the breadcrumb (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-list-display - The display property of the breadcrumb list (default: flex)\n * @cssproperty --dds-breadcrumb-list-flex-wrap - The flex-wrap property of the breadcrumb list (default: nowrap)\n * @cssproperty --dds-breadcrumb-list-align-items - The align-items property of the breadcrumb list (default: center)\n * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list (default: max-content)\n */\nexport default class DapDSBreadcrumb extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb'\n\n  static readonly styles = unsafeCSS(styles)\n  /** @ignore */\n  @query('slot') defaultSlot!: HTMLSlotElement\n  /** @ignore */\n  @query('slot[name=\"separator\"]') separatorSlot!: HTMLSlotElement\n\n  /* Variant of the breadcrumb\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String }) variant = 'normal'\n\n  /** Mobile version of the breadcrumb */\n  @property({ type: Boolean }) mobile = false\n\n  /** The aria-labelledby of the breadcrumb */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  private _cachedItems: DapDSBreadcrumbItem[] = []\n  private _debounceTimeout?: number\n\n  private cloneSeparator() {\n    const separator = this.separatorSlot.assignedElements({\n      flatten: true,\n    })[0] as HTMLElement\n\n    const clone = separator.cloneNode(true) as HTMLElement\n    clone.slot = 'separator'\n\n    return clone\n  }\n\n  private handleSlotChange(): void {\n    if (this._debounceTimeout) {\n      clearTimeout(this._debounceTimeout)\n    }\n\n    this._debounceTimeout = window.setTimeout(() => {\n      this._updateBreadcrumbItems()\n    }, 16) // One frame delay for batching\n  }\n\n  private _updateBreadcrumbItems(): void {\n    const items = Array.from(\n      this.defaultSlot.assignedElements({ flatten: true }),\n    ).filter(\n      (el): el is DapDSBreadcrumbItem => el instanceof DapDSBreadcrumbItem,\n    )\n\n    // Check if items have actually changed to avoid unnecessary work\n    const itemsChanged =\n      items.length !== this._cachedItems.length ||\n      items.some((item, index) => item !== this._cachedItems[index])\n\n    if (!itemsChanged) return\n\n    this._cachedItems = items\n\n    items.forEach((item, index) => {\n      const isLast = index === items.length - 1\n\n      if (this.mobile && index !== 0 && !isLast) {\n        item.style.display = 'none'\n        return\n      } else {\n        item.style.display = ''\n      }\n\n      item.toggleAttribute('inverted', this.variant === 'inverted')\n      item.variant = this.variant\n      if (isLast) {\n        item.setAttribute('aria-current', 'page')\n      } else {\n        item.removeAttribute('aria-current')\n      }\n      item.toggleAttribute('disabled', isLast)\n\n      const separator = item.querySelector('[slot=\"separator\"]')\n      if (!isLast && !separator) {\n        item.append(this.cloneSeparator())\n      }\n    })\n  }\n\n  render() {\n    return html`\n      <nav\n        part=\"base\"\n        aria-label=\"${ifDefined(this.ariaLabel) || ''}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy) || ''}\"\n        class=\"${clsx('breadcrumb')}\">\n        <ol class=\"breadcrumb__list\" part=\"list\">\n          <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n        </ol>\n      </nav>\n      <span hidden aria-hidden=\"true\">\n        <slot name=\"separator\"> <span>/</span> </slot>\n      </span>\n    `\n  }\n}\n"],"names":["_DapDSBreadcrumb","DdsElement","clone","items","el","DapDSBreadcrumbItem","item","index","isLast","separator","html","ifDefined","clsx","unsafeCSS","styles","DapDSBreadcrumb","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAW;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAYwC,KAAA,UAAA,UAGA,KAAA,SAAA,IAMtC,KAAQ,eAAsC,CAAC;AAAA,EAAA;AAAA,EAGvC,iBAAiB;AAKjB,UAAAC,IAJY,KAAK,cAAc,iBAAiB;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EAAE,CAAC,EAEoB,UAAU,EAAI;AACtC,WAAAA,EAAM,OAAO,aAENA;AAAA,EAAA;AAAA,EAGD,mBAAyB;AAC/B,IAAI,KAAK,oBACP,aAAa,KAAK,gBAAgB,GAG/B,KAAA,mBAAmB,OAAO,WAAW,MAAM;AAC9C,WAAK,uBAAuB;AAAA,OAC3B,EAAE;AAAA,EAAA;AAAA,EAGC,yBAA+B;AACrC,UAAMC,IAAQ,MAAM;AAAA,MAClB,KAAK,YAAY,iBAAiB,EAAE,SAAS,GAAM,CAAA;AAAA,IAAA,EACnD;AAAA,MACA,CAACC,MAAkCA,aAAcC;AAAA,IACnD;AAOA,KAHEF,EAAM,WAAW,KAAK,aAAa,UACnCA,EAAM,KAAK,CAACG,GAAMC,MAAUD,MAAS,KAAK,aAAaC,CAAK,CAAC,OAI/D,KAAK,eAAeJ,GAEdA,EAAA,QAAQ,CAACG,GAAMC,MAAU;AACvB,YAAAC,IAASD,MAAUJ,EAAM,SAAS;AAExC,UAAI,KAAK,UAAUI,MAAU,KAAK,CAACC,GAAQ;AACzC,QAAAF,EAAK,MAAM,UAAU;AACrB;AAAA,MAAA;AAEA,QAAAA,EAAK,MAAM,UAAU;AAGvB,MAAAA,EAAK,gBAAgB,YAAY,KAAK,YAAY,UAAU,GAC5DA,EAAK,UAAU,KAAK,SAChBE,IACGF,EAAA,aAAa,gBAAgB,MAAM,IAExCA,EAAK,gBAAgB,cAAc,GAEhCA,EAAA,gBAAgB,YAAYE,CAAM;AAEjC,YAAAC,IAAYH,EAAK,cAAc,oBAAoB;AACrD,MAAA,CAACE,KAAU,CAACC,KACTH,EAAA,OAAO,KAAK,gBAAgB;AAAA,IACnC,CACD;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAI;AAAAA;AAAAA;AAAAA,sBAGWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,2BAC1BA,EAAU,KAAK,cAAc,KAAK,EAAE;AAAA,iBAC9CC,EAAK,YAAY,CAAC;AAAA;AAAA,+BAEJ,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQpD;AAtGEZ,EAAO,UAAU,qBAEDA,EAAA,SAASa,EAAUC,CAAM;AAH3C,IAAqBC,IAArBf;AAKiBgB,EAAA;AAAA,EAAdC,EAAM,MAAM;AAAA,GALMF,EAKJ,WAAA,aAAA;AAEkBC,EAAA;AAAA,EAAhCC,EAAM,wBAAwB;AAAA,GAPZF,EAOc,WAAA,eAAA;AAKLC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;AAGCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRH,EAeU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAmB,CAAA;AAAA,GAlBrCH,EAmBnB,WAAA,gBAAA;"}
+{"version":3,"file":"breadcrumb.component.js","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport DapDSBreadcrumbItem from '../breadcrumb-item/breadcrumb-item.component'\nimport styles from './breadcrumb.scss?inline'\n\n/**\n * `dap-ds-breadcrumb`\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @element dap-ds-breadcrumb\n * @title - Breadcrumb\n *\n * @slot - The content of the breadcrumb.\n * @slot separator - The separator between breadcrumb items. Default is '/'.\n *\n * @csspart base - The main breadcrumb container.\n * @csspart separator - The separator of the breadcrumb.\n *\n * @cssproperty --dds-breadcrumb-width - The width of the breadcrumb container (default: 100%)\n * @cssproperty --dds-breadcrumb-overflow-x - The horizontal overflow behavior of the breadcrumb (default: auto)\n * @cssproperty --dds-breadcrumb-transition - The transition property for the breadcrumb (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-list-display - The display property of the breadcrumb list (default: flex)\n * @cssproperty --dds-breadcrumb-list-flex-wrap - The flex-wrap property of the breadcrumb list (default: nowrap)\n * @cssproperty --dds-breadcrumb-list-align-items - The align-items property of the breadcrumb list (default: center)\n * @cssproperty --dds-breadcrumb-list-min-width - The minimum width of the breadcrumb list (default: max-content)\n */\nexport default class DapDSBreadcrumb extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb'\n\n  static readonly styles = unsafeCSS(styles)\n  /** @ignore */\n  @query('slot') defaultSlot!: HTMLSlotElement\n  /** @ignore */\n  @query('slot[name=\"separator\"]') separatorSlot!: HTMLSlotElement\n\n  /* Variant of the breadcrumb\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String }) variant = 'normal'\n\n  /** Mobile version of the breadcrumb */\n  @property({ type: Boolean }) mobile = false\n\n  /** The aria-labelledby of the breadcrumb */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledBy?: string\n\n  private _cachedItems: DapDSBreadcrumbItem[] = []\n  private _debounceTimeout?: number\n\n  private cloneSeparator() {\n    const separator = this.separatorSlot.assignedElements({\n      flatten: true,\n    })[0] as HTMLElement\n\n    return separator.cloneNode(true) as HTMLElement\n  }\n\n  private handleSlotChange(): void {\n    if (this._debounceTimeout) {\n      clearTimeout(this._debounceTimeout)\n    }\n\n    this._debounceTimeout = window.setTimeout(() => {\n      this._updateBreadcrumbItems()\n    }, 16) // One frame delay for batching\n  }\n\n  private _updateBreadcrumbItems(): void {\n    const items = Array.from(\n      this.defaultSlot.assignedElements({ flatten: true }),\n    ).filter(\n      (el): el is DapDSBreadcrumbItem => el instanceof DapDSBreadcrumbItem,\n    )\n\n    // Check if items have actually changed to avoid unnecessary work\n    const itemsChanged =\n      items.length !== this._cachedItems.length ||\n      items.some((item, index) => item !== this._cachedItems[index])\n\n    if (!itemsChanged) return\n\n    this._cachedItems = items\n\n    items.forEach((item, index) => {\n      const isLast = index === items.length - 1\n\n      if (this.mobile && index !== 0 && !isLast) {\n        item.style.display = 'none'\n        return\n      } else {\n        item.style.display = ''\n      }\n\n      item.toggleAttribute('inverted', this.variant === 'inverted')\n      item.variant = this.variant\n      if (isLast) {\n        item.setAttribute('aria-current', 'page')\n      } else {\n        item.removeAttribute('aria-current')\n      }\n      item.toggleAttribute('disabled', isLast)\n\n      // Hand the separator down as a property rather than appending it to the\n      // item's light DOM. The item renders it as the fallback of its own\n      // `separator` slot, so the children the consumer wrote stay untouched —\n      // appending here corrupts hydration in SSR frameworks that own that DOM\n      // (React discards the server markup and re-renders the whole tree).\n      // An item that carries its own `[slot=\"separator\"]` still wins, because\n      // slotted content always takes precedence over slot fallback content.\n      item.inheritedSeparator = isLast ? undefined : this.cloneSeparator()\n    })\n  }\n\n  render() {\n    return html`\n      <nav\n        part=\"base\"\n        aria-label=\"${ifDefined(this.ariaLabel) || ''}\"\n        aria-labelledby=\"${ifDefined(this.ariaLabelledBy) || ''}\"\n        class=\"${clsx('breadcrumb')}\">\n        <ol class=\"breadcrumb__list\" part=\"list\">\n          <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n        </ol>\n      </nav>\n      <span hidden aria-hidden=\"true\">\n        <slot name=\"separator\"> <span>/</span> </slot>\n      </span>\n    `\n  }\n}\n"],"names":["_DapDSBreadcrumb","DdsElement","items","el","DapDSBreadcrumbItem","item","index","isLast","html","ifDefined","clsx","unsafeCSS","styles","DapDSBreadcrumb","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;;;;;AA8BA,MAAqBA,IAArB,MAAqBA,UAAwBC,EAAW;AAAA,EAAxD,cAAA;AAAA,UAAA,GAAA,SAAA,GAYwC,KAAA,UAAA,UAGA,KAAA,SAAA,IAMtC,KAAQ,eAAsC,CAAC;AAAA,EAAA;AAAA,EAGvC,iBAAiB;AAKhB,WAJW,KAAK,cAAc,iBAAiB;AAAA,MACpD,SAAS;AAAA,IACV,CAAA,EAAE,CAAC,EAEa,UAAU,EAAI;AAAA,EAAA;AAAA,EAGzB,mBAAyB;AAC/B,IAAI,KAAK,oBACP,aAAa,KAAK,gBAAgB,GAG/B,KAAA,mBAAmB,OAAO,WAAW,MAAM;AAC9C,WAAK,uBAAuB;AAAA,OAC3B,EAAE;AAAA,EAAA;AAAA,EAGC,yBAA+B;AACrC,UAAMC,IAAQ,MAAM;AAAA,MAClB,KAAK,YAAY,iBAAiB,EAAE,SAAS,GAAM,CAAA;AAAA,IAAA,EACnD;AAAA,MACA,CAACC,MAAkCA,aAAcC;AAAA,IACnD;AAOA,KAHEF,EAAM,WAAW,KAAK,aAAa,UACnCA,EAAM,KAAK,CAACG,GAAMC,MAAUD,MAAS,KAAK,aAAaC,CAAK,CAAC,OAI/D,KAAK,eAAeJ,GAEdA,EAAA,QAAQ,CAACG,GAAMC,MAAU;AACvB,YAAAC,IAASD,MAAUJ,EAAM,SAAS;AAExC,UAAI,KAAK,UAAUI,MAAU,KAAK,CAACC,GAAQ;AACzC,QAAAF,EAAK,MAAM,UAAU;AACrB;AAAA,MAAA;AAEA,QAAAA,EAAK,MAAM,UAAU;AAGvB,MAAAA,EAAK,gBAAgB,YAAY,KAAK,YAAY,UAAU,GAC5DA,EAAK,UAAU,KAAK,SAChBE,IACGF,EAAA,aAAa,gBAAgB,MAAM,IAExCA,EAAK,gBAAgB,cAAc,GAEhCA,EAAA,gBAAgB,YAAYE,CAAM,GASvCF,EAAK,qBAAqBE,IAAS,SAAY,KAAK,eAAe;AAAA,IAAA,CACpE;AAAA,EAAA;AAAA,EAGH,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,sBAGWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,2BAC1BA,EAAU,KAAK,cAAc,KAAK,EAAE;AAAA,iBAC9CC,EAAK,YAAY,CAAC;AAAA;AAAA,+BAEJ,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAQpD;AAvGEV,EAAO,UAAU,qBAEDA,EAAA,SAASW,EAAUC,CAAM;AAH3C,IAAqBC,IAArBb;AAKiBc,EAAA;AAAA,EAAdC,EAAM,MAAM;AAAA,GALMF,EAKJ,WAAA,aAAA;AAEkBC,EAAA;AAAA,EAAhCC,EAAM,wBAAwB;AAAA,GAPZF,EAOc,WAAA,eAAA;AAKLC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAZPH,EAYS,WAAA,SAAA;AAGCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRH,EAeU,WAAA,QAAA;AAI7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,kBAAmB,CAAA;AAAA,GAlBrCH,EAmBnB,WAAA,gBAAA;"}

package/dist/components/breadcrumb-item/breadcrumb-item.component.d.ts

@@ -53,6 +53,14 @@ export default class DapDSBreadcrumbItem extends DdsElement {
      * @type {'normal' | 'inverted'}
      */
     variant: string;
+    /**
+     * The separator handed down by the parent `dap-ds-breadcrumb`, rendered as
+     * the fallback content of this item's `separator` slot. Set by the parent —
+     * not part of the public API, and deliberately property-only so nothing is
+     * written into the item's light DOM.
+     * @ignore
+     */
+    inheritedSeparator?: HTMLElement;
     static readonly styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
     private _shouldIncludeRel;

package/dist/components/breadcrumb-item/breadcrumb-item.component.js

@@ -2,23 +2,24 @@ import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
 import "../../node_modules/@lit/reactive-element/reactive-element.js";
 import { html as o } from "../../node_modules/lit-html/lit-html.js";
 import "../../node_modules/lit-element/lit-element.js";
-import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { property as e } from "../../node_modules/@lit/reactive-element/decorators/property.js";
 import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
 import { DdsElement as f } from "../../internal/dds-hu-element.js";
 import c from "../icon/icon.component.js";
 import u from "../link/link.component.js";
 import b from "./breadcrumb-item.scss.js";
 import { unsafeCSS as v } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, i = (n, p, l, g) => {
-  for (var r = void 0, a = n.length - 1, d; a >= 0; a--)
-    (d = n[a]) && (r = d(p, l, r) || r);
-  return r && y(p, l, r), r;
+var y = Object.defineProperty, s = (p, i, l, g) => {
+  for (var r = void 0, n = p.length - 1, d; n >= 0; n--)
+    (d = p[n]) && (r = d(i, l, r) || r);
+  return r && y(i, l, r), r;
 };
-const e = class e extends f {
+const a = class a extends f {
   constructor() {
     super(...arguments), this.rel = "noreferrer noopener", this.disabled = !1, this.variant = "normal";
   }
   render() {
+    var i;
     return o`
       <li
         part="base"
@@ -49,7 +50,7 @@ const e = class e extends f {
           aria-hidden="true"
           role="presentation">
           <slot name="separator">
-            <dap-ds-icon name="arrow-right-s-line"></dap-ds-icon>
+            ${(i = this.inheritedSeparator) != null ? i : o`<dap-ds-icon name="arrow-right-s-line"></dap-ds-icon>`}
           </slot>
         </span>
       </li>
@@ -59,26 +60,29 @@ const e = class e extends f {
     return this.href ? this.target !== void 0 || this.href.startsWith("http") : !1;
   }
 };
-e.tagName = "dap-ds-breadcrumb-item", e.dependencies = {
+a.tagName = "dap-ds-breadcrumb-item", a.dependencies = {
   "dap-ds-link": u,
   "dap-ds-icon": c
-}, e.styles = v(b);
-let t = e;
-i([
-  s()
+}, a.styles = v(b);
+let t = a;
+s([
+  e()
 ], t.prototype, "href");
-i([
-  s()
+s([
+  e()
 ], t.prototype, "target");
-i([
-  s()
+s([
+  e()
 ], t.prototype, "rel");
-i([
-  s({ type: Boolean })
+s([
+  e({ type: Boolean })
 ], t.prototype, "disabled");
-i([
-  s({ type: String, reflect: !0 })
+s([
+  e({ type: String, reflect: !0 })
 ], t.prototype, "variant");
+s([
+  e({ attribute: !1 })
+], t.prototype, "inheritedSeparator");
 export {
   t as default
 };

package/dist/components/breadcrumb-item/breadcrumb-item.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb-item.component.js","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { LinkTarget } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element.js'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSLink from '../link/link.component'\nimport styles from './breadcrumb-item.scss?inline'\n\n/**\n * `dap-ds-breadcrumb-item` custom element.\n * @element dap-ds-breadcrumb-item\n * @summary A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @title - Breadcrumb item\n * @group breadcrumb\n *\n * @slot - The content of the breadcrumb item.\n * @slot separator - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n *\n * @csspart base - The main breadcrumb item container. The li element.\n * @csspart link - The link of the breadcrumb item. The dds-link component.\n * @csspart link-base - The base part of the link part. The dds-link components base part.\n * @csspart item-nolink - The item of the breadcrumb item without a link. The span element.\n * @csspart separator - The separator of the breadcrumb item.\n *\n * @cssproperty --dds-breadcrumb-item-display - The display property of the breadcrumb item (default: inline-flex)\n * @cssproperty --dds-breadcrumb-item-flex-wrap - The flex-wrap property of the breadcrumb item (default: nowrap)\n * @cssproperty --dds-breadcrumb-item-align-items - The align-items property of the breadcrumb item (default: center)\n * @cssproperty --dds-breadcrumb-item-color - The text color of the breadcrumb item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-breadcrumb-item-transition - The transition property for the breadcrumb item (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-item-gap - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-padding - The padding of the breadcrumb item (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-font-size - The font size of the breadcrumb item (default: var(--dds-font-sm))\n * @cssproperty --dds-breadcrumb-item-font-weight - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-breadcrumb-item-font-weight-bold - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-breadcrumb-item-separator-color - The color of the separator (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-breadcrumb-item-link-color - The color of the link (default: var(--dds-link-neutral-enabled))\n * @cssproperty --dds-breadcrumb-item-inverted-color - The text color when inverted (default: var(--dds-text-neutral-inverted))\n * @cssproperty --dds-breadcrumb-item-inverted-link-color - The link color when inverted (default: var(--dds-text-neutral-inverted))\n */\nexport default class DapDSBreadcrumbItem extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb-item'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The URL of the breadcrumb item. */\n  @property() href?: string\n  /** The target of the breadcrumb item.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target?: LinkTarget\n  /** The rel of the breadcrumb item link. */\n  @property() rel = 'noreferrer noopener'\n  /** Whether the breadcrumb item is disabled. */\n  @property({ type: Boolean }) disabled = false\n  /** The variant of the breadcrumb item.\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String, reflect: true }) variant = 'normal'\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        class=${clsx('breadcrumb-item', {\n          'breadcrumb-item--inverted': this.variant === 'inverted',\n        })}>\n        ${this.href\n          ? html`\n              <dap-ds-link\n                theme=\"brand\"\n                bold\n                part=\"link\"\n                exportparts=\"base:link-base\"\n                href=${this.href}\n                target=${ifDefined(this.target)}\n                rel=${ifDefined(\n                  this._shouldIncludeRel() ? this.rel : undefined,\n                )}\n                .disabled=${this.disabled}>\n                <slot></slot>\n              </dap-ds-link>\n            `\n          : html`<span part=\"item-nolink\" class=\"breadcrumb-item-nolink\">\n              <slot></slot>\n            </span>`}\n\n        <span\n          part=\"separator\"\n          class=\"breadcrumb-item__separator\"\n          aria-hidden=\"true\"\n          role=\"presentation\">\n          <slot name=\"separator\">\n            <dap-ds-icon name=\"arrow-right-s-line\"></dap-ds-icon>\n          </slot>\n        </span>\n      </li>\n    `\n  }\n\n  private _shouldIncludeRel(): boolean {\n    if (!this.href) return false\n    // Include rel for external links or when target is specified\n    return this.target !== undefined || this.href.startsWith('http')\n  }\n}\n"],"names":["_DapDSBreadcrumbItem","DdsElement","html","clsx","ifDefined","DapDSLink","DapDSIcon","unsafeCSS","styles","DapDSBreadcrumbItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAeoB,KAAA,MAAA,uBAEsB,KAAA,WAAA,IAIa,KAAA,UAAA;AAAA,EAAA;AAAA,EAIrD,SAAS;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,mBAAmB;AAAA,MAC9B,6BAA6B,KAAK,YAAY;AAAA,IAAA,CAC/C,CAAC;AAAA,UACA,KAAK,OACHD;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,uBAMW,KAAK,IAAI;AAAA,yBACPE,EAAU,KAAK,MAAM,CAAC;AAAA,sBACzBA;AAAAA,MACJ,KAAK,kBAAA,IAAsB,KAAK,MAAM;AAAA,IACvC,CAAA;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAI7BF;AAAAA;AAAAA,oBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAeV,oBAA6B;AAC/B,WAAC,KAAK,OAEH,KAAK,WAAW,UAAa,KAAK,KAAK,WAAW,MAAM,IAFxC;AAAA,EAEwC;AAEnE;AArEEF,EAAO,UAAU,0BAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeK;AAAA,EACf,eAAeC;AACjB,GAiBgBN,EAAA,SAASO,EAAUC,CAAM;AAvB3C,IAAqBC,IAArBT;AAScU,EAAA;AAAA,EAAXC,EAAS;AAAA,GATSF,EASP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,QAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAfSF,EAeP,WAAA,KAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBRF,EAiBU,WAAA,UAAA;AAIcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GArBtBF,EAqBwB,WAAA,SAAA;"}
+{"version":3,"file":"breadcrumb-item.component.js","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { html, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { LinkTarget } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element.js'\n\nimport DapDSIcon from '../icon/icon.component'\nimport DapDSLink from '../link/link.component'\nimport styles from './breadcrumb-item.scss?inline'\n\n/**\n * `dap-ds-breadcrumb-item` custom element.\n * @element dap-ds-breadcrumb-item\n * @summary A breadcrumb item is a secondary navigation scheme that reveals the user's location in a website or Web application.\n * @title - Breadcrumb item\n * @group breadcrumb\n *\n * @slot - The content of the breadcrumb item.\n * @slot separator - The separator between breadcrumb items. Default is an arrow-right-s-line icon.\n *\n * @csspart base - The main breadcrumb item container. The li element.\n * @csspart link - The link of the breadcrumb item. The dds-link component.\n * @csspart link-base - The base part of the link part. The dds-link components base part.\n * @csspart item-nolink - The item of the breadcrumb item without a link. The span element.\n * @csspart separator - The separator of the breadcrumb item.\n *\n * @cssproperty --dds-breadcrumb-item-display - The display property of the breadcrumb item (default: inline-flex)\n * @cssproperty --dds-breadcrumb-item-flex-wrap - The flex-wrap property of the breadcrumb item (default: nowrap)\n * @cssproperty --dds-breadcrumb-item-align-items - The align-items property of the breadcrumb item (default: center)\n * @cssproperty --dds-breadcrumb-item-color - The text color of the breadcrumb item (default: var(--dds-text-neutral-base))\n * @cssproperty --dds-breadcrumb-item-transition - The transition property for the breadcrumb item (default: all 0.2s ease-in-out)\n * @cssproperty --dds-breadcrumb-item-gap - The gap between the breadcrumb item and the separator (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-padding - The padding of the breadcrumb item (default: var(--dds-spacing-200))\n * @cssproperty --dds-breadcrumb-item-font-size - The font size of the breadcrumb item (default: var(--dds-font-sm))\n * @cssproperty --dds-breadcrumb-item-font-weight - The font weight of the breadcrumb item (default: var(--dds-font-weight-medium))\n * @cssproperty --dds-breadcrumb-item-font-weight-bold - The bold font weight of the breadcrumb item (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-breadcrumb-item-separator-color - The color of the separator (default: var(--dds-text-neutral-disabled))\n * @cssproperty --dds-breadcrumb-item-link-color - The color of the link (default: var(--dds-link-neutral-enabled))\n * @cssproperty --dds-breadcrumb-item-inverted-color - The text color when inverted (default: var(--dds-text-neutral-inverted))\n * @cssproperty --dds-breadcrumb-item-inverted-link-color - The link color when inverted (default: var(--dds-text-neutral-inverted))\n */\nexport default class DapDSBreadcrumbItem extends DdsElement {\n  static tagName = 'dap-ds-breadcrumb-item'\n\n  static dependencies = {\n    'dap-ds-link': DapDSLink,\n    'dap-ds-icon': DapDSIcon,\n  }\n\n  /** The URL of the breadcrumb item. */\n  @property() href?: string\n  /** The target of the breadcrumb item.\n   * @type {'_blank' | '_self' | '_parent' | '_top'}\n   */\n  @property() target?: LinkTarget\n  /** The rel of the breadcrumb item link. */\n  @property() rel = 'noreferrer noopener'\n  /** Whether the breadcrumb item is disabled. */\n  @property({ type: Boolean }) disabled = false\n  /** The variant of the breadcrumb item.\n   * @type {'normal' | 'inverted'}\n   */\n  @property({ type: String, reflect: true }) variant = 'normal'\n\n  /**\n   * The separator handed down by the parent `dap-ds-breadcrumb`, rendered as\n   * the fallback content of this item's `separator` slot. Set by the parent —\n   * not part of the public API, and deliberately property-only so nothing is\n   * written into the item's light DOM.\n   * @ignore\n   */\n  @property({ attribute: false }) inheritedSeparator?: HTMLElement\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`\n      <li\n        part=\"base\"\n        class=${clsx('breadcrumb-item', {\n          'breadcrumb-item--inverted': this.variant === 'inverted',\n        })}>\n        ${this.href\n          ? html`\n              <dap-ds-link\n                theme=\"brand\"\n                bold\n                part=\"link\"\n                exportparts=\"base:link-base\"\n                href=${this.href}\n                target=${ifDefined(this.target)}\n                rel=${ifDefined(\n                  this._shouldIncludeRel() ? this.rel : undefined,\n                )}\n                .disabled=${this.disabled}>\n                <slot></slot>\n              </dap-ds-link>\n            `\n          : html`<span part=\"item-nolink\" class=\"breadcrumb-item-nolink\">\n              <slot></slot>\n            </span>`}\n\n        <span\n          part=\"separator\"\n          class=\"breadcrumb-item__separator\"\n          aria-hidden=\"true\"\n          role=\"presentation\">\n          <slot name=\"separator\">\n            ${this.inheritedSeparator ??\n            html`<dap-ds-icon name=\"arrow-right-s-line\"></dap-ds-icon>`}\n          </slot>\n        </span>\n      </li>\n    `\n  }\n\n  private _shouldIncludeRel(): boolean {\n    if (!this.href) return false\n    // Include rel for external links or when target is specified\n    return this.target !== undefined || this.href.startsWith('http')\n  }\n}\n"],"names":["_DapDSBreadcrumbItem","DdsElement","html","clsx","ifDefined","_a","DapDSLink","DapDSIcon","unsafeCSS","styles","DapDSBreadcrumbItem","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAqBA,IAArB,MAAqBA,UAA4BC,EAAW;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAeoB,KAAA,MAAA,uBAEsB,KAAA,WAAA,IAIa,KAAA,UAAA;AAAA,EAAA;AAAA,EAarD,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA,gBAGKC,EAAK,mBAAmB;AAAA,MAC9B,6BAA6B,KAAK,YAAY;AAAA,IAAA,CAC/C,CAAC;AAAA,UACA,KAAK,OACHD;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,uBAMW,KAAK,IAAI;AAAA,yBACPE,EAAU,KAAK,MAAM,CAAC;AAAA,sBACzBA;AAAAA,MACJ,KAAK,kBAAA,IAAsB,KAAK,MAAM;AAAA,IACvC,CAAA;AAAA,4BACW,KAAK,QAAQ;AAAA;AAAA;AAAA,gBAI7BF;AAAAA;AAAAA,oBAEQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQNG,IAAA,KAAK,uBAAL,OAAAA,IACFH,wDAA2D;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAAA,EAO7D,oBAA6B;AAC/B,WAAC,KAAK,OAEH,KAAK,WAAW,UAAa,KAAK,KAAK,WAAW,MAAM,IAFxC;AAAA,EAEwC;AAEnE;AA/EEF,EAAO,UAAU,0BAEjBA,EAAO,eAAe;AAAA,EACpB,eAAeM;AAAA,EACf,eAAeC;AACjB,GA0BgBP,EAAA,SAASQ,EAAUC,CAAM;AAhC3C,IAAqBC,IAArBV;AAScW,EAAA;AAAA,EAAXC,EAAS;AAAA,GATSF,EASP,WAAA,MAAA;AAIAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAbSF,EAaP,WAAA,QAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAfSF,EAeP,WAAA,KAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAjBRF,EAiBU,WAAA,UAAA;AAIcC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,GAAM,CAAA;AAAA,GArBtBF,EAqBwB,WAAA,SAAA;AASXC,EAAA;AAAA,EAA/BC,EAAS,EAAE,WAAW,GAAO,CAAA;AAAA,GA9BXF,EA8Ba,WAAA,oBAAA;"}

package/dist/components/breadcrumb-item/breadcrumb-item.scss.js

@@ -1,4 +1,4 @@
-const e = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-breadcrumb-item-display: inline-flex;--dds-breadcrumb-item-flex-wrap: nowrap;--dds-breadcrumb-item-align-items: center;--dds-breadcrumb-item-color: var(--dds-text-neutral-base);--dds-breadcrumb-item-transition: all .2s ease-in-out;--dds-breadcrumb-item-gap: var(--dds-spacing-200);--dds-breadcrumb-item-margin-block: var(--dds-spacing-50);--dds-breadcrumb-item-outline-offset: 0;--dds-breadcrumb-item-padding: var(--dds-spacing-200);--dds-breadcrumb-item-font-size: var(--dds-font-sm);--dds-breadcrumb-item-font-weight: var(--dds-font-weight-medium);--dds-breadcrumb-item-font-weight-bold: var(--dds-font-weight-bold);--dds-breadcrumb-item-separator-color: var(--dds-text-neutral-disabled);--dds-breadcrumb-item-inverted-separator-color: var( --dds-text-neutral-on-inverted );--dds-breadcrumb-item-link-color: var(--dds-link-neutral-enabled);--dds-breadcrumb-item-inverted-color: var(--dds-text-neutral-inverted);--dds-breadcrumb-item-inverted-link-color: var(--dds-text-neutral-inverted);--dds-breadcrumb-item-inverted-link-outline-color: var( --dds-focus-inner-ring )}.breadcrumb-item{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:var(--dds-breadcrumb-item-display);flex-wrap:var(--dds-breadcrumb-item-flex-wrap);align-items:var(--dds-breadcrumb-item-align-items);margin-right:var(--dds-breadcrumb-item-gap);margin-block:var(--dds-breadcrumb-item-margin-block);transition:var(--dds-breadcrumb-item-transition);color:var(--dds-breadcrumb-item-color);gap:var(--dds-breadcrumb-item-gap)}.breadcrumb-item .breadcrumb-item-nolink{font-size:var(--dds-breadcrumb-item-font-size);font-weight:var(--dds-breadcrumb-item-font-weight-bold)}.breadcrumb-item::part(base){margin-right:var(--dds-breadcrumb-item-gap);font-size:var(--dds-breadcrumb-item-font-size);font-weight:var(--dds-breadcrumb-item-font-weight)}.breadcrumb-item ::slotted([slot=separator]){color:var(--dds-breadcrumb-item-separator-color)}.breadcrumb-item dap-ds-link::part(base){outline-offset:var(--dds-breadcrumb-item-outline-offset);color:var(--dds-breadcrumb-item-link-color);font-weight:var(--dds-breadcrumb-item-font-weight)}:host(:last-of-type) .breadcrumb-item__separator{display:none}.breadcrumb-item--inverted{color:var(--dds-breadcrumb-item-inverted-color)}.breadcrumb-item--inverted dap-ds-link::part(base){outline-color:var(--dds-breadcrumb-item-inverted-link-outline-color);color:var(--dds-breadcrumb-item-inverted-link-color)}.breadcrumb-item--inverted ::slotted([slot=separator]){color:var(--dds-breadcrumb-item-inverted-separator-color)}:host(:last-of-type) .breadcrumb-item{font-weight:var(--dds-breadcrumb-item-font-weight-bold)}";
+const e = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{--dds-breadcrumb-item-display: inline-flex;--dds-breadcrumb-item-flex-wrap: nowrap;--dds-breadcrumb-item-align-items: center;--dds-breadcrumb-item-color: var(--dds-text-neutral-base);--dds-breadcrumb-item-transition: all .2s ease-in-out;--dds-breadcrumb-item-gap: var(--dds-spacing-200);--dds-breadcrumb-item-margin-block: var(--dds-spacing-50);--dds-breadcrumb-item-outline-offset: 0;--dds-breadcrumb-item-padding: var(--dds-spacing-200);--dds-breadcrumb-item-font-size: var(--dds-font-sm);--dds-breadcrumb-item-font-weight: var(--dds-font-weight-medium);--dds-breadcrumb-item-font-weight-bold: var(--dds-font-weight-bold);--dds-breadcrumb-item-separator-color: var(--dds-text-neutral-disabled);--dds-breadcrumb-item-inverted-separator-color: var( --dds-text-neutral-on-inverted );--dds-breadcrumb-item-link-color: var(--dds-link-neutral-enabled);--dds-breadcrumb-item-inverted-color: var(--dds-text-neutral-inverted);--dds-breadcrumb-item-inverted-link-color: var(--dds-text-neutral-inverted);--dds-breadcrumb-item-inverted-link-outline-color: var( --dds-focus-inner-ring )}.breadcrumb-item{transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:var(--dds-breadcrumb-item-display);flex-wrap:var(--dds-breadcrumb-item-flex-wrap);align-items:var(--dds-breadcrumb-item-align-items);margin-right:var(--dds-breadcrumb-item-gap);margin-block:var(--dds-breadcrumb-item-margin-block);transition:var(--dds-breadcrumb-item-transition);color:var(--dds-breadcrumb-item-color);gap:var(--dds-breadcrumb-item-gap)}.breadcrumb-item .breadcrumb-item-nolink{font-size:var(--dds-breadcrumb-item-font-size);font-weight:var(--dds-breadcrumb-item-font-weight-bold)}.breadcrumb-item::part(base){margin-right:var(--dds-breadcrumb-item-gap);font-size:var(--dds-breadcrumb-item-font-size);font-weight:var(--dds-breadcrumb-item-font-weight)}.breadcrumb-item .breadcrumb-item__separator,.breadcrumb-item ::slotted([slot=separator]){color:var(--dds-breadcrumb-item-separator-color)}.breadcrumb-item dap-ds-link::part(base){outline-offset:var(--dds-breadcrumb-item-outline-offset);color:var(--dds-breadcrumb-item-link-color);font-weight:var(--dds-breadcrumb-item-font-weight)}:host(:last-of-type) .breadcrumb-item__separator{display:none}.breadcrumb-item--inverted{color:var(--dds-breadcrumb-item-inverted-color)}.breadcrumb-item--inverted dap-ds-link::part(base){outline-color:var(--dds-breadcrumb-item-inverted-link-outline-color);color:var(--dds-breadcrumb-item-inverted-link-color)}.breadcrumb-item--inverted .breadcrumb-item__separator,.breadcrumb-item--inverted ::slotted([slot=separator]){color:var(--dds-breadcrumb-item-inverted-separator-color)}:host(:last-of-type) .breadcrumb-item{font-weight:var(--dds-breadcrumb-item-font-weight-bold)}";
 export {
   e as default
 };

package/dist/components/button/_styles/button.scss.js

@@ -1,4 +1,4 @@
-const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;position:relative;width:auto;--dds-button-padding-x: var(--dds-spacing-300);--dds-button-padding-y: var(--dds-spacing-300);--dds-button-border-radius: var(--dds-radius-rounded);--dds-button-font-weight: 700;--dds-button-line-height: var(--dds-font-line-height-large);--dds-button-transition: all .2s ease-in-out;--dds-button-disabled-opacity: .5;--dds-button-size-lg: var(--dds-spacing-1200);--dds-button-size-md: var(--dds-spacing-1000);--dds-button-size-sm: var(--dds-spacing-800);--dds-button-size-xs: var(--dds-spacing-600);--dds-button-circle-lg: var(--dds-spacing-1200);--dds-button-circle-md: var(--dds-spacing-1000);--dds-button-circle-sm: var(--dds-spacing-800);--dds-button-circle-xs: var(--dds-spacing-600);--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled );--dds-button-primary-inverted-color-bg: var( --dds-button-primary-background-inverted-enabled );--dds-button-primary-inverted-color-bg-hover: var( --dds-button-primary-background-inverted-hover );--dds-button-primary-inverted-color-bg-active: var( --dds-button-primary-background-inverted-pressed );--dds-button-primary-inverted-color-bg-disabled: var( --dds-button-primary-background-inverted-disabled );--dds-button-primary-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-primary-inverted-color-text-disabled: var( --dds-button-primary-text-inverted-disabled );--dds-button-outline-color-border: var(--dds-button-outline-border-enabled);--dds-button-outline-color-border-hover: var( --dds-button-outline-border-hover );--dds-button-outline-color-border-active: var( --dds-button-outline-border-pressed );--dds-button-outline-color-border-disabled: var( --dds-button-outline-border-disabled );--dds-button-outline-color-text: var(--dds-button-outline-text-enabled);--dds-button-outline-color-text-hover: var(--dds-button-outline-text-hover);--dds-button-outline-color-text-active: var( --dds-button-outline-text-pressed );--dds-button-outline-color-text-disabled: var( --dds-button-outline-text-disabled );--dds-button-outline-inverted-color-border: var( --dds-button-outline-border-inverted-enabled );--dds-button-outline-inverted-color-border-hover: var( --dds-button-outline-border-inverted-hover );--dds-button-outline-inverted-color-border-active: var( --dds-button-outline-border-inverted-pressed );--dds-button-outline-inverted-color-border-disabled: var( --dds-button-outline-border-inverted-disabled );--dds-button-outline-inverted-color-text: var( --dds-button-outline-text-inverted-enabled );--dds-button-outline-inverted-color-text-hover: var( --dds-button-outline-text-inverted-hover );--dds-button-outline-inverted-color-text-active: var( --dds-button-outline-text-inverted-pressed );--dds-button-outline-inverted-color-text-disabled: var( --dds-button-outline-text-inverted-disabled );--dds-button-subtle-color-bg: var(--dds-button-subtle-background-enabled);--dds-button-subtle-color-bg-hover: var(--dds-button-subtle-background-hover);--dds-button-subtle-color-bg-active: var( --dds-button-subtle-background-pressed );--dds-button-subtle-color-bg-disabled: var( --dds-button-subtle-background-disabled );--dds-button-subtle-color-border: var(--dds-button-subtle-border-enabled);--dds-button-subtle-color-border-hover: var(--dds-button-subtle-border-hover);--dds-button-subtle-color-border-active: var( --dds-button-subtle-border-pressed );--dds-button-subtle-color-border-disabled: var( --dds-button-subtle-border-disabled );--dds-button-subtle-color-text: var(--dds-button-subtle-text-enabled);--dds-button-subtle-color-text-hover: var(--dds-button-subtle-text-hover);--dds-button-subtle-color-text-active: var(--dds-button-subtle-text-pressed);--dds-button-subtle-color-text-disabled: var( --dds-button-subtle-text-disabled );--dds-button-subtle-destructive-color-text: var( --dds-button-subtle-text-destructive-enabled );--dds-button-subtle-destructive-color-text-hover: var( --dds-button-subtle-text-destructive-hover );--dds-button-subtle-destructive-color-text-active: var( --dds-button-subtle-text-destructive-pressed );--dds-button-subtle-destructive-color-border: var( --dds-button-subtle-border-destructive-enabled );--dds-button-subtle-destructive-color-border-hover: var( --dds-button-subtle-border-destructive-hover );--dds-button-subtle-destructive-color-border-active: var( --dds-button-subtle-border-destructive-pressed );--dds-button-subtle-destructive-color-bg: var( --dds-button-subtle-background-destructive-enabled );--dds-button-subtle-destructive-color-bg-hover: var( --dds-button-subtle-background-destructive-hover );--dds-button-subtle-destructive-color-bg-active: var( --dds-button-subtle-background-destructive-pressed );--dds-button-clean-color-text: var(--dds-text-link-base);--dds-button-clean-color-text-hover: var(--dds-text-link-hover);--dds-button-clean-color-text-active: var(--dds-text-link-pressed);--dds-button-clean-color-text-disabled: var(--dds-text-neutral-disabled);--dds-button-clean-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-hover: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-active: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-disabled: var( --dds-text-neutral-disabled );--dds-button-danger-color-bg: var( --dds-button-primary-background-destructive-enabled );--dds-button-danger-color-bg-hover: var( --dds-button-primary-background-destructive-hover );--dds-button-danger-color-bg-active: var( --dds-button-primary-background-destructive-pressed );--dds-button-danger-color-text: var(--dds-button-primary-text-enabled);--dds-button-danger-outline-color-border: var( --dds-button-outline-border-destructive-enabled );--dds-button-danger-outline-color-border-hover: var( --dds-button-outline-border-destructive-hover );--dds-button-danger-outline-color-border-active: var( --dds-button-outline-border-destructive-pressed );--dds-button-danger-outline-color-text: var( --dds-button-outline-text-destructive-enabled );--dds-button-danger-outline-color-text-hover: var( --dds-button-outline-text-destructive-hover );--dds-button-danger-outline-color-text-active: var( --dds-button-outline-text-destructive-pressed );--dds-button-subtle-menu-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border: transparent;--dds-button-subtle-menu-opened-background: var( --dds-button-subtle-background-neutral-pressed );--dds-button-subtle-menu-opened-color: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-menu-item-color-bg: transparent;--dds-button-subtle-menu-item-color-bg-hover: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-bg-active: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-text: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-hover: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-active: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-disabled: var( --dds-text-primary-base );--dds-button-subtle-menu-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-button-subtle-menu-item-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-item-font-weight: var(--dds-font-weight-medium);--dds-button-subtle-menu-item-font-size: var(--dds-font-size-base);--dds-button-subtle-menu-item-line-height: var(--dds-font-line-height-xlarge)}:host([variant=subtle-menu][aria-expanded=true]) .button{border-radius:var(--dds-button-subtle-menu-opened-border-radius);border-color:var(--dds-button-subtle-menu-opened-border);background-color:var(--dds-button-subtle-menu-opened-background);color:var(--dds-button-subtle-menu-opened-color)}:host([data-oklch-poc]){--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled )}a{text-decoration:none}.button__highcontrast{position:absolute;width:100%;height:100%;border:var(--dds-border-width-base) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radius-rounded)}.button__highcontrast:hover{border-width:var(--dds-border-width-large);border-color:var(--dds-border-neutral-transparent-interactive, #fff500)}.button__highcontrast:active{border-width:var(--dds-border-width-xlarge)}.button{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;position:relative;flex-direction:row;align-items:center;justify-content:center;width:auto;column-gap:var(--dds-spacing-100);transition:var(--dds-button-transition);border-width:0;border-radius:var(--dds-button-border-radius);font-weight:var(--dds-button-font-weight);line-height:var(--dds-button-line-height);cursor:pointer}.button:focus-visible{outline-style:solid}.button .button__text{padding:0 var(--dds-spacing-100)}.button .button__text span{line-height:var(--dds-button-line-height)}.button[disabled],.button.button--disabled{opacity:var(--dds-button-disabled-opacity);cursor:not-allowed}.button[disabled]:focus-visible,.button.button--disabled:focus-visible{outline-style:solid}.button[disabled]>*,.button.button--disabled>*{pointer-events:none}.button.dds-button--loading .button__spinner{display:flex;position:absolute;align-items:center;justify-content:center;animation:dds-spin 1s linear infinite}.button.dds-button--loading .button__text{opacity:0}.button--lg{min-width:var(--dds-spacing-2400);height:var(--dds-button-size-lg);padding:var(--dds-button-padding-y) var(--dds-button-padding-x);font-size:1.125rem}.button--lg.dds-button--circle{width:var(--dds-button-circle-lg);min-width:0;height:var(--dds-button-circle-lg);padding:0}.button--md{min-width:var(--dds-spacing-2000);height:var(--dds-button-size-md);padding:var(--dds-button-padding-y) var(--dds-button-padding-x);font-size:1rem}.button--md.dds-button--circle{width:var(--dds-button-circle-md);min-width:0;max-width:var(--dds-button-circle-md);height:var(--dds-button-circle-md);padding:0}.button--sm{min-width:var(--dds-spacing-1200);height:var(--dds-button-size-sm);padding:var(--dds-button-padding-y) var(--dds-button-padding-x);font-size:.875rem}.button--sm.dds-button--circle{width:var(--dds-button-circle-sm);min-width:0;max-width:var(--dds-button-circle-sm);height:var(--dds-button-circle-sm);padding:3px}.button--xs{min-width:var(--dds-spacing-1200);height:var(--dds-button-size-xs);padding:var(--dds-button-padding-y) var(--dds-button-padding-x);font-size:var(--dds-font-xs)}.button--xs.dds-button--circle{width:var(--dds-button-circle-xs);min-width:0;max-width:var(--dds-button-circle-xs);height:var(--dds-button-circle-xs);padding:3px}.button--icon{border-width:0;background-color:var(--dds-black-5);color:var(--dds-icon-neutral-base)}.button--icon:hover{background-color:var(--dds-black-10)}.button--icon:active{background-color:var(--dds-black-20)}.button--icon.disabled{border-width:0;background-color:transparent;cursor:not-allowed}.button--icon.disabled:hover{background-color:transparent}.button--primary{background-color:var(--dds-button-primary-color-bg);color:var(--dds-button-primary-color-text)}.button--primary:hover{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary:active{background-color:var(--dds-button-primary-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--primary.dds-link{color:var(--dds-button-primary-color-text);text-decoration:none}.button--primary.dds-link:hover,.button--primary.dds-link:active{color:var(--dds-button-primary-color-text)}.button--primary.dds-button--active{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);background-color:var(--dds-button-primary-inverted-color-bg);color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted:hover{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary-inverted:active{background-color:var(--dds-button-primary-inverted-color-bg-active)}.button--primary-inverted[disabled],.button--primary-inverted.button--disabled{background-color:var(--dds-button-primary-inverted-color-bg-disabled);color:var(--dds-button-primary-inverted-color-text-disabled)}.button--primary-inverted.dds-link{color:var(--dds-button-primary-inverted-color-text);text-decoration:none}.button--primary-inverted.dds-link:hover,.button--primary-inverted.dds-link:active{color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted.dds-button--active{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary.dds-button--danger,.button--primary-inverted.dds-button--danger{background-color:var(--dds-button-danger-color-bg);color:var(--dds-button-danger-color-text)}.button--primary.dds-button--danger:hover,.button--primary-inverted.dds-button--danger:hover{background-color:var(--dds-button-danger-color-bg-hover)}.button--primary.dds-button--danger:active,.button--primary-inverted.dds-button--danger:active{background-color:var(--dds-button-danger-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled,.button--primary-inverted[disabled],.button--primary-inverted.button--disabled,.button--primary[disabled]:hover,.button--primary.button--disabled:hover,.button--primary-inverted[disabled]:hover,.button--primary-inverted.button--disabled:hover,.button--primary[disabled]:active,.button--primary.button--disabled:active,.button--primary-inverted[disabled]:active,.button--primary-inverted.button--disabled:active{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--outline{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border);background-color:transparent;color:var(--dds-button-outline-color-text)}.button--outline:hover{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline:active{border-color:var(--dds-button-outline-color-border-active);color:var(--dds-button-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled{border-color:var(--dds-button-outline-color-border-disabled);color:var(--dds-button-outline-color-text-disabled)}.button--outline.dds-link{color:var(--dds-button-outline-color-text);text-decoration:none}.button--outline.dds-link:hover{color:var(--dds-button-outline-color-text-hover)}.button--outline.dds-link:active{color:var(--dds-button-outline-color-text-active)}.button--outline.dds-button--active{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-inverted-color-border);background-color:transparent;color:var(--dds-button-outline-inverted-color-text)}.button--outline-inverted:hover{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted:active{border-color:var(--dds-button-outline-inverted-color-border-active);color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-color:var(--dds-button-outline-inverted-color-border-disabled);color:var(--dds-button-outline-inverted-color-text-disabled)}.button--outline-inverted.dds-link{color:var(--dds-button-outline-inverted-color-text);text-decoration:none}.button--outline-inverted.dds-link:hover{color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted.dds-link:active{color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted.dds-button--active{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline.dds-button--danger,.button--outline-inverted.dds-button--danger{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-danger-outline-color-border);background-color:transparent;color:var(--dds-button-danger-outline-color-text)}.button--outline.dds-button--danger:hover,.button--outline-inverted.dds-button--danger:hover{border-color:var(--dds-button-danger-outline-color-border-hover);color:var(--dds-button-danger-outline-color-text-hover)}.button--outline.dds-button--danger:active,.button--outline-inverted.dds-button--danger:active{border-color:var(--dds-button-danger-outline-color-border-active);color:var(--dds-button-danger-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled,.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border-disabled);background-color:transparent;color:var(--dds-button-outline-color-text-disabled)}.button--subtle{border:var(--dds-border-width-base) solid var(--dds-button-subtle-color-border);background-color:var(--dds-button-subtle-color-bg);color:var(--dds-button-subtle-color-text)}.button--subtle:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle[disabled],.button--subtle.button--disabled{border-color:var(--dds-button-subtle-color-border-disabled);background-color:var(--dds-button-subtle-color-bg-disabled);color:var(--dds-button-subtle-color-text-disabled)}.button--subtle.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle.dds-button--danger{border:var(--dds-border-width-base) solid var(--dds-button-subtle-destructive-color-border);background-color:var(--dds-button-subtle-destructive-color-bg);color:var(--dds-button-subtle-destructive-color-text)}.button--subtle.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-neutral{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-neutral-enabled);background-color:var(--dds-button-subtle-background-neutral-enabled);color:var(--dds-button-subtle-text-neutral-enabled)}.button--subtle-neutral:hover{border-color:var(--dds-button-subtle-border-neutral-hover);background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral:active{border-color:var(--dds-button-subtle-border-neutral-pressed);background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral.dds-link{color:var(--dds-button-subtle-text-neutral-enabled);text-decoration:none}.button--subtle-neutral.dds-link:hover,.button--subtle-neutral.dds-link:active{color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-neutral.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-neutral.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-neutral.dds-button--active{border-color:var(--dds-button-subtle-border-neutral-hover);background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu{border:var(--dds-border-width-base) solid transparent;border-radius:var(--dds-button-subtle-menu-border-radius);background-color:transparent;color:var(--dds-button-subtle-text-neutral-enabled)}.button--subtle-menu:hover{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu:active{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu.dds-link{color:var(--dds-button-subtle-text-neutral-enabled);text-decoration:none}.button--subtle-menu.dds-link:hover,.button--subtle-menu.dds-link:active{color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-menu.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-menu.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-menu.dds-button--active{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu-item{display:flex;align-items:center;width:100%;min-width:auto;height:auto;padding:var(--dds-button-subtle-menu-item-padding);border:0;border-radius:var(--dds-button-subtle-menu-item-border-radius);background-color:var(--dds-button-subtle-menu-item-color-bg);color:var(--dds-button-subtle-menu-item-color-text);font-family:var(--dds-font-type);font-size:var(--dds-button-subtle-menu-item-font-size);font-weight:var(--dds-button-subtle-menu-item-font-weight);line-height:var(--dds-button-subtle-menu-item-line-height);text-align:left;text-decoration:none}.button--subtle-menu-item .button__text{display:flex;flex:1;align-items:center;padding:0;gap:var(--dds-spacing-100)}.button--subtle-menu-item:hover:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item:active:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-active);color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-menu-item:focus-visible:not([disabled],.button--disabled){outline-style:solid}.button--subtle-menu-item.dds-button--active{background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text)}.button--subtle-menu-item[disabled],.button--subtle-menu-item.button--disabled{opacity:.5;color:var(--dds-button-subtle-menu-item-color-text-disabled);cursor:not-allowed}.button--subtle-menu-item.dds-link{color:var(--dds-button-subtle-menu-item-color-text);text-decoration:none}.button--subtle-menu-item.dds-link:hover{color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item.dds-link:active{color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-quiet{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text)}.button--subtle-quiet:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet[disabled],.button--subtle-quiet.button--disabled{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text-disabled)}.button--subtle-quiet.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle-quiet.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-quiet.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-quiet.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-quiet.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-enabled);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:hover{background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:active{background-color:var(--dds-button-subtle-background-inverted-pressed);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-inverted.dds-link{color:var(--dds-button-subtle-text-enabled);text-decoration:none}.button--subtle-inverted.dds-link:hover{color:var(--dds-button-subtle-text-hover)}.button--subtle-inverted.dds-link:active{color:var(--dds-button-subtle-text-pressed)}.button--subtle-inverted.dds-button--active{background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:hover{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-pressed);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-quiet-inverted.dds-link{color:var(--dds-button-subtle-text-enabled);text-decoration:none}.button--subtle-quiet-inverted.dds-link:hover{color:var(--dds-button-subtle-text-hover)}.button--subtle-quiet-inverted.dds-link:active{color:var(--dds-button-subtle-text-pressed)}.button--subtle-quiet-inverted.dds-button--active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--clean{width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-text)}.button--clean .button__text{padding:0}.button--clean:hover{color:var(--dds-button-clean-text-hover)}.button--clean:active{color:var(--dds-button-clean-text-active)}.button--clean[disabled],.button--clean.button--disabled{color:var(--dds-button-clean-text-disabled)}.button--clean-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-inverted-text)}.button--clean-inverted .button__text{padding:0}.button--clean-inverted:hover{color:var(--dds-button-clean-inverted-text-hover)}.button--clean-inverted:active{color:var(--dds-button-clean-inverted-text-active)}.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{color:var(--dds-button-clean-inverted-text-disabled)}.button--clean.dds-button--danger,.button--clean-inverted.dds-button--danger{border-width:0;background-color:transparent;color:var(--dds-button-danger-clean-text)}.button--clean.dds-button--danger:hover,.button--clean-inverted.dds-button--danger:hover{color:var(--dds-button-danger-clean-text-hover)}.button--clean.dds-button--danger:active,.button--clean-inverted.dds-button--danger:active{color:var(--dds-button-danger-clean-text-active)}.button--clean[disabled],.button--clean.button--disabled,.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{border-width:0;background-color:transparent;color:var(--dds-text-neutral-disabled)}.button--clean[disabled]:hover,.button--clean.button--disabled:hover,.button--clean-inverted[disabled]:hover,.button--clean-inverted.button--disabled:hover{background-color:transparent;color:var(--dds-text-neutral-disabled)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}";
+const t = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:inline-block;position:relative;width:auto;vertical-align:middle;--dds-button-padding-x: var(--dds-spacing-300);--dds-button-padding-y: var(--dds-spacing-300);--dds-button-border-radius: var(--dds-radius-rounded);--dds-button-font-weight: 700;--dds-button-line-height: var(--dds-font-line-height-large);--dds-button-transition: all .2s ease-in-out;--dds-button-disabled-opacity: .5;--dds-button-size-lg: var(--dds-spacing-1200);--dds-button-size-md: var(--dds-spacing-1000);--dds-button-size-sm: var(--dds-spacing-800);--dds-button-size-xs: var(--dds-spacing-600);--dds-button-circle-lg: var(--dds-spacing-1200);--dds-button-circle-md: var(--dds-spacing-1000);--dds-button-circle-sm: var(--dds-spacing-800);--dds-button-circle-xs: var(--dds-spacing-600);--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled );--dds-button-primary-inverted-color-bg: var( --dds-button-primary-background-inverted-enabled );--dds-button-primary-inverted-color-bg-hover: var( --dds-button-primary-background-inverted-hover );--dds-button-primary-inverted-color-bg-active: var( --dds-button-primary-background-inverted-pressed );--dds-button-primary-inverted-color-bg-disabled: var( --dds-button-primary-background-inverted-disabled );--dds-button-primary-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-primary-inverted-color-text-disabled: var( --dds-button-primary-text-inverted-disabled );--dds-button-outline-color-border: var(--dds-button-outline-border-enabled);--dds-button-outline-color-border-hover: var( --dds-button-outline-border-hover );--dds-button-outline-color-border-active: var( --dds-button-outline-border-pressed );--dds-button-outline-color-border-disabled: var( --dds-button-outline-border-disabled );--dds-button-outline-color-text: var(--dds-button-outline-text-enabled);--dds-button-outline-color-text-hover: var(--dds-button-outline-text-hover);--dds-button-outline-color-text-active: var( --dds-button-outline-text-pressed );--dds-button-outline-color-text-disabled: var( --dds-button-outline-text-disabled );--dds-button-outline-inverted-color-border: var( --dds-button-outline-border-inverted-enabled );--dds-button-outline-inverted-color-border-hover: var( --dds-button-outline-border-inverted-hover );--dds-button-outline-inverted-color-border-active: var( --dds-button-outline-border-inverted-pressed );--dds-button-outline-inverted-color-border-disabled: var( --dds-button-outline-border-inverted-disabled );--dds-button-outline-inverted-color-text: var( --dds-button-outline-text-inverted-enabled );--dds-button-outline-inverted-color-text-hover: var( --dds-button-outline-text-inverted-hover );--dds-button-outline-inverted-color-text-active: var( --dds-button-outline-text-inverted-pressed );--dds-button-outline-inverted-color-text-disabled: var( --dds-button-outline-text-inverted-disabled );--dds-button-subtle-color-bg: var(--dds-button-subtle-background-enabled);--dds-button-subtle-color-bg-hover: var(--dds-button-subtle-background-hover);--dds-button-subtle-color-bg-active: var( --dds-button-subtle-background-pressed );--dds-button-subtle-color-bg-disabled: var( --dds-button-subtle-background-disabled );--dds-button-subtle-color-border: var(--dds-button-subtle-border-enabled);--dds-button-subtle-color-border-hover: var(--dds-button-subtle-border-hover);--dds-button-subtle-color-border-active: var( --dds-button-subtle-border-pressed );--dds-button-subtle-color-border-disabled: var( --dds-button-subtle-border-disabled );--dds-button-subtle-color-text: var(--dds-button-subtle-text-enabled);--dds-button-subtle-color-text-hover: var(--dds-button-subtle-text-hover);--dds-button-subtle-color-text-active: var(--dds-button-subtle-text-pressed);--dds-button-subtle-color-text-disabled: var( --dds-button-subtle-text-disabled );--dds-button-subtle-destructive-color-text: var( --dds-button-subtle-text-destructive-enabled );--dds-button-subtle-destructive-color-text-hover: var( --dds-button-subtle-text-destructive-hover );--dds-button-subtle-destructive-color-text-active: var( --dds-button-subtle-text-destructive-pressed );--dds-button-subtle-destructive-color-border: var( --dds-button-subtle-border-destructive-enabled );--dds-button-subtle-destructive-color-border-hover: var( --dds-button-subtle-border-destructive-hover );--dds-button-subtle-destructive-color-border-active: var( --dds-button-subtle-border-destructive-pressed );--dds-button-subtle-destructive-color-bg: var( --dds-button-subtle-background-destructive-enabled );--dds-button-subtle-destructive-color-bg-hover: var( --dds-button-subtle-background-destructive-hover );--dds-button-subtle-destructive-color-bg-active: var( --dds-button-subtle-background-destructive-pressed );--dds-button-clean-color-text: var(--dds-text-link-base);--dds-button-clean-color-text-hover: var(--dds-text-link-hover);--dds-button-clean-color-text-active: var(--dds-text-link-pressed);--dds-button-clean-color-text-disabled: var(--dds-text-neutral-disabled);--dds-button-clean-inverted-color-text: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-hover: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-active: var( --dds-button-primary-text-inverted );--dds-button-clean-inverted-color-text-disabled: var( --dds-text-neutral-disabled );--dds-button-danger-color-bg: var( --dds-button-primary-background-destructive-enabled );--dds-button-danger-color-bg-hover: var( --dds-button-primary-background-destructive-hover );--dds-button-danger-color-bg-active: var( --dds-button-primary-background-destructive-pressed );--dds-button-danger-color-text: var(--dds-button-primary-text-enabled);--dds-button-danger-outline-color-border: var( --dds-button-outline-border-destructive-enabled );--dds-button-danger-outline-color-border-hover: var( --dds-button-outline-border-destructive-hover );--dds-button-danger-outline-color-border-active: var( --dds-button-outline-border-destructive-pressed );--dds-button-danger-outline-color-text: var( --dds-button-outline-text-destructive-enabled );--dds-button-danger-outline-color-text-hover: var( --dds-button-outline-text-destructive-hover );--dds-button-danger-outline-color-text-active: var( --dds-button-outline-text-destructive-pressed );--dds-button-subtle-menu-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-opened-border: transparent;--dds-button-subtle-menu-opened-background: var( --dds-button-subtle-background-neutral-pressed );--dds-button-subtle-menu-opened-color: var( --dds-button-subtle-text-neutral-hover );--dds-button-subtle-menu-item-color-bg: transparent;--dds-button-subtle-menu-item-color-bg-hover: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-bg-active: var( --dds-transparent-black-subtle );--dds-button-subtle-menu-item-color-text: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-hover: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-active: var(--dds-text-primary-base);--dds-button-subtle-menu-item-color-text-disabled: var( --dds-text-primary-base );--dds-button-subtle-menu-item-padding: var(--dds-spacing-100) var(--dds-spacing-200);--dds-button-subtle-menu-item-border-radius: var(--dds-radius-small);--dds-button-subtle-menu-item-font-weight: var(--dds-font-weight-medium);--dds-button-subtle-menu-item-font-size: var(--dds-font-size-base);--dds-button-subtle-menu-item-line-height: var(--dds-font-line-height-xlarge)}:host([variant=subtle-menu][aria-expanded=true]) .button{border-radius:var(--dds-button-subtle-menu-opened-border-radius);border-color:var(--dds-button-subtle-menu-opened-border);background-color:var(--dds-button-subtle-menu-opened-background);color:var(--dds-button-subtle-menu-opened-color)}:host([data-oklch-poc]){--dds-button-primary-color-bg: var(--dds-button-primary-background-enabled);--dds-button-primary-color-bg-hover: var( --dds-button-primary-background-hover );--dds-button-primary-color-bg-active: var( --dds-button-primary-background-pressed );--dds-button-primary-color-bg-disabled: var( --dds-button-primary-background-disabled );--dds-button-primary-color-text: var(--dds-button-primary-text-enabled);--dds-button-primary-color-text-disabled: var( --dds-button-primary-text-disabled )}a{text-decoration:none}.button__highcontrast{position:absolute;width:100%;height:100%;border:var(--dds-border-width-base) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-radius-rounded)}.button__highcontrast:hover{border-width:var(--dds-border-width-large);border-color:var(--dds-border-neutral-transparent-interactive, #fff500)}.button__highcontrast:active{border-width:var(--dds-border-width-xlarge)}.button{outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);display:inline-flex;position:relative;flex-direction:row;align-items:center;justify-content:center;width:auto;height:auto;column-gap:var(--dds-spacing-100);transition:var(--dds-button-transition);border:var(--dds-border-width-large) solid transparent;border-radius:var(--dds-button-border-radius);font-weight:var(--dds-button-font-weight);line-height:var(--dds-button-line-height);vertical-align:top;cursor:pointer}.button:focus-visible{outline-style:solid}.button .button__text{padding:0 var(--dds-spacing-100)}.button .button__text span{line-height:var(--dds-button-line-height)}.button[disabled],.button.button--disabled{opacity:var(--dds-button-disabled-opacity);cursor:not-allowed}.button[disabled]:focus-visible,.button.button--disabled:focus-visible{outline-style:solid}.button[disabled]>*,.button.button--disabled>*{pointer-events:none}.button.dds-button--loading .button__spinner{display:flex;position:absolute;align-items:center;justify-content:center;animation:dds-spin 1s linear infinite}.button.dds-button--loading .button__text{opacity:0}.button--lg{min-width:var(--dds-spacing-2400);min-height:var(--dds-button-size-lg);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:1.125rem}.button--lg.dds-button--circle{width:var(--dds-button-circle-lg);min-width:0;min-height:var(--dds-button-circle-lg);padding:0}.button--md{min-width:var(--dds-spacing-2000);min-height:var(--dds-button-size-md);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:1rem}.button--md.dds-button--circle{width:var(--dds-button-circle-md);min-width:0;max-width:var(--dds-button-circle-md);min-height:var(--dds-button-circle-md);padding:0}.button--sm{min-width:var(--dds-spacing-1200);min-height:var(--dds-button-size-sm);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:.875rem}.button--sm.dds-button--circle{width:var(--dds-button-circle-sm);min-width:0;max-width:var(--dds-button-circle-sm);min-height:var(--dds-button-circle-sm);padding:0}.button--xs{min-width:var(--dds-spacing-1200);min-height:var(--dds-button-size-xs);padding:0 calc(var(--dds-button-padding-x) - var(--dds-border-width-large));font-size:var(--dds-font-xs)}.button--xs.dds-button--circle{width:var(--dds-button-circle-xs);min-width:0;max-width:var(--dds-button-circle-xs);min-height:var(--dds-button-circle-xs);padding:0}.button--icon{border-width:0;background-color:var(--dds-black-5);color:var(--dds-icon-neutral-base)}.button--icon:hover{background-color:var(--dds-black-10)}.button--icon:active{background-color:var(--dds-black-20)}.button--icon.disabled{border-width:0;background-color:transparent;cursor:not-allowed}.button--icon.disabled:hover{background-color:transparent}.button--primary{background-color:var(--dds-button-primary-color-bg);color:var(--dds-button-primary-color-text)}.button--primary:hover{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary:active{background-color:var(--dds-button-primary-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--primary.dds-link{color:var(--dds-button-primary-color-text);text-decoration:none}.button--primary.dds-link:hover,.button--primary.dds-link:active{color:var(--dds-button-primary-color-text)}.button--primary.dds-button--active{background-color:var(--dds-button-primary-color-bg-hover)}.button--primary-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);background-color:var(--dds-button-primary-inverted-color-bg);color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted:hover{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary-inverted:active{background-color:var(--dds-button-primary-inverted-color-bg-active)}.button--primary-inverted[disabled],.button--primary-inverted.button--disabled{background-color:var(--dds-button-primary-inverted-color-bg-disabled);color:var(--dds-button-primary-inverted-color-text-disabled)}.button--primary-inverted.dds-link{color:var(--dds-button-primary-inverted-color-text);text-decoration:none}.button--primary-inverted.dds-link:hover,.button--primary-inverted.dds-link:active{color:var(--dds-button-primary-inverted-color-text)}.button--primary-inverted.dds-button--active{background-color:var(--dds-button-primary-inverted-color-bg-hover)}.button--primary.dds-button--danger,.button--primary-inverted.dds-button--danger{background-color:var(--dds-button-danger-color-bg);color:var(--dds-button-danger-color-text)}.button--primary.dds-button--danger:hover,.button--primary-inverted.dds-button--danger:hover{background-color:var(--dds-button-danger-color-bg-hover)}.button--primary.dds-button--danger:active,.button--primary-inverted.dds-button--danger:active{background-color:var(--dds-button-danger-color-bg-active)}.button--primary[disabled],.button--primary.button--disabled,.button--primary-inverted[disabled],.button--primary-inverted.button--disabled,.button--primary[disabled]:hover,.button--primary.button--disabled:hover,.button--primary-inverted[disabled]:hover,.button--primary-inverted.button--disabled:hover,.button--primary[disabled]:active,.button--primary.button--disabled:active,.button--primary-inverted[disabled]:active,.button--primary-inverted.button--disabled:active{background-color:var(--dds-button-primary-color-bg-disabled);color:var(--dds-button-primary-color-text-disabled)}.button--outline{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border);background-color:transparent;color:var(--dds-button-outline-color-text)}.button--outline:hover{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline:active{border-color:var(--dds-button-outline-color-border-active);color:var(--dds-button-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled{border-color:var(--dds-button-outline-color-border-disabled);color:var(--dds-button-outline-color-text-disabled)}.button--outline.dds-link{color:var(--dds-button-outline-color-text);text-decoration:none}.button--outline.dds-link:hover{color:var(--dds-button-outline-color-text-hover)}.button--outline.dds-link:active{color:var(--dds-button-outline-color-text-active)}.button--outline.dds-button--active{border-color:var(--dds-button-outline-color-border-hover);color:var(--dds-button-outline-color-text-hover)}.button--outline-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-inverted-color-border);background-color:transparent;color:var(--dds-button-outline-inverted-color-text)}.button--outline-inverted:hover{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted:active{border-color:var(--dds-button-outline-inverted-color-border-active);color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-color:var(--dds-button-outline-inverted-color-border-disabled);color:var(--dds-button-outline-inverted-color-text-disabled)}.button--outline-inverted.dds-link{color:var(--dds-button-outline-inverted-color-text);text-decoration:none}.button--outline-inverted.dds-link:hover{color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline-inverted.dds-link:active{color:var(--dds-button-outline-inverted-color-text-active)}.button--outline-inverted.dds-button--active{border-color:var(--dds-button-outline-inverted-color-border-hover);color:var(--dds-button-outline-inverted-color-text-hover)}.button--outline.dds-button--danger,.button--outline-inverted.dds-button--danger{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-danger-outline-color-border);background-color:transparent;color:var(--dds-button-danger-outline-color-text)}.button--outline.dds-button--danger:hover,.button--outline-inverted.dds-button--danger:hover{border-color:var(--dds-button-danger-outline-color-border-hover);color:var(--dds-button-danger-outline-color-text-hover)}.button--outline.dds-button--danger:active,.button--outline-inverted.dds-button--danger:active{border-color:var(--dds-button-danger-outline-color-border-active);color:var(--dds-button-danger-outline-color-text-active)}.button--outline[disabled],.button--outline.button--disabled,.button--outline-inverted[disabled],.button--outline-inverted.button--disabled{border-width:var(--dds-border-width-large);border-style:solid;border-color:var(--dds-button-outline-color-border-disabled);background-color:transparent;color:var(--dds-button-outline-color-text-disabled)}.button--subtle{border:var(--dds-border-width-base) solid var(--dds-button-subtle-color-border);background-color:var(--dds-button-subtle-color-bg);color:var(--dds-button-subtle-color-text)}.button--subtle:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle[disabled],.button--subtle.button--disabled{border-color:var(--dds-button-subtle-color-border-disabled);background-color:var(--dds-button-subtle-color-bg-disabled);color:var(--dds-button-subtle-color-text-disabled)}.button--subtle.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle.dds-button--danger{border:var(--dds-border-width-base) solid var(--dds-button-subtle-destructive-color-border);background-color:var(--dds-button-subtle-destructive-color-bg);color:var(--dds-button-subtle-destructive-color-text)}.button--subtle.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-neutral{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-neutral-enabled);background-color:var(--dds-button-subtle-background-neutral-enabled);color:var(--dds-button-subtle-text-neutral-enabled)}.button--subtle-neutral:hover{border-color:var(--dds-button-subtle-border-neutral-hover);background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral:active{border-color:var(--dds-button-subtle-border-neutral-pressed);background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral.dds-link{color:var(--dds-button-subtle-text-neutral-enabled);text-decoration:none}.button--subtle-neutral.dds-link:hover,.button--subtle-neutral.dds-link:active{color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-neutral.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-neutral.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-neutral.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-neutral.dds-button--active{border-color:var(--dds-button-subtle-border-neutral-hover);background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu{border:var(--dds-border-width-base) solid transparent;border-radius:var(--dds-button-subtle-menu-border-radius);background-color:transparent;color:var(--dds-button-subtle-text-neutral-enabled)}.button--subtle-menu:hover{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-hover);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu:active{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu.dds-link{color:var(--dds-button-subtle-text-neutral-enabled);text-decoration:none}.button--subtle-menu.dds-link:hover,.button--subtle-menu.dds-link:active{color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-menu.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-menu.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-menu.dds-button--active{border-color:transparent;background-color:var(--dds-button-subtle-background-neutral-pressed);color:var(--dds-button-subtle-text-neutral-hover)}.button--subtle-menu-item{display:flex;align-items:center;width:100%;min-width:auto;height:auto;padding:var(--dds-button-subtle-menu-item-padding);border:0;border-radius:var(--dds-button-subtle-menu-item-border-radius);background-color:var(--dds-button-subtle-menu-item-color-bg);color:var(--dds-button-subtle-menu-item-color-text);font-family:var(--dds-font-type);font-size:var(--dds-button-subtle-menu-item-font-size);font-weight:var(--dds-button-subtle-menu-item-font-weight);line-height:var(--dds-button-subtle-menu-item-line-height);text-align:left;text-decoration:none}.button--subtle-menu-item .button__text{display:flex;flex:1;align-items:center;padding:0;gap:var(--dds-spacing-100)}.button--subtle-menu-item:hover:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item:active:not([disabled],.button--disabled){background-color:var(--dds-button-subtle-menu-item-color-bg-active);color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-menu-item:focus-visible:not([disabled],.button--disabled){outline-style:solid}.button--subtle-menu-item.dds-button--active{background-color:var(--dds-button-subtle-menu-item-color-bg-hover);color:var(--dds-button-subtle-menu-item-color-text)}.button--subtle-menu-item[disabled],.button--subtle-menu-item.button--disabled{opacity:.5;color:var(--dds-button-subtle-menu-item-color-text-disabled);cursor:not-allowed}.button--subtle-menu-item.dds-link{color:var(--dds-button-subtle-menu-item-color-text);text-decoration:none}.button--subtle-menu-item.dds-link:hover{color:var(--dds-button-subtle-menu-item-color-text-hover)}.button--subtle-menu-item.dds-link:active{color:var(--dds-button-subtle-menu-item-color-text-active)}.button--subtle-quiet{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text)}.button--subtle-quiet:hover{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet:active{border-color:var(--dds-button-subtle-color-border-active);background-color:var(--dds-button-subtle-color-bg-active);color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet[disabled],.button--subtle-quiet.button--disabled{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-color-text-disabled)}.button--subtle-quiet.dds-link{color:var(--dds-button-subtle-color-text);text-decoration:none}.button--subtle-quiet.dds-link:hover{color:var(--dds-button-subtle-color-text-hover)}.button--subtle-quiet.dds-link:active{color:var(--dds-button-subtle-color-text-active)}.button--subtle-quiet.dds-button--danger{border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-destructive-color-text)}.button--subtle-quiet.dds-button--danger:hover{border-color:var(--dds-button-subtle-destructive-color-border-hover);background-color:var(--dds-button-subtle-destructive-color-bg-hover);color:var(--dds-button-subtle-destructive-color-text-hover)}.button--subtle-quiet.dds-button--danger:active{border-color:var(--dds-button-subtle-destructive-color-border-active);background-color:var(--dds-button-subtle-destructive-color-bg-active);color:var(--dds-button-subtle-destructive-color-text-active)}.button--subtle-quiet.dds-button--active{border-color:var(--dds-button-subtle-color-border-hover);background-color:var(--dds-button-subtle-color-bg-hover);color:var(--dds-button-subtle-color-text-hover)}.button--subtle-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-enabled);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:hover{background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:active{background-color:var(--dds-button-subtle-background-inverted-pressed);color:var(--dds-button-subtle-text-inverted)}.button--subtle-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-inverted.dds-link{color:var(--dds-button-subtle-text-enabled);text-decoration:none}.button--subtle-inverted.dds-link:hover{color:var(--dds-button-subtle-text-hover)}.button--subtle-inverted.dds-link:active{color:var(--dds-button-subtle-text-pressed)}.button--subtle-inverted.dds-button--active{background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);border:var(--dds-border-width-base) solid transparent;background-color:transparent;color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:hover{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-pressed);color:var(--dds-button-subtle-text-inverted)}.button--subtle-quiet-inverted:focus-visible{border-color:var(--dds-focus-inner-ring)}.button--subtle-quiet-inverted.dds-link{color:var(--dds-button-subtle-text-enabled);text-decoration:none}.button--subtle-quiet-inverted.dds-link:hover{color:var(--dds-button-subtle-text-hover)}.button--subtle-quiet-inverted.dds-link:active{color:var(--dds-button-subtle-text-pressed)}.button--subtle-quiet-inverted.dds-button--active{border:var(--dds-border-width-base) solid var(--dds-button-subtle-border-inverted-enabled);background-color:var(--dds-button-subtle-background-inverted-hover);color:var(--dds-button-subtle-text-inverted)}.button--clean{width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-text)}.button--clean .button__text{padding:0}.button--clean:hover{color:var(--dds-button-clean-text-hover)}.button--clean:active{color:var(--dds-button-clean-text-active)}.button--clean[disabled],.button--clean.button--disabled{color:var(--dds-button-clean-text-disabled)}.button--clean-inverted{--dds-focus-outer-ring: var(--dds-focus-inner-ring);width:auto;min-width:auto;height:auto;padding:0;border-width:0;background-color:transparent;color:var(--dds-button-clean-inverted-text)}.button--clean-inverted .button__text{padding:0}.button--clean-inverted:hover{color:var(--dds-button-clean-inverted-text-hover)}.button--clean-inverted:active{color:var(--dds-button-clean-inverted-text-active)}.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{color:var(--dds-button-clean-inverted-text-disabled)}.button--clean.dds-button--danger,.button--clean-inverted.dds-button--danger{border-width:0;background-color:transparent;color:var(--dds-button-danger-clean-text)}.button--clean.dds-button--danger:hover,.button--clean-inverted.dds-button--danger:hover{color:var(--dds-button-danger-clean-text-hover)}.button--clean.dds-button--danger:active,.button--clean-inverted.dds-button--danger:active{color:var(--dds-button-danger-clean-text-active)}.button--clean[disabled],.button--clean.button--disabled,.button--clean-inverted[disabled],.button--clean-inverted.button--disabled{border-width:0;background-color:transparent;color:var(--dds-text-neutral-disabled)}.button--clean[disabled]:hover,.button--clean.button--disabled:hover,.button--clean-inverted[disabled]:hover,.button--clean-inverted.button--disabled:hover{background-color:transparent;color:var(--dds-text-neutral-disabled)}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}";
 export {
   t as default
 };

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

@@ -20,6 +20,8 @@ export default class DapDSStack extends DdsElement {
     endMargin?: boolean;
     /** Adds margin to the start of the stack. */
     startMargin?: boolean;
+    /** Disables wrapping of the stack items onto multiple lines. */
+    nowrap: boolean;
     private _spacing;
     /** The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */
     set spacing(value: Spacing);

package/dist/components/stack/stack.component.js

@@ -2,20 +2,20 @@ import { clsx as g } 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 n } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as d } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as h } from "../../node_modules/lit-html/static.js";
+import { property as o } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { ifDefined as h } from "../../node_modules/lit-html/directives/if-defined.js";
+import { html as d } from "../../node_modules/lit-html/static.js";
 import { DdsElement as l } from "../../internal/dds-hu-element.js";
 import f from "./stack.scss.js";
 import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (m, r, s, i) => {
+var v = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (m, r, s, i) => {
   for (var t = i > 1 ? void 0 : i ? y(r, s) : r, p = m.length - 1, c; p >= 0; p--)
     (c = m[p]) && (t = (i ? c(r, s, t) : c(t)) || t);
   return i && t && v(r, s, t), t;
 };
-const o = class o extends l {
+const a = class a extends l {
   constructor() {
-    super(...arguments), this.direction = "column", this.endMargin = !1, this.startMargin = !1;
+    super(...arguments), this.direction = "column", this.endMargin = !1, this.startMargin = !1, this.nowrap = !1;
   }
   set spacing(r) {
     this._spacing = r;
@@ -27,13 +27,14 @@ const o = class o extends l {
     return r === "row" || r === "row-reverse" ? `margin-left: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-right: ${t ? `var(--dds-spacing-${s})` : "0"};` : `margin-top: ${i ? `var(--dds-spacing-${s})` : "0"}; margin-bottom: ${t ? `var(--dds-spacing-${s})` : "0"};`;
   }
   render() {
-    return h`
+    return d`
       <div
         class=${g("stack", `stack-gap-${this.spacing}`, {
-      [`stack-direction-${this.direction}`]: this.direction
+      [`stack-direction-${this.direction}`]: this.direction,
+      "stack-nowrap": this.nowrap
     })}
         part="base"
-        style=${d(
+        style=${h(
       this.getMarginStyles(
         this.direction,
         this.spacing,
@@ -46,19 +47,22 @@ const o = class o extends l {
     `;
   }
 };
-o.tagName = "dap-ds-stack", o.styles = u(f);
-let e = o;
-a([
-  n()
+a.tagName = "dap-ds-stack", a.styles = u(f);
+let e = a;
+n([
+  o()
 ], e.prototype, "direction", 2);
-a([
-  n({ type: Boolean })
+n([
+  o({ type: Boolean })
 ], e.prototype, "endMargin", 2);
-a([
-  n({ type: Boolean })
+n([
+  o({ type: Boolean })
 ], e.prototype, "startMargin", 2);
-a([
-  n({ type: Number })
+n([
+  o({ type: Boolean })
+], e.prototype, "nowrap", 2);
+n([
+  o({ type: Number })
 ], e.prototype, "spacing", 1);
 export {
   e as default

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

@@ -1 +1 @@
-{"version":3,"file":"stack.component.js","sources":["../../../src/components/stack/stack.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CSSFlexDirection, Spacing } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './stack.scss?inline'\n\n/**\n * `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n *\n * @slot - The content of the stack.\n *\n * @csspart stack - The main stack container.\n */\nexport default class DapDSStack extends DdsElement {\n  static tagName = 'dap-ds-stack'\n\n  /** The direction of the stack.\n   * @type {'column' | 'column-reverse' | 'row' | 'row-reverse'}\n   */\n  @property() direction: CSSFlexDirection = 'column'\n  /** Adds margin to the end of the stack. */\n  @property({ type: Boolean }) endMargin?: boolean = false\n  /** Adds margin to the start of the stack. */\n  @property({ type: Boolean }) startMargin?: boolean = false\n\n  private _spacing: Spacing\n  /** The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */\n  @property({ type: Number })\n  set spacing(value: Spacing) {\n    this._spacing = value\n  }\n  get spacing() {\n    if (\n      !this._spacing &&\n      this._spacing !== 0 &&\n      (this.direction === 'column' || this.direction === 'column-reverse')\n    ) {\n      return 600\n    }\n\n    if (\n      !this._spacing &&\n      this._spacing !== 0 &&\n      (this.direction === 'row' || this.direction === 'row-reverse')\n    ) {\n      return 200\n    }\n\n    return this._spacing\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  getMarginStyles(\n    direction: CSSFlexDirection,\n    spacing: number,\n    startMargin?: boolean,\n    endMargin?: boolean,\n  ) {\n    if (direction === 'row' || direction === 'row-reverse') {\n      return `margin-left: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-right: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n    }\n\n    return `margin-top: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-bottom: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n  }\n\n  render() {\n    return html`\n      <div\n        class=${clsx('stack', `stack-gap-${this.spacing}`, {\n          [`stack-direction-${this.direction}`]: this.direction,\n        })}\n        part=\"base\"\n        style=${ifDefined(\n          this.getMarginStyles(\n            this.direction,\n            this.spacing,\n            this.startMargin,\n            this.endMargin,\n          ),\n        )}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSStack","DdsElement","value","direction","spacing","startMargin","endMargin","html","clsx","ifDefined","unsafeCSS","styles","DapDSStack","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAM4C,KAAA,YAAA,UAES,KAAA,YAAA,IAEE,KAAA,cAAA;AAAA,EAAA;AAAA,EAKrD,IAAI,QAAQC,GAAgB;AAC1B,SAAK,WAAWA;AAAA,EAAA;AAAA,EAElB,IAAI,UAAU;AAEV,WAAA,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,YAAY,KAAK,cAAc,oBAE5C,MAIP,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,SAAS,KAAK,cAAc,iBAEzC,MAGF,KAAK;AAAA,EAAA;AAAA,EAKd,gBACEC,GACAC,GACAC,GACAC,GACA;AACI,WAAAH,MAAc,SAASA,MAAc,gBAChC,gBAAgBE,IAAc,qBAAqBD,CAAO,MAAM,GAAG,mBAAmBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG,MAGzI,eAAeC,IAAc,qBAAqBD,CAAO,MAAM,GAAG,oBAAoBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAGhJ,SAAS;AACA,WAAAG;AAAAA;AAAAA,gBAEKC,EAAK,SAAS,aAAa,KAAK,OAAO,IAAI;AAAA,MACjD,CAAC,mBAAmB,KAAK,SAAS,EAAE,GAAG,KAAK;AAAA,IAAA,CAC7C,CAAC;AAAA;AAAA,gBAEMC;AAAAA,MACN,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IACP,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AAvEET,EAAO,UAAU,gBAqCDA,EAAA,SAASU,EAAUC,CAAM;AAtC3C,IAAqBC,IAArBZ;AAMca,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,aAAA,CAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GARRF,EAQU,WAAA,aAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,eAAA,CAAA;AAKzBC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAdPF,EAef,WAAA,WAAA,CAAA;"}
+{"version":3,"file":"stack.component.js","sources":["../../../src/components/stack/stack.component.ts"],"sourcesContent":["import { clsx } from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { CSSFlexDirection, Spacing } from '../../common/types'\nimport { DdsElement } from '../../internal/dds-hu-element'\nimport styles from './stack.scss?inline'\n\n/**\n * `dap-ds-stack`\n * @summary A stack is a container for stacked content.\n * @element dap-ds-stack\n * @title - Stack\n *\n * @slot - The content of the stack.\n *\n * @csspart stack - The main stack container.\n */\nexport default class DapDSStack extends DdsElement {\n  static tagName = 'dap-ds-stack'\n\n  /** The direction of the stack.\n   * @type {'column' | 'column-reverse' | 'row' | 'row-reverse'}\n   */\n  @property() direction: CSSFlexDirection = 'column'\n  /** Adds margin to the end of the stack. */\n  @property({ type: Boolean }) endMargin?: boolean = false\n  /** Adds margin to the start of the stack. */\n  @property({ type: Boolean }) startMargin?: boolean = false\n  /** Disables wrapping of the stack items onto multiple lines. */\n  @property({ type: Boolean }) nowrap: boolean = false\n\n  private _spacing: Spacing\n  /** The spacing of the stack. Uses the system spacing scale (100, 200, 300...etc) */\n  @property({ type: Number })\n  set spacing(value: Spacing) {\n    this._spacing = value\n  }\n  get spacing() {\n    if (\n      !this._spacing &&\n      this._spacing !== 0 &&\n      (this.direction === 'column' || this.direction === 'column-reverse')\n    ) {\n      return 600\n    }\n\n    if (\n      !this._spacing &&\n      this._spacing !== 0 &&\n      (this.direction === 'row' || this.direction === 'row-reverse')\n    ) {\n      return 200\n    }\n\n    return this._spacing\n  }\n\n  static readonly styles = unsafeCSS(styles)\n\n  getMarginStyles(\n    direction: CSSFlexDirection,\n    spacing: number,\n    startMargin?: boolean,\n    endMargin?: boolean,\n  ) {\n    if (direction === 'row' || direction === 'row-reverse') {\n      return `margin-left: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-right: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n    }\n\n    return `margin-top: ${startMargin ? `var(--dds-spacing-${spacing})` : '0'}; margin-bottom: ${endMargin ? `var(--dds-spacing-${spacing})` : '0'};`\n  }\n\n  render() {\n    return html`\n      <div\n        class=${clsx('stack', `stack-gap-${this.spacing}`, {\n          [`stack-direction-${this.direction}`]: this.direction,\n          'stack-nowrap': this.nowrap,\n        })}\n        part=\"base\"\n        style=${ifDefined(\n          this.getMarginStyles(\n            this.direction,\n            this.spacing,\n            this.startMargin,\n            this.endMargin,\n          ),\n        )}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"],"names":["_DapDSStack","DdsElement","value","direction","spacing","startMargin","endMargin","html","clsx","ifDefined","unsafeCSS","styles","DapDSStack","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAqBA,IAArB,MAAqBA,UAAmBC,EAAW;AAAA,EAAnD,cAAA;AAAA,UAAA,GAAA,SAAA,GAM4C,KAAA,YAAA,UAES,KAAA,YAAA,IAEE,KAAA,cAAA,IAEN,KAAA,SAAA;AAAA,EAAA;AAAA,EAK/C,IAAI,QAAQC,GAAgB;AAC1B,SAAK,WAAWA;AAAA,EAAA;AAAA,EAElB,IAAI,UAAU;AAEV,WAAA,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,YAAY,KAAK,cAAc,oBAE5C,MAIP,CAAC,KAAK,YACN,KAAK,aAAa,MACjB,KAAK,cAAc,SAAS,KAAK,cAAc,iBAEzC,MAGF,KAAK;AAAA,EAAA;AAAA,EAKd,gBACEC,GACAC,GACAC,GACAC,GACA;AACI,WAAAH,MAAc,SAASA,MAAc,gBAChC,gBAAgBE,IAAc,qBAAqBD,CAAO,MAAM,GAAG,mBAAmBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG,MAGzI,eAAeC,IAAc,qBAAqBD,CAAO,MAAM,GAAG,oBAAoBE,IAAY,qBAAqBF,CAAO,MAAM,GAAG;AAAA,EAAA;AAAA,EAGhJ,SAAS;AACA,WAAAG;AAAAA;AAAAA,gBAEKC,EAAK,SAAS,aAAa,KAAK,OAAO,IAAI;AAAA,MACjD,CAAC,mBAAmB,KAAK,SAAS,EAAE,GAAG,KAAK;AAAA,MAC5C,gBAAgB,KAAK;AAAA,IAAA,CACtB,CAAC;AAAA;AAAA,gBAEMC;AAAAA,MACN,KAAK;AAAA,QACH,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,MAAA;AAAA,IACP,CACD;AAAA;AAAA;AAAA;AAAA,EAAA;AAKT;AA1EET,EAAO,UAAU,gBAuCDA,EAAA,SAASU,EAAUC,CAAM;AAxC3C,IAAqBC,IAArBZ;AAMca,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,aAAA,CAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GARRF,EAQU,WAAA,aAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAVRF,EAUU,WAAA,eAAA,CAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAZRF,EAYU,WAAA,UAAA,CAAA;AAKzBC,EAAA;AAAA,EADHC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAhBPF,EAiBf,WAAA,WAAA,CAAA;"}

package/dist/components/stack/stack.scss.js

@@ -1,4 +1,4 @@
-const a = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:block}.stack{display:flex}.stack-gap-0{gap:var(--dds-spacing-0)}.stack-gap-100{gap:var(--dds-spacing-100)}.stack-gap-200{gap:var(--dds-spacing-200)}.stack-gap-300{gap:var(--dds-spacing-300)}.stack-gap-400{gap:var(--dds-spacing-400)}.stack-gap-500{gap:var(--dds-spacing-500)}.stack-gap-600{gap:var(--dds-spacing-600)}.stack-gap-700{gap:var(--dds-spacing-700)}.stack-gap-800{gap:var(--dds-spacing-800)}.stack-gap-1200{gap:var(--dds-spacing-1200)}.stack-gap-1400{gap:var(--dds-spacing-1400)}.stack-gap-1600{gap:var(--dds-spacing-1600)}.stack-gap-1800{gap:var(--dds-spacing-1800)}.stack-gap-2000{gap:var(--dds-spacing-2000)}.stack-gap-2400{gap:var(--dds-spacing-2400)}.stack-gap-3000{gap:var(--dds-spacing-3000)}.stack-gap-4000{gap:var(--dds-spacing-4000)}.stack-gap-5000{gap:var(--dds-spacing-5000)}.stack-gap-6000{gap:var(--dds-spacing-6000)}.stack-direction-column{flex-flow:column wrap}.stack-direction-row{flex-flow:row wrap}.stack-direction-column-reverse{flex-flow:column-reverse wrap}.stack-direction-row-reverse{flex-flow:row-reverse wrap}.stack-direction-row{align-items:center}";
+const a = "*,*:before,*:after{box-sizing:border-box;outline:none}* :not(dap-ds-table-cell,dap-ds-table-header){margin:0;padding:0}html:focus-within{scroll-behavior:smooth}a:not([class]){text-decoration-skip-ink:auto}img,picture,svg,video,canvas{max-width:100%;height:auto;background-repeat:no-repeat;background-size:cover;font-style:italic;vertical-align:middle}input,button,textarea,select{font:inherit}[hidden]{display:none!important}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{transition:none;transition-duration:.01ms!important;transition-delay:1ms!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important}}body,html{height:100%;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input[type=number]{appearance:textfield}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{appearance:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.input-description{display:block;margin-bottom:var(--dds-spacing-200)}@keyframes dds-spin{to{transform:rotate(360deg)}}@keyframes dds-fade{0%,to{opacity:.3}50%{opacity:1}}:host{display:block}.stack{display:flex}.stack-gap-0{gap:var(--dds-spacing-0)}.stack-gap-100{gap:var(--dds-spacing-100)}.stack-gap-200{gap:var(--dds-spacing-200)}.stack-gap-300{gap:var(--dds-spacing-300)}.stack-gap-400{gap:var(--dds-spacing-400)}.stack-gap-500{gap:var(--dds-spacing-500)}.stack-gap-600{gap:var(--dds-spacing-600)}.stack-gap-700{gap:var(--dds-spacing-700)}.stack-gap-800{gap:var(--dds-spacing-800)}.stack-gap-1200{gap:var(--dds-spacing-1200)}.stack-gap-1400{gap:var(--dds-spacing-1400)}.stack-gap-1600{gap:var(--dds-spacing-1600)}.stack-gap-1800{gap:var(--dds-spacing-1800)}.stack-gap-2000{gap:var(--dds-spacing-2000)}.stack-gap-2400{gap:var(--dds-spacing-2400)}.stack-gap-3000{gap:var(--dds-spacing-3000)}.stack-gap-4000{gap:var(--dds-spacing-4000)}.stack-gap-5000{gap:var(--dds-spacing-5000)}.stack-gap-6000{gap:var(--dds-spacing-6000)}.stack-direction-column{flex-flow:column wrap}.stack-direction-row{flex-flow:row wrap}.stack-direction-column-reverse{flex-flow:column-reverse wrap}.stack-direction-row-reverse{flex-flow:row-reverse wrap}.stack-direction-row{align-items:center}.stack-nowrap{flex-wrap:nowrap}";
 export {
   a as default
 };