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

package/dist/esm/ds-card.entry.js

@@ -1,16 +1,16 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { B as registerInstance, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { n as normalizeDeprecatedTShirtSize } from './t-shirt-DR5LIaCn.js';
 import { C as CARD_IMAGE_TEASERS, a as CARD_ALIGNMENTS, b as CARD_SPACES, c as CARD_COLORS } from './card.interfaces-BlyIAln5.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import './create-validator-decorator-DovxquEu.js';
+import { T as Type } from './type-Bqge296W.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
-const cardHostCss = () => `: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:-ms-flexbox;display:flex;-ms-flex-direction:column;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);-webkit-box-shadow:var(--_card-shadow);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{-webkit-column-gap:calc(var(--_card-gap)/2);-moz-column-gap:calc(var(--_card-gap)/2);column-gap:calc(var(--_card-gap)/2);display:grid;-ms-flex-align:start;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:-ms-flexbox;display:flex;gap:var(--_buttons-gap);-ms-flex-direction:var(--_buttons-direction);flex-direction:var(--_buttons-direction);-ms-flex-align:var(--_buttons-align-items);align-items:var(--_buttons-align-items);-ms-flex-pack:var(--_buttons-justify-content);justify-content:var(--_buttons-justify-content);-ms-flex-wrap:var(--_buttons-wrap);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){-ms-flex:1 1 auto;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){-ms-flex:1 1 auto;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){-ms-flex:1 1 auto;flex:1 1 auto;--button-width:100%}}#card.align-center{-ms-flex-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;-webkit-transform:translate(calc(50% + var(--_card-gap)), -50%);transform:translate(calc(50% + var(--_card-gap)), -50%);-ms-flex-item-align:end;align-self:flex-end}:host ::slotted(ds-tag[position=left]){--tag-position:absolute;--tag-top:0;-ms-flex-item-align:start;align-self:flex-start;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host ::slotted(ds-tag[position=center]){--tag-position:absolute;--tag-top:0;-ms-flex-item-align:center;align-self:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host ::slotted(ds-tag[position=right]){--tag-position:absolute;--tag-top:0;-ms-flex-item-align:end;align-self:flex-end;-webkit-transform:translateY(-50%);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:-webkit-fit-content;max-width:-moz-fit-content;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;-webkit-transition:all .4s ease-out;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{-webkit-transform:scale(1.1);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{-webkit-transform:scale(1.1);transform:scale(1.1)}:host{display:block;width:100%}`;
+const cardHostCss = () => `: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:-ms-flexbox;display:flex;-ms-flex-direction:column;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);-webkit-box-shadow:var(--_card-shadow);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{-webkit-column-gap:calc(var(--_card-gap)/2);-moz-column-gap:calc(var(--_card-gap)/2);column-gap:calc(var(--_card-gap)/2);display:grid;-ms-flex-align:start;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:-ms-flexbox;display:flex;gap:var(--_buttons-gap);-ms-flex-direction:var(--_buttons-direction);flex-direction:var(--_buttons-direction);-ms-flex-align:var(--_buttons-align-items);align-items:var(--_buttons-align-items);-ms-flex-pack:var(--_buttons-justify-content);justify-content:var(--_buttons-justify-content);-ms-flex-wrap:var(--_buttons-wrap);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){-ms-flex:1 1 auto;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){-ms-flex:1 1 auto;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){-ms-flex:1 1 auto;flex:1 1 auto;--button-width:100%}}#card.align-center{-ms-flex-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;-webkit-transform:translate(calc(50% + var(--_card-gap)), -50%);transform:translate(calc(50% + var(--_card-gap)), -50%);-ms-flex-item-align:end;align-self:flex-end}:host ::slotted(ds-tag[position=left]){--tag-position:absolute;--tag-top:0;-ms-flex-item-align:start;align-self:flex-start;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host ::slotted(ds-tag[position=center]){--tag-position:absolute;--tag-top:0;-ms-flex-item-align:center;align-self:center;-webkit-transform:translateY(-50%);transform:translateY(-50%)}:host ::slotted(ds-tag[position=right]){--tag-position:absolute;--tag-top:0;-ms-flex-item-align:end;align-self:flex-end;-webkit-transform:translateY(-50%);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:-webkit-fit-content;max-width:-moz-fit-content;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;-webkit-transition:all .4s ease-out;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{-webkit-transform:scale(1.1);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{-webkit-transform:scale(1.1);transform:scale(1.1)}:host{display:block;width:100%}`;
 
 const Card = class {
     constructor(hostRef) {
@@ -31,7 +31,7 @@ const Card = class {
          * 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 @@ const Card = class {
     }
     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' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ds-carousel-item.entry.js

@@ -1,13 +1,13 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { b as CAROUSEL_ITEM_COLORS, a as CAROUSEL_VARIANTS } from './carousel.interfaces-B-en4B17.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { R as Required } from './required-Dqsbx5fH.js';
-import './create-validator-decorator-DovxquEu.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { R as Required } from './required-BsfIY-qW.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const carouselItemHostCss = () => `:host(.is-slide){display:block;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;scroll-snap-align:start;overflow:hidden;border-radius:var(--ds-alias-radius-base)}:host(.is-slide) img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;pointer-events:none}:host(.is-tile){position:relative;-ms-flex:0 0 var(--carousel-item-width, auto);flex:0 0 var(--carousel-item-width, auto);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:.5rem;padding:1rem;border-radius:var(--ds-alias-radius-base);background-color:var(--ds-alias-background-color-grey);cursor:pointer;outline:none;-webkit-transition:background-color 120ms ease,-webkit-box-shadow 120ms ease;transition:background-color 120ms ease,-webkit-box-shadow 120ms ease;transition:background-color 120ms ease,box-shadow 120ms ease;transition:background-color 120ms ease,box-shadow 120ms ease,-webkit-box-shadow 120ms ease}@media (hover: hover)and (pointer: fine){:host(.is-tile):hover{background-color:var(--ds-alias-background-color-grey-hover)}}:host(.is-tile):active{background-color:var(--ds-alias-background-color-grey-active)}@media (hover: hover)and (pointer: fine){:host(.is-tile:focus-visible:not(:active)){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}:host(.is-tile.is-selected){background-color:var(--ds-alias-background-color-primary-light)}:host(.is-tile.is-purple){background-color:var(--ds-alias-background-color-purple-lighter)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-purple):hover{background-color:var(--ds-alias-background-color-purple-light)}}:host(.is-tile.is-purple):active{background-color:var(--ds-alias-background-color-purple)}:host(.is-tile.is-green){background-color:var(--ds-alias-background-color-green-lighter)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-green):hover{background-color:var(--ds-alias-background-color-green-light)}}:host(.is-tile.is-green):active{background-color:var(--ds-alias-background-color-green)}:host(.is-tile.is-red){background-color:var(--ds-alias-background-color-red-lighter)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-red):hover{background-color:var(--ds-alias-background-color-red-light)}}:host(.is-tile.is-red):active{background-color:var(--ds-alias-background-color-red)}:host(.is-tile.is-yellow){background-color:var(--ds-alias-background-color-yellow-lighter)}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-yellow):hover{background-color:var(--ds-alias-background-color-yellow-light)}}:host(.is-tile.is-yellow):active{background-color:var(--ds-alias-background-color-yellow)}:host(.is-tile.is-navigation){padding:0;cursor:default}:host(.is-tile.is-navigation) ::slotted(a){-ms-flex:1;flex:1;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-radius:inherit;color:inherit;text-decoration:none;text-align:center;font-size:inherit;line-height:inherit;outline:none}@media (hover: hover)and (pointer: fine){:host(.is-tile.is-navigation) ::slotted(a:focus-visible){-webkit-box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important;box-shadow:var(--ds-alias-interaction-focus-color-border) 0 0 0 2px,var(--ds-alias-interaction-focus-color-base) 0 0 0 5px !important}}`;
 

package/dist/esm/ds-carousel.entry.js

@@ -1,15 +1,15 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, D as raf, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, D as raf, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { s as stopEventBubbling } from './form-control-BAP86QSm.js';
 import { C as CAROUSEL_CONTROLS, a as CAROUSEL_VARIANTS } from './carousel.interfaces-B-en4B17.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import './config.utils-D9o7rffC.js';
-import './create-validator-decorator-DovxquEu.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import './config.utils-Db2OSTX3.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
 const i18nDsCarousel = {
     de: {

package/dist/esm/ds-checkbox-group.entry.js

@@ -1,25 +1,26 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, v as defaultConfig, f as isDescendant, M as hasTagName, E as h, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
-import { F as Field } from './field.util-BjZzAi09.js';
-import { a as areArraysEqual } from './array-dJH4dfMr.js';
-import { s as stopEventBubbling } from './form-control-DvJo0GKN.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { B as registerInstance, I as createEvent, v as defaultConfig, f as isDescendant, M as hasTagName, E as h, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
+import { w as watchInvalidTextSlot, F as Field } from './field.util-Dl02gvlr.js';
+import { a as areArraysEqual } from './array-BJZA868l.js';
+import { s as stopEventBubbling } from './form-control-BAP86QSm.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { I as INPUT_COLORS } from './input.interfaces-BMM6Nxeh.js';
 import { b as CHECKBOX_GROUP_COLUMNS, C as CHECKBOX_LABEL_POSITIONS, a as CHECKBOX_TILE_COLORS } from './checkbox.interfaces-LCAsAZzj.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { L as ListenToConfig } from './config.decorator-ZQ0_Zx5y.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import { T as Type } from './type-Bqge296W.js';
+import { L as ListenToConfig } from './config.decorator-CyvsD1EY.js';
 import './aria-DYfTMCkl.js';
 import './label.i18n-C7I7OlaM.js';
 import './_commonjsHelpers-Duhf3ymL.js';
-import './_getTag-DFxL3s3h.js';
-import './isObjectLike-BAYao9w7.js';
+import './_getTag-BkweuRJc.js';
+import './isObjectLike-BnBXjF_n.js';
+import './isArray-B8PCdo6e.js';
 import './isNil--HeEBNs3.js';
-import './create-validator-decorator-DovxquEu.js';
-import './config.utils-D9o7rffC.js';
+import './create-validator-decorator-g9TfAa1g.js';
+import './config.utils-Db2OSTX3.js';
 
 const checkboxGroupHostCss = () => `:host{--_form-label-color:var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));--_form-label-family:var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));--_form-label-weight:var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));--_form-label-line-height:var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));--_form-label-size:var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));--_form-description-color:var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));--_form-description-family:var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));--_form-description-weight:var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));--_form-description-line-height:var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));--_form-description-size:var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)))}:host{display:block}:host #inner{position:relative;display:grid;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host legend{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;color:var(--_form-label-color);font-family:var(--_form-label-family);font-weight:var(--_form-label-weight);font-size:var(--_form-label-size);line-height:var(--_form-label-line-height)}:host #description{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;min-width:0;gap:.25rem;min-height:1.125rem;color:var(--_form-description-color);font-family:var(--_form-description-family);font-weight:var(--_form-description-weight);font-size:var(--_form-description-size);line-height:var(--_form-description-line-height)}:host #description ds-icon{--icon-color:var(--_form-description-color)}:host #container{display:grid;gap:.25rem}@media screen and (min-width: 769px){:host #container{display:-ms-flexbox;display:flex;gap:1rem}}:host(.is-vertical) #container{display:grid;gap:.25rem}:host(.is-danger){--mod-checkbox-group-description-color:var(--ds-form-description-color-danger)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #input{pointer-events:none;cursor:default}:host(.is-disabled){--mod-checkbox-group-label-color:var(--ds-form-label-color-disabled);--mod-checkbox-group-description-color:var(--ds-form-description-color-disabled)}:host(.is-tile) #container{-ms-flex-wrap:wrap;flex-wrap:wrap}`;
 
@@ -40,6 +41,7 @@ const CheckboxGroup = class {
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.internalValue = [];
+        this.hasInvalidTextSlotContent = false;
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -108,6 +110,10 @@ const CheckboxGroup = class {
          * 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.
          */
@@ -140,6 +146,10 @@ const CheckboxGroup = class {
                 });
             }
         };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
     }
     createLogger(log) {
         this.log = log;
@@ -159,15 +169,25 @@ const CheckboxGroup = class {
      */
     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
      * ------------------------------------------------------
@@ -236,7 +256,9 @@ const CheckboxGroup = class {
         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;
@@ -244,14 +266,13 @@ const CheckboxGroup = class {
                 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;
@@ -275,10 +296,10 @@ const CheckboxGroup = class {
      * ------------------------------------------------------
      */
     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 formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -358,6 +379,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/esm/ds-checkbox.entry.js

@@ -1,17 +1,17 @@
 /*!
  * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
  */
-import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-C6MVahkC.js';
-import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C9GKXw-5.js';
+import { B as registerInstance, I as createEvent, E as h, F as Host, G as getElement } from './index-MUUOiuTm.js';
+import { _ as __decorate, L as Logger, a as __metadata } from './tslib.es6-C7vR-gMn.js';
 import { i as inheritAttributes } from './attributes-B62ocg4Q.js';
-import { h as hasValue } from './has-value-DU9L2JaI.js';
+import { h as hasValue } from './has-value-CADjf9QZ.js';
 import { C as CHECKBOX_LABEL_POSITIONS, a as CHECKBOX_TILE_COLORS } from './checkbox.interfaces-LCAsAZzj.js';
-import { T as Type } from './type-DzkhLOG_.js';
-import { R as Required } from './required-Dqsbx5fH.js';
-import { O as OneOf } from './one-of-CKPv0Nqm.js';
-import './create-validator-decorator-DovxquEu.js';
+import { T as Type } from './type-Bqge296W.js';
+import { R as Required } from './required-BsfIY-qW.js';
+import { O as OneOf } from './one-of-rLykP5eX.js';
+import './create-validator-decorator-g9TfAa1g.js';
 
-const checkboxHostCss = () => `: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;-webkit-box-sizing:border-box !important;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex:none;flex:none;display:-ms-inline-flexbox;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;-webkit-transition:background .3s ease-in-out,border-color .3s ease-in-out;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%;-webkit-mask-size:70%;mask-size:70%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;opacity:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}:host input[type=checkbox]:checked::after{background-color:var(--_checkbox-checked-base-color-icon);opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-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>");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{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.has-label-top) label{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.is-tile){display:block;-ms-flex:0 0 100%;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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}`;
+const checkboxHostCss = () => `: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;-webkit-box-sizing:border-box !important;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:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;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]{-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex:none;flex:none;display:-ms-inline-flexbox;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;-webkit-transition:background .3s ease-in-out,border-color .3s ease-in-out;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%;-webkit-mask-size:70%;mask-size:70%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,-webkit-transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out;transition:opacity .3s ease-in-out,transform .3s ease-in-out,-webkit-transform .3s ease-in-out;opacity:0;-webkit-transform:translateY(-0.5rem);transform:translateY(-0.5rem)}:host input[type=checkbox]:checked::after{background-color:var(--_checkbox-checked-base-color-icon);opacity:1;-webkit-transform:translateY(0);transform:translateY(0);-webkit-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>");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{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host(.has-label-top) label{-ms-flex-direction:column-reverse;flex-direction:column-reverse}:host(.is-tile){display:block;-ms-flex:0 0 100%;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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-mobile){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-mobile){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-tablet){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-tablet){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);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){-ms-flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2);flex:0 0 calc(50% - var(--ds-alias-space-base)*1/2)}:host(.is-tile.has-cols-3-desktop){-ms-flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3);flex:0 0 calc(33.3333333333% - var(--ds-alias-space-base)*2/3)}:host(.is-tile.has-cols-4-desktop){-ms-flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4);flex:0 0 calc(25% - var(--ds-alias-space-base)*3/4)}}`;
 
 const Checkbox = class {
     constructor(hostRef) {
@@ -84,6 +84,10 @@ const Checkbox = class {
          * 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
          */
@@ -160,18 +164,19 @@ const Checkbox = class {
      * ------------------------------------------------------
      */
     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 formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -231,6 +236,10 @@ __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;
 Checkbox.style = checkboxHostCss();