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

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

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

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

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

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

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

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

@@ -87,6 +87,10 @@ export class CheckboxGroup {
          * Defines the layout of the input
          */
         this.tile = false;
+        /**
+         * If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group.
+         */
+        this.hideTrigger = false;
         /**
          * Defines the color of the tile checkbox.
          */
@@ -119,6 +123,10 @@ export class CheckboxGroup {
                 });
             }
         };
+        this.handleSlotChange = () => {
+            this.passDownAttributes();
+            this.handleValueChange();
+        };
     }
     createLogger(log) {
         this.log = log;
@@ -147,6 +155,9 @@ export class CheckboxGroup {
     componentWillUpdate() {
         this.passDownAttributes();
     }
+    componentDidLoad() {
+        this.handleSlotChange();
+    }
     /**
      * PUBLIC LISTENERS
      * ------------------------------------------------------
@@ -216,6 +227,7 @@ export class CheckboxGroup {
     }
     passDownAttributes() {
         this.getCheckboxes().forEach(checkbox => {
+            var _a;
             if (this.control) {
                 if (hasValue(this.disabled)) {
                     checkbox.disabled = this.disabled;
@@ -230,7 +242,8 @@ export class CheckboxGroup {
             checkbox.name = this.name;
             checkbox.labelPosition = this.labelPosition;
             checkbox.tile = this.tile;
-            checkbox.tileColor = this.tileColor;
+            checkbox.hideTrigger = this.hideTrigger;
+            checkbox.tileColor = (_a = checkbox.getAttribute('tile-color')) !== null && _a !== void 0 ? _a : this.tileColor;
             checkbox.cols = this.cols;
             checkbox.colsTablet = this.colsTablet;
             checkbox.colsMobile = this.colsMobile;
@@ -254,10 +267,10 @@ export class CheckboxGroup {
      * ------------------------------------------------------
      */
     render() {
-        return (h(Field, { key: 'ebd36e47675b46855d72d0c66f78e56fd7fea7e0', role: "fieldset", disabled: this.disabled, color: this.color, invalid: this.invalid, loading: this.loading, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, cssClasses: {
+        return (h(Field, { key: 'a11f6ecb85f81b131ee192b72a0a0bcc1b6ff780', 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: {
                 'is-vertical': this.vertical,
                 'is-tile': this.tile,
-            } }, h("slot", { key: '7fa32f49d9e613e6eb946cf5b0b6eb1f7fecd1c8' })));
+            } }, h("slot", { key: '9e36bc5aa1775d77a2f199ab1840dcd70def2bac', onSlotchange: this.handleSlotChange })));
     }
     static get is() { return "ds-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -629,6 +642,26 @@ export class CheckboxGroup {
                 "attribute": "tile",
                 "defaultValue": "false"
             },
+            "hideTrigger": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` and `tile` is set, the checkbox box is visually hidden on every checkbox in the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-trigger",
+                "defaultValue": "false"
+            },
             "tileColor": {
                 "type": "string",
                 "mutable": false,
@@ -912,6 +945,10 @@ __decorate([
     Type('boolean'),
     __metadata("design:type", Boolean)
 ], CheckboxGroup.prototype, "tile", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], CheckboxGroup.prototype, "hideTrigger", void 0);
 __decorate([
     OneOf(CHECKBOX_TILE_COLORS),
     __metadata("design:type", String)

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

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

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

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

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

@@ -32,6 +32,9 @@ const HOST_VARIANTS = [
     'tile-disabled',
     'tile-stack',
     'tile-stack-centered',
+    'tile-stack-multicolor-selected',
+    'tile-stack-multicolor-selected-hide-trigger',
+    'tile-stack-multicolor-unselected',
 ];
 const image = screenshot(TAG);
 test.describe('style', () => {

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

@@ -1 +1 @@
-:host{--_heading-position: var(--heading-position, var(--mod-heading-position, static));--_heading-top: var(--heading-top, var(--mod-heading-top));--_heading-right: var(--heading-right, var(--mod-heading-right));--_heading-bottom: var(--heading-bottom, var(--mod-heading-bottom));--_heading-left: var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m: var(--heading-m, var(--mod-heading-m, 0));--_heading-my: var(--heading-my, var(--mod-heading-my));--_heading-mx: var(--heading-mx, var(--mod-heading-mx));--_heading-ml: var(--heading-ml, var(--mod-heading-ml));--_heading-mr: var(--heading-mr, var(--mod-heading-mr));--_heading-mt: var(--heading-mt, var(--mod-heading-mt));--_heading-mb: var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color: var(--heading-color, var(--mod-heading-color, inherit));--_heading-family: var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space: var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow: var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family: var(--ds-heading-subtitle-family);--mod-heading-weight: var(--ds-heading-subtitle-weight);--mod-heading-line-height: var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color: var(--ds-heading-color-primary)}:host(.is-success){--mod-heading-color: var(--ds-heading-color-success)}:host(.is-warning){--mod-heading-color: var(--ds-heading-color-warning)}:host(.is-danger){--mod-heading-color: var(--ds-heading-color-danger)}:host(.is-white){--mod-heading-color: var(--ds-heading-color-white)}:host(.is-black){--mod-heading-color: var(--ds-heading-color-black)}:host(.is-3xl){--mod-heading-font-size: var(--ds-heading-1-size-device);--mod-heading-space: var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size: var(--ds-heading-2-size-device);--mod-heading-space: var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size: var(--ds-heading-3-size-device);--mod-heading-space: var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size: var(--ds-heading-4-size-device);--mod-heading-space: var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size: var(--ds-heading-5-size-device);--mod-heading-space: var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size: var(--ds-heading-display1-size-device);--mod-heading-space: var(--ds-heading-display1-space)}:host(.is-4xl){--mod-heading-font-size: var(--ds-heading-display2-size-device);--mod-heading-space: var(--ds-heading-display2-space)}:host(.has-space-all){--heading-mt: var(--_heading-space);--heading-mb: var(--_heading-space)}:host(.has-space-top){--heading-mt: var(--_heading-space);--heading-mb: 0}:host(.has-space-bottom){--heading-mt: 0;--heading-mb: var(--_heading-space)}:host(.has-space-none){--heading-mt: 0;--heading-mb: 0}:host{display:block}
+:host{--_heading-position: var(--heading-position, var(--mod-heading-position, static));--_heading-top: var(--heading-top, var(--mod-heading-top));--_heading-right: var(--heading-right, var(--mod-heading-right));--_heading-bottom: var(--heading-bottom, var(--mod-heading-bottom));--_heading-left: var(--heading-left, var(--mod-heading-left));position:var(--_heading-position);top:var(--_heading-top);right:var(--_heading-right);bottom:var(--_heading-bottom);left:var(--_heading-left);--_heading-m: var(--heading-m, var(--mod-heading-m, 0));--_heading-my: var(--heading-my, var(--mod-heading-my));--_heading-mx: var(--heading-mx, var(--mod-heading-mx));--_heading-ml: var(--heading-ml, var(--mod-heading-ml));--_heading-mr: var(--heading-mr, var(--mod-heading-mr));--_heading-mt: var(--heading-mt, var(--mod-heading-mt));--_heading-mb: var(--heading-mb, var(--mod-heading-mb));margin:var(--_heading-m);margin-inline:var(--_heading-mx);margin-block:var(--_heading-my);margin-left:var(--_heading-ml);margin-right:var(--_heading-mr);margin-top:var(--_heading-mt);margin-bottom:var(--_heading-mb);--_heading-color: var(--heading-color, var(--mod-heading-color, inherit));--_heading-family: var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));--_heading-space: var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));--_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, inherit))}:host{--_heading-color: var(--heading-color, var(--mod-heading-color, inherit));--_heading-family: var(--heading-family, var(--mod-heading-family, var(--ds-heading-family)));--_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-weight)));--_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));--_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--_heading-font-size, var(--ds-heading-1-size-device))));--_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));--_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, inherit))}#heading{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;hyphens:auto;overflow-wrap:break-word;text-wrap:balance;color:var(--_heading-color);font-family:var(--_heading-family);font-weight:var(--_heading-weight);font-size:var(--_heading-font-size);line-height:var(--_heading-line-height);text-align:var(--_heading-text-align);text-shadow:var(--_heading-shadow)}#heading em:not(.text),#heading span:not(.text){font-weight:inherit}#heading b,#heading strong,#heading .is-bold{font-weight:var(--ds-alias-text-weight-bold)}:host(.has-no-wrap) #heading{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}:host(.has-shadow){--mod-heading-shadow: var(--ds-heading-shadow)}:host(.is-subtitle){--mod-heading-family: var(--ds-heading-subtitle-family);--mod-heading-weight: var(--ds-heading-subtitle-weight);--mod-heading-line-height: var(--ds-heading-subtitle-line-height)}:host(.is-primary){--mod-heading-color: var(--ds-heading-color-primary)}:host(.is-success){--mod-heading-color: var(--ds-heading-color-success)}:host(.is-warning){--mod-heading-color: var(--ds-heading-color-warning)}:host(.is-danger){--mod-heading-color: var(--ds-heading-color-danger)}:host(.is-white){--mod-heading-color: var(--ds-heading-color-white)}:host(.is-black){--mod-heading-color: var(--ds-heading-color-black)}:host(.is-3xl){--mod-heading-font-size: var(--ds-heading-1-size-device);--mod-heading-space: var(--ds-heading-1-space)}:host(.is-2xl){--mod-heading-font-size: var(--ds-heading-2-size-device);--mod-heading-space: var(--ds-heading-2-space)}:host(.is-xl){--mod-heading-font-size: var(--ds-heading-3-size-device);--mod-heading-space: var(--ds-heading-3-space)}:host(.is-lg){--mod-heading-font-size: var(--ds-heading-4-size-device);--mod-heading-space: var(--ds-heading-4-space)}:host(.is-base){--mod-heading-font-size: var(--ds-heading-5-size-device);--mod-heading-space: var(--ds-heading-5-space)}:host(.is-5xl){--mod-heading-font-size: var(--ds-heading-display1-size-device);--mod-heading-space: var(--ds-heading-display1-space)}:host(.is-4xl){--mod-heading-font-size: var(--ds-heading-display2-size-device);--mod-heading-space: var(--ds-heading-display2-space)}:host(.has-space-all){--heading-mt: var(--_heading-space);--heading-mb: var(--_heading-space)}:host(.has-space-top){--heading-mt: var(--_heading-space);--heading-mb: 0}:host(.has-space-bottom){--heading-mt: 0;--heading-mb: var(--_heading-space)}:host(.has-space-none){--heading-mt: 0;--heading-mb: 0}:host{display:block}

package/dist/collection/components/input-slider/input-slider.host.css

@@ -0,0 +1 @@
+.noUi-target,.noUi-target *{-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-user-select:none;-ms-touch-action:none;touch-action:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-moz-box-sizing:border-box;box-sizing:border-box}.noUi-target{position:relative}.noUi-base,.noUi-connects{width:100%;height:100%;position:relative;z-index:1}.noUi-connects{overflow:hidden;z-index:0}.noUi-connect,.noUi-origin{will-change:transform;position:absolute;z-index:1;top:0;right:0;height:100%;width:100%;-ms-transform-origin:0 0;-webkit-transform-origin:0 0;-webkit-transform-style:preserve-3d;transform-origin:0 0;transform-style:flat}.noUi-txt-dir-rtl.noUi-horizontal .noUi-origin{left:0;right:auto}.noUi-vertical .noUi-origin{top:-100%;width:0}.noUi-horizontal .noUi-origin{height:0}.noUi-handle{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute}.noUi-touch-area{height:100%;width:100%}.noUi-state-tap .noUi-connect,.noUi-state-tap .noUi-origin{-webkit-transition:transform .3s;transition:transform .3s}.noUi-state-drag *{cursor:inherit !important}.noUi-horizontal{height:18px}.noUi-horizontal .noUi-handle{width:34px;height:28px;right:-17px;top:-6px}.noUi-vertical{width:18px}.noUi-vertical .noUi-handle{width:28px;height:34px;right:-6px;bottom:-17px}.noUi-txt-dir-rtl.noUi-horizontal .noUi-handle{left:-17px;right:auto}.noUi-target{background:#fafafa;border-radius:4px;border:1px solid #d3d3d3;box-shadow:inset 0 1px 1px #f0f0f0,0 3px 6px -5px #bbb}.noUi-connects{border-radius:3px}.noUi-connect{background:#3fb8af}.noUi-draggable{cursor:ew-resize}.noUi-vertical .noUi-draggable{cursor:ns-resize}.noUi-handle{border:1px solid #d9d9d9;border-radius:3px;background:#fff;cursor:default;box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ebebeb,0 3px 6px -3px #bbb}.noUi-active{box-shadow:inset 0 0 1px #fff,inset 0 1px 7px #ddd,0 3px 6px -3px #bbb}.noUi-handle:before,.noUi-handle:after{content:"";display:block;position:absolute;height:14px;width:1px;background:#e8e7e6;left:14px;top:6px}.noUi-handle:after{left:17px}.noUi-vertical .noUi-handle:before,.noUi-vertical .noUi-handle:after{width:14px;height:1px;left:6px;top:14px}.noUi-vertical .noUi-handle:after{top:17px}[disabled] .noUi-connect{background:#b8b8b8}[disabled].noUi-target,[disabled].noUi-handle,[disabled] .noUi-handle{cursor:not-allowed}.noUi-pips,.noUi-pips *{-moz-box-sizing:border-box;box-sizing:border-box}.noUi-pips{position:absolute;color:#999}.noUi-value{position:absolute;white-space:nowrap;text-align:center}.noUi-value-sub{color:#ccc;font-size:10px}.noUi-marker{position:absolute;background:#ccc}.noUi-marker-sub{background:#aaa}.noUi-marker-large{background:#aaa}.noUi-pips-horizontal{padding:10px 0;height:80px;top:100%;left:0;width:100%}.noUi-value-horizontal{-webkit-transform:translate(-50%, 50%);transform:translate(-50%, 50%)}.noUi-rtl .noUi-value-horizontal{-webkit-transform:translate(50%, 50%);transform:translate(50%, 50%)}.noUi-marker-horizontal.noUi-marker{margin-left:-1px;width:2px;height:5px}.noUi-marker-horizontal.noUi-marker-sub{height:10px}.noUi-marker-horizontal.noUi-marker-large{height:15px}.noUi-pips-vertical{padding:0 10px;height:100%;top:0;left:100%}.noUi-value-vertical{-webkit-transform:translate(0, -50%);transform:translate(0, -50%);padding-left:25px}.noUi-rtl .noUi-value-vertical{-webkit-transform:translate(0, 50%);transform:translate(0, 50%)}.noUi-marker-vertical.noUi-marker{width:5px;height:2px;margin-top:-1px}.noUi-marker-vertical.noUi-marker-sub{width:10px}.noUi-marker-vertical.noUi-marker-large{width:15px}.noUi-tooltip{display:block;position:absolute;border:1px solid #d9d9d9;border-radius:3px;background:#fff;color:#000;padding:5px;text-align:center;white-space:nowrap}.noUi-horizontal .noUi-tooltip{-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);left:50%;bottom:120%}.noUi-vertical .noUi-tooltip{-webkit-transform:translate(0, -50%);transform:translate(0, -50%);top:50%;right:120%}.noUi-horizontal .noUi-origin>.noUi-tooltip{-webkit-transform:translate(50%, 0);transform:translate(50%, 0);left:auto;bottom:10px}.noUi-vertical .noUi-origin>.noUi-tooltip{-webkit-transform:translate(0, -18px);transform:translate(0, -18px);top:auto;right:28px}:host{--_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));--_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)));--_input-slider-track-height: var(--input-slider-track-height, var(--mod-input-slider-track-height, 0.75rem));--_input-slider-track-radius: var(--input-slider-track-radius, var(--mod-input-slider-track-radius, var(--ds-alias-radius-rounded)));--_input-slider-track-color: var(--input-slider-track-color, var(--mod-input-slider-track-color, var(--ds-global-color-grey-2)));--_input-slider-connect-color: var(--input-slider-connect-color, var(--mod-input-slider-connect-color, var(--ds-global-color-primary-5)));--_input-slider-thumb-size: var(--input-slider-thumb-size, var(--mod-input-slider-thumb-size, 1.5rem));--_input-slider-thumb-radius: var(--input-slider-thumb-radius, var(--mod-input-slider-thumb-radius, var(--ds-alias-radius-rounded)));--_input-slider-thumb-color: var(--input-slider-thumb-color, var(--mod-input-slider-thumb-color, var(--ds-global-color-white)));--_input-slider-thumb-hover-color: var(--input-slider-thumb-hover-color, var(--mod-input-slider-thumb-hover-color, var(--ds-global-color-sky-1)));--_input-slider-thumb-active-color: var(--input-slider-thumb-active-color, var(--mod-input-slider-thumb-active-color, var(--ds-global-color-sky-1)));--_input-slider-thumb-border-color: var(--input-slider-thumb-border-color, var(--mod-input-slider-thumb-border-color, var(--ds-global-color-primary-5)));--_input-slider-thumb-border-color-hover: var(--input-slider-thumb-border-color-hover, var(--mod-input-slider-thumb-border-color-hover, var(--ds-global-color-sky-5)));--_input-slider-thumb-border-color-active: var(--input-slider-thumb-border-color-active, var(--mod-input-slider-thumb-border-color-active, var(--ds-global-color-primary-6)))}:host{position:relative;display:grid;gap:var(--_form-field-gap)}:host #container{box-sizing:border-box;clear:both;display:flex;width:100%;align-items:center;min-height:3rem;gap:.25rem}:host :where(fieldset){margin:0;padding:0;border:none}:host :where(legend){padding:0;float:left;width:100%}:host label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;box-sizing:content-box;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:flex;box-sizing:content-box;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{padding-inline:calc(var(--_input-slider-thumb-size)/2)}:host #slider{width:100%;cursor:pointer;height:var(--_input-slider-track-height);background:var(--_input-slider-track-color);border:none;border-radius:var(--_input-slider-track-radius);box-shadow:none}:host .noUi-connects{border-radius:var(--_input-slider-track-radius)}:host .noUi-connect{background:var(--_input-slider-connect-color)}:host .noUi-handle{width:var(--_input-slider-thumb-size);height:var(--_input-slider-thumb-size);top:calc((var(--_input-slider-track-height) - var(--_input-slider-thumb-size))/2);right:calc(var(--_input-slider-thumb-size)/-2);background:var(--_input-slider-thumb-color);border:2px solid var(--_input-slider-thumb-border-color);border-radius:var(--_input-slider-thumb-radius);box-shadow:#fff 0 0 0 2px;cursor:grab}:host .noUi-handle::before,:host .noUi-handle::after{display:none}@media(hover: hover)and (pointer: fine){:host .noUi-handle:hover{background:var(--_input-slider-thumb-hover-color);border-color:var(--_input-slider-thumb-border-color-hover)}}:host .noUi-handle:active,:host .noUi-handle.noUi-active{background:var(--_input-slider-thumb-active-color);border-color:var(--_input-slider-thumb-border-color-active);cursor:grabbing}:host .noUi-handle:focus-visible{outline:none}@media(hover: hover)and (pointer: fine){:host .noUi-handle:focus-visible{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 .noUi-tooltip{background:var(--ds-global-color-primary-5);color:var(--ds-global-color-white);font-size:var(--ds-alias-font-size-small);font-weight:var(--ds-alias-text-weight-bold);font-family:var(--ds-alias-text-family-body);border-radius:var(--ds-alias-radius-rounded);line-height:1;padding:.4rem .4rem;bottom:130%;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%, 4px);transition:opacity 120ms cubic-bezier(0.4, 0, 1, 1),transform 120ms cubic-bezier(0.4, 0, 1, 1),visibility 0ms linear 120ms;will-change:opacity,transform}:host .noUi-handle.noUi-active .noUi-tooltip,:host .noUi-handle:hover .noUi-tooltip,:host .noUi-handle:active .noUi-tooltip,:host .noUi-handle:focus-visible .noUi-tooltip{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%, 0);transition:opacity 200ms cubic-bezier(0, 0, 0.2, 1),transform 200ms cubic-bezier(0, 0, 0.2, 1),visibility 0ms linear 0ms}@media(prefers-reduced-motion: reduce){:host .noUi-tooltip{transition:none !important}}:host(.is-danger){--mod-form-description-color: var(--ds-form-description-color-danger);--mod-input-slider-connect-color: var(--ds-form-container-color-danger-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-danger-border)}:host(.is-success){--mod-form-description-color: var(--ds-form-description-color-success);--mod-input-slider-connect-color: var(--ds-form-container-color-success-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-success-border)}:host(.is-warning){--mod-form-description-color: var(--ds-form-description-color-warning);--mod-input-slider-connect-color: var(--ds-form-container-color-warning-border);--mod-input-slider-thumb-border-color: var(--ds-form-container-color-warning-border)}:host(.is-brand-yellow){--mod-input-slider-track-color: var(--ds-global-color-yellow-2);--mod-input-slider-connect-color: var(--ds-global-color-yellow-4)}:host(.is-brand-purple){--mod-input-slider-track-color: var(--ds-global-color-purple-2);--mod-input-slider-connect-color: var(--ds-global-color-purple-4)}:host(.is-brand-red){--mod-input-slider-track-color: var(--ds-global-color-red-2);--mod-input-slider-connect-color: var(--ds-global-color-red-4)}:host(.is-brand-green){--mod-input-slider-track-color: var(--ds-global-color-green-2);--mod-input-slider-connect-color: var(--ds-global-color-green-4)}:host(.is-disabled),:host(.is-disabled) #label,:host(.is-disabled) #description,:host(.is-disabled) #slider{pointer-events:none;cursor:default}:host(.is-disabled){--mod-form-label-color: var(--ds-form-label-color-disabled);--mod-form-description-color: var(--ds-form-description-color-disabled);--mod-input-slider-track-color: var(--ds-global-color-grey-1);--mod-input-slider-connect-color: var(--ds-global-color-grey-3);--mod-input-slider-thumb-color: var(--ds-global-color-grey-3);--mod-input-slider-thumb-border-color: var(--ds-global-color-grey-3)}:host(.is-disabled) .noUi-handle{cursor:default}

package/dist/collection/components/input-slider/input-slider.interfaces.js

@@ -0,0 +1,4 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const INPUT_SLIDER_BRAND_COLORS = ['yellow', 'purple', 'red', 'green', ''];