dap-design-system 0.60.2 → 0.61.0

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

@@ -0,0 +1,85 @@
+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 { 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;
+};
+const e = class e extends f {
+  constructor() {
+    super(...arguments), this.rel = "noreferrer noopener", this.disabled = !1, this.variant = "normal";
+  }
+  render() {
+    return o`
+      <li
+        part="base"
+        class=${m("breadcrumb-item", {
+      "breadcrumb-item--inverted": this.variant === "inverted"
+    })}>
+        ${this.href ? o`
+              <dap-ds-link
+                theme="brand"
+                bold
+                part="link"
+                exportparts="base:link-base"
+                href=${this.href}
+                target=${h(this.target)}
+                rel=${h(
+      this._shouldIncludeRel() ? this.rel : void 0
+    )}
+                .disabled=${this.disabled}>
+                <slot></slot>
+              </dap-ds-link>
+            ` : o`<span part="item-nolink" class="breadcrumb-item-nolink">
+              <slot></slot>
+            </span>`}
+
+        <span
+          part="separator"
+          class="breadcrumb-item__separator"
+          aria-hidden="true"
+          role="presentation">
+          <slot name="separator">
+            <dap-ds-icon name="arrow-right-s-line"></dap-ds-icon>
+          </slot>
+        </span>
+      </li>
+    `;
+  }
+  _shouldIncludeRel() {
+    return this.href ? this.target !== void 0 || this.href.startsWith("http") : !1;
+  }
+};
+e.tagName = "dap-ds-breadcrumb-item", e.dependencies = {
+  "dap-ds-link": u,
+  "dap-ds-icon": c
+}, e.styles = v(b);
+let t = e;
+i([
+  s()
+], t.prototype, "href");
+i([
+  s()
+], t.prototype, "target");
+i([
+  s()
+], t.prototype, "rel");
+i([
+  s({ type: Boolean })
+], t.prototype, "disabled");
+i([
+  s({ type: String, reflect: !0 })
+], t.prototype, "variant");
+export {
+  t as default
+};
+//# sourceMappingURL=breadcrumb-item.component.js.map

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

@@ -0,0 +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;"}

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

@@ -1,5 +1,5 @@
-import { default as DapDSBreadcrumbItem } from './breadcrumb-item.component.js';
-export * from './breadcrumb-item.component.js';
+import { default as DapDSBreadcrumbItem } from './breadcrumb-item.component';
+export * from './breadcrumb-item.component';
 export default DapDSBreadcrumbItem;
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -0,0 +1,6 @@
+import e from "./breadcrumb-item.component.js";
+e.define();
+export {
+  e as default
+};
+//# sourceMappingURL=breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sources":["../../../src/components/breadcrumb-item/breadcrumb-item.ts"],"sourcesContent":["import DapDSBreadcrumbItem from './breadcrumb-item.component'\n\nexport * from './breadcrumb-item.component'\nexport default DapDSBreadcrumbItem\n\nDapDSBreadcrumbItem.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-breadcrumb-item': DapDSBreadcrumbItem\n  }\n}\n"],"names":["DapDSBreadcrumbItem"],"mappings":";AAKAA,EAAoB,OAAO;"}

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

@@ -0,0 +1,5 @@
+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)}";
+export {
+  e as default
+};
+//# sourceMappingURL=breadcrumb-item.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,5 @@
+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}";
+export {
+  t as default
+};
+//# sourceMappingURL=button.scss.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,7 +1,9 @@
 import { PropertyValueMap } from 'lit';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
 import { ButtonShape, ButtonVariant, HtmlButtonType, LinkTarget } from '../../common/types';
+import { default as DapDSIcon } from '../icon/icon.component';
 import { ButtonSize } from '../icon-button/icon-button.component';
