@ds-mo/ui 14.29.2 → 14.31.0

package/dist/.package-ready.json

@@ -1 +1 @@
-{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.29.2","components":81,"digest":"430b7892005c09a46ff03cd1612ed0a62c28411acf315f8b05d2e6316f674140","completedAt":"2026-09-04T18:56:05.787Z"}
+{"schemaVersion":1,"package":"@ds-mo/ui","version":"14.31.0","components":81,"digest":"c2ecd8dc5c5af59714f1259edf9a149b0422ae286d220e1d26d99f32fa740e45","completedAt":"2026-09-04T23:25:56.794Z"}

package/dist/agent-patterns.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.29.2",
+  "packageVersion": "14.31.0",
   "kind": "patterns",
   "entries": [
     {

package/dist/agent.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "14.29.2",
+  "packageVersion": "14.31.0",
   "kind": "components",
   "entries": [
     {
@@ -2530,7 +2530,7 @@
           "At most seven measures are shown. Keep larger collections outside the summary bar rather than turning it into a dense dashboard.",
           "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.",
           "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.",
-          "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 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.",
+          "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.",
           "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.",
           "compact is exactly 48px high and renders only the reporting bar. It omits Score, measures, and footer."
         ],
@@ -7635,12 +7635,12 @@
       "tag": "ds-score",
       "name": "score",
       "title": "Score",
-      "summary": "Safety-score figure in a semantic fill at the three control densities.",
+      "summary": "Safety-score figure in a semantic fill at three control densities and an optional dense value treatment.",
       "intentStatus": "complete",
       "intent": {
         "audience": "general",
         "status": "experimental",
-        "summary": "Safety-score figure in a semantic fill at the three control densities.",
+        "summary": "Safety-score figure in a semantic fill at three control densities and an optional dense value treatment.",
         "useWhen": [
           "A driver or fleet safety score needs its fair, good, or excellent fill and the numeric figure in one place.",
           "The same score treatment appears in Card Overview, an in-card summary, or a compact row such as a table group header."
@@ -7655,7 +7655,7 @@
           {
             "when": "The figure is one of several comparable measures under a shared period bar.",
             "component": "component:ds-card-overview",
-            "reason": "CardOverview owns the summary grid, period chrome, score-cell alignment, and score trend; it renders Score at lg for the fill."
+            "reason": "CardOverview owns the summary grid, period chrome, score-cell alignment, and score trend; it renders Score at lg with the dense figure treatment."
           },
           {
             "when": "The quantity is ordinary readable content without a safety-score fill.",
@@ -7678,17 +7678,19 @@
           "Set label when the atomic score graphic needs a spoken prefix such as Safety score; the visible number remains in the fill.",
           "Colour never carries score meaning alone; the numeric figure stays visible inside the fill.",
           "Score is not interactive and is not a tab stop.",
-          "While loading, the host exposes a busy state and a skeleton whose type metrics match the resolved size."
+          "While loading, the host exposes a busy state and a skeleton whose type metrics match the resolved size and variant."
         ],
         "states": [
-          "lg is the Card Overview fill: 56 by 40, display-small emphasis. md is the 32px control treatment: 40 by 32, title-large emphasis. sm is the 24px compact fill: 28 by 24, title-small emphasis. The fill box crops the type canvas so line-height does not change the declared size.",
+          "The default figure uses emphasized title typography: lg uses title-large, md uses title-medium, and sm uses title-small. Use the default treatment for standalone, table, and in-card scores.",
+          "The dense variant preserves the selected fill dimensions and uses a larger emphasized figure: lg uses display-small, md uses title-large, and sm uses title-medium. Use dense when a composition intentionally needs less space around the value; Card Overview owns this treatment for its headline score.",
+          "The fill dimensions remain 56 by 40 at lg, 40 by 32 at md, and 28 by 24 at sm. The fill box crops the type canvas so line-height does not change the declared size.",
           "A numeric value from 0–100 infers fair from 0–50, good from 51–80, and excellent from 81–100. Empty or whitespace-only values stay on the faint neutral surface. Supply level explicitly when another displayed value needs a semantic fill.",
           "The fill uses the safety-score background and keeps its foreground at AA text contrast in light and dark themes.",
-          "isLoading replaces the figure with a skeleton at the matching type metrics. The skeleton uses the faint context when no score level is known and the bold context when a known or explicitly supplied level keeps its semantic fill."
+          "isLoading replaces the figure with a skeleton at the matching size and variant type metrics. The skeleton uses the faint context when no score level is known and the bold context when a known or explicitly supplied level keeps its semantic fill."
         ],
         "responsiveBehavior": [
           "The owner selects sm, md, or lg to match the local layout. Score does not change size at breakpoints.",
-          "sm is the density for table group headers. md is the in-card summary fill. lg is the Card Overview fill."
+          "Table group heroes and in-card summaries use the default figure treatment. Card Overview composes the dense lg treatment for its headline score."
         ],
         "references": [
           {
@@ -7722,6 +7724,10 @@
           "value": {
             "type": "string | number",
             "required": false
+          },
+          "variant": {
+            "type": "ScoreVariant",
+            "required": false
           }
         },
         "events": [],
@@ -9615,7 +9621,7 @@
           "The column customizer is the shared Menu of switch rows, not a table-owned dialog. Data columns can be shown, hidden, and reordered. Action columns and the selection checkbox never appear in the menu. The last remaining visible data column cannot be hidden, but it stays focusable so it can still be reordered. Escape and outside click restore focus to the trigger. Persistence stays in the application.",
           "Sorting controls remain buttons inside column headers and expose the table's one controlled member-row sort through aria-sort. ds-table-sort in the toolbar trailing cluster is the matching menu of Data and Direction sections; it emits the same dsSortChange shape so header clicks and menu choices stay in sync. Grouping never adds a second sort indicator or header control; ds-table-group controls the grouping data point and ascending or descending group-section order while the application supplies the resulting groups. Optional column help underlines the header label with the shared dotted decoration and shows ds-tooltip from that label; it does not add a second header control or replace the column name.",
           "Selection controls expose checkbox semantics and explicit row names; select-all affects selectable loaded rows only and preserves selected identities outside the loaded window. In virtual mode the supplied in-memory rows are that loaded set, including rows whose DOM is recycled. When grouping is active with multi-selection, each group section header also exposes a checkbox that selects or clears that group's selectable loaded rows.",
-          "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls.",
+          "Interactive rows are focusable as native rows, activate with Enter or Space, and do not steal activation from their nested selection, action, overflow-menu, or primary-text link controls. When an application-owned details surface navigates between records, scrollRowIntoView reveals the newly associated row with nearest scrolling while preserving focus in that surface. It resolves false when the identity is absent from the supplied, expanded table model so the application can first load data, change its controlled page, or expand its group.",
           "Scrollable table regions become keyboard focusable and named only when overflow exists.",
           "Incremental loading, newly appended row counts, failures, and end-of-results transitions are announced through a polite status region without replacing visible state. In grouped tables, announcements name the independently loading group.",
           "Applications may pass their controlled literal search terms through highlightTerms after applying their own filtering. When TableSearch scopes the query, pass the same selected field identities through highlightFieldIds. A compound column maps its ordered headerSegments to primary, secondary-run, and tertiary-run data points; simple columns map their column ID to every owned text track. With no highlightFieldIds every text track remains eligible. Matching text is rendered with semantic mark elements, so the emphasis is identifiable independently of its faint-brand background and bold-brand foreground. Highlight markup preserves source order, the cell's complete accessible text, and does not create extra announcements.",
@@ -9623,7 +9629,7 @@
         ],
         "states": [
           "Columns, rows, groups, grouping, sorting, selected row IDs, collapsed group IDs, highlightTerms, highlightFieldIds, hiddenColumnIds, columnOrder, dataMode, pagination, displayedCount, totalCount, and incremental-loading state are controlled inputs. Events communicate intent and never mutate those inputs. The optional header is one composable table-local surface: the component owns its 48px chrome, 8px inset on every side, and sticky placement while the application owns the leading slot's internal layout, controls, labels, filtering behavior, and action handling. highlightTerms only marks matching table-owned text and never filters rows, changes query semantics, or highlights Tag labels. highlightFieldIds optionally narrows that marking to matching column IDs or compound header-segment sort keys. Opting into dataModeSwitcher and columnCustomizer adds their trailing Menu triggers and requires caption visibility. When both are present, Customize precedes a decorative divider and the data-mode trigger remains the final action. The Customize trigger keeps one stable label and neutral resting foreground whether or not hiddenColumnIds or columnOrder differ from the catalog default; the configured state remains visible inside the Menu. The table closes one trailing Menu before opening the other. The footer retains its compact-bar composition: application-owned leading status sits left while a controlled result summary or Pagination aligns right, before any trailing action. Content-sized tables remain natural for sparse or fixed-count results. height bounds the complete header, frame, and footer composition. fitViewport reserves the compact-state composition height in the nearest vertical scrollport while growing the visible table into that reservation as surrounding page chrome collapses.",
-          "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label followed by a middle dot and plain secondary loaded progress, for example Critical · 50 of 166. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example Critical · 166, because there is no loaded window. A collapsed section with no supplied member rows uses that same total-only copy so collapse does not advertise a zero loaded window, including 0 when no total is known. An expanded empty section still shows loaded progress, for example Critical · 0 of 166. Optional accessories occupy a second 24px track under the label and count, middle-dot separated, at most four items. An accessory with help uses the shared dotted underline and a bottom-start ds-tooltip from that copy; explicit line breaks create an unbulleted list. Without accessories the section stays the single-track row height; with accessories it matches a two-track body row, with the checkbox and disclosure kept on the label track. An optional hero accessory sits before the label and count. The first supported hero is a safety-score fill using ds-score at sm on both single-track and two-track headers, top-aligned with the label track. A score hero does not use group intent coloring. The hero does not change the 40 or 64 row height. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. The complete section header is the expand/collapse target and paints hover and press on that viewport-width surface. The section separator stays on the dedicated trailing-edge rule so the interaction wash cannot replace it. A trailing visually neutral icon-only ButtonUnfilled uses the 24px md double-inset action recipe, keeps the accessible disclosure name, and does not paint its own hover or press wash, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
+          "Grouping supports one level. The application supplies groups in a fixed product-defined order and supplies ordered member rows independently. Group section headers show an emphasized text-body-medium label at the start and plain secondary loaded progress at the trailing edge beside the disclosure. A 20px tertiary divider centered on the label track marks the action-column boundary between the count and disclosure. The loaded value comes from the supplied member rows and the total comes from totalCount. A localized countLabel total phrase remains available for the complete assistive progress announcement. Virtual mode shows totals only, for example 166, because there is no loaded window. A collapsed section with no supplied member rows uses that same total-only copy so collapse does not advertise a zero loaded window, including 0 when no total is known. An expanded empty section still shows loaded progress, for example 0 of 166. Optional accessories occupy a second 24px track under the label, middle-dot separated, at most four items. An accessory with help uses the shared dotted underline and a bottom-start ds-tooltip from that copy; explicit line breaks create an unbulleted list. Without accessories the section stays the single-track row height; with accessories it matches a two-track body row, with the checkbox, trailing count, divider, and disclosure kept on the label track. An optional hero accessory sits before the label. The first supported hero is a safety-score fill. Its one-track presentation uses the default ds-score at sm and aligns to the label track on either row height. Setting hero tracks to 2 creates or spans the two-track header, renders the default ds-score at lg, and centers it across the label and accessory tracks. In selectable tables the two-track score starts at the selection-column boundary; selectionMode none omits that lane and uses the regular group-content start inset. A score hero does not use group intent coloring. Hero presentation does not change the 40 or 64 row-height contract beyond the explicitly requested second track. Groups without intent use the secondary background surface. Groups may declare an optional intent (brand, neutral, negative, warning, caution, positive) that paints an LTR gradient from the faint intent surface at the label edge into faint neutral at the trailing edge, plus a bold intent title color. Neutral groups remain solid faint neutral. Section separators are painted inside that viewport-width surface so translucent border tokens composite with each intent background. Internal sections keep their separators; a collapsed or empty section header yields its separator only when it is the table's final rendered item. The complete section header is the expand/collapse target and paints hover and press on that viewport-width surface. The section separator stays on the dedicated trailing-edge rule so the interaction wash cannot replace it. Trailing loaded progress sits on the label track beside a visually neutral icon-only ButtonUnfilled. The centered 20px tertiary divider at the action-column boundary separates the count from the 24px md double-inset disclosure. The disclosure keeps its accessible name and does not paint its own hover or press wash, showing ChevronUp while expanded and ChevronDown while collapsed. While any group is expanded, a ChevronDownUp action uses the xs sort-control recipe widened to a table-owned 24px lane and collapses every group. It appears at the inline-end edge of the trailing column declared with kind action when one exists; otherwise a button-hugging 24px by 16px medium-elevation surface floats at the visible scrollport's header edge so the action remains reachable while member columns scroll beneath it. With stickyHeader enabled, each contained section uses its one real section row as a native sticky header inside its real row-group boundary. The browser therefore owns pinning, push-off, scrolling, and resize layout in one pass without a duplicated lane, active-section state, transforms, or scroll-time geometry. Shared grid tracks retain exact header and member-cell alignment. The section surface also stays pinned to the visible horizontal scrollport and spans the smaller of the visible viewport or table width. Virtual grouped tables flatten headers and members into that same scrollport; expanding a section never introduces an inner scroller.",
           "When columnCustomizer is false, columns render in catalog order. When it is true, columns remains the catalog: hiddenColumnIds and columnOrder control visibility and data-column sequence, action columns stay last, cannot be hidden, and remain absent from the customizer Menu, and dsColumnsConfigChange reports the next hidden ids and data-column order without mutating those inputs. The customizer Menu live-applies show/hide and data-column reorder. The table does not persist preferences.",
           "An active member sort toggles only between ascending and descending; activating a different sortable label moves the one sorting state to that key. Applications may still clear the controlled sort state explicitly. Grouping does not introduce another interactive direction.",
           "Compound headers can expose multiple related labels with independent sort keys. Each label owns only its content-width interaction target while the active direction remains in the column's alignment-aware sort lane.",

package/dist/angular/ds-score.d.ts

@@ -6,7 +6,7 @@ export declare class DsScore {
     protected el: HTMLDsScoreElement;
     constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
     static ɵfac: i0.ɵɵFactoryDeclaration<DsScore, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DsScore, "ds-score", never, { "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "level": { "alias": "level"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DsScore, "ds-score", never, { "isLoading": { "alias": "isLoading"; "required": false; }; "label": { "alias": "label"; "required": false; }; "level": { "alias": "level"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 export declare interface DsScore extends Components.DsScore {
 }

package/dist/angular/ds-score.js

@@ -17,12 +17,12 @@ let DsScore = class DsScore {
         this.el = r.nativeElement;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: DsScore, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsScore, isStandalone: true, selector: "ds-score", inputs: { isLoading: "isLoading", label: "label", level: "level", size: "size", value: "value" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: DsScore, isStandalone: true, selector: "ds-score", inputs: { isLoading: "isLoading", label: "label", level: "level", size: "size", value: "value", variant: "variant" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 };
 DsScore = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsScore,
-        inputs: ['isLoading', 'label', 'level', 'size', 'value']
+        inputs: ['isLoading', 'label', 'level', 'size', 'value', 'variant']
     })
 ], DsScore);
 export { DsScore };
@@ -33,6 +33,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: '<ng-content></ng-content>',
                     // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-                    inputs: ['isLoading', 'label', 'level', 'size', 'value'],
+                    inputs: ['isLoading', 'label', 'level', 'size', 'value', 'variant'],
                 }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.NgZone }] });

package/dist/angular/ds-table.js

@@ -32,7 +32,8 @@ let DsTable = class DsTable {
 DsTable = __decorate([
     ProxyCmp({
         defineCustomElementFn: defineDsTable,
-        inputs: ['caption', 'captionVisibility', 'chromeLoading', 'collapsedGroupIds', 'columnCustomizer', 'columnOrder', 'columns', 'dataMode', 'dataModeMenuLabel', 'dataModeSwitcher', 'dataModeSwitcherLabel', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'groupEndOfResultsLabel', 'groupLoadMoreAriaLabel', 'groupLoadMoreLabel', 'groupLoadingMoreLabel', 'groupRetryLabel', 'groupRowsLoadedLabel', 'grouping', 'groups', 'hasMore', 'height', 'hiddenColumnIds', 'highlightFieldIds', 'highlightTerms', 'infiniteModeLabel', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'pagination', 'paginationModeLabel', 'resultSummaryLabel', 'resultTotalSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'surfaceOpenRowId', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart', 'virtualModeLabel']
+        inputs: ['caption', 'captionVisibility', 'chromeLoading', 'collapsedGroupIds', 'columnCustomizer', 'columnOrder', 'columns', 'dataMode', 'dataModeMenuLabel', 'dataModeSwitcher', 'dataModeSwitcherLabel', 'displayedCount', 'emptyBody', 'emptyCellLabel', 'emptyHeading', 'endOfResultsLabel', 'error', 'errorBody', 'errorHeading', 'fitViewport', 'groupEndOfResultsLabel', 'groupLoadMoreAriaLabel', 'groupLoadMoreLabel', 'groupLoadingMoreLabel', 'groupRetryLabel', 'groupRowsLoadedLabel', 'grouping', 'groups', 'hasMore', 'height', 'hiddenColumnIds', 'highlightFieldIds', 'highlightTerms', 'infiniteModeLabel', 'loadIdentity', 'loadMoreError', 'loadMoreLabel', 'loadMoreMode', 'loadMoreThreshold', 'loading', 'loadingMore', 'loadingMoreLabel', 'maxHeight', 'pagination', 'paginationModeLabel', 'resultSummaryLabel', 'resultTotalSummaryLabel', 'retryLabel', 'rows', 'rowsLoadedLabel', 'scrollLabel', 'selectedRowIds', 'selectionMode', 'skeletonRows', 'sort', 'stickyHeader', 'surfaceOpenRowId', 'totalCount', 'viewportInsetBlockEnd', 'viewportInsetBlockStart', 'virtualModeLabel'],
+        methods: ['scrollRowIntoView']
     })
 ], DsTable);
 export { DsTable };

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

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

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

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

package/dist/components/ds-score.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-DDOuPq-N.js";const t=o;const p=s;export{t as DsScore,p as defineCustomElement};
+import{S as o,d as s}from"./p-GwqA_Gzi.js";const t=o;const p=s;export{t as DsScore,p as defineCustomElement};
 //# sourceMappingURL=ds-score.js.map