dap-design-system 0.62.4 → 0.63.1

package/dist/components/card/card-content.component.js

@@ -1,40 +1,37 @@
-import { clsx as p } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as c } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { unsafeStatic as m, html as d } from "../../node_modules/lit-html/static.js";
-import { DdsElement as f } from "../../internal/dds-hu-element.js";
-import { SizedMixin as l } from "../../internal/mixin/sizedMixin.js";
-import h from "./_styles/card-content.scss.js";
-import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, $ = (i, o, a, g) => {
-  for (var t = void 0, s = i.length - 1, n; s >= 0; s--)
-    (n = i[s]) && (t = n(o, a, t) || t);
-  return t && v(o, a, t), t;
+import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as p } from "lit";
+import { property as d } from "lit/decorators.js";
+import { unsafeStatic as a, html as f } from "lit/static-html.js";
+import { DdsElement as l } from "../../internal/dds-hu-element.js";
+import { SizedMixin as h } from "../../internal/mixin/sizedMixin.js";
+import u from "./_styles/card-content.scss.js";
+var v = Object.defineProperty, $ = (i, o, n, g) => {
+  for (var t = void 0, e = i.length - 1, c; e >= 0; e--)
+    (c = i[e]) && (t = c(o, n, t) || t);
+  return t && v(o, n, t), t;
 };
