npm - @ds-mo/ui - Versions diffs - 13.9.0 → 13.10.0 - Mend

@ds-mo/ui 13.9.0 → 13.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/.package-ready.json +1 -1
package/dist/agent-patterns.json +1 -1
package/dist/agent.json +1 -1
package/dist/components/ds-card-overview.js +1 -1
package/dist/components/ds-card-overview.js.map +1 -1
package/dist/components/index.js +1 -1
package/dist/components/index.js.map +1 -1
package/dist/docs/components.json +3 -3
package/dist/mcp-data/registry/card-overview.json +5 -5
package/dist/types/components/CardOverview/CardOverview.d.ts +2 -0
package/dist/types/components/CardOverview/card-overview-controller.d.ts +15 -4
package/dist/types/components.d.ts +2 -2
package/package.json +3 -2

package/dist/.package-ready.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"schemaVersion":1,"package":"@ds-mo/ui","version":"13.9.0","components":65,"digest":"~~b6211027922e2767391ed911264a9aa3ed8fad8e74d5723a86b30b587bb5bcc1~~","completedAt":"2026-08-~~05T16~~:02:39.~~089Z~~"}
1	+ {"schemaVersion":1,"package":"@ds-mo/ui","version":"13.10.0","components":65,"digest":"08a75b409e9afd36cec27a8cac89b1da7d3203868a457326d3566a1bbf99f209","completedAt":"2026-08-05T19:40:03.387Z"}

package/dist/agent-patterns.json CHANGED Viewed

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

package/dist/agent.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "schemaVersion": "1.0.0",
   "package": "@ds-mo/ui",
