@ds-mo/ui 15.10.0 → 15.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +1 -1
  3. package/dist/agent.json +2 -2
  4. package/dist/components/ds-card-overview.js +1 -1
  5. package/dist/components/ds-card-overview.js.map +1 -1
  6. package/dist/docs/components.json +1 -1
  7. package/dist/mcp-data/registry/card-overview.json +2 -2
  8. package/dist/mcp-data/registry/registry.json +1 -1
  9. package/package.json +1 -1
package/dist/.package-ready.json CHANGED
@@ -1 +1 @@
1
- {"schemaVersion":1,"package":"@ds-mo/ui","version":"15.10.0","components":101,"digest":"9a601e3e40ce1f9a887db2852ff81b823d50c8b5b93cfd1c3e83542fb7842c6d","completedAt":"2026-09-24T19:23:55.362Z"}
1
+ {"schemaVersion":1,"package":"@ds-mo/ui","version":"15.10.1","components":101,"digest":"647f4ad6af1a3cb92355271d30af2b6fa28d5d31469f923db64112965c239571","completedAt":"2026-09-24T19:57:23.857Z"}
package/dist/agent-patterns.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "package": "@ds-mo/ui",
4
- "packageVersion": "15.10.0",
4
+ "packageVersion": "15.10.1",
5
5
  "kind": "patterns",
