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

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-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%}

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

@@ -3,8 +3,7 @@
  */
 import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
-import isEmpty from "lodash/isEmpty";
-import { normalizeDeprecatedTShirtSize, Logger, ValidateOneOf, ValidateType, setupValidation, } from "../../utils/index";
+import { normalizeDeprecatedTShirtSize, Logger, hasValue, OneOf, Type } from "../../utils/index";
 import { CARD_ALIGNMENTS, CARD_IMAGE_TEASERS, CARD_SPACES, CARD_COLORS, } from "./card.interfaces";
 /**
  * Card groups related content together in a contained, visually distinct container with optional header and footer.
@@ -69,15 +68,8 @@ export class Card {
     createLogger(log) {
         this.log = log;
     }
-    spaceChanged(newValue) {
-        this.space = normalizeDeprecatedTShirtSize(newValue);
-    }
-    connectedCallback() {
-        setupValidation(this);
-        this.space = normalizeDeprecatedTShirtSize(this.space);
-    }
     get colorTypeClass() {
-        const color = isEmpty(this.color) ? '' : `${this.inverted ? 'primary' : this.color}`;
+        const color = !hasValue(this.color) ? '' : `${this.inverted ? 'primary' : this.color}`;
         const colorMap = {
             'blue': 'primary',
             'purple-1': 'purple-lighter',
@@ -97,21 +89,22 @@ export class Card {
     }
     render() {
         const hasOutline = !!this.outlined;
-        const isImageTeaser = !!this.imageTeaser;
-        return (h(Host, { key: '5a6954546b3edccfa156aa9a69ee996c0048fb6e', class: {
+        const isImageTeaser = hasValue(this.imageTeaser);
+        const space = normalizeDeprecatedTShirtSize(this.space) || '';
+        return (h(Host, { key: '180887d5bdf129363bc1ea16a5bb61641ae05663', class: {
                 [`is-image-teaser`]: isImageTeaser,
-                [`is-image-teaser-${this.imageTeaser}`]: isImageTeaser && !isEmpty(this.imageTeaser),
+                [`is-image-teaser-${this.imageTeaser}`]: isImageTeaser && hasValue(this.imageTeaser),
                 [`is-square`]: this.square,
                 [`is-dense`]: this.dense,
-                [`is-${this.colorTypeClass}`]: !isEmpty(this.color) && this.colorTypeClass !== 'white',
-                [`has-space-${this.space}`]: !isEmpty(this.space),
+                [`is-${this.colorTypeClass}`]: hasValue(this.color) && this.colorTypeClass !== 'white',
+                [`has-space-${space}`]: hasValue(this.space),
                 [`is-outlined`]: hasOutline,
                 [`is-flat`]: hasOutline || !!this.flat,
                 [`is-tile`]: !!this.tile,
-            } }, h("slot", { key: '91bdbfea93a5103785f6253a767c3985593ff397', name: "picture" }), h("article", { key: '1399cdb4d3f587e1e1d5404a85dc2a7976282e49', id: "card", class: {
+            } }, h("slot", { key: 'f305737612e2932b295df5479a5853ba570f7279', name: "picture" }), h("article", { key: '51dc3fcb6756fe89fdf63f10cbc4ca4352d877d0', id: "card", class: {
                 [`is-fullheight`]: this.fullheight,
-                [`align-${this.align}`]: !isEmpty(this.align),
-            } }, h("slot", { key: '3c2b044cd753fc635c745dc3a6e11a69d8f57f32' }))));
+                [`align-${this.align}`]: hasValue(this.align),
+            } }, h("slot", { key: 'd2f923b925198c0b3dcc12f9051e3e4c99c6e56a' }))));
     }
     static get is() { return "ds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -363,7 +356,7 @@ export class Card {
             },
             "space": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
                     "original": "CardSpace",
                     "resolved": "\"\" | \"large\" | \"lg\" | \"md\" | \"medium\" | \"sm\" | \"small\" | undefined",
@@ -417,12 +410,6 @@ export class Card {
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "space",
-                "methodName": "spaceChanged"
-            }];
-    }
 }
 __decorate([
     Logger('card'),
@@ -431,54 +418,54 @@ __decorate([
     __metadata("design:returntype", void 0)
 ], Card.prototype, "createLogger", null);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "flat", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "tile", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "dense", void 0);
 __decorate([
-    ValidateOneOf(...CARD_IMAGE_TEASERS),
+    OneOf(CARD_IMAGE_TEASERS),
     __metadata("design:type", String)
 ], Card.prototype, "imageTeaser", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "square", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "outlined", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "inverted", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "clickable", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "selected", void 0);
 __decorate([
-    ValidateType('boolean'),
+    Type('boolean'),
     __metadata("design:type", Boolean)
 ], Card.prototype, "fullheight", void 0);
 __decorate([
-    ValidateOneOf(...CARD_ALIGNMENTS),
+    OneOf(CARD_ALIGNMENTS),
     __metadata("design:type", String)
 ], Card.prototype, "align", void 0);
 __decorate([
-    ValidateOneOf(...CARD_SPACES),
+    OneOf(CARD_SPACES),
     __metadata("design:type", String)
 ], Card.prototype, "space", void 0);
 __decorate([
-    ValidateOneOf(...CARD_COLORS),
+    OneOf(CARD_COLORS),
     __metadata("design:type", String)
 ], Card.prototype, "color", void 0);

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

@@ -0,0 +1 @@
+:host{--_carousel-gap: var(--carousel-gap, var(--mod-carousel-gap, var(--ds-carousel-gap)));--_carousel-control-color: var(--carousel-control-color, var(--mod-carousel-control-color, var(--ds-carousel-control-color)));--_carousel-scroll-fade-bg: var(--carousel-scroll-fade-bg, var(--mod-carousel-scroll-fade-bg, var(--ds-carousel-scroll-fade-bg)));--_carousel-scroll-btn-bg-active: var(--carousel-scroll-btn-bg-active, var(--mod-carousel-scroll-btn-bg-active, var(--ds-carousel-scroll-btn-background-active, var(--ds-alias-background-color-primary))));--_carousel-scroll-btn-bg-active-hover: var(--carousel-scroll-btn-bg-active-hover, var(--mod-carousel-scroll-btn-bg-active-hover, var(--ds-carousel-scroll-btn-background-active-hover, var(--ds-alias-background-color-primary-hover))));--_carousel-scroll-btn-bg-active-pressed: var(--carousel-scroll-btn-bg-active-pressed, var(--mod-carousel-scroll-btn-bg-active-pressed, var(--ds-carousel-scroll-btn-background-active-pressed, var(--ds-alias-background-color-primary-active))));--_carousel-scroll-btn-color-active: var(--carousel-scroll-btn-color-active, var(--mod-carousel-scroll-btn-color-active, var(--ds-carousel-scroll-btn-color-active, var(--ds-alias-text-color-white))));display:block}:host .carousel-track{display:flex;flex-direction:row;overflow-x:scroll;scrollbar-width:none;cursor:grab;user-select:none;-webkit-user-select:none}:host .carousel-track::-webkit-scrollbar{display:none}:host .carousel-track.is-dragging{cursor:grabbing;scroll-behavior:auto}:host .carousel-outer{display:flex;align-items:center}:host(.is-slide){display:flex;flex-direction:column;gap:1rem}:host(.is-slide) .carousel-track{scroll-snap-type:x mandatory;gap:0}:host(.is-slide) .pagination{align-self:center}:host(.is-slide) .carousel-outer{position:relative;display:block}:host(.is-slide) .scroll-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:2.5rem;height:2.5rem;padding:0;border:none;border-radius:9999px;background-color:var(--_carousel-scroll-btn-bg-active);color:var(--_carousel-scroll-btn-color-active);--mod-icon-color: currentColor;--icon-color: var(--_carousel-scroll-btn-color-active);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color 120ms ease}@media(hover: hover)and (pointer: fine){:host(.is-slide) .scroll-btn:hover{background-color:var(--_carousel-scroll-btn-bg-active-hover)}}:host(.is-slide) .scroll-btn:active{background-color:var(--_carousel-scroll-btn-bg-active-pressed)}:host(.is-slide) .scroll-btn--prev{left:1rem}:host(.is-slide) .scroll-btn--next{right:1rem}:host(.is-tile){display:block}:host(.is-tile) .carousel-outer{position:relative}:host(.is-tile) .carousel-track{flex:1;min-width:0;gap:var(--_carousel-gap);scroll-behavior:smooth}:host(.is-tile.has-overflow) .carousel-outer::before,:host(.is-tile.has-overflow) .carousel-outer::after{content:"";position:absolute;top:0;bottom:0;width:3rem;pointer-events:none;z-index:1;opacity:0;transition:opacity 120ms ease}:host(.is-tile.has-overflow) .carousel-outer::before{left:2.75rem;background:linear-gradient(to right, var(--_carousel-scroll-fade-bg), transparent)}:host(.is-tile.has-overflow) .carousel-outer::after{right:2.75rem;background:linear-gradient(to left, var(--_carousel-scroll-fade-bg), transparent)}:host(.is-tile.can-scroll-left) .carousel-outer::before{opacity:1}:host(.is-tile.can-scroll-right) .carousel-outer::after{opacity:1}:host(.is-tile) .scroll-btn{flex-shrink:0;width:0;height:2.5rem;min-width:0;max-width:2.5rem;max-height:2.5rem;margin:0;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border:none;border-radius:9999px;background:none;color:var(--_carousel-control-color);--mod-icon-color: currentColor;opacity:0;pointer-events:none;cursor:default;transition:width 120ms ease,min-width 120ms ease,margin 120ms ease,opacity 120ms ease,background-color 120ms ease,color 120ms ease}:host(.is-tile.has-overflow) .scroll-btn{width:2.5rem;min-width:2.5rem;opacity:.35}:host(.is-tile.has-overflow) .scroll-btn--prev{margin-right:.25rem}:host(.is-tile.has-overflow) .scroll-btn--next{margin-left:.25rem}:host(.is-tile.can-scroll-left) .scroll-btn--prev,:host(.is-tile.can-scroll-right) .scroll-btn--next{opacity:1;pointer-events:auto;cursor:pointer;background-color:var(--_carousel-scroll-btn-bg-active);color:var(--_carousel-scroll-btn-color-active);--icon-color: var(--_carousel-scroll-btn-color-active)}@media(hover: hover)and (pointer: fine){:host(.is-tile.can-scroll-left) .scroll-btn--prev:hover,:host(.is-tile.can-scroll-right) .scroll-btn--next:hover{background-color:var(--_carousel-scroll-btn-bg-active-hover)}}:host(.is-tile.can-scroll-left) .scroll-btn--prev:active,:host(.is-tile.can-scroll-right) .scroll-btn--next:active{background-color:var(--_carousel-scroll-btn-bg-active-pressed)}

package/dist/collection/components/carousel/carousel/carousel.i18n.js

@@ -0,0 +1,65 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const i18nDsCarousel = {
+    de: {
+        scrollLeft: 'Vorheriges Element',
+        scrollRight: 'Nächstes Element',
+        goToSlide: 'Zu Folie',
+        slideOf: 'von',
+    },
+    en: {
+        scrollLeft: 'Previous item',
+        scrollRight: 'Next item',
+        goToSlide: 'Go to slide',
+        slideOf: 'of',
+    },
+    fr: {
+        scrollLeft: 'Élément précédent',
+        scrollRight: 'Élément suivant',
+        goToSlide: 'Aller à la diapositive',
+        slideOf: 'sur',
+    },
+    it: {
+        scrollLeft: 'Elemento precedente',
+        scrollRight: 'Elemento successivo',
+        goToSlide: 'Vai alla diapositiva',
+        slideOf: 'di',
+    },
+    nl: {
+        scrollLeft: 'Vorig item',
+        scrollRight: 'Volgend item',
+        goToSlide: 'Ga naar dia',
+        slideOf: 'van',
+    },
+    es: {
+        scrollLeft: 'Elemento anterior',
+        scrollRight: 'Elemento siguiente',
+        goToSlide: 'Ir a la diapositiva',
+        slideOf: 'de',
+    },
+    pl: {
+        scrollLeft: 'Poprzedni element',
+        scrollRight: 'Następny element',
+        goToSlide: 'Przejdź do slajdu',
+        slideOf: 'z',
+    },
+    pt: {
+        scrollLeft: 'Item anterior',
+        scrollRight: 'Próximo item',
+        goToSlide: 'Ir para o slide',
+        slideOf: 'de',
+    },
+    sv: {
+        scrollLeft: 'Föregående objekt',
+        scrollRight: 'Nästa objekt',
+        goToSlide: 'Gå till bild',
+        slideOf: 'av',
+    },
+    fi: {
+        scrollLeft: 'Edellinen kohde',
+        scrollRight: 'Seuraava kohde',
+        goToSlide: 'Siirry diaan',
+        slideOf: 'kohteesta',
+    },
+};