+import { default as SystemLoadingSpinner } from '../icons/system/system-loading-spinner/system-loading-spinner.component';
 /**
  * `dap-ds-button` is a versatile button component for triggering actions and navigation.
  * @element dap-ds-button
@@ -147,6 +149,12 @@ import { ButtonSize } from '../icon-button/icon-button.component';
  * @cssproperty --dds-button-danger-clean-color-text-active - Text color of danger clean button when active (default: var(--dds-text-negative-strong))
  */
 export default class DapDSButton extends GenericFormElement {
+    static tagName: string;
+    /** Components rendered inside the button, auto-registered on first use. */
+    static dependencies: {
+        'dap-ds-icon': typeof DapDSIcon;
+        'dap-ds-icon-loading-spinner': typeof SystemLoadingSpinner;
+    };
     /**
      * @ignore
      */
@@ -304,7 +312,7 @@ export default class DapDSButton extends GenericFormElement {
     /**
      * @ignore
      */
-    get focusElement(): HTMLButtonElement | HTMLLinkElement;
+    get focusElement(): HTMLLinkElement | HTMLButtonElement;
     /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */
     private get effectiveAriaLabel();
     protected updated(changedProperties: Map<string | number | symbol, unknown>): void;

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

@@ -0,0 +1,258 @@
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import "../../node_modules/@lit/reactive-element/reactive-element.js";
+import { nothing as b } from "../../node_modules/lit-html/lit-html.js";
+import "../../node_modules/lit-element/lit-element.js";
+import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
+import { query as y } from "../../node_modules/@lit/reactive-element/decorators/query.js";
+import { ifDefined as s } from "../../node_modules/lit-html/directives/if-defined.js";
+import { unsafeStatic as f, html as h } from "../../node_modules/lit-html/static.js";
+import { GenericFormElement as v } from "../../internal/mixin/genericFormElement.js";
+import "../../localization/localization.js";
+import L from "../icon/icon.component.js";
+import $ from "../icons/system/system-loading-spinner/system-loading-spinner.component.js";
+import T from "./_styles/button.scss.js";
+import { buttonVariants as x } from "./button.variants.js";
+import { t as c } from "../../node_modules/i18next/dist/esm/i18next.js";
+import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
+var k = Object.defineProperty, a = (p, t, i, n) => {
+  for (var o = void 0, d = p.length - 1, u; d >= 0; d--)
+    (u = p[d]) && (o = u(t, i, o) || o);
+  return o && k(t, i, o), o;
+};
+const g = {
+  lg: 24,
+  md: 20,
+  sm: 16,
+  xs: 16
+}, l = class l extends v {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.loading = !1, this.danger = !1, this.shape = "button", this.htmlType = "button", this.target = "_self", this.loadingTimeout = 0, this.hc = !1, this.active = !1, this.oklchPoc = !1, this._ariaLabelForButton = null, this._ignoreNextAriaLabelChange = !1;
+  }
+  getSecureRel() {
+    var t, i;
+    return this.target === "_blank" ? (t = this.rel) != null ? t : "noreferrer noopener" : (i = this.rel) != null ? i : "";
+  }
+  validateAriaPressed() {
+    if (this.ariaPressed && !["true", "false", "mixed"].includes(this.ariaPressed)) {
+      console.warn('aria-pressed must be "true", "false", or "mixed"');
+      return;
+    }
+    return this.ariaPressed;
+  }
+  getAriaExpanded() {
+    if (this.ariaExpanded && !["true", "false"].includes(this.ariaExpanded)) {
+      console.warn('aria-expanded must be "true" or "false"');
+      return;
+    }
+    return this.ariaExpanded;
+  }
+  validateProperties() {
+    var t;
+    this.shape === "circle" && !this.effectiveAriaLabel && !((t = this.textContent) != null && t.trim()) && !this.ariaHidden && console.warn(
+      "Circle buttons require aria-label or visible text for accessibility"
+    ), this.href && this.htmlType !== "button" && console.warn(
+      "htmlType is ignored when href is provided - button will render as anchor"
+    ), this.href && !this.isValidUrl(this.href) && console.warn("Invalid URL provided for href attribute");
+  }
+  isValidUrl(t) {
+    try {
+      return t.startsWith("/") || t.startsWith("./") || t.startsWith("../") || new URL(t), !0;
+    } catch (i) {
+      return !1;
+    }
+  }
+  handleClick(t) {
+    if (this.disabled || this.loading)
+      return t.preventDefault(), t.stopPropagation(), !1;
+    let i = !1;
+    if (this.htmlType !== "button") {
+      const n = document.createElement("button");
+      n.type = this.htmlType, this.insertAdjacentElement("afterend", n), n.click(), n.remove(), i = !0;
+    }
+    return this.hc && this.toggleHighContrast(), i;
+  }
+  handleKeyDown(t) {
+    if (this.href && (t.key === " " || t.key === "Enter")) {
+      if (this.disabled || this.loading) {
+        t.preventDefault(), t.stopPropagation();
+        return;
+      }
+      t.key === " " && (t.preventDefault(), t.stopPropagation(), this.button.click());
+    }
+  }
+  toggleHighContrast() {
+    document.body.classList.toggle("high-contrast-theme");
+  }
+  startLoadingTimeout() {
+    this.loadingTimeout > 0 && (this.loadingTimer = window.setTimeout(() => {
+      this.loading = !1, this.emit(
+        "dds-loading-timeout",
+        {
+          timeout: this.loadingTimeout
+        },
+        {
+          bubbles: !0
+        }
+      );
+    }, this.loadingTimeout));
+  }
+  clearLoadingTimeout() {
+    this.loadingTimer && (clearTimeout(this.loadingTimer), this.loadingTimer = void 0);
+  }
+  /**
+   * `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.
+   * A caller focusing a button the same tick it mounts -- a "Save" button that appears
+   * only after the form it belongs to opens, say -- would otherwise get a TypeError,
+   * not a no-op. Throwing out of a focus() call breaks whatever effect made it.
+   */
+  focus(t) {
+    var i;
+    (i = this.button) == null || i.focus(t);
+  }
+  blur() {
+    var t;
+    (t = this.button) == null || t.blur();
+  }
+  /**
+   * @ignore
+   */
+  get focusElement() {
+    return this.button;
+  }
+  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */
+  get effectiveAriaLabel() {
+    var t;
+    return (t = this.ariaLabel) != null ? t : this._ariaLabelForButton;
+  }
+  updated(t) {
+    if (super.updated(t), t.has("ariaLabel")) {
+      const i = this.ariaLabel;
+      i != null && i !== "" ? this._ariaLabelForButton = i : this._ignoreNextAriaLabelChange || (this._ariaLabelForButton = null), this._ignoreNextAriaLabelChange = !1;
+    }
+    this.ariaLabel != null && this.ariaLabel !== "" && (this._ignoreNextAriaLabelChange = !0, this.removeAttribute("aria-label")), t.has("loading") && (this.loading ? this.startLoadingTimeout() : this.clearLoadingTimeout());
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this.validateProperties();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.clearLoadingTimeout();
+  }
+  render() {
+    var t;
+    return h`
+      <${f(this.href ? "a" : "button")}
+        part="base"
+        .disabled=${this.disabled}
+        aria-disabled=${this.disabled}
+        aria-hidden=${s(this.ariaHidden)}
+        aria-expanded=${s(this.getAriaExpanded())}
+        aria-controls=${s(this.ariaControls)}
+        aria-label=${s(this.effectiveAriaLabel)}
+        aria-haspopup=${s(this.ariaHasPopup)}
+        aria-describedby=${s(this.ariaDescribedBy)}
+        aria-pressed=${s(this.validateAriaPressed())}
+        role=${s(this.forceRole)}
+        .autofocus=${this.autofocus}
+        tabindex=${s(this.href && this.disabled ? "-1" : void 0)}
+        type=${s(this.href ? null : this.htmlType)}
+        name=${s(this.name)}
+        href=${s(this.href)}
+        target=${s(this.target)}
+        rel=${s(this.getSecureRel())}
+        class=${m(
+      x({
+        intent: this.variant,
+        size: this.effectiveSize,
+        shape: this.shape
+      }),
+      {
+        "dds-button--danger": this.danger,
+        "dds-button--loading": this.loading,
+        "dds-button--active": this.active,
+        // An anchor never reflects a disabled attribute, so the [disabled]
+        // styling cannot reach it. Style off the class, as link--disabled does.
+        "button--disabled": this.disabled
+      }
+    )}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}>
+        <div part="high-contrast" class="button__highcontrast"></div>
+        ${this.loading ? this._getLoadingSpinner() : h` <span part="content" class="button__text">
+                <slot></slot>
+              </span>`}
+        ${this.target === "_blank" ? h`<span class="sr-only">
+                ${(t = this.targetBlankText) != null ? t : c("opensInNewTab")}</span
+              >` : b}
+      </${f(this.href ? "a" : "button")}>
+    `;
+  }
+  getLoadingIconSize(t) {
+    return g[t] || g.md;
+  }
+  _getLoadingSpinner() {
+    return h`
+      <span class="button__spinner" aria-live="polite">
+        <dap-ds-icon-loading-spinner
+          size=${this.getLoadingIconSize(this.effectiveSize)}
+          aria-label=${c("loading")}></dap-ds-icon-loading-spinner>
+      </span>
+    `;
+  }
+};
+l.tagName = "dap-ds-button", l.dependencies = {
+  "dap-ds-icon": L,
+  "dap-ds-icon-loading-spinner": $
+}, l.styles = _(T);
+let e = l;
+a([
+  y(".button")
+], e.prototype, "button");
+a([
+  r({ reflect: !0 })
+], e.prototype, "variant");
+a([
+  r({ reflect: !0 })
+], e.prototype, "size");
+a([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "loading");
+a([
+  r({ type: Boolean })
+], e.prototype, "danger");
+a([
+  r({ reflect: !0 })
+], e.prototype, "shape");
+a([
+  r()
+], e.prototype, "htmlType");
+a([
+  r()
+], e.prototype, "href");
+a([
+  r()
+], e.prototype, "target");
+a([
+  r()
+], e.prototype, "rel");
+a([
+  r({ type: Number })
+], e.prototype, "loadingTimeout");
+a([
+  r({ type: Boolean })
+], e.prototype, "hc");
+a([
+  r({ type: Boolean })
+], e.prototype, "active");
+a([
+  r({ type: Boolean, attribute: "data-oklch-poc", reflect: !0 })
+], e.prototype, "oklchPoc");
+a([
+  r({ type: String })
+], e.prototype, "targetBlankText");
+a([
+  r({ type: String })
+], e.prototype, "forceRole");
+export {
+  e as default
+};
+//# sourceMappingURL=button.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.component.js","sources":["../../../src/components/button/button.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, PropertyValueMap, unsafeCSS } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { GenericFormElement } from '@/internal/mixin/genericFormElement'\nimport { t } from '@/localization/localization'\n\nimport {\n  ButtonShape,\n  ButtonVariant,\n  HtmlButtonType,\n  LinkTarget,\n} from '../../common/types'\nimport DapDSIcon from '../icon/icon.component'\nimport { ButtonSize } from '../icon-button/icon-button.component'\nimport SystemLoadingSpinner from '../icons/system/system-loading-spinner/system-loading-spinner.component'\nimport styles from './_styles/button.scss?inline'\nimport { buttonVariants } from './button.variants'\n\nconst LOADING_ICON_SIZES = {\n  lg: 24,\n  md: 20,\n  sm: 16,\n  xs: 16,\n} as const\n\n/**\n * `dap-ds-button` is a versatile button component for triggering actions and navigation.\n * @element dap-ds-button\n * @summary A button is a clickable element that can be used to trigger an action, submit forms, or navigate to other pages.\n * @title - Button\n *\n * @example Basic Usage\n * ```html\n * <dap-ds-button>Click me</dap-ds-button>\n * <dap-ds-button variant=\"outline\">Secondary action</dap-ds-button>\n * <dap-ds-button href=\"/dashboard\">Navigate</dap-ds-button>\n * ```\n *\n * @example Form Integration\n * ```html\n * <form>\n *   <dap-ds-button htmlType=\"submit\">Submit Form</dap-ds-button>\n *   <dap-ds-button htmlType=\"reset\" variant=\"outline\">Reset</dap-ds-button>\n * </form>\n * ```\n *\n * @example Accessibility\n * ```html\n * <!-- Icon-only buttons require aria-label -->\n * <dap-ds-button aria-label=\"Close dialog\" shape=\"circle\">\n *   <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n * </dap-ds-button>\n * ```\n *\n * @property {string} sizeMap - The size map of the button.\n * @example\n * ```html\n * <dap-ds-button sizeMap=\"sm:lg,xs:xs\">Small</dap-ds-button>\n * ```\n *\n * @event dds-loading-timeout - Emitted when the loading timeout is reached\n *\n * @slot - The content of the button. Can contain text, icons, or other elements.\n *\n * @csspart base - The main button container.\n * @csspart high-contrast - The high contrast part of the button.\n * @csspart content - The content wrapper inside the button.\n *\n * @cssproperty --dds-button-padding-x - Horizontal padding of the button (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-padding-y - Vertical padding of the button (default: var(--dds-spacing-300))\n * @cssproperty --dds-button-border-radius - Border radius of the button (default: var(--dds-radius-rounded))\n * @cssproperty --dds-button-font-weight - Font weight of the button (default: 700)\n * @cssproperty --dds-button-line-height - Line height of the button (default: var(--dds-font-line-height-large))\n * @cssproperty --dds-button-transition - Transition property of the button (default: all 0.2s ease-in-out)\n * @cssproperty --dds-button-disabled-opacity - Opacity of disabled button (default: 0.5)\n *\n * @cssproperty --dds-button-size-lg - Size of large button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-button-size-md - Size of medium button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-button-size-sm - Size of small button (default: var(--dds-spacing-800))\n * @cssproperty --dds-button-size-xs - Size of extra small button (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-button-circle-lg - Size of large circle button (default: var(--dds-spacing-1200))\n * @cssproperty --dds-button-circle-md - Size of medium circle button (default: var(--dds-spacing-1000))\n * @cssproperty --dds-button-circle-sm - Size of small circle button (default: var(--dds-spacing-800))\n * @cssproperty --dds-button-circle-xs - Size of extra small circle button (default: var(--dds-spacing-600))\n *\n * Primary button properties:\n * @cssproperty --dds-button-primary-color-bg - Background color of primary button (default: var(--dds-button-primary-background-enabled))\n * @cssproperty --dds-button-primary-color-bg-hover - Background color of primary button on hover (default: var(--dds-button-primary-background-hover))\n * @cssproperty --dds-button-primary-color-bg-active - Background color of primary button when active (default: var(--dds-button-primary-background-pressed))\n * @cssproperty --dds-button-primary-color-bg-disabled - Background color of disabled primary button (default: var(--dds-button-primary-background-disabled))\n * @cssproperty --dds-button-primary-color-text - Text color of primary button (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-button-primary-color-text-disabled - Text color of disabled primary button (default: var(--dds-button-primary-text-disabled))\n *\n * Primary inverted button properties:\n * @cssproperty --dds-button-primary-inverted-color-bg - Background color of primary inverted button (default: var(--dds-button-primary-background-inverted-enabled))\n * @cssproperty --dds-button-primary-inverted-color-bg-hover - Background color of primary inverted button on hover (default: var(--dds-button-primary-background-inverted-hover))\n * @cssproperty --dds-button-primary-inverted-color-bg-active - Background color of primary inverted button when active (default: var(--dds-button-primary-background-inverted-pressed))\n * @cssproperty --dds-button-primary-inverted-color-bg-disabled - Background color of disabled primary inverted button (default: var(--dds-button-primary-background-inverted-disabled))\n * @cssproperty --dds-button-primary-inverted-color-text - Text color of primary inverted button (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-primary-inverted-color-text-disabled - Text color of disabled primary inverted button (default: var(--dds-button-primary-text-inverted-disabled))\n *\n * Outline button properties:\n * @cssproperty --dds-button-outline-color-border - Border color of outline button (default: var(--dds-button-outline-border-enabled))\n * @cssproperty --dds-button-outline-color-border-hover - Border color of outline button on hover (default: var(--dds-button-outline-border-hover))\n * @cssproperty --dds-button-outline-color-border-active - Border color of outline button when active (default: var(--dds-button-outline-border-pressed))\n * @cssproperty --dds-button-outline-color-border-disabled - Border color of disabled outline button (default: var(--dds-button-outline-border-disabled))\n * @cssproperty --dds-button-outline-color-text - Text color of outline button (default: var(--dds-button-outline-text-enabled))\n * @cssproperty --dds-button-outline-color-text-hover - Text color of outline button on hover (default: var(--dds-button-outline-text-hover))\n * @cssproperty --dds-button-outline-color-text-active - Text color of outline button when active (default: var(--dds-button-outline-text-pressed))\n * @cssproperty --dds-button-outline-color-text-disabled - Text color of disabled outline button (default: var(--dds-button-outline-text-disabled))\n *\n * Outline inverted button properties:\n * @cssproperty --dds-button-outline-inverted-color-border - Border color of outline inverted button (default: var(--dds-button-outline-border-inverted-enabled))\n * @cssproperty --dds-button-outline-inverted-color-border-hover - Border color of outline inverted button on hover (default: var(--dds-button-outline-border-inverted-hover))\n * @cssproperty --dds-button-outline-inverted-color-border-active - Border color of outline inverted button when active (default: var(--dds-button-outline-border-inverted-pressed))\n * @cssproperty --dds-button-outline-inverted-color-border-disabled - Border color of disabled outline inverted button (default: var(--dds-button-outline-border-inverted-disabled))\n * @cssproperty --dds-button-outline-inverted-color-text - Text color of outline inverted button (default: var(--dds-button-outline-text-inverted-enabled))\n * @cssproperty --dds-button-outline-inverted-color-text-hover - Text color of outline inverted button on hover (default: var(--dds-button-outline-text-inverted-hover))\n * @cssproperty --dds-button-outline-inverted-color-text-active - Text color of outline inverted button when active (default: var(--dds-button-outline-text-inverted-pressed))\n * @cssproperty --dds-button-outline-inverted-color-text-disabled - Text color of disabled outline inverted button (default: var(--dds-button-outline-text-inverted-disabled))\n *\n * Subtle button properties:\n * @cssproperty --dds-button-subtle-color-bg - Background color of subtle button (default: var(--dds-button-subtle-background-enabled))\n * @cssproperty --dds-button-subtle-color-bg-hover - Background color of subtle button on hover (default: var(--dds-button-subtle-background-hover))\n * @cssproperty --dds-button-subtle-color-bg-active - Background color of subtle button when active (default: var(--dds-button-subtle-background-pressed))\n * @cssproperty --dds-button-subtle-color-bg-disabled - Background color of disabled subtle button (default: var(--dds-button-subtle-background-disabled))\n * @cssproperty --dds-button-subtle-color-border - Border color of subtle button (default: var(--dds-button-subtle-border-enabled))\n * @cssproperty --dds-button-subtle-color-border-hover - Border color of subtle button on hover (default: var(--dds-button-subtle-border-hover))\n * @cssproperty --dds-button-subtle-color-border-active - Border color of subtle button when active (default: var(--dds-button-subtle-border-pressed))\n * @cssproperty --dds-button-subtle-color-border-disabled - Border color of disabled subtle button (default: var(--dds-button-subtle-border-disabled))\n * @cssproperty --dds-button-subtle-color-text - Text color of subtle button (default: var(--dds-button-subtle-text-enabled))\n * @cssproperty --dds-button-subtle-color-text-hover - Text color of subtle button on hover (default: var(--dds-button-subtle-text-hover))\n * @cssproperty --dds-button-subtle-color-text-active - Text color of subtle button when active (default: var(--dds-button-subtle-text-pressed))\n * @cssproperty --dds-button-subtle-color-text-disabled - Text color of disabled subtle button (default: var(--dds-button-subtle-text-disabled))\n *\n * Clean button properties:\n * @cssproperty --dds-button-clean-color-text - Text color of clean button (default: var(--dds-text-link-base))\n * @cssproperty --dds-button-clean-color-text-hover - Text color of clean button on hover (default: var(--dds-text-link-hover))\n * @cssproperty --dds-button-clean-color-text-active - Text color of clean button when active (default: var(--dds-text-link-pressed))\n * @cssproperty --dds-button-clean-color-text-disabled - Text color of disabled clean button (default: var(--dds-text-neutral-disabled))\n *\n * Clean inverted button properties:\n * @cssproperty --dds-button-clean-inverted-color-text - Text color of clean inverted button (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-hover - Text color of clean inverted button on hover (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-active - Text color of clean inverted button when active (default: var(--dds-button-primary-text-inverted))\n * @cssproperty --dds-button-clean-inverted-color-text-disabled - Text color of disabled clean inverted button (default: var(--dds-text-neutral-disabled))\n *\n * Danger button properties:\n * @cssproperty --dds-button-danger-color-bg - Background color of danger button (default: var(--dds-button-primary-background-destructive-enabled))\n * @cssproperty --dds-button-danger-color-bg-hover - Background color of danger button on hover (default: var(--dds-button-primary-background-destructive-hover))\n * @cssproperty --dds-button-danger-color-bg-active - Background color of danger button when active (default: var(--dds-button-primary-background-destructive-pressed))\n * @cssproperty --dds-button-danger-color-text - Text color of danger button (default: var(--dds-button-primary-text-enabled))\n * @cssproperty --dds-button-danger-outline-color-border - Border color of danger outline button (default: var(--dds-button-outline-border-destructive-enabled))\n * @cssproperty --dds-button-danger-outline-color-border-hover - Border color of danger outline button on hover (default: var(--dds-button-outline-border-destructive-hover))\n * @cssproperty --dds-button-danger-outline-color-border-active - Border color of danger outline button when active (default: var(--dds-button-outline-border-destructive-pressed))\n * @cssproperty --dds-button-danger-outline-color-text - Text color of danger outline button (default: var(--dds-button-outline-text-destructive-enabled))\n * @cssproperty --dds-button-danger-outline-color-text-hover - Text color of danger outline button on hover (default: var(--dds-button-outline-text-destructive-hover))\n * @cssproperty --dds-button-danger-outline-color-text-active - Text color of danger outline button when active (default: var(--dds-button-outline-text-destructive-pressed))\n * @cssproperty --dds-button-danger-subtle-color-bg - Background color of danger subtle button (default: var(--dds-button-subtle-background-destructive-enabled))\n * @cssproperty --dds-button-danger-subtle-color-bg-hover - Background color of danger subtle button on hover (default: var(--dds-button-subtle-background-destructive-hover))\n * @cssproperty --dds-button-danger-subtle-color-bg-active - Background color of danger subtle button when active (default: var(--dds-button-subtle-background-destructive-pressed))\n * @cssproperty --dds-button-danger-subtle-color-text - Text color of danger subtle button (default: var(--dds-button-subtle-text-destructive-enabled))\n * @cssproperty --dds-button-danger-subtle-color-text-hover - Text color of danger subtle button on hover (default: var(--dds-button-subtle-text-destructive-hover))\n * @cssproperty --dds-button-danger-subtle-color-text-active - Text color of danger subtle button when active (default: var(--dds-button-subtle-text-destructive-pressed))\n * @cssproperty --dds-button-danger-clean-color-text - Text color of danger clean button (default: var(--dds-text-negative-subtle))\n * @cssproperty --dds-button-danger-clean-color-text-hover - Text color of danger clean button on hover (default: var(--dds-text-negative-base))\n * @cssproperty --dds-button-danger-clean-color-text-active - Text color of danger clean button when active (default: var(--dds-text-negative-strong))\n */\nexport default class DapDSButton extends GenericFormElement {\n  static override tagName = 'dap-ds-button'\n\n  /** Components rendered inside the button, auto-registered on first use. */\n  static override dependencies = {\n    'dap-ds-icon': DapDSIcon,\n    'dap-ds-icon-loading-spinner': SystemLoadingSpinner,\n  }\n\n  /**\n   * @ignore\n   */\n  @query('.button') readonly button!: HTMLButtonElement | HTMLLinkElement\n\n  /** The visual style variant of the button\n   * @type { 'primary' | 'outline' | 'subtle' | 'subtle-neutral' | 'subtle-quiet' | 'subtle-quiet-inverted' | 'clean' | 'primary-inverted' | 'outline-inverted' | 'subtle-inverted' | 'clean-inverted' | 'subtle-menu' | 'subtle-menu-item' }\n   * @default 'primary'\n   * @example\n   * ```html\n   * <dap-ds-button variant=\"primary\">Primary action</dap-ds-button>\n   * <dap-ds-button variant=\"outline\">Secondary action</dap-ds-button>\n   * <dap-ds-button variant=\"subtle\">Tertiary action</dap-ds-button>\n   * ```\n   * @group Visual\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'primary'\n\n  /** The size of the button affecting padding and font size\n   * @type { 'lg' | 'md' | 'sm' | 'xs' }\n   * @default 'md'\n   * @example\n   * ```html\n   * <dap-ds-button size=\"xs\">Extra small</dap-ds-button>\n   * <dap-ds-button size=\"sm\">Small</dap-ds-button>\n   * <dap-ds-button>Medium (default)</dap-ds-button>\n   * <dap-ds-button size=\"lg\">Large</dap-ds-button>\n   * ```\n   * @group Visual\n   */\n  @property({ reflect: true }) size: ButtonSize = 'md'\n\n  /** Whether the button is in loading state, showing a spinner and disabling interaction\n   * @default false\n   * @example\n   * ```html\n   * <dap-ds-button loading>Submitting...</dap-ds-button>\n   * ```\n   * @group State\n   */\n  @property({ type: Boolean, reflect: true }) loading = false\n\n  /** Whether the button represents a destructive action (applies danger styling)\n   * @default false\n   * @example\n   * ```html\n   * <dap-ds-button danger>Delete Account</dap-ds-button>\n   * <dap-ds-button variant=\"outline\" danger>Remove Item</dap-ds-button>\n   * ```\n   * @group State\n   */\n  @property({ type: Boolean }) danger = false\n\n  /** The shape of the button - use 'circle' for icon-only buttons\n   * @type { 'button' | 'circle' }\n   * @default 'button'\n   * @example\n   * ```html\n   * <dap-ds-button shape=\"circle\" aria-label=\"Close\">\n   *   <dap-ds-icon name=\"close-line\"></dap-ds-icon>\n   * </dap-ds-button>\n   * ```\n   * @group Visual\n   */\n  @property({ reflect: true }) shape: ButtonShape = 'button'\n\n  /** The HTML type attribute for form interaction\n   * @type { 'button' | 'submit' | 'reset' }\n   * @default 'button'\n   * @example\n   * ```html\n   * <form>\n   *   <dap-ds-button htmlType=\"submit\">Submit</dap-ds-button>\n   *   <dap-ds-button htmlType=\"reset\">Reset</dap-ds-button>\n   * </form>\n   * ```\n   * @group Form\n   */\n  @property() htmlType: HtmlButtonType = 'button'\n\n  /** The URL to navigate to. When present, the button renders as an anchor element\n   * @example\n   * ```html\n   * <dap-ds-button href=\"/dashboard\">Go to Dashboard</dap-ds-button>\n   * <dap-ds-button href=\"https://example.com\" target=\"_blank\">External Link</dap-ds-button>\n   * ```\n   * @group Navigation\n   */\n  @property() href?: string\n\n  /** The target attribute for link navigation\n   * @type { '_blank' | '_self' | '_parent' | '_top' }\n   * @default '_self'\n   * @example\n   * ```html\n   * <dap-ds-button href=\"https://example.com\" target=\"_blank\">Open in new tab</dap-ds-button>\n   * ```\n   * @group Navigation\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The rel attribute for link security and behavior\n   * @default 'noreferrer noopener'\n   * @example\n   * ```html\n   * <dap-ds-button href=\"https://example.com\" rel=\"noopener\">Safe external link</dap-ds-button>\n   * ```\n   * @group Navigation\n   */\n  @property() rel?: string\n\n  /** Controls loading timeout in milliseconds\n   * @default 0\n   * @group State\n   */\n  @property({ type: Number }) loadingTimeout = 0\n\n  /** Enables high contrast theme toggle functionality (internal use)\n   * @default false\n   * @ignore\n   */\n  @property({ type: Boolean }) hc: boolean = false\n\n  /** Whether the button is active\n   * @default false\n   * @example\n   * ```html\n   * <dap-ds-button active>Active</dap-ds-button>\n   * ```\n   */\n  @property({ type: Boolean }) active: boolean = false\n\n  /**\n   * Enable OKLCH proof-of-concept theming (experimental)\n   * @default false\n   * @internal\n   * @ignore\n   */\n  @property({ type: Boolean, attribute: 'data-oklch-poc', reflect: true })\n  oklchPoc: boolean = false\n\n  /** The text for the target blank link, applicable when target is _blank. PRO TIP: Use parenthesis to wrap the text */\n  @property({ type: String }) targetBlankText: string\n\n  /** Overrides the ARIA role on the internal native button/anchor element. Use when the host's semantics must differ from the native element (e.g. role=\"link\" on a button acting as a SPA navigation trigger). */\n  @property({ type: String }) forceRole?: string\n\n  static readonly styles = unsafeCSS(styles)\n\n  private loadingTimer?: number\n\n  /** Persisted aria-label for the inner button; host attribute is removed so we keep the value here */\n  private _ariaLabelForButton: string | null = null\n\n  /** Internal flag to ignore the aria-label change triggered by our own attribute cleanup */\n  private _ignoreNextAriaLabelChange = false\n\n  private getSecureRel(): string {\n    if (this.target === '_blank') {\n      return this.rel ?? 'noreferrer noopener'\n    }\n    return this.rel ?? ''\n  }\n\n  private validateAriaPressed(): string | undefined | null {\n    if (\n      this.ariaPressed &&\n      !['true', 'false', 'mixed'].includes(this.ariaPressed)\n    ) {\n      console.warn('aria-pressed must be \"true\", \"false\", or \"mixed\"')\n      return undefined\n    }\n\n    return this.ariaPressed\n  }\n\n  private getAriaExpanded(): string | null | undefined {\n    if (this.ariaExpanded && !['true', 'false'].includes(this.ariaExpanded)) {\n      console.warn('aria-expanded must be \"true\" or \"false\"')\n      return undefined\n    }\n    return this.ariaExpanded\n  }\n\n  private validateProperties(): void {\n    if (\n      this.shape === 'circle' &&\n      !this.effectiveAriaLabel &&\n      !this.textContent?.trim() &&\n      !this.ariaHidden\n    ) {\n      console.warn(\n        'Circle buttons require aria-label or visible text for accessibility',\n      )\n    }\n\n    if (this.href && this.htmlType !== 'button') {\n      console.warn(\n        'htmlType is ignored when href is provided - button will render as anchor',\n      )\n    }\n\n    if (this.href && !this.isValidUrl(this.href)) {\n      console.warn('Invalid URL provided for href attribute')\n    }\n  }\n\n  private isValidUrl(url: string): boolean {\n    try {\n      if (\n        url.startsWith('/') ||\n        url.startsWith('./') ||\n        url.startsWith('../')\n      ) {\n        return true\n      }\n      new URL(url)\n      return true\n    } catch {\n      return false\n    }\n  }\n\n  private handleClick(event: Event): boolean {\n    if (this.disabled || this.loading) {\n      // Returning false does not cancel a Lit listener, and an anchor has no\n      // native disabled state, so without this a disabled href button navigates.\n      event.preventDefault()\n      event.stopPropagation()\n      return false\n    }\n\n    let handled = false\n    if (this.htmlType !== 'button') {\n      const proxy = document.createElement('button')\n      proxy.type = this.htmlType\n      this.insertAdjacentElement('afterend', proxy)\n\n      proxy.click()\n      proxy.remove()\n      handled = true\n    }\n\n    if (this.hc) {\n      this.toggleHighContrast()\n    }\n\n    return handled\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    // Only handle keyboard events for anchor elements that act as buttons\n    if (!this.href) {\n      return\n    }\n\n    // WAI-ARIA: Elements acting as buttons must respond to Enter and Space keys\n    if (event.key === ' ' || event.key === 'Enter') {\n      if (this.disabled || this.loading) {\n        event.preventDefault()\n        event.stopPropagation()\n        return\n      }\n\n      // For Space key: prevent default scrolling behavior and trigger click\n      if (event.key === ' ') {\n        event.preventDefault()\n        event.stopPropagation()\n        this.button.click()\n      }\n    }\n  }\n\n  private toggleHighContrast(): void {\n    document.body.classList.toggle('high-contrast-theme')\n  }\n\n  private startLoadingTimeout(): void {\n    if (this.loadingTimeout > 0) {\n      this.loadingTimer = window.setTimeout(() => {\n        this.loading = false\n        this.emit(\n          'dds-loading-timeout',\n          {\n            timeout: this.loadingTimeout,\n          },\n          {\n            bubbles: true,\n          },\n        )\n      }, this.loadingTimeout)\n    }\n  }\n\n  private clearLoadingTimeout(): void {\n    if (this.loadingTimer) {\n      clearTimeout(this.loadingTimer)\n      this.loadingTimer = undefined\n    }\n  }\n\n  /**\n   * `this.button` is a `@query`, so it is null until Lit has rendered the shadow root.\n   * A caller focusing a button the same tick it mounts -- a \"Save\" button that appears\n   * only after the form it belongs to opens, say -- would otherwise get a TypeError,\n   * not a no-op. Throwing out of a focus() call breaks whatever effect made it.\n   */\n  focus(options?: FocusOptions) {\n    this.button?.focus(options)\n  }\n\n  blur() {\n    this.button?.blur()\n  }\n\n  /**\n   * @ignore\n   */\n  public get focusElement() {\n    return this.button\n  }\n\n  /** Aria-label for the inner button; survives host attribute removal so Lit does not clear it */\n  private get effectiveAriaLabel(): string | null {\n    return this.ariaLabel ?? this._ariaLabelForButton\n  }\n\n  protected updated(\n    changedProperties: Map<string | number | symbol, unknown>,\n  ): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('ariaLabel')) {\n      const newValue = this.ariaLabel\n\n      if (newValue != null && newValue !== '') {\n        // Persist value before removing host attribute so the inner button keeps it\n        this._ariaLabelForButton = newValue\n      } else if (!this._ignoreNextAriaLabelChange) {\n        // Only clear when the consumer explicitly removes/clears aria-label\n        this._ariaLabelForButton = null\n      }\n\n      // Reset the guard after handling the change\n      this._ignoreNextAriaLabelChange = false\n    }\n\n    if (this.ariaLabel != null && this.ariaLabel !== '') {\n      // Removing the host attribute will trigger another ariaLabel change,\n      // which we intentionally ignore so the inner button keeps its label.\n      this._ignoreNextAriaLabelChange = true\n      this.removeAttribute('aria-label')\n    }\n\n    if (changedProperties.has('loading')) {\n      if (this.loading) {\n        this.startLoadingTimeout()\n      } else {\n        this.clearLoadingTimeout()\n      }\n    }\n  }\n\n  protected firstUpdated(\n    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>,\n  ): void {\n    super.firstUpdated(_changedProperties)\n    this.validateProperties()\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.clearLoadingTimeout()\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.href ? 'a' : 'button')}\n        part=\"base\"\n        .disabled=${this.disabled}\n        aria-disabled=${this.disabled}\n        aria-hidden=${ifDefined(this.ariaHidden)}\n        aria-expanded=${ifDefined(this.getAriaExpanded())}\n        aria-controls=${ifDefined(this.ariaControls)}\n        aria-label=${ifDefined(this.effectiveAriaLabel)}\n        aria-haspopup=${ifDefined(this.ariaHasPopup)}\n        aria-describedby=${ifDefined(this.ariaDescribedBy)}\n        aria-pressed=${ifDefined(this.validateAriaPressed())}\n        role=${ifDefined(this.forceRole)}\n        .autofocus=${this.autofocus}\n        tabindex=${ifDefined(this.href && this.disabled ? '-1' : undefined)}\n        type=${ifDefined(this.href ? null : this.htmlType)}\n        name=${ifDefined(this.name)}\n        href=${ifDefined(this.href)}\n        target=${ifDefined(this.target)}\n        rel=${ifDefined(this.getSecureRel())}\n        class=${clsx(\n          buttonVariants({\n            intent: this.variant,\n            size: this.effectiveSize as ButtonSize,\n            shape: this.shape,\n          }),\n          {\n            'dds-button--danger': this.danger,\n            'dds-button--loading': this.loading,\n            'dds-button--active': this.active,\n            // An anchor never reflects a disabled attribute, so the [disabled]\n            // styling cannot reach it. Style off the class, as link--disabled does.\n            'button--disabled': this.disabled,\n          },\n        )}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}>\n        <div part=\"high-contrast\" class=\"button__highcontrast\"></div>\n        ${\n          this.loading\n            ? this._getLoadingSpinner()\n            : html` <span part=\"content\" class=\"button__text\">\n                <slot></slot>\n              </span>`\n        }\n        ${\n          this.target === '_blank'\n            ? html`<span class=\"sr-only\">\n                ${this.targetBlankText ?? t('opensInNewTab')}</span\n              >`\n            : nothing\n        }\n      </${unsafeStatic(this.href ? 'a' : 'button')}>\n    `\n  }\n\n  private getLoadingIconSize(size: ButtonSize): number {\n    return LOADING_ICON_SIZES[size] || LOADING_ICON_SIZES.md\n  }\n\n  private _getLoadingSpinner() {\n    return html`\n      <span class=\"button__spinner\" aria-live=\"polite\">\n        <dap-ds-icon-loading-spinner\n          size=${this.getLoadingIconSize(this.effectiveSize as ButtonSize)}\n          aria-label=${t('loading')}></dap-ds-icon-loading-spinner>\n      </span>\n    `\n  }\n}\n"],"names":["LOADING_ICON_SIZES","_DapDSButton","GenericFormElement","_a","_b","url","e","event","handled","proxy","options","changedProperties","newValue","_changedProperties","html","unsafeStatic","ifDefined","clsx","buttonVariants","t","nothing","size","DapDSIcon","SystemLoadingSpinner","unsafeCSS","styles","DapDSButton","__decorateClass","query","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAqB;AAAA,EACzB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAkJqBC,IAArB,MAAqBA,UAAoBC,EAAmB;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA,GAyBwD,KAAA,UAAA,WAcN,KAAA,OAAA,MAUM,KAAA,UAAA,IAWhB,KAAA,SAAA,IAaY,KAAA,QAAA,UAcX,KAAA,WAAA,UAqBN,KAAA,SAAA,SAgBY,KAAA,iBAAA,GAMF,KAAA,KAAA,IASI,KAAA,SAAA,IAS3B,KAAA,WAAA,IAapB,KAAQ,sBAAqC,MAG7C,KAAQ,6BAA6B;AAAA,EAAA;AAAA,EAE7B,eAAuB;;AACzB,WAAA,KAAK,WAAW,YACXC,IAAA,KAAK,QAAL,OAAAA,IAAY,yBAEdC,IAAA,KAAK,QAAL,OAAAA,IAAY;AAAA,EAAA;AAAA,EAGb,sBAAiD;AAErD,QAAA,KAAK,eACL,CAAC,CAAC,QAAQ,SAAS,OAAO,EAAE,SAAS,KAAK,WAAW,GACrD;AACA,cAAQ,KAAK,kDAAkD;AACxD;AAAA,IAAA;AAGT,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,kBAA6C;AAC/C,QAAA,KAAK,gBAAgB,CAAC,CAAC,QAAQ,OAAO,EAAE,SAAS,KAAK,YAAY,GAAG;AACvE,cAAQ,KAAK,yCAAyC;AAC/C;AAAA,IAAA;AAET,WAAO,KAAK;AAAA,EAAA;AAAA,EAGN,qBAA2B;;AACjC,IACE,KAAK,UAAU,YACf,CAAC,KAAK,sBACN,GAACD,IAAA,KAAK,gBAAL,QAAAA,EAAkB,WACnB,CAAC,KAAK,cAEE,QAAA;AAAA,MACN;AAAA,IACF,GAGE,KAAK,QAAQ,KAAK,aAAa,YACzB,QAAA;AAAA,MACN;AAAA,IACF,GAGE,KAAK,QAAQ,CAAC,KAAK,WAAW,KAAK,IAAI,KACzC,QAAQ,KAAK,yCAAyC;AAAA,EACxD;AAAA,EAGM,WAAWE,GAAsB;AACnC,QAAA;AAEA,aAAAA,EAAI,WAAW,GAAG,KAClBA,EAAI,WAAW,IAAI,KACnBA,EAAI,WAAW,KAAK,KAItB,IAAI,IAAIA,CAAG,GACJ;AAAA,IAAA,SACDC,GAAA;AACC,aAAA;AAAA,IAAA;AAAA,EACT;AAAA,EAGM,YAAYC,GAAuB;AACrC,QAAA,KAAK,YAAY,KAAK;AAGxB,aAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACf;AAGT,QAAIC,IAAU;AACV,QAAA,KAAK,aAAa,UAAU;AACxB,YAAAC,IAAQ,SAAS,cAAc,QAAQ;AAC7C,MAAAA,EAAM,OAAO,KAAK,UACb,KAAA,sBAAsB,YAAYA,CAAK,GAE5CA,EAAM,MAAM,GACZA,EAAM,OAAO,GACHD,IAAA;AAAA,IAAA;AAGZ,WAAI,KAAK,MACP,KAAK,mBAAmB,GAGnBA;AAAA,EAAA;AAAA,EAGD,cAAcD,GAA4B;AAE5C,QAAC,KAAK,SAKNA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,UAAS;AAC1C,UAAA,KAAK,YAAY,KAAK,SAAS;AACjC,QAAAA,EAAM,eAAe,GACrBA,EAAM,gBAAgB;AACtB;AAAA,MAAA;AAIE,MAAAA,EAAM,QAAQ,QAChBA,EAAM,eAAe,GACrBA,EAAM,gBAAgB,GACtB,KAAK,OAAO,MAAM;AAAA,IACpB;AAAA,EACF;AAAA,EAGM,qBAA2B;AACxB,aAAA,KAAK,UAAU,OAAO,qBAAqB;AAAA,EAAA;AAAA,EAG9C,sBAA4B;AAC9B,IAAA,KAAK,iBAAiB,MACnB,KAAA,eAAe,OAAO,WAAW,MAAM;AAC1C,WAAK,UAAU,IACV,KAAA;AAAA,QACH;AAAA,QACA;AAAA,UACE,SAAS,KAAK;AAAA,QAChB;AAAA,QACA;AAAA,UACE,SAAS;AAAA,QAAA;AAAA,MAEb;AAAA,IAAA,GACC,KAAK,cAAc;AAAA,EACxB;AAAA,EAGM,sBAA4B;AAClC,IAAI,KAAK,iBACP,aAAa,KAAK,YAAY,GAC9B,KAAK,eAAe;AAAA,EACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASF,MAAMG,GAAwB;;AACvB,KAAAP,IAAA,KAAA,WAAA,QAAAA,EAAQ,MAAMO;AAAA,EAAO;AAAA,EAG5B,OAAO;;AACL,KAAAP,IAAA,KAAK,WAAL,QAAAA,EAAa;AAAA,EAAK;AAAA;AAAA;AAAA;AAAA,EAMpB,IAAW,eAAe;AACxB,WAAO,KAAK;AAAA,EAAA;AAAA;AAAA,EAId,IAAY,qBAAoC;;AACvC,YAAAA,IAAA,KAAK,cAAL,OAAAA,IAAkB,KAAK;AAAA,EAAA;AAAA,EAGtB,QACRQ,GACM;AAGF,QAFJ,MAAM,QAAQA,CAAiB,GAE3BA,EAAkB,IAAI,WAAW,GAAG;AACtC,YAAMC,IAAW,KAAK;AAElB,MAAAA,KAAY,QAAQA,MAAa,KAEnC,KAAK,sBAAsBA,IACjB,KAAK,+BAEf,KAAK,sBAAsB,OAI7B,KAAK,6BAA6B;AAAA,IAAA;AAGpC,IAAI,KAAK,aAAa,QAAQ,KAAK,cAAc,OAG/C,KAAK,6BAA6B,IAClC,KAAK,gBAAgB,YAAY,IAG/BD,EAAkB,IAAI,SAAS,MAC7B,KAAK,UACP,KAAK,oBAAoB,IAEzB,KAAK,oBAAoB;AAAA,EAE7B;AAAA,EAGQ,aACRE,GACM;AACN,UAAM,aAAaA,CAAkB,GACrC,KAAK,mBAAmB;AAAA,EAAA;AAAA,EAG1B,uBAA6B;AAC3B,UAAM,qBAAqB,GAC3B,KAAK,oBAAoB;AAAA,EAAA;AAAA,EAG3B,SAAS;;AACA,WAAAC;AAAAA,SACFC,EAAa,KAAK,OAAO,MAAM,QAAQ,CAAC;AAAA;AAAA,oBAE7B,KAAK,QAAQ;AAAA,wBACT,KAAK,QAAQ;AAAA,sBACfC,EAAU,KAAK,UAAU,CAAC;AAAA,wBACxBA,EAAU,KAAK,iBAAiB,CAAC;AAAA,wBACjCA,EAAU,KAAK,YAAY,CAAC;AAAA,qBAC/BA,EAAU,KAAK,kBAAkB,CAAC;AAAA,wBAC/BA,EAAU,KAAK,YAAY,CAAC;AAAA,2BACzBA,EAAU,KAAK,eAAe,CAAC;AAAA,uBACnCA,EAAU,KAAK,qBAAqB,CAAC;AAAA,eAC7CA,EAAU,KAAK,SAAS,CAAC;AAAA,qBACnB,KAAK,SAAS;AAAA,mBAChBA,EAAU,KAAK,QAAQ,KAAK,WAAW,OAAO,MAAS,CAAC;AAAA,eAC5DA,EAAU,KAAK,OAAO,OAAO,KAAK,QAAQ,CAAC;AAAA,eAC3CA,EAAU,KAAK,IAAI,CAAC;AAAA,eACpBA,EAAU,KAAK,IAAI,CAAC;AAAA,iBAClBA,EAAU,KAAK,MAAM,CAAC;AAAA,cACzBA,EAAU,KAAK,cAAc,CAAC;AAAA,gBAC5BC;AAAA,MACNC,EAAe;AAAA,QACb,QAAQ,KAAK;AAAA,QACb,MAAM,KAAK;AAAA,QACX,OAAO,KAAK;AAAA,MAAA,CACb;AAAA,MACD;AAAA,QACE,sBAAsB,KAAK;AAAA,QAC3B,uBAAuB,KAAK;AAAA,QAC5B,sBAAsB,KAAK;AAAA;AAAA;AAAA,QAG3B,oBAAoB,KAAK;AAAA,MAAA;AAAA,IAE5B,CAAA;AAAA,iBACQ,KAAK,WAAW;AAAA,mBACd,KAAK,aAAa;AAAA;AAAA,UAG3B,KAAK,UACD,KAAK,mBAAA,IACLJ;AAAAA;AAAAA,sBAGN;AAAA,UAEE,KAAK,WAAW,WACZA;AAAAA,mBACIX,IAAA,KAAK,oBAAL,OAAAA,IAAwBgB,EAAE,eAAe,CAAC;AAAA,mBAE9CC,CACN;AAAA,UACEL,EAAa,KAAK,OAAO,MAAM,QAAQ,CAAC;AAAA;AAAA,EAAA;AAAA,EAIxC,mBAAmBM,GAA0B;AAC5C,WAAArB,EAAmBqB,CAAI,KAAKrB,EAAmB;AAAA,EAAA;AAAA,EAGhD,qBAAqB;AACpB,WAAAc;AAAAA;AAAAA;AAAAA,iBAGM,KAAK,mBAAmB,KAAK,aAA2B,CAAC;AAAA,uBACnDK,EAAE,SAAS,CAAC;AAAA;AAAA;AAAA,EAAA;AAInC;AArcElB,EAAgB,UAAU,iBAG1BA,EAAgB,eAAe;AAAA,EAC7B,eAAeqB;AAAA,EACf,+BAA+BC;AACjC,GAqJgBtB,EAAA,SAASuB,EAAUC,CAAM;AA5J3C,IAAqBC,IAArBzB;AAY6B0B,EAAA;AAAA,EAA1BC,EAAM,SAAS;AAAA,GAZGF,EAYQ,WAAA,QAAA;AAaEC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAzBRH,EAyBU,WAAA,SAAA;AAcAC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAvCRH,EAuCU,WAAA,MAAA;AAUeC,EAAA;AAAA,EAA3CE,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAjDvBH,EAiDyB,WAAA,SAAA;AAWfC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA5DRH,EA4DU,WAAA,QAAA;AAaAC,EAAA;AAAA,EAA5BE,EAAS,EAAE,SAAS,GAAM,CAAA;AAAA,GAzERH,EAyEU,WAAA,OAAA;AAcjBC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAvFSH,EAuFP,WAAA,UAAA;AAUAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAjGSH,EAiGP,WAAA,MAAA;AAWAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GA5GSH,EA4GP,WAAA,QAAA;AAUAC,EAAA;AAAA,EAAXE,EAAS;AAAA,GAtHSH,EAsHP,WAAA,KAAA;AAMgBC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA5HPH,EA4HS,WAAA,gBAAA;AAMCC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAlIRH,EAkIU,WAAA,IAAA;AASAC,EAAA;AAAA,EAA5BE,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GA3IRH,EA2IU,WAAA,QAAA;AAS7BC,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,WAAW,kBAAkB,SAAS,GAAM,CAAA;AAAA,GAnJpDH,EAoJnB,WAAA,UAAA;AAG4BC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAvJPH,EAuJS,WAAA,iBAAA;AAGAC,EAAA;AAAA,EAA3BE,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GA1JPH,EA0JS,WAAA,WAAA;"}

package/dist/components/button/button.d.ts

@@ -1,5 +1,5 @@
-import { default as DapDSButton } from './button.component.js';
-export * from './button.component.js';
+import { default as DapDSButton } from './button.component';
+export * from './button.component';
 export default DapDSButton;
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/button/button.js

@@ -0,0 +1,6 @@
+import t from "./button.component.js";
+t.define();
+export {
+  t as default
+};
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sources":["../../../src/components/button/button.ts"],"sourcesContent":["import DapDSButton from './button.component'\n\nexport * from './button.component'\nexport default DapDSButton\n\nDapDSButton.define()\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'dap-ds-button': DapDSButton\n  }\n}\n"],"names":["DapDSButton"],"mappings":";AAKAA,EAAY,OAAO;"}

package/dist/components/button/button.variants.d.ts

@@ -1,5 +1,5 @@
 export declare const buttonVariants: (props?: ({
-    intent?: "subtle" | "primary" | "outline" | "clean" | "primary-inverted" | "outline-inverted" | "subtle-inverted" | "clean-inverted" | "subtle-neutral" | "subtle-quiet" | "subtle-quiet-inverted" | "subtle-menu" | "subtle-menu-item" | null | undefined;
+    intent?: "clean" | "subtle" | "primary" | "outline" | "primary-inverted" | "outline-inverted" | "subtle-inverted" | "clean-inverted" | "subtle-neutral" | "subtle-quiet" | "subtle-quiet-inverted" | "subtle-menu" | "subtle-menu-item" | null | undefined;
     size?: "sm" | "xs" | "md" | "lg" | null | undefined;
     shape?: "button" | "circle" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;