-  "packageVersion": "13.9.0",
+  "packageVersion": "13.10.0",
   "kind": "components",
   "entries": [
     {

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

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as o,h as i,a as s,t as c}from"./index.js";import{d}from"./p-Dg9qiMDa.js";import{d as a}from"./p-BNiIyZCn.js";import{d as t}from"./p-CCYgBUUS.js";import{r as n}from"./p-BJMRBHKW.js";import{T as v}from"./p-CXduurfd.js";function l(e){const r=Math.max(1,Math.floor(e.cellCount));const o=Math.max(1,e.minCellWidth);const i=Math.max(1,Math.floor(e.maxColumns??4));const s=Math.max(1,Math.min(r,i,Math.floor(Math.max(0,e.availableWidth)/o)));if(r%2!==0)return s;for(let e=s;e>=1;e-=1){if(r%e===0)return e}return 1}function f(e){const r=Math.max(0,e.compactHeight);const o=Math.max(e.expandedHeight,r);const i=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,o-r);const c=s*i;return{active:i>0&&s>0,expandedHeight:o,offset:c,visibleHeight:o-c}}function w(e){const r=typeof e==="number"?e:Number(e);if(!Number.isFinite(r)||r<0||r>100)return undefined;if(r<=50)return"fair";if(r<=80)return"good";return"excellent"}function h(e,r){const o=e.findIndex((e=>!e.isInactive));if(o<0)return-1;return e[r]&&!e[r].isInactive?r:o}function u(e,r,o){for(let i=1;i<=e.length;i+=1){const s=((r+o*i)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const m=()=>`@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:relative;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-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 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.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);--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);--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-control--lg.sc-ds-card-overview,.ds-control--lg.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview,.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview,.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-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-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:space-between;gap:var(--dimension-space-100);background:var(--color-always-dark-interaction-active);color:var(--color-always-dark-foreground-primary)}.card-overview__score-content--fair.sc-ds-card-overview{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.card-overview__score-content--good.sc-ds-card-overview{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.card-overview__score-content--excellent.sc-ds-card-overview{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;gap:var(--dimension-space-025);min-width:0}.card-overview__score-value.sc-ds-card-overview,.card-overview__score-figure.sc-ds-card-overview{flex:0 0 auto;margin-block:calc(-1 * var(--dimension-space-100))}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;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-100);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.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="var(--dimension-menu-width-xs)";const b=5;const p=7;const _={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const x="var(--color-always-dark-foreground-primary)";const y="var(--color-always-dark-foreground-secondary)";const k=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=o(this,"dsMetricSelect");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.observeLayout();else this.updateLayoutGeometry()}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null}get visibleMetrics(){return this.metrics.slice(0,p)}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=n(v.size600,48);return f({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)this.updateLayoutGeometry(r.width,r.height)}));this.layoutResizeObserver.observe(e)}updateLayoutGeometry(e,r){const o=this.layoutEl;if(!o)return;const i=e===undefined||r===undefined?o.getBoundingClientRect():null;const s=e??i?.width??0;const c=r??i?.height??0;if(c>0&&Math.abs(c-this.expandedHeight)>=.5){this.expandedHeight=c}const d=l({cellCount:this.visibleCellCount,availableWidth:s,minCellWidth:n(this.metricMinWidth,v.menuWidthXs)});if(d!==this.gridColumns)this.gridColumns=d}get rovingIndex(){return h(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const o=this.visibleMetrics;const i=u(o,e,r<0?-1:1);if(i<0)return;this.focusedMetricIndex=i;const s=this.el.querySelectorAll(".card-overview__metric-action");s[i]?.focus()}bar(e,r,o){return i("ds-skeleton",{class:o,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r,o=false,s){if(!e)return null;return i("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,emphasis:o,color:s??_[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return i("div",{class:"card-overview__score",part:"score"},i("div",{class:"card-overview__score-content"},i("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label"),this.bar("text-body-medium","28px")),i("div",{class:"card-overview__score-figure"},this.bar("text-display-medium","56px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return i("div",{class:"card-overview__score",part:"score"},i("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;const o=r.level??w(r.value);return i("div",{class:"card-overview__score",part:"score"},i("div",{class:{"card-overview__score-content":true,[`card-overview__score-content--${o}`]:Boolean(o)}},i("div",{class:"card-overview__score-copy"},i("ds-text",{as:"span",class:"card-overview__score-label ds-control-label-box",variant:"text-body-small",color:"inherit"},r.label),this.renderTrend(r.trend,"text-body-medium",false,"inherit")),i("ds-text",{as:"span",class:"card-overview__score-value ds-control-label-box",variant:"text-display-medium",emphasis:true,color:"inherit",fontFeature:"tabular-nums"},r.value)))}renderMetric(e,r){const o=!e.isInactive;const s=i("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:y},e.label);return i("div",{class:"card-overview__metric",part:"metric"},i("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!o,"ds-interaction-fill":o,"ds-interaction-fill--on-always-dark":o,"ds-focus-ring-inset":o},role:o?"button":undefined,tabIndex:o&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(o)this.focusedMetricIndex=r}},i("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?i("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},s):s,i("div",{class:"card-overview__metric-figure"},i("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:x,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)=>i("div",{class:"card-overview__metric",key:`loading-${r}`},i("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},i("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),i("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;return i(s,{key:"feb21864407a842dc8b3dd4635edc28f5db628e5",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:{"--ds-card-overview-metric-min":this.metricMinWidth,"--ds-card-overview-grid-columns":this.gridColumns?String(this.gridColumns):undefined,"--ds-card-overview-expanded-height":r.active?`${r.expandedHeight}px`:undefined,"--ds-card-overview-visible-height":r.active?`${r.visibleHeight}px`:undefined,"--ds-card-overview-content-offset":r.active?`${r.offset}px`:undefined}},i("div",{key:"2eec584cdbc8bc6b214ca101254194705dec6013",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},i("div",{key:"633f5d3d80b3c350d6761bf41ae1a3c0ce693a26",class:"card-overview__clip"},i("div",{key:"5a32de03bf0d19ef2353e32e8cca9641e1d0aaea",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},i("div",{key:"3642d1fe2adc39d9ffb1cd5a300c22d64e9cbb66",class:"card-overview__summary"},i("div",{key:"41c962bfeb2e2ba15cd9b5be8e56f4fa6b5cb379",class:"card-overview__header ds-control--md"},i("div",{key:"e55aad3d91061a3cc9bb4077695b7ab3da03f45d",class:"card-overview__period"},i("div",{key:"ee5b567095fa668f5131f801da772744ed7737df",class:"card-overview__period-current"},i("slot",{key:"d8adf9facbc11c779396dc4811e952bafa3d2be7",name:"period"},this.periodLabel&&i("div",{key:"5c7b86a88c77ee0ce6a8e4f4819885c1b545e87d",class:"card-overview__period-fixed ds-control-frame"},i("ds-text",{key:"143dd1027f70aa04bf93c366263b6ba2cbdcfdb5",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:x},this.periodLabel)))),this.comparisonLabel&&i("ds-text",{key:"9c352f431f3ef972355fb47c2d17a2809986dac2",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:y},this.comparisonLabel)),i("div",{key:"9b0298c81aa914a02dd6c4a9858e6a979d61267f",class:"card-overview__filter"},i("slot",{key:"e1d2750ade10f8e8f8d26773544840cb2672972f",name:"filter"})))),!e&&i("div",{key:"1b97b2e4f15d9e788c42f9ce620f7d957207cb59",class:"card-overview__body"},i("div",{key:"44298a748e2c3ee3759c6bb635b8d67cc8959505",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),i("slot",{key:"f2602cf44690c33aaa5ee26cfd2e24802b6336a4",name:"footer"}))))))}get el(){return this}static get style(){return m()}},[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-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(c(e))){customElements.define(c(e),k)}break;case"ds-skeleton":if(!customElements.get(c(e))){d()}break;case"ds-text":if(!customElements.get(c(e))){a()}break;case"ds-tooltip":if(!customElements.get(c(e))){t()}break}}))}M();const z=k;const C=M;export{z as DsCardOverview,C as defineCustomElement};
+import{p as e,H as r,c as o,f as i,h as s,a as c,t as a}from"./index.js";import{d}from"./p-Dg9qiMDa.js";import{d as t}from"./p-BNiIyZCn.js";import{d as n}from"./p-CCYgBUUS.js";import{r as v}from"./p-BJMRBHKW.js";import{T as l}from"./p-CXduurfd.js";function f(e){const r=Math.max(1,Math.floor(e.cellCount));const o=Math.max(1,e.minCellWidth);const i=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/o));if(i>=r)return r;for(let e=i;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/i);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const o=Math.max(e.expandedHeight,r);const i=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,o-r);const c=s*i;return{active:i>0&&s>0,expandedHeight:o,offset:c,visibleHeight:o-c}}function h(e){const r=typeof e==="number"?e:Number(e);if(!Number.isFinite(r)||r<0||r>100)return undefined;if(r<=50)return"fair";if(r<=80)return"good";return"excellent"}function u(e,r){const o=e.findIndex((e=>!e.isInactive));if(o<0)return-1;return e[r]&&!e[r].isInactive?r:o}function m(e,r,o){for(let i=1;i<=e.length;i+=1){const s=((r+o*i)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const g=()=>`@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:relative;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-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 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.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);--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);--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);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-control--lg.sc-ds-card-overview,.ds-control--lg.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview,.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview,.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-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-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-badge.sc-ds-card-overview{display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin-block:calc(-1 * var(--dimension-space-050));padding:var(--dimension-space-050);border-radius:var(--dimension-radius-025);background:var(--color-always-dark-interaction-active);color:var(--color-always-dark-foreground-primary)}.card-overview__score-badge--fair.sc-ds-card-overview{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.card-overview__score-badge--good.sc-ds-card-overview{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.card-overview__score-badge--excellent.sc-ds-card-overview{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.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-value.sc-ds-card-overview,.card-overview__score-badge.sc-ds-card-overview ds-skeleton.sc-ds-card-overview{flex:0 0 auto;margin-block:calc(-1 * var(--dimension-space-100))}.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-100);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-badge.sc-ds-card-overview,.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 b="200px";const p=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 M=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=o(this,"dsMetricSelect");this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=b;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;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||p}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=v(l.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)this.updateLayoutGeometry(r.width,r.height)}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const o=this.layoutEl;if(!o)return;const s=e===undefined||r===undefined?o.getBoundingClientRect():null;const c=e??s?.width??0;const a=r??s?.height??0;let d=false;if(a>0&&Math.abs(a-this.expandedHeight)>=.5){this.expandedHeight=a;d=true}const t=f({cellCount:this.visibleCellCount,availableWidth:c,minCellWidth:v(this.metricMinWidth,b)});if(t!==this.gridColumns){this.gridColumns=t;d=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(d)i(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 o=this.visibleMetrics;const i=m(o,e,r<0?-1:1);if(i<0)return;this.focusedMetricIndex=i;const s=this.el.querySelectorAll(".card-overview__metric-action");s[i]?.focus()}bar(e,r,o){return s("ds-skeleton",{class:o,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("div",{class:"card-overview__score-badge"},this.bar("text-display-small","40px")),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label"),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;const o=r.level??h(r.value);return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("div",{class:{"card-overview__score-badge":true,[`card-overview__score-badge--${o}`]:Boolean(o)}},s("ds-text",{as:"span",class:"card-overview__score-value ds-control-label-box",variant:"text-display-small",emphasis:true,color:"inherit",fontFeature:"tabular-nums"},r.value)),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label ds-control-label-box",variant:"text-body-small",color:k},r.label),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const o=!e.isInactive;const i=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":!o,"ds-interaction-fill":o,"ds-interaction-fill--on-always-dark":o,"ds-focus-ring-inset":o},role:o?"button":undefined,tabIndex:o&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(o)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"},i):i,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 o={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){o["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){o["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;o["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;o["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(c,{key:"da0cca9a0f16e94a65ee3b14e6a2aff54f1a6c7e",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:o},s("div",{key:"b497f969a0c0ec905229aafa9a32529829cfebc2",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"5e8d3ec2ff41fce73897ef4c1649805c98f9ed1b",class:"card-overview__clip"},s("div",{key:"a812ff2b89c9f479a8e8a4a8cbed53f96ccfb8c3",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"508124794734e60de70478197744872398d53b81",class:"card-overview__summary"},s("div",{key:"0f104ad999d7f00c1e904732755a1ff5e7f72c65",class:"card-overview__header ds-control--md"},s("div",{key:"9fe8511b0b36666687be518bc086743341cc53d3",class:"card-overview__period"},s("div",{key:"3271ba21f26df683b3f641873361fab46aa86260",class:"card-overview__period-current"},s("slot",{key:"be1bcf9a3c053d8d42d81924b2b59d91e325864c",name:"period"},this.periodLabel&&s("div",{key:"ea1df54e46fd9a8a934afd17b04cafb1cd22537f",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"c268d4b106a2e25d13bbea660d39af04c8f99425",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"45608faa9df8362e2b8ad3c1d597898ba6950182",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"7291db832ad4843a3c46aaeddd6218a2df6c9247",class:"card-overview__filter"},s("slot",{key:"f4dd1502090fe5e7b6c6e4acfabbf986dff021e9",name:"filter"})))),!e&&s("div",{key:"e952ee1a8f4b747f53ff0672a9f9180bf6f3690e",class:"card-overview__body"},s("div",{key:"bb4aad48eb6953a459a6bb842b0b2c0b4987f817",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"8d46a81f9b50ad0bd927ac23ab2e71f335cdb04b",name:"footer"}))))))}get el(){return this}static get style(){return g()}},[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 z(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(a(e))){customElements.define(a(e),M)}break;case"ds-skeleton":if(!customElements.get(a(e))){d()}break;case"ds-text":if(!customElements.get(a(e))){t()}break;case"ds-tooltip":if(!customElements.get(a(e))){n()}break}}))}z();const C=M;const j=z;export{C as DsCardOverview,j as defineCustomElement};
 //# sourceMappingURL=ds-card-overview.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"names":["resolveOverviewGridColumns","options","cellCount","Math","max","floor","minCellWidth","maxColumns","fittingColumns","min","availableWidth","columns","resolveCardOverviewCollapseGeometry","compactHeight","expandedHeight","progress","variant","Number","isFinite","distance","offset","active","visibleHeight","resolveSafetyScoreLevel","value","numericValue","undefined","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","updateLayoutGeometry","disconnectedCallback","disconnect","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","layoutEl","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","observe","resolvedWidth","resolvedHeight","abs","menuWidthXs","gridColumns","rovingIndex","selectMetric","dsMetricSelect","emit","cells","el","querySelectorAll","focus","bar","textVariant","className","h","class","background","renderTrend","trend","emphasis","color","as","tone","fontFeature","direction","renderScore","part","unavailableMessage","scoreErrorMessage","score","role","level","Boolean","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","size","renderMetrics","Array","_","map","render","compact","collapse","Host","style","String","ref","element","name"],"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 {\n CardOverviewVariant,\n OverviewMetric,\n SafetyScoreLevel,\n} from './card-overview-types';\n\nexport interface CardOverviewCollapseGeometry {\n active: boolean;\n expandedHeight: number;\n offset: number;\n visibleHeight: number;\n}\n\n/*\n Choose the densest column count that fits without leaving an incomplete row\n * for even cell totals. Odd totals retain the densest fitting layout and may\n * therefore leave an orphan in the final row.\n /\nexport function resolveOverviewGridColumns(options: {\n cellCount: number;\n availableWidth: number;\n minCellWidth: number;\n maxColumns?: number;\n}): number {\n const cellCount = Math.max(1, Math.floor(options.cellCount));\n const minCellWidth = Math.max(1, options.minCellWidth);\n const maxColumns = Math.max(1, Math.floor(options.maxColumns ?? 4));\n const fittingColumns = Math.max(\n 1,\n Math.min(cellCount, maxColumns, Math.floor(Math.max(0, options.availableWidth) / minCellWidth))\n );\n\n if (cellCount % 2 !== 0) return fittingColumns;\n\n for (let columns = fittingColumns; columns >= 1; columns -= 1) {\n if (cellCount % columns === 0) return columns;\n }\n\n return 1;\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 resolveSafetyScoreLevel(value: string \| number): SafetyScoreLevel \| undefined {\n const numericValue = typeof value === 'number' ? value : Number(value);\n if (!Number.isFinite(numericValue) \|\| numericValue < 0 \|\| numericValue > 100) return undefined;\n if (numericValue <= 50) return 'fair';\n if (numericValue <= 80) return 'good';\n return 'excellent';\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\n ? focusedIndex\n : 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: space-between;\n gap: var(--dimension-space-100);\n background: var(--color-always-dark-interaction-active);\n color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__score-content--fair {\n background: var(--color-safety-score-background-fair);\n color: var(--color-safety-score-foreground-on-fair);\n}\n\n.card-overview__score-content--good {\n background: var(--color-safety-score-background-good);\n color: var(--color-safety-score-foreground-on-good);\n}\n\n.card-overview__score-content--excellent {\n background: var(--color-safety-score-background-excellent);\n color: var(--color-safety-score-foreground-on-excellent);\n}\n\n.card-overview__score-copy {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--dimension-space-025);\n min-width: 0;\n}\n\n.card-overview__score-value,\n.card-overview__score-figure {\n flex: 0 0 auto;\n margin-block: calc(-1 * var(--dimension-space-100));\n}\n\n.card-overview__score-content--error {\n align-items: center;\n justify-content: center;\n border: var(--ds-card-overview-divider-width) solid\n 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-100);\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 {\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 { Component, Element, Event, EventEmitter, h, Host, Prop, State } 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 resolveSafetyScoreLevel,\n} from './card-overview-controller';\n\n/** Metric cells below this width drop a grid column rather than compress further. /\nconst DEFAULT_METRIC_MIN_WIDTH = 'var(--dimension-menu-width-xs)';\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\n componentDidLoad() {\n this.observeLayout();\n }\n\n componentDidRender() {\n // Re-bind after HMR when DidLoad's observer was dropped.\n if (!this.layoutResizeObserver) this.observeLayout();\n else this.updateLayoutGeometry();\n }\n\n disconnectedCallback() {\n this.layoutResizeObserver?.disconnect();\n this.layoutResizeObserver = null;\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) this.updateLayoutGeometry(rect.width, rect.height);\n });\n this.layoutResizeObserver.observe(layout);\n }\n\n private updateLayoutGeometry(width?: number, height?: number) {\n const layout = this.layoutEl;\n if (!layout) return;\n\n const bounds = width === undefined \|\| height === undefined ? layout.getBoundingClientRect() : null;\n const resolvedWidth = width ?? bounds?.width ?? 0;\n const resolvedHeight = height ?? bounds?.height ?? 0;\n\n if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n this.expandedHeight = resolvedHeight;\n }\n\n const columns = resolveOverviewGridColumns({\n cellCount: this.visibleCellCount,\n availableWidth: resolvedWidth,\n minCellWidth: resolveCssLengthPx(this.metricMinWidth, TOKEN_DEFAULTS.menuWidthXs),\n });\n if (columns !== this.gridColumns) this.gridColumns = columns;\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(\n trend: MetricTrend \| undefined,\n variant: TextVariant,\n emphasis = false,\n color?: TextColor\n ) {\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 emphasis={emphasis}\n color={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 <div class=\"card-overview__score-copy\">\n {this.bar('text-body-small', '64px', 'card-overview__score-label')}\n {this.bar('text-body-medium', '28px')}\n </div>\n <div class=\"card-overview__score-figure\">\n {this.bar('text-display-medium', '56px')}\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 const level = score.level ?? resolveSafetyScoreLevel(score.value);\n\n return (\n <div class=\"card-overview__score\" part=\"score\">\n <div\n class={{\n 'card-overview__score-content': true,\n [`card-overview__score-content--${level}`]: Boolean(level),\n }}\n >\n <div class=\"card-overview__score-copy\">\n <ds-text\n as=\"span\"\n class=\"card-overview__score-label ds-control-label-box\"\n variant=\"text-body-small\"\n color=\"inherit\"\n >\n {score.label}\n </ds-text>\n {this.renderTrend(score.trend, 'text-body-medium', false, 'inherit')}\n </div>\n <ds-text\n as=\"span\"\n class=\"card-overview__score-value ds-control-label-box\"\n variant=\"text-display-medium\"\n emphasis\n color=\"inherit\"\n fontFeature=\"tabular-nums\"\n >\n {score.value}\n </ds-text>\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 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={{\n '--ds-card-overview-metric-min': this.metricMinWidth,\n '--ds-card-overview-grid-columns': this.gridColumns\n ? String(this.gridColumns)\n : undefined,\n '--ds-card-overview-expanded-height': collapse.active\n ? `${collapse.expandedHeight}px`\n : undefined,\n '--ds-card-overview-visible-height': collapse.active\n ? `${collapse.visibleHeight}px`\n : undefined,\n '--ds-card-overview-content-offset': collapse.active\n ? `${collapse.offset}px`\n : undefined,\n }}\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":[]}
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","resolveSafetyScoreLevel","value","numericValue","undefined","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","visibleMetrics","slice","visibleCellCount","metricCount","loadingMetricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","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","renderScore","part","unavailableMessage","scoreErrorMessage","score","role","level","Boolean","emphasis","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","size","renderMetrics","Array","_","map","render","compact","collapse","customProperties","Host","ref","element","name"],"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 {\n CardOverviewVariant,\n OverviewMetric,\n SafetyScoreLevel,\n} from './card-overview-types';\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 resolveSafetyScoreLevel(value: string \| number): SafetyScoreLevel \| undefined {\n const numericValue = typeof value === 'number' ? value : Number(value);\n if (!Number.isFinite(numericValue) \|\| numericValue < 0 \|\| numericValue > 100) return undefined;\n if (numericValue <= 50) return 'fair';\n if (numericValue <= 80) return 'good';\n return 'excellent';\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\n ? focusedIndex\n : 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/\n * The level fill wraps the score figure alone. Label and trend sit outside it so\n * they keep the same colors and baselines as every other metric cell, and are\n * never held to the fill's contrast.\n /\n.card-overview__score-badge {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n /\n * The padding gives the fill its own breathing room around the figure, and the\n * matching negative margin keeps that padding out of layout so the cell still\n * measures the same as a metric cell.\n /\n margin-block: calc(-1 var(--dimension-space-050));\n padding: var(--dimension-space-050);\n border-radius: var(--dimension-radius-025);\n background: var(--color-always-dark-interaction-active);\n color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__score-badge--fair {\n background: var(--color-safety-score-background-fair);\n color: var(--color-safety-score-foreground-on-fair);\n}\n\n.card-overview__score-badge--good {\n background: var(--color-safety-score-background-good);\n color: var(--color-safety-score-foreground-on-good);\n}\n\n.card-overview__score-badge--excellent {\n background: var(--color-safety-score-background-excellent);\n color: var(--color-safety-score-foreground-on-excellent);\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/\n * The display line box is taller than the figure needs, so it is cropped to keep\n * the fill from driving the cell taller than a metric cell's label-plus-figure\n * column.\n /\n.card-overview__score-value,\n.card-overview__score-badge ds-skeleton {\n flex: 0 0 auto;\n margin-block: calc(-1 var(--dimension-space-100));\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\n 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-100);\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-badge,\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 resolveSafetyScoreLevel,\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 /* 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 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) this.updateLayoutGeometry(rect.width, rect.height);\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 = 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 <div class=\"card-overview__score-badge\">\n {this.bar('text-display-small', '40px')}\n </div>\n <div class=\"card-overview__score-copy\">\n {this.bar('text-body-small', '64px', 'card-overview__score-label')}\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 const level = score.level ?? resolveSafetyScoreLevel(score.value);\n\n return (\n <div class=\"card-overview__score\" part=\"score\">\n <div class=\"card-overview__score-content\">\n {/ eslint-disable-next-line local/prefer-direct-ds-text -- The fill owns its own box: it pads out to 52px and crops the display line box, which the text element cannot do to itself. /}\n <div\n class={{\n 'card-overview__score-badge': true,\n [`card-overview__score-badge--${level}`]: Boolean(level),\n }}\n >\n <ds-text\n as=\"span\"\n class=\"card-overview__score-value ds-control-label-box\"\n variant=\"text-display-small\"\n emphasis\n color=\"inherit\"\n fontFeature=\"tabular-nums\"\n >\n {score.value}\n </ds-text>\n </div>\n <div class=\"card-overview__score-copy\">\n <ds-text\n as=\"span\"\n class=\"card-overview__score-label ds-control-label-box\"\n variant=\"text-body-small\"\n color={ALWAYS_DARK_SECONDARY}\n >\n {score.label}\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/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-const e="ds-mo";const t={hotModuleReplacement:false,hydratedSelectorName:"hydrated",lazyLoad:false,slotRelocation:true,state:true,updatable:true};var n="http://www.w3.org/2000/svg";var l="http://www.w3.org/1999/xhtml";function r(e,t,n){const l=typeof HTMLElement!=="undefined"?HTMLElement.prototype:null;while(e&&e!==l){const l=Object.getOwnPropertyDescriptor(e,t);if(l&&(!n||l.get))return l;e=Object.getPrototypeOf(e)}return void 0}var i=(e,t)=>{var n;const l=t.t;const i=Object.entries((n=l.l)!=null?n:{});i.map((([n,[l]])=>{if(l&31||l&32){const l=e[n];const i=r(Object.getPrototypeOf(e),n,true)||Object.getOwnPropertyDescriptor(e,n);if(i){Object.defineProperty(e,n,{get(){return i.get.call(this)},set(e){i.set.call(this,e)},configurable:true,enumerable:true})}if(t.i.has(n)){e[n]=t.i.get(n)}else if(l!==void 0){e[n]=l}}}))};var s=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var o=(e,n)=>{const l={o:0,$hostElement$:e,t:n,i:new Map,u:new Map};{l.v=new Promise((e=>l.p=e));e["s-p"]=[];e["s-rc"]=[]}const r=l;e.__stencil__getHostRef=()=>r;if(n.o&512&&t.state){i(e,l)}return r};var f=(e,t)=>t in e;var a=(e,t)=>(0,console.error)(e,t);var c=new Map;var u="slot-fb{display:contents}slot-fb[hidden]{display:none}";var v="http://www.w3.org/1999/xlink";var d=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"];var p=typeof window!=="undefined"?window:{};var h=p.HTMLElement||class{};var y={o:0,h:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)};var b=(()=>{var e;let t=false;try{(e=p.document)==null?void 0:e.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(e){}return t})();var m=e=>Promise.resolve(e);var w=(()=>{try{if(!p.document.adoptedStyleSheets){return false}new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var g=w?(()=>!!p.document&&Object.getOwnPropertyDescriptor(p.document.adoptedStyleSheets,"length").writable)():false;var $=false;var j=[];var O=[];var S=(e,t)=>n=>{e.push(n);if(!$){$=true;if(t&&y.o&4){M(N)}else{y.raf(N)}}};var k=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){a(e)}}e.length=0};var N=()=>{k(j);{k(O);if($=j.length>0){y.raf(N)}}};var M=e=>m().then(e);var C=S(O,true);var E=e=>{const t=new URL(e,y.h);return t.origin!==p.location.origin?t.href:t.pathname};var R=e=>y.h=e;function x(e){return void 0}var A;function L(e){var t;const n={mode:"open"};const l=this.attachShadow(n);if(A===void 0)A=(t=x())!=null?t:null;if(A){if(g){l.adoptedStyleSheets.push(A)}else{l.adoptedStyleSheets=[...l.adoptedStyleSheets,A]}}}var _=e=>{const t=B(e,"childNodes");if(e.tagName&&e.tagName.includes("-")&&e["s-cr"]&&e.tagName!=="SLOT-FB"){T(t,e.tagName).forEach((e=>{if(e.nodeType===1&&e.tagName==="SLOT-FB"){if(U(e,H(e),false).length){e.hidden=true}else{e.hidden=false}}}))}let n=0;for(n=0;n<t.length;n++){const e=t[n];if(e.nodeType===1&&B(e,"childNodes").length){_(e)}}};var F=e=>{const t=[];for(let n=0;n<e.length;n++){const l=e[n]["s-nr"]||void 0;if(l&&l.isConnected){t.push(l)}}return t};function T(e,t,n){let l=0;let r=[];let i;for(;l<e.length;l++){i=e[l];if(i["s-sr"]&&(!t||i["s-hn"]===t)&&(n===void 0||H(i)===n)){r.push(i);if(typeof n!=="undefined")return r}r=[...r,...T(i.childNodes,t,n)]}return r}var U=(e,t,n=true)=>{const l=[];if(n&&e["s-sr"]||!e["s-sr"])l.push(e);let r=e;while(r=r.nextSibling){if(H(r)===t&&(n||!r["s-sr"]))l.push(r)}return l};var D=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var H=e=>typeof e["s-sn"]==="string"?e["s-sn"]:e.nodeType===1&&e.getAttribute("slot")||void 0;function P(e){if(e.assignedElements||e.assignedNodes||!e["s-sr"])return;const t=t=>function(e){const n=[];const l=this["s-sn"];if(e==null?void 0:e.flatten){console.error(`\n          Flattening is not supported for Stencil non-shadow slots.\n          You can use \`.childNodes\` to nested slot fallback content.\n          If you have a particular use case, please open an issue on the Stencil repo.\n        `)}const r=this["s-cr"].parentElement;const i=r.__childNodes?r.childNodes:F(r.childNodes);i.forEach((e=>{if(l===H(e)){n.push(e)}}));if(t){return n.filter((e=>e.nodeType===1))}return n}.bind(e);e.assignedElements=t(true);e.assignedNodes=t(false)}function W(e){e.dispatchEvent(new CustomEvent("slotchange",{bubbles:false,cancelable:false,composed:false}))}function z(e,t){var n;t=t||((n=e["s-ol"])==null?void 0:n.parentElement);if(!t)return{slotNode:null,slotName:""};const l=e["s-sn"]=H(e)||"";const r=B(t,"childNodes");const i=T(r,t.tagName,l)[0];return{slotNode:i,slotName:l}}function B(e,t){if("__"+t in e){const n=e["__"+t];if(typeof n!=="function")return n;return n.bind(e)}else{if(typeof e[t]!=="function")return e[t];return e[t].bind(e)}}var V=(e,t="")=>{{return()=>{}}};function q(e){var t,n,l;return(l=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?l:void 0}var Y=new WeakMap;var I=(e,t,n)=>{let l=c.get(e);if(w&&n){l=l||new CSSStyleSheet;if(typeof l==="string"){l=t}else{l.replaceSync(t)}}else{l=t}c.set(e,l)};var Z=(e,t,n)=>{var l,r,i;const s=J(t);const o=c.get(s);if(!p.document){return s}e=e.nodeType===11?e:p.document;if(o){if(typeof o==="string"){e=e.head||e;let n=Y.get(e);let i;if(!n){Y.set(e,n=new Set)}if(!n.has(s)){i=p.document.createElement("style");i.textContent=o;const f=(l=y.m)!=null?l:q(p.document);if(f!=null){i.setAttribute("nonce",f)}if(!(t.o&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if(w){const t=(r=e.defaultView)!=null?r:e.ownerDocument.defaultView;const n=new t.CSSStyleSheet;n.replaceSync(o);if(g){e.adoptedStyleSheets.unshift(n)}else{e.adoptedStyleSheets=[n,...e.adoptedStyleSheets]}}else{const t=e.querySelector("style");if(t&&true){t.textContent=o+t.textContent}else{e.prepend(i)}}}else{e.append(i)}}if(t.o&1){e.insertBefore(i,null)}if(t.o&4){i.textContent+=u}if(n){n.add(s)}}}else{let t=Y.get(e);if(!t){Y.set(e,t=new Set)}if(!t.has(s)){const n=(i=e.defaultView)!=null?i:e.ownerDocument.defaultView;let l;if(o.constructor===n.CSSStyleSheet){l=o}else{l=new n.CSSStyleSheet;for(let e=0;e<o.cssRules.length;e++){l.insertRule(o.cssRules[e].cssText,e)}}if(g){e.adoptedStyleSheets.push(l)}else{e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]}t.add(s)}}}return s};var G=e=>{const t=e.t;const n=e.$hostElement$;const l=t.o;const r=V("attachStyles",t.$);const i=Z(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(l&10){n["s-sc"]=i;n.classList.add(i+"-h")}r()};var J=(e,t)=>"sc-"+e.$;var K=e=>e!=null&&e!==void 0;var Q=e=>{e=typeof e;return e==="object"||e==="function"};var X=(e,t,...n)=>{if(typeof e==="string"){e=mt(e)}let l=null;let r=null;let i=null;let s=false;let o=false;const f=[];const a=t=>{for(let n=0;n<t.length;n++){l=t[n];if(Array.isArray(l)){a(l)}else if(l!=null&&typeof l!=="boolean"){if(s=typeof e!=="function"&&!Q(l)){l=String(l)}if(s&&o){f[f.length-1].j+=l}else{f.push(s?ee(null,l):l)}o=s}}};a(n);if(t){if(t.key){r=t.key}if(t.name){i=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,f,le)}const c=ee(e,null);c.O=t;if(f.length>0){c.S=f}{c.k=r}{c.N=i}return c};var ee=(e,t)=>{const n={o:0,M:e,j:t!=null?t:null,C:null,S:null};{n.O=null}{n.k=null}{n.N=null}return n};var te={};var ne=e=>e&&e.M===te;var le={forEach:(e,t)=>e.map(re).forEach(t),map:(e,t)=>e.map(re).map(t).map(ie)};var re=e=>({vattrs:e.O,vchildren:e.S,vkey:e.k,vname:e.N,vtag:e.M,vtext:e.j});var ie=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return X(e.vtag,t,...e.vchildren||[])}const t=ee(e.vtag,e.vtext);t.O=e.vattrs;t.S=e.vchildren;t.k=e.vkey;t.N=e.vname;return t};var se=e=>{if(!e)return void 0;const t=Object.keys(e);if(t.length===0)return void 0;let n=false;for(const l of t){if(n)break;for(const t of e[l]){if(typeof t==="string"){n=true;break}}}if(!n)return e;const l={};for(const n of t){l[n]=e[n].map((e=>typeof e==="string"?{[e]:0}:e))}return l};var oe=(e,t,n)=>{if(e!=null&&!Q(e)){if(t&4){if(n&&typeof e==="string"){return e===""||!!e}else{return e==="false"?false:e===""||!!e}}if(t&2){return typeof e==="string"?parseFloat(e):typeof e==="number"?e:NaN}if(t&1){return String(e)}return e}return e};var fe=e=>e;var ae=(e,t,n)=>{const l=fe(e);return{emit:e=>ce(l,t,{bubbles:true,composed:true,cancelable:true,detail:e})}};var ce=(e,t,n)=>{const l=y.ce(t,n);e.dispatchEvent(l);return l};var ue=(e,t,n,l,r,i,o)=>{if(n===l){return}let a=f(e,t);let c=t.toLowerCase();if(t==="class"){const t=e.classList;const r=de(n);let i=de(l);{t.remove(...r.filter((e=>e&&!i.includes(e))));t.add(...i.filter((e=>e&&!r.includes(e))))}}else if(t==="style"){{for(const t in n){if(!l||l[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in l){if(!n||l[t]!==n[t]){if(t.includes("-")){e.style.setProperty(t,l[t])}else{e.style[t]=l[t]}}}}else if(t==="key");else if(t==="ref"){if(l){He(l,e)}}else if(!e.__lookupSetter__(t)&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(f(p,c)){t=c.slice(2)}else{t=c[2]+t.slice(3)}if(n||l){const r=t.endsWith(pe);t=t.replace(he,"");if(n){y.rel(e,t,n,r)}if(l){y.ael(e,t,l,r)}}}else if(t[0]==="a"&&t.startsWith("attr:")){const n=t.slice(5);let r;{const t=s(e);if(t&&t.t&&t.t.l){const e=t.t.l[n];if(e&&e[1]){r=e[1]}}}if(!r){r=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}if(l==null||l===false){if(l!==false||e.getAttribute(r)===""){e.removeAttribute(r)}}else{e.setAttribute(r,l===true?"":l)}return}else if(t[0]==="p"&&t.startsWith("prop:")){const n=t.slice(5);try{e[n]=l}catch(e){}return}else{const s=Q(l);if((a||s&&l!==null)&&!r){try{if(!e.tagName.includes("-")){const r=l==null?"":l;if(t==="list"){a=false}else if(n==null||e[t]!==r){if(typeof e.__lookupSetter__(t)==="function"){e[t]=r}else{e.setAttribute(t,r)}}}else if(e[t]!==l){e[t]=l}}catch(e){}}let o=false;{if(c!==(c=c.replace(/^xlink\:?/,""))){t=c;o=true}}if(l==null||l===false){if(l!==false||e.getAttribute(t)===""){if(o){e.removeAttributeNS(v,t)}else{e.removeAttribute(t)}}}else if((!a||i&4||r)&&!s&&e.nodeType===1){l=l===true?"":l;if(o){e.setAttributeNS(v,t,l)}else{e.setAttribute(t,l)}}}};var ve=/\s/;var de=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(ve)};var pe="Capture";var he=new RegExp(pe+"$");var ye=(e,t,n,l)=>{const r=t.C.nodeType===11&&t.C.host?t.C.host:t.C;const i=e&&e.O||{};const s=t.O||{};{for(const e of be(Object.keys(i))){if(!(e in s)){ue(r,e,i[e],void 0,n,t.o)}}}for(const e of be(Object.keys(s))){ue(r,e,i[e],s[e],n,t.o)}};function be(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var me;var we;var ge;var $e=false;var je=false;var Oe=false;var Se=false;var ke=[];var Ne=[];var Me=(e,r,i)=>{var s;const o=r.S[i];let f=0;let a;let c;let u;if(!$e){Oe=true;if(o.M==="slot"){o.o|=o.S?2:1}}if(o.j!=null){a=o.C=p.document.createTextNode(o.j)}else if(o.o&1){a=o.C=p.document.createTextNode("");{ye(null,o,Se)}}else{if(!Se){Se=o.M==="svg"}if(!p.document){throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.")}a=o.C=p.document.createElementNS(Se?n:l,!$e&&t.slotRelocation&&o.o&2?"slot-fb":o.M);if(Se&&o.M==="foreignObject"){Se=false}{ye(null,o,Se)}if(K(me)&&a["s-si"]!==me){a.classList.add(a["s-si"]=me)}if(o.S){const t=o.M==="template"?a.content:a;for(f=0;f<o.S.length;++f){c=Me(e,o,f);if(c){t.appendChild(c)}}}{if(o.M==="svg"){Se=false}else if(a.tagName==="foreignObject"){Se=true}}}a["s-hn"]=ge;{if(o.o&(2|1)){a["s-sr"]=true;a["s-cr"]=we;a["s-sn"]=o.N||"";a["s-rf"]=(s=o.O)==null?void 0:s.ref;P(a);u=e&&e.S&&e.S[i];if(u&&u.M===o.M&&e.C){Ce(e.C)}{ze(we,a,r.C,e==null?void 0:e.C)}}}return a};var Ce=e=>{y.o|=1;const t=e.closest(ge.toLowerCase());if(t!=null){const n=Array.from(t.__childNodes||t.childNodes).find((e=>e["s-cr"]));const l=Array.from(e.__childNodes||e.childNodes);for(const e of n?l.reverse():l){if(e["s-sh"]!=null){We(t,e,n!=null?n:null);e["s-sh"]=void 0;Oe=true}}}y.o&=-2};var Ee=(e,t)=>{y.o|=1;const n=Array.from(e.__childNodes||e.childNodes);if(e["s-sr"]){let t=e;while(t=t.nextSibling){if(t&&t["s-sn"]===e["s-sn"]&&t["s-sh"]===ge){n.push(t)}}}for(let e=n.length-1;e>=0;e--){const l=n[e];if(l["s-hn"]!==ge&&l["s-ol"]){We(_e(l).parentNode,l,_e(l));l["s-ol"].remove();l["s-ol"]=void 0;l["s-sh"]=void 0;Oe=true}if(t){Ee(l,t)}}y.o&=-2};var Re=(e,t,n,l,r,i)=>{let s=e["s-cr"]&&e["s-cr"].parentNode||e;let o;if(s.shadowRoot&&s.tagName===ge){s=s.shadowRoot}if(n.M==="template"){s=s.content}for(;r<=i;++r){if(l[r]){o=Me(null,n,r);if(o){l[r].C=o;We(s,o,_e(t))}}}};var xe=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.C;De(t);if(e){{je=true;if(e["s-ol"]){e["s-ol"].remove()}else{Ee(e,true)}}e.remove()}}}};var Ae=(e,t,n,l,r=false)=>{let i=0;let s=0;let o=0;let f=0;let a=t.length-1;let c=t[0];let u=t[a];let v=l.length-1;let d=l[0];let p=l[v];let h;let y;const b=n.M==="template"?e.content:e;while(i<=a&&s<=v){if(c==null){c=t[++i]}else if(u==null){u=t[--a]}else if(d==null){d=l[++s]}else if(p==null){p=l[--v]}else if(Le(c,d,r)){Fe(c,d,r);c=t[++i];d=l[++s]}else if(Le(u,p,r)){Fe(u,p,r);u=t[--a];p=l[--v]}else if(Le(c,p,r)){if(c.M==="slot"||p.M==="slot"){Ee(c.C.parentNode,false)}Fe(c,p,r);We(b,c.C,u.C.nextSibling);c=t[++i];p=l[--v]}else if(Le(u,d,r)){if(c.M==="slot"||p.M==="slot"){Ee(u.C.parentNode,false)}Fe(u,d,r);We(b,u.C,c.C);u=t[--a];d=l[++s]}else{o=-1;{for(f=i;f<=a;++f){if(t[f]&&t[f].k!==null&&t[f].k===d.k){o=f;break}}}if(o>=0){y=t[o];if(y.M!==d.M){h=Me(t&&t[s],n,o)}else{Fe(y,d,r);t[o]=void 0;h=y.C}d=l[++s]}else{h=Me(t&&t[s],n,s);d=l[++s]}if(h){{We(_e(c.C).parentNode,h,_e(c.C))}}}}if(i>a){Re(e,l[v+1]==null?null:l[v+1].C,n,l,s,v)}else if(s>v){xe(t,i,a)}};var Le=(e,t,n=false)=>{if(e.M===t.M){if(e.M==="slot"){return e.N===t.N}if(!n){return e.k===t.k}if(n&&!e.k&&t.k){e.k=t.k}return true}return false};var _e=e=>e&&e["s-ol"]||e;var Fe=(e,n,l=false)=>{const r=n.C=e.C;const i=e.S;const s=n.S;const o=n.M;const f=n.j;let a;if(f==null){{Se=o==="svg"?true:o==="foreignObject"?false:Se}{if(o==="slot"&&!$e){if(e.N!==n.N){n.C["s-sn"]=n.N||"";Ce(n.C.parentElement)}}ye(e,n,Se)}if(i!==null&&s!==null){Ae(r,i,n,s,l)}else if(s!==null){if(e.j!==null){r.textContent=""}Re(r,null,n,s,0,s.length-1)}else if(!l&&t.updatable&&i!==null){xe(i,0,i.length-1)}else;if(Se&&o==="svg"){Se=false}}else if(a=r["s-cr"]){a.parentNode.textContent=f}else if(e.j!==f){r.data=f}};var Te=[];var Ue=e=>{let t;let n;let l;const r=e.__childNodes||e.childNodes;for(const e of r){if(e["s-sr"]&&(t=e["s-cr"])&&t.parentNode){n=t.parentNode.__childNodes||t.parentNode.childNodes;const r=e["s-sn"];for(l=n.length-1;l>=0;l--){t=n[l];if(!t["s-cn"]&&!t["s-nr"]&&t["s-hn"]!==e["s-hn"]&&(!t["s-sh"]||t["s-sh"]!==e["s-hn"])){if(D(t,r)){let n=Te.find((e=>e.R===t));je=true;t["s-sn"]=t["s-sn"]||r;if(n){n.R["s-sh"]=e["s-hn"];n.A=e}else{t["s-sh"]=e["s-hn"];Te.push({A:e,R:t})}if(t["s-sr"]){Te.map((e=>{if(D(e.R,t["s-sn"])){n=Te.find((e=>e.R===t));if(n&&!e.A){e.A=n.A}}}))}}else if(!Te.some((e=>e.R===t))){Te.push({R:t})}}}}if(e.nodeType===1){Ue(e)}}};var De=e=>{{if(e.O&&e.O.ref){ke.push((()=>e.O.ref(null)))}e.S&&e.S.map(De)}};var He=(e,t)=>{{Ne.push((()=>e(t)))}};var Pe=()=>{{ke.forEach((e=>e()));ke.length=0;Ne.forEach((e=>e()));Ne.length=0}};var We=(e,t,n,l)=>{{if(typeof t["s-sn"]==="string"&&!!t["s-sr"]&&!!t["s-cr"]){ze(t["s-cr"],t,e,t.parentElement)}else if(typeof t["s-sn"]==="string"){e.insertBefore(t,n);const{slotNode:r}=z(t);if(r&&!l)W(r);return t}}if(e.__insertBefore){return e.__insertBefore(t,n)}else{return e==null?void 0:e.insertBefore(t,n)}};function ze(e,t,n,l){var r,i;let s;if(e&&typeof t["s-sn"]==="string"&&!!t["s-sr"]&&e.parentNode&&e.parentNode["s-sc"]&&(s=t["s-si"]||e.parentNode["s-sc"])){const e=t["s-sn"];const o=t["s-hn"];(r=n.classList)==null?void 0:r.add(s+"-s");if(l&&((i=l.classList)==null?void 0:i.contains(s+"-s"))){let t=(l.__childNodes||l.childNodes)[0];let n=false;while(t){if(t["s-sn"]!==e&&t["s-hn"]===o&&!!t["s-sr"]){n=true;break}t=t.nextSibling}if(!n)l.classList.remove(s+"-s")}}}var Be=(e,t,n=false)=>{var l,r,i,s,o;const f=e.$hostElement$;const a=e.t;const c=e.L||ee(null,null);const u=ne(t);const v=u?t:X(null,null,t);ge=f.tagName;if(a._){v.O=v.O||{};a._.forEach((([e,t])=>{{v.O[t]=f[e]}}))}if(n&&v.O){for(const e of Object.keys(v.O)){if(f.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){v.O[e]=f[e]}}}v.M=null;v.o|=4;e.L=v;v.C=c.C=f.shadowRoot||f;{me=f["s-sc"]}$e=!!(a.o&1)&&!(a.o&128);{we=f["s-cr"];je=false}Fe(c,v,n);{y.o|=1;if(Oe){Ue(v.C);for(const e of Te){const t=e.R;if(!t["s-ol"]&&p.document){const e=p.document.createTextNode("");e["s-nr"]=t;We(t.parentNode,t["s-ol"]=e,t,n)}}for(const e of Te){const t=e.R;const o=e.A;if(t.nodeType===1&&n){t["s-ih"]=(l=t.hidden)!=null?l:false}if(o){const e=o.parentNode;let l=o.nextSibling;if(l&&l.nodeType===1){let n=(r=t["s-ol"])==null?void 0:r.previousSibling;while(n){let r=(i=n["s-nr"])!=null?i:null;if(r&&r["s-sn"]===t["s-sn"]&&e===(r.__parentNode||r.parentNode)){r=r.nextSibling;while(r===t||(r==null?void 0:r["s-sr"])){r=r==null?void 0:r.nextSibling}if(!r||!r["s-nr"]){l=r;break}}n=n.previousSibling}}const f=t.__parentNode||t.parentNode;const a=t.__nextSibling||t.nextSibling;if(!l&&e!==f||a!==l){if(t!==l){We(e,t,l,n);if(t.nodeType===8&&t.nodeValue.startsWith("s-nt-")){const e=p.document.createTextNode(t.nodeValue.replace(/^s-nt-/,""));e["s-hn"]=t["s-hn"];e["s-sn"]=t["s-sn"];e["s-sh"]=t["s-sh"];e["s-sr"]=t["s-sr"];e["s-ol"]=t["s-ol"];e["s-ol"]["s-nr"]=e;We(t.parentNode,e,t,n);t.parentNode.removeChild(t)}if(t.nodeType===1&&t.tagName!=="SLOT-FB"){t.hidden=(s=t["s-ih"])!=null?s:false}}}t&&typeof o["s-rf"]==="function"&&o["s-rf"](o)}else if(t.nodeType===1){t.hidden=true}}}if(je){_(v.C)}y.o&=-2;Te.length=0}if(!$e&&!(a.o&1)&&f["s-cr"]){const e=v.C.__childNodes||v.C.childNodes;for(const t of e){if(t["s-hn"]!==ge&&!t["s-sh"]){if(n&&t["s-ih"]==null){t["s-ih"]=(o=t.hidden)!=null?o:false}if(t.nodeType===1){t.hidden=true}else if(t.nodeType===3&&!!t.nodeValue.trim()){const e=p.document.createComment("s-nt-"+t.nodeValue);e["s-sn"]=t["s-sn"];We(t.parentNode,e,t,n);t.parentNode.removeChild(t)}}}}we=void 0;Pe()};var Ve=(e,t)=>{if(t&&!e.F&&t["s-p"]){const n=t["s-p"].push(new Promise((l=>e.F=()=>{t["s-p"].splice(n-1,1);l()})))}};var qe=(e,t)=>{{e.o|=16}if(e.o&4){e.o|=512;return}Ve(e,e.T);const n=()=>Ye(e,t);if(t){queueMicrotask((()=>{n()}));return}return C(n)};var Ye=(e,t)=>{const n=e.$hostElement$;const l=V("scheduleUpdate",e.t.$);const r=n;if(!r){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let i;if(t){i=Xe(r,"componentWillLoad",void 0,n)}else{i=Xe(r,"componentWillUpdate",void 0,n)}i=Ie(i,(()=>Xe(r,"componentWillRender",void 0,n)));l();return Ie(i,(()=>Ge(e,r,t)))};var Ie=(e,t)=>Ze(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var Ze=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var Ge=async(e,t,n)=>{var l;const r=e.$hostElement$;const i=V("update",e.t.$);const s=r["s-rc"];if(n){G(e)}const o=V("render",e.t.$);{Je(e,t,r,n)}if(s){s.map((e=>e()));r["s-rc"]=void 0}o();i();{const t=(l=r["s-p"])!=null?l:[];const n=()=>Ke(e);if(t.length===0){n()}else{Promise.all(t).then(n).catch(n);e.o|=4;t.length=0}}};var Je=(e,t,n,l)=>{try{t=t.render();{e.o&=-17}{e.o|=2}{{{Be(e,t,l)}}}}catch(t){a(t,e.$hostElement$)}return null};var Ke=e=>{const t=e.t.$;const n=e.$hostElement$;const l=V("postUpdate",t);const r=n;const i=e.T;Xe(r,"componentDidRender",void 0,n);if(!(e.o&64)){e.o|=64;{et(n)}Xe(r,"componentDidLoad",void 0,n);l();{e.p(n);if(!i){Qe()}}}else{Xe(r,"componentDidUpdate",void 0,n);l()}{if(e.F){e.F();e.F=void 0}if(e.o&512){M((()=>qe(e,false)))}e.o&=-517}};var Qe=t=>{M((()=>ce(p,"appload",{detail:{namespace:e}})))};var Xe=(e,t,n,l)=>{if(e&&e[t]){try{return e[t](n)}catch(e){a(e,l)}}return void 0};var et=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var tt=(e,t)=>s(e).i.get(t);var nt=(e,t,n,l)=>{const r=s(e);if(!r){return}const i=e;const o=r.i.get(t);const f=r.o;const c=i;n=oe(n,l.l[t][0],!!(l.o&64));const u=Number.isNaN(o)&&Number.isNaN(n);const v=n!==o&&!u;if(v){r.i.set(t,n);if(l.U){const e=l.U[t];if(e){e.map((e=>{try{const[[l,i]]=Object.entries(e);if(f&128||i&1){if(!c){r.D.push((()=>{r.H[l](n,o,t)}))}else{c[l](n,o,t)}}}catch(e){a(e,i)}}))}}if(f&2){if(c.componentShouldUpdate){const e=c.componentShouldUpdate(n,o,t);if(e===false&&!(f&16)){return}}if(!(f&16)){qe(r,false)}}}};var lt=(e,n,l)=>{var i,o;const f=e.prototype;if(n.o&64&&l&1){d.forEach((e=>{const t=f[e];Object.defineProperty(f,e,{value(...n){var l;const r=s(this);const i=this;if(!i){(l=r==null?void 0:r.v)==null?void 0:l.then((t=>{const l=t[e];typeof l==="function"&&l.call(t,...n)}))}else{const e=t;typeof e==="function"&&e.call(i,...n)}}})}))}{{if(e.watchers&&!n.U){n.U=se(e.watchers)}if(e.deserializers&&!n.P){n.P=e.deserializers}if(e.serializers&&!n.W){n.W=e.serializers}}const l=Object.entries((i=n.l)!=null?i:{});l.map((([e,[t]])=>{if(t&31||t&32){const{get:l,set:i}=r(f,e)||{};if(l)n.l[e][0]|=2048;if(i)n.l[e][0]|=4096;{Object.defineProperty(f,e,{get(){{return l?l.apply(this):tt(this,e)}},configurable:true,enumerable:true})}Object.defineProperty(f,e,{set(l){const r=s(this);if(!r){return}if(i){const s=t&32?this[e]:r.$hostElement$[e];if(typeof s==="undefined"&&r.i.get(e)){l=r.i.get(e)}i.apply(this,[oe(l,t,!!(n.o&64))]);l=t&32?this[e]:r.$hostElement$[e];nt(this,e,l,n);return}{nt(this,e,l,n);return}}})}}));{const r=new Map;f.attributeChangedCallback=function(e,i,o){y.jmp((()=>{var a;const c=r.get(e);const u=s(this);if(this.hasOwnProperty(c)&&t.lazyLoad);if(f.hasOwnProperty(c)&&typeof this[c]==="number"&&this[c]==o){return}else if(c==null){const t=u==null?void 0:u.o;if(u&&t&&!(t&8)&&o!==i){const l=this;const r=l;const s=(a=n.U)==null?void 0:a[e];s==null?void 0:s.forEach((n=>{const[[l,s]]=Object.entries(n);if(r[l]!=null&&(t&128||s&1)){r[l].call(r,o,i,e)}}))}return}const v=l.find((([e])=>e===c));const d=v&&v[1][0]&4;const p=d&&o===null&&this[c]===void 0;if(d){o=o===null||o==="false"?false:true}const h=Object.getOwnPropertyDescriptor(f,c);if(!p&&o!=this[c]&&(!h.get||!!h.set)){this[c]=o}}))};e.observedAttributes=Array.from(new Set([...Object.keys((o=n.U)!=null?o:{}),...l.filter((([e,t])=>t[0]&31)).map((([e,t])=>{var l;const i=t[1]||e;r.set(i,e);if(t[0]&512){(l=n._)==null?void 0:l.push([e,i])}return i}))]))}}return e};var rt=async(e,n,l,r)=>{let i;try{if((n.o&32)===0){n.o|=32;{i=e.constructor;const t=e.localName;customElements.whenDefined(t).then((()=>n.o|=128))}if(i&&i.style){let e;if(typeof i.style==="string"){e=i.style}const n=J(l);if(!c.has(n)||t.hotModuleReplacement){const t=V("registerStyles",l.$);I(n,e,!!(l.o&1));t()}}}const r=n.T;const s=()=>qe(n,true);if(r&&r["s-rc"]){r["s-rc"].push(s)}else{s()}}catch(t){a(t,e);if(n.F){n.F();n.F=void 0}if(n.p){n.p(e)}}};var it=(e,t)=>{};var st=e=>{if((y.o&1)===0){const t=s(e);if(!t){return}const n=t.t;const l=V("connectedCallback",n.$);if(!(t.o&1)){t.o|=1;{if(n.o&(4|8)){ot(e)}}{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){Ve(t,t.T=n);break}}}if(n.l){Object.entries(n.l).map((([t,[n]])=>{if(n&31&&Object.prototype.hasOwnProperty.call(e,t)){const n=e[t];delete e[t];e[t]=n}}))}{rt(e,t,n)}}else{ct(e,t,n.B);if(t==null?void 0:t.H);else if(t==null?void 0:t.v){t.v.then((()=>it()))}}l()}};var ot=e=>{if(!p.document){return}const t=e["s-cr"]=p.document.createComment("");t["s-cn"]=true;We(e,t,e.firstChild)};var ft=async e=>{if((y.o&1)===0){const t=s(e);{if(t==null?void 0:t.V){t.V.map((e=>e()));t.V=void 0}}}if(Y.has(e)){Y.delete(e)}if(e.shadowRoot&&Y.has(e.shadowRoot)){Y.delete(e.shadowRoot)}};var at=(e,t)=>{const n={o:t[0],$:t[1]};try{{n.l=t[2]}{n.B=t[3]}{n.U=se(e.U);n.P=e.P;n.W=e.W}{n._=[]}const l=e.prototype.connectedCallback;const r=e.prototype.disconnectedCallback;Object.assign(e.prototype,{__hasHostListenerAttached:false,__registerHost(){o(this,n)},connectedCallback(){if(!this.__hasHostListenerAttached){const e=s(this);if(!e){return}ct(this,e,n.B);this.__hasHostListenerAttached=true}st(this);if(l){l.call(this)}},disconnectedCallback(){ft(this);if(r){r.call(this)}},__attachShadow(){{if(!this.shadowRoot){L.call(this,n)}else{if(this.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${n.$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}});Object.defineProperty(e,"is",{value:n.$,configurable:true});return lt(e,n,1|2)}catch(t){a(t);return e}};var ct=(e,t,n,l)=>{if(n&&p.document){n.map((([n,l,r])=>{const i=vt(p.document,e,n);const s=ut(t,r);const o=dt(n);y.ael(i,l,s,o);(t.V=t.V||[]).push((()=>y.rel(i,l,s,o)))}))}};var ut=(e,t)=>n=>{try{{e.$hostElement$[t](n)}}catch(t){a(t,e.$hostElement$)}};var vt=(e,t,n)=>{if(n&8){return p}return t};var dt=e=>b?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var pt=e=>y.m=e;var ht=e=>Object.assign(y,e);var yt=new WeakMap;function bt(e,t){let n=yt.get(t);if(!n){const e={o:0,$:t.tagName};n={o:0,t:e,$hostElement$:t};yt.set(t,n)}Be(n,e)}function mt(e){return e}export{h as H,te as a,ae as c,E as getAssetPath,X as h,at as p,bt as render,R as setAssetPath,pt as setNonce,ht as setPlatformOptions,mt as t};
+const e="ds-mo";const t={hotModuleReplacement:false,hydratedSelectorName:"hydrated",lazyLoad:false,slotRelocation:true,state:true,updatable:true};var n="http://www.w3.org/2000/svg";var l="http://www.w3.org/1999/xhtml";function r(e,t,n){const l=typeof HTMLElement!=="undefined"?HTMLElement.prototype:null;while(e&&e!==l){const l=Object.getOwnPropertyDescriptor(e,t);if(l&&(!n||l.get))return l;e=Object.getPrototypeOf(e)}return void 0}var i=(e,t)=>{var n;const l=t.t;const i=Object.entries((n=l.l)!=null?n:{});i.map((([n,[l]])=>{if(l&31||l&32){const l=e[n];const i=r(Object.getPrototypeOf(e),n,true)||Object.getOwnPropertyDescriptor(e,n);if(i){Object.defineProperty(e,n,{get(){return i.get.call(this)},set(e){i.set.call(this,e)},configurable:true,enumerable:true})}if(t.i.has(n)){e[n]=t.i.get(n)}else if(l!==void 0){e[n]=l}}}))};var s=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var o=(e,n)=>{const l={o:0,$hostElement$:e,t:n,i:new Map,u:new Map};{l.v=new Promise((e=>l.p=e));e["s-p"]=[];e["s-rc"]=[]}const r=l;e.__stencil__getHostRef=()=>r;if(n.o&512&&t.state){i(e,l)}return r};var f=(e,t)=>t in e;var a=(e,t)=>(0,console.error)(e,t);var c=new Map;var u="slot-fb{display:contents}slot-fb[hidden]{display:none}";var v="http://www.w3.org/1999/xlink";var d=["formAssociatedCallback","formResetCallback","formDisabledCallback","formStateRestoreCallback"];var p=typeof window!=="undefined"?window:{};var h=p.HTMLElement||class{};var y={o:0,h:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)};var b=(()=>{var e;let t=false;try{(e=p.document)==null?void 0:e.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(e){}return t})();var m=e=>Promise.resolve(e);var w=(()=>{try{if(!p.document.adoptedStyleSheets){return false}new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var g=w?(()=>!!p.document&&Object.getOwnPropertyDescriptor(p.document.adoptedStyleSheets,"length").writable)():false;var $=false;var j=[];var O=[];var S=(e,t)=>n=>{e.push(n);if(!$){$=true;if(t&&y.o&4){M(N)}else{y.raf(N)}}};var k=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){a(e)}}e.length=0};var N=()=>{k(j);{k(O);if($=j.length>0){y.raf(N)}}};var M=e=>m().then(e);var C=S(O,true);var E=e=>{const t=new URL(e,y.h);return t.origin!==p.location.origin?t.href:t.pathname};var R=e=>y.h=e;function x(e){return void 0}var A;function L(e){var t;const n={mode:"open"};const l=this.attachShadow(n);if(A===void 0)A=(t=x())!=null?t:null;if(A){if(g){l.adoptedStyleSheets.push(A)}else{l.adoptedStyleSheets=[...l.adoptedStyleSheets,A]}}}var _=e=>{const t=B(e,"childNodes");if(e.tagName&&e.tagName.includes("-")&&e["s-cr"]&&e.tagName!=="SLOT-FB"){T(t,e.tagName).forEach((e=>{if(e.nodeType===1&&e.tagName==="SLOT-FB"){if(U(e,H(e),false).length){e.hidden=true}else{e.hidden=false}}}))}let n=0;for(n=0;n<t.length;n++){const e=t[n];if(e.nodeType===1&&B(e,"childNodes").length){_(e)}}};var F=e=>{const t=[];for(let n=0;n<e.length;n++){const l=e[n]["s-nr"]||void 0;if(l&&l.isConnected){t.push(l)}}return t};function T(e,t,n){let l=0;let r=[];let i;for(;l<e.length;l++){i=e[l];if(i["s-sr"]&&(!t||i["s-hn"]===t)&&(n===void 0||H(i)===n)){r.push(i);if(typeof n!=="undefined")return r}r=[...r,...T(i.childNodes,t,n)]}return r}var U=(e,t,n=true)=>{const l=[];if(n&&e["s-sr"]||!e["s-sr"])l.push(e);let r=e;while(r=r.nextSibling){if(H(r)===t&&(n||!r["s-sr"]))l.push(r)}return l};var D=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var H=e=>typeof e["s-sn"]==="string"?e["s-sn"]:e.nodeType===1&&e.getAttribute("slot")||void 0;function P(e){if(e.assignedElements||e.assignedNodes||!e["s-sr"])return;const t=t=>function(e){const n=[];const l=this["s-sn"];if(e==null?void 0:e.flatten){console.error(`\n          Flattening is not supported for Stencil non-shadow slots.\n          You can use \`.childNodes\` to nested slot fallback content.\n          If you have a particular use case, please open an issue on the Stencil repo.\n        `)}const r=this["s-cr"].parentElement;const i=r.__childNodes?r.childNodes:F(r.childNodes);i.forEach((e=>{if(l===H(e)){n.push(e)}}));if(t){return n.filter((e=>e.nodeType===1))}return n}.bind(e);e.assignedElements=t(true);e.assignedNodes=t(false)}function W(e){e.dispatchEvent(new CustomEvent("slotchange",{bubbles:false,cancelable:false,composed:false}))}function z(e,t){var n;t=t||((n=e["s-ol"])==null?void 0:n.parentElement);if(!t)return{slotNode:null,slotName:""};const l=e["s-sn"]=H(e)||"";const r=B(t,"childNodes");const i=T(r,t.tagName,l)[0];return{slotNode:i,slotName:l}}function B(e,t){if("__"+t in e){const n=e["__"+t];if(typeof n!=="function")return n;return n.bind(e)}else{if(typeof e[t]!=="function")return e[t];return e[t].bind(e)}}var V=(e,t="")=>{{return()=>{}}};function q(e){var t,n,l;return(l=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?l:void 0}var Y=new WeakMap;var I=(e,t,n)=>{let l=c.get(e);if(w&&n){l=l||new CSSStyleSheet;if(typeof l==="string"){l=t}else{l.replaceSync(t)}}else{l=t}c.set(e,l)};var Z=(e,t,n)=>{var l,r,i;const s=J(t);const o=c.get(s);if(!p.document){return s}e=e.nodeType===11?e:p.document;if(o){if(typeof o==="string"){e=e.head||e;let n=Y.get(e);let i;if(!n){Y.set(e,n=new Set)}if(!n.has(s)){i=p.document.createElement("style");i.textContent=o;const f=(l=y.m)!=null?l:q(p.document);if(f!=null){i.setAttribute("nonce",f)}if(!(t.o&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if(w){const t=(r=e.defaultView)!=null?r:e.ownerDocument.defaultView;const n=new t.CSSStyleSheet;n.replaceSync(o);if(g){e.adoptedStyleSheets.unshift(n)}else{e.adoptedStyleSheets=[n,...e.adoptedStyleSheets]}}else{const t=e.querySelector("style");if(t&&true){t.textContent=o+t.textContent}else{e.prepend(i)}}}else{e.append(i)}}if(t.o&1){e.insertBefore(i,null)}if(t.o&4){i.textContent+=u}if(n){n.add(s)}}}else{let t=Y.get(e);if(!t){Y.set(e,t=new Set)}if(!t.has(s)){const n=(i=e.defaultView)!=null?i:e.ownerDocument.defaultView;let l;if(o.constructor===n.CSSStyleSheet){l=o}else{l=new n.CSSStyleSheet;for(let e=0;e<o.cssRules.length;e++){l.insertRule(o.cssRules[e].cssText,e)}}if(g){e.adoptedStyleSheets.push(l)}else{e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]}t.add(s)}}}return s};var G=e=>{const t=e.t;const n=e.$hostElement$;const l=t.o;const r=V("attachStyles",t.$);const i=Z(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(l&10){n["s-sc"]=i;n.classList.add(i+"-h")}r()};var J=(e,t)=>"sc-"+e.$;var K=e=>e!=null&&e!==void 0;var Q=e=>{e=typeof e;return e==="object"||e==="function"};var X=(e,t,...n)=>{if(typeof e==="string"){e=wt(e)}let l=null;let r=null;let i=null;let s=false;let o=false;const f=[];const a=t=>{for(let n=0;n<t.length;n++){l=t[n];if(Array.isArray(l)){a(l)}else if(l!=null&&typeof l!=="boolean"){if(s=typeof e!=="function"&&!Q(l)){l=String(l)}if(s&&o){f[f.length-1].j+=l}else{f.push(s?ee(null,l):l)}o=s}}};a(n);if(t){if(t.key){r=t.key}if(t.name){i=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,f,le)}const c=ee(e,null);c.O=t;if(f.length>0){c.S=f}{c.k=r}{c.N=i}return c};var ee=(e,t)=>{const n={o:0,M:e,j:t!=null?t:null,C:null,S:null};{n.O=null}{n.k=null}{n.N=null}return n};var te={};var ne=e=>e&&e.M===te;var le={forEach:(e,t)=>e.map(re).forEach(t),map:(e,t)=>e.map(re).map(t).map(ie)};var re=e=>({vattrs:e.O,vchildren:e.S,vkey:e.k,vname:e.N,vtag:e.M,vtext:e.j});var ie=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return X(e.vtag,t,...e.vchildren||[])}const t=ee(e.vtag,e.vtext);t.O=e.vattrs;t.S=e.vchildren;t.k=e.vkey;t.N=e.vname;return t};var se=e=>{if(!e)return void 0;const t=Object.keys(e);if(t.length===0)return void 0;let n=false;for(const l of t){if(n)break;for(const t of e[l]){if(typeof t==="string"){n=true;break}}}if(!n)return e;const l={};for(const n of t){l[n]=e[n].map((e=>typeof e==="string"?{[e]:0}:e))}return l};var oe=(e,t,n)=>{if(e!=null&&!Q(e)){if(t&4){if(n&&typeof e==="string"){return e===""||!!e}else{return e==="false"?false:e===""||!!e}}if(t&2){return typeof e==="string"?parseFloat(e):typeof e==="number"?e:NaN}if(t&1){return String(e)}return e}return e};var fe=e=>e;var ae=(e,t,n)=>{const l=fe(e);return{emit:e=>ce(l,t,{bubbles:true,composed:true,cancelable:true,detail:e})}};var ce=(e,t,n)=>{const l=y.ce(t,n);e.dispatchEvent(l);return l};var ue=(e,t,n,l,r,i,o)=>{if(n===l){return}let a=f(e,t);let c=t.toLowerCase();if(t==="class"){const t=e.classList;const r=de(n);let i=de(l);{t.remove(...r.filter((e=>e&&!i.includes(e))));t.add(...i.filter((e=>e&&!r.includes(e))))}}else if(t==="style"){{for(const t in n){if(!l||l[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in l){if(!n||l[t]!==n[t]){if(t.includes("-")){e.style.setProperty(t,l[t])}else{e.style[t]=l[t]}}}}else if(t==="key");else if(t==="ref"){if(l){He(l,e)}}else if(!e.__lookupSetter__(t)&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(f(p,c)){t=c.slice(2)}else{t=c[2]+t.slice(3)}if(n||l){const r=t.endsWith(pe);t=t.replace(he,"");if(n){y.rel(e,t,n,r)}if(l){y.ael(e,t,l,r)}}}else if(t[0]==="a"&&t.startsWith("attr:")){const n=t.slice(5);let r;{const t=s(e);if(t&&t.t&&t.t.l){const e=t.t.l[n];if(e&&e[1]){r=e[1]}}}if(!r){r=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}if(l==null||l===false){if(l!==false||e.getAttribute(r)===""){e.removeAttribute(r)}}else{e.setAttribute(r,l===true?"":l)}return}else if(t[0]==="p"&&t.startsWith("prop:")){const n=t.slice(5);try{e[n]=l}catch(e){}return}else{const s=Q(l);if((a||s&&l!==null)&&!r){try{if(!e.tagName.includes("-")){const r=l==null?"":l;if(t==="list"){a=false}else if(n==null||e[t]!==r){if(typeof e.__lookupSetter__(t)==="function"){e[t]=r}else{e.setAttribute(t,r)}}}else if(e[t]!==l){e[t]=l}}catch(e){}}let o=false;{if(c!==(c=c.replace(/^xlink\:?/,""))){t=c;o=true}}if(l==null||l===false){if(l!==false||e.getAttribute(t)===""){if(o){e.removeAttributeNS(v,t)}else{e.removeAttribute(t)}}}else if((!a||i&4||r)&&!s&&e.nodeType===1){l=l===true?"":l;if(o){e.setAttributeNS(v,t,l)}else{e.setAttribute(t,l)}}}};var ve=/\s/;var de=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(ve)};var pe="Capture";var he=new RegExp(pe+"$");var ye=(e,t,n,l)=>{const r=t.C.nodeType===11&&t.C.host?t.C.host:t.C;const i=e&&e.O||{};const s=t.O||{};{for(const e of be(Object.keys(i))){if(!(e in s)){ue(r,e,i[e],void 0,n,t.o)}}}for(const e of be(Object.keys(s))){ue(r,e,i[e],s[e],n,t.o)}};function be(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var me;var we;var ge;var $e=false;var je=false;var Oe=false;var Se=false;var ke=[];var Ne=[];var Me=(e,r,i)=>{var s;const o=r.S[i];let f=0;let a;let c;let u;if(!$e){Oe=true;if(o.M==="slot"){o.o|=o.S?2:1}}if(o.j!=null){a=o.C=p.document.createTextNode(o.j)}else if(o.o&1){a=o.C=p.document.createTextNode("");{ye(null,o,Se)}}else{if(!Se){Se=o.M==="svg"}if(!p.document){throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.")}a=o.C=p.document.createElementNS(Se?n:l,!$e&&t.slotRelocation&&o.o&2?"slot-fb":o.M);if(Se&&o.M==="foreignObject"){Se=false}{ye(null,o,Se)}if(K(me)&&a["s-si"]!==me){a.classList.add(a["s-si"]=me)}if(o.S){const t=o.M==="template"?a.content:a;for(f=0;f<o.S.length;++f){c=Me(e,o,f);if(c){t.appendChild(c)}}}{if(o.M==="svg"){Se=false}else if(a.tagName==="foreignObject"){Se=true}}}a["s-hn"]=ge;{if(o.o&(2|1)){a["s-sr"]=true;a["s-cr"]=we;a["s-sn"]=o.N||"";a["s-rf"]=(s=o.O)==null?void 0:s.ref;P(a);u=e&&e.S&&e.S[i];if(u&&u.M===o.M&&e.C){Ce(e.C)}{ze(we,a,r.C,e==null?void 0:e.C)}}}return a};var Ce=e=>{y.o|=1;const t=e.closest(ge.toLowerCase());if(t!=null){const n=Array.from(t.__childNodes||t.childNodes).find((e=>e["s-cr"]));const l=Array.from(e.__childNodes||e.childNodes);for(const e of n?l.reverse():l){if(e["s-sh"]!=null){We(t,e,n!=null?n:null);e["s-sh"]=void 0;Oe=true}}}y.o&=-2};var Ee=(e,t)=>{y.o|=1;const n=Array.from(e.__childNodes||e.childNodes);if(e["s-sr"]){let t=e;while(t=t.nextSibling){if(t&&t["s-sn"]===e["s-sn"]&&t["s-sh"]===ge){n.push(t)}}}for(let e=n.length-1;e>=0;e--){const l=n[e];if(l["s-hn"]!==ge&&l["s-ol"]){We(_e(l).parentNode,l,_e(l));l["s-ol"].remove();l["s-ol"]=void 0;l["s-sh"]=void 0;Oe=true}if(t){Ee(l,t)}}y.o&=-2};var Re=(e,t,n,l,r,i)=>{let s=e["s-cr"]&&e["s-cr"].parentNode||e;let o;if(s.shadowRoot&&s.tagName===ge){s=s.shadowRoot}if(n.M==="template"){s=s.content}for(;r<=i;++r){if(l[r]){o=Me(null,n,r);if(o){l[r].C=o;We(s,o,_e(t))}}}};var xe=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.C;De(t);if(e){{je=true;if(e["s-ol"]){e["s-ol"].remove()}else{Ee(e,true)}}e.remove()}}}};var Ae=(e,t,n,l,r=false)=>{let i=0;let s=0;let o=0;let f=0;let a=t.length-1;let c=t[0];let u=t[a];let v=l.length-1;let d=l[0];let p=l[v];let h;let y;const b=n.M==="template"?e.content:e;while(i<=a&&s<=v){if(c==null){c=t[++i]}else if(u==null){u=t[--a]}else if(d==null){d=l[++s]}else if(p==null){p=l[--v]}else if(Le(c,d,r)){Fe(c,d,r);c=t[++i];d=l[++s]}else if(Le(u,p,r)){Fe(u,p,r);u=t[--a];p=l[--v]}else if(Le(c,p,r)){if(c.M==="slot"||p.M==="slot"){Ee(c.C.parentNode,false)}Fe(c,p,r);We(b,c.C,u.C.nextSibling);c=t[++i];p=l[--v]}else if(Le(u,d,r)){if(c.M==="slot"||p.M==="slot"){Ee(u.C.parentNode,false)}Fe(u,d,r);We(b,u.C,c.C);u=t[--a];d=l[++s]}else{o=-1;{for(f=i;f<=a;++f){if(t[f]&&t[f].k!==null&&t[f].k===d.k){o=f;break}}}if(o>=0){y=t[o];if(y.M!==d.M){h=Me(t&&t[s],n,o)}else{Fe(y,d,r);t[o]=void 0;h=y.C}d=l[++s]}else{h=Me(t&&t[s],n,s);d=l[++s]}if(h){{We(_e(c.C).parentNode,h,_e(c.C))}}}}if(i>a){Re(e,l[v+1]==null?null:l[v+1].C,n,l,s,v)}else if(s>v){xe(t,i,a)}};var Le=(e,t,n=false)=>{if(e.M===t.M){if(e.M==="slot"){return e.N===t.N}if(!n){return e.k===t.k}if(n&&!e.k&&t.k){e.k=t.k}return true}return false};var _e=e=>e&&e["s-ol"]||e;var Fe=(e,n,l=false)=>{const r=n.C=e.C;const i=e.S;const s=n.S;const o=n.M;const f=n.j;let a;if(f==null){{Se=o==="svg"?true:o==="foreignObject"?false:Se}{if(o==="slot"&&!$e){if(e.N!==n.N){n.C["s-sn"]=n.N||"";Ce(n.C.parentElement)}}ye(e,n,Se)}if(i!==null&&s!==null){Ae(r,i,n,s,l)}else if(s!==null){if(e.j!==null){r.textContent=""}Re(r,null,n,s,0,s.length-1)}else if(!l&&t.updatable&&i!==null){xe(i,0,i.length-1)}else;if(Se&&o==="svg"){Se=false}}else if(a=r["s-cr"]){a.parentNode.textContent=f}else if(e.j!==f){r.data=f}};var Te=[];var Ue=e=>{let t;let n;let l;const r=e.__childNodes||e.childNodes;for(const e of r){if(e["s-sr"]&&(t=e["s-cr"])&&t.parentNode){n=t.parentNode.__childNodes||t.parentNode.childNodes;const r=e["s-sn"];for(l=n.length-1;l>=0;l--){t=n[l];if(!t["s-cn"]&&!t["s-nr"]&&t["s-hn"]!==e["s-hn"]&&(!t["s-sh"]||t["s-sh"]!==e["s-hn"])){if(D(t,r)){let n=Te.find((e=>e.R===t));je=true;t["s-sn"]=t["s-sn"]||r;if(n){n.R["s-sh"]=e["s-hn"];n.A=e}else{t["s-sh"]=e["s-hn"];Te.push({A:e,R:t})}if(t["s-sr"]){Te.map((e=>{if(D(e.R,t["s-sn"])){n=Te.find((e=>e.R===t));if(n&&!e.A){e.A=n.A}}}))}}else if(!Te.some((e=>e.R===t))){Te.push({R:t})}}}}if(e.nodeType===1){Ue(e)}}};var De=e=>{{if(e.O&&e.O.ref){ke.push((()=>e.O.ref(null)))}e.S&&e.S.map(De)}};var He=(e,t)=>{{Ne.push((()=>e(t)))}};var Pe=()=>{{ke.forEach((e=>e()));ke.length=0;Ne.forEach((e=>e()));Ne.length=0}};var We=(e,t,n,l)=>{{if(typeof t["s-sn"]==="string"&&!!t["s-sr"]&&!!t["s-cr"]){ze(t["s-cr"],t,e,t.parentElement)}else if(typeof t["s-sn"]==="string"){e.insertBefore(t,n);const{slotNode:r}=z(t);if(r&&!l)W(r);return t}}if(e.__insertBefore){return e.__insertBefore(t,n)}else{return e==null?void 0:e.insertBefore(t,n)}};function ze(e,t,n,l){var r,i;let s;if(e&&typeof t["s-sn"]==="string"&&!!t["s-sr"]&&e.parentNode&&e.parentNode["s-sc"]&&(s=t["s-si"]||e.parentNode["s-sc"])){const e=t["s-sn"];const o=t["s-hn"];(r=n.classList)==null?void 0:r.add(s+"-s");if(l&&((i=l.classList)==null?void 0:i.contains(s+"-s"))){let t=(l.__childNodes||l.childNodes)[0];let n=false;while(t){if(t["s-sn"]!==e&&t["s-hn"]===o&&!!t["s-sr"]){n=true;break}t=t.nextSibling}if(!n)l.classList.remove(s+"-s")}}}var Be=(e,t,n=false)=>{var l,r,i,s,o;const f=e.$hostElement$;const a=e.t;const c=e.L||ee(null,null);const u=ne(t);const v=u?t:X(null,null,t);ge=f.tagName;if(a._){v.O=v.O||{};a._.forEach((([e,t])=>{{v.O[t]=f[e]}}))}if(n&&v.O){for(const e of Object.keys(v.O)){if(f.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){v.O[e]=f[e]}}}v.M=null;v.o|=4;e.L=v;v.C=c.C=f.shadowRoot||f;{me=f["s-sc"]}$e=!!(a.o&1)&&!(a.o&128);{we=f["s-cr"];je=false}Fe(c,v,n);{y.o|=1;if(Oe){Ue(v.C);for(const e of Te){const t=e.R;if(!t["s-ol"]&&p.document){const e=p.document.createTextNode("");e["s-nr"]=t;We(t.parentNode,t["s-ol"]=e,t,n)}}for(const e of Te){const t=e.R;const o=e.A;if(t.nodeType===1&&n){t["s-ih"]=(l=t.hidden)!=null?l:false}if(o){const e=o.parentNode;let l=o.nextSibling;if(l&&l.nodeType===1){let n=(r=t["s-ol"])==null?void 0:r.previousSibling;while(n){let r=(i=n["s-nr"])!=null?i:null;if(r&&r["s-sn"]===t["s-sn"]&&e===(r.__parentNode||r.parentNode)){r=r.nextSibling;while(r===t||(r==null?void 0:r["s-sr"])){r=r==null?void 0:r.nextSibling}if(!r||!r["s-nr"]){l=r;break}}n=n.previousSibling}}const f=t.__parentNode||t.parentNode;const a=t.__nextSibling||t.nextSibling;if(!l&&e!==f||a!==l){if(t!==l){We(e,t,l,n);if(t.nodeType===8&&t.nodeValue.startsWith("s-nt-")){const e=p.document.createTextNode(t.nodeValue.replace(/^s-nt-/,""));e["s-hn"]=t["s-hn"];e["s-sn"]=t["s-sn"];e["s-sh"]=t["s-sh"];e["s-sr"]=t["s-sr"];e["s-ol"]=t["s-ol"];e["s-ol"]["s-nr"]=e;We(t.parentNode,e,t,n);t.parentNode.removeChild(t)}if(t.nodeType===1&&t.tagName!=="SLOT-FB"){t.hidden=(s=t["s-ih"])!=null?s:false}}}t&&typeof o["s-rf"]==="function"&&o["s-rf"](o)}else if(t.nodeType===1){t.hidden=true}}}if(je){_(v.C)}y.o&=-2;Te.length=0}if(!$e&&!(a.o&1)&&f["s-cr"]){const e=v.C.__childNodes||v.C.childNodes;for(const t of e){if(t["s-hn"]!==ge&&!t["s-sh"]){if(n&&t["s-ih"]==null){t["s-ih"]=(o=t.hidden)!=null?o:false}if(t.nodeType===1){t.hidden=true}else if(t.nodeType===3&&!!t.nodeValue.trim()){const e=p.document.createComment("s-nt-"+t.nodeValue);e["s-sn"]=t["s-sn"];We(t.parentNode,e,t,n);t.parentNode.removeChild(t)}}}}we=void 0;Pe()};var Ve=(e,t)=>{if(t&&!e.F&&t["s-p"]){const n=t["s-p"].push(new Promise((l=>e.F=()=>{t["s-p"].splice(n-1,1);l()})))}};var qe=(e,t)=>{{e.o|=16}if(e.o&4){e.o|=512;return}Ve(e,e.T);const n=()=>Ye(e,t);if(t){queueMicrotask((()=>{n()}));return}return C(n)};var Ye=(e,t)=>{const n=e.$hostElement$;const l=V("scheduleUpdate",e.t.$);const r=n;if(!r){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let i;if(t){i=et(r,"componentWillLoad",void 0,n)}else{i=et(r,"componentWillUpdate",void 0,n)}i=Ie(i,(()=>et(r,"componentWillRender",void 0,n)));l();return Ie(i,(()=>Ge(e,r,t)))};var Ie=(e,t)=>Ze(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var Ze=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var Ge=async(e,t,n)=>{var l;const r=e.$hostElement$;const i=V("update",e.t.$);const s=r["s-rc"];if(n){G(e)}const o=V("render",e.t.$);{Je(e,t,r,n)}if(s){s.map((e=>e()));r["s-rc"]=void 0}o();i();{const t=(l=r["s-p"])!=null?l:[];const n=()=>Ke(e);if(t.length===0){n()}else{Promise.all(t).then(n).catch(n);e.o|=4;t.length=0}}};var Je=(e,t,n,l)=>{try{t=t.render();{e.o&=-17}{e.o|=2}{{{Be(e,t,l)}}}}catch(t){a(t,e.$hostElement$)}return null};var Ke=e=>{const t=e.t.$;const n=e.$hostElement$;const l=V("postUpdate",t);const r=n;const i=e.T;et(r,"componentDidRender",void 0,n);if(!(e.o&64)){e.o|=64;{tt(n)}et(r,"componentDidLoad",void 0,n);l();{e.p(n);if(!i){Xe()}}}else{et(r,"componentDidUpdate",void 0,n);l()}{if(e.F){e.F();e.F=void 0}if(e.o&512){M((()=>qe(e,false)))}e.o&=-517}};var Qe=e=>{var t;{const n=s(e);const l=(t=n==null?void 0:n.$hostElement$)==null?void 0:t.isConnected;if(l&&(n.o&(2|16))===2){qe(n,false)}return l}};var Xe=t=>{M((()=>ce(p,"appload",{detail:{namespace:e}})))};var et=(e,t,n,l)=>{if(e&&e[t]){try{return e[t](n)}catch(e){a(e,l)}}return void 0};var tt=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var nt=(e,t)=>s(e).i.get(t);var lt=(e,t,n,l)=>{const r=s(e);if(!r){return}const i=e;const o=r.i.get(t);const f=r.o;const c=i;n=oe(n,l.l[t][0],!!(l.o&64));const u=Number.isNaN(o)&&Number.isNaN(n);const v=n!==o&&!u;if(v){r.i.set(t,n);if(l.U){const e=l.U[t];if(e){e.map((e=>{try{const[[l,i]]=Object.entries(e);if(f&128||i&1){if(!c){r.D.push((()=>{r.H[l](n,o,t)}))}else{c[l](n,o,t)}}}catch(e){a(e,i)}}))}}if(f&2){if(c.componentShouldUpdate){const e=c.componentShouldUpdate(n,o,t);if(e===false&&!(f&16)){return}}if(!(f&16)){qe(r,false)}}}};var rt=(e,n,l)=>{var i,o;const f=e.prototype;if(n.o&64&&l&1){d.forEach((e=>{const t=f[e];Object.defineProperty(f,e,{value(...n){var l;const r=s(this);const i=this;if(!i){(l=r==null?void 0:r.v)==null?void 0:l.then((t=>{const l=t[e];typeof l==="function"&&l.call(t,...n)}))}else{const e=t;typeof e==="function"&&e.call(i,...n)}}})}))}{{if(e.watchers&&!n.U){n.U=se(e.watchers)}if(e.deserializers&&!n.P){n.P=e.deserializers}if(e.serializers&&!n.W){n.W=e.serializers}}const l=Object.entries((i=n.l)!=null?i:{});l.map((([e,[t]])=>{if(t&31||t&32){const{get:l,set:i}=r(f,e)||{};if(l)n.l[e][0]|=2048;if(i)n.l[e][0]|=4096;{Object.defineProperty(f,e,{get(){{return l?l.apply(this):nt(this,e)}},configurable:true,enumerable:true})}Object.defineProperty(f,e,{set(l){const r=s(this);if(!r){return}if(i){const s=t&32?this[e]:r.$hostElement$[e];if(typeof s==="undefined"&&r.i.get(e)){l=r.i.get(e)}i.apply(this,[oe(l,t,!!(n.o&64))]);l=t&32?this[e]:r.$hostElement$[e];lt(this,e,l,n);return}{lt(this,e,l,n);return}}})}}));{const r=new Map;f.attributeChangedCallback=function(e,i,o){y.jmp((()=>{var a;const c=r.get(e);const u=s(this);if(this.hasOwnProperty(c)&&t.lazyLoad);if(f.hasOwnProperty(c)&&typeof this[c]==="number"&&this[c]==o){return}else if(c==null){const t=u==null?void 0:u.o;if(u&&t&&!(t&8)&&o!==i){const l=this;const r=l;const s=(a=n.U)==null?void 0:a[e];s==null?void 0:s.forEach((n=>{const[[l,s]]=Object.entries(n);if(r[l]!=null&&(t&128||s&1)){r[l].call(r,o,i,e)}}))}return}const v=l.find((([e])=>e===c));const d=v&&v[1][0]&4;const p=d&&o===null&&this[c]===void 0;if(d){o=o===null||o==="false"?false:true}const h=Object.getOwnPropertyDescriptor(f,c);if(!p&&o!=this[c]&&(!h.get||!!h.set)){this[c]=o}}))};e.observedAttributes=Array.from(new Set([...Object.keys((o=n.U)!=null?o:{}),...l.filter((([e,t])=>t[0]&31)).map((([e,t])=>{var l;const i=t[1]||e;r.set(i,e);if(t[0]&512){(l=n._)==null?void 0:l.push([e,i])}return i}))]))}}return e};var it=async(e,n,l,r)=>{let i;try{if((n.o&32)===0){n.o|=32;{i=e.constructor;const t=e.localName;customElements.whenDefined(t).then((()=>n.o|=128))}if(i&&i.style){let e;if(typeof i.style==="string"){e=i.style}const n=J(l);if(!c.has(n)||t.hotModuleReplacement){const t=V("registerStyles",l.$);I(n,e,!!(l.o&1));t()}}}const r=n.T;const s=()=>qe(n,true);if(r&&r["s-rc"]){r["s-rc"].push(s)}else{s()}}catch(t){a(t,e);if(n.F){n.F();n.F=void 0}if(n.p){n.p(e)}}};var st=(e,t)=>{};var ot=e=>{if((y.o&1)===0){const t=s(e);if(!t){return}const n=t.t;const l=V("connectedCallback",n.$);if(!(t.o&1)){t.o|=1;{if(n.o&(4|8)){ft(e)}}{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){Ve(t,t.T=n);break}}}if(n.l){Object.entries(n.l).map((([t,[n]])=>{if(n&31&&Object.prototype.hasOwnProperty.call(e,t)){const n=e[t];delete e[t];e[t]=n}}))}{it(e,t,n)}}else{ut(e,t,n.B);if(t==null?void 0:t.H);else if(t==null?void 0:t.v){t.v.then((()=>st()))}}l()}};var ft=e=>{if(!p.document){return}const t=e["s-cr"]=p.document.createComment("");t["s-cn"]=true;We(e,t,e.firstChild)};var at=async e=>{if((y.o&1)===0){const t=s(e);{if(t==null?void 0:t.V){t.V.map((e=>e()));t.V=void 0}}}if(Y.has(e)){Y.delete(e)}if(e.shadowRoot&&Y.has(e.shadowRoot)){Y.delete(e.shadowRoot)}};var ct=(e,t)=>{const n={o:t[0],$:t[1]};try{{n.l=t[2]}{n.B=t[3]}{n.U=se(e.U);n.P=e.P;n.W=e.W}{n._=[]}const l=e.prototype.connectedCallback;const r=e.prototype.disconnectedCallback;Object.assign(e.prototype,{__hasHostListenerAttached:false,__registerHost(){o(this,n)},connectedCallback(){if(!this.__hasHostListenerAttached){const e=s(this);if(!e){return}ut(this,e,n.B);this.__hasHostListenerAttached=true}ot(this);if(l){l.call(this)}},disconnectedCallback(){at(this);if(r){r.call(this)}},__attachShadow(){{if(!this.shadowRoot){L.call(this,n)}else{if(this.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${n.$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}});Object.defineProperty(e,"is",{value:n.$,configurable:true});return rt(e,n,1|2)}catch(t){a(t);return e}};var ut=(e,t,n,l)=>{if(n&&p.document){n.map((([n,l,r])=>{const i=dt(p.document,e,n);const s=vt(t,r);const o=pt(n);y.ael(i,l,s,o);(t.V=t.V||[]).push((()=>y.rel(i,l,s,o)))}))}};var vt=(e,t)=>n=>{try{{e.$hostElement$[t](n)}}catch(t){a(t,e.$hostElement$)}};var dt=(e,t,n)=>{if(n&8){return p}return t};var pt=e=>b?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var ht=e=>y.m=e;var yt=e=>Object.assign(y,e);var bt=new WeakMap;function mt(e,t){let n=bt.get(t);if(!n){const e={o:0,$:t.tagName};n={o:0,t:e,$hostElement$:t};bt.set(t,n)}Be(n,e)}function wt(e){return e}export{h as H,te as a,ae as c,Qe as f,E as getAssetPath,X as h,ct as p,mt as render,R as setAssetPath,ht as setNonce,yt as setPlatformOptions,wt as t};
 //# sourceMappingURL=index.js.map