6
6
  "entries": [
7
7
  {
package/dist/agent.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "schemaVersion": "1.0.0",
3
3
  "package": "@ds-mo/ui",
4
- "packageVersion": "15.10.0",
4
+ "packageVersion": "15.10.1",
5
5
  "kind": "components",
6
6
  "entries": [
7
7
  {
@@ -3695,7 +3695,7 @@
3695
3695
  "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
3696
3696
  "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
3697
3697
  "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
3698
- "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg with the dense figure treatment for the fill only. Comparison trend stays in the score-copy column, using the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
3698
+ "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg with the dense figure treatment for the fill only. Every comparison trend stays immediately beside its value rather than moving to the trailing edge; score trend stays in the score-copy column and uses the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
3699
3699
  "During page-controlled scroll collapse, the component preserves its expanded flow height and stationary reporting bar while the metric grid moves and clips beneath it. Elevation remains fitted to the visible surface.",
3700
3700
  "compact is exactly 48px high and renders only the reporting bar. It omits Score, measures, and footer."
3701
3701
  ],
package/dist/components/ds-card-overview.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as r,c as i,f as o,h as s,a as d,t}from"./index.js";import{C as c}from"./p-DlsjHRU3.js";import{d as a}from"./p-DDawngok.js";import{d as n}from"./p-hWKa8Jn8.js";import{d as v}from"./p-CTAF7SkL.js";import{d as l}from"./p-PNY7auMh.js";import{r as f}from"./p-ioGH5SoA.js";import{T as h}from"./p-CeXf9-X3.js";function w(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 u(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 m(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function p(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 b=()=>`@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-chrome.sc-ds-card-overview-h,.ds-interaction-fill--on-chrome.sc-ds-card-overview{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-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)}}.sc-ds-card-overview-h,.sc-ds-card-overview:where(.ds-table),.sc-ds-card-overview:where(.tooltip-popup),.sc-ds-card-overview:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.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(--ds-radius-control)}.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(--ds-radius-card);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-value.sc-ds-card-overview{flex:1 1 auto;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 _=5;const x=7;const y={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const k="var(--color-always-dark-foreground-primary)";const z="var(--color-always-dark-foreground-secondary)";const M=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.hasLoaded=false;this.connectionTasks=new c((()=>this.el.isConnected));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}}}connectedCallback(){if(this.hasLoaded)this.observeLayout()}componentDidLoad(){this.hasLoaded=true;this.observeLayout()}componentDidRender(){if(!this.el.isConnected)return;if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.connectionTasks.cancel();this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;this.layoutResizeFrame=undefined;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,x)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||_}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=f(h.size600,48);return u({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!this.el.isConnected||!e)return;this.connectionTasks.cancelFrame(this.layoutResizeFrame);this.layoutResizeFrame=undefined;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((r=>{const i=r[0]?.contentRect;if(!i)return;this.connectionTasks.cancelFrame(this.layoutResizeFrame);this.layoutResizeFrame=this.connectionTasks.frame((()=>{this.layoutResizeFrame=undefined;if(this.layoutEl!==e)return;this.updateLayoutGeometry(i.width,i.height)}))}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!this.el.isConnected||!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=w({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:f(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 m(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=p(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:y[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",variant:"dense",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",variant:"dense",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:z,"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:z,wrap:"nowrap"},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:k,wrap:"nowrap",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:"5081d66f19a0a86bbdcaaa77c5fc9c9fdeae1d96",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:"a34ff883f68a9031373c1d90b23e8de7cc537642",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"45801da6bb5316a164423e93c46d5c443b211d29",class:"card-overview__clip"},s("div",{key:"b94974ef8d49948dc13baba7786b54a51c9ea178",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"ba2c3c206e58800d62f570c65f1c6c361239ff55",class:"card-overview__summary"},s("div",{key:"12db74e266e10811e3ad0a46bd11c52f83af7b84",class:"card-overview__header ds-control--md"},s("div",{key:"54e95813acef7aec188c6663f05d5bad72b5f578",class:"card-overview__period"},s("div",{key:"ae1c051420ae60f2f7b97f1a6e871d30909f6f47",class:"card-overview__period-current"},s("slot",{key:"a71c14fc779b355ae8620bd17bcf89c68410f61b",name:"period"},this.periodLabel&&s("div",{key:"909b9c5a30a9fb104388bbf64bbb433007baffb7",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"966e3907cf77e80381b27dff055b005b949b6872",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:k},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"3eb5be36cbb73ea7fb11e69379ff1b806039577a",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:z},this.comparisonLabel)),s("div",{key:"610c6d94999941a6f43698db4cd5a6ae8cf66178",class:"card-overview__filter"},s("slot",{key:"59e89be0c79cfc6b1b6d6855de2d31beac94843b",name:"filter"})))),!e&&s("div",{key:"0062a34d3afdafad7d95b0db2eb8cc690a0f1447",class:"card-overview__body"},s("div",{key:"1608783ab3e57df1fc398503a3fed2264cb03a5b",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"317c0d981726c3d156e0e6b469c2434e24554091",name:"footer"}))))))}get el(){return this}static get style(){return b()}},[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 C(){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),M)}break;case"ds-score":if(!customElements.get(t(e))){a()}break;case"ds-skeleton":if(!customElements.get(t(e))){n()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){l()}break}}))}C();const j=M;const H=C;export{j as DsCardOverview,H as defineCustomElement};
1
+ import{p as e,H as r,c as i,f as o,h as s,a as d,t}from"./index.js";import{C as c}from"./p-DlsjHRU3.js";import{d as a}from"./p-DDawngok.js";import{d as n}from"./p-hWKa8Jn8.js";import{d as v}from"./p-CTAF7SkL.js";import{d as l}from"./p-PNY7auMh.js";import{r as f}from"./p-ioGH5SoA.js";import{T as h}from"./p-CeXf9-X3.js";function w(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 u(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 m(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function p(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 b=()=>`@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-chrome.sc-ds-card-overview-h,.ds-interaction-fill--on-chrome.sc-ds-card-overview{--ds-interaction-hover:var(--color-chrome-interaction-hover);--ds-interaction-pressed:var(--color-chrome-interaction-pressed);--ds-interaction-active:var(--color-chrome-interaction-active);--ds-focus-ring-color:var(--color-chrome-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)}}.sc-ds-card-overview-h,.sc-ds-card-overview:where(.ds-table),.sc-ds-card-overview:where(.tooltip-popup),.sc-ds-card-overview:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.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(--ds-radius-control)}.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(--ds-radius-card);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-value.sc-ds-card-overview{flex:0 1 auto;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 _=5;const x=7;const y={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const k="var(--color-always-dark-foreground-primary)";const z="var(--color-always-dark-foreground-secondary)";const M=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.hasLoaded=false;this.connectionTasks=new c((()=>this.el.isConnected));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}}}connectedCallback(){if(this.hasLoaded)this.observeLayout()}componentDidLoad(){this.hasLoaded=true;this.observeLayout()}componentDidRender(){if(!this.el.isConnected)return;if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.connectionTasks.cancel();this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;this.layoutResizeFrame=undefined;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,x)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||_}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=f(h.size600,48);return u({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!this.el.isConnected||!e)return;this.connectionTasks.cancelFrame(this.layoutResizeFrame);this.layoutResizeFrame=undefined;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((r=>{const i=r[0]?.contentRect;if(!i)return;this.connectionTasks.cancelFrame(this.layoutResizeFrame);this.layoutResizeFrame=this.connectionTasks.frame((()=>{this.layoutResizeFrame=undefined;if(this.layoutEl!==e)return;this.updateLayoutGeometry(i.width,i.height)}))}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!this.el.isConnected||!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=w({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:f(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 m(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=p(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:y[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",variant:"dense",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",variant:"dense",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:z,"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:z,wrap:"nowrap"},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:k,wrap:"nowrap",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:"5081d66f19a0a86bbdcaaa77c5fc9c9fdeae1d96",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:"a34ff883f68a9031373c1d90b23e8de7cc537642",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"45801da6bb5316a164423e93c46d5c443b211d29",class:"card-overview__clip"},s("div",{key:"b94974ef8d49948dc13baba7786b54a51c9ea178",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"ba2c3c206e58800d62f570c65f1c6c361239ff55",class:"card-overview__summary"},s("div",{key:"12db74e266e10811e3ad0a46bd11c52f83af7b84",class:"card-overview__header ds-control--md"},s("div",{key:"54e95813acef7aec188c6663f05d5bad72b5f578",class:"card-overview__period"},s("div",{key:"ae1c051420ae60f2f7b97f1a6e871d30909f6f47",class:"card-overview__period-current"},s("slot",{key:"a71c14fc779b355ae8620bd17bcf89c68410f61b",name:"period"},this.periodLabel&&s("div",{key:"909b9c5a30a9fb104388bbf64bbb433007baffb7",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"966e3907cf77e80381b27dff055b005b949b6872",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:k},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"3eb5be36cbb73ea7fb11e69379ff1b806039577a",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:z},this.comparisonLabel)),s("div",{key:"610c6d94999941a6f43698db4cd5a6ae8cf66178",class:"card-overview__filter"},s("slot",{key:"59e89be0c79cfc6b1b6d6855de2d31beac94843b",name:"filter"})))),!e&&s("div",{key:"0062a34d3afdafad7d95b0db2eb8cc690a0f1447",class:"card-overview__body"},s("div",{key:"1608783ab3e57df1fc398503a3fed2264cb03a5b",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"317c0d981726c3d156e0e6b469c2434e24554091",name:"footer"}))))))}get el(){return this}static get style(){return b()}},[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 C(){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),M)}break;case"ds-score":if(!customElements.get(t(e))){a()}break;case"ds-skeleton":if(!customElements.get(t(e))){n()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){l()}break}}))}C();const j=M;const H=C;export{j as DsCardOverview,H as defineCustomElement};
2
2
  //# sourceMappingURL=ds-card-overview.js.map
package/dist/components/ds-card-overview.js.map CHANGED
@@ -1 +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","hasLoaded","connectionTasks","ConnectionTasks","el","isConnected","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","connectedCallback","observeLayout","componentDidLoad","componentDidRender","observedLayoutEl","layoutEl","updateLayoutGeometry","disconnectedCallback","cancel","disconnect","layoutResizeFrame","undefined","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","cancelFrame","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","frame","observe","resolvedWidth","resolvedHeight","changed","abs","gridColumns","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","wrap","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/radius.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(--ds-radius-card);\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-value {\n flex: 1 1 auto;\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 { ConnectionTasks } from '../../utils/connection-tasks';\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 private hasLoaded = false;\n private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n /** The node the observer is bound to, which a later render can replace. */\n private observedLayoutEl?: HTMLElement;\n\n connectedCallback() {\n if (this.hasLoaded) this.observeLayout();\n }\n\n componentDidLoad() {\n this.hasLoaded = true;\n this.observeLayout();\n }\n\n componentDidRender() {\n if (!this.el.isConnected) return;\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.connectionTasks.cancel();\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = null;\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 (!this.el.isConnected || !layout) return;\n\n this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = undefined;\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 this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = this.connectionTasks.frame(() => {\n this.layoutResizeFrame = undefined;\n if (this.layoutEl !== layout) return;\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 (!this.el.isConnected || !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\" variant=\"dense\" 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 compomo/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\n size=\"lg\"\n variant=\"dense\"\n value={score.value}\n level={score.level}\n label=\"Safety score\"\n />\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 wrap=\"nowrap\"\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 wrap=\"nowrap\"\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 compomo/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":[]}
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","hasLoaded","connectionTasks","ConnectionTasks","el","isConnected","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","connectedCallback","observeLayout","componentDidLoad","componentDidRender","observedLayoutEl","layoutEl","updateLayoutGeometry","disconnectedCallback","cancel","disconnect","layoutResizeFrame","undefined","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","cancelFrame","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","frame","observe","resolvedWidth","resolvedHeight","changed","abs","gridColumns","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","wrap","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/radius.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(--ds-radius-card);\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-value {\n flex: 0 1 auto;\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 { ConnectionTasks } from '../../utils/connection-tasks';\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 private hasLoaded = false;\n private readonly connectionTasks = new ConnectionTasks(() => this.el.isConnected);\n /** The node the observer is bound to, which a later render can replace. */\n private observedLayoutEl?: HTMLElement;\n\n connectedCallback() {\n if (this.hasLoaded) this.observeLayout();\n }\n\n componentDidLoad() {\n this.hasLoaded = true;\n this.observeLayout();\n }\n\n componentDidRender() {\n if (!this.el.isConnected) return;\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.connectionTasks.cancel();\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = null;\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 (!this.el.isConnected || !layout) return;\n\n this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = undefined;\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 this.connectionTasks.cancelFrame(this.layoutResizeFrame);\n this.layoutResizeFrame = this.connectionTasks.frame(() => {\n this.layoutResizeFrame = undefined;\n if (this.layoutEl !== layout) return;\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 (!this.el.isConnected || !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\" variant=\"dense\" 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 compomo/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\n size=\"lg\"\n variant=\"dense\"\n value={score.value}\n level={score.level}\n label=\"Safety score\"\n />\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 wrap=\"nowrap\"\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 wrap=\"nowrap\"\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 compomo/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/docs/components.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "timestamp": "2026-09-24T19:23:32",
2
+ "timestamp": "2026-09-24T19:56:56",
3
3
  "compiler": {
4
4
  "name": "@stencil/core",
5
5
  "version": "4.43.5",
package/dist/mcp-data/registry/card-overview.json CHANGED
@@ -60,7 +60,7 @@
60
60
  "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
61
61
  "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
62
62
  "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
63
- "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg with the dense figure treatment for the fill only. Comparison trend stays in the score-copy column, using the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
63
+ "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg with the dense figure treatment for the fill only. Every comparison trend stays immediately beside its value rather than moving to the trailing edge; score trend stays in the score-copy column and uses the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
64
64
  "During page-controlled scroll collapse, the component preserves its expanded flow height and stationary reporting bar while the metric grid moves and clips beneath it. Elevation remains fitted to the visible surface.",
65
65
  "compact is exactly 48px high and renders only the reporting bar. It omits Score, measures, and footer."
66
66
  ],
@@ -396,7 +396,7 @@
396
396
  "files": [
397
397
  {
398
398
  "path": "src/wc/components/CardOverview/CardOverview.css",
399
- "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.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(--ds-radius-card);\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-value {\n flex: 1 1 auto;\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",
399
+ "content": "@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/radius.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(--ds-radius-card);\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-value {\n flex: 0 1 auto;\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",
400
400
  "type": "registry:ui"
401
401
  },
402
402
  {
package/dist/mcp-data/registry/registry.json CHANGED
@@ -3781,7 +3781,7 @@
3781
3781
  "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
3782
3782
  "The period and filter controls are slotted rather than owned. Use the period slot when the current range is selectable; otherwise periodLabel supplies fixed current copy in the same md control-frame and label-inset anatomy. Use the filter slot for the application-owned comparison-window control. Slotted Selects use hasBorder false so the 48px bar owns their surrounding boundary and allowClear false because both controls always require one selected reporting period.",
3783
3783
  "A numeric safety score infers fair from 0–50, good from 51–80, and excellent from 81–100. The level can be supplied explicitly when the displayed value is not numeric. The deprecated band field is ignored.",
3784
- "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg with the dense figure treatment for the fill only. Comparison trend stays in the score-copy column, using the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
3784
+ "The safety score is the first grid cell and uses the same track, 8px outer inset, 6px inner padding, dividers, and responsive behavior as metric cells. It renders ds-score at lg with the dense figure treatment for the fill only. Every comparison trend stays immediately beside its value rather than moving to the trailing edge; score trend stays in the score-copy column and uses the same renderTrend path and always-dark tokens as measures so the score cell lines up with the rest of the grid. The 40px fill owns a fixed box so line-height does not increase the shared row height. Score remains nonselectable and excluded from metric roving focus.",
3785
3785
  "During page-controlled scroll collapse, the component preserves its expanded flow height and stationary reporting bar while the metric grid moves and clips beneath it. Elevation remains fitted to the visible surface.",
3786
3786
  "compact is exactly 48px high and renders only the reporting bar. It omits Score, measures, and footer."
3787
3787
  ],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ds-mo/ui",
3
- "version": "15.10.0",
3
+ "version": "15.10.1",
4
4
  "description": "CompoMo — composable web components styled with TokoMo design tokens",
5
5
  "keywords": [
6
6
  "web-components",