-const r = class r extends l(f) {
+const r = class r extends h(l) {
   constructor() {
     super(), this.renderAs = "div", this.spacing = "bottom", this.parentSized = "true";
   }
   render() {
-    return d`
-      <${m(this.renderAs)} part="base" class=${p(
+    return f`
+      <${a(this.renderAs)} part="base" class=${m(
       "card-content",
       `card-content--${this.effectiveSize}`,
       `card-content-spacing--${this.spacing}`
     )}>
         <slot> </slot>
-      </${m(this.renderAs)}>
+      </${a(this.renderAs)}>
     `;
   }
 };
-r.tagName = "dap-ds-card-content", r.styles = u(h);
-let e = r;
+r.tagName = "dap-ds-card-content", r.styles = p(u);
+let s = r;
 $([
-  c()
-], e.prototype, "renderAs");
+  d()
+], s.prototype, "renderAs");
 export {
-  e as default
+  s as default
 };
 //# sourceMappingURL=card-content.component.js.map

package/dist/components/card/card-content.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-content.component.js","sources":["../../../src/components/card/card-content.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-content.scss?inline'\n\n/**\n * `dap-ds-card-content`\n * @summary A card content is a container for content in a card.\n * @element dap-ds-card-content\n * @title - Card content\n * @group card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card-content.\n *\n * @csspart base - The main card content container.\n *\n * @cssproperty --dds-card-content-padding - The padding of the card content. (default: 0)\n * @cssproperty --dds-card-content-margin - The margin of the card content. (default: 0)\n * @cssproperty --dds-card-content-font-size - The font size of the card content. (default: var(--dds-font-base))\n * @cssproperty --dds-card-content-line-height - The line height of the card content. (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-card-content-spacing-lg - The large spacing value. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-content-spacing-md - The medium spacing value. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-content-spacing-sm - The small spacing value. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-content-spacing-top - The top spacing value. (default: 0)\n * @cssproperty --dds-card-content-spacing-bottom - The bottom spacing value. (default: 0)\n */\nexport default class DapDSCardContent extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-content'\n\n  /** The base rendered root tag of the card content. */\n  @property() renderAs = 'div'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'bottom'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.renderAs)} part=\"base\" class=${clsx(\n        'card-content',\n        `card-content--${this.effectiveSize}`,\n        `card-content-spacing--${this.spacing}`,\n      )}>\n        <slot> </slot>\n      </${unsafeStatic(this.renderAs)}>\n    `\n  }\n}\n"],"names":["_DapDSCardContent","SizedMixin","DdsElement","html","unsafeStatic","clsx","unsafeCSS","styles","DapDSCardContent","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAmCqB,MAAAA,IAAA,MAAAA,UAAyBC,EAAWC,CAAU,EAAE;AAAA,EAQnE,cAAc;AACN,UAAA,GALe,KAAA,WAAA,OAMrB,KAAK,UAAU,UACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAAA,SACFC,EAAa,KAAK,QAAQ,CAAC,sBAAsBC;AAAA,MAClD;AAAA,MACA,iBAAiB,KAAK,aAAa;AAAA,MACnC,yBAAyB,KAAK,OAAO;AAAA,IAAA,CACtC;AAAA;AAAA,UAEGD,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,EAAA;AAGrC;AAxBEJ,EAAO,UAAU,uBAKDA,EAAA,SAASM,EAAUC,CAAM;AANtB,IAAAC,IAAAR;AAIPS,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,UAAA;"}
+{"version":3,"file":"card-content.component.js","sources":["../../../src/components/card/card-content.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-content.scss?inline'\n\n/**\n * `dap-ds-card-content`\n * @summary A card content is a container for content in a card.\n * @element dap-ds-card-content\n * @title - Card content\n * @group card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card content. This adds a margin to the card subtitle. Default is `bottom`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card-content.\n *\n * @csspart base - The main card content container.\n *\n * @cssproperty --dds-card-content-padding - The padding of the card content. (default: 0)\n * @cssproperty --dds-card-content-margin - The margin of the card content. (default: 0)\n * @cssproperty --dds-card-content-font-size - The font size of the card content. (default: var(--dds-font-base))\n * @cssproperty --dds-card-content-line-height - The line height of the card content. (default: var(--dds-font-line-height-xlarge))\n * @cssproperty --dds-card-content-spacing-lg - The large spacing value. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-content-spacing-md - The medium spacing value. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-content-spacing-sm - The small spacing value. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-content-spacing-top - The top spacing value. (default: 0)\n * @cssproperty --dds-card-content-spacing-bottom - The bottom spacing value. (default: 0)\n */\nexport default class DapDSCardContent extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-content'\n\n  /** The base rendered root tag of the card content. */\n  @property() renderAs = 'div'\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'bottom'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.renderAs)} part=\"base\" class=${clsx(\n        'card-content',\n        `card-content--${this.effectiveSize}`,\n        `card-content-spacing--${this.spacing}`,\n      )}>\n        <slot> </slot>\n      </${unsafeStatic(this.renderAs)}>\n    `\n  }\n}\n"],"names":["_DapDSCardContent","SizedMixin","DdsElement","html","unsafeStatic","clsx","unsafeCSS","styles","DapDSCardContent","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAmCqB,MAAAA,IAAA,MAAAA,UAAyBC,EAAWC,CAAU,EAAE;AAAA,EAQnE,cAAc;AACN,UAAA,GALe,KAAA,WAAA,OAMrB,KAAK,UAAU,UACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAA,SACFC,EAAa,KAAK,QAAQ,CAAC,sBAAsBC;AAAA,MAClD;AAAA,MACA,iBAAiB,KAAK,aAAa;AAAA,MACnC,yBAAyB,KAAK,OAAO;AAAA,IAAA,CACtC;AAAA;AAAA,UAEGD,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,EAAA;AAGrC;AAxBEJ,EAAO,UAAU,uBAKDA,EAAA,SAASM,EAAUC,CAAM;AANtB,IAAAC,IAAAR;AAIPS,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,UAAA;"}

package/dist/components/card/card-image.component.js

@@ -1,21 +1,18 @@
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as s } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { ifDefined as m } from "../../node_modules/lit-html/directives/if-defined.js";
-import { html as d } from "../../node_modules/lit-html/static.js";
+import { unsafeCSS as d } from "lit";
+import { property as s } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { html as f } from "lit/static-html.js";
 import { DdsElement as n } from "../../internal/dds-hu-element.js";
-import f from "./_styles/card-image.scss.js";
-import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var y = Object.defineProperty, o = (h, i, a, c) => {
-  for (var t = void 0, p = h.length - 1, l; p >= 0; p--)
-    (l = h[p]) && (t = l(i, a, t) || t);
-  return t && y(i, a, t), t;
+import u from "./_styles/card-image.scss.js";
+var y = Object.defineProperty, o = (l, i, p, c) => {
+  for (var t = void 0, h = l.length - 1, a; h >= 0; h--)
+    (a = l[h]) && (t = a(i, p, t) || t);
+  return t && y(i, p, t), t;
 };
-const e = class e extends n {
+const r = class r extends n {
   render() {
     var i;
-    return d`<slot
+    return f`<slot
       ><img
         part="base"
         class="card-image"
@@ -31,21 +28,21 @@ const e = class e extends n {
     /></slot>`;
   }
 };
-e.tagName = "dap-ds-card-image", e.styles = u(f);
-let r = e;
+r.tagName = "dap-ds-card-image", r.styles = d(u);
+let e = r;
 o([
   s()
-], r.prototype, "src");
+], e.prototype, "src");
 o([
   s()
-], r.prototype, "alt");
+], e.prototype, "alt");
 o([
   s({ type: Number })
-], r.prototype, "width");
+], e.prototype, "width");
 o([
   s({ type: Number })
-], r.prototype, "height");
+], e.prototype, "height");
 export {
-  r as default
+  e as default
 };
 //# sourceMappingURL=card-image.component.js.map

package/dist/components/card/card-image.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-image.component.js","sources":["../../../src/components/card/card-image.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './_styles/card-image.scss?inline'\n\n/**\n * `dap-ds-card-image`\n * @summary A card image is a container for images in a card.\n * @element dap-ds-card-image\n * @title - Card image\n * @group card\n *\n * @slot - The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered.\n *\n * @csspart base - The main card image container.\n *\n * @cssproperty --dds-card-image-width - The width of the image. (default: 100%)\n * @cssproperty --dds-card-image-height - The height of the image. (default: auto)\n * @cssproperty --dds-card-image-object-fit - How the image fits within its container. (default: cover)\n * @cssproperty --dds-card-image-background-position - The background position of the image. (default: center)\n * @cssproperty --dds-card-image-background-size - How the background image is sized. (default: cover)\n * @cssproperty --dds-card-image-background-repeat - How the background image repeats. (default: no-repeat)\n */\nexport default class DapDSCardImage extends DdsElement {\n  static tagName = 'dap-ds-card-image'\n\n  /** The source of the image.*/\n  @property() src: string\n  /** The alt text of the image.*/\n  @property() alt: string\n  /** The width of the image.*/\n  @property({ type: Number }) width: number\n  /** The height of the image.*/\n  @property({ type: Number }) height: number\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`<slot\n      ><img\n        part=\"base\"\n        class=\"card-image\"\n        style=${[\n          this.width != null ? `width: ${this.width}px` : '',\n          this.height != null ? `height: ${this.height}px` : '',\n        ]\n          .filter(Boolean)\n          .join('; ')}\n        aria-hidden=${ifDefined(\n          (this.ariaHidden as 'true' | 'false') ?? 'true',\n        )}\n        alt=${this.alt}\n        src=${this.src}\n    /></slot>`\n  }\n}\n"],"names":["_DapDSCardImage","DdsElement","html","ifDefined","_a","unsafeCSS","styles","DapDSCardImage","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAW;AAAA,EAcrD,SAAS;;AACA,WAAAC;AAAAA;AAAAA;AAAAA;AAAAA,gBAIK;AAAA,MACN,KAAK,SAAS,OAAO,UAAU,KAAK,KAAK,OAAO;AAAA,MAChD,KAAK,UAAU,OAAO,WAAW,KAAK,MAAM,OAAO;AAAA,MAElD,OAAO,OAAO,EACd,KAAK,IAAI,CAAC;AAAA,sBACCC;AAAAA,OACXC,IAAA,KAAK,eAAL,OAAAA,IAAwC;AAAA,IAC1C,CAAA;AAAA,cACK,KAAK,GAAG;AAAA,cACR,KAAK,GAAG;AAAA;AAAA,EAAA;AAGtB;AA/BEJ,EAAO,UAAU,qBAWDA,EAAA,SAASK,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBP;AAIcQ,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,KAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,KAAA;AAEgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GARPF,EAQS,WAAA,OAAA;AAEAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPF,EAUS,WAAA,QAAA;"}
+{"version":3,"file":"card-image.component.js","sources":["../../../src/components/card/card-image.component.ts"],"sourcesContent":["import { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\n\nimport styles from './_styles/card-image.scss?inline'\n\n/**\n * `dap-ds-card-image`\n * @summary A card image is a container for images in a card.\n * @element dap-ds-card-image\n * @title - Card image\n * @group card\n *\n * @slot - The default slot for the image. The slot can accept any element, for example a video. If nothing is added to the slot, the image will be rendered.\n *\n * @csspart base - The main card image container.\n *\n * @cssproperty --dds-card-image-width - The width of the image. (default: 100%)\n * @cssproperty --dds-card-image-height - The height of the image. (default: auto)\n * @cssproperty --dds-card-image-object-fit - How the image fits within its container. (default: cover)\n * @cssproperty --dds-card-image-background-position - The background position of the image. (default: center)\n * @cssproperty --dds-card-image-background-size - How the background image is sized. (default: cover)\n * @cssproperty --dds-card-image-background-repeat - How the background image repeats. (default: no-repeat)\n */\nexport default class DapDSCardImage extends DdsElement {\n  static tagName = 'dap-ds-card-image'\n\n  /** The source of the image.*/\n  @property() src: string\n  /** The alt text of the image.*/\n  @property() alt: string\n  /** The width of the image.*/\n  @property({ type: Number }) width: number\n  /** The height of the image.*/\n  @property({ type: Number }) height: number\n\n  static readonly styles = unsafeCSS(styles)\n\n  render() {\n    return html`<slot\n      ><img\n        part=\"base\"\n        class=\"card-image\"\n        style=${[\n          this.width != null ? `width: ${this.width}px` : '',\n          this.height != null ? `height: ${this.height}px` : '',\n        ]\n          .filter(Boolean)\n          .join('; ')}\n        aria-hidden=${ifDefined(\n          (this.ariaHidden as 'true' | 'false') ?? 'true',\n        )}\n        alt=${this.alt}\n        src=${this.src}\n    /></slot>`\n  }\n}\n"],"names":["_DapDSCardImage","DdsElement","html","ifDefined","_a","unsafeCSS","styles","DapDSCardImage","__decorateClass","property"],"mappings":";;;;;;;;;;;AA2BA,MAAqBA,IAArB,MAAqBA,UAAuBC,EAAW;AAAA,EAcrD,SAAS;;AACA,WAAAC;AAAA;AAAA;AAAA;AAAA,gBAIK;AAAA,MACN,KAAK,SAAS,OAAO,UAAU,KAAK,KAAK,OAAO;AAAA,MAChD,KAAK,UAAU,OAAO,WAAW,KAAK,MAAM,OAAO;AAAA,MAElD,OAAO,OAAO,EACd,KAAK,IAAI,CAAC;AAAA,sBACCC;AAAA,OACXC,IAAA,KAAK,eAAL,OAAAA,IAAwC;AAAA,IAC1C,CAAA;AAAA,cACK,KAAK,GAAG;AAAA,cACR,KAAK,GAAG;AAAA;AAAA,EAAA;AAGtB;AA/BEJ,EAAO,UAAU,qBAWDA,EAAA,SAASK,EAAUC,CAAM;AAZ3C,IAAqBC,IAArBP;AAIcQ,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,KAAA;AAEAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GANSF,EAMP,WAAA,KAAA;AAEgBC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GARPF,EAQS,WAAA,OAAA;AAEAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAVPF,EAUS,WAAA,QAAA;"}

package/dist/components/card/card-subtitle.component.js

@@ -1,39 +1,36 @@
-import { clsx as m } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as f } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { unsafeStatic as n, html as c } from "../../node_modules/lit-html/static.js";
-import { DdsElement as d } from "../../internal/dds-hu-element.js";
-import { SizedMixin as l } from "../../internal/mixin/sizedMixin.js";
-import h from "./_styles/card-subtitle.scss.js";
-import { unsafeCSS as u } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, $ = (i, o, a, g) => {
-  for (var s = void 0, r = i.length - 1, p; r >= 0; r--)
-    (p = i[r]) && (s = p(o, a, s) || s);
-  return s && v(o, a, s), s;
+import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m } from "lit";
+import { property as c } from "lit/decorators.js";
+import { unsafeStatic as p, html as d } from "lit/static-html.js";
+import { DdsElement as l } from "../../internal/dds-hu-element.js";
+import { SizedMixin as h } from "../../internal/mixin/sizedMixin.js";
+import u from "./_styles/card-subtitle.scss.js";
+var v = Object.defineProperty, $ = (i, o, n, g) => {
+  for (var t = void 0, r = i.length - 1, a; r >= 0; r--)
+    (a = i[r]) && (t = a(o, n, t) || t);
+  return t && v(o, n, t), t;
 };
-const t = class t extends l(d) {
+const s = class s extends h(l) {
   constructor() {
     super(), this.renderAs = "span", this.spacing = "top", this.parentSized = "true";
   }
   render() {
-    return c`
-      <${n(this.renderAs)} part="base" class=${m(
+    return d`
+      <${p(this.renderAs)} part="base" class=${f(
       "card-subtitle",
       `card-subtitle--${this.effectiveSize}`,
       `card-subtitle-spacing--${this.spacing}
       `
     )}>
         <slot></slot>
-      </${n(this.renderAs)}>
+      </${p(this.renderAs)}>
     `;
   }
 };
-t.tagName = "dap-ds-card-subtitle", t.styles = u(h);
-let e = t;
+s.tagName = "dap-ds-card-subtitle", s.styles = m(u);
+let e = s;
 $([
-  f()
+  c()
 ], e.prototype, "renderAs");
 export {
   e as default

package/dist/components/card/card-subtitle.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-subtitle.component.js","sources":["../../../src/components/card/card-subtitle.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-subtitle.scss?inline'\n\n/**\n * `dap-ds-card-subtitle`\n * @summary Subtitle of the card\n * @element dap-ds-card-subtitle\n * @title - Card subtitle\n * @group card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the subtitle.\n *\n * @csspart base - The subtitle container.\n *\n * @cssproperty --dds-card-subtitle-color - The color of the subtitle text. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-card-subtitle-font-size - The font size of the subtitle. (default: var(--dds-font-xs))\n * @cssproperty --dds-card-subtitle-font-weight - The font weight of the subtitle. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-card-subtitle-line-height - The line height of the subtitle. (default: var(--dds-font-line-height-large))\n *\n * @cssproperty --dds-card-subtitle-padding-sm - The padding for small size. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-padding-md - The padding for medium size. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-padding-lg - The padding for large size. (default: 0 var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-margin-sm - The base margin for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-margin-md - The base margin for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-margin-lg - The base margin for large size. (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-spacing-top-sm - The top spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-top-md - The top spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-top-lg - The top spacing for large size. (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-spacing-bottom-sm - The bottom spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-bottom-md - The bottom spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-bottom-lg - The bottom spacing for large size. (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-spacing-both-sm - The both (top and bottom) spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-both-md - The both (top and bottom) spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-both-lg - The both (top and bottom) spacing for large size. (default: var(--dds-spacing-600))\n */\nexport default class DapDSCardSubtitle extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-subtitle'\n\n  /** The base rendered root tag of the card subtitle. */\n  @property() renderAs = 'span'\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'top'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.renderAs)} part=\"base\" class=${clsx(\n        'card-subtitle',\n        `card-subtitle--${this.effectiveSize}`,\n        `card-subtitle-spacing--${this.spacing}\n      `,\n      )}>\n        <slot></slot>\n      </${unsafeStatic(this.renderAs)}>\n    `\n  }\n}\n"],"names":["_DapDSCardSubtitle","SizedMixin","DdsElement","html","unsafeStatic","clsx","unsafeCSS","styles","DapDSCardSubtitle","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAkDqB,MAAAA,IAAA,MAAAA,UAA0BC,EAAWC,CAAU,EAAE;AAAA,EAOpE,cAAc;AACN,UAAA,GAJe,KAAA,WAAA,QAKrB,KAAK,UAAU,OACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAAA,SACFC,EAAa,KAAK,QAAQ,CAAC,sBAAsBC;AAAA,MAClD;AAAA,MACA,kBAAkB,KAAK,aAAa;AAAA,MACpC,0BAA0B,KAAK,OAAO;AAAA;AAAA,IAAA,CAEvC;AAAA;AAAA,UAEGD,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,EAAA;AAGrC;AAxBEJ,EAAO,UAAU,wBAIDA,EAAA,SAASM,EAAUC,CAAM;AALtB,IAAAC,IAAAR;AAIPS,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,UAAA;"}
+{"version":3,"file":"card-subtitle.component.js","sources":["../../../src/components/card/card-subtitle.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-subtitle.scss?inline'\n\n/**\n * `dap-ds-card-subtitle`\n * @summary Subtitle of the card\n * @element dap-ds-card-subtitle\n * @title - Card subtitle\n * @group card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card subtitle. Default is `sm`.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card subtitle. This adds a margin to the card subtitle. Default is `top`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the subtitle.\n *\n * @csspart base - The subtitle container.\n *\n * @cssproperty --dds-card-subtitle-color - The color of the subtitle text. (default: var(--dds-text-neutral-subtle))\n * @cssproperty --dds-card-subtitle-font-size - The font size of the subtitle. (default: var(--dds-font-xs))\n * @cssproperty --dds-card-subtitle-font-weight - The font weight of the subtitle. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-card-subtitle-line-height - The line height of the subtitle. (default: var(--dds-font-line-height-large))\n *\n * @cssproperty --dds-card-subtitle-padding-sm - The padding for small size. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-padding-md - The padding for medium size. (default: 0 var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-padding-lg - The padding for large size. (default: 0 var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-margin-sm - The base margin for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-margin-md - The base margin for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-margin-lg - The base margin for large size. (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-spacing-top-sm - The top spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-top-md - The top spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-top-lg - The top spacing for large size. (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-spacing-bottom-sm - The bottom spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-bottom-md - The bottom spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-bottom-lg - The bottom spacing for large size. (default: var(--dds-spacing-600))\n *\n * @cssproperty --dds-card-subtitle-spacing-both-sm - The both (top and bottom) spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-both-md - The both (top and bottom) spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-subtitle-spacing-both-lg - The both (top and bottom) spacing for large size. (default: var(--dds-spacing-600))\n */\nexport default class DapDSCardSubtitle extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-subtitle'\n\n  /** The base rendered root tag of the card subtitle. */\n  @property() renderAs = 'span'\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'top'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.renderAs)} part=\"base\" class=${clsx(\n        'card-subtitle',\n        `card-subtitle--${this.effectiveSize}`,\n        `card-subtitle-spacing--${this.spacing}\n      `,\n      )}>\n        <slot></slot>\n      </${unsafeStatic(this.renderAs)}>\n    `\n  }\n}\n"],"names":["_DapDSCardSubtitle","SizedMixin","DdsElement","html","unsafeStatic","clsx","unsafeCSS","styles","DapDSCardSubtitle","__decorateClass","property"],"mappings":";;;;;;;;;;;;AAkDqB,MAAAA,IAAA,MAAAA,UAA0BC,EAAWC,CAAU,EAAE;AAAA,EAOpE,cAAc;AACN,UAAA,GAJe,KAAA,WAAA,QAKrB,KAAK,UAAU,OACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAA,SACFC,EAAa,KAAK,QAAQ,CAAC,sBAAsBC;AAAA,MAClD;AAAA,MACA,kBAAkB,KAAK,aAAa;AAAA,MACpC,0BAA0B,KAAK,OAAO;AAAA;AAAA,IAAA,CAEvC;AAAA;AAAA,UAEGD,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,EAAA;AAGrC;AAxBEJ,EAAO,UAAU,wBAIDA,EAAA,SAASM,EAAUC,CAAM;AALtB,IAAAC,IAAAR;AAIPS,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,UAAA;"}

package/dist/components/card/card-title.component.js

@@ -1,25 +1,22 @@
-import { clsx as c } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import "../../node_modules/lit-html/lit-html.js";
-import "../../node_modules/lit-element/lit-element.js";
-import { property as d } from "../../node_modules/@lit/reactive-element/decorators/property.js";
-import { unsafeStatic as p, html as f } from "../../node_modules/lit-html/static.js";
-import { DdsElement as l } from "../../internal/dds-hu-element.js";
-import { SizedMixin as h } from "../../internal/mixin/sizedMixin.js";
-import u from "./_styles/card-title.scss.js";
-import { unsafeCSS as g } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var v = Object.defineProperty, m = (i, o, a, y) => {
-  for (var t = void 0, e = i.length - 1, n; e >= 0; e--)
-    (n = i[e]) && (t = n(o, a, t) || t);
-  return t && v(o, a, t), t;
+import { clsx as f } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m } from "lit";
+import { property as d } from "lit/decorators.js";
+import { unsafeStatic as p, html as l } from "lit/static-html.js";
+import { DdsElement as h } from "../../internal/dds-hu-element.js";
+import { SizedMixin as u } from "../../internal/mixin/sizedMixin.js";
+import g from "./_styles/card-title.scss.js";
+var v = Object.defineProperty, c = (i, o, n, y) => {
+  for (var t = void 0, s = i.length - 1, a; s >= 0; s--)
+    (a = i[s]) && (t = a(o, n, t) || t);
+  return t && v(o, n, t), t;
 };
-const s = class s extends h(l) {
+const e = class e extends u(h) {
   constructor() {
     super(), this.renderAs = "span", this.spacing = "top", this.parentSized = "true";
   }
   render() {
-    return f`
-      <${p(this.renderAs)} part="base" class=${c(
+    return l`
+      <${p(this.renderAs)} part="base" class=${f(
       "card-title",
       `card-title--${this.effectiveSize}`,
       `card-title-spacing--${this.spacing}`,
@@ -32,12 +29,12 @@ const s = class s extends h(l) {
     `;
   }
 };
-s.tagName = "dap-ds-card-title", s.styles = g(u);
-let r = s;
-m([
+e.tagName = "dap-ds-card-title", e.styles = m(g);
+let r = e;
+c([
   d()
 ], r.prototype, "renderAs");
-m([
+c([
   d({ type: Boolean })
 ], r.prototype, "noPadding");
 export {

package/dist/components/card/card-title.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"card-title.component.js","sources":["../../../src/components/card/card-title.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-title.scss?inline'\n\n/**\n * `dap-ds-card-title`\n * @summary Title of the card\n * @element dap-ds-card-title\n * @title - Card title\n * @group card\n *\n * @property {'sm' |'md' | 'lg'} size - The size of the card title. Default is `sm`.\n * @property {boolean} noPadding - Whether the card title should have no padding.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card title. This adds a margin to the card title. Default is `top`.\n *\n * @slot - The content of the title.\n *\n * @csspart base - The main card title container.\n *\n * @cssproperty --dds-card-title-color - The text color of the card title. (default: var(--dds-color-text-primary))\n * @cssproperty --dds-card-title-font-weight - The font weight of the card title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-card-title-line-height - The line height of the card title. (default: var(--dds-font-line-height-large))\n * @cssproperty --dds-card-title-margin-bottom - The bottom margin of the card title. (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-card-title-sm-padding-x - The horizontal padding for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-sm-padding-bottom - The bottom padding for small size. (default: var(--dds-spacing-100))\n * @cssproperty --dds-card-title-sm-spacing-top - The top spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-sm-spacing-bottom - The bottom spacing for small size. (default: var(--dds-spacing-400))\n *\n * @cssproperty --dds-card-title-md-padding-x - The horizontal padding for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-md-padding-bottom - The bottom padding for medium size. (default: var(--dds-spacing-100))\n * @cssproperty --dds-card-title-md-spacing-top - The top spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-md-spacing-bottom - The bottom spacing for medium size. (default: var(--dds-spacing-400))\n *\n * @cssproperty --dds-card-title-lg-padding-x - The horizontal padding for large size. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-title-lg-padding-bottom - The bottom padding for large size. (default: var(--dds-spacing-100))\n * @cssproperty --dds-card-title-lg-spacing-top - The top spacing for large size. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-title-lg-spacing-bottom - The bottom spacing for large size. (default: var(--dds-spacing-600))\n */\nexport default class DapDSCardTitle extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-title'\n\n  /** The base rendered root tag of the card title. */\n  @property() renderAs = 'span'\n  /** Whether the card title should have no padding. */\n  @property({ type: Boolean }) noPadding: boolean\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'top'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.renderAs)} part=\"base\" class=${clsx(\n        'card-title',\n        `card-title--${this.effectiveSize}`,\n        `card-title-spacing--${this.spacing}`,\n        {\n          'card-title--no-padding': this.noPadding,\n        },\n      )}>\n        <slot></slot>\n      </${unsafeStatic(this.renderAs)}>\n    `\n  }\n}\n"],"names":["_DapDSCardTitle","SizedMixin","DdsElement","html","unsafeStatic","clsx","unsafeCSS","styles","DapDSCardTitle","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AA6CqB,MAAAA,IAAA,MAAAA,UAAuBC,EAAWC,CAAU,EAAE;AAAA,EAUjE,cAAc;AACN,UAAA,GAPe,KAAA,WAAA,QAQrB,KAAK,UAAU,OACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAAA,SACFC,EAAa,KAAK,QAAQ,CAAC,sBAAsBC;AAAA,MAClD;AAAA,MACA,eAAe,KAAK,aAAa;AAAA,MACjC,uBAAuB,KAAK,OAAO;AAAA,MACnC;AAAA,QACE,0BAA0B,KAAK;AAAA,MAAA;AAAA,IACjC,CACD;AAAA;AAAA,UAEGD,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,EAAA;AAGrC;AA7BEJ,EAAO,UAAU,qBAODA,EAAA,SAASM,EAAUC,CAAM;AARtB,IAAAC,IAAAR;AAIPS,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,UAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GANRF,EAMU,WAAA,WAAA;"}
+{"version":3,"file":"card-title.component.js","sources":["../../../src/components/card/card-title.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\n\nimport styles from './_styles/card-title.scss?inline'\n\n/**\n * `dap-ds-card-title`\n * @summary Title of the card\n * @element dap-ds-card-title\n * @title - Card title\n * @group card\n *\n * @property {'sm' |'md' | 'lg'} size - The size of the card title. Default is `sm`.\n * @property {boolean} noPadding - Whether the card title should have no padding.\n * @property {'top' | 'bottom' | 'both' | 'none'} spacing - The spacing of the card title. This adds a margin to the card title. Default is `top`.\n *\n * @slot - The content of the title.\n *\n * @csspart base - The main card title container.\n *\n * @cssproperty --dds-card-title-color - The text color of the card title. (default: var(--dds-color-text-primary))\n * @cssproperty --dds-card-title-font-weight - The font weight of the card title. (default: var(--dds-font-weight-bold))\n * @cssproperty --dds-card-title-line-height - The line height of the card title. (default: var(--dds-font-line-height-large))\n * @cssproperty --dds-card-title-margin-bottom - The bottom margin of the card title. (default: var(--dds-spacing-100))\n *\n * @cssproperty --dds-card-title-sm-padding-x - The horizontal padding for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-sm-padding-bottom - The bottom padding for small size. (default: var(--dds-spacing-100))\n * @cssproperty --dds-card-title-sm-spacing-top - The top spacing for small size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-sm-spacing-bottom - The bottom spacing for small size. (default: var(--dds-spacing-400))\n *\n * @cssproperty --dds-card-title-md-padding-x - The horizontal padding for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-md-padding-bottom - The bottom padding for medium size. (default: var(--dds-spacing-100))\n * @cssproperty --dds-card-title-md-spacing-top - The top spacing for medium size. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-title-md-spacing-bottom - The bottom spacing for medium size. (default: var(--dds-spacing-400))\n *\n * @cssproperty --dds-card-title-lg-padding-x - The horizontal padding for large size. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-title-lg-padding-bottom - The bottom padding for large size. (default: var(--dds-spacing-100))\n * @cssproperty --dds-card-title-lg-spacing-top - The top spacing for large size. (default: var(--dds-spacing-600))\n * @cssproperty --dds-card-title-lg-spacing-bottom - The bottom spacing for large size. (default: var(--dds-spacing-600))\n */\nexport default class DapDSCardTitle extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card-title'\n\n  /** The base rendered root tag of the card title. */\n  @property() renderAs = 'span'\n  /** Whether the card title should have no padding. */\n  @property({ type: Boolean }) noPadding: boolean\n\n  static readonly styles = unsafeCSS(styles)\n\n  constructor() {\n    super()\n    this.spacing = 'top'\n    this.parentSized = 'true'\n  }\n\n  render() {\n    return html`\n      <${unsafeStatic(this.renderAs)} part=\"base\" class=${clsx(\n        'card-title',\n        `card-title--${this.effectiveSize}`,\n        `card-title-spacing--${this.spacing}`,\n        {\n          'card-title--no-padding': this.noPadding,\n        },\n      )}>\n        <slot></slot>\n      </${unsafeStatic(this.renderAs)}>\n    `\n  }\n}\n"],"names":["_DapDSCardTitle","SizedMixin","DdsElement","html","unsafeStatic","clsx","unsafeCSS","styles","DapDSCardTitle","__decorateClass","property"],"mappings":";;;;;;;;;;;;AA6CqB,MAAAA,IAAA,MAAAA,UAAuBC,EAAWC,CAAU,EAAE;AAAA,EAUjE,cAAc;AACN,UAAA,GAPe,KAAA,WAAA,QAQrB,KAAK,UAAU,OACf,KAAK,cAAc;AAAA,EAAA;AAAA,EAGrB,SAAS;AACA,WAAAC;AAAA,SACFC,EAAa,KAAK,QAAQ,CAAC,sBAAsBC;AAAA,MAClD;AAAA,MACA,eAAe,KAAK,aAAa;AAAA,MACjC,uBAAuB,KAAK,OAAO;AAAA,MACnC;AAAA,QACE,0BAA0B,KAAK;AAAA,MAAA;AAAA,IACjC,CACD;AAAA;AAAA,UAEGD,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,EAAA;AAGrC;AA7BEJ,EAAO,UAAU,qBAODA,EAAA,SAASM,EAAUC,CAAM;AARtB,IAAAC,IAAAR;AAIPS,EAAA;AAAA,EAAXC,EAAS;AAAA,GAJSF,EAIP,WAAA,UAAA;AAEiBC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GANRF,EAMU,WAAA,WAAA;"}

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

@@ -16,6 +16,7 @@ declare const DapDSCard_base: typeof DdsElement & {
  * @slot - The content of the card.
  *
  * @csspart base - The main card container.
+ * @csspart high-contrast - The high contrast indicator of the card.
  *
  * @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))
  * @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))

package/dist/components/card/card.component.js

@@ -1,35 +1,32 @@
-import { clsx as i } from "../../node_modules/clsx/dist/clsx.js";
-import "../../node_modules/@lit/reactive-element/reactive-element.js";
-import { nothing as g } 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 { ifDefined as f } from "../../node_modules/lit-html/directives/if-defined.js";
-import { unsafeStatic as m, html as n } from "../../node_modules/lit-html/static.js";
-import { DdsElement as u } from "../../internal/dds-hu-element.js";
-import { SizedMixin as v } from "../../internal/mixin/sizedMixin.js";
+import { clsx as a } from "../../node_modules/clsx/dist/clsx.js";
+import { unsafeCSS as m, nothing as u } from "lit";
+import { property as r } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { unsafeStatic as g, html as n } from "lit/static-html.js";
+import { DdsElement as v } from "../../internal/dds-hu-element.js";
+import { SizedMixin as y } from "../../internal/mixin/sizedMixin.js";
 import "../../localization/localization.js";
-import y from "./_styles/card.scss.js";
-import { t as b } from "../../node_modules/i18next/dist/esm/i18next.js";
-import { unsafeCSS as _ } from "../../node_modules/@lit/reactive-element/css-tag.js";
-var $ = Object.defineProperty, e = (c, o, a, h) => {
-  for (var s = void 0, p = c.length - 1, l; p >= 0; p--)
-    (l = c[p]) && (s = l(o, a, s) || s);
-  return s && $(o, a, s), s;
+import b from "./_styles/card.scss.js";
+import { t as _ } from "../../node_modules/i18next/dist/esm/i18next.js";
+var $ = Object.defineProperty, e = (p, o, i, h) => {
+  for (var s = void 0, c = p.length - 1, l; c >= 0; c--)
+    (l = p[c]) && (s = l(o, i, s) || s);
+  return s && $(o, i, s), s;
 };
-const d = class d extends v(u) {
+const d = class d extends y(v) {
   constructor() {
     super(...arguments), this.interactive = !1, this.renderAs = "a", this.disabled = !1, this.noBorder = !1, this.noPadding = !1, this.target = "_self", this.rel = "noreferrer noopener";
   }
   focus(o) {
-    var a, h;
-    this.interactive && ((h = (a = this.shadowRoot) == null ? void 0 : a.querySelector(".card")) == null || h.focus(o));
+    var i, h;
+    this.interactive && ((h = (i = this.shadowRoot) == null ? void 0 : i.querySelector(".card")) == null || h.focus(o));
   }
   render() {
     var o;
     return n`
-      ${this.interactive ? n`<${m(this.renderAs)}
+      ${this.interactive ? n`<${g(this.renderAs)}
             part="base"
-            class=${i("card", {
+            class=${a("card", {
       "card--interactive": !0,
       "card--disabled": this.disabled,
       "card--no-border": this.noBorder,
@@ -42,7 +39,7 @@ const d = class d extends v(u) {
             rel=${this.target}>
             <div
               part="high-contrast"
-              class=${i({
+              class=${a({
       card__highcontrast: !0,
       "card__highcontrast--hover": !0,
       "card__highcontrast--noborder": !this.noBorder
@@ -50,18 +47,18 @@ const d = class d extends v(u) {
 
             <slot></slot>
             ${this.target === "_blank" ? n`<span class="sr-only">
-                    ${(o = this.targetBlankText) != null ? o : b("opensInNewTab")}</span
-                  >` : g}
-          </${m(this.renderAs)}>` : n`<div
+                    ${(o = this.targetBlankText) != null ? o : _("opensInNewTab")}</span
+                  >` : u}
+          </${g(this.renderAs)}>` : n`<div
             part="base"
-            class="${i("card", {
+            class="${a("card", {
       [`card--${this.effectiveSize}`]: !0,
       "card--disabled": this.disabled,
       "card--no-border": this.noBorder
     })}">
             <div
               part="high-contrast"
-              class=${i({
+              class=${a({
       card__highcontrast: !0,
       "card__highcontrast--hover": !0,
       "card__highcontrast--noborder": !this.noBorder
@@ -71,7 +68,7 @@ const d = class d extends v(u) {
     `;
   }
 };
-d.tagName = "dap-ds-card", d.styles = _(y);
+d.tagName = "dap-ds-card", d.styles = m(b);
 let t = d;
 e([
   r({ type: Boolean })

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

@@ -1 +1 @@
-{"version":3,"file":"card.component.js","sources":["../../../src/components/card/card.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { LinkTarget } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport styles from './_styles/card.scss?inline'\n\n/**\n * `dap-ds-card`\n * @summary A card is a container for content, actions, and images in a consistent format.\n * @element dap-ds-card\n * @title - Card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card.\n *\n * @csspart base - The main card container.\n *\n * @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))\n * @cssproperty --dds-card-border-width - The border width of the card. (default: var(--dds-border-width-base))\n * @cssproperty --dds-card-border-color - The border color of the card. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-card-background - The background color of the card. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-card-hover-border-color - The border color when hovering over the card. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-card-active-border-color - The border color when the card is active. (default: var(--dds-border-brand-medium))\n * @cssproperty --dds-card-shadow - The box shadow of the card. (default: none)\n * @cssproperty --dds-card-hover-shadow - The box shadow when hovering over the card. (default: none)\n * @cssproperty --dds-card-transition-duration - The duration of the card's transitions. (default: var(--dds-transition-medium))\n * @cssproperty --dds-card-transition-timing - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out))\n */\nexport default class DapDSCard extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card'\n\n  /** Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element. */\n  @property({ type: Boolean }) interactive = false\n  /**\n   * The render as type of the card, only applicable when interactive.\n   * @type {'a' | 'button'}\n   */\n  @property({ type: String }) renderAs: 'a' | 'button' = 'a'\n  /** Whether the card is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n  /** Removes the border around the card */\n  @property({ type: Boolean }) noBorder = false\n  /** Removes the padding around the card */\n  @property({ type: Boolean }) noPadding = false\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  /** The link target of the card\n   * @type { '_blank' | '_self' | '_parent' | '_top' }\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The URL of the card. */\n  @property() href: string\n\n  /** The rel of the card link. */\n  @property() rel = 'noreferrer noopener'\n\n  static readonly styles = unsafeCSS(styles)\n\n  override focus(options?: FocusOptions) {\n    if (this.interactive) {\n      ;(this.shadowRoot?.querySelector('.card') as HTMLElement)?.focus(options)\n    }\n  }\n\n  render() {\n    return html`\n      ${this.interactive\n        ? html`<${unsafeStatic(this.renderAs)}\n            part=\"base\"\n            class=${clsx('card', {\n              'card--interactive': true,\n              'card--disabled': this.disabled,\n              'card--no-border': this.noBorder,\n              'card--no-padding': this.noPadding,\n              [`card--${this.effectiveSize}`]: true,\n            })}\n            aria-label=${ifDefined(this.ariaLabel) || ''}\n            target=${this.target}\n            href=${ifDefined(this.href)}\n            rel=${this.target}>\n            <div\n              part=\"high-contrast\"\n              class=${clsx({\n                'card__highcontrast': true,\n                'card__highcontrast--hover': true,\n                ['card__highcontrast--noborder']: !this.noBorder,\n              })}></div>\n\n            <slot></slot>\n            ${\n              this.target === '_blank'\n                ? html`<span class=\"sr-only\">\n                    ${this.targetBlankText ?? t('opensInNewTab')}</span\n                  >`\n                : nothing\n            }\n          </${unsafeStatic(this.renderAs)}>`\n        : html`<div\n            part=\"base\"\n            class=\"${clsx('card', {\n              [`card--${this.effectiveSize}`]: true,\n              'card--disabled': this.disabled,\n              'card--no-border': this.noBorder,\n            })}\">\n            <div\n              part=\"high-contrast\"\n              class=${clsx({\n                'card__highcontrast': true,\n                'card__highcontrast--hover': true,\n                ['card__highcontrast--noborder']: !this.noBorder,\n              })}></div>\n            <slot></slot>\n          </div>`}\n    `\n  }\n}\n"],"names":["_DapDSCard","SizedMixin","DdsElement","options","_b","_a","html","unsafeStatic","clsx","ifDefined","t","nothing","unsafeCSS","styles","DapDSCard","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;;;;AAsCqB,MAAAA,IAAA,MAAAA,UAAkBC,EAAWC,CAAU,EAAE;AAAA,EAA9D,cAAA;AAAA,UAAA,GAAA,SAAA,GAI6C,KAAA,cAAA,IAKY,KAAA,WAAA,KAEA,KAAA,WAAA,IAEf,KAAA,WAAA,IAEC,KAAA,YAAA,IAOR,KAAA,SAAA,SAMf,KAAA,MAAA;AAAA,EAAA;AAAA,EAIT,MAAMC,GAAwB;;AACrC,IAAI,KAAK,iBACLC,KAAAC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,aAA/B,QAAAD,EAAyD,MAAMD;AAAA,EACnE;AAAA,EAGF,SAAS;;AACA,WAAAG;AAAAA,QACH,KAAK,cACHA,KAAQC,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,oBAEzBC,EAAK,QAAQ;AAAA,MACnB,qBAAqB;AAAA,MACrB,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,CAAC,SAAS,KAAK,aAAa,EAAE,GAAG;AAAA,IAAA,CAClC,CAAC;AAAA,yBACWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,qBACnC,KAAK,MAAM;AAAA,mBACbA,EAAU,KAAK,IAAI,CAAC;AAAA,kBACrB,KAAK,MAAM;AAAA;AAAA;AAAA,sBAGPD,EAAK;AAAA,MACX,oBAAsB;AAAA,MACtB,6BAA6B;AAAA,MAC5B,gCAAiC,CAAC,KAAK;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA;AAAA,cAIF,KAAK,WAAW,WACZF;AAAAA,uBACID,IAAA,KAAK,oBAAL,OAAAA,IAAwBK,EAAE,eAAe,CAAC;AAAA,uBAE9CC,CACN;AAAA,cACEJ,EAAa,KAAK,QAAQ,CAAC,MAC/BD;AAAAA;AAAAA,qBAEWE,EAAK,QAAQ;AAAA,MACpB,CAAC,SAAS,KAAK,aAAa,EAAE,GAAG;AAAA,MACjC,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,sBAGQA,EAAK;AAAA,MACX,oBAAsB;AAAA,MACtB,6BAA6B;AAAA,MAC5B,gCAAiC,CAAC,KAAK;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA,iBAEC;AAAA;AAAA,EAAA;AAGjB;AAxFER,EAAO,UAAU,eA6BDA,EAAA,SAASY,EAAUC,CAAM;AA9BtB,IAAAC,IAAAd;AAIUe,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAJRF,EAIU,WAAA,aAAA;AAKDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GATPF,EASS,WAAA,UAAA;AAEgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAXvBF,EAWyB,WAAA,UAAA;AAEfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAbRF,EAaU,WAAA,UAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRF,EAeU,WAAA,WAAA;AAEDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAjBPF,EAiBS,WAAA,iBAAA;AAKhBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAtBSF,EAsBP,WAAA,QAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAzBSF,EAyBP,WAAA,MAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GA5BSF,EA4BP,WAAA,KAAA;"}
+{"version":3,"file":"card.component.js","sources":["../../../src/components/card/card.component.ts"],"sourcesContent":["import clsx from 'clsx'\nimport { nothing, unsafeCSS } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { html, unsafeStatic } from 'lit/static-html.js'\n\nimport { LinkTarget } from '@/common/types'\nimport { DdsElement } from '@/internal/dds-hu-element'\nimport { SizedMixin } from '@/internal/mixin/sizedMixin'\nimport { t } from '@/localization/localization'\n\nimport styles from './_styles/card.scss?inline'\n\n/**\n * `dap-ds-card`\n * @summary A card is a container for content, actions, and images in a consistent format.\n * @element dap-ds-card\n * @title - Card\n *\n * @property {'sm' | 'md' | 'lg'} size - The size of the card. Default is `sm`.\n * @property {string} sizeMap - Responsive size map (e.g. \"md:lg\").\n *\n * @slot - The content of the card.\n *\n * @csspart base - The main card container.\n * @csspart high-contrast - The high contrast indicator of the card.\n *\n * @cssproperty --dds-card-padding - The padding of the card. (default: var(--dds-spacing-400))\n * @cssproperty --dds-card-border-radius - The border radius of the card. (default: var(--dds-radius-large))\n * @cssproperty --dds-card-border-width - The border width of the card. (default: var(--dds-border-width-base))\n * @cssproperty --dds-card-border-color - The border color of the card. (default: var(--dds-border-neutral-divider))\n * @cssproperty --dds-card-background - The background color of the card. (default: var(--dds-background-neutral-base))\n * @cssproperty --dds-card-hover-border-color - The border color when hovering over the card. (default: var(--dds-border-brand-base))\n * @cssproperty --dds-card-active-border-color - The border color when the card is active. (default: var(--dds-border-brand-medium))\n * @cssproperty --dds-card-shadow - The box shadow of the card. (default: none)\n * @cssproperty --dds-card-hover-shadow - The box shadow when hovering over the card. (default: none)\n * @cssproperty --dds-card-transition-duration - The duration of the card's transitions. (default: var(--dds-transition-medium))\n * @cssproperty --dds-card-transition-timing - The timing function of the card's transitions. (default: var(--dds-easing-ease-in-out))\n */\nexport default class DapDSCard extends SizedMixin(DdsElement) {\n  static tagName = 'dap-ds-card'\n\n  /** Whether the card is interactive. Default is false. If true, the card will be rendered as an anchor element. */\n  @property({ type: Boolean }) interactive = false\n  /**\n   * The render as type of the card, only applicable when interactive.\n   * @type {'a' | 'button'}\n   */\n  @property({ type: String }) renderAs: 'a' | 'button' = 'a'\n  /** Whether the card is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false\n  /** Removes the border around the card */\n  @property({ type: Boolean }) noBorder = false\n  /** Removes the padding around the card */\n  @property({ type: Boolean }) noPadding = false\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  /** The link target of the card\n   * @type { '_blank' | '_self' | '_parent' | '_top' }\n   */\n  @property() target: LinkTarget = '_self'\n\n  /** The URL of the card. */\n  @property() href: string\n\n  /** The rel of the card link. */\n  @property() rel = 'noreferrer noopener'\n\n  static readonly styles = unsafeCSS(styles)\n\n  override focus(options?: FocusOptions) {\n    if (this.interactive) {\n      ;(this.shadowRoot?.querySelector('.card') as HTMLElement)?.focus(options)\n    }\n  }\n\n  render() {\n    return html`\n      ${this.interactive\n        ? html`<${unsafeStatic(this.renderAs)}\n            part=\"base\"\n            class=${clsx('card', {\n              'card--interactive': true,\n              'card--disabled': this.disabled,\n              'card--no-border': this.noBorder,\n              'card--no-padding': this.noPadding,\n              [`card--${this.effectiveSize}`]: true,\n            })}\n            aria-label=${ifDefined(this.ariaLabel) || ''}\n            target=${this.target}\n            href=${ifDefined(this.href)}\n            rel=${this.target}>\n            <div\n              part=\"high-contrast\"\n              class=${clsx({\n                'card__highcontrast': true,\n                'card__highcontrast--hover': true,\n                ['card__highcontrast--noborder']: !this.noBorder,\n              })}></div>\n\n            <slot></slot>\n            ${\n              this.target === '_blank'\n                ? html`<span class=\"sr-only\">\n                    ${this.targetBlankText ?? t('opensInNewTab')}</span\n                  >`\n                : nothing\n            }\n          </${unsafeStatic(this.renderAs)}>`\n        : html`<div\n            part=\"base\"\n            class=\"${clsx('card', {\n              [`card--${this.effectiveSize}`]: true,\n              'card--disabled': this.disabled,\n              'card--no-border': this.noBorder,\n            })}\">\n            <div\n              part=\"high-contrast\"\n              class=${clsx({\n                'card__highcontrast': true,\n                'card__highcontrast--hover': true,\n                ['card__highcontrast--noborder']: !this.noBorder,\n              })}></div>\n            <slot></slot>\n          </div>`}\n    `\n  }\n}\n"],"names":["_DapDSCard","SizedMixin","DdsElement","options","_b","_a","html","unsafeStatic","clsx","ifDefined","t","nothing","unsafeCSS","styles","DapDSCard","__decorateClass","property"],"mappings":";;;;;;;;;;;;;;;AAuCqB,MAAAA,IAAA,MAAAA,UAAkBC,EAAWC,CAAU,EAAE;AAAA,EAA9D,cAAA;AAAA,UAAA,GAAA,SAAA,GAI6C,KAAA,cAAA,IAKY,KAAA,WAAA,KAEA,KAAA,WAAA,IAEf,KAAA,WAAA,IAEC,KAAA,YAAA,IAOR,KAAA,SAAA,SAMf,KAAA,MAAA;AAAA,EAAA;AAAA,EAIT,MAAMC,GAAwB;;AACrC,IAAI,KAAK,iBACLC,KAAAC,IAAA,KAAK,eAAL,gBAAAA,EAAiB,cAAc,aAA/B,QAAAD,EAAyD,MAAMD;AAAA,EACnE;AAAA,EAGF,SAAS;;AACA,WAAAG;AAAA,QACH,KAAK,cACHA,KAAQC,EAAa,KAAK,QAAQ,CAAC;AAAA;AAAA,oBAEzBC,EAAK,QAAQ;AAAA,MACnB,qBAAqB;AAAA,MACrB,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,MACxB,oBAAoB,KAAK;AAAA,MACzB,CAAC,SAAS,KAAK,aAAa,EAAE,GAAG;AAAA,IAAA,CAClC,CAAC;AAAA,yBACWC,EAAU,KAAK,SAAS,KAAK,EAAE;AAAA,qBACnC,KAAK,MAAM;AAAA,mBACbA,EAAU,KAAK,IAAI,CAAC;AAAA,kBACrB,KAAK,MAAM;AAAA;AAAA;AAAA,sBAGPD,EAAK;AAAA,MACX,oBAAsB;AAAA,MACtB,6BAA6B;AAAA,MAC5B,gCAAiC,CAAC,KAAK;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA;AAAA,cAIF,KAAK,WAAW,WACZF;AAAA,uBACID,IAAA,KAAK,oBAAL,OAAAA,IAAwBK,EAAE,eAAe,CAAC;AAAA,uBAE9CC,CACN;AAAA,cACEJ,EAAa,KAAK,QAAQ,CAAC,MAC/BD;AAAA;AAAA,qBAEWE,EAAK,QAAQ;AAAA,MACpB,CAAC,SAAS,KAAK,aAAa,EAAE,GAAG;AAAA,MACjC,kBAAkB,KAAK;AAAA,MACvB,mBAAmB,KAAK;AAAA,IAAA,CACzB,CAAC;AAAA;AAAA;AAAA,sBAGQA,EAAK;AAAA,MACX,oBAAsB;AAAA,MACtB,6BAA6B;AAAA,MAC5B,gCAAiC,CAAC,KAAK;AAAA,IAAA,CACzC,CAAC;AAAA;AAAA,iBAEC;AAAA;AAAA,EAAA;AAGjB;AAxFER,EAAO,UAAU,eA6BDA,EAAA,SAASY,EAAUC,CAAM;AA9BtB,IAAAC,IAAAd;AAIUe,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAJRF,EAIU,WAAA,aAAA;AAKDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GATPF,EASS,WAAA,UAAA;AAEgBC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,GAAM,CAAA;AAAA,GAXvBF,EAWyB,WAAA,UAAA;AAEfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAbRF,EAaU,WAAA,UAAA;AAEAC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAS,CAAA;AAAA,GAfRF,EAeU,WAAA,WAAA;AAEDC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAQ,CAAA;AAAA,GAjBPF,EAiBS,WAAA,iBAAA;AAKhBC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAtBSF,EAsBP,WAAA,QAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GAzBSF,EAyBP,WAAA,MAAA;AAGAC,EAAA;AAAA,EAAXC,EAAS;AAAA,GA5BSF,EA4BP,WAAA,KAAA;"}

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

@@ -1,4 +1,4 @@
-const o = ':root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}*,*: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}}.choice{display:flex;flex-direction:column;cursor:pointer}.choice:focus-visible{outline:none}.choice--disabled,.choice--readonly{cursor:not-allowed}.choice.choice__label--right .choice__label-container{order:4}.choice.choice__label--right .input__control{margin-right:var(--dds-spacing-200);margin-left:0}.choice.choice__label--left{justify-content:space-between}.choice.choice__label--left .choice__label-container{order:-1}.choice.choice__label--left .input__control{margin-right:0;margin-left:var(--dds-spacing-200)}.choice>div{display:flex}.label{font-weight:400;line-height:150%}.choice__label-container{display:flex;flex-direction:column}.choice__label-container .label,.choice__label-container .description{margin:0}.choice__label-container dap-ds-tooltip::part(icon){order:2}.choice__label-container--disabled,.choice__label-container--readonly{cursor:default}.choice__label-container.choice__label--top .description{order:4}.choice__label-container.choice__label--top .label{order:1}.choice__label-container.choice__label--top dap-ds-tooltip::part(icon){margin-left:var(--dds-spacing-400)}.choice__label-container.choice__label--bottom .description{order:1}.choice__label-container.choice__label--bottom .label{order:4}.choice__label-container.choice__label--bottom dap-ds-tooltip::part(icon){margin-right:var(--dds-spacing-400)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200);--dds-checkbox-size: var(--dds-spacing-500);--dds-checkbox-border-width: var(--dds-border-width-large);--dds-checkbox-border-radius: var(--dds-radius-small);--dds-checkbox-border-color: var(--dds-border-neutral-base);--dds-checkbox-background-color: transparent;--dds-checkbox-icon-color: var(--dds-button-primary-icon-enabled);--dds-checkbox-hover-border-color: var(--dds-border-neutral-medium);--dds-checkbox-hover-background-color: var(--dds-background-neutral-medium);--dds-checkbox-active-border-color: var(--dds-border-neutral-strong);--dds-checkbox-active-background-color: var(--dds-background-neutral-strong);--dds-checkbox-checked-border-color: var( --dds-background-brand-base-inverted );--dds-checkbox-checked-background-color: var( --dds-background-brand-base-inverted );--dds-checkbox-checked-hover-border-color: var( --dds-background-brand-medium-inverted );--dds-checkbox-checked-hover-background-color: var( --dds-background-brand-medium-inverted );--dds-checkbox-checked-active-border-color: var( --dds-background-brand-strong-inverted );--dds-checkbox-checked-active-background-color: var( --dds-background-brand-strong-inverted );--dds-checkbox-invalid-border-color: var(--dds-border-negative-base);--dds-checkbox-invalid-background-color: var(--dds-background-negative-base);--dds-checkbox-invalid-hover-border-color: var(--dds-border-negative-medium);--dds-checkbox-invalid-hover-background-color: var( --dds-background-negative-medium );--dds-checkbox-invalid-active-border-color: var(--dds-border-negative-strong);--dds-checkbox-invalid-active-background-color: var( --dds-background-negative-strong );--dds-checkbox-disabled-border-color: var( --dds-button-primary-background-disabled );--dds-checkbox-disabled-background-color: var( --dds-button-primary-background-disabled );--dds-checkbox-disabled-icon-color: var(--dds-button-primary-icon-disabled);--dds-checkbox-readonly-border-color: var( --dds-button-primary-background-disabled );--dds-checkbox-readonly-background-color: var( --dds-button-primary-background-disabled );--dds-checkbox-readonly-icon-color: var(--dds-button-primary-icon-disabled)}.input__control-high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:var(--dds-checkbox-size);height:var(--dds-checkbox-size);border:var(--dds-checkbox-border-width) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-checkbox-border-radius)}.input__control-high-contrast:hover{border-width:var(--dds-checkbox-border-width)}.input__control-high-contrast:active{border-width:var(--dds-border-width-xlarge)}.input__control-high-contrast.input__control-high-contrast--sm,.input__control-high-contrast.input__control-high-contrast--md{top:-1px}.input__control-high-contrast.input__control-high-contrast--lg{top:-3px}.input__control-high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);cursor:not-allowed}.input__control-high-contrast.input__control-high-contrast--readonly{border-color:var(--dds-border-neutral-transparent-interactive);cursor:default}.input:not(.input--background):focus-visible~.input__control{outline-style:solid}.input__wrapper:has(.input.input--background:focus){transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);outline-style:solid}.input:focus-visible~.input__control{outline-style:solid}.input__wrapper{position:relative;border:var(--dds-border-width-base) solid transparent}.input__wrapper--border,.input__wrapper--background{padding:var(--dds-spacing-400);border-radius:var(--dds-radius-base)}.input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}.input__wrapper--border{border:var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)}.input__control{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;box-sizing:border-box;flex:0 0 auto;align-items:center;justify-content:center;width:var(--dds-checkbox-size);min-width:var(--dds-checkbox-size);height:var(--dds-checkbox-size);border-width:var(--dds-checkbox-border-width);border-style:solid;border-radius:var(--dds-checkbox-border-radius);border-color:var(--dds-checkbox-border-color);background-color:var(--dds-checkbox-background-color);fill:var(--dds-checkbox-icon-color);color:var(--dds-checkbox-icon-color)}.input__control.input__control--sm,.input__control.input__control--md{display:flex;top:1px;align-items:flex-start}.input__control.input__control--lg{display:flex;top:3px;align-items:flex-start}.input__control:hover{border-color:var(--dds-checkbox-hover-border-color);background-color:var(--dds-checkbox-hover-background-color)}.input__control:active{border-color:var(--dds-checkbox-active-border-color);background-color:var(--dds-checkbox-active-background-color)}.input__control:checked,.input__control:indeterminate,.input__control.input__control--checked,.input__control.input__control--indeterminate{border-color:var(--dds-checkbox-checked-border-color);background-color:var(--dds-checkbox-checked-background-color)}.input__control:checked:hover,.input__control:indeterminate:hover,.input__control.input__control--checked:hover,.input__control.input__control--indeterminate:hover{border-color:var(--dds-checkbox-checked-hover-border-color);background-color:var(--dds-checkbox-checked-hover-background-color)}.input__control:checked:active,.input__control:indeterminate:active,.input__control.input__control--checked:active,.input__control.input__control--indeterminate:active{border-color:var(--dds-checkbox-checked-active-border-color);background-color:var(--dds-checkbox-checked-active-background-color)}.input__control:checked .radio-button__icon,.input__control:indeterminate .radio-button__icon,.input__control.input__control--checked .radio-button__icon,.input__control.input__control--indeterminate .radio-button__icon{opacity:1}.input__control.dds-checkbox--invalid,.input__control[invalid],.input__control:invalid,.input__control.input__control--invalid{border-width:var(--dds-checkbox-border-width);border-color:var(--dds-checkbox-invalid-border-color);background-color:var(--dds-background-negative-base)}.input__control.dds-checkbox--invalid:hover,.input__control[invalid]:hover,.input__control:invalid:hover,.input__control.input__control--invalid:hover{border-color:var(--dds-checkbox-invalid-hover-border-color);background-color:var(--dds-background-negative-base)}.input__control.dds-checkbox--invalid:active,.input__control[invalid]:active,.input__control:invalid:active,.input__control.input__control--invalid:active{border-color:var(--dds-checkbox-invalid-active-border-color);background-color:var(--dds-background-negative-base)}.input__control:invalid:checked,.input__control:invalid:indeterminate,.input__control[invalid][checked],.input__control[invalid][indeterminate],.input__control:invalid[checked],.input__control:invalid[indeterminate],.input__control[invalid]:checked,.input__control[invalid]:indeterminate,.input__control.input__control--invalid.input__control--checked,.input__control.input__control--invalid.input__control--indeterminate{background-color:var(--dds-background-negative-base-inverted)}.input__control:invalid:checked:hover,.input__control:invalid:indeterminate:hover,.input__control[invalid][checked]:hover,.input__control[invalid][indeterminate]:hover,.input__control:invalid[checked]:hover,.input__control:invalid[indeterminate]:hover,.input__control[invalid]:checked:hover,.input__control[invalid]:indeterminate:hover,.input__control.input__control--invalid.input__control--checked:hover,.input__control.input__control--invalid.input__control--indeterminate:hover{border-color:var(--dds-checkbox-invalid-hover-border-color);background-color:var(--dds-background-negative-base-inverted)}.input__control:invalid:checked:active,.input__control:invalid:indeterminate:active,.input__control[invalid][checked]:active,.input__control[invalid][indeterminate]:active,.input__control:invalid[checked]:active,.input__control:invalid[indeterminate]:active,.input__control[invalid]:checked:active,.input__control[invalid]:indeterminate:active,.input__control.input__control--invalid.input__control--checked:active,.input__control.input__control--invalid.input__control--indeterminate:active{border-color:var(--dds-checkbox-invalid-active-border-color);background-color:var(--dds-background-negative-base-inverted)}.input__control[disabled],.input__control:disabled,.input__control.input__control--disabled{border-color:var(--dds-checkbox-disabled-border-color);background-color:var(--dds-checkbox-disabled-background-color);color:var(--dds-checkbox-disabled-icon-color);cursor:not-allowed}.input__control[disabled]:hover,.input__control:disabled:hover,.input__control.input__control--disabled:hover{border-color:var(--dds-checkbox-disabled-border-color);background-color:var(--dds-checkbox-disabled-background-color)}.input__control[disabled]:active,.input__control:disabled:active,.input__control.input__control--disabled:active{border-color:var(--dds-checkbox-disabled-border-color);background-color:var(--dds-checkbox-disabled-background-color)}.input__control[readonly],.input__control.input__control--readonly{border-color:var(--dds-checkbox-readonly-border-color);background-color:var(--dds-checkbox-readonly-background-color);color:var(--dds-checkbox-disabled-icon-color);cursor:not-allowed}.input__control[readonly]:hover,.input__control.input__control--readonly:hover,.input__control[readonly]:active,.input__control.input__control--readonly:active{border-color:var(--dds-checkbox-readonly-border-color);background-color:var(--dds-checkbox-readonly-background-color)}.input{position:absolute;margin:0;padding:0;opacity:0;pointer-events:none}.checkbox--checked .input__wrapper--background{border-color:var(--dds-background-brand-base-inverted)}.checkbox--disabled .input__wrapper--background{background-color:var(--dds-background-neutral-disabled-inverted)}.checkbox--readonly .input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}';
+const o = ':root{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}dap-ds-form-label .dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label--no-margin{margin-bottom:0}dap-ds-form-label .dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}dap-ds-form-label .dds-label--disabled{color:var(--dds-form-label-disabled-color)}dap-ds-form-label .dds-label--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label--sm{font-size:var(--dds-font-base)}dap-ds-form-label .dds-label--lg{font-size:var(--dds-font-lg)}dap-ds-form-label .dds-label--subtle{font-weight:var(--dds-font-weight-medium)}dap-ds-form-label .dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}dap-ds-form-label .dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}dap-ds-form-label .dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.label-container{display:flex;align-items:center;justify-content:space-between}.label--has-description{margin-bottom:var(--dds-spacing-200)}dap-ds-form-label+dap-ds-typography{display:block}.info-button{fill:var(--dds-button-subtle-icon-neutral-enabled);color:var(--dds-button-subtle-icon-neutral-enabled)}*,*: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}}.choice{display:flex;flex-direction:column;cursor:pointer}.choice:focus-visible{outline:none}.choice--disabled,.choice--readonly{cursor:not-allowed}.choice.choice__label--right .choice__label-container{order:4}.choice.choice__label--right .input__control{margin-right:var(--dds-spacing-200);margin-left:0}.choice.choice__label--left{justify-content:space-between}.choice.choice__label--left .choice__label-container{order:-1}.choice.choice__label--left .input__control{margin-right:0;margin-left:var(--dds-spacing-200)}.choice>div{display:flex}.label{font-weight:400;line-height:150%}.choice__label-container{display:flex;flex-direction:column}.choice__label-container .label,.choice__label-container .description{margin:0}.choice__label-container dap-ds-tooltip::part(icon){order:2}.choice__label-container--disabled,.choice__label-container--readonly{cursor:default}.choice__label-container.choice__label--top .description{order:4}.choice__label-container.choice__label--top .label{order:1}.choice__label-container.choice__label--top dap-ds-tooltip::part(icon){margin-left:var(--dds-spacing-400)}.choice__label-container.choice__label--bottom .description{order:1}.choice__label-container.choice__label--bottom .label{order:4}.choice__label-container.choice__label--bottom dap-ds-tooltip::part(icon){margin-right:var(--dds-spacing-400)}:root{--font-family: "Inter", sans-serif}:host{--dds-text-color: var(--dds-text-neutral-base);--dds-text-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-heading-color: var(--dds-text-neutral-strong);--dds-text-heading-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-description-color: var(--dds-text-neutral-subtle);--dds-text-description-color-inverted: var(--dds-text-neutral-on-inverted);--dds-text-font-family: var(--font-family);--dds-text-font-weight-medium: var(--dds-font-weight-medium);--dds-text-font-weight-bold: var(--dds-font-weight-bold);--dds-text-font-size-h1: var(--dds-font-7xl);--dds-text-font-size-h2: var(--dds-font-4xl);--dds-text-font-size-h3: var(--dds-font-2xl);--dds-text-font-size-h4: var(--dds-font-xl);--dds-text-font-size-h5: var(--dds-font-lg);--dds-text-font-size-h6: var(--dds-font-base);--dds-text-font-size-body: var(--dds-font-base);--dds-text-font-size-caption: var(--dds-font-xs);--dds-text-font-size-description: var(--dds-font-base);--dds-text-font-size-description-lg: var(--dds-font-base);--dds-text-font-size-description-sm: var(--dds-font-sm);--dds-text-font-size-lg: var(--dds-font-lg);--dds-text-font-size-md: var(--dds-font-base);--dds-text-font-size-sm: var(--dds-font-sm);--dds-text-font-size-xs: var(--dds-font-xs)}:host([variant=h1]),:host([variant=h2]),:host([variant=h3]),:host([variant=h4]),:host([variant=h5]),:host([variant=h6]){color:var(--dds-text-heading-color)}:host([inverted]) :host([variant=h1]),:host([inverted]) :host([variant=h2]),:host([inverted]) :host([variant=h3]),:host([inverted]) :host([variant=h4]),:host([inverted]) :host([variant=h5]),:host([inverted]) :host([variant=h6]){color:var(--dds-text-heading-color-inverted)}:host([variant=description]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=description]){color:var(--dds-text-description-color-inverted)}:host([variant=body]){color:var(--dds-text-color)}:host([inverted]) :host([variant=body]){color:var(--dds-text-color-inverted)}:host([variant=caption]){color:var(--dds-text-description-color)}:host([inverted]) :host([variant=caption]){color:var(--dds-text-description-color-inverted)}.typography{margin:0;font-family:var(--dds-text-font-family);font-weight:var(--dds-text-font-weight-medium);letter-spacing:0}.heading{font-weight:var(--dds-text-font-weight-bold);line-height:var(--dds-font-line-height-large)}.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.72px}@media (width >= 768px){.typography-h1{font-size:var(--dds-text-font-size-h1);letter-spacing:-.8px;line-height:var(--dds-font-line-height-xlarge)}}.typography-h2{font-size:var(--dds-text-font-size-h2);letter-spacing:-.56px}.typography-h3{font-size:var(--dds-text-font-size-h3);letter-spacing:-.48px}.typography-h4{font-size:var(--dds-text-font-size-h4);letter-spacing:-.4px}.typography-h5{font-size:var(--dds-text-font-size-h5)}.typography-h6{font-size:var(--dds-text-font-size-h6)}.typography-body{font-size:var(--dds-text-font-size-body);line-height:var(--dds-font-line-height-xlarge)}.typography-caption{font-size:var(--dds-text-font-size-caption);line-height:var(--dds-font-line-height-xlarge)}.typography-description{font-size:var(--dds-text-font-size-description);line-height:var(--dds-font-line-height-xlarge)}.typography-description-lg{font-size:var(--dds-text-font-size-description-lg);line-height:var(--dds-font-line-height-xlarge)}.typography-description-sm{font-size:var(--dds-text-font-size-description-sm);line-height:var(--dds-font-line-height-xlarge)}.typography-size-lg{font-size:var(--dds-text-font-size-lg);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-md{font-size:var(--dds-text-font-size-md);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-sm{font-size:var(--dds-text-font-size-sm);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-size-xs{font-size:var(--dds-text-font-size-xs);letter-spacing:0;line-height:var(--dds-font-line-height-xlarge)}.typography-inverted{color:var(--dds-text-color-inverted)}.typography-heading-inverted{color:var(--dds-text-heading-color-inverted)}.typography-description-inverted{color:var(--dds-text-description-color-inverted)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200);--dds-checkbox-size: var(--dds-spacing-500);--dds-checkbox-border-width: var(--dds-border-width-large);--dds-checkbox-border-radius: var(--dds-radius-small);--dds-checkbox-border-color: var(--dds-border-neutral-base);--dds-checkbox-background-color: transparent;--dds-checkbox-icon-color: var(--dds-button-primary-icon-enabled);--dds-checkbox-hover-border-color: var(--dds-border-neutral-medium);--dds-checkbox-hover-background-color: var(--dds-background-neutral-medium);--dds-checkbox-active-border-color: var(--dds-border-neutral-strong);--dds-checkbox-active-background-color: var(--dds-background-neutral-strong);--dds-checkbox-checked-border-color: var( --dds-background-brand-base-inverted );--dds-checkbox-checked-background-color: var( --dds-background-brand-base-inverted );--dds-checkbox-checked-hover-border-color: var( --dds-background-brand-medium-inverted );--dds-checkbox-checked-hover-background-color: var( --dds-background-brand-medium-inverted );--dds-checkbox-checked-active-border-color: var( --dds-background-brand-strong-inverted );--dds-checkbox-checked-active-background-color: var( --dds-background-brand-strong-inverted );--dds-checkbox-invalid-border-color: var(--dds-border-negative-base);--dds-checkbox-invalid-background-color: var(--dds-background-negative-base);--dds-checkbox-invalid-hover-border-color: var(--dds-border-negative-medium);--dds-checkbox-invalid-hover-background-color: var( --dds-background-negative-medium );--dds-checkbox-invalid-active-border-color: var(--dds-border-negative-strong);--dds-checkbox-invalid-active-background-color: var( --dds-background-negative-strong );--dds-checkbox-disabled-border-color: var( --dds-button-primary-background-disabled );--dds-checkbox-disabled-background-color: var( --dds-button-primary-background-disabled );--dds-checkbox-disabled-icon-color: var(--dds-button-primary-icon-disabled);--dds-checkbox-readonly-border-color: var( --dds-button-primary-background-disabled );--dds-checkbox-readonly-background-color: var( --dds-button-primary-background-disabled );--dds-checkbox-readonly-icon-color: var(--dds-button-primary-icon-disabled)}:host{--dds-form-label-font-weight: var(--dds-font-weight-bold);--dds-form-label-line-height: var(--dds-font-line-height-xlarge);--dds-form-label-color: var(--dds-text-neutral-base);--dds-form-label-disabled-color: var(--dds-text-neutral-disabled);--dds-form-label-required-color: var(--dds-text-negative-subtle);--dds-form-label-optional-color: var(--dds-text-neutral-subtle);--dds-form-label-margin-bottom: var(--dds-spacing-200)}.dds-label{display:block;margin-bottom:var(--dds-form-label-margin-bottom);color:var(--dds-form-label-color);font-weight:var(--dds-form-label-font-weight);line-height:var(--dds-form-label-line-height)}.dds-label--no-margin{margin-bottom:0}.dds-label--hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.dds-label--disabled{color:var(--dds-form-label-disabled-color)}.dds-label--xs{font-size:var(--dds-font-sm)}.dds-label--sm{font-size:var(--dds-font-base)}.dds-label--lg{font-size:var(--dds-font-lg)}.dds-label--subtle{font-weight:var(--dds-font-weight-medium)}.dds-label .dds-label__required-indicator{order:2;color:var(--dds-form-label-required-color);font-weight:var(--dds-font-weight-bold);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator{order:3;color:var(--dds-form-label-optional-color);font-weight:var(--dds-font-weight-medium);line-height:var(--dds-form-label-line-height)}.dds-label .dds-label__optional-indicator--xs{font-size:var(--dds-font-sm)}.dds-label .dds-label__optional-indicator--lg{font-size:var(--dds-font-lg)}.input__control-high-contrast{display:inline-flex;position:absolute;box-sizing:border-box;flex:0 0 auto;width:var(--dds-checkbox-size);height:var(--dds-checkbox-size);border:var(--dds-checkbox-border-width) solid var(--dds-border-neutral-transparent-interactive, #fff500);border-radius:var(--dds-checkbox-border-radius)}.input__control-high-contrast:hover{border-width:var(--dds-checkbox-border-width)}.input__control-high-contrast:active{border-width:var(--dds-border-width-xlarge)}.input__control-high-contrast.input__control-high-contrast--sm,.input__control-high-contrast.input__control-high-contrast--md{top:-1px}.input__control-high-contrast.input__control-high-contrast--lg{top:-3px}.input__control-high-contrast.input__control-high-contrast--disabled{border-color:var(--dds-border-neutral-transparent-disabled);cursor:not-allowed}.input__control-high-contrast.input__control-high-contrast--readonly{border-color:var(--dds-border-neutral-transparent-interactive);cursor:default}.input:not(.input--background):focus-visible~.input__control{outline-style:solid}.input__wrapper:has(.input.input--background:focus){transition-property:all;transition-duration:var(--dds-transition-fast);transition-timing-function:var(--dds-easing-ease-in-out);outline-color:var(--dds-focus-outer-ring);outline-offset:var(--dds-spacing-50);outline-width:var(--dds-border-width-large);outline-style:solid}.input:focus-visible~.input__control{outline-style:solid}.input__wrapper{position:relative;border:var(--dds-border-width-base) solid transparent}.input__wrapper--border,.input__wrapper--background{padding:var(--dds-spacing-400);border-radius:var(--dds-radius-base)}.input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}.input__wrapper--border{border:var(--dds-border-width-base) solid var(--dds-border-neutral-subtle)}.input__control{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;box-sizing:border-box;flex:0 0 auto;align-items:center;justify-content:center;width:var(--dds-checkbox-size);min-width:var(--dds-checkbox-size);height:var(--dds-checkbox-size);border-width:var(--dds-checkbox-border-width);border-style:solid;border-radius:var(--dds-checkbox-border-radius);border-color:var(--dds-checkbox-border-color);background-color:var(--dds-checkbox-background-color);fill:var(--dds-checkbox-icon-color);color:var(--dds-checkbox-icon-color)}.input__control.input__control--sm,.input__control.input__control--md{display:flex;top:1px;align-items:flex-start}.input__control.input__control--lg{display:flex;top:3px;align-items:flex-start}.input__control:hover{border-color:var(--dds-checkbox-hover-border-color);background-color:var(--dds-checkbox-hover-background-color)}.input__control:active{border-color:var(--dds-checkbox-active-border-color);background-color:var(--dds-checkbox-active-background-color)}.input__control:checked,.input__control:indeterminate,.input__control.input__control--checked,.input__control.input__control--indeterminate{border-color:var(--dds-checkbox-checked-border-color);background-color:var(--dds-checkbox-checked-background-color)}.input__control:checked:hover,.input__control:indeterminate:hover,.input__control.input__control--checked:hover,.input__control.input__control--indeterminate:hover{border-color:var(--dds-checkbox-checked-hover-border-color);background-color:var(--dds-checkbox-checked-hover-background-color)}.input__control:checked:active,.input__control:indeterminate:active,.input__control.input__control--checked:active,.input__control.input__control--indeterminate:active{border-color:var(--dds-checkbox-checked-active-border-color);background-color:var(--dds-checkbox-checked-active-background-color)}.input__control:checked .radio-button__icon,.input__control:indeterminate .radio-button__icon,.input__control.input__control--checked .radio-button__icon,.input__control.input__control--indeterminate .radio-button__icon{opacity:1}.input__control.dds-checkbox--invalid,.input__control[invalid],.input__control:invalid,.input__control.input__control--invalid{border-width:var(--dds-checkbox-border-width);border-color:var(--dds-checkbox-invalid-border-color);background-color:var(--dds-background-negative-base)}.input__control.dds-checkbox--invalid:hover,.input__control[invalid]:hover,.input__control:invalid:hover,.input__control.input__control--invalid:hover{border-color:var(--dds-checkbox-invalid-hover-border-color);background-color:var(--dds-background-negative-base)}.input__control.dds-checkbox--invalid:active,.input__control[invalid]:active,.input__control:invalid:active,.input__control.input__control--invalid:active{border-color:var(--dds-checkbox-invalid-active-border-color);background-color:var(--dds-background-negative-base)}.input__control:invalid:checked,.input__control:invalid:indeterminate,.input__control[invalid][checked],.input__control[invalid][indeterminate],.input__control:invalid[checked],.input__control:invalid[indeterminate],.input__control[invalid]:checked,.input__control[invalid]:indeterminate,.input__control.input__control--invalid.input__control--checked,.input__control.input__control--invalid.input__control--indeterminate{background-color:var(--dds-background-negative-base-inverted)}.input__control:invalid:checked:hover,.input__control:invalid:indeterminate:hover,.input__control[invalid][checked]:hover,.input__control[invalid][indeterminate]:hover,.input__control:invalid[checked]:hover,.input__control:invalid[indeterminate]:hover,.input__control[invalid]:checked:hover,.input__control[invalid]:indeterminate:hover,.input__control.input__control--invalid.input__control--checked:hover,.input__control.input__control--invalid.input__control--indeterminate:hover{border-color:var(--dds-checkbox-invalid-hover-border-color);background-color:var(--dds-background-negative-base-inverted)}.input__control:invalid:checked:active,.input__control:invalid:indeterminate:active,.input__control[invalid][checked]:active,.input__control[invalid][indeterminate]:active,.input__control:invalid[checked]:active,.input__control:invalid[indeterminate]:active,.input__control[invalid]:checked:active,.input__control[invalid]:indeterminate:active,.input__control.input__control--invalid.input__control--checked:active,.input__control.input__control--invalid.input__control--indeterminate:active{border-color:var(--dds-checkbox-invalid-active-border-color);background-color:var(--dds-background-negative-base-inverted)}.input__control[disabled],.input__control:disabled,.input__control.input__control--disabled{border-color:var(--dds-checkbox-disabled-border-color);background-color:var(--dds-checkbox-disabled-background-color);color:var(--dds-checkbox-disabled-icon-color);cursor:not-allowed}.input__control[disabled]:hover,.input__control:disabled:hover,.input__control.input__control--disabled:hover{border-color:var(--dds-checkbox-disabled-border-color);background-color:var(--dds-checkbox-disabled-background-color)}.input__control[disabled]:active,.input__control:disabled:active,.input__control.input__control--disabled:active{border-color:var(--dds-checkbox-disabled-border-color);background-color:var(--dds-checkbox-disabled-background-color)}.input__control[readonly],.input__control.input__control--readonly{border-color:var(--dds-checkbox-readonly-border-color);background-color:var(--dds-checkbox-readonly-background-color);color:var(--dds-checkbox-disabled-icon-color);cursor:not-allowed}.input__control[readonly]:hover,.input__control.input__control--readonly:hover,.input__control[readonly]:active,.input__control.input__control--readonly:active{border-color:var(--dds-checkbox-readonly-border-color);background-color:var(--dds-checkbox-readonly-background-color)}.input{position:absolute;margin:0;padding:0;opacity:0;pointer-events:none}.checkbox--checked .input__wrapper--background{border-color:var(--dds-background-brand-base-inverted)}.checkbox--disabled .input__wrapper--background{background-color:var(--dds-background-neutral-disabled-inverted)}.checkbox--readonly .input__wrapper--background{background-color:var(--dds-background-neutral-subtle)}';
 export {
   o as default
 };

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

@@ -44,7 +44,13 @@ import { default as DapDSTypography } from '../typography/typography.component';
  * @csspart icon-base - The base icon container.
  * @csspart label-container - The label container of the checkbox.
  * @csspart description - The description of the checkbox.
- * @csspart readonly - The readonly state of the checkbox.
+ * @csspart base-label - The label element wrapping the control.
+ * @csspart wrapper - The wrapper of the control and label.
+ * @csspart feedback - The feedback of the checkbox.
+ * @csspart high-contrast - The high contrast indicator of the checkbox.
+ * @csspart label-base - The base of the label.
+ * @csspart label-required - The required indicator of the label.
+ * @csspart label-optional - The optional indicator of the label.
  *
  * @cssproperty --dds-checkbox-size - The size of the checkbox. (default: var(--dds-spacing-500))
  * @cssproperty --dds-checkbox-border-width - The border width of the checkbox. (default: var(--dds-border-width-large))