@baloise/ds-core 20.0.0-next.6 → 20.0.0-next.8

package/dist/collection/components/card/card-content/card-content.host.css

@@ -1 +1 @@
-:host{--_card-content-position: var(--card-content-position, var(--mod-card-content-position, static));--_card-content-top: var(--card-content-top, var(--mod-card-content-top));--_card-content-right: var(--card-content-right, var(--mod-card-content-right));--_card-content-bottom: var(--card-content-bottom, var(--mod-card-content-bottom));--_card-content-left: var(--card-content-left, var(--mod-card-content-left));position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left);--_card-content-m: var(--card-content-m, var(--mod-card-content-m, 0));--_card-content-my: var(--card-content-my, var(--mod-card-content-my));--_card-content-mx: var(--card-content-mx, var(--mod-card-content-mx));--_card-content-ml: var(--card-content-ml, var(--mod-card-content-ml));--_card-content-mr: var(--card-content-mr, var(--mod-card-content-mr));--_card-content-mt: var(--card-content-mt, var(--mod-card-content-mt));--_card-content-mb: var(--card-content-mb, var(--mod-card-content-mb));margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);display:block;margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left)}:host{font-family:var(--ds-text-family-body);font-weight:var(--ds-text-weight-regular)}:host strong,:host b{font-weight:var(--ds-text-weight-bold)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host ds-heading{font-family:var(--ds-heading-family);font-weight:var(--ds-heading-weight)}:host h1,:host [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}:host h2,:host [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}:host h3,:host [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}:host h4,:host [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}:host h5,:host [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}:host ds-heading:not(:last-child),:host h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}:host h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}:host ds-text:not(:last-child),:host p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}:host p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}
+:host{--_card-content-position: var(--card-content-position, var(--mod-card-content-position, static));--_card-content-top: var(--card-content-top, var(--mod-card-content-top));--_card-content-right: var(--card-content-right, var(--mod-card-content-right));--_card-content-bottom: var(--card-content-bottom, var(--mod-card-content-bottom));--_card-content-left: var(--card-content-left, var(--mod-card-content-left));position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left);--_card-content-m: var(--card-content-m, var(--mod-card-content-m, 0));--_card-content-my: var(--card-content-my, var(--mod-card-content-my));--_card-content-mx: var(--card-content-mx, var(--mod-card-content-mx));--_card-content-ml: var(--card-content-ml, var(--mod-card-content-ml));--_card-content-mr: var(--card-content-mr, var(--mod-card-content-mr));--_card-content-mt: var(--card-content-mt, var(--mod-card-content-mt));--_card-content-mb: var(--card-content-mb, var(--mod-card-content-mb));margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);display:block;margin:var(--_card-content-m);margin-inline:var(--_card-content-mx);margin-block:var(--_card-content-my);margin-left:var(--_card-content-ml);margin-right:var(--_card-content-mr);margin-top:var(--_card-content-mt);margin-bottom:var(--_card-content-mb);position:var(--_card-content-position);top:var(--_card-content-top);right:var(--_card-content-right);bottom:var(--_card-content-bottom);left:var(--_card-content-left)}:host{font-family:var(--ds-alias-text-family-body);font-weight:var(--ds-alias-text-weight-regular)}:host strong,:host b{font-weight:var(--ds-alias-text-weight-bold)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6,:host ds-heading{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-heading-font-weight)}:host h1,:host [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}:host h2,:host [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}:host h3,:host [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}:host h4,:host [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}:host h5,:host [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}:host ds-heading:not(:last-child),:host h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}:host h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}:host h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}:host h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}:host ds-text:not(:last-child),:host p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}:host p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}:host>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}

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

