@ds-mo/ui 14.28.0 → 14.29.1

package/dist/components/ds-card-navigation.js

@@ -1,2 +1,2 @@
-import{p as i,H as n,c as o,h as a,a as r,t as d}from"./index.js";import{d as t}from"./p-Cea7rROU.js";import{d as s}from"./p-aMyflqva.js";import{r as e}from"./p-rCeztgVn.js";const c=()=>`.ds-control--lg.sc-ds-card-navigation,.ds-control--lg.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation,.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation,.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-navigation-h,.ds-control--lg.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-navigation{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-navigation{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-navigation{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-navigation,.ds-chrome-header__trailing.sc-ds-card-navigation{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-navigation{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-navigation{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-navigation{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-navigation,.ds-chrome-header__description.sc-ds-card-navigation{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-navigation{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation .ds-chrome-header__description.sc-ds-card-navigation{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-navigation-h,.ds-interaction-fill.sc-ds-card-navigation{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before,.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before{z-index:1}.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-navigation-h,.ds-interaction-fill--bordered.sc-ds-card-navigation{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-navigation-h,.ds-interaction-fill--selected.sc-ds-card-navigation{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-navigation-h::after,.ds-interaction-fill--grouped.sc-ds-card-navigation::after,.ds-interaction-fill--grouped.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-navigation-h,.ds-interaction-fill--grouped.sc-ds-card-navigation{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-card-navigation-h>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill.sc-ds-card-navigation>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill__content.sc-ds-card-navigation{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-navigation-h,.ds-interaction-fill--on-faint.sc-ds-card-navigation{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-navigation-h,.ds-interaction-fill--on-medium.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-navigation-h,.ds-interaction-fill--on-bold.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-navigation-h,.ds-interaction-fill--on-strong.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-navigation-h,.ds-interaction-fill--on-translucent.sc-ds-card-navigation{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-navigation-h,.ds-interaction-fill--on-inverted.sc-ds-card-navigation{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-navigation-h,.ds-interaction-fill--on-media.sc-ds-card-navigation{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-navigation-h,.ds-interaction-fill--on-always-dark.sc-ds-card-navigation{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-navigation-h,.ds-interaction-fill--on-navigation.sc-ds-card-navigation{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-navigation-h,.ds-focus-ring.sc-ds-card-navigation,.ds-focus-ring-inset.sc-ds-card-navigation-h,.ds-focus-ring-inset.sc-ds-card-navigation{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring.sc-ds-card-navigation:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-navigation-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-navigation-width);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.card-navigation--content.sc-ds-card-navigation-h{min-height:var(--_card-navigation-min-height)}.sc-ds-card-navigation-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-navigation__target.sc-ds-card-navigation{color:inherit;text-decoration:none;cursor:pointer}.card-navigation__header.sc-ds-card-navigation{flex:0 0 auto;border-radius:inherit}.card-navigation--content.sc-ds-card-navigation-h .card-navigation__header.sc-ds-card-navigation{border-radius:var(--dimension-radius-125) var(--dimension-radius-125) 0 0;--ds-interaction-divider-width:var(--dimension-stroke-width-012);--ds-interaction-divider-color:var(--color-border-tertiary)}.card-navigation__copy.sc-ds-card-navigation{min-height:var(--dimension-size-400);justify-content:center}ds-text.card-navigation__title.sc-ds-card-navigation,ds-text.card-navigation__description.sc-ds-card-navigation{overflow-wrap:anywhere}.card-navigation__chevron.sc-ds-card-navigation{justify-content:center;width:var(--dimension-size-400);color:var(--color-foreground-secondary)}.card-navigation__body.sc-ds-card-navigation{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-125) var(--dimension-radius-125)}@media (forced-colors: active){.sc-ds-card-navigation-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-navigation-h::after{box-shadow:none}}`;const l={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const v={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const g=i(class i extends n{constructor(i){super();if(i!==false){this.__registerHost()}this.dsNavigate=o(this,"dsNavigate",7);this.variant="navigation-only";this.cardWidth="md"}handleNavigation(i,n){const o=this.dsNavigate.emit({href:i,originalEvent:n});if(o.defaultPrevented)n.preventDefault()}renderHeader(i){const n=i?"a":"div";const o=this.description?.trim();return a(n,{class:{"card-navigation__target":true,"card-navigation__header":true,"ds-chrome-header":true,"ds-interaction-fill":!!i,"ds-focus-ring-inset":!!i},href:i,onClick:i?n=>this.handleNavigation(i,n):undefined},a("div",{class:{"card-navigation__copy":true,"ds-chrome-header__copy":true,"ds-chrome-header__copy--stacked":!!o,"ds-control--md":true,"ds-interaction-fill__content":true}},a("ds-text",{class:"card-navigation__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),o?a("ds-text",{class:"card-navigation__description ds-chrome-header__description",variant:"text-body-small",color:"secondary",as:"span"},o):null),a("span",{class:"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content"},a("ds-icon",{name:"ChevronRight",size:"md",color:"inherit","aria-hidden":"true"})))}render(){const i=e(this.href);const n=this.variant==="content";return a(r,{key:"9c415359fdb26adcdd4427a647fb7cbcbd892875",class:{"card-navigation":true,"card-navigation--navigation-only":!n,"card-navigation--content":n},style:{"--_card-navigation-width":l[this.cardWidth],"--_card-navigation-min-height":v[this.cardWidth]}},this.renderHeader(i),n?a("div",{class:"card-navigation__body"},a("slot",null)):null)}static get style(){return c()}},[262,"ds-card-navigation",{href:[1],heading:[1],description:[1],variant:[1],cardWidth:[1,"card-width"]}]);function h(){if(typeof customElements==="undefined"){return}const i=["ds-card-navigation","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-card-navigation":if(!customElements.get(d(i))){customElements.define(d(i),g)}break;case"ds-icon":if(!customElements.get(d(i))){t()}break;case"ds-text":if(!customElements.get(d(i))){s()}break}}))}h();const f=g;const u=h;export{f as DsCardNavigation,u as defineCustomElement};
+import{p as i,H as n,c as o,h as a,a as r,t as d}from"./index.js";import{d as t}from"./p-Cea7rROU.js";import{d as s}from"./p-aMyflqva.js";import{r as e}from"./p-rCeztgVn.js";const c=()=>`.ds-control--lg.sc-ds-card-navigation,.ds-control--lg.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation,.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation,.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-navigation-h,.ds-control--lg.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-navigation-h,.ds-control--md.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-navigation-h,.ds-control--sm.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-navigation-h,.ds-control--xs.sc-ds-card-navigation{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-navigation{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-navigation{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-navigation{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-navigation,.ds-chrome-header__trailing.sc-ds-card-navigation{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-navigation{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-navigation{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-navigation{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-navigation,.ds-chrome-header__description.sc-ds-card-navigation{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-navigation{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-navigation .ds-chrome-header__description.sc-ds-card-navigation{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-navigation-h,.ds-interaction-fill.sc-ds-card-navigation{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before,.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-navigation-h::before,.ds-interaction-fill.sc-ds-card-navigation::before{z-index:1}.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-navigation-h,.ds-interaction-fill--bordered.sc-ds-card-navigation{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-navigation-h,.ds-interaction-fill--selected.sc-ds-card-navigation{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-navigation-h::after,.ds-interaction-fill--grouped.sc-ds-card-navigation::after,.ds-interaction-fill--grouped.sc-ds-card-navigation-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-navigation-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-navigation:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-navigation-h,.ds-interaction-fill--grouped.sc-ds-card-navigation{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-card-navigation-h>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill.sc-ds-card-navigation>.ds-interaction-fill__content.sc-ds-card-navigation,.ds-interaction-fill__content.sc-ds-card-navigation{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-navigation-h,.ds-interaction-fill--on-faint.sc-ds-card-navigation{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-navigation-h,.ds-interaction-fill--on-medium.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-navigation-h,.ds-interaction-fill--on-bold.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-navigation-h,.ds-interaction-fill--on-strong.sc-ds-card-navigation{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-navigation-h,.ds-interaction-fill--on-translucent.sc-ds-card-navigation{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-navigation-h,.ds-interaction-fill--on-inverted.sc-ds-card-navigation{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-navigation-h,.ds-interaction-fill--on-media.sc-ds-card-navigation{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-navigation-h,.ds-interaction-fill--on-always-dark.sc-ds-card-navigation{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-navigation-h,.ds-interaction-fill--on-navigation.sc-ds-card-navigation{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-navigation-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-navigation:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-navigation-h::after,.ds-interaction-fill.sc-ds-card-navigation::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-card-navigation-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-card-navigation:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-card-navigation-h::before,.ds-interaction-fill--selected.sc-ds-card-navigation::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-navigation-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-navigation:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-navigation-h,.ds-focus-ring.sc-ds-card-navigation,.ds-focus-ring-inset.sc-ds-card-navigation-h,.ds-focus-ring-inset.sc-ds-card-navigation{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring.sc-ds-card-navigation:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-navigation{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-navigation-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-navigation:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-navigation::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-navigation-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-card-navigation:root,.sc-ds-card-navigation-h,.ds-forced-colors-scope.sc-ds-card-navigation{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-navigation-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-navigation-width);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.card-navigation--content.sc-ds-card-navigation-h{min-height:var(--_card-navigation-min-height)}.sc-ds-card-navigation-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-navigation__target.sc-ds-card-navigation{color:inherit;text-decoration:none;cursor:pointer}.card-navigation__header.sc-ds-card-navigation{flex:0 0 auto;border-radius:inherit}.card-navigation--content.sc-ds-card-navigation-h .card-navigation__header.sc-ds-card-navigation{border-radius:var(--dimension-radius-125) var(--dimension-radius-125) 0 0;--ds-interaction-divider-width:var(--dimension-stroke-width-012);--ds-interaction-divider-color:var(--color-border-tertiary)}.card-navigation__copy.sc-ds-card-navigation{min-height:var(--dimension-size-400);justify-content:center}ds-text.card-navigation__title.sc-ds-card-navigation,ds-text.card-navigation__description.sc-ds-card-navigation{overflow-wrap:anywhere}.card-navigation__chevron.sc-ds-card-navigation{justify-content:center;width:var(--dimension-size-400);color:var(--color-foreground-secondary)}.card-navigation__body.sc-ds-card-navigation{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-125) var(--dimension-radius-125)}@media (forced-colors: active){.sc-ds-card-navigation-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-navigation-h::after{box-shadow:none}}`;const l={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const v={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const g=i(class i extends n{constructor(i){super();if(i!==false){this.__registerHost()}this.dsNavigate=o(this,"dsNavigate",7);this.variant="navigation-only";this.cardWidth="md"}handleNavigation(i,n){const o=this.dsNavigate.emit({href:i,originalEvent:n});if(o.defaultPrevented)n.preventDefault()}renderHeader(i){const n=i?"a":"div";const o=this.description?.trim();return a(n,{class:{"card-navigation__target":true,"card-navigation__header":true,"ds-chrome-header":true,"ds-interaction-fill":!!i,"ds-focus-ring-inset":!!i},href:i,onClick:i?n=>this.handleNavigation(i,n):undefined},a("div",{class:{"card-navigation__copy":true,"ds-chrome-header__copy":true,"ds-chrome-header__copy--stacked":!!o,"ds-control--md":true,"ds-interaction-fill__content":true}},a("ds-text",{class:"card-navigation__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),o?a("ds-text",{class:"card-navigation__description ds-chrome-header__description",variant:"text-body-small",color:"secondary",as:"span"},o):null),a("span",{class:"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content"},a("ds-icon",{name:"ChevronRight",size:"md",color:"inherit","aria-hidden":"true"})))}render(){const i=e(this.href);const n=this.variant==="content";return a(r,{key:"9c415359fdb26adcdd4427a647fb7cbcbd892875",class:{"card-navigation":true,"card-navigation--navigation-only":!n,"card-navigation--content":n},style:{"--_card-navigation-width":l[this.cardWidth],"--_card-navigation-min-height":v[this.cardWidth]}},this.renderHeader(i),n?a("div",{class:"card-navigation__body"},a("slot",null)):null)}static get style(){return c()}},[262,"ds-card-navigation",{href:[1],heading:[1],description:[1],variant:[1],cardWidth:[1,"card-width"]}]);function f(){if(typeof customElements==="undefined"){return}const i=["ds-card-navigation","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-card-navigation":if(!customElements.get(d(i))){customElements.define(d(i),g)}break;case"ds-icon":if(!customElements.get(d(i))){t()}break;case"ds-text":if(!customElements.get(d(i))){s()}break}}))}f();const h=g;const u=f;export{h as DsCardNavigation,u as defineCustomElement};
 //# sourceMappingURL=ds-card-navigation.js.map

package/dist/components/ds-card-navigation.js.map

@@ -1 +1 @@
-{"version":3,"names":["cardNavigationCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardNavigation","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","handleNavigation","href","originalEvent","navigateEvent","dsNavigate","emit","defaultPrevented","preventDefault","renderHeader","Target","description","trim","h","class","onClick","event","undefined","emphasis","color","as","heading","name","size","render","resolveSafeUrl","hasContent","Host","key","style"],"sources":["src/wc/components/CardNavigation/CardNavigation.css?tag=ds-card-navigation&encapsulation=scoped","src/wc/components/CardNavigation/CardNavigation.tsx"],"sourcesContent":["@import '../../utils/chrome-header.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-navigation-width);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host(.card-navigation--content) {\n  min-height: var(--_card-navigation-min-height);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-navigation__target {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.card-navigation__header {\n  flex: 0 0 auto;\n  border-radius: inherit;\n}\n\n:host(.card-navigation--content) .card-navigation__header {\n  border-radius: var(--dimension-radius-125) var(--dimension-radius-125) 0 0;\n  --ds-interaction-divider-width: var(--dimension-stroke-width-012);\n  --ds-interaction-divider-color: var(--color-border-tertiary);\n}\n\n.card-navigation__copy {\n  min-height: var(--dimension-size-400);\n  justify-content: center;\n}\n\nds-text.card-navigation__title,\nds-text.card-navigation__description {\n  overflow-wrap: anywhere;\n}\n\n.card-navigation__chevron {\n  justify-content: center;\n  width: var(--dimension-size-400);\n  color: var(--color-foreground-secondary);\n}\n\n.card-navigation__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-125) var(--dimension-radius-125);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\n\nexport type CardNavigationWidth = 'sm' | 'md' | 'lg';\nexport type CardNavigationVariant = 'navigation-only' | 'content';\n\nexport interface CardNavigationDetail {\n  href: string;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n@Component({\n  tag: 'ds-card-navigation',\n  styleUrl: 'CardNavigation.css',\n  scoped: true,\n})\nexport class CardNavigation {\n  /** Destination for the card's native link. */\n  @Prop() href!: string;\n\n  /** Section or destination heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string | undefined;\n\n  /**\n   * `navigation-only` makes the complete card the link. `content` keeps the\n   * header as the link and exposes a non-interactive body slot below it.\n   */\n  @Prop() variant: CardNavigationVariant = 'navigation-only';\n\n  /** Card width token (`sm` / `md` / `lg`). */\n  @Prop() cardWidth: CardNavigationWidth = 'md';\n\n  /**\n   * Emits before native navigation. Prevent this event to take over routing;\n   * the component will then prevent the original link navigation.\n   */\n  @Event({ cancelable: true }) dsNavigate!: EventEmitter<CardNavigationDetail>;\n\n  private handleNavigation(href: string, originalEvent: MouseEvent) {\n    const navigateEvent = this.dsNavigate.emit({ href, originalEvent });\n    if (navigateEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderHeader(href: string | undefined) {\n    const Target = href ? 'a' : 'div';\n    const description = this.description?.trim();\n\n    return (\n      <Target\n        class={{\n          'card-navigation__target': true,\n          'card-navigation__header': true,\n          'ds-chrome-header': true,\n          'ds-interaction-fill': !!href,\n          'ds-focus-ring-inset': !!href,\n        }}\n        href={href}\n        onClick={href ? (event: MouseEvent) => this.handleNavigation(href, event) : undefined}\n      >\n        <div\n          class={{\n            'card-navigation__copy': true,\n            'ds-chrome-header__copy': true,\n            'ds-chrome-header__copy--stacked': !!description,\n            'ds-control--md': true,\n            'ds-interaction-fill__content': true,\n          }}\n        >\n          <ds-text\n            class=\"card-navigation__title ds-chrome-header__heading\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          {description ? (\n            <ds-text\n              class=\"card-navigation__description ds-chrome-header__description\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              as=\"span\"\n            >\n              {description}\n            </ds-text>\n          ) : null}\n        </div>\n        <span class=\"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content\">\n          <ds-icon name=\"ChevronRight\" size=\"md\" color=\"inherit\" aria-hidden=\"true\" />\n        </span>\n      </Target>\n    );\n  }\n\n  render() {\n    const href = resolveSafeUrl(this.href);\n    const hasContent = this.variant === 'content';\n\n    return (\n      <Host\n        class={{\n          'card-navigation': true,\n          'card-navigation--navigation-only': !hasContent,\n          'card-navigation--content': hasContent,\n        }}\n        style={{\n          '--_card-navigation-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-navigation-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        {this.renderHeader(href)}\n        {hasContent ? (\n          <div class=\"card-navigation__body\">\n            <slot />\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAoB,IAAM,o0gBCWhC,MAAMC,EAAuD,CAC3DC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAwD,CAC5DH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mC,MAQOE,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,mFAmBUC,KAAAC,QAAiC,kBAGjCD,KAAAE,UAAiC,IA0F1C,CAlFS,gBAAAC,CAAiBC,EAAcC,GACrC,MAAMC,EAAgBN,KAAKO,WAAWC,KAAK,CAAEJ,OAAMC,kBACnD,GAAIC,EAAcG,iBAAkBJ,EAAcK,gB,CAG5C,YAAAC,CAAaP,GACnB,MAAMQ,EAASR,EAAO,IAAM,MAC5B,MAAMS,EAAcb,KAAKa,aAAaC,OAEtC,OACEC,EAACH,EAAM,CACLI,MAAO,CACL,0BAA2B,KAC3B,0BAA2B,KAC3B,mBAAoB,KACpB,wBAAyBZ,EACzB,wBAAyBA,GAE3BA,KAAMA,EACNa,QAASb,EAAQc,GAAsBlB,KAAKG,iBAAiBC,EAAMc,GAASC,WAE5EJ,EAAA,OACEC,MAAO,CACL,wBAAyB,KACzB,yBAA0B,KAC1B,oCAAqCH,EACrC,iBAAkB,KAClB,+BAAgC,OAGlCE,EAAA,WACEC,MAAM,mDACNf,QAAQ,mBACRmB,SAAQ,KACRC,MAAM,UACNC,GAAG,MAEFtB,KAAKuB,SAEPV,EACCE,EAAA,WACEC,MAAM,6DACNf,QAAQ,kBACRoB,MAAM,YACNC,GAAG,QAEFT,GAED,MAENE,EAAA,QAAMC,MAAM,oFACVD,EAAA,WAASS,KAAK,eAAeC,KAAK,KAAKJ,MAAM,UAAS,cAAa,U,CAM3E,MAAAK,GACE,MAAMtB,EAAOuB,EAAe3B,KAAKI,MACjC,MAAMwB,EAAa5B,KAAKC,UAAY,UAEpC,OACEc,EAACc,EAAI,CAAAC,IAAA,2CACHd,MAAO,CACL,kBAAmB,KACnB,oCAAqCY,EACrC,2BAA4BA,GAE9BG,MAAO,CACL,2BAA4BzC,EAAgBU,KAAKE,WACjD,gCAAiCR,EAAiBM,KAAKE,aAGxDF,KAAKW,aAAaP,GAClBwB,EACCb,EAAA,OAAKC,MAAM,yBACTD,EAAA,cAEA,K","ignoreList":[]}
+{"version":3,"names":["cardNavigationCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardNavigation","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","handleNavigation","href","originalEvent","navigateEvent","dsNavigate","emit","defaultPrevented","preventDefault","renderHeader","Target","description","trim","h","class","onClick","event","undefined","emphasis","color","as","heading","name","size","render","resolveSafeUrl","hasContent","Host","key","style"],"sources":["src/wc/components/CardNavigation/CardNavigation.css?tag=ds-card-navigation&encapsulation=scoped","src/wc/components/CardNavigation/CardNavigation.tsx"],"sourcesContent":["@import '../../utils/chrome-header.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-navigation-width);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host(.card-navigation--content) {\n  min-height: var(--_card-navigation-min-height);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-navigation__target {\n  color: inherit;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.card-navigation__header {\n  flex: 0 0 auto;\n  border-radius: inherit;\n}\n\n:host(.card-navigation--content) .card-navigation__header {\n  border-radius: var(--dimension-radius-125) var(--dimension-radius-125) 0 0;\n  --ds-interaction-divider-width: var(--dimension-stroke-width-012);\n  --ds-interaction-divider-color: var(--color-border-tertiary);\n}\n\n.card-navigation__copy {\n  min-height: var(--dimension-size-400);\n  justify-content: center;\n}\n\nds-text.card-navigation__title,\nds-text.card-navigation__description {\n  overflow-wrap: anywhere;\n}\n\n.card-navigation__chevron {\n  justify-content: center;\n  width: var(--dimension-size-400);\n  color: var(--color-foreground-secondary);\n}\n\n.card-navigation__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-125) var(--dimension-radius-125);\n}\n\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { resolveSafeUrl } from '../../utils';\n\nexport type CardNavigationWidth = 'sm' | 'md' | 'lg';\nexport type CardNavigationVariant = 'navigation-only' | 'content';\n\nexport interface CardNavigationDetail {\n  href: string;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardNavigationWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n@Component({\n  tag: 'ds-card-navigation',\n  styleUrl: 'CardNavigation.css',\n  scoped: true,\n})\nexport class CardNavigation {\n  /** Destination for the card's native link. */\n  @Prop() href!: string;\n\n  /** Section or destination heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string | undefined;\n\n  /**\n   * `navigation-only` makes the complete card the link. `content` keeps the\n   * header as the link and exposes a non-interactive body slot below it.\n   */\n  @Prop() variant: CardNavigationVariant = 'navigation-only';\n\n  /** Card width token (`sm` / `md` / `lg`). */\n  @Prop() cardWidth: CardNavigationWidth = 'md';\n\n  /**\n   * Emits before native navigation. Prevent this event to take over routing;\n   * the component will then prevent the original link navigation.\n   */\n  @Event({ cancelable: true }) dsNavigate!: EventEmitter<CardNavigationDetail>;\n\n  private handleNavigation(href: string, originalEvent: MouseEvent) {\n    const navigateEvent = this.dsNavigate.emit({ href, originalEvent });\n    if (navigateEvent.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderHeader(href: string | undefined) {\n    const Target = href ? 'a' : 'div';\n    const description = this.description?.trim();\n\n    return (\n      <Target\n        class={{\n          'card-navigation__target': true,\n          'card-navigation__header': true,\n          'ds-chrome-header': true,\n          'ds-interaction-fill': !!href,\n          'ds-focus-ring-inset': !!href,\n        }}\n        href={href}\n        onClick={href ? (event: MouseEvent) => this.handleNavigation(href, event) : undefined}\n      >\n        <div\n          class={{\n            'card-navigation__copy': true,\n            'ds-chrome-header__copy': true,\n            'ds-chrome-header__copy--stacked': !!description,\n            'ds-control--md': true,\n            'ds-interaction-fill__content': true,\n          }}\n        >\n          <ds-text\n            class=\"card-navigation__title ds-chrome-header__heading\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          {description ? (\n            <ds-text\n              class=\"card-navigation__description ds-chrome-header__description\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              as=\"span\"\n            >\n              {description}\n            </ds-text>\n          ) : null}\n        </div>\n        <span class=\"card-navigation__chevron ds-chrome-header__trailing ds-interaction-fill__content\">\n          <ds-icon name=\"ChevronRight\" size=\"md\" color=\"inherit\" aria-hidden=\"true\" />\n        </span>\n      </Target>\n    );\n  }\n\n  render() {\n    const href = resolveSafeUrl(this.href);\n    const hasContent = this.variant === 'content';\n\n    return (\n      <Host\n        class={{\n          'card-navigation': true,\n          'card-navigation--navigation-only': !hasContent,\n          'card-navigation--content': hasContent,\n        }}\n        style={{\n          '--_card-navigation-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-navigation-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        {this.renderHeader(href)}\n        {hasContent ? (\n          <div class=\"card-navigation__body\">\n            <slot />\n          </div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAoB,IAAM,k/hBCWhC,MAAMC,EAAuD,CAC3DC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAwD,CAC5DH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mC,MAQOE,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,mFAmBUC,KAAAC,QAAiC,kBAGjCD,KAAAE,UAAiC,IA0F1C,CAlFS,gBAAAC,CAAiBC,EAAcC,GACrC,MAAMC,EAAgBN,KAAKO,WAAWC,KAAK,CAAEJ,OAAMC,kBACnD,GAAIC,EAAcG,iBAAkBJ,EAAcK,gB,CAG5C,YAAAC,CAAaP,GACnB,MAAMQ,EAASR,EAAO,IAAM,MAC5B,MAAMS,EAAcb,KAAKa,aAAaC,OAEtC,OACEC,EAACH,EAAM,CACLI,MAAO,CACL,0BAA2B,KAC3B,0BAA2B,KAC3B,mBAAoB,KACpB,wBAAyBZ,EACzB,wBAAyBA,GAE3BA,KAAMA,EACNa,QAASb,EAAQc,GAAsBlB,KAAKG,iBAAiBC,EAAMc,GAASC,WAE5EJ,EAAA,OACEC,MAAO,CACL,wBAAyB,KACzB,yBAA0B,KAC1B,oCAAqCH,EACrC,iBAAkB,KAClB,+BAAgC,OAGlCE,EAAA,WACEC,MAAM,mDACNf,QAAQ,mBACRmB,SAAQ,KACRC,MAAM,UACNC,GAAG,MAEFtB,KAAKuB,SAEPV,EACCE,EAAA,WACEC,MAAM,6DACNf,QAAQ,kBACRoB,MAAM,YACNC,GAAG,QAEFT,GAED,MAENE,EAAA,QAAMC,MAAM,oFACVD,EAAA,WAASS,KAAK,eAAeC,KAAK,KAAKJ,MAAM,UAAS,cAAa,U,CAM3E,MAAAK,GACE,MAAMtB,EAAOuB,EAAe3B,KAAKI,MACjC,MAAMwB,EAAa5B,KAAKC,UAAY,UAEpC,OACEc,EAACc,EAAI,CAAAC,IAAA,2CACHd,MAAO,CACL,kBAAmB,KACnB,oCAAqCY,EACrC,2BAA4BA,GAE9BG,MAAO,CACL,2BAA4BzC,EAAgBU,KAAKE,WACjD,gCAAiCR,EAAiBM,KAAKE,aAGxDF,KAAKW,aAAaP,GAClBwB,EACCb,EAAA,OAAKC,MAAM,yBACTD,EAAA,cAEA,K","ignoreList":[]}

package/dist/components/ds-card-overview.js

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as i,f as o,h as s,a as d,t}from"./index.js";import{d as c}from"./p-DDOuPq-N.js";import{d as a}from"./p-1gt8QlyW.js";import{d as n}from"./p-aMyflqva.js";import{d as v}from"./p-CN8PQLZu.js";import{r as l}from"./p-CochmPyg.js";import{T as f}from"./p-CUL5_8JM.js";function h(e){const r=Math.max(1,Math.floor(e.cellCount));const i=Math.max(1,e.minCellWidth);const o=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/i));if(o>=r)return r;for(let e=o;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/o);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const i=Math.max(e.expandedHeight,r);const o=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,i-r);const d=s*o;return{active:o>0&&s>0,expandedHeight:i,offset:d,visibleHeight:i-d}}function u(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function m(e,r,i){for(let o=1;o<=e.length;o+=1){const s=((r+i*o)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const p=()=>`@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before,.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before{z-index:1}.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-overview-h,.ds-interaction-fill--bordered.sc-ds-card-overview{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-overview-h,.ds-interaction-fill--selected.sc-ds-card-overview{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-overview-h::after,.ds-interaction-fill--grouped.sc-ds-card-overview::after,.ds-interaction-fill--grouped.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-overview-h,.ds-interaction-fill--grouped.sc-ds-card-overview{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-card-overview-h>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill.sc-ds-card-overview>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill__content.sc-ds-card-overview{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-overview-h,.ds-interaction-fill--on-faint.sc-ds-card-overview{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-overview-h,.ds-interaction-fill--on-medium.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-overview-h,.ds-interaction-fill--on-bold.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-overview-h,.ds-interaction-fill--on-strong.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-overview-h,.ds-interaction-fill--on-translucent.sc-ds-card-overview{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-overview-h,.ds-interaction-fill--on-inverted.sc-ds-card-overview{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-overview-h,.ds-interaction-fill--on-media.sc-ds-card-overview{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-overview-h,.ds-interaction-fill--on-always-dark.sc-ds-card-overview{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-control--lg.sc-ds-card-overview,.ds-control--lg.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview,.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview,.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-card-overview{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-card-overview{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-card-overview{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-card-overview{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-card-overview{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-elevation.sc-ds-card-overview-h,.ds-control-elevation.sc-ds-card-overview{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-overview-h::after,.ds-control-elevation.sc-ds-card-overview::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-overview-h,.ds-control-elevation--sm.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-overview-h,.ds-control-elevation--md.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-overview-h,.ds-control-elevation--floating.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-overview{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-overview,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:none;transition:none}}.sc-ds-card-overview-h{display:block;box-sizing:border-box;container-type:inline-size;-webkit-user-select:none;user-select:none;--ds-card-overview-metric-min:calc(var(--dimension-size-400) * 5);--ds-card-overview-divider-width:var(--dimension-stroke-width-012);--ds-card-overview-divider-color:var(--color-always-dark-border-tertiary);color:var(--color-always-dark-foreground-primary)}.card-overview__surface.sc-ds-card-overview{width:100%;min-width:0;box-sizing:border-box;border-radius:var(--dimension-radius-125);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow-anchor:none}.card-overview__clip.sc-ds-card-overview{height:100%;min-width:0;border-radius:inherit;background:inherit;overflow:hidden}.card-overview--scroll-collapsing.sc-ds-card-overview-h{height:var(--ds-card-overview-expanded-height);pointer-events:none}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview{height:var(--ds-card-overview-visible-height);pointer-events:auto;will-change:height}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{transform:translateY(calc(-1 * var(--ds-card-overview-content-offset)));will-change:transform}.card-overview__layout.sc-ds-card-overview{display:flex;flex-direction:column;min-width:0}.card-overview__summary.sc-ds-card-overview{position:relative;z-index:1;flex:0 0 auto;min-width:0;background:var(--color-always-dark-background)}.card-overview__header.sc-ds-card-overview{display:flex;position:relative;align-items:center;gap:0;width:100%;height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box}.card-overview__header.sc-ds-card-overview::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--ds-card-overview-divider-width);background:var(--ds-card-overview-divider-color);pointer-events:none}.card-overview__period.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;gap:0;min-width:0;min-height:var(--ds-control-height);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview,.card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview__period-current.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center}.card-overview__period-fixed.sc-ds-card-overview{flex:0 1 auto;min-width:0}.card-overview__period-comparison.sc-ds-card-overview{flex:0 0 auto}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;min-width:0}.card-overview__body.sc-ds-card-overview{display:flex;position:relative;z-index:0;flex-direction:column;min-width:0;transform:translateY(0)}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat(     var(--ds-card-overview-grid-columns, auto-fit),     minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)   );align-content:stretch;min-width:0;overflow:clip}.card-overview__score.sc-ds-card-overview,.card-overview__metric.sc-ds-card-overview{display:flex;min-width:0;padding:var(--dimension-space-100);box-shadow:var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),     0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview,.card-overview__metric-action.sc-ds-card-overview{display:flex;flex:1 1 auto;min-width:0;padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview{align-items:center;justify-content:flex-start;padding-inline-start:var(--dimension-space-100);gap:var(--dimension-space-100)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--dimension-space-050);min-width:0}.card-overview__score-label-spacer.sc-ds-card-overview{visibility:hidden}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;padding-inline-start:var(--dimension-space-075);border:var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);background:transparent;color:var(--color-always-dark-foreground-negative);text-align:center}.card-overview__metric-action.sc-ds-card-overview{flex-direction:column;justify-content:center;gap:var(--dimension-space-050)}.card-overview__metric-action[role='button'].sc-ds-card-overview{cursor:default}.card-overview__metric-content.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:var(--dimension-space-050);min-width:0}.card-overview__metric-label.sc-ds-card-overview{min-width:0}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__metrics.sc-ds-card-overview{grid-template-columns:minmax(0, 1fr)}.card-overview--compact.sc-ds-card-overview-h{height:var(--dimension-size-600);min-height:var(--dimension-size-600)}.card-overview--compact.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__clip.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{width:100%;height:100%}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview::after{display:none}@media (forced-colors: active){.card-overview__header.sc-ds-card-overview::after{background:var(--ds-forced-color-content)}.card-overview__score-content--error.sc-ds-card-overview{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const g="200px";const b=5;const _=7;const x={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const y="var(--color-always-dark-foreground-primary)";const k="var(--color-always-dark-foreground-secondary)";const z=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect",7);this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=g;this.isLoading=false;this.overviewLabel="Overview";this.scrollCollapseProgress=0;this.focusedMetricIndex=0;this.expandedHeight=0;this.layoutResizeObserver=null;this.handleMetricKeyDown=(e,r)=>{switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault();this.moveFocus(r,1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault();this.moveFocus(r,-1);break}}}componentDidLoad(){this.observeLayout()}componentDidRender(){if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=undefined;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,_)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||b}get resolvedScrollCollapseProgress(){if(this.variant==="compact"||!Number.isFinite(this.scrollCollapseProgress))return 0;return Math.min(1,Math.max(0,this.scrollCollapseProgress))}get scrollCollapseGeometry(){const e=l(f.size600,48);return w({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!e)return;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const r=e[0]?.contentRect;if(!r)return;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=requestAnimationFrame((()=>{this.layoutResizeFrame=undefined;this.updateLayoutGeometry(r.width,r.height)}))}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!i)return;const s=e===undefined||r===undefined?i.getBoundingClientRect():null;const d=e??s?.width??0;const t=r??s?.height??0;let c=false;if(t>0&&Math.abs(t-this.expandedHeight)>=.5){this.expandedHeight=t;c=true}const a=h({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:l(this.metricMinWidth,g)});if(a!==this.gridColumns){this.gridColumns=a;c=true}if(this.gridColumns){this.el.style.setProperty("--ds-card-overview-grid-columns",String(this.gridColumns))}else{this.el.style.removeProperty("--ds-card-overview-grid-columns")}if(c)o(this)}get rovingIndex(){return u(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.visibleMetrics;const o=m(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric-action");s[o]?.focus()}bar(e,r,i){return s("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r){if(!e)return null;return s("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,color:x[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",isLoading:true}),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label-spacer"),this.bar("text-body-medium","28px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return s("div",{class:"card-overview__score",part:"score"},s("ds-text",{as:"span",class:"card-overview__score-content card-overview__score-content--error",variant:"text-body-medium",color:"inherit",role:"alert"},e))}const r=this.score;if(!r)return null;return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",value:r.value,level:r.level,label:"Safety score"}),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label-spacer ds-control-label-box",variant:"text-body-small",color:k,"aria-hidden":"true"}," "),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const i=!e.isInactive;const o=s("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:k},e.label);return s("div",{class:"card-overview__metric",part:"metric"},s("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},role:i?"button":undefined,tabIndex:i&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(i)this.focusedMetricIndex=r}},s("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?s("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},o):o,s("div",{class:"card-overview__metric-figure"},s("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:y,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))))}renderMetrics(){if(this.isLoading){return[this.renderScore(),...Array.from({length:this.loadingMetricCount},((e,r)=>s("div",{class:"card-overview__metric",key:`loading-${r}`},s("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},s("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),s("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","40px"),this.bar("text-body-medium","28px")))))))]}return[this.renderScore(),...this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))]}render(){const e=this.variant==="compact";const r=this.scrollCollapseGeometry;const i={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){i["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){i["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;i["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;i["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(d,{key:"4dab390895a8c20d3a0e8572be91dd72fd20c041",class:{"card-overview":true,"card-overview--compact":e,"card-overview--stacked":!e&&this.layout==="stacked","card-overview--scroll-collapsing":r.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:i},s("div",{key:"a3e8a5ae5ced7ab810e4df0cfd4c3cc25cccabcf",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"54ac736f3430bcf2c3d3294369948ff2c70315dc",class:"card-overview__clip"},s("div",{key:"96a0ae5db78d39eccc173776d9e8846c0e742c54",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"c090e32e3433515e5ab1d93a4a9f6a4736a7ed06",class:"card-overview__summary"},s("div",{key:"2ee4a9587acde9a3af5af3e1db2486cb4ff29628",class:"card-overview__header ds-control--md"},s("div",{key:"71ddcab8413418e7ceed154eb779f2202f2f091c",class:"card-overview__period"},s("div",{key:"06c319bf394bbc1d1565538cc68ca1ff6917889a",class:"card-overview__period-current"},s("slot",{key:"4938e0022a44c122142e2b496948672eb8f569fb",name:"period"},this.periodLabel&&s("div",{key:"4ac52c4a3b658587524fd48eea40a73612b86b6c",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"9db11615d0364b52cc9e71c94c71dba9d2dea983",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"39e73b2d57b0a3be8c79973db96dd99eab3bbfa3",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"53ebec2ba9c525f56b71190ee27734fd8b17f3ae",class:"card-overview__filter"},s("slot",{key:"6939474ab938e1634636c1846b4b7f2c6b02fe4e",name:"filter"})))),!e&&s("div",{key:"e077ea2257b96948bacf6956d47f5ae264b1c75d",class:"card-overview__body"},s("div",{key:"02cb7c966897d2cde352379ddde8dfbb18338de4",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"c8ff111f17c1cff12990e56ad98fe06bcaa089b1",name:"footer"}))))))}get el(){return this}static get style(){return p()}},[262,"ds-card-overview",{variant:[1],layout:[1],score:[16],periodLabel:[1,"period-label"],comparisonLabel:[1,"comparison-label"],metrics:[16],metricMinWidth:[1,"metric-min-width"],isLoading:[4,"is-loading"],scoreErrorMessage:[1,"score-error-message"],overviewLabel:[1,"overview-label"],scrollCollapseProgress:[2,"scroll-collapse-progress"],focusedMetricIndex:[32],expandedHeight:[32],gridColumns:[32]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-score","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(t(e))){customElements.define(t(e),z)}break;case"ds-score":if(!customElements.get(t(e))){c()}break;case"ds-skeleton":if(!customElements.get(t(e))){a()}break;case"ds-text":if(!customElements.get(t(e))){n()}break;case"ds-tooltip":if(!customElements.get(t(e))){v()}break}}))}M();const C=z;const j=M;export{C as DsCardOverview,j as defineCustomElement};
+import{p as e,H as r,c as i,f as o,h as s,a as d,t}from"./index.js";import{d as c}from"./p-DDOuPq-N.js";import{d as a}from"./p-1gt8QlyW.js";import{d as n}from"./p-aMyflqva.js";import{d as v}from"./p-CN8PQLZu.js";import{r as l}from"./p-CochmPyg.js";import{T as f}from"./p-CUL5_8JM.js";function h(e){const r=Math.max(1,Math.floor(e.cellCount));const i=Math.max(1,e.minCellWidth);const o=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/i));if(o>=r)return r;for(let e=o;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/o);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const i=Math.max(e.expandedHeight,r);const o=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,i-r);const d=s*o;return{active:o>0&&s>0,expandedHeight:i,offset:d,visibleHeight:i-d}}function u(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function m(e,r,i){for(let o=1;o<=e.length;o+=1){const s=((r+i*o)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const p=()=>`@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before,.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before{z-index:1}.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-overview-h,.ds-interaction-fill--bordered.sc-ds-card-overview{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-overview-h,.ds-interaction-fill--selected.sc-ds-card-overview{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-overview-h::after,.ds-interaction-fill--grouped.sc-ds-card-overview::after,.ds-interaction-fill--grouped.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-overview-h,.ds-interaction-fill--grouped.sc-ds-card-overview{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-card-overview-h>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill.sc-ds-card-overview>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill__content.sc-ds-card-overview{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-overview-h,.ds-interaction-fill--on-faint.sc-ds-card-overview{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-overview-h,.ds-interaction-fill--on-medium.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-overview-h,.ds-interaction-fill--on-bold.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-overview-h,.ds-interaction-fill--on-strong.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-overview-h,.ds-interaction-fill--on-translucent.sc-ds-card-overview{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-overview-h,.ds-interaction-fill--on-inverted.sc-ds-card-overview{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-overview-h,.ds-interaction-fill--on-media.sc-ds-card-overview{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-overview-h,.ds-interaction-fill--on-always-dark.sc-ds-card-overview{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-overview-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-overview:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-card-overview-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-card-overview:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-control--lg.sc-ds-card-overview,.ds-control--lg.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview,.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview,.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-card-overview{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-card-overview{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-card-overview{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-card-overview{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-card-overview{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-elevation.sc-ds-card-overview-h,.ds-control-elevation.sc-ds-card-overview{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-overview-h::after,.ds-control-elevation.sc-ds-card-overview::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-overview-h,.ds-control-elevation--sm.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-overview-h,.ds-control-elevation--md.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-overview-h,.ds-control-elevation--floating.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-overview{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-overview,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:none;transition:none}}.sc-ds-card-overview-h{display:block;box-sizing:border-box;container-type:inline-size;-webkit-user-select:none;user-select:none;--ds-card-overview-metric-min:calc(var(--dimension-size-400) * 5);--ds-card-overview-divider-width:var(--dimension-stroke-width-012);--ds-card-overview-divider-color:var(--color-always-dark-border-tertiary);color:var(--color-always-dark-foreground-primary)}.card-overview__surface.sc-ds-card-overview{width:100%;min-width:0;box-sizing:border-box;border-radius:var(--dimension-radius-125);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow-anchor:none}.card-overview__clip.sc-ds-card-overview{height:100%;min-width:0;border-radius:inherit;background:inherit;overflow:hidden}.card-overview--scroll-collapsing.sc-ds-card-overview-h{height:var(--ds-card-overview-expanded-height);pointer-events:none}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview{height:var(--ds-card-overview-visible-height);pointer-events:auto;will-change:height}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{transform:translateY(calc(-1 * var(--ds-card-overview-content-offset)));will-change:transform}.card-overview__layout.sc-ds-card-overview{display:flex;flex-direction:column;min-width:0}.card-overview__summary.sc-ds-card-overview{position:relative;z-index:1;flex:0 0 auto;min-width:0;background:var(--color-always-dark-background)}.card-overview__header.sc-ds-card-overview{display:flex;position:relative;align-items:center;gap:0;width:100%;height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box}.card-overview__header.sc-ds-card-overview::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--ds-card-overview-divider-width);background:var(--ds-card-overview-divider-color);pointer-events:none}.card-overview__period.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;gap:0;min-width:0;min-height:var(--ds-control-height);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview,.card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview__period-current.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center}.card-overview__period-fixed.sc-ds-card-overview{flex:0 1 auto;min-width:0}.card-overview__period-comparison.sc-ds-card-overview{flex:0 0 auto}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;min-width:0}.card-overview__body.sc-ds-card-overview{display:flex;position:relative;z-index:0;flex-direction:column;min-width:0;transform:translateY(0)}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat(     var(--ds-card-overview-grid-columns, auto-fit),     minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)   );align-content:stretch;min-width:0;overflow:clip}.card-overview__score.sc-ds-card-overview,.card-overview__metric.sc-ds-card-overview{display:flex;min-width:0;padding:var(--dimension-space-100);box-shadow:var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),     0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview,.card-overview__metric-action.sc-ds-card-overview{display:flex;flex:1 1 auto;min-width:0;padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview{align-items:center;justify-content:flex-start;padding-inline-start:var(--dimension-space-100);gap:var(--dimension-space-100)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--dimension-space-050);min-width:0}.card-overview__score-label-spacer.sc-ds-card-overview{visibility:hidden}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;padding-inline-start:var(--dimension-space-075);border:var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);background:transparent;color:var(--color-always-dark-foreground-negative);text-align:center}.card-overview__metric-action.sc-ds-card-overview{flex-direction:column;justify-content:center;gap:var(--dimension-space-050)}.card-overview__metric-action[role='button'].sc-ds-card-overview{cursor:default}.card-overview__metric-content.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:var(--dimension-space-050);min-width:0}.card-overview__metric-label.sc-ds-card-overview{min-width:0}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__metrics.sc-ds-card-overview{grid-template-columns:minmax(0, 1fr)}.card-overview--compact.sc-ds-card-overview-h{height:var(--dimension-size-600);min-height:var(--dimension-size-600)}.card-overview--compact.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__clip.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{width:100%;height:100%}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview::after{display:none}@media (forced-colors: active){.card-overview__header.sc-ds-card-overview::after{background:var(--ds-forced-color-content)}.card-overview__score-content--error.sc-ds-card-overview{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const g="200px";const b=5;const _=7;const x={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const y="var(--color-always-dark-foreground-primary)";const k="var(--color-always-dark-foreground-secondary)";const z=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect",7);this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=g;this.isLoading=false;this.overviewLabel="Overview";this.scrollCollapseProgress=0;this.focusedMetricIndex=0;this.expandedHeight=0;this.layoutResizeObserver=null;this.handleMetricKeyDown=(e,r)=>{switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault();this.moveFocus(r,1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault();this.moveFocus(r,-1);break}}}componentDidLoad(){this.observeLayout()}componentDidRender(){if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=undefined;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,_)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||b}get resolvedScrollCollapseProgress(){if(this.variant==="compact"||!Number.isFinite(this.scrollCollapseProgress))return 0;return Math.min(1,Math.max(0,this.scrollCollapseProgress))}get scrollCollapseGeometry(){const e=l(f.size600,48);return w({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!e)return;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const r=e[0]?.contentRect;if(!r)return;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=requestAnimationFrame((()=>{this.layoutResizeFrame=undefined;this.updateLayoutGeometry(r.width,r.height)}))}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!i)return;const s=e===undefined||r===undefined?i.getBoundingClientRect():null;const d=e??s?.width??0;const t=r??s?.height??0;let c=false;if(t>0&&Math.abs(t-this.expandedHeight)>=.5){this.expandedHeight=t;c=true}const a=h({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:l(this.metricMinWidth,g)});if(a!==this.gridColumns){this.gridColumns=a;c=true}if(this.gridColumns){this.el.style.setProperty("--ds-card-overview-grid-columns",String(this.gridColumns))}else{this.el.style.removeProperty("--ds-card-overview-grid-columns")}if(c)o(this)}get rovingIndex(){return u(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.visibleMetrics;const o=m(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric-action");s[o]?.focus()}bar(e,r,i){return s("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r){if(!e)return null;return s("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,color:x[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",isLoading:true}),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label-spacer"),this.bar("text-body-medium","28px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return s("div",{class:"card-overview__score",part:"score"},s("ds-text",{as:"span",class:"card-overview__score-content card-overview__score-content--error",variant:"text-body-medium",color:"inherit",role:"alert"},e))}const r=this.score;if(!r)return null;return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",value:r.value,level:r.level,label:"Safety score"}),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label-spacer ds-control-label-box",variant:"text-body-small",color:k,"aria-hidden":"true"}," "),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const i=!e.isInactive;const o=s("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:k},e.label);return s("div",{class:"card-overview__metric",part:"metric"},s("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},role:i?"button":undefined,tabIndex:i&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(i)this.focusedMetricIndex=r}},s("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?s("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},o):o,s("div",{class:"card-overview__metric-figure"},s("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:y,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))))}renderMetrics(){if(this.isLoading){return[this.renderScore(),...Array.from({length:this.loadingMetricCount},((e,r)=>s("div",{class:"card-overview__metric",key:`loading-${r}`},s("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},s("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),s("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","40px"),this.bar("text-body-medium","28px")))))))]}return[this.renderScore(),...this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))]}render(){const e=this.variant==="compact";const r=this.scrollCollapseGeometry;const i={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){i["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){i["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;i["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;i["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(d,{key:"4dab390895a8c20d3a0e8572be91dd72fd20c041",class:{"card-overview":true,"card-overview--compact":e,"card-overview--stacked":!e&&this.layout==="stacked","card-overview--scroll-collapsing":r.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:i},s("div",{key:"a3e8a5ae5ced7ab810e4df0cfd4c3cc25cccabcf",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"54ac736f3430bcf2c3d3294369948ff2c70315dc",class:"card-overview__clip"},s("div",{key:"96a0ae5db78d39eccc173776d9e8846c0e742c54",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"c090e32e3433515e5ab1d93a4a9f6a4736a7ed06",class:"card-overview__summary"},s("div",{key:"2ee4a9587acde9a3af5af3e1db2486cb4ff29628",class:"card-overview__header ds-control--md"},s("div",{key:"71ddcab8413418e7ceed154eb779f2202f2f091c",class:"card-overview__period"},s("div",{key:"06c319bf394bbc1d1565538cc68ca1ff6917889a",class:"card-overview__period-current"},s("slot",{key:"4938e0022a44c122142e2b496948672eb8f569fb",name:"period"},this.periodLabel&&s("div",{key:"4ac52c4a3b658587524fd48eea40a73612b86b6c",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"9db11615d0364b52cc9e71c94c71dba9d2dea983",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"39e73b2d57b0a3be8c79973db96dd99eab3bbfa3",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"53ebec2ba9c525f56b71190ee27734fd8b17f3ae",class:"card-overview__filter"},s("slot",{key:"6939474ab938e1634636c1846b4b7f2c6b02fe4e",name:"filter"})))),!e&&s("div",{key:"e077ea2257b96948bacf6956d47f5ae264b1c75d",class:"card-overview__body"},s("div",{key:"02cb7c966897d2cde352379ddde8dfbb18338de4",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"c8ff111f17c1cff12990e56ad98fe06bcaa089b1",name:"footer"}))))))}get el(){return this}static get style(){return p()}},[262,"ds-card-overview",{variant:[1],layout:[1],score:[16],periodLabel:[1,"period-label"],comparisonLabel:[1,"comparison-label"],metrics:[16],metricMinWidth:[1,"metric-min-width"],isLoading:[4,"is-loading"],scoreErrorMessage:[1,"score-error-message"],overviewLabel:[1,"overview-label"],scrollCollapseProgress:[2,"scroll-collapse-progress"],focusedMetricIndex:[32],expandedHeight:[32],gridColumns:[32]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-score","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(t(e))){customElements.define(t(e),z)}break;case"ds-score":if(!customElements.get(t(e))){c()}break;case"ds-skeleton":if(!customElements.get(t(e))){a()}break;case"ds-text":if(!customElements.get(t(e))){n()}break;case"ds-tooltip":if(!customElements.get(t(e))){v()}break}}))}M();const C=z;const j=M;export{C as DsCardOverview,j as defineCustomElement};
 //# sourceMappingURL=ds-card-overview.js.map

package/dist/components/ds-card-overview.js.map

@@ -1 +1 @@
-{"version":3,"names":["resolveOverviewGridColumns","options","cellCount","Math","max","floor","minCellWidth","fittingColumns","availableWidth","columns","rows","ceil","resolveCardOverviewCollapseGeometry","compactHeight","expandedHeight","progress","variant","Number","isFinite","min","distance","offset","active","visibleHeight","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","DEFAULT_LOADING_METRIC_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","layout","periodLabel","comparisonLabel","metricMinWidth","isLoading","overviewLabel","scrollCollapseProgress","focusedMetricIndex","layoutResizeObserver","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","componentDidLoad","observeLayout","componentDidRender","observedLayoutEl","layoutEl","updateLayoutGeometry","disconnectedCallback","disconnect","layoutResizeFrame","undefined","cancelAnimationFrame","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","requestAnimationFrame","observe","resolvedWidth","resolvedHeight","changed","abs","gridColumns","el","style","setProperty","String","removeProperty","forceUpdate","rovingIndex","selectMetric","dsMetricSelect","emit","cells","querySelectorAll","focus","bar","textVariant","className","h","class","background","renderTrend","trend","as","tone","color","fontFeature","direction","value","renderScore","part","size","unavailableMessage","scoreErrorMessage","score","role","level","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","compact","collapse","customProperties","Host","ref","element","name","emphasis"],"sources":["src/wc/components/CardOverview/card-overview-controller.ts","src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';\n\nexport { resolveSafetyScoreLevel } from '../Score/score-model';\n\nexport interface CardOverviewCollapseGeometry {\n  active: boolean;\n  expandedHeight: number;\n  offset: number;\n  visibleHeight: number;\n}\n\n/**\n * Choose the column count for the metric grid.\n *\n * Cells that all fit across one row stay on one row: a full row is already\n * balanced, so there is nothing to distribute.\n *\n * Once the width forces a wrap, prefer equal rows — the widest column count\n * that divides the total exactly. Eight cells therefore step 8 → 4+4 → 2+2+2+2\n * as the width narrows, never trading an equal split for a shorter grid.\n *\n * Totals with no equal split available fall back to the fewest rows that fit,\n * spread as evenly as possible, which leaves one short final row: five cells at\n * a four-cell width are 3+2, seven are 4+3.\n *\n * Width is the only ceiling. There is deliberately no column cap: a wide card\n * showing six cells that each clear `minCellWidth` renders all six across.\n */\nexport function resolveOverviewGridColumns(options: {\n  cellCount: number;\n  availableWidth: number;\n  minCellWidth: number;\n}): number {\n  const cellCount = Math.max(1, Math.floor(options.cellCount));\n  const minCellWidth = Math.max(1, options.minCellWidth);\n  const fittingColumns = Math.max(\n    1,\n    Math.floor(Math.max(0, options.availableWidth) / minCellWidth)\n  );\n\n  if (fittingColumns >= cellCount) return cellCount;\n\n  for (let columns = fittingColumns; columns >= 2; columns -= 1) {\n    if (cellCount % columns === 0) return columns;\n  }\n\n  const rows = Math.ceil(cellCount / fittingColumns);\n  return Math.ceil(cellCount / rows);\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n  variant: CardOverviewVariant;\n  progress: number;\n  expandedHeight: number;\n  compactHeight: number;\n}): CardOverviewCollapseGeometry {\n  const compactHeight = Math.max(0, options.compactHeight);\n  const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n  const progress =\n    options.variant === 'compact' || !Number.isFinite(options.progress)\n      ? 0\n      : Math.min(1, Math.max(0, options.progress));\n  const distance = Math.max(0, expandedHeight - compactHeight);\n  const offset = distance * progress;\n\n  return {\n    active: progress > 0 && distance > 0,\n    expandedHeight,\n    offset,\n    visibleHeight: expandedHeight - offset,\n  };\n}\n\nexport function resolveOverviewRovingIndex(\n  metrics: readonly OverviewMetric[],\n  focusedIndex: number\n): number {\n  const first = metrics.findIndex(metric => !metric.isInactive);\n  if (first < 0) return -1;\n  return metrics[focusedIndex] && !metrics[focusedIndex].isInactive ? focusedIndex : first;\n}\n\nexport function findNextOverviewMetricIndex(\n  metrics: readonly OverviewMetric[],\n  from: number,\n  step: -1 | 1\n): number {\n  for (let offset = 1; offset <= metrics.length; offset += 1) {\n    const next = (((from + step * offset) % metrics.length) + metrics.length) % metrics.length;\n    if (!metrics[next]?.isInactive) return next;\n  }\n  return -1;\n}\n","@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  container-type: inline-size;\n  -webkit-user-select: none;\n  user-select: none;\n  --ds-card-overview-metric-min: calc(var(--dimension-size-400) * 5);\n  --ds-card-overview-divider-width: var(--dimension-stroke-width-012);\n  --ds-card-overview-divider-color: var(--color-always-dark-border-tertiary);\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  overflow-anchor: none;\n}\n\n.card-overview__clip {\n  height: 100%;\n  min-width: 0;\n  border-radius: inherit;\n  background: inherit;\n  overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n  height: var(--ds-card-overview-expanded-height);\n  pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n  height: var(--ds-card-overview-visible-height);\n  pointer-events: auto;\n  will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__body {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\n}\n\n.card-overview__layout {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__summary {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  min-width: 0;\n  background: var(--color-always-dark-background);\n}\n\n.card-overview__header {\n  display: flex;\n  position: relative;\n  align-items: center;\n  gap: 0;\n  width: 100%;\n  height: var(--dimension-size-600);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.card-overview__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--ds-card-overview-divider-width);\n  background: var(--ds-card-overview-divider-color);\n  pointer-events: none;\n}\n\n.card-overview__period {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.card-overview__period-current,\n.card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-overview__period-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n}\n\n.card-overview__period-fixed {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.card-overview__period-comparison {\n  flex: 0 0 auto;\n}\n\n.card-overview__filter {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.card-overview__body {\n  display: flex;\n  position: relative;\n  z-index: 0;\n  flex-direction: column;\n  min-width: 0;\n  transform: translateY(0);\n}\n\n.card-overview__metrics {\n  display: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    var(--ds-card-overview-grid-columns, auto-fit),\n    minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)\n  );\n  align-content: stretch;\n  min-width: 0;\n  overflow: clip;\n}\n\n.card-overview__score,\n.card-overview__metric {\n  display: flex;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-shadow:\n    var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),\n    0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);\n  box-sizing: border-box;\n}\n\n.card-overview__score-content,\n.card-overview__metric-action {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: var(--dimension-space-075);\n  border-radius: var(--dimension-radius-025);\n  box-sizing: border-box;\n}\n\n.card-overview__score-content {\n  align-items: center;\n  justify-content: flex-start;\n  /*\n   * Sits the fill 16px from the cell's left edge, on top of the 8px cell padding.\n   * Metric cells keep the shared inner inset because their content is text; the\n   * fill is a filled box and needs more room around it to read as inset.\n   */\n  padding-inline-start: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n}\n\n/* Mirrors .card-overview__metric-content so labels and trends line up across cells. */\n.card-overview__score-copy {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__score-label-spacer {\n  visibility: hidden;\n}\n\n.card-overview__score-content--error {\n  align-items: center;\n  justify-content: center;\n  /* No fill to align, so this box keeps the metric cells' inner inset. */\n  padding-inline-start: var(--dimension-space-075);\n  border: var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);\n  background: transparent;\n  color: var(--color-always-dark-foreground-negative);\n  text-align: center;\n}\n\n.card-overview__metric-action {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n}\n\n.card-overview__metric-action[role='button'] {\n  cursor: default;\n}\n\n.card-overview__metric-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__metric-label {\n  min-width: 0;\n}\n\n.card-overview__metric-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--compact) {\n  height: var(--dimension-size-600);\n  min-height: var(--dimension-size-600);\n}\n\n:host(.card-overview--compact) .card-overview__surface,\n:host(.card-overview--compact) .card-overview__clip,\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  width: 100%;\n  height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__header::after {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .card-overview__header::after {\n    background: var(--ds-forced-color-content);\n  }\n\n  .card-overview__score-content--error {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n    color: var(--ds-forced-color-content);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/**\n * Metric cells below this width drop a grid column rather than compress further.\n *\n * A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n */\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n  private layoutResizeFrame: number | undefined;\n  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n    // render swapped the layout node out from under the observer: the ref points\n    // at the new node while the observer still watches the detached one, which\n    // never resizes again. The grid would then keep its first measured column\n    // count for the life of the component.\n    if (!this.layoutResizeObserver || this.observedLayoutEl !== this.layoutEl) {\n      this.observeLayout();\n    } else {\n      this.updateLayoutGeometry();\n    }\n  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n    this.layoutResizeFrame = undefined;\n    this.observedLayoutEl = undefined;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  /** Preserve an authored data shape while loading, or use the standard six-cell grid. */\n  private get loadingMetricCount(): number {\n    return this.visibleMetrics.length || DEFAULT_LOADING_METRIC_COUNT;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (!rect) return;\n      if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = requestAnimationFrame(() => {\n        this.layoutResizeFrame = undefined;\n        this.updateLayoutGeometry(rect.width, rect.height);\n      });\n    });\n    this.layoutResizeObserver.observe(layout);\n    this.observedLayoutEl = layout;\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds =\n      width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    let changed = false;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n      changed = true;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n    });\n    if (columns !== this.gridColumns) {\n      this.gridColumns = columns;\n      changed = true;\n    }\n\n    // The column count is written straight to the host rather than through the\n    // rendered style object. Measurement happens in `componentDidLoad` and in the\n    // ResizeObserver callback, both outside a render cycle, and the host's style\n    // is not patched again after the first render — so a rendered value would stay\n    // pinned to whatever the first paint produced, before any width was known.\n    if (this.gridColumns) {\n      this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n    } else {\n      this.el.style.removeProperty('--ds-card-overview-grid-columns');\n    }\n\n    if (changed) forceUpdate(this);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <ds-score size=\"lg\" isLoading></ds-score>\n            <div class=\"card-overview__score-copy\">\n              {this.bar('text-body-small', '64px', 'card-overview__score-label-spacer')}\n              {this.bar('text-body-medium', '28px')}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line local/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div class=\"card-overview__score-content\">\n          <ds-score size=\"lg\" value={score.value} level={score.level} label=\"Safety score\" />\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label-spacer ds-control-label-box\"\n              variant=\"text-body-small\"\n              color={ALWAYS_DARK_SECONDARY}\n              aria-hidden=\"true\"\n            >\n              &nbsp;\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium')}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n              <div class=\"card-overview__metric-content\">\n                {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n                <div class=\"card-overview__metric-figure\">\n                  {this.bar('text-body-medium', '40px')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar('text-body-medium', '28px')}\n                </div>\n              </div>\n            </div>\n          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    // Omit absent custom properties rather than handing them an undefined value.\n    // Stencil serialises undefined to the string \"undefined\", which is invalid in\n    // `repeat()` and voids the whole grid-template-columns declaration — the grid\n    // then collapses to one implicit column instead of using the `auto-fit`\n    // fallback baked into the stylesheet.\n    const customProperties: Record<string, string> = {\n      '--ds-card-overview-metric-min': this.metricMinWidth,\n    };\n    if (this.gridColumns) {\n      customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n    }\n    if (collapse.active) {\n      customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n      customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n      customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n    }\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={customProperties}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  <div class=\"card-overview__period\">\n                    <div class=\"card-overview__period-current\">\n                      <slot name=\"period\">\n                        {this.periodLabel && (\n                          /* eslint-disable-next-line local/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n                          <div class=\"card-overview__period-fixed ds-control-frame\">\n                            <ds-text\n                              as=\"span\"\n                              class=\"ds-control-label-box\"\n                              variant=\"text-body-medium\"\n                              emphasis\n                              color={ALWAYS_DARK_PRIMARY}\n                            >\n                              {this.periodLabel}\n                            </ds-text>\n                          </div>\n                        )}\n                      </slot>\n                    </div>\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                  <div class=\"card-overview__filter\">\n                    <slot name=\"filter\" />\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["resolveOverviewGridColumns","options","cellCount","Math","max","floor","minCellWidth","fittingColumns","availableWidth","columns","rows","ceil","resolveCardOverviewCollapseGeometry","compactHeight","expandedHeight","progress","variant","Number","isFinite","min","distance","offset","active","visibleHeight","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","DEFAULT_LOADING_METRIC_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","layout","periodLabel","comparisonLabel","metricMinWidth","isLoading","overviewLabel","scrollCollapseProgress","focusedMetricIndex","layoutResizeObserver","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","componentDidLoad","observeLayout","componentDidRender","observedLayoutEl","layoutEl","updateLayoutGeometry","disconnectedCallback","disconnect","layoutResizeFrame","undefined","cancelAnimationFrame","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","requestAnimationFrame","observe","resolvedWidth","resolvedHeight","changed","abs","gridColumns","el","style","setProperty","String","removeProperty","forceUpdate","rovingIndex","selectMetric","dsMetricSelect","emit","cells","querySelectorAll","focus","bar","textVariant","className","h","class","background","renderTrend","trend","as","tone","color","fontFeature","direction","value","renderScore","part","size","unavailableMessage","scoreErrorMessage","score","role","level","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","compact","collapse","customProperties","Host","ref","element","name","emphasis"],"sources":["src/wc/components/CardOverview/card-overview-controller.ts","src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';\n\nexport { resolveSafetyScoreLevel } from '../Score/score-model';\n\nexport interface CardOverviewCollapseGeometry {\n  active: boolean;\n  expandedHeight: number;\n  offset: number;\n  visibleHeight: number;\n}\n\n/**\n * Choose the column count for the metric grid.\n *\n * Cells that all fit across one row stay on one row: a full row is already\n * balanced, so there is nothing to distribute.\n *\n * Once the width forces a wrap, prefer equal rows — the widest column count\n * that divides the total exactly. Eight cells therefore step 8 → 4+4 → 2+2+2+2\n * as the width narrows, never trading an equal split for a shorter grid.\n *\n * Totals with no equal split available fall back to the fewest rows that fit,\n * spread as evenly as possible, which leaves one short final row: five cells at\n * a four-cell width are 3+2, seven are 4+3.\n *\n * Width is the only ceiling. There is deliberately no column cap: a wide card\n * showing six cells that each clear `minCellWidth` renders all six across.\n */\nexport function resolveOverviewGridColumns(options: {\n  cellCount: number;\n  availableWidth: number;\n  minCellWidth: number;\n}): number {\n  const cellCount = Math.max(1, Math.floor(options.cellCount));\n  const minCellWidth = Math.max(1, options.minCellWidth);\n  const fittingColumns = Math.max(\n    1,\n    Math.floor(Math.max(0, options.availableWidth) / minCellWidth)\n  );\n\n  if (fittingColumns >= cellCount) return cellCount;\n\n  for (let columns = fittingColumns; columns >= 2; columns -= 1) {\n    if (cellCount % columns === 0) return columns;\n  }\n\n  const rows = Math.ceil(cellCount / fittingColumns);\n  return Math.ceil(cellCount / rows);\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n  variant: CardOverviewVariant;\n  progress: number;\n  expandedHeight: number;\n  compactHeight: number;\n}): CardOverviewCollapseGeometry {\n  const compactHeight = Math.max(0, options.compactHeight);\n  const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n  const progress =\n    options.variant === 'compact' || !Number.isFinite(options.progress)\n      ? 0\n      : Math.min(1, Math.max(0, options.progress));\n  const distance = Math.max(0, expandedHeight - compactHeight);\n  const offset = distance * progress;\n\n  return {\n    active: progress > 0 && distance > 0,\n    expandedHeight,\n    offset,\n    visibleHeight: expandedHeight - offset,\n  };\n}\n\nexport function resolveOverviewRovingIndex(\n  metrics: readonly OverviewMetric[],\n  focusedIndex: number\n): number {\n  const first = metrics.findIndex(metric => !metric.isInactive);\n  if (first < 0) return -1;\n  return metrics[focusedIndex] && !metrics[focusedIndex].isInactive ? focusedIndex : first;\n}\n\nexport function findNextOverviewMetricIndex(\n  metrics: readonly OverviewMetric[],\n  from: number,\n  step: -1 | 1\n): number {\n  for (let offset = 1; offset <= metrics.length; offset += 1) {\n    const next = (((from + step * offset) % metrics.length) + metrics.length) % metrics.length;\n    if (!metrics[next]?.isInactive) return next;\n  }\n  return -1;\n}\n","@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  container-type: inline-size;\n  -webkit-user-select: none;\n  user-select: none;\n  --ds-card-overview-metric-min: calc(var(--dimension-size-400) * 5);\n  --ds-card-overview-divider-width: var(--dimension-stroke-width-012);\n  --ds-card-overview-divider-color: var(--color-always-dark-border-tertiary);\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  overflow-anchor: none;\n}\n\n.card-overview__clip {\n  height: 100%;\n  min-width: 0;\n  border-radius: inherit;\n  background: inherit;\n  overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n  height: var(--ds-card-overview-expanded-height);\n  pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n  height: var(--ds-card-overview-visible-height);\n  pointer-events: auto;\n  will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__body {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\n}\n\n.card-overview__layout {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__summary {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  min-width: 0;\n  background: var(--color-always-dark-background);\n}\n\n.card-overview__header {\n  display: flex;\n  position: relative;\n  align-items: center;\n  gap: 0;\n  width: 100%;\n  height: var(--dimension-size-600);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.card-overview__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--ds-card-overview-divider-width);\n  background: var(--ds-card-overview-divider-color);\n  pointer-events: none;\n}\n\n.card-overview__period {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.card-overview__period-current,\n.card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-overview__period-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n}\n\n.card-overview__period-fixed {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.card-overview__period-comparison {\n  flex: 0 0 auto;\n}\n\n.card-overview__filter {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.card-overview__body {\n  display: flex;\n  position: relative;\n  z-index: 0;\n  flex-direction: column;\n  min-width: 0;\n  transform: translateY(0);\n}\n\n.card-overview__metrics {\n  display: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    var(--ds-card-overview-grid-columns, auto-fit),\n    minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)\n  );\n  align-content: stretch;\n  min-width: 0;\n  overflow: clip;\n}\n\n.card-overview__score,\n.card-overview__metric {\n  display: flex;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-shadow:\n    var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),\n    0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);\n  box-sizing: border-box;\n}\n\n.card-overview__score-content,\n.card-overview__metric-action {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: var(--dimension-space-075);\n  border-radius: var(--dimension-radius-025);\n  box-sizing: border-box;\n}\n\n.card-overview__score-content {\n  align-items: center;\n  justify-content: flex-start;\n  /*\n   * Sits the fill 16px from the cell's left edge, on top of the 8px cell padding.\n   * Metric cells keep the shared inner inset because their content is text; the\n   * fill is a filled box and needs more room around it to read as inset.\n   */\n  padding-inline-start: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n}\n\n/* Mirrors .card-overview__metric-content so labels and trends line up across cells. */\n.card-overview__score-copy {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  justify-content: center;\n  align-items: flex-start;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__score-label-spacer {\n  visibility: hidden;\n}\n\n.card-overview__score-content--error {\n  align-items: center;\n  justify-content: center;\n  /* No fill to align, so this box keeps the metric cells' inner inset. */\n  padding-inline-start: var(--dimension-space-075);\n  border: var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);\n  background: transparent;\n  color: var(--color-always-dark-foreground-negative);\n  text-align: center;\n}\n\n.card-overview__metric-action {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n}\n\n.card-overview__metric-action[role='button'] {\n  cursor: default;\n}\n\n.card-overview__metric-content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__metric-label {\n  min-width: 0;\n}\n\n.card-overview__metric-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--compact) {\n  height: var(--dimension-size-600);\n  min-height: var(--dimension-size-600);\n}\n\n:host(.card-overview--compact) .card-overview__surface,\n:host(.card-overview--compact) .card-overview__clip,\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  width: 100%;\n  height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__header::after {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .card-overview__header::after {\n    background: var(--ds-forced-color-content);\n  }\n\n  .card-overview__score-content--error {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n    color: var(--ds-forced-color-content);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n} from './card-overview-controller';\n\n/**\n * Metric cells below this width drop a grid column rather than compress further.\n *\n * A literal rather than a token: this is a layout threshold for a grid cell, and\n * the dimension scale has no token for that. The 200px tokens it could borrow\n * (`menu-width-xs`, `form-width-xs`, `panel-width-2xs`) all name other\n * components, so binding to one would couple this grid to an unrelated contract.\n * Consumers override with the `metricMinWidth` prop.\n */\nconst DEFAULT_METRIC_MIN_WIDTH = '200px';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst DEFAULT_LOADING_METRIC_COUNT = 5;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n  private layoutResizeFrame: number | undefined;\n  /** The node the observer is bound to, which a later render can replace. */\n  private observedLayoutEl?: HTMLElement;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped, and whenever a\n    // render swapped the layout node out from under the observer: the ref points\n    // at the new node while the observer still watches the detached one, which\n    // never resizes again. The grid would then keep its first measured column\n    // count for the life of the component.\n    if (!this.layoutResizeObserver || this.observedLayoutEl !== this.layoutEl) {\n      this.observeLayout();\n    } else {\n      this.updateLayoutGeometry();\n    }\n  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n    if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n    this.layoutResizeFrame = undefined;\n    this.observedLayoutEl = undefined;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount = this.isLoading ? this.loadingMetricCount : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  /** Preserve an authored data shape while loading, or use the standard six-cell grid. */\n  private get loadingMetricCount(): number {\n    return this.visibleMetrics.length || DEFAULT_LOADING_METRIC_COUNT;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (!rect) return;\n      if (this.layoutResizeFrame !== undefined) cancelAnimationFrame(this.layoutResizeFrame);\n      this.layoutResizeFrame = requestAnimationFrame(() => {\n        this.layoutResizeFrame = undefined;\n        this.updateLayoutGeometry(rect.width, rect.height);\n      });\n    });\n    this.layoutResizeObserver.observe(layout);\n    this.observedLayoutEl = layout;\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds =\n      width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    let changed = false;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n      changed = true;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, DEFAULT_METRIC_MIN_WIDTH),\n    });\n    if (columns !== this.gridColumns) {\n      this.gridColumns = columns;\n      changed = true;\n    }\n\n    // The column count is written straight to the host rather than through the\n    // rendered style object. Measurement happens in `componentDidLoad` and in the\n    // ResizeObserver callback, both outside a render cycle, and the host's style\n    // is not patched again after the first render — so a rendered value would stay\n    // pinned to whatever the first paint produced, before any width was known.\n    if (this.gridColumns) {\n      this.el.style.setProperty('--ds-card-overview-grid-columns', String(this.gridColumns));\n    } else {\n      this.el.style.removeProperty('--ds-card-overview-grid-columns');\n    }\n\n    if (changed) forceUpdate(this);\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        color={TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <ds-score size=\"lg\" isLoading></ds-score>\n            <div class=\"card-overview__score-copy\">\n              {this.bar('text-body-small', '64px', 'card-overview__score-label-spacer')}\n              {this.bar('text-body-medium', '28px')}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line local/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div class=\"card-overview__score-content\">\n          <ds-score size=\"lg\" value={score.value} level={score.level} label=\"Safety score\" />\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label-spacer ds-control-label-box\"\n              variant=\"text-body-small\"\n              color={ALWAYS_DARK_SECONDARY}\n              aria-hidden=\"true\"\n            >\n              &nbsp;\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium')}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: this.loadingMetricCount }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\n              <div class=\"card-overview__metric-content\">\n                {this.bar('text-body-small', '35%', 'card-overview__metric-label')}\n                <div class=\"card-overview__metric-figure\">\n                  {this.bar('text-body-medium', '40px')}\n                  {/* Match renderTrend's type canvas and the score trend's 28px width. */}\n                  {this.bar('text-body-medium', '28px')}\n                </div>\n              </div>\n            </div>\n          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    // Omit absent custom properties rather than handing them an undefined value.\n    // Stencil serialises undefined to the string \"undefined\", which is invalid in\n    // `repeat()` and voids the whole grid-template-columns declaration — the grid\n    // then collapses to one implicit column instead of using the `auto-fit`\n    // fallback baked into the stylesheet.\n    const customProperties: Record<string, string> = {\n      '--ds-card-overview-metric-min': this.metricMinWidth,\n    };\n    if (this.gridColumns) {\n      customProperties['--ds-card-overview-grid-columns'] = String(this.gridColumns);\n    }\n    if (collapse.active) {\n      customProperties['--ds-card-overview-expanded-height'] = `${collapse.expandedHeight}px`;\n      customProperties['--ds-card-overview-visible-height'] = `${collapse.visibleHeight}px`;\n      customProperties['--ds-card-overview-content-offset'] = `${collapse.offset}px`;\n    }\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={customProperties}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  <div class=\"card-overview__period\">\n                    <div class=\"card-overview__period-current\">\n                      <slot name=\"period\">\n                        {this.periodLabel && (\n                          /* eslint-disable-next-line local/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n                          <div class=\"card-overview__period-fixed ds-control-frame\">\n                            <ds-text\n                              as=\"span\"\n                              class=\"ds-control-label-box\"\n                              variant=\"text-body-medium\"\n                              emphasis\n                              color={ALWAYS_DARK_PRIMARY}\n                            >\n                              {this.periodLabel}\n                            </ds-text>\n                          </div>\n                        )}\n                      </slot>\n                    </div>\n                    {this.comparisonLabel && (\n                      <ds-text\n                        as=\"span\"\n                        class=\"card-overview__period-comparison ds-control-label-box\"\n                        variant=\"text-body-medium\"\n                        color={ALWAYS_DARK_SECONDARY}\n                      >\n                        {this.comparisonLabel}\n                      </ds-text>\n                    )}\n                  </div>\n                  <div class=\"card-overview__filter\">\n                    <slot name=\"filter\" />\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-card-setting.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as d,h as t,a as i,t as r}from"./index.js";import{d as n}from"./p-rSC7ZUpy.js";import{d as o}from"./p-DB_tlJ2d.js";import{d as a}from"./p-oAbq-DLk.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-aMyflqva.js";import{d as m}from"./p-CN8PQLZu.js";const h=()=>`.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-125) var(--dimension-radius-125)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-125)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const b={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const v=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction",7);this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}render(){const s=this.editing;return t(i,{key:"e6fc21744458357622f231bbc7aacf758ff6c94b",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":b[this.cardWidth],"--_card-setting-min-height":p[this.cardWidth]}},t("header",{key:"5dc3ff327053fe497ce655180b7fe65b5fa9431c",class:"card-setting__header ds-chrome-header"},t("div",{key:"c74a849acc12bf37365cc074e2678ba2570a02f0",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},t("ds-text",{key:"a49e5952ae0e724486d644c9951a044e573addca",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading)),t("div",{key:"68b4fe7a7b53e19c8e00f8290001f91fb4dbf384",class:"card-setting__actions ds-chrome-header__trailing"},!s?t("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[t("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),t("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)})])),t("div",{key:"8cbc1d1e10e65f67cdb71fbb42260d2c3cfaedad",class:"card-setting__body"},t("slot",{key:"a7063c4c5ae21d59762f33b8b4278b388668d6cd"})))}static get style(){return h()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function u(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(r(s))){customElements.define(r(s),v)}break;case"ds-badge":if(!customElements.get(r(s))){n()}break;case"ds-button-filled":if(!customElements.get(r(s))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){a()}break;case"ds-icon":if(!customElements.get(r(s))){c()}break;case"ds-loader":if(!customElements.get(r(s))){l()}break;case"ds-text":if(!customElements.get(r(s))){g()}break;case"ds-tooltip":if(!customElements.get(r(s))){m()}break}}))}u();const _=v;const x=u;export{_ as DsCardSetting,x as defineCustomElement};
+import{p as s,H as e,c as d,h as t,a as i,t as r}from"./index.js";import{d as n}from"./p-rSC7ZUpy.js";import{d as o}from"./p-GbtafFds.js";import{d as a}from"./p--yvQzZoO.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-aMyflqva.js";import{d as m}from"./p-CN8PQLZu.js";const h=()=>`.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-125) var(--dimension-radius-125)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-125)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const b={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const v=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction",7);this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}render(){const s=this.editing;return t(i,{key:"e6fc21744458357622f231bbc7aacf758ff6c94b",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":b[this.cardWidth],"--_card-setting-min-height":p[this.cardWidth]}},t("header",{key:"5dc3ff327053fe497ce655180b7fe65b5fa9431c",class:"card-setting__header ds-chrome-header"},t("div",{key:"c74a849acc12bf37365cc074e2678ba2570a02f0",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},t("ds-text",{key:"a49e5952ae0e724486d644c9951a044e573addca",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading)),t("div",{key:"68b4fe7a7b53e19c8e00f8290001f91fb4dbf384",class:"card-setting__actions ds-chrome-header__trailing"},!s?t("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[t("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),t("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)})])),t("div",{key:"8cbc1d1e10e65f67cdb71fbb42260d2c3cfaedad",class:"card-setting__body"},t("slot",{key:"a7063c4c5ae21d59762f33b8b4278b388668d6cd"})))}static get style(){return h()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function u(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(r(s))){customElements.define(r(s),v)}break;case"ds-badge":if(!customElements.get(r(s))){n()}break;case"ds-button-filled":if(!customElements.get(r(s))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(s))){a()}break;case"ds-icon":if(!customElements.get(r(s))){c()}break;case"ds-loader":if(!customElements.get(r(s))){l()}break;case"ds-text":if(!customElements.get(r(s))){g()}break;case"ds-tooltip":if(!customElements.get(r(s))){m()}break}}))}u();const _=v;const x=u;export{_ as DsCardSetting,x as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map