@@ -21,23 +21,19 @@ export class CardSubtitle {
          * If `true` the card text color is bold.
          */
         this.bold = false;
-        /**
-         * If `true` the card text color becomes white.
-         */
-        this.color = '';
     }
     createLogger(log) {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: 'f0ebc669832a45b2a8614cfc1736e6b7b568f57a', class: {
+        return (h(Host, { key: 'bac619921e784bd2bf2d9d3a75cfd435c9c1840e', class: {
                 'card-header': true,
-            } }, h("span", { key: '9881912fa1461c37c5ecda96b1e85f8b3cb1ea29', class: {
+            } }, h("span", { key: '072f1b05c414a58e451e54ca1618cb5d77067f21', class: {
                 'text': true,
                 'is-bold': this.bold,
                 [`is-${this.color}`]: hasValue(this.color) && !this.inverted,
                 'is-inverted': this.inverted,
-            } }, h("slot", { key: '479fd315099be3aacb3378e5f2f78759cf386e7d' }))));
+            } }, h("slot", { key: 'eb92c2403f1c2535db682a1f425fae474a95e6ae' }))));
     }
     static get is() { return "ds-card-subtitle"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +94,7 @@ export class CardSubtitle {
                 "mutable": false,
                 "complexType": {
                     "original": "HeadingColor",
-                    "resolved": "\"\" | \"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\"",
+                    "resolved": "\"blue\" | \"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\" | \"white\" | undefined",
                     "references": {
                         "HeadingColor": {
                             "location": "import",
@@ -109,7 +105,7 @@ export class CardSubtitle {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true` the card text color becomes white."
@@ -117,8 +113,7 @@ export class CardSubtitle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "color",
-                "defaultValue": "''"
+                "attribute": "color"
             }
         };
     }

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

@@ -21,18 +21,12 @@ export class CardTitle {
          * The actual heading level used in the HTML markup.
          */
         this.level = 'h3';
-        /**
-         * Make the visual style mimic a specific heading level.
-         * This option allows you to make e.g. h1 visually look like h3,
-         * but still keep it h1 in the markup.
-         */
-        this.visualLevel = '';
     }
     createLogger(log) {
         this.log = log;
     }
     render() {
-        return (h(Host, { key: '72e817c803b8ab4a17b7900a88497bf5cc34ee77' }, h("ds-heading", { key: 'aa65474978e8ebe8ec69d7394ecf98d88c950b86', level: this.level, visualLevel: this.visualLevel, space: "none", inverted: this.inverted }, h("slot", { key: '028afa9859201893ec5fe95303ebd13c6c942176' }))));
+        return (h(Host, { key: 'bfe21d09ce3bbf2cc5d95a22b0440f7b48f2e42e' }, h("ds-heading", { key: '3519b56f27ea575fdf6f5e18512c88aba3b19787', level: this.level, visualLevel: this.visualLevel, space: "none", inverted: this.inverted }, h("slot", { key: 'db68ae10025bdb8aa669dfa724c4d357e9ee25d6' }))));
     }
     static get is() { return "ds-card-title"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +94,7 @@ export class CardTitle {
                 "mutable": false,
                 "complexType": {
                     "original": "HeadingVisualLevel",
-                    "resolved": "\"\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\"",
+                    "resolved": "\"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"base\" | \"display\" | \"display-2\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"lg\" | \"md\" | \"xl\" | undefined",
                     "references": {
                         "HeadingVisualLevel": {
                             "location": "import",
@@ -111,7 +105,7 @@ export class CardTitle {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Make the visual style mimic a specific heading level.\nThis option allows you to make e.g. h1 visually look like h3,\nbut still keep it h1 in the markup."
@@ -119,8 +113,7 @@ export class CardTitle {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "visual-level",
-                "defaultValue": "''"
+                "attribute": "visual-level"
             }
         };
     }

package/dist/collection/components/card/card.host.css

@@ -1 +1 @@
-:host{--_card-position: var(--card-position, var(--mod-card-position, static));--_card-top: var(--card-top, var(--mod-card-top));--_card-right: var(--card-right, var(--mod-card-right));--_card-bottom: var(--card-bottom, var(--mod-card-bottom));--_card-left: var(--card-left, var(--mod-card-left));position:var(--_card-position);top:var(--_card-top);right:var(--_card-right);bottom:var(--_card-bottom);left:var(--_card-left);--_card-m: var(--card-m, var(--mod-card-m, 0));--_card-my: var(--card-my, var(--mod-card-my));--_card-mx: var(--card-mx, var(--mod-card-mx));--_card-ml: var(--card-ml, var(--mod-card-ml));--_card-mr: var(--card-mr, var(--mod-card-mr));--_card-mt: var(--card-mt, var(--mod-card-mt));--_card-mb: var(--card-mb, var(--mod-card-mb));margin:var(--_card-m);margin-inline:var(--_card-mx);margin-block:var(--_card-my);margin-left:var(--_card-ml);margin-right:var(--_card-mr);margin-top:var(--_card-mt);margin-bottom:var(--_card-mb);--_card-color-background: var(--card-color-background, var(--mod-card-color-background, var(--ds-card-color-base-background)));--_card-color-text: var(--card-color-text, var(--mod-card-color-text, var(--ds-card-color-base-text)));--_card-color-border: var(--card-color-border, var(--mod-card-color-border, var(--ds-card-color-base-border, transparent)));--_card-radius: var(--card-radius, var(--mod-card-radius, var(--ds-card-radius-base)));--_card-border-width: var(--card-border-width, var(--mod-card-border-width, 0rem));--_card-border-style: var(--card-border-style, var(--mod-card-border-style, solid));--_card-shadow: var(--card-shadow, var(--mod-card-shadow, var(--ds-card-shadow-base)));--_card-gap: var(--card-gap, var(--mod-card-gap, var(--ds-card-space-base-device)));--_card-padding-left: var(--card-padding-left, var(--mod-card-padding-left, var(--ds-card-space-base-device)));--_card-padding-right: var(--card-padding-right, var(--mod-card-padding-right, var(--ds-card-space-base-device)));--_card-padding-top: var(--card-padding-top, var(--mod-card-padding-top, var(--ds-card-space-base-device)));--_card-padding-bottom: var(--card-padding-bottom, var(--mod-card-padding-bottom, var(--ds-card-space-base-device)));--_card-header-grid-template-columns: var(--card-header-grid-template-columns, var(--mod-card-header-grid-template-columns, 1fr auto));--_card-header-margin-left: var(--card-header-margin-left, var(--mod-card-header-margin-left, 0));--_card-header-grid-template-areas: var( --card-header-grid-template-areas, var(--mod-card-header-grid-template-areas, 'title .' 'subtitle subtitle') )}#card{position:relative;display:flex;flex-direction:column;width:100%;color:var(--_card-color-text);background-color:var(--_card-color-background);border-radius:var(--_card-radius);border-color:var(--_card-color-border);border-width:var(--_card-border-width);border-style:var(--_card-border-style);box-shadow:var(--_card-shadow);gap:var(--_card-gap);padding-left:calc(var(--_card-padding-left) - var(--_card-border-width));padding-right:calc(var(--_card-padding-right) - var(--_card-border-width));padding-top:calc(var(--_card-padding-top) - var(--_card-border-width));padding-bottom:calc(var(--_card-padding-bottom) - var(--_card-border-width));text-decoration:none}#card .card-header{--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem;--tags-display: flex;--tags-mt: 0.25rem}@media screen and (min-width: 769px){#card .card-header{--buttons-wrap: nowrap;--tags-display: inline-flex;--tags-mt: 0}}#card .card-header{column-gap:calc(var(--_card-gap)/2);display:grid;align-items:start;grid-auto-rows:auto;margin-left:var(--_card-header-margin-left);grid-template-columns:var(--_card-header-grid-template-columns);grid-template-areas:var(--_card-header-grid-template-areas)}#card .card-header ds-icon,#card .card-header ::slotted(ds-icon){grid-area:icon}#card .card-header>.tag,#card .card-header>.tags,#card .card-header>ds-tag,#card .card-header>ds-tag-group,#card .card-header ::slotted(ds-tag),#card .card-header ::slotted(ds-tag-group){grid-area:tag;margin-bottom:1rem}#card .card-header .title,#card .card-header ds-card-title{grid-area:title}#card .card-header>p,#card .card-header .subtitle,#card .card-header ds-card-subtitle{grid-area:subtitle}#card .card-header .title,#card .card-header .subtitle,#card .card-header .heading{margin:0}#card .card-content{font-family:var(--ds-text-family-body);font-weight:var(--ds-text-weight-regular)}#card .card-content strong,#card .card-content b{font-weight:var(--ds-text-weight-bold)}#card .card-content h1,#card .card-content h2,#card .card-content h3,#card .card-content h4,#card .card-content h5,#card .card-content h6,#card .card-content ds-heading{font-family:var(--ds-heading-family);font-weight:var(--ds-heading-weight)}#card .card-content h1,#card .card-content [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}#card .card-content h2,#card .card-content [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}#card .card-content h3,#card .card-content [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}#card .card-content h4,#card .card-content [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}#card .card-content h5,#card .card-content [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}#card .card-content ds-heading:not(:last-child),#card .card-content h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}#card .card-content h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}#card .card-content ds-text:not(:last-child),#card .card-content p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}#card .card-content p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}#card .card-actions{--_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));--_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));--_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));--_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));--_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));display:flex;gap:var(--_buttons-gap);flex-direction:var(--_buttons-direction);align-items:var(--_buttons-align-items);justify-content:var(--_buttons-justify-content);flex-wrap:var(--_buttons-wrap);width:100%}@media screen and (max-width: 768px){#card .card-actions ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions .button:not(.is-square,.is-circle){flex:1 1 auto}#card .card-actions ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card .card-actions.as-col-reverse{--mod-buttons-direction: column-reverse}#card .card-actions.as-row-reverse{--mod-buttons-direction: row-reverse}#card .card-actions.as-row{--mod-buttons-direction: row}#card .card-actions.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){#card .card-actions.as-col ::slotted(.button),#card .card-actions.as-col .button,#card .card-actions.as-col ::slotted(ds-button),#card .card-actions.as-col ds-button,#card .card-actions.as-col-reverse ::slotted(.button),#card .card-actions.as-col-reverse .button,#card .card-actions.as-col-reverse ::slotted(ds-button),#card .card-actions.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){#card .card-actions.as-col.is-center,#card .card-actions.as-col.is-centered,#card .card-actions.as-col-reverse.is-center,#card .card-actions.as-col-reverse.is-centered{--mod-buttons-align-items: center}#card .card-actions.as-col.is-left,#card .card-actions.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}#card .card-actions.as-col.is-right,#card .card-actions.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){#card .card-actions.as-row.is-center,#card .card-actions.as-row.is-centered,#card .card-actions.is-center:not(.as-col),#card .card-actions.is-centered:not(.as-col){--mod-buttons-justify-content: center}#card .card-actions.as-row.is-left,#card .card-actions.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}#card .card-actions.as-row.is-right,#card .card-actions.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){#card .card-actions.is-wide ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions.is-wide .button:not(.is-square,.is-circle),#card .card-actions.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card.align-center{align-items:center;--buttons-align-items: center;--buttons-justify-content: center}#card.align-right{--buttons-align-items: flex-end;--buttons-justify-content: flex-end}:host ::slotted(picture){--picture-img-radius: var(--_card-radius)}:host(.is-fullheight),:host(.is-fullheight) #card{height:100%}:host(.is-fullheight) ::slotted(ds-card-content){height:100%}:host ::slotted(ds-badge){--badge-position: absolute;--badge-top: 0;transform:translate(calc(50% + var(--_card-gap)), -50%);align-self:flex-end}:host ::slotted(ds-tag[position=left]){--tag-position: absolute;--tag-top: 0;align-self:flex-start;transform:translateY(-50%)}:host ::slotted(ds-tag[position=center]){--tag-position: absolute;--tag-top: 0;align-self:center;transform:translateY(-50%)}:host ::slotted(ds-tag[position=right]){--tag-position: absolute;--tag-top: 0;align-self:flex-end;transform:translateY(-50%)}:host(.is-square){--mod-card-radius: var(--ds-card-radius-square)}:host(.is-flat){--mod-card-radius: var(--ds-card-radius-flat);--mod-card-shadow: var(--ds-card-shadow-flat)}:host(.is-dense){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-padding-left: 0;--mod-card-padding-right: 0;--mod-card-padding-top: 0;--mod-card-padding-bottom: 0}:host(.is-outlined){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-border-width: var(--ds-card-outline-width);--mod-card-border-style: dashed;--mod-card-color-border: var(--ds-card-color-base-outline, transparent)}:host(.is-white){--mod-card-color-background: var(--ds-card-color-white-background);--mod-card-color-text: var(--ds-card-color-white-text);--mod-card-color-border: var(--ds-card-color-white-border, transparent)}:host(.is-white.is-outlined){--mod-card-color-border: var(--ds-card-color-white-outline, transparent)}:host(.is-primary){--mod-card-color-background: var(--ds-card-color-primary-background);--mod-card-color-text: var(--ds-card-color-primary-text);--mod-card-color-border: var(--ds-card-color-primary-border, transparent)}:host(.is-primary.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-outline, transparent)}:host(.is-primary-light){--mod-card-color-background: var(--ds-card-color-primary-light-background);--mod-card-color-text: var(--ds-card-color-primary-light-text);--mod-card-color-border: var(--ds-card-color-primary-light-border, transparent)}:host(.is-primary-light.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-light-outline, transparent)}:host(.is-info){--mod-card-color-background: var(--ds-card-color-info-background);--mod-card-color-text: var(--ds-card-color-info-text);--mod-card-color-border: var(--ds-card-color-info-border, transparent)}:host(.is-info.is-outlined){--mod-card-color-border: var(--ds-card-color-info-outline, transparent)}:host(.is-success){--mod-card-color-background: var(--ds-card-color-success-background);--mod-card-color-text: var(--ds-card-color-success-text);--mod-card-color-border: var(--ds-card-color-success-border, transparent)}:host(.is-success.is-outlined){--mod-card-color-border: var(--ds-card-color-success-outline, transparent)}:host(.is-warning){--mod-card-color-background: var(--ds-card-color-warning-background);--mod-card-color-text: var(--ds-card-color-warning-text);--mod-card-color-border: var(--ds-card-color-warning-border, transparent)}:host(.is-warning.is-outlined){--mod-card-color-border: var(--ds-card-color-warning-outline, transparent)}:host(.is-danger){--mod-card-color-background: var(--ds-card-color-danger-background);--mod-card-color-text: var(--ds-card-color-danger-text);--mod-card-color-border: var(--ds-card-color-danger-border, transparent)}:host(.is-danger.is-outlined){--mod-card-color-border: var(--ds-card-color-danger-outline, transparent)}:host(.is-grey){--mod-card-color-background: var(--ds-card-color-grey-background);--mod-card-color-text: var(--ds-card-color-grey-text);--mod-card-color-border: var(--ds-card-color-grey-border, transparent)}:host(.is-grey.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-outline, transparent)}:host(.is-grey-light){--mod-card-color-background: var(--ds-card-color-grey-light-background);--mod-card-color-text: var(--ds-card-color-grey-light-text);--mod-card-color-border: var(--ds-card-color-grey-light-border, transparent)}:host(.is-grey-light.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-light-outline, transparent)}:host(.is-red){--mod-card-color-background: var(--ds-card-color-red-background);--mod-card-color-text: var(--ds-card-color-red-text);--mod-card-color-border: var(--ds-card-color-red-border, transparent)}:host(.is-red.is-outlined){--mod-card-color-border: var(--ds-card-color-red-outline, transparent)}:host(.is-red-light){--mod-card-color-background: var(--ds-card-color-red-light-background);--mod-card-color-text: var(--ds-card-color-red-light-text);--mod-card-color-border: var(--ds-card-color-red-light-border, transparent)}:host(.is-red-light.is-outlined){--mod-card-color-border: var(--ds-card-color-red-light-outline, transparent)}:host(.is-red-lighter){--mod-card-color-background: var(--ds-card-color-red-lighter-background);--mod-card-color-text: var(--ds-card-color-red-lighter-text);--mod-card-color-border: var(--ds-card-color-red-lighter-border, transparent)}:host(.is-red-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-red-lighter-outline, transparent)}:host(.is-green){--mod-card-color-background: var(--ds-card-color-green-background);--mod-card-color-text: var(--ds-card-color-green-text);--mod-card-color-border: var(--ds-card-color-green-border, transparent)}:host(.is-green.is-outlined){--mod-card-color-border: var(--ds-card-color-green-outline, transparent)}:host(.is-green-light){--mod-card-color-background: var(--ds-card-color-green-light-background);--mod-card-color-text: var(--ds-card-color-green-light-text);--mod-card-color-border: var(--ds-card-color-green-light-border, transparent)}:host(.is-green-light.is-outlined){--mod-card-color-border: var(--ds-card-color-green-light-outline, transparent)}:host(.is-green-lighter){--mod-card-color-background: var(--ds-card-color-green-lighter-background);--mod-card-color-text: var(--ds-card-color-green-lighter-text);--mod-card-color-border: var(--ds-card-color-green-lighter-border, transparent)}:host(.is-green-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-green-lighter-outline, transparent)}:host(.is-purple){--mod-card-color-background: var(--ds-card-color-purple-background);--mod-card-color-text: var(--ds-card-color-purple-text);--mod-card-color-border: var(--ds-card-color-purple-border, transparent)}:host(.is-purple.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-outline, transparent)}:host(.is-purple-light){--mod-card-color-background: var(--ds-card-color-purple-light-background);--mod-card-color-text: var(--ds-card-color-purple-light-text);--mod-card-color-border: var(--ds-card-color-purple-light-border, transparent)}:host(.is-purple-light.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-light-outline, transparent)}:host(.is-purple-lighter){--mod-card-color-background: var(--ds-card-color-purple-lighter-background);--mod-card-color-text: var(--ds-card-color-purple-lighter-text);--mod-card-color-border: var(--ds-card-color-purple-lighter-border, transparent)}:host(.is-purple-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-lighter-outline, transparent)}:host(.is-yellow){--mod-card-color-background: var(--ds-card-color-yellow-background);--mod-card-color-text: var(--ds-card-color-yellow-text);--mod-card-color-border: var(--ds-card-color-yellow-border, transparent)}:host(.is-yellow.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-outline, transparent)}:host(.is-yellow-light){--mod-card-color-background: var(--ds-card-color-yellow-light-background);--mod-card-color-text: var(--ds-card-color-yellow-light-text);--mod-card-color-border: var(--ds-card-color-yellow-light-border, transparent)}:host(.is-yellow-light.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-light-outline, transparent)}:host(.is-yellow-lighter){--mod-card-color-background: var(--ds-card-color-yellow-lighter-background);--mod-card-color-text: var(--ds-card-color-yellow-lighter-text);--mod-card-color-border: var(--ds-card-color-yellow-lighter-border, transparent)}:host(.is-yellow-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-lighter-outline, transparent)}:host(.has-space-sm){--mod-card-gap: var(--ds-card-space-sm-device)}:host(.has-space-sm:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-sm-device);--mod-card-padding-right: var(--ds-card-space-sm-device);--mod-card-padding-top: var(--ds-card-space-sm-device);--mod-card-padding-bottom: var(--ds-card-space-sm-device)}:host(.has-space-md){--mod-card-gap: var(--ds-card-space-md-device)}:host(.has-space-md:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-md-device);--mod-card-padding-right: var(--ds-card-space-md-device);--mod-card-padding-top: var(--ds-card-space-md-device);--mod-card-padding-bottom: var(--ds-card-space-md-device)}:host(.has-space-lg){--mod-card-gap: var(--ds-card-space-lg-device)}:host(.has-space-lg:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-lg-device);--mod-card-padding-right: var(--ds-card-space-lg-device);--mod-card-padding-top: var(--ds-card-space-lg-device);--mod-card-padding-bottom: var(--ds-card-space-lg-device)}:host(.is-tile){--mod-card-header-grid-template-columns: auto 1fr auto;--mod-card-header-grid-template-areas: 'icon title .' 'icon subtitle subtitle'}@media screen and (min-width: 769px){:host(.is-tile){--mod-card-padding-left: calc( var(--ds-card-space-base-device) + var(--ds-icon-tile-size-lg-device) + calc(var(--_card-gap) / 2) );--mod-card-header-margin-left: calc(calc(var(--ds-icon-tile-size-lg-device) * -1) - calc(var(--_card-gap) / 2))}}:host(.is-image-teaser) #card{margin-top:calc(var(--_card-gap)*-1*2);margin-left:calc(var(--_card-gap));margin-right:calc(var(--_card-gap));max-width:fit-content}@media screen and (min-width: 769px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:75%;margin-left:calc(var(--_card-gap)*2);margin-right:calc(var(--_card-gap))}}@media screen and (min-width: 1024px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:50%}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-center) #card{margin-left:auto;margin-right:auto}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-right) #card{margin-left:auto;margin-right:calc(var(--_card-gap)*2)}}a.image-link,button.image-link{cursor:pointer}a.image-link picture,button.image-link picture{display:block;overflow:hidden}a.image-link img,button.image-link img{display:block;transition:all .4s ease-out}@media(hover: hover)and (pointer: fine){a.image-link img:hover,a.image-link img.is-hovered,button.image-link img:hover,button.image-link img.is-hovered{transform:scale(1.1)}}a.image-link img:active,a.image-link img.is-pressed,button.image-link img:active,button.image-link img.is-pressed{transform:scale(1.1)}:host{display:block;width:100%}
+:host{--_card-position: var(--card-position, var(--mod-card-position, static));--_card-top: var(--card-top, var(--mod-card-top));--_card-right: var(--card-right, var(--mod-card-right));--_card-bottom: var(--card-bottom, var(--mod-card-bottom));--_card-left: var(--card-left, var(--mod-card-left));position:var(--_card-position);top:var(--_card-top);right:var(--_card-right);bottom:var(--_card-bottom);left:var(--_card-left);--_card-m: var(--card-m, var(--mod-card-m, 0));--_card-my: var(--card-my, var(--mod-card-my));--_card-mx: var(--card-mx, var(--mod-card-mx));--_card-ml: var(--card-ml, var(--mod-card-ml));--_card-mr: var(--card-mr, var(--mod-card-mr));--_card-mt: var(--card-mt, var(--mod-card-mt));--_card-mb: var(--card-mb, var(--mod-card-mb));margin:var(--_card-m);margin-inline:var(--_card-mx);margin-block:var(--_card-my);margin-left:var(--_card-ml);margin-right:var(--_card-mr);margin-top:var(--_card-mt);margin-bottom:var(--_card-mb);--_card-color-background: var(--card-color-background, var(--mod-card-color-background, var(--ds-card-color-base-background)));--_card-color-text: var(--card-color-text, var(--mod-card-color-text, var(--ds-card-color-base-text)));--_card-color-border: var(--card-color-border, var(--mod-card-color-border, var(--ds-card-color-base-border, transparent)));--_card-radius: var(--card-radius, var(--mod-card-radius, var(--ds-card-radius-base)));--_card-border-width: var(--card-border-width, var(--mod-card-border-width, 0rem));--_card-border-style: var(--card-border-style, var(--mod-card-border-style, solid));--_card-shadow: var(--card-shadow, var(--mod-card-shadow, var(--ds-card-shadow-base)));--_card-gap: var(--card-gap, var(--mod-card-gap, var(--ds-card-space-base-device)));--_card-padding-left: var(--card-padding-left, var(--mod-card-padding-left, var(--ds-card-space-base-device)));--_card-padding-right: var(--card-padding-right, var(--mod-card-padding-right, var(--ds-card-space-base-device)));--_card-padding-top: var(--card-padding-top, var(--mod-card-padding-top, var(--ds-card-space-base-device)));--_card-padding-bottom: var(--card-padding-bottom, var(--mod-card-padding-bottom, var(--ds-card-space-base-device)));--_card-header-grid-template-columns: var(--card-header-grid-template-columns, var(--mod-card-header-grid-template-columns, 1fr auto));--_card-header-margin-left: var(--card-header-margin-left, var(--mod-card-header-margin-left, 0));--_card-header-grid-template-areas: var( --card-header-grid-template-areas, var(--mod-card-header-grid-template-areas, 'title .' 'subtitle subtitle') )}#card{position:relative;display:flex;flex-direction:column;width:100%;color:var(--_card-color-text);background-color:var(--_card-color-background);border-radius:var(--_card-radius);border-color:var(--_card-color-border);border-width:var(--_card-border-width);border-style:var(--_card-border-style);box-shadow:var(--_card-shadow);gap:var(--_card-gap);padding-left:calc(var(--_card-padding-left) - var(--_card-border-width));padding-right:calc(var(--_card-padding-right) - var(--_card-border-width));padding-top:calc(var(--_card-padding-top) - var(--_card-border-width));padding-bottom:calc(var(--_card-padding-bottom) - var(--_card-border-width));text-decoration:none}#card .card-header{--button-font-size: var(--ds-button-size-sm);--button-min-height: 2rem;--button-min-width: 2rem;--button-padding-inline: 0.75rem;--tags-display: flex;--tags-mt: 0.25rem}@media screen and (min-width: 769px){#card .card-header{--buttons-wrap: nowrap;--tags-display: inline-flex;--tags-mt: 0}}#card .card-header{column-gap:calc(var(--_card-gap)/2);display:grid;align-items:start;grid-auto-rows:auto;margin-left:var(--_card-header-margin-left);grid-template-columns:var(--_card-header-grid-template-columns);grid-template-areas:var(--_card-header-grid-template-areas)}#card .card-header ds-icon,#card .card-header ::slotted(ds-icon){grid-area:icon}#card .card-header>.tag,#card .card-header>.tags,#card .card-header>ds-tag,#card .card-header>ds-tag-group,#card .card-header ::slotted(ds-tag),#card .card-header ::slotted(ds-tag-group){grid-area:tag;margin-bottom:1rem}#card .card-header .title,#card .card-header ds-card-title{grid-area:title}#card .card-header>p,#card .card-header .subtitle,#card .card-header ds-card-subtitle{grid-area:subtitle}#card .card-header .title,#card .card-header .subtitle,#card .card-header .heading{margin:0}#card .card-content{font-family:var(--ds-alias-text-family-body);font-weight:var(--ds-alias-text-weight-regular)}#card .card-content strong,#card .card-content b{font-weight:var(--ds-alias-text-weight-bold)}#card .card-content h1,#card .card-content h2,#card .card-content h3,#card .card-content h4,#card .card-content h5,#card .card-content h6,#card .card-content ds-heading{font-family:var(--ds-alias-text-family-heading);font-weight:var(--ds-heading-font-weight)}#card .card-content h1,#card .card-content [role=heading][aria-level="1"]{font-size:var(--ds-heading-1-size-device)}#card .card-content h2,#card .card-content [role=heading][aria-level="2"]{font-size:var(--ds-heading-2-size-device)}#card .card-content h3,#card .card-content [role=heading][aria-level="3"]{font-size:var(--ds-heading-3-size-device)}#card .card-content h4,#card .card-content [role=heading][aria-level="4"]{font-size:var(--ds-heading-4-size-device)}#card .card-content h5,#card .card-content [role=heading][aria-level="5"]{font-size:var(--ds-heading-5-size-device)}#card .card-content ds-heading:not(:last-child),#card .card-content h1:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h1:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h2:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h2:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h3:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h3:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h4:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-xs-device)}#card .card-content h4:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-xs-device)}#card .card-content h5:is(.title,.subtitle,.heading):not(:last-child){--heading-mb: var(--ds-alias-space-2xs-device)}#card .card-content h5:not(.title,.subtitle,.heading,:last-child){margin-bottom:var(--ds-alias-space-2xs-device)}#card .card-content ds-text:not(:last-child),#card .card-content p.text:not(:last-child){--text-mb: var(--ds-alias-space-base-device)}#card .card-content p:not(.text,:last-child){margin-bottom:var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p.text,#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+ds-text{--text-mt: var(--ds-alias-space-base-device)}#card .card-content>:is(h1,h2,h3,h4,h5,h6,ds-heading)+p:not(.text,ds-text){margin-top:var(--ds-alias-space-base-device)}#card .card-actions{--_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));--_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));--_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));--_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));--_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));display:flex;gap:var(--_buttons-gap);flex-direction:var(--_buttons-direction);align-items:var(--_buttons-align-items);justify-content:var(--_buttons-justify-content);flex-wrap:var(--_buttons-wrap);width:100%}@media screen and (max-width: 768px){#card .card-actions ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions .button:not(.is-square,.is-circle){flex:1 1 auto}#card .card-actions ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card .card-actions.as-col-reverse{--mod-buttons-direction: column-reverse}#card .card-actions.as-row-reverse{--mod-buttons-direction: row-reverse}#card .card-actions.as-row{--mod-buttons-direction: row}#card .card-actions.as-col{--mod-buttons-direction: column}@media screen and (max-width: 768px){#card .card-actions.as-col ::slotted(.button),#card .card-actions.as-col .button,#card .card-actions.as-col ::slotted(ds-button),#card .card-actions.as-col ds-button,#card .card-actions.as-col-reverse ::slotted(.button),#card .card-actions.as-col-reverse .button,#card .card-actions.as-col-reverse ::slotted(ds-button),#card .card-actions.as-col-reverse ds-button{width:100%}}@media screen and (min-width: 769px){#card .card-actions.as-col.is-center,#card .card-actions.as-col.is-centered,#card .card-actions.as-col-reverse.is-center,#card .card-actions.as-col-reverse.is-centered{--mod-buttons-align-items: center}#card .card-actions.as-col.is-left,#card .card-actions.as-col-reverse.is-left{--mod-buttons-align-items: flex-start}#card .card-actions.as-col.is-right,#card .card-actions.as-col-reverse.is-right{--mod-buttons-align-items: flex-end}}@media screen and (min-width: 769px){#card .card-actions.as-row.is-center,#card .card-actions.as-row.is-centered,#card .card-actions.is-center:not(.as-col),#card .card-actions.is-centered:not(.as-col){--mod-buttons-justify-content: center}#card .card-actions.as-row.is-left,#card .card-actions.is-left:not(.as-col){--mod-buttons-justify-content: flex-start}#card .card-actions.as-row.is-right,#card .card-actions.is-right:not(.as-col){--mod-buttons-justify-content: flex-end}}@media screen and (min-width: 769px){#card .card-actions.is-wide ::slotted(.button:not(.is-square,.is-circle)),#card .card-actions.is-wide .button:not(.is-square,.is-circle),#card .card-actions.is-wide ::slotted(ds-button:not(.is-square,.is-circle)),#card .card-actions.is-wide ds-button:not(.is-square,.is-circle){flex:1 1 auto;--button-width: 100%}}#card.align-center{align-items:center;--buttons-align-items: center;--buttons-justify-content: center}#card.align-right{--buttons-align-items: flex-end;--buttons-justify-content: flex-end}:host ::slotted(picture){--picture-img-radius: var(--_card-radius)}:host(.is-fullheight),:host(.is-fullheight) #card{height:100%}:host(.is-fullheight) ::slotted(ds-card-content){height:100%}:host ::slotted(ds-badge){--badge-position: absolute;--badge-top: 0;transform:translate(calc(50% + var(--_card-gap)), -50%);align-self:flex-end}:host ::slotted(ds-tag[position=left]){--tag-position: absolute;--tag-top: 0;align-self:flex-start;transform:translateY(-50%)}:host ::slotted(ds-tag[position=center]){--tag-position: absolute;--tag-top: 0;align-self:center;transform:translateY(-50%)}:host ::slotted(ds-tag[position=right]){--tag-position: absolute;--tag-top: 0;align-self:flex-end;transform:translateY(-50%)}:host(.is-square){--mod-card-radius: var(--ds-card-radius-square)}:host(.is-flat){--mod-card-radius: var(--ds-card-radius-flat);--mod-card-shadow: var(--ds-card-shadow-flat)}:host(.is-dense){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-padding-left: 0;--mod-card-padding-right: 0;--mod-card-padding-top: 0;--mod-card-padding-bottom: 0}:host(.is-outlined){--mod-card-shadow: var(--ds-card-shadow-flat);--mod-card-border-width: var(--ds-card-outline-width);--mod-card-border-style: dashed;--mod-card-color-border: var(--ds-card-color-base-outline, transparent)}:host(.is-white){--mod-card-color-background: var(--ds-card-color-white-background);--mod-card-color-text: var(--ds-card-color-white-text);--mod-card-color-border: var(--ds-card-color-white-border, transparent)}:host(.is-white.is-outlined){--mod-card-color-border: var(--ds-card-color-white-outline, transparent)}:host(.is-primary){--mod-card-color-background: var(--ds-card-color-primary-background);--mod-card-color-text: var(--ds-card-color-primary-text);--mod-card-color-border: var(--ds-card-color-primary-border, transparent)}:host(.is-primary.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-outline, transparent)}:host(.is-primary-light){--mod-card-color-background: var(--ds-card-color-primary-light-background);--mod-card-color-text: var(--ds-card-color-primary-light-text);--mod-card-color-border: var(--ds-card-color-primary-light-border, transparent)}:host(.is-primary-light.is-outlined){--mod-card-color-border: var(--ds-card-color-primary-light-outline, transparent)}:host(.is-info){--mod-card-color-background: var(--ds-card-color-info-background);--mod-card-color-text: var(--ds-card-color-info-text);--mod-card-color-border: var(--ds-card-color-info-border, transparent)}:host(.is-info.is-outlined){--mod-card-color-border: var(--ds-card-color-info-outline, transparent)}:host(.is-success){--mod-card-color-background: var(--ds-card-color-success-background);--mod-card-color-text: var(--ds-card-color-success-text);--mod-card-color-border: var(--ds-card-color-success-border, transparent)}:host(.is-success.is-outlined){--mod-card-color-border: var(--ds-card-color-success-outline, transparent)}:host(.is-warning){--mod-card-color-background: var(--ds-card-color-warning-background);--mod-card-color-text: var(--ds-card-color-warning-text);--mod-card-color-border: var(--ds-card-color-warning-border, transparent)}:host(.is-warning.is-outlined){--mod-card-color-border: var(--ds-card-color-warning-outline, transparent)}:host(.is-danger){--mod-card-color-background: var(--ds-card-color-danger-background);--mod-card-color-text: var(--ds-card-color-danger-text);--mod-card-color-border: var(--ds-card-color-danger-border, transparent)}:host(.is-danger.is-outlined){--mod-card-color-border: var(--ds-card-color-danger-outline, transparent)}:host(.is-grey){--mod-card-color-background: var(--ds-card-color-grey-background);--mod-card-color-text: var(--ds-card-color-grey-text);--mod-card-color-border: var(--ds-card-color-grey-border, transparent)}:host(.is-grey.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-outline, transparent)}:host(.is-grey-light){--mod-card-color-background: var(--ds-card-color-grey-light-background);--mod-card-color-text: var(--ds-card-color-grey-light-text);--mod-card-color-border: var(--ds-card-color-grey-light-border, transparent)}:host(.is-grey-light.is-outlined){--mod-card-color-border: var(--ds-card-color-grey-light-outline, transparent)}:host(.is-red){--mod-card-color-background: var(--ds-card-color-red-background);--mod-card-color-text: var(--ds-card-color-red-text);--mod-card-color-border: var(--ds-card-color-red-border, transparent)}:host(.is-red.is-outlined){--mod-card-color-border: var(--ds-card-color-red-outline, transparent)}:host(.is-red-light){--mod-card-color-background: var(--ds-card-color-red-light-background);--mod-card-color-text: var(--ds-card-color-red-light-text);--mod-card-color-border: var(--ds-card-color-red-light-border, transparent)}:host(.is-red-light.is-outlined){--mod-card-color-border: var(--ds-card-color-red-light-outline, transparent)}:host(.is-red-lighter){--mod-card-color-background: var(--ds-card-color-red-lighter-background);--mod-card-color-text: var(--ds-card-color-red-lighter-text);--mod-card-color-border: var(--ds-card-color-red-lighter-border, transparent)}:host(.is-red-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-red-lighter-outline, transparent)}:host(.is-green){--mod-card-color-background: var(--ds-card-color-green-background);--mod-card-color-text: var(--ds-card-color-green-text);--mod-card-color-border: var(--ds-card-color-green-border, transparent)}:host(.is-green.is-outlined){--mod-card-color-border: var(--ds-card-color-green-outline, transparent)}:host(.is-green-light){--mod-card-color-background: var(--ds-card-color-green-light-background);--mod-card-color-text: var(--ds-card-color-green-light-text);--mod-card-color-border: var(--ds-card-color-green-light-border, transparent)}:host(.is-green-light.is-outlined){--mod-card-color-border: var(--ds-card-color-green-light-outline, transparent)}:host(.is-green-lighter){--mod-card-color-background: var(--ds-card-color-green-lighter-background);--mod-card-color-text: var(--ds-card-color-green-lighter-text);--mod-card-color-border: var(--ds-card-color-green-lighter-border, transparent)}:host(.is-green-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-green-lighter-outline, transparent)}:host(.is-purple){--mod-card-color-background: var(--ds-card-color-purple-background);--mod-card-color-text: var(--ds-card-color-purple-text);--mod-card-color-border: var(--ds-card-color-purple-border, transparent)}:host(.is-purple.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-outline, transparent)}:host(.is-purple-light){--mod-card-color-background: var(--ds-card-color-purple-light-background);--mod-card-color-text: var(--ds-card-color-purple-light-text);--mod-card-color-border: var(--ds-card-color-purple-light-border, transparent)}:host(.is-purple-light.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-light-outline, transparent)}:host(.is-purple-lighter){--mod-card-color-background: var(--ds-card-color-purple-lighter-background);--mod-card-color-text: var(--ds-card-color-purple-lighter-text);--mod-card-color-border: var(--ds-card-color-purple-lighter-border, transparent)}:host(.is-purple-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-purple-lighter-outline, transparent)}:host(.is-yellow){--mod-card-color-background: var(--ds-card-color-yellow-background);--mod-card-color-text: var(--ds-card-color-yellow-text);--mod-card-color-border: var(--ds-card-color-yellow-border, transparent)}:host(.is-yellow.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-outline, transparent)}:host(.is-yellow-light){--mod-card-color-background: var(--ds-card-color-yellow-light-background);--mod-card-color-text: var(--ds-card-color-yellow-light-text);--mod-card-color-border: var(--ds-card-color-yellow-light-border, transparent)}:host(.is-yellow-light.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-light-outline, transparent)}:host(.is-yellow-lighter){--mod-card-color-background: var(--ds-card-color-yellow-lighter-background);--mod-card-color-text: var(--ds-card-color-yellow-lighter-text);--mod-card-color-border: var(--ds-card-color-yellow-lighter-border, transparent)}:host(.is-yellow-lighter.is-outlined){--mod-card-color-border: var(--ds-card-color-yellow-lighter-outline, transparent)}:host(.has-space-sm){--mod-card-gap: var(--ds-card-space-sm-device)}:host(.has-space-sm:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-sm-device);--mod-card-padding-right: var(--ds-card-space-sm-device);--mod-card-padding-top: var(--ds-card-space-sm-device);--mod-card-padding-bottom: var(--ds-card-space-sm-device)}:host(.has-space-md){--mod-card-gap: var(--ds-card-space-md-device)}:host(.has-space-md:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-md-device);--mod-card-padding-right: var(--ds-card-space-md-device);--mod-card-padding-top: var(--ds-card-space-md-device);--mod-card-padding-bottom: var(--ds-card-space-md-device)}:host(.has-space-lg){--mod-card-gap: var(--ds-card-space-lg-device)}:host(.has-space-lg:not(.is-dense)){--mod-card-padding-left: var(--ds-card-space-lg-device);--mod-card-padding-right: var(--ds-card-space-lg-device);--mod-card-padding-top: var(--ds-card-space-lg-device);--mod-card-padding-bottom: var(--ds-card-space-lg-device)}:host(.is-tile){--mod-card-header-grid-template-columns: auto 1fr auto;--mod-card-header-grid-template-areas: 'icon title .' 'icon subtitle subtitle'}@media screen and (min-width: 769px){:host(.is-tile){--mod-card-padding-left: calc( var(--ds-card-space-base-device) + var(--ds-icon-tile-size-lg-device) + calc(var(--_card-gap) / 2) );--mod-card-header-margin-left: calc(calc(var(--ds-icon-tile-size-lg-device) * -1) - calc(var(--_card-gap) / 2))}}:host(.is-image-teaser) #card{margin-top:calc(var(--_card-gap)*-1*2);margin-left:calc(var(--_card-gap));margin-right:calc(var(--_card-gap));max-width:fit-content}@media screen and (min-width: 769px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:75%;margin-left:calc(var(--_card-gap)*2);margin-right:calc(var(--_card-gap))}}@media screen and (min-width: 1024px){:host(.is-image-teaser-wide) #card,:host(.is-image-teaser-wide-center) #card,:host(.is-image-teaser-wide-right) #card{width:50%}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-center) #card{margin-left:auto;margin-right:auto}}@media screen and (min-width: 769px){:host(.is-image-teaser-wide-right) #card{margin-left:auto;margin-right:calc(var(--_card-gap)*2)}}a.image-link,button.image-link{cursor:pointer}a.image-link picture,button.image-link picture{display:block;overflow:hidden}a.image-link img,button.image-link img{display:block;transition:all .4s ease-out}@media(hover: hover)and (pointer: fine){a.image-link img:hover,a.image-link img.is-hovered,button.image-link img:hover,button.image-link img.is-hovered{transform:scale(1.1)}}a.image-link img:active,a.image-link img.is-pressed,button.image-link img:active,button.image-link img.is-pressed{transform:scale(1.1)}:host{display:block;width:100%}

package/dist/collection/components/card/card.js

@@ -31,7 +31,7 @@ export class Card {
          * If `true` the card image is displayed as a teaser, which means
          * it is displayed with a large image.
          */
-        this.imageTeaser = '';
+        this.imageTeaser = undefined;
         /**
          * If `true` the card loses its border radius.
          */
@@ -89,22 +89,23 @@ export class Card {
     }
     render() {
         const hasOutline = !!this.outlined;
-        const isImageTeaser = hasValue(this.imageTeaser);
+        const isImageTeaser = this.imageTeaser !== undefined && this.imageTeaser !== null;
         const space = normalizeDeprecatedTShirtSize(this.space) || '';
-        return (h(Host, { key: '180887d5bdf129363bc1ea16a5bb61641ae05663', class: {
+        return (h(Host, { key: '4c37e36a8df83443c4bd12831f8241ffcec3fc09', class: {
                 [`is-image-teaser`]: isImageTeaser,
-                [`is-image-teaser-${this.imageTeaser}`]: isImageTeaser && hasValue(this.imageTeaser),
+                [`is-image-teaser-${this.imageTeaser}`]: isImageTeaser,
                 [`is-square`]: this.square,
                 [`is-dense`]: this.dense,
                 [`is-${this.colorTypeClass}`]: hasValue(this.color) && this.colorTypeClass !== 'white',
                 [`has-space-${space}`]: hasValue(this.space),
                 [`is-outlined`]: hasOutline,
+                [`is-fullheight`]: this.fullheight,
                 [`is-flat`]: hasOutline || !!this.flat,
                 [`is-tile`]: !!this.tile,
-            } }, h("slot", { key: 'f305737612e2932b295df5479a5853ba570f7279', name: "picture" }), h("article", { key: '51dc3fcb6756fe89fdf63f10cbc4ca4352d877d0', id: "card", class: {
+            } }, h("slot", { key: '3f89b89db48e4305ad185a6b1c3a0ecf452dacf1', name: "picture" }), h("article", { key: '76f6ac56c80aeb3384cd47ed41a40df444c5bafe', id: "card", class: {
                 [`is-fullheight`]: this.fullheight,
                 [`align-${this.align}`]: hasValue(this.align),
-            } }, h("slot", { key: 'd2f923b925198c0b3dcc12f9051e3e4c99c6e56a' }))));
+            } }, h("slot", { key: '733ac28cd73d84908b5836ce4db6f8f1089d00b0' }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -185,7 +186,7 @@ export class Card {
                 "mutable": false,
                 "complexType": {
                     "original": "CardImageTeaser",
-                    "resolved": "\"\" | \"wide-center\" | \"wide-left\" | \"wide-right\"",
+                    "resolved": "\"\" | \"wide-center\" | \"wide-left\" | \"wide-right\" | undefined",
                     "references": {
                         "CardImageTeaser": {
                             "location": "import",
@@ -196,7 +197,7 @@ export class Card {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "If `true` the card image is displayed as a teaser, which means\nit is displayed with a large image."
@@ -205,7 +206,7 @@ export class Card {
                 "setter": false,
                 "reflect": false,
                 "attribute": "image-teaser",
-                "defaultValue": "''"
+                "defaultValue": "undefined"
             },
             "square": {
                 "type": "boolean",

package/dist/collection/components/checkbox/checkbox-group/checkbox-group.js

@@ -5,13 +5,14 @@ import { __decorate, __metadata } from "tslib";
 import { h, } from "@stencil/core";
 import { Field } from "../../input/field.util";
 import { defaultConfig, ListenToConfig } from "../../../global/index";
-import { Logger, hasTagName, isDescendant, stopEventBubbling, areArraysEqual, hasValue, OneOf, Type, } from "../../../utils/index";
+import { Logger, hasTagName, isDescendant, stopEventBubbling, areArraysEqual, hasValue, OneOf, Type, watchInvalidTextSlot, } from "../../../utils/index";
 import { INPUT_COLORS } from "../../input/input.interfaces";
 import { CHECKBOX_LABEL_POSITIONS, CHECKBOX_TILE_COLORS, CHECKBOX_GROUP_COLUMNS, } from "../checkbox.interfaces";
 /**
  * Checkbox Group groups multiple checkboxes so multiple options can be selected within a form field.
  *
  * @slot - The checkbox items to display inside the group.
+ * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
  */
 export class CheckboxGroup {
     constructor() {
@@ -19,6 +20,7 @@ export class CheckboxGroup {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.internalValue = [];
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -87,6 +89,10 @@ export class CheckboxGroup {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile checkbox.
          */
@@ -119,6 +125,10 @@ export class CheckboxGroup {
                 });
             }
         };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
     }
     createLogger(log) {
         this.log = log;
@@ -138,15 +148,25 @@ export class CheckboxGroup {
      */
     connectedCallback() {
         this.valueChanged();
+        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
+            this.hasInvalidTextSlotContent = hasContent;
+        });
         this.passDownAttributes();
         this.internals.setFormValue(this.internalValue.join(','));
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
     componentWillLoad() {
         this.handleValueChange();
     }
     componentWillUpdate() {
         this.passDownAttributes();
     }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -215,7 +235,9 @@ export class CheckboxGroup {
         return Array.from(this.el.querySelectorAll('ds-checkbox'));
     }
     passDownAttributes() {
+        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
         this.getCheckboxes().forEach(checkbox => {
+            var _a;
             if (this.control) {
                 if (hasValue(this.disabled)) {
                     checkbox.disabled = this.disabled;
@@ -223,14 +245,13 @@ export class CheckboxGroup {
                 if (hasValue(this.readonly)) {
                     checkbox.readonly = this.readonly;
                 }
-                if (hasValue(this.invalid)) {
-                    checkbox.invalid = this.invalid;
-                }
+                checkbox.invalid = isInvalid;
             }
             checkbox.name = this.name;
             checkbox.labelPosition = this.labelPosition;
             checkbox.tile = this.tile;
-            checkbox.tileColor = this.tileColor;
+            checkbox.hideTrigger = this.hideTrigger;
+            checkbox.tileColor = (_a = checkbox.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
             checkbox.cols = this.cols;
             checkbox.colsTablet = this.colsTablet;
             checkbox.colsMobile = this.colsMobile;
@@ -254,10 +275,10 @@ export class CheckboxGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'ebd36e47675b46855d72d0c66f78e56fd7fea7e0', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: '585b8478c2f8caed4f3f5f8d243f7cd3bb0573d7', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid || this.hasInvalidTextSlotContent, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            } }, h("slot", { key: '7fa32f49d9e613e6eb946cf5b0b6eb1f7fecd1c8' })));
+            } }, h("slot", { key: 'ee909dfcbb89215398c98fdf30252b7db6fbfbd5', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -629,6 +650,26 @@ export class CheckboxGroup {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "tileColor": {
                 "type": "string",
                 "mutable": false,
@@ -700,7 +741,8 @@ export class CheckboxGroup {
         return {
             "language": {},
             "region": {},
-            "internalValue": {}
+            "internalValue": {},
+            "hasInvalidTextSlotContent": {}
         };
     }
     static get events() {
@@ -912,6 +954,10 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "hideTrigger", void 0);
 __decorate([
     OneOf(CHECKBOX_TILE_COLORS),
     __metadata("design:type", String)

package/dist/collection/components/checkbox/checkbox.host.css

@@ -1 +1 @@
-:host{--_checkbox-gap: var(--checkbox-gap, var(--mod-checkbox-gap, 0.5rem));--_checkbox-label-base-color: var(--checkbox-label-base-color, var(--mod-checkbox-label-base-color, inherit));--_checkbox-label-hover-color: var(--checkbox-label-hover-color, var(--mod-checkbox-label-hover-color, var(--ds-global-color-sky-5)));--_checkbox-label-active-color: var(--checkbox-label-active-color, var(--mod-checkbox-label-active-color, var(--ds-global-color-primary-6)));--_checkbox-size: var(--checkbox-size, var(--mod-checkbox-size, 1.5rem));--_checkbox-border-width: var(--checkbox-border-width, var(--mod-checkbox-border-width, var(--ds-alias-border-width-base)));--_checkbox-radius: var(--checkbox-radius, var(--mod-checkbox-radius, var(--ds-alias-radius-base)));--_checkbox-tile-radius: var(--checkbox-tile-radius, var(--mod-checkbox-tile-radius, var(--ds-alias-radius-base)));--_checkbox-tile-padding: var(--checkbox-tile-padding, var(--mod-checkbox-tile-padding, 1rem));--_checkbox-tile-border-width: var(--checkbox-tile-border-width, var(--mod-checkbox-tile-border-width, var(--ds-alias-border-width-base)));--_checkbox-tile-base-background-color: var(--checkbox-tile-base-background-color, var(--mod-checkbox-tile-base-background-color, inherit));--_checkbox-tile-base-border-color: var(--checkbox-tile-base-border-color, var(--mod-checkbox-tile-base-border-color, var(--ds-global-color-grey-3)));--_checkbox-tile-hover-background-color: var(--checkbox-tile-hover-background-color, var(--mod-checkbox-tile-hover-background-color, var(--ds-global-color-grey-2)));--_checkbox-tile-hover-border-color: var(--checkbox-tile-hover-border-color, var(--mod-checkbox-tile-hover-border-color, var(--ds-global-color-sky-5)));--_checkbox-tile-active-background-color: var(--checkbox-tile-active-background-color, var(--mod-checkbox-tile-active-background-color, var(--ds-global-color-grey-2)));--_checkbox-tile-active-border-color: var(--checkbox-tile-active-border-color, var(--mod-checkbox-tile-active-border-color, var(--ds-global-color-primary-6)));--_checkbox-unchecked-base-color-background: var(--checkbox-unchecked-base-color-background, var(--mod-checkbox-unchecked-base-color-background, transparent));--_checkbox-unchecked-base-color-border: var(--checkbox-unchecked-base-color-border, var(--mod-checkbox-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_checkbox-unchecked-hover-color-background: var(--checkbox-unchecked-hover-color-background, var(--mod-checkbox-unchecked-hover-color-background, var(--ds-global-color-grey-2)));--_checkbox-unchecked-hover-color-border: var(--checkbox-unchecked-hover-color-border, var(--mod-checkbox-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_checkbox-unchecked-active-color-background: var(--checkbox-unchecked-active-color-background, var(--mod-checkbox-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_checkbox-unchecked-active-color-border: var(--checkbox-unchecked-active-color-border, var(--mod-checkbox-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_checkbox-checked-base-color-background: var(--checkbox-checked-base-color-background, var(--mod-checkbox-checked-base-color-background, var(--ds-global-color-primary-5)));--_checkbox-checked-base-color-border: var(--checkbox-checked-base-color-border, var(--mod-checkbox-checked-base-color-border, var(--ds-global-color-primary-5)));--_checkbox-checked-base-color-icon: var(--checkbox-checked-base-color-icon, var(--mod-checkbox-checked-base-color-icon, var(--ds-global-color-white)));--_checkbox-checked-hover-color-background: var(--checkbox-checked-hover-color-background, var(--mod-checkbox-checked-hover-color-background, var(--ds-global-color-sky-5)));--_checkbox-checked-hover-color-border: var(--checkbox-checked-hover-color-border, var(--mod-checkbox-checked-hover-color-border, var(--ds-global-color-sky-5)));--_checkbox-checked-active-color-background: var(--checkbox-checked-active-color-background, var(--mod-checkbox-checked-active-color-background, var(--ds-global-color-primary-6)));--_checkbox-checked-active-color-border: var(--checkbox-checked-active-color-border, var(--mod-checkbox-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:inline-flex;align-items:center;gap:var(--_checkbox-gap);cursor:pointer;user-select:none;color:var(--_checkbox-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_checkbox-label-hover-color)}}label:active{color:var(--_checkbox-label-active-color)}:host input[type=checkbox]{appearance:none;flex:none;display:inline-flex;width:var(--_checkbox-size);height:var(--_checkbox-size);background:var(--_checkbox-unchecked-base-color-background);border:var(--_checkbox-border-width) solid var(--_checkbox-unchecked-base-color-border);border-radius:var(--_checkbox-radius);vertical-align:top;cursor:pointer;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=checkbox]:disabled{cursor:default}:host input[type=checkbox]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_checkbox-radius)}:host input[type=checkbox]:not(:disabled):hover,:host:hover input[type=checkbox]:not(:disabled):not(:checked){background:var(--_checkbox-unchecked-hover-color-background);border-color:var(--_checkbox-unchecked-hover-color-border)}:host input[type=checkbox]:not(:disabled):active,:host:active input[type=checkbox]:not(:disabled):not(:checked){background:var(--_checkbox-unchecked-active-color-background);border-color:var(--_checkbox-unchecked-active-color-border)}:host input[type=checkbox]:checked{background:var(--_checkbox-checked-base-color-background);border-color:var(--_checkbox-checked-base-color-border)}:host input[type=checkbox]:checked:not(:disabled):hover,:host:hover input[type=checkbox]:checked:not(:disabled){background:var(--_checkbox-checked-hover-color-background);border-color:var(--_checkbox-checked-hover-color-border)}:host input[type=checkbox]:checked:not(:disabled):active,:host:active input[type=checkbox]:checked:not(:disabled){background:var(--_checkbox-checked-active-color-background);border-color:var(--_checkbox-checked-active-color-border)}:host input[type=checkbox]::after{display:block;content:"";width:100%;height:100%;mask-size:70%;mask-repeat:no-repeat;mask-position:center;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:0;transform:translateY(-0.5rem)}:host input[type=checkbox]:checked::after{background-color:var(--_checkbox-checked-base-color-icon);opacity:1;transform:translateY(0);mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>")}:host(.is-invalid:not(.is-disabled)){--mod-checkbox-label-base-color: var(--ds-global-color-danger-4);--mod-checkbox-label-hover-color: var(--ds-global-color-danger-5);--mod-checkbox-label-active-color: var(--ds-global-color-danger-6);--mod-checkbox-unchecked-base-color-background: transparent;--mod-checkbox-unchecked-base-color-border: var(--ds-divider-color-danger);--mod-checkbox-unchecked-hover-color-background: var(--ds-global-color-grey-2);--mod-checkbox-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-checkbox-unchecked-active-color-background: var(--ds-global-color-grey-2);--mod-checkbox-unchecked-active-color-border: var(--ds-divider-color-danger-darker);--mod-checkbox-checked-base-color-background: var(--ds-divider-color-danger);--mod-checkbox-checked-base-color-border: var(--ds-divider-color-danger);--mod-checkbox-checked-hover-color-background: var(--ds-divider-color-danger-dark);--mod-checkbox-checked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-checkbox-checked-active-color-background: var(--ds-divider-color-danger-darker);--mod-checkbox-checked-active-color-border: var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-checkbox-label-base-color: var(--ds-global-color-grey-5);--mod-checkbox-label-hover-color: var(--ds-global-color-grey-5);--mod-checkbox-label-active-color: var(--ds-global-color-grey-5);--mod-checkbox-unchecked-base-color-background: var(--ds-global-color-grey-2);--mod-checkbox-unchecked-base-color-border: var(--ds-alias-border-color-disabled);--mod-checkbox-checked-base-color-background: var(--ds-alias-border-color-disabled);--mod-checkbox-checked-base-color-border: var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_checkbox-tile-padding);border-style:solid;border-width:var(--_checkbox-tile-border-width);border-radius:var(--_checkbox-tile-radius);border-color:var(--_checkbox-tile-base-border-color);background:var(--_checkbox-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_checkbox-tile-hover-border-color);background:var(--_checkbox-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_checkbox-tile-active-border-color);background:var(--_checkbox-tile-active-background-color)}:host(.is-tile.is-checked){--mod-checkbox-tile-base-border-color: var(--_checkbox-checked-base-color-background)}:host(.is-tile.has-tile-green.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-checkbox-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-danger-1);--mod-checkbox-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-checkbox-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}
+:host{--_checkbox-gap: var(--checkbox-gap, var(--mod-checkbox-gap, 0.5rem));--_checkbox-label-base-color: var(--checkbox-label-base-color, var(--mod-checkbox-label-base-color, inherit));--_checkbox-label-hover-color: var(--checkbox-label-hover-color, var(--mod-checkbox-label-hover-color, var(--ds-global-color-sky-5)));--_checkbox-label-active-color: var(--checkbox-label-active-color, var(--mod-checkbox-label-active-color, var(--ds-global-color-primary-6)));--_checkbox-size: var(--checkbox-size, var(--mod-checkbox-size, 1.5rem));--_checkbox-border-width: var(--checkbox-border-width, var(--mod-checkbox-border-width, var(--ds-alias-border-width-base)));--_checkbox-radius: var(--checkbox-radius, var(--mod-checkbox-radius, var(--ds-alias-radius-base)));--_checkbox-tile-radius: var(--checkbox-tile-radius, var(--mod-checkbox-tile-radius, var(--ds-alias-radius-base)));--_checkbox-tile-padding: var(--checkbox-tile-padding, var(--mod-checkbox-tile-padding, 1rem));--_checkbox-tile-border-width: var(--checkbox-tile-border-width, var(--mod-checkbox-tile-border-width, var(--ds-alias-border-width-base)));--_checkbox-tile-base-background-color: var(--checkbox-tile-base-background-color, var(--mod-checkbox-tile-base-background-color, inherit));--_checkbox-tile-base-border-color: var(--checkbox-tile-base-border-color, var(--mod-checkbox-tile-base-border-color, var(--ds-global-color-grey-3)));--_checkbox-tile-hover-background-color: var(--checkbox-tile-hover-background-color, var(--mod-checkbox-tile-hover-background-color, var(--ds-global-color-grey-0)));--_checkbox-tile-hover-border-color: var(--checkbox-tile-hover-border-color, var(--mod-checkbox-tile-hover-border-color, var(--ds-global-color-sky-5)));--_checkbox-tile-active-background-color: var(--checkbox-tile-active-background-color, var(--mod-checkbox-tile-active-background-color, var(--ds-global-color-grey-0)));--_checkbox-tile-active-border-color: var(--checkbox-tile-active-border-color, var(--mod-checkbox-tile-active-border-color, var(--ds-global-color-primary-6)));--_checkbox-unchecked-base-color-background: var(--checkbox-unchecked-base-color-background, var(--mod-checkbox-unchecked-base-color-background, transparent));--_checkbox-unchecked-base-color-border: var(--checkbox-unchecked-base-color-border, var(--mod-checkbox-unchecked-base-color-border, var(--ds-global-color-primary-5)));--_checkbox-unchecked-hover-color-background: var(--checkbox-unchecked-hover-color-background, var(--mod-checkbox-unchecked-hover-color-background, var(--ds-global-color-grey-1)));--_checkbox-unchecked-hover-color-border: var(--checkbox-unchecked-hover-color-border, var(--mod-checkbox-unchecked-hover-color-border, var(--ds-global-color-sky-5)));--_checkbox-unchecked-active-color-background: var(--checkbox-unchecked-active-color-background, var(--mod-checkbox-unchecked-active-color-background, var(--ds-global-color-grey-2)));--_checkbox-unchecked-active-color-border: var(--checkbox-unchecked-active-color-border, var(--mod-checkbox-unchecked-active-color-border, var(--ds-global-color-primary-6)));--_checkbox-checked-base-color-background: var(--checkbox-checked-base-color-background, var(--mod-checkbox-checked-base-color-background, var(--ds-global-color-primary-5)));--_checkbox-checked-base-color-border: var(--checkbox-checked-base-color-border, var(--mod-checkbox-checked-base-color-border, var(--ds-global-color-primary-5)));--_checkbox-checked-base-color-icon: var(--checkbox-checked-base-color-icon, var(--mod-checkbox-checked-base-color-icon, var(--ds-global-color-white)));--_checkbox-checked-hover-color-background: var(--checkbox-checked-hover-color-background, var(--mod-checkbox-checked-hover-color-background, var(--ds-global-color-sky-5)));--_checkbox-checked-hover-color-border: var(--checkbox-checked-hover-color-border, var(--mod-checkbox-checked-hover-color-border, var(--ds-global-color-sky-5)));--_checkbox-checked-active-color-background: var(--checkbox-checked-active-color-background, var(--mod-checkbox-checked-active-color-background, var(--ds-global-color-primary-6)));--_checkbox-checked-active-color-border: var(--checkbox-checked-active-color-border, var(--mod-checkbox-checked-active-color-border, var(--ds-global-color-primary-6)))}:host{display:inline-block;box-sizing:border-box !important;outline:none}label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none;display:inline-flex;align-items:center;gap:var(--_checkbox-gap);cursor:pointer;user-select:none;color:var(--_checkbox-label-base-color);font-family:var(--ds-global-font-family-text);line-height:var(--ds-typography-line-height-base);padding-top:.25rem;padding-bottom:.25rem;min-height:3rem}@media(hover: hover)and (pointer: fine){label:hover{color:var(--_checkbox-label-hover-color)}}label:active{color:var(--_checkbox-label-active-color)}:host input[type=checkbox]{appearance:none;flex:none;display:inline-flex;width:var(--_checkbox-size);height:var(--_checkbox-size);background:var(--_checkbox-unchecked-base-color-background);border:var(--_checkbox-border-width) solid var(--_checkbox-unchecked-base-color-border);border-radius:var(--_checkbox-radius);vertical-align:top;cursor:pointer;transition:background .3s ease-in-out,border-color .3s ease-in-out}:host input[type=checkbox]:disabled{cursor:default}:host input[type=checkbox]:focus-visible{outline:var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);outline-offset:2px;border-radius:var(--_checkbox-radius)}:host input[type=checkbox]:not(:disabled):hover,:host:hover input[type=checkbox]:not(:disabled):not(:checked){background:var(--_checkbox-unchecked-hover-color-background);border-color:var(--_checkbox-unchecked-hover-color-border)}:host input[type=checkbox]:not(:disabled):active,:host:active input[type=checkbox]:not(:disabled):not(:checked){background:var(--_checkbox-unchecked-active-color-background);border-color:var(--_checkbox-unchecked-active-color-border)}:host input[type=checkbox]:checked{background:var(--_checkbox-checked-base-color-background);border-color:var(--_checkbox-checked-base-color-border)}:host input[type=checkbox]:checked:not(:disabled):hover,:host:hover input[type=checkbox]:checked:not(:disabled){background:var(--_checkbox-checked-hover-color-background);border-color:var(--_checkbox-checked-hover-color-border)}:host input[type=checkbox]:checked:not(:disabled):active,:host:active input[type=checkbox]:checked:not(:disabled){background:var(--_checkbox-checked-active-color-background);border-color:var(--_checkbox-checked-active-color-border)}:host input[type=checkbox]::after{display:block;content:"";width:100%;height:100%;mask-size:70%;mask-repeat:no-repeat;mask-position:center;transition:opacity .3s ease-in-out,transform .3s ease-in-out;opacity:0;transform:translateY(-0.5rem)}:host input[type=checkbox]:checked::after{background-color:var(--_checkbox-checked-base-color-icon);opacity:1;transform:translateY(0);mask-image:url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>")}:host(.is-invalid:not(.is-disabled)){--mod-checkbox-label-base-color: var(--ds-global-color-danger-4);--mod-checkbox-label-hover-color: var(--ds-global-color-danger-5);--mod-checkbox-label-active-color: var(--ds-global-color-danger-6);--mod-checkbox-unchecked-base-color-background: transparent;--mod-checkbox-unchecked-base-color-border: var(--ds-divider-color-danger);--mod-checkbox-unchecked-hover-color-background: var(--ds-global-color-grey-2);--mod-checkbox-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-checkbox-unchecked-active-color-background: var(--ds-global-color-grey-2);--mod-checkbox-unchecked-active-color-border: var(--ds-divider-color-danger-darker);--mod-checkbox-checked-base-color-background: var(--ds-divider-color-danger);--mod-checkbox-checked-base-color-border: var(--ds-divider-color-danger);--mod-checkbox-checked-hover-color-background: var(--ds-divider-color-danger-dark);--mod-checkbox-checked-hover-color-border: var(--ds-divider-color-danger-dark);--mod-checkbox-checked-active-color-background: var(--ds-divider-color-danger-darker);--mod-checkbox-checked-active-color-border: var(--ds-divider-color-danger-darker)}:host(.is-disabled){cursor:default;pointer-events:none;--mod-checkbox-label-base-color: var(--ds-global-color-grey-5);--mod-checkbox-label-hover-color: var(--ds-global-color-grey-5);--mod-checkbox-label-active-color: var(--ds-global-color-grey-5);--mod-checkbox-unchecked-base-color-background: var(--ds-global-color-grey-2);--mod-checkbox-unchecked-base-color-border: var(--ds-alias-border-color-disabled);--mod-checkbox-checked-base-color-background: var(--ds-alias-border-color-disabled);--mod-checkbox-checked-base-color-border: var(--ds-alias-border-color-disabled)}:host(.has-label-left) label{flex-direction:row-reverse}:host(.has-label-top) label{flex-direction:column-reverse}:host(.is-tile){display:block;flex:0 0 100%}:host(.is-tile) label{width:100%;height:100%;padding:var(--_checkbox-tile-padding);border-style:solid;border-width:var(--_checkbox-tile-border-width);border-radius:var(--_checkbox-tile-radius);border-color:var(--_checkbox-tile-base-border-color);background:var(--_checkbox-tile-base-background-color)}@media(hover: hover)and (pointer: fine){:host(.is-tile) label:hover{border-color:var(--_checkbox-tile-hover-border-color);background:var(--_checkbox-tile-hover-background-color)}}:host(.is-tile) label:active{border-color:var(--_checkbox-tile-active-border-color);background:var(--_checkbox-tile-active-background-color)}:host(.is-tile.is-checked){--mod-checkbox-tile-base-border-color: var(--_checkbox-checked-base-color-background)}:host(.is-tile.hide-trigger) label{position:relative}:host(.is-tile.hide-trigger) input[type=checkbox]{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;clip:rect(0 0 0 0);opacity:0;overflow:hidden;-webkit-appearance:none;-moz-appearance:none}:host(.is-tile.hide-trigger.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-primary-1);--mod-checkbox-tile-hover-background-color: var(--ds-global-color-primary-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-primary-1)}:host(.is-tile.has-tile-green.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-green-1);--mod-checkbox-tile-hover-background-color: var(--ds-global-color-green-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-green-1)}:host(.is-tile.has-tile-red.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-red-1);--mod-checkbox-tile-hover-background-color: var(--ds-global-color-red-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-red-1)}:host(.is-tile.has-tile-yellow.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-yellow-1);--mod-checkbox-tile-hover-background-color: var(--ds-global-color-yellow-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-yellow-1)}:host(.is-tile.has-tile-purple.is-checked){--mod-checkbox-tile-base-background-color: var(--ds-global-color-purple-1);--mod-checkbox-tile-hover-background-color: var(--ds-global-color-purple-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-purple-1)}:host(.is-tile.is-disabled){--icon-brand-color: var(--ds-global-color-grey-5)}:host(.is-tile.is-invalid){--mod-checkbox-tile-hover-background-color: var(--ds-global-color-danger-1);--mod-checkbox-tile-active-background-color: var(--ds-global-color-danger-1);--mod-checkbox-tile-hover-border-color: var(--ds-global-color-danger-5);--mod-checkbox-tile-active-border-color: var(--ds-global-color-danger-6)}:host(.is-tile.is-invalid) label{--icon-brand-color: var(--ds-global-color-danger-4)}@media(hover: hover)and (pointer: fine){:host(.is-tile.is-invalid) label:hover{--icon-brand-color: var(--ds-global-color-danger-5)}}:host(.is-tile.is-invalid) label:active{--icon-brand-color: var(--ds-global-color-danger-6)}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (max-width: 768px){:host(.is-tile.has-cols-2-mobile){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 769px){:host(.is-tile.has-cols-2-tablet){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}@media screen and (min-width: 1024px){:host(.is-tile.has-cols-2-desktop){flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}

package/dist/collection/components/checkbox/checkbox.js

@@ -72,6 +72,10 @@ export class Checkbox {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible.
+         */
+        this.hideTrigger = false;
         /**
          * @internal
          */
@@ -148,18 +152,19 @@ export class Checkbox {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Host, { key: '9dc7b43b7b6596219932a53d76fe9f3972da8b73', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
+        return (h(Host, { key: '0418748cddb540685593232b2d5d24af0b74c92c', "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}`, "aria-invalid": this.invalid ? 'true' : null, class: {
                 'is-disabled': this.disabled || this.readonly,
                 'is-invalid': this.invalid,
                 'is-checked': this.checked,
                 'is-tile': this.tile,
                 [`has-tile-${this.tileColor}`]: this.tile && hasValue(this.tileColor),
+                'hide-trigger': this.tile && this.hideTrigger,
                 'has-label-left': this.labelPosition === 'left',
                 'has-label-top': this.labelPosition === 'top',
                 [`has-cols-${this.cols}`]: this.tile && this.cols > 1,
                 [`has-cols-${this.colsTablet}-tablet`]: this.tile && this.colsTablet > 1,
                 [`has-cols-${this.colsMobile}-mobile`]: this.tile && this.colsMobile > 1,
-            } }, h("label", { key: '64ddcb92ac97b7dfe1c71141ded03c61e1915b3a', id: "label", part: "label" }, h("input", Object.assign({ key: 'a5eb2c1c881e5ae3d95e8b7bc844a47793709c5c', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: 'ba535ca3a7dcd0e623ba68ae2882ed27822d9244', id: "slot", part: "slot" }, h("slot", { key: 'df42decc580239904011604b349e0cfd47539682' }, this.label)))));
+            } }, h("label", { key: '23a8ac34d5eb3e6df9e42a2c647435247d1ad75e', id: "label", part: "label" }, h("input", Object.assign({ key: '4c05be40b1256fb5c60472b47e4a0ae8c55e3dd5', type: "checkbox", part: "input", id: this.inputId, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, "aria-invalid": this.invalid ? 'true' : null, onChange: ev => this.handleChange(ev), onFocus: this.handleFocus, onBlur: this.handleBlur, ref: inputEl => (this.nativeInput = inputEl) }, this.inheritAttributes)), h("div", { key: 'd90f4780331aa2c76ddd4a680d8d9e93d9d5b013', id: "slot", part: "slot" }, h("slot", { key: '7e2b971fbb93fdd4c86cadb56572dcd705743691' }, this.label)))));
     }
     static get is() { return "ds-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -430,6 +435,26 @@ export class Checkbox {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the checkbox box is visually hidden. The tile remains fully clickable and keyboard-accessible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "cols": {
                 "type": "number",
                 "mutable": false,
@@ -663,4 +688,8 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], Checkbox.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Checkbox.prototype, "hideTrigger", void 0);
 let checkboxIds = 0;

package/dist/collection/components/checkbox/test/checkbox.visual.play.js

@@ -26,12 +26,16 @@ const HOST_VARIANTS = [
     'form',
     'field-disabled',
     'field-invalid',
+    'field-invalid-slot',
     'tile-basic',
     'tile-columns',
     'tile-invalid',
     'tile-disabled',
     'tile-stack',
     'tile-stack-centered',
+    'tile-stack-multicolor-selected',
+    'tile-stack-multicolor-selected-hide-trigger',
+    'tile-stack-multicolor-unselected',
 ];
 const image = screenshot(TAG);
 test.describe('style', () => {

package/dist/collection/components/close/close.host.css

@@ -1 +1 @@
-:host{--_close-position: var(--close-position, var(--mod-close-position, static));--_close-top: var(--close-top, var(--mod-close-top));--_close-right: var(--close-right, var(--mod-close-right));--_close-bottom: var(--close-bottom, var(--mod-close-bottom));--_close-left: var(--close-left, var(--mod-close-left));position:var(--_close-position);top:var(--_close-top);right:var(--_close-right);bottom:var(--_close-bottom);left:var(--_close-left);--_close-m: var(--close-m, var(--mod-close-m, 0));--_close-my: var(--close-my, var(--mod-close-my));--_close-mx: var(--close-mx, var(--mod-close-mx));--_close-ml: var(--close-ml, var(--mod-close-ml));--_close-mr: var(--close-mr, var(--mod-close-mr));--_close-mt: var(--close-mt, var(--mod-close-mt));--_close-mb: var(--close-mb, var(--mod-close-mb));margin:var(--_close-m);margin-inline:var(--_close-mx);margin-block:var(--_close-my);margin-left:var(--_close-ml);margin-right:var(--_close-mr);margin-top:var(--_close-mt);margin-bottom:var(--_close-mb);--_close-color-background: var(--close-color-background, var(--mod-close-color-background, var(--ds-close-color-background-base)));--_close-color-background-hover: var(--close-color-background-hover, var(--mod-close-color-background-hover, var(--ds-close-color-background-hover)));--_close-color-background-active: var(--close-color-background-active, var(--mod-close-color-background-active, var(--ds-close-color-background-active)));--_close-color-focus: var(--close-color-focus, var(--mod-close-color-focus, var(--ds-alias-interaction-focus-color-base)));--_close-color-icon: var(--close-color-icon, var(--mod-close-color-icon, var(--ds-close-color-icon-base)));--_close-radius: var(--close-radius, var(--mod-close-radius, var(--ds-close-radius)));--_close-size-icon: var(--close-size-icon, var(--mod-close-size-icon, 12px));--_close-padding: var(--close-padding, var(--mod-close-padding, 0.313rem));--_close-icon: var(--close-icon, var(--mod-close-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E")))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{display:inline-block}:host button{position:relative;display:inline-block;vertical-align:top;border:none;background:var(--_close-color-background);border-radius:var(--_close-radius);padding:var(--_close-padding);appearance:none;outline:none}:host button::after{content:"";display:block;width:var(--_close-size-icon);height:var(--_close-size-icon);mask-image:var(--_close-icon);mask-repeat:no-repeat;mask-position:center;mask-size:contain;background:var(--_close-color-icon)}:host button:not(:disabled){cursor:pointer}@media(hover: hover)and (pointer: fine){:host button:not(:disabled):hover,:host button:not(:disabled).is-hovered{background:var(--_close-color-background-hover)}}:host button:not(:disabled):active,:host button:not(:disabled).is-pressed{background:var(--_close-color-background-active)}@media(hover: hover)and (pointer: fine){:host button:not(:disabled):focus-visible:not(:active),:host button:not(:disabled).is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_close-color-focus) 0 0 0 5px !important}}:host(.is-sm){--mod-close-padding: 0.25rem;--mod-close-size-icon: 10px}:host(.is-md){--mod-close-padding: 0.531rem;--mod-close-size-icon: 24px}:host(.is-inverted:not(.is-disabled)){--mod-close-color-icon: var(--ds-close-color-icon-inverted);--mod-close-color-background-hover: var(--ds-close-color-background-inverted-hover);--mod-close-color-background-active: var(--ds-close-color-background-inverted-active);--mod-close-color-focus: var(--ds-alias-interaction-focus-color-inverted)}:host(.is-disabled){--mod-close-color-icon: var(--ds-close-color-icon-disabled);--mod-close-color-background: var(--ds-close-color-background-disabled);--mod-close-color-background-hover: var(--ds-close-color-background-disabled);--mod-close-color-background-active: var(--ds-close-color-background-disabled);--mod-close-color-focus: var(--ds-alias-interaction-focus-color-disabled)}
+:host{--_close-position: var(--close-position, var(--mod-close-position, static));--_close-top: var(--close-top, var(--mod-close-top));--_close-right: var(--close-right, var(--mod-close-right));--_close-bottom: var(--close-bottom, var(--mod-close-bottom));--_close-left: var(--close-left, var(--mod-close-left));position:var(--_close-position);top:var(--_close-top);right:var(--_close-right);bottom:var(--_close-bottom);left:var(--_close-left);--_close-m: var(--close-m, var(--mod-close-m, 0));--_close-my: var(--close-my, var(--mod-close-my));--_close-mx: var(--close-mx, var(--mod-close-mx));--_close-ml: var(--close-ml, var(--mod-close-ml));--_close-mr: var(--close-mr, var(--mod-close-mr));--_close-mt: var(--close-mt, var(--mod-close-mt));--_close-mb: var(--close-mb, var(--mod-close-mb));margin:var(--_close-m);margin-inline:var(--_close-mx);margin-block:var(--_close-my);margin-left:var(--_close-ml);margin-right:var(--_close-mr);margin-top:var(--_close-mt);margin-bottom:var(--_close-mb);--_close-color-background: var(--close-color-background, var(--mod-close-color-background, var(--ds-close-color-background-base)));--_close-color-background-hover: var(--close-color-background-hover, var(--mod-close-color-background-hover, var(--ds-close-color-background-hover)));--_close-color-background-active: var(--close-color-background-active, var(--mod-close-color-background-active, var(--ds-close-color-background-active)));--_close-color-focus: var(--close-color-focus, var(--mod-close-color-focus, var(--ds-alias-interaction-focus-color-base)));--_close-color-icon: var(--close-color-icon, var(--mod-close-color-icon, var(--ds-close-icon-color-base)));--_close-radius: var(--close-radius, var(--mod-close-radius, var(--ds-close-radius)));--_close-size-icon: var(--close-size-icon, var(--mod-close-size-icon, 12px));--_close-padding: var(--close-padding, var(--mod-close-padding, 0.313rem));--_close-icon: var(--close-icon, var(--mod-close-icon, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill-rule='evenodd' d='M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z' clip-rule='evenodd'/%3E%3C/svg%3E")))}:host{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;user-drag:none}@media print{:host{display:none !important}}:host{display:inline-block}:host button{position:relative;display:inline-block;vertical-align:top;border:none;background:var(--_close-color-background);border-radius:var(--_close-radius);padding:var(--_close-padding);appearance:none;outline:none;touch-action:manipulation;transition-property:color,background-color,border-color,box-shadow,text-shadow;transition-duration:.2s;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host button::after{content:"";display:block;width:var(--_close-size-icon);height:var(--_close-size-icon);mask-image:var(--_close-icon);mask-repeat:no-repeat;mask-position:center;mask-size:contain;background:var(--_close-color-icon)}:host button:not(:disabled){cursor:pointer}@media(hover: hover)and (pointer: fine){:host button:not(:disabled):hover,:host button:not(:disabled).is-hovered{background:var(--_close-color-background-hover)}}:host button:not(:disabled):active,:host button:not(:disabled).is-pressed{background:var(--_close-color-background-active)}@media(hover: hover)and (pointer: fine){:host button:not(:disabled):focus-visible:not(:active),:host button:not(:disabled).is-focused:not(:active){box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--_close-color-focus) 0 0 0 5px !important}}:host(.is-sm){--mod-close-padding: 0.25rem;--mod-close-size-icon: 10px}:host(.is-md){--mod-close-padding: 0.531rem;--mod-close-size-icon: 24px}:host(.is-inverted:not(.is-disabled)){--mod-close-color-icon: var(--ds-close-inverted-icon-color-base);--mod-close-color-background-hover: var(--ds-close-inverted-color-background-hover);--mod-close-color-background-active: var(--ds-close-inverted-color-background-active);--mod-close-color-focus: var(--ds-alias-interaction-focus-color-inverted)}:host(.is-disabled){--mod-close-color-icon: var(--ds-close-icon-color-disabled);--mod-close-color-background: var(--ds-close-color-background-disabled);--mod-close-color-background-hover: var(--ds-close-color-background-disabled);--mod-close-color-background-active: var(--ds-close-color-background-disabled);--mod-close-color-focus: var(--ds-alias-interaction-focus-color-disabled)}