@ds-mo/ui 13.2.0 → 13.3.0

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

@@ -1 +1 @@
-{"version":3,"names":["resolveCardOverviewCollapseGeometry","options","compactHeight","Math","max","expandedHeight","progress","variant","Number","isFinite","min","distance","offset","active","visibleHeight","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","LOADING_PLACEHOLDER_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","INVERTED_PRIMARY","INVERTED_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","disconnectedCallback","disconnect","hasScore","score","undefined","scoreErrorMessage","visibleMetrics","slice","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","layoutEl","updateHeight","height","abs","getBoundingClientRect","ResizeObserver","entries","contentRect","observe","rovingIndex","selectMetric","dsMetricSelect","emit","cells","el","querySelectorAll","focus","bar","textVariant","width","className","h","class","background","renderTrend","trend","emphasis","as","tone","color","fontFeature","direction","value","renderScore","compact","part","role","name","size","label","band","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","hasHeader","Boolean","collapse","Host","style","ref","element","controlSize"],"sources":["src/wc/components/CardOverview/card-overview-controller.ts","src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';\n\nexport interface CardOverviewCollapseGeometry {\n  active: boolean;\n  expandedHeight: number;\n  offset: number;\n  visibleHeight: number;\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n  variant: CardOverviewVariant;\n  progress: number;\n  expandedHeight: number;\n  compactHeight: number;\n}): CardOverviewCollapseGeometry {\n  const compactHeight = Math.max(0, options.compactHeight);\n  const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n  const progress =\n    options.variant === 'compact' || !Number.isFinite(options.progress)\n      ? 0\n      : Math.min(1, Math.max(0, options.progress));\n  const distance = Math.max(0, expandedHeight - compactHeight);\n  const offset = distance * progress;\n\n  return {\n    active: progress > 0 && distance > 0,\n    expandedHeight,\n    offset,\n    visibleHeight: expandedHeight - offset,\n  };\n}\n\nexport function resolveOverviewRovingIndex(\n  metrics: readonly OverviewMetric[],\n  focusedIndex: number\n): number {\n  const first = metrics.findIndex(metric => !metric.isInactive);\n  if (first < 0) return -1;\n  return metrics[focusedIndex] && !metrics[focusedIndex].isInactive\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/* The summary bar follows the theme-reactive inverted sub-theme. */\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  /* Drives the narrow layout below from the card's own width, not the viewport's. */\n  container-type: inline-size;\n  /* A summary is read, not copied; stray selection while clicking cells is noise. */\n  -webkit-user-select: none;\n  user-select: none;\n  /* Width a metric may shrink to before the grid drops a column. */\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-inverted-border-tertiary);\n  --ds-card-overview-divider: var(--ds-card-overview-divider-width) solid\n    var(--ds-card-overview-divider-color);\n  color: var(--color-inverted-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-050);\n  background: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  overflow-anchor: none;\n}\n\n/*\n * The visual surface owns elevation outside this clipping viewport. Keeping\n * those layers separate lets a page shrink the surface while content moves and\n * clips inside it without cutting off the shadow or inset highlight.\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__layout {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\n}\n\n.card-overview__layout {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n  align-items: stretch;\n  min-width: 0;\n}\n\n.card-overview__layout--has-score {\n  grid-template-columns: auto minmax(0, 1fr);\n}\n\n/*\n * Transparent at regular widths so the score and header participate in the\n * inner layout grid directly. At the narrow breakpoint it becomes the unified\n * summary block above the metrics.\n */\n.card-overview__summary {\n  display: contents;\n}\n\n/* ── Score ────────────────────────────────────────────────────────────────── */\n\n/*\n * Hugs its content and never shrinks, so the headline figure keeps its size and\n * the metric grid absorbs the remaining width.\n */\n/*\n * Top aligned rather than centred, and padded to match the header, so the score\n * label sits in the same 32px box at the same offset as the period text beside\n * it. Both use the same type variant, so their baselines land together.\n */\n.card-overview__score {\n  display: flex;\n  grid-row: 1 / span 2;\n  grid-column: 1;\n  flex: 0 0 auto;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n}\n\n.card-overview__score--resolved {\n  min-inline-size: max-content;\n}\n\n/* The control-height box that aligns this label with the period text. */\n.card-overview__score-label-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--ds-control-height);\n}\n\n/*\n * The score is its own column, so its rows cannot baseline-align with the measure\n * rows through flex or grid — those only align items that share a line. These two\n * offsets pull the column onto the measure baselines instead.\n *\n * They are compensation for how much lower a display-scale figure sits in its line\n * box than the body text it aligns to, so they are coupled to the type pairing:\n * change the score or measure variants and both need re-measuring.\n */\n.card-overview__score-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  margin-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n}\n\n.card-overview__score-value {\n  flex: 0 0 auto;\n}\n\n/* Second half of the baseline compensation described above the score figure. */\n.card-overview__score-band {\n  margin-block-start: calc(-1 * var(--dimension-space-025));\n}\n\n/*\n * A skeleton bar is a solid block, so in a baseline-aligned row it aligns on its\n * bottom edge while the text it stands in for aligns on its baseline. Next to a\n * display-scale figure that difference is the descent under the figure's\n * baseline, which drops the bar below where the resolved trend sits.\n *\n * The offset is applied with relative positioning rather than a margin: a margin\n * is not part of a synthesized baseline, so it grows the figure instead of moving\n * the bar, which then pushes the band below it out of place.\n *\n * Only needed beside the score figure; the measure rows pair body variants whose\n * bottom edge and baseline already agree.\n */\n.card-overview__skeleton-baseline {\n  position: relative;\n  inset-block-start: calc(-1 * var(--dimension-space-150));\n}\n\n.card-overview__score--error {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  color: var(--color-inverted-foreground-negative);\n}\n\n/* ── Body ─────────────────────────────────────────────────────────────────── */\n\n/*\n * Takes the remaining inline space. The minimum is what makes the host wrap: once\n * the score and roughly two measure columns no longer fit side by side, the body\n * drops below the score instead of squeezing it. `min()` keeps that from becoming\n * an overflow floor on very narrow viewports.\n */\n.card-overview__body {\n  display: flex;\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__body--has-score {\n  grid-column: 2;\n}\n\n/*\n * One control row: 8px of padding on every side around a 32px md control, so the\n * bar is 8 + 32 + 8. Both ends of the bar are control-shaped boxes — the period\n * text on the left and the slotted control on the right — so the row reads\n * balanced rather than text on one side and a control on the other.\n */\n.card-overview__header {\n  display: flex;\n  grid-row: 1;\n  grid-column: 1;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n.card-overview__header--has-score {\n  grid-column: 2;\n}\n\n/*\n * Matches the control's box on the opposite end, including its inline padding, so\n * the text lands at the same optical inset the slotted control does:\n * 8 from the bar + 6 from this box + 2 from the label inset = 16.\n *\n * Nowrap keeps the row at the control height; the period truncates rather than\n * growing the bar to two lines.\n */\n.card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--ds-control-height);\n  min-width: 0;\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The period control is slotted, so only reserve space for it. */\n.card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n}\n\n/* ── Metrics ──────────────────────────────────────────────────────────────── */\n\n/*\n * `auto-fit` gives every occupied track an equal share while all metrics fit on\n * one row. Once wrapping creates another row, its cells stay on those same\n * tracks, so a partial final row leaves empty space instead of stretching one\n * measure wider than its peers.\n *\n * Dividers are painted outward from each cell and clipped by this grid. That\n * leaves only the lines between cells: anything emitted from the final column or\n * final row lands outside the grid and is clipped without needing to detect the\n * number of tracks.\n *\n * `flex: 1 1 auto` makes the grid absorb whatever height the body has\n * left, so cells reach the card bottom and their hover wash has no dead strip.\n */\n.card-overview__metrics {\n  display: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    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/*\n * Square by design. Cells tile edge to edge against their dividers, so a radius\n * would break the seam; the card's own radius clips the outer corners instead.\n *\n * Padding is plain rather than control-derived: a cell is a block of content, not\n * a control box that has to optically match something on the far side.\n */\n.card-overview__metric {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  padding: var(--dimension-space-175) var(--dimension-space-200);\n  border-radius: 0;\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}\n\n.card-overview__metric[role='button'] {\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\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/* ── Trend ────────────────────────────────────────────────────────────────── */\n\n/*\n * Tone arrives resolved from the caller: the arrow direction and the sentiment\n * are independent, so a falling metric can read positive or neutral. The arrow is\n * a glyph inside this text node, so it always matches the surrounding weight.\n */\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n/* ── Narrow layout ────────────────────────────────────────────────────────── */\n\n/*\n * Below roughly two measure columns the card becomes a full stack. The summary\n * wrapper owns one block above the metrics: score label, figure, and trend stay\n * together at the start; the period control sits at the upper end; and the period\n * copy follows the score instead of becoming a separate divided row.\n */\n/*\n * Selectors are host-qualified purely for specificity: the compiled sheet places\n * these rules ahead of the base ones, so a plain class here would only ever add\n * properties and never override them.\n */\n@container (max-width: 480px) {\n  :host .card-overview__layout {\n    grid-template-rows: auto minmax(0, 1fr);\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :host .card-overview__summary {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-rows: auto;\n    border-block-end: var(--ds-card-overview-divider);\n  }\n\n  :host .card-overview__score {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-rows: auto auto;\n    grid-template-columns: auto auto;\n    justify-content: start;\n    column-gap: var(--dimension-space-100);\n    width: auto;\n    padding-block-end: var(--dimension-space-100);\n    padding-inline-end: var(--dimension-space-100);\n    border-inline-end: none;\n  }\n\n  :host .card-overview__score-label-row {\n    grid-row: 1;\n    grid-column: 1 / -1;\n    min-height: var(--ds-control-height);\n  }\n\n  /*\n   * The wide score uses optical offsets to meet the neighbouring metric\n   * baselines. In the stacked summary those neighbours are gone, so natural\n   * document flow keeps the label, figure, band, and period clearly ordered.\n   */\n  :host .card-overview__score-band,\n  :host .card-overview__score-figure {\n    grid-row: 2;\n    margin-block-start: 0;\n  }\n\n  :host .card-overview__score-figure {\n    grid-column: 1;\n    align-self: baseline;\n    gap: var(--dimension-space-100);\n  }\n\n  :host .card-overview__score-band {\n    grid-column: 2;\n    align-self: baseline;\n    display: none;\n  }\n\n  :host .card-overview__header {\n    display: grid;\n    grid-row: 1;\n    grid-column: 2;\n    grid-template-rows: auto auto;\n    align-content: start;\n    gap: 0;\n    padding: 0;\n    border-block-end: none;\n  }\n\n  :host .card-overview__filter {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: start;\n    justify-self: end;\n    padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n  }\n\n  :host .card-overview__period {\n    grid-row: 2;\n    grid-column: 1;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-self: stretch;\n    gap: 0;\n    min-height: 0;\n    padding-block: var(--dimension-space-150) var(--dimension-space-100);\n    padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n    overflow: visible;\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  :host .card-overview__body {\n    grid-row: 2;\n    grid-column: 1;\n  }\n}\n\n/*\n * Page shells may enter a responsive mode before this card itself becomes\n * narrow. The explicit stacked layout applies the same composition without\n * coupling CardOverview to a viewport breakpoint.\n */\n:host(.card-overview--stacked) .card-overview__layout {\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--stacked) .card-overview__summary {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto;\n  border-block-end: var(--ds-card-overview-divider);\n}\n\n:host(.card-overview--stacked) .card-overview__score {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-rows: auto auto;\n  grid-template-columns: auto auto;\n  justify-content: start;\n  column-gap: var(--dimension-space-100);\n  width: auto;\n  padding-block-end: var(--dimension-space-100);\n  padding-inline-end: var(--dimension-space-100);\n  border-inline-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__score-label-row {\n  grid-row: 1;\n  grid-column: 1 / -1;\n  min-height: var(--ds-control-height);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band,\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-row: 2;\n  margin-block-start: 0;\n}\n\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-column: 1;\n  align-self: baseline;\n  gap: var(--dimension-space-100);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band {\n  grid-column: 2;\n  align-self: baseline;\n  display: none;\n}\n\n:host(.card-overview--stacked) .card-overview__header {\n  display: grid;\n  grid-row: 1;\n  grid-column: 2;\n  grid-template-rows: auto auto;\n  align-content: start;\n  gap: 0;\n  padding: 0;\n  border-block-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__filter {\n  grid-row: 1;\n  grid-column: 1;\n  align-self: start;\n  justify-self: end;\n  padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n}\n\n:host(.card-overview--stacked) .card-overview__period {\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-self: stretch;\n  gap: 0;\n  min-height: 0;\n  padding-block: var(--dimension-space-150) var(--dimension-space-100);\n  padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n  overflow: visible;\n  text-align: end;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__body {\n  grid-row: 2;\n  grid-column: 1;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n/* ── Compact presentation ───────────────────────────────────────────────── */\n\n/*\n * Matches the shared 48px bar contract: one 32px control row with 8px above\n * and below. The score remains a distinct leading cell, while reporting copy\n * absorbs the available width and the application-owned control never shrinks.\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  height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: auto;\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__score-label-row {\n  display: contents;\n  min-height: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-label,\n:host(.card-overview--compact) .card-overview__score-figure,\n:host(.card-overview--compact) .card-overview__trend {\n  flex: 0 0 auto;\n}\n\n:host(.card-overview--compact) .card-overview__score-figure {\n  display: flex;\n  align-self: center;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  margin-block-start: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-band {\n  display: none;\n}\n\n:host(.card-overview--compact) .card-overview__header {\n  display: flex;\n  flex: 1 1 auto;\n  grid-row: auto;\n  grid-column: auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: none;\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  text-align: start;\n  white-space: nowrap;\n}\n\n:host(.card-overview--compact) .card-overview__period-current,\n:host(.card-overview--compact) .card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host(.card-overview--compact) .card-overview__period-current {\n  flex: 0 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__period-comparison {\n  flex: 1 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  padding: 0;\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  resolveOverviewRovingIndex,\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 LOADING_PLACEHOLDER_COUNT = 4;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 6;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-inverted-foreground-positive)',\n  negative: 'var(--color-inverted-foreground-negative)',\n  neutral: 'var(--color-inverted-foreground-secondary)',\n};\n\nconst INVERTED_PRIMARY: TextColor = 'var(--color-inverted-foreground-primary)';\nconst INVERTED_SECONDARY: TextColor = 'var(--color-inverted-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  /** Leading summary block. Omit to render the bar without a headline figure. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */\n  @Prop() periodLabel: string = '';\n\n  /** Comparison caption, for example `vs Previous period`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first six 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   * reflows and then stacks from this alone, so no measurement is required.\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 elevation on the shrinking surface, and clips translated\n   * content internally. The page still owns sticky positioning and the final\n   * swap to `variant=\"compact\"`.\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\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  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n  }\n\n  private get hasScore(): boolean {\n    return this.score !== undefined || this.scoreErrorMessage !== undefined || this.isLoading;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_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 updateHeight = (height: number) => {\n      if (height > 0 && Math.abs(height - this.expandedHeight) >= 0.5) {\n        this.expandedHeight = height;\n      }\n    };\n\n    updateHeight(layout.getBoundingClientRect().height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const height = entries[0]?.contentRect.height;\n      if (height !== undefined) updateHeight(height);\n    });\n    this.layoutResizeObserver.observe(layout);\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');\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   * inverted 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=\"inverted\"\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, emphasis = false) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        emphasis={emphasis}\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(compact: boolean) {\n    if (this.isLoading) {\n      if (compact) {\n        return (\n          <div class=\"card-overview__score ds-control--md\" part=\"score\">\n            {this.bar('text-body-medium', '40px', 'card-overview__score-label')}\n            <div class=\"card-overview__score-figure\">\n              {this.bar('text-body-medium', '24px')}\n              {this.bar('text-body-medium', '32px')}\n            </div>\n          </div>\n        );\n      }\n\n      return (\n        <div class=\"card-overview__score ds-control--md\" part=\"score\">\n          {/*\n           * The label row is kept but left empty. It carries the control-height\n           * box that aligns the score block with the period control, so dropping\n           * it would shift the whole block up; a bar inside it would collide with\n           * the figure, which sits under the label by design.\n           */}\n          <div class=\"card-overview__score-label-row\" />\n          <div class=\"card-overview__score-figure\">\n            {this.bar('text-display-medium', '56px')}\n            {this.bar('text-body-small', '24px', 'card-overview__skeleton-baseline')}\n          </div>\n          {/*\n           * Class goes on the skeleton itself, matching the resolved band. In a\n           * wrapper the bar picks up inline leading and drops below the resolved\n           * band position.\n           */}\n          {this.bar(\n            'text-caption',\n            '80px',\n            'card-overview__score-band card-overview__score-band--loading'\n          )}\n        </div>\n      );\n    }\n\n    if (this.scoreErrorMessage) {\n      return (\n        <div class=\"card-overview__score card-overview__score--error\" part=\"score\" role=\"alert\">\n          <ds-icon name=\"CircleExclamation\" size=\"sm\" color=\"inherit\" aria-hidden=\"true\" />\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n            {this.scoreErrorMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score card-overview__score--resolved ds-control--md\" part=\"score\">\n        {/* The row owns cross-layout baseline geometry and becomes display: contents in compact mode. */}\n        {/* eslint-disable-next-line local/prefer-direct-ds-text */}\n        <div class=\"card-overview__score-label-row\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-label\"\n            variant=\"text-body-medium\"\n            emphasis={!compact}\n            color={INVERTED_SECONDARY}\n          >\n            {score.label}\n          </ds-text>\n        </div>\n        <div class=\"card-overview__score-figure\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-value\"\n            variant={compact ? 'text-body-medium' : 'text-display-medium'}\n            emphasis\n            color={INVERTED_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\n            {score.value}\n          </ds-text>\n          {this.renderTrend(\n            score.trend,\n            compact ? 'text-body-medium' : 'text-body-small',\n            !compact\n          )}\n        </div>\n        {score.band && !compact && (\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-band\"\n            variant=\"text-caption\"\n            color={INVERTED_SECONDARY}\n          >\n            {score.band}\n          </ds-text>\n        )}\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\"\n        variant=\"text-body-small\"\n        color={INVERTED_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div\n        class={{\n          'card-overview__metric': true,\n          'card-overview__metric--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-inverted': selectable,\n          'ds-focus-ring-inset': selectable,\n        }}\n        part=\"metric\"\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        {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\"\n            variant=\"text-body-medium\"\n            color={INVERTED_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    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading && this.metrics.length === 0) {\n      return Array.from({ length: LOADING_PLACEHOLDER_COUNT }, (_, index) => (\n        <div class=\"card-overview__metric\" key={`loading-${index}`}>\n          {this.bar('text-body-small', '70%', 'card-overview__metric-label')}\n          <div class=\"card-overview__metric-figure\">\n            {this.bar('text-body-medium', '36px')}\n            {/* text-body-medium, matching renderTrend for a metric — a smaller\n             * variant here leaves the trend bar short of the value beside it. */}\n            {this.bar('text-body-medium', '40px')}\n          </div>\n        </div>\n      ));\n    }\n\n    return this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index));\n  }\n\n  render() {\n    const hasHeader = Boolean(this.periodLabel || this.comparisonLabel);\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--has-score': this.hasScore,\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-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                'card-overview__layout--has-score': this.hasScore,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                {this.hasScore && this.renderScore(compact)}\n\n                {/* `ds-control--md` supplies the 32px height and the label inset below. */}\n                <div\n                  class={{\n                    'card-overview__header': true,\n                    'card-overview__header--has-score': this.hasScore,\n                    'ds-control--md': true,\n                  }}\n                >\n                  {this.isLoading ? (\n                    <div class=\"card-overview__period ds-control-label-box\">\n                      {this.bar('text-body-medium', '184px')}\n                      {this.bar('text-body-medium', '248px')}\n                    </div>\n                  ) : (\n                    hasHeader && (\n                      <div class=\"card-overview__period ds-control-label-box\">\n                        {this.periodLabel && (\n                          <ds-text\n                            as=\"span\"\n                            class=\"card-overview__period-current ds-control-label-box\"\n                            variant=\"text-body-medium\"\n                            emphasis\n                            color={INVERTED_PRIMARY}\n                          >\n                            {this.periodLabel}\n                          </ds-text>\n                        )}\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={INVERTED_SECONDARY}\n                          >\n                            {this.comparisonLabel}\n                          </ds-text>\n                        )}\n                      </div>\n                    )\n                  )}\n                  <div class=\"card-overview__filter\">\n                    {/*\n                      Period control is application owned: it varies by product surface.\n                      While loading it is stood in for by a control-shaped skeleton so the\n                      header keeps its resolved proportions.\n                    */}\n                    {this.isLoading ? (\n                      <ds-skeleton\n                        variant=\"control\"\n                        controlSize=\"md\"\n                        width=\"128px\"\n                        background=\"inverted\"\n                      />\n                    ) : (\n                      <slot name=\"filter\" />\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div\n                  class={{\n                    'card-overview__body': true,\n                    'card-overview__body--has-score': this.hasScore,\n                  }}\n                >\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["resolveCardOverviewCollapseGeometry","options","compactHeight","Math","max","expandedHeight","progress","variant","Number","isFinite","min","distance","offset","active","visibleHeight","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","LOADING_PLACEHOLDER_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","INVERTED_PRIMARY","INVERTED_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","disconnectedCallback","disconnect","hasScore","score","undefined","scoreErrorMessage","visibleMetrics","slice","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","layoutEl","updateHeight","height","abs","getBoundingClientRect","ResizeObserver","entries","contentRect","observe","rovingIndex","selectMetric","dsMetricSelect","emit","cells","el","querySelectorAll","focus","bar","textVariant","width","className","h","class","background","renderTrend","trend","emphasis","as","tone","color","fontFeature","direction","value","renderScore","compact","part","role","name","size","label","band","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","hasHeader","Boolean","collapse","Host","style","ref","element","controlSize"],"sources":["src/wc/components/CardOverview/card-overview-controller.ts","src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["import type { CardOverviewVariant, OverviewMetric } from './card-overview-types';\n\nexport interface CardOverviewCollapseGeometry {\n  active: boolean;\n  expandedHeight: number;\n  offset: number;\n  visibleHeight: number;\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n  variant: CardOverviewVariant;\n  progress: number;\n  expandedHeight: number;\n  compactHeight: number;\n}): CardOverviewCollapseGeometry {\n  const compactHeight = Math.max(0, options.compactHeight);\n  const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n  const progress =\n    options.variant === 'compact' || !Number.isFinite(options.progress)\n      ? 0\n      : Math.min(1, Math.max(0, options.progress));\n  const distance = Math.max(0, expandedHeight - compactHeight);\n  const offset = distance * progress;\n\n  return {\n    active: progress > 0 && distance > 0,\n    expandedHeight,\n    offset,\n    visibleHeight: expandedHeight - offset,\n  };\n}\n\nexport function resolveOverviewRovingIndex(\n  metrics: readonly OverviewMetric[],\n  focusedIndex: number\n): number {\n  const first = metrics.findIndex(metric => !metric.isInactive);\n  if (first < 0) return -1;\n  return metrics[focusedIndex] && !metrics[focusedIndex].isInactive\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/* The summary bar follows the theme-reactive inverted sub-theme. */\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  /* Drives the narrow layout below from the card's own width, not the viewport's. */\n  container-type: inline-size;\n  /* A summary is read, not copied; stray selection while clicking cells is noise. */\n  -webkit-user-select: none;\n  user-select: none;\n  /* Width a metric may shrink to before the grid drops a column. */\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-inverted-border-tertiary);\n  --ds-card-overview-divider: var(--ds-card-overview-divider-width) solid\n    var(--ds-card-overview-divider-color);\n  color: var(--color-inverted-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-050);\n  background: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  overflow-anchor: none;\n}\n\n/*\n * The visual surface owns elevation outside this clipping viewport. Keeping\n * those layers separate lets a page shrink the surface while content moves and\n * clips inside it without cutting off the shadow or inset highlight.\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__layout {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\n}\n\n.card-overview__layout {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n  align-items: stretch;\n  min-width: 0;\n}\n\n.card-overview__layout--has-score {\n  grid-template-columns: auto minmax(0, 1fr);\n}\n\n/*\n * Transparent at regular widths so the score and header participate in the\n * inner layout grid directly. At the narrow breakpoint it becomes the unified\n * summary block above the metrics.\n */\n.card-overview__summary {\n  display: contents;\n}\n\n/* ── Score ────────────────────────────────────────────────────────────────── */\n\n/*\n * Hugs its content and never shrinks, so the headline figure keeps its size and\n * the metric grid absorbs the remaining width.\n */\n/*\n * Top aligned rather than centred, and padded to match the header, so the score\n * label sits in the same 32px box at the same offset as the period text beside\n * it. Both use the same type variant, so their baselines land together.\n */\n.card-overview__score {\n  display: flex;\n  grid-row: 1 / span 2;\n  grid-column: 1;\n  flex: 0 0 auto;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n}\n\n.card-overview__score--resolved {\n  min-inline-size: max-content;\n}\n\n/* The control-height box that aligns this label with the period text. */\n.card-overview__score-label-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--ds-control-height);\n}\n\n/*\n * The score is its own column, so its rows cannot baseline-align with the measure\n * rows through flex or grid — those only align items that share a line. These two\n * offsets pull the column onto the measure baselines instead.\n *\n * They are compensation for how much lower a display-scale figure sits in its line\n * box than the body text it aligns to, so they are coupled to the type pairing:\n * change the score or measure variants and both need re-measuring.\n */\n.card-overview__score-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  margin-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n}\n\n.card-overview__score-value {\n  flex: 0 0 auto;\n}\n\n/* Second half of the baseline compensation described above the score figure. */\n.card-overview__score-band {\n  margin-block-start: calc(-1 * var(--dimension-space-025));\n}\n\n/*\n * A skeleton bar is a solid block, so in a baseline-aligned row it aligns on its\n * bottom edge while the text it stands in for aligns on its baseline. Next to a\n * display-scale figure that difference is the descent under the figure's\n * baseline, which drops the bar below where the resolved trend sits.\n *\n * The offset is applied with relative positioning rather than a margin: a margin\n * is not part of a synthesized baseline, so it grows the figure instead of moving\n * the bar, which then pushes the band below it out of place.\n *\n * Only needed beside the score figure; the measure rows pair body variants whose\n * bottom edge and baseline already agree.\n */\n.card-overview__skeleton-baseline {\n  position: relative;\n  inset-block-start: calc(-1 * var(--dimension-space-150));\n}\n\n.card-overview__score--error {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  color: var(--color-inverted-foreground-negative);\n}\n\n/* ── Body ─────────────────────────────────────────────────────────────────── */\n\n/*\n * Takes the remaining inline space. The minimum is what makes the host wrap: once\n * the score and roughly two measure columns no longer fit side by side, the body\n * drops below the score instead of squeezing it. `min()` keeps that from becoming\n * an overflow floor on very narrow viewports.\n */\n.card-overview__body {\n  display: flex;\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__body--has-score {\n  grid-column: 2;\n}\n\n/*\n * One control row: 8px of padding on every side around a 32px md control, so the\n * bar is 8 + 32 + 8. Both ends of the bar are control-shaped boxes — the period\n * text on the left and the slotted control on the right — so the row reads\n * balanced rather than text on one side and a control on the other.\n */\n.card-overview__header {\n  display: flex;\n  grid-row: 1;\n  grid-column: 1;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n.card-overview__header--has-score {\n  grid-column: 2;\n}\n\n/*\n * Matches the control's box on the opposite end, including its inline padding, so\n * the text lands at the same optical inset the slotted control does:\n * 8 from the bar + 6 from this box + 2 from the label inset = 16.\n *\n * Nowrap keeps the row at the control height; the period truncates rather than\n * growing the bar to two lines.\n */\n.card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--ds-control-height);\n  min-width: 0;\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* The period control is slotted, so only reserve space for it. */\n.card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n}\n\n/* ── Metrics ──────────────────────────────────────────────────────────────── */\n\n/*\n * `auto-fit` gives every occupied track an equal share while all metrics fit on\n * one row. Once wrapping creates another row, its cells stay on those same\n * tracks, so a partial final row leaves empty space instead of stretching one\n * measure wider than its peers.\n *\n * Dividers are painted outward from each cell and clipped by this grid. That\n * leaves only the lines between cells: anything emitted from the final column or\n * final row lands outside the grid and is clipped without needing to detect the\n * number of tracks.\n *\n * `flex: 1 1 auto` makes the grid absorb whatever height the body has\n * left, so cells reach the card bottom and their hover wash has no dead strip.\n */\n.card-overview__metrics {\n  display: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    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/*\n * Square by design. Cells tile edge to edge against their dividers, so a radius\n * would break the seam; the card's own radius clips the outer corners instead.\n *\n * Padding is plain rather than control-derived: a cell is a block of content, not\n * a control box that has to optically match something on the far side.\n */\n.card-overview__metric {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  padding: var(--dimension-space-175) var(--dimension-space-200);\n  border-radius: 0;\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}\n\n.card-overview__metric[role='button'] {\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\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/* ── Trend ────────────────────────────────────────────────────────────────── */\n\n/*\n * Tone arrives resolved from the caller: the arrow direction and the sentiment\n * are independent, so a falling metric can read positive or neutral. The arrow is\n * a glyph inside this text node, so it always matches the surrounding weight.\n */\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n/* ── Narrow layout ────────────────────────────────────────────────────────── */\n\n/*\n * Below roughly two measure columns the card becomes a full stack. The summary\n * wrapper owns one block above the metrics: score label, figure, and trend stay\n * together at the start; the period control sits at the upper end; and the period\n * copy follows the score instead of becoming a separate divided row.\n */\n/*\n * Selectors are host-qualified purely for specificity: the compiled sheet places\n * these rules ahead of the base ones, so a plain class here would only ever add\n * properties and never override them.\n */\n@container (max-width: 480px) {\n  :host .card-overview__layout {\n    grid-template-rows: auto minmax(0, 1fr);\n    grid-template-columns: minmax(0, 1fr);\n  }\n\n  :host .card-overview__summary {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-columns: minmax(0, 1fr) auto;\n    grid-template-rows: auto;\n    border-block-end: var(--ds-card-overview-divider);\n  }\n\n  :host .card-overview__score {\n    display: grid;\n    grid-row: 1;\n    grid-column: 1;\n    grid-template-rows: auto auto;\n    grid-template-columns: auto auto;\n    justify-content: start;\n    column-gap: var(--dimension-space-100);\n    width: auto;\n    padding-block-end: var(--dimension-space-100);\n    padding-inline-end: var(--dimension-space-100);\n    border-inline-end: none;\n  }\n\n  :host .card-overview__score-label-row {\n    grid-row: 1;\n    grid-column: 1 / -1;\n    min-height: var(--ds-control-height);\n  }\n\n  /*\n   * The wide score uses optical offsets to meet the neighbouring metric\n   * baselines. In the stacked summary those neighbours are gone, so natural\n   * document flow keeps the label, figure, band, and period clearly ordered.\n   */\n  :host .card-overview__score-band,\n  :host .card-overview__score-figure {\n    grid-row: 2;\n    margin-block-start: 0;\n  }\n\n  :host .card-overview__score-figure {\n    grid-column: 1;\n    align-self: baseline;\n    gap: var(--dimension-space-100);\n  }\n\n  :host .card-overview__score-band {\n    grid-column: 2;\n    align-self: baseline;\n    display: none;\n  }\n\n  :host .card-overview__header {\n    display: grid;\n    grid-row: 1;\n    grid-column: 2;\n    grid-template-rows: auto auto;\n    align-content: start;\n    gap: 0;\n    padding: 0;\n    border-block-end: none;\n  }\n\n  :host .card-overview__filter {\n    grid-row: 1;\n    grid-column: 1;\n    align-self: start;\n    justify-self: end;\n    padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n  }\n\n  :host .card-overview__period {\n    grid-row: 2;\n    grid-column: 1;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-self: stretch;\n    gap: 0;\n    min-height: 0;\n    padding-block: var(--dimension-space-150) var(--dimension-space-100);\n    padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n    overflow: visible;\n    text-align: end;\n    white-space: nowrap;\n  }\n\n  :host .card-overview__body {\n    grid-row: 2;\n    grid-column: 1;\n  }\n}\n\n/*\n * Page shells may enter a responsive mode before this card itself becomes\n * narrow. The explicit stacked layout applies the same composition without\n * coupling CardOverview to a viewport breakpoint.\n */\n:host(.card-overview--stacked) .card-overview__layout {\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--stacked) .card-overview__summary {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto;\n  border-block-end: var(--ds-card-overview-divider);\n}\n\n:host(.card-overview--stacked) .card-overview__score {\n  display: grid;\n  grid-row: 1;\n  grid-column: 1;\n  grid-template-rows: auto auto;\n  grid-template-columns: auto auto;\n  justify-content: start;\n  column-gap: var(--dimension-space-100);\n  width: auto;\n  padding-block-end: var(--dimension-space-100);\n  padding-inline-end: var(--dimension-space-100);\n  border-inline-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__score-label-row {\n  grid-row: 1;\n  grid-column: 1 / -1;\n  min-height: var(--ds-control-height);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band,\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-row: 2;\n  margin-block-start: 0;\n}\n\n:host(.card-overview--stacked) .card-overview__score-figure {\n  grid-column: 1;\n  align-self: baseline;\n  gap: var(--dimension-space-100);\n}\n\n:host(.card-overview--stacked) .card-overview__score-band {\n  grid-column: 2;\n  align-self: baseline;\n  display: none;\n}\n\n:host(.card-overview--stacked) .card-overview__header {\n  display: grid;\n  grid-row: 1;\n  grid-column: 2;\n  grid-template-rows: auto auto;\n  align-content: start;\n  gap: 0;\n  padding: 0;\n  border-block-end: none;\n}\n\n:host(.card-overview--stacked) .card-overview__filter {\n  grid-row: 1;\n  grid-column: 1;\n  align-self: start;\n  justify-self: end;\n  padding: var(--dimension-space-100) var(--dimension-space-100) 0 0;\n}\n\n:host(.card-overview--stacked) .card-overview__period {\n  grid-row: 2;\n  grid-column: 1;\n  flex-direction: column;\n  align-items: flex-end;\n  justify-self: stretch;\n  gap: 0;\n  min-height: 0;\n  padding-block: var(--dimension-space-150) var(--dimension-space-100);\n  padding-inline: var(--dimension-space-100) var(--dimension-space-200);\n  overflow: visible;\n  text-align: end;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__body {\n  grid-row: 2;\n  grid-column: 1;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n/* ── Compact presentation ───────────────────────────────────────────────── */\n\n/*\n * Matches the shared 48px bar contract: one 32px control row with 8px above\n * and below. The score remains a distinct leading cell, while reporting copy\n * absorbs the available width and the application-owned control never shrinks.\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  height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  width: auto;\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__score-label-row {\n  display: contents;\n  min-height: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-label,\n:host(.card-overview--compact) .card-overview__score-figure,\n:host(.card-overview--compact) .card-overview__trend {\n  flex: 0 0 auto;\n}\n\n:host(.card-overview--compact) .card-overview__score-figure {\n  display: flex;\n  align-self: center;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  margin-block-start: 0;\n}\n\n:host(.card-overview--compact) .card-overview__score-band {\n  display: none;\n}\n\n:host(.card-overview--compact) .card-overview__header {\n  display: flex;\n  flex: 1 1 auto;\n  grid-row: auto;\n  grid-column: auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  height: 100%;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: none;\n  box-sizing: border-box;\n}\n\n:host(.card-overview--compact) .card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  text-align: start;\n  white-space: nowrap;\n}\n\n:host(.card-overview--compact) .card-overview__period-current,\n:host(.card-overview--compact) .card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n:host(.card-overview--compact) .card-overview__period-current {\n  flex: 0 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__period-comparison {\n  flex: 1 1 auto;\n}\n\n:host(.card-overview--compact) .card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  padding: 0;\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  resolveOverviewRovingIndex,\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 LOADING_PLACEHOLDER_COUNT = 4;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 6;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-inverted-foreground-positive)',\n  negative: 'var(--color-inverted-foreground-negative)',\n  neutral: 'var(--color-inverted-foreground-secondary)',\n};\n\nconst INVERTED_PRIMARY: TextColor = 'var(--color-inverted-foreground-primary)';\nconst INVERTED_SECONDARY: TextColor = 'var(--color-inverted-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  /** Leading summary block. Omit to render the bar without a headline figure. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */\n  @Prop() periodLabel: string = '';\n\n  /** Comparison caption, for example `vs Previous period`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first six 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   * reflows and then stacks from this alone, so no measurement is required.\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 elevation on the shrinking surface, and clips translated\n   * content internally. The page still owns sticky positioning and the final\n   * swap to `variant=\"compact\"`.\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\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  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n  }\n\n  private get hasScore(): boolean {\n    return this.score !== undefined || this.scoreErrorMessage !== undefined || this.isLoading;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_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 updateHeight = (height: number) => {\n      if (height > 0 && Math.abs(height - this.expandedHeight) >= 0.5) {\n        this.expandedHeight = height;\n      }\n    };\n\n    updateHeight(layout.getBoundingClientRect().height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const height = entries[0]?.contentRect.height;\n      if (height !== undefined) updateHeight(height);\n    });\n    this.layoutResizeObserver.observe(layout);\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');\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   * inverted 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=\"inverted\"\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, emphasis = false) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        emphasis={emphasis}\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(compact: boolean) {\n    if (this.isLoading) {\n      if (compact) {\n        return (\n          <div class=\"card-overview__score ds-control--md\" part=\"score\">\n            {this.bar('text-body-medium', '40px', 'card-overview__score-label')}\n            <div class=\"card-overview__score-figure\">\n              {this.bar('text-body-medium', '24px')}\n              {this.bar('text-body-medium', '32px')}\n            </div>\n          </div>\n        );\n      }\n\n      return (\n        <div class=\"card-overview__score ds-control--md\" part=\"score\">\n          {/*\n           * The label row is kept but left empty. It carries the control-height\n           * box that aligns the score block with the period control, so dropping\n           * it would shift the whole block up; a bar inside it would collide with\n           * the figure, which sits under the label by design.\n           */}\n          <div class=\"card-overview__score-label-row\" />\n          <div class=\"card-overview__score-figure\">\n            {this.bar('text-display-medium', '56px')}\n            {this.bar('text-body-small', '24px', 'card-overview__skeleton-baseline')}\n          </div>\n          {/*\n           * Class goes on the skeleton itself, matching the resolved band. In a\n           * wrapper the bar picks up inline leading and drops below the resolved\n           * band position.\n           */}\n          {this.bar(\n            'text-caption',\n            '80px',\n            'card-overview__score-band card-overview__score-band--loading'\n          )}\n        </div>\n      );\n    }\n\n    if (this.scoreErrorMessage) {\n      return (\n        <div class=\"card-overview__score card-overview__score--error\" part=\"score\" role=\"alert\">\n          <ds-icon name=\"CircleExclamation\" size=\"sm\" color=\"inherit\" aria-hidden=\"true\" />\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n            {this.scoreErrorMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score card-overview__score--resolved ds-control--md\" part=\"score\">\n        {/* The row owns cross-layout baseline geometry and becomes display: contents in compact mode. */}\n        {/* eslint-disable-next-line local/prefer-direct-ds-text */}\n        <div class=\"card-overview__score-label-row\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-label\"\n            variant=\"text-body-medium\"\n            emphasis={!compact}\n            color={INVERTED_SECONDARY}\n          >\n            {score.label}\n          </ds-text>\n        </div>\n        <div class=\"card-overview__score-figure\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-value\"\n            variant={compact ? 'text-body-medium' : 'text-display-medium'}\n            emphasis\n            color={INVERTED_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\n            {score.value}\n          </ds-text>\n          {this.renderTrend(\n            score.trend,\n            compact ? 'text-body-medium' : 'text-body-small',\n            !compact\n          )}\n        </div>\n        {score.band && !compact && (\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-band\"\n            variant=\"text-caption\"\n            color={INVERTED_SECONDARY}\n          >\n            {score.band}\n          </ds-text>\n        )}\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\"\n        variant=\"text-body-small\"\n        color={INVERTED_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div\n        class={{\n          'card-overview__metric': true,\n          'card-overview__metric--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-inverted': selectable,\n          'ds-focus-ring-inset': selectable,\n        }}\n        part=\"metric\"\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        {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\"\n            variant=\"text-body-medium\"\n            color={INVERTED_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    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading && this.metrics.length === 0) {\n      return Array.from({ length: LOADING_PLACEHOLDER_COUNT }, (_, index) => (\n        <div class=\"card-overview__metric\" key={`loading-${index}`}>\n          {this.bar('text-body-small', '70%', 'card-overview__metric-label')}\n          <div class=\"card-overview__metric-figure\">\n            {this.bar('text-body-medium', '36px')}\n            {/* text-body-medium, matching renderTrend for a metric — a smaller\n             * variant here leaves the trend bar short of the value beside it. */}\n            {this.bar('text-body-medium', '40px')}\n          </div>\n        </div>\n      ));\n    }\n\n    return this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index));\n  }\n\n  render() {\n    const hasHeader = Boolean(this.periodLabel || this.comparisonLabel);\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--has-score': this.hasScore,\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-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                'card-overview__layout--has-score': this.hasScore,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                {this.hasScore && this.renderScore(compact)}\n\n                {/* `ds-control--md` supplies the 32px height and the label inset below. */}\n                <div\n                  class={{\n                    'card-overview__header': true,\n                    'card-overview__header--has-score': this.hasScore,\n                    'ds-control--md': true,\n                  }}\n                >\n                  {this.isLoading ? (\n                    <div class=\"card-overview__period ds-control-label-box\">\n                      {this.bar('text-body-medium', '184px')}\n                      {this.bar('text-body-medium', '248px')}\n                    </div>\n                  ) : (\n                    hasHeader && (\n                      <div class=\"card-overview__period ds-control-label-box\">\n                        {this.periodLabel && (\n                          <ds-text\n                            as=\"span\"\n                            class=\"card-overview__period-current ds-control-label-box\"\n                            variant=\"text-body-medium\"\n                            emphasis\n                            color={INVERTED_PRIMARY}\n                          >\n                            {this.periodLabel}\n                          </ds-text>\n                        )}\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={INVERTED_SECONDARY}\n                          >\n                            {this.comparisonLabel}\n                          </ds-text>\n                        )}\n                      </div>\n                    )\n                  )}\n                  <div class=\"card-overview__filter\">\n                    {/*\n                      Period control is application owned: it varies by product surface.\n                      While loading it is stood in for by a control-shaped skeleton so the\n                      header keeps its resolved proportions.\n                    */}\n                    {this.isLoading ? (\n                      <ds-skeleton\n                        variant=\"control\"\n                        controlSize=\"md\"\n                        width=\"128px\"\n                        background=\"inverted\"\n                      />\n                    ) : (\n                      <slot name=\"filter\" />\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div\n                  class={{\n                    'card-overview__body': true,\n                    'card-overview__body--has-score': this.hasScore,\n                  }}\n                >\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as d,h as t,a as i,t as a}from"./index.js";import{d as r}from"./p-BsoqsbBh.js";import{d as c}from"./p-BGUK8-Qm.js";import{d as n}from"./p-eAfNzlMa.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as m}from"./p-Ay1AX7Ql.js";const g=()=>`.ds-chrome-space--sm.sc-ds-card-setting-h,.ds-chrome-space--sm.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-card-setting-h,.ds-chrome-space--md.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-card-setting-h,.ds-chrome-space--lg.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting,.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting,.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting{flex-direction:column}.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:grid;align-items:center}.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{justify-content:space-between;height:var(--dimension-size-600);flex:0 0 auto;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const h={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const b={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const p="var(--color-foreground-faint-brand)";const u=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}render(){const s=this.editing;return t(i,{key:"88269a4a386e963b57b78ae4091225a629581ae1",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":h[this.cardWidth],"--_card-setting-min-height":b[this.cardWidth]}},t("header",{key:"e4dffac61c32d44b00b975228589547147c2c15b",class:"card-setting__header ds-chrome-row ds-chrome-space--md"},t("ds-text",{key:"15db622fd57a0b1d8fc703240b2eb97ad7a65e60",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:s?p:"primary",as:"h2"},this.heading),t("div",{key:"ec3f924fa62e356abae7ef3bf1f7982c1e2aaa37",class:"card-setting__actions"},!s?t("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[t("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),t("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)})])),t("div",{key:"3ffb5b505a29c781c3454bbcb92b6e36d3e8ec2f",class:"card-setting__body"},t("slot",{key:"201bd7658bc254688d90d6210252d6abd0c3a402"})))}static get style(){return g()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(a(s))){customElements.define(a(s),u)}break;case"ds-badge":if(!customElements.get(a(s))){r()}break;case"ds-button-filled":if(!customElements.get(a(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){n()}break;case"ds-icon":if(!customElements.get(a(s))){o()}break;case"ds-loader":if(!customElements.get(a(s))){l()}break;case"ds-text":if(!customElements.get(a(s))){m()}break}}))}f();const v=u;const k=f;export{v as DsCardSetting,k as defineCustomElement};
+import{p as s,H as e,c as d,h as t,a as i,t as a}from"./index.js";import{d as r}from"./p-DoNdiEly.js";import{d as c}from"./p-CmMfRM1s.js";import{d as n}from"./p-Bgh0uG51.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as m}from"./p-w2kKeG_h.js";const g=()=>`.ds-chrome-space--sm.sc-ds-card-setting-h,.ds-chrome-space--sm.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-card-setting-h,.ds-chrome-space--md.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-card-setting-h,.ds-chrome-space--lg.sc-ds-card-setting{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting,.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting,.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-card-setting-h,.ds-chrome-row.sc-ds-card-setting{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-card-setting-h,.ds-chrome-column.sc-ds-card-setting{flex-direction:column}.ds-chrome-grid.sc-ds-card-setting-h,.ds-chrome-grid.sc-ds-card-setting{display:grid;align-items:center}.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{justify-content:space-between;height:var(--dimension-size-600);flex:0 0 auto;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const h={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const b={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const u="var(--color-foreground-faint-brand)";const p=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(s,e){this.dsAction.emit({action:s,originalEvent:e})}render(){const s=this.editing;return t(i,{key:"88269a4a386e963b57b78ae4091225a629581ae1",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":h[this.cardWidth],"--_card-setting-min-height":b[this.cardWidth]}},t("header",{key:"e4dffac61c32d44b00b975228589547147c2c15b",class:"card-setting__header ds-chrome-row ds-chrome-space--md"},t("ds-text",{key:"15db622fd57a0b1d8fc703240b2eb97ad7a65e60",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:s?u:"primary",as:"h2"},this.heading),t("div",{key:"ec3f924fa62e356abae7ef3bf1f7982c1e2aaa37",class:"card-setting__actions"},!s?t("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:s=>this.emitAction("edit",s.detail)}):[t("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:s=>this.emitAction("cancel",s.detail)}),t("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:s=>this.emitAction("save",s.detail)})])),t("div",{key:"3ffb5b505a29c781c3454bbcb92b6e36d3e8ec2f",class:"card-setting__body"},t("slot",{key:"201bd7658bc254688d90d6210252d6abd0c3a402"})))}static get style(){return g()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(a(s))){customElements.define(a(s),p)}break;case"ds-badge":if(!customElements.get(a(s))){r()}break;case"ds-button-filled":if(!customElements.get(a(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){n()}break;case"ds-icon":if(!customElements.get(a(s))){o()}break;case"ds-loader":if(!customElements.get(a(s))){l()}break;case"ds-text":if(!customElements.get(a(s))){m()}break}}))}f();const v=p;const k=f;export{v as DsCardSetting,k as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

package/dist/components/ds-chart-bar.js

@@ -1,2 +1,2 @@
-import{p as t,H as s,h as e,a,t as r}from"./index.js";import{c as n}from"./p-CMv_7vFs.js";import{C as i,m as c,b as h,l as o,r as l}from"./p-BybqPD8K.js";import{f as d}from"./p-DXewjzkM.js";const b=()=>`.sc-ds-chart-bar-h{display:inline-block;max-width:100%;font-family:var(--typography-font-family)}.chart-bar__svg.sc-ds-chart-bar{display:block;width:100%;height:100%}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:var(--dimension-stroke-width-012);vector-effect:non-scaling-stroke}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}.chart-bar__segment-shape--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}.chart-bar__segment-separator.sc-ds-chart-bar{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-012);stroke-linecap:butt;vector-effect:non-scaling-stroke}`;const g=[0,25,50,75,100];const f=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="single";this.data=[];this.series=[];this.categories=[];this.width=480;this.height=240;this.viewportController=null;this.svgEl=null}componentDidLoad(){this.connectViewportController()}connectedCallback(){if(this.svgEl&&!this.viewportController)this.connectViewportController()}componentDidRender(){if(!this.viewportController)this.connectViewportController()}connectViewportController(){if(!this.svgEl)return;this.viewportController=new i(this.svgEl,(t=>{if(t.width!==this.viewport?.width||t.height!==this.viewport?.height){this.viewport=t}}));this.viewportController.connect()}disconnectedCallback(){this.viewportController?.disconnect();this.viewportController=null}handleIntrinsicSizeChange(){this.viewport=undefined;if(typeof requestAnimationFrame==="function"){requestAnimationFrame((()=>this.viewportController?.measure()))}}renderSingle(t,s,a,r){const i=c(this.data,(t=>t.value))??0;const l=h().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=o().domain([0,i||1]).range([s,0]).nice();const b=d.ticks(4);return e("g",null,b.map((s=>e("g",{key:`grid-${s}`,transform:`translate(0, ${d(s)})`},e("line",{class:"chart-bar__gridline",x1:0,x2:t}),e("text",{class:"chart-bar__axis-label",x:-a,"text-anchor":"end","dominant-baseline":"middle"},s)))),this.data.map(((t,a)=>{const i=l.bandwidth();const c=l(t.label)??0;const h=d(t.value);const o=s-h;const b=h+o/2;const g=o/2;const f=t.color??n(a);return e("g",{key:t.label},e("rect",{class:"chart-bar__bar chart-bar__bar--rounded",x:c,y:h,width:i,height:o,fill:f}),e("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:c,y:b,width:i,height:g,fill:f}),e("text",{class:"chart-bar__axis-label",x:c+i/2,y:s+r,"text-anchor":"middle"},t.label))})))}valuesForCategory(t){return this.series.map((s=>Math.max(0,s.data[t]??0)))}stackedAccessibleLabel(){return this.categories.map(((t,s)=>{const e=this.valuesForCategory(s);const a=e.reduce(((t,s)=>t+s),0);const r=this.series.map(((t,s)=>{const r=e[s];const n=this.variant==="percentage"?d(a?r/a:0,1):String(r);return`${t.name}: ${n}`})).join(", ");return`${t}: ${r}`})).join("; ")}renderStacked(t,s,a,r){const i=this.categories.map(((t,s)=>this.valuesForCategory(s)));const c=i.map((t=>t.reduce(((t,s)=>t+s),0)));const l=this.variant==="percentage"?100:Math.max(0,...c);const d=h().domain(this.categories).range([0,t]).padding(.35);const b=o().domain([0,l||1]).range([s,0]).nice();const f=this.variant==="percentage"?g:b.ticks(4);return e("g",null,f.map((s=>e("g",{key:`grid-${s}`,transform:`translate(0, ${b(s)})`},e("line",{class:"chart-bar__gridline",x1:0,x2:t}),e("text",{class:"chart-bar__axis-label",x:-a,"text-anchor":"end","dominant-baseline":"middle"},this.variant==="percentage"?`${s}%`:s)))),this.categories.map(((t,a)=>{const h=d.bandwidth();const o=d(t)??0;const l=i[a];const g=c[a];const f=l.reduce(((t,s,e)=>s>0?e:t),-1);let u=0;return e("g",{class:"chart-bar__stack","data-category":t,key:t},this.series.map(((t,s)=>{const a=l[s];const r=this.variant==="percentage"?g?a/g*100:0:a;const i=u;const c=u+r;u=c;const d=b(c);const m=b(i);const _=Math.max(0,m-d);if(!_)return null;const p=t.color??n(s);const y=this.variant==="stacked"&&s===f;const x=d+_/2;const k=_/2;return e("g",{class:"chart-bar__segment","data-series":t.name,key:t.name},e("rect",{class:{"chart-bar__segment-shape":true,"chart-bar__segment-shape--rounded":y},x:o,y:d,width:h,height:_,fill:p}),y?e("rect",{class:"chart-bar__segment-square-base",x:o,y:x,width:h,height:k,fill:p}):null,i>0?e("line",{class:"chart-bar__segment-separator",x1:o,x2:o+h,y1:m,y2:m,"vector-effect":"non-scaling-stroke"}):null)})),e("text",{class:"chart-bar__axis-label",x:o+h/2,y:s+r,"text-anchor":"middle"},t))})))}render(){const t=this.viewport?.width??this.width;const s=this.viewport?.height??this.height;const{margin:r,axisLabelGap:n,categoryLabelOffset:i}=l();const c=Math.max(0,t-r.left-r.right);const h=Math.max(0,s-r.top-r.bottom);const o=this.variant==="single";const d=o?this.data.map((t=>`${t.label}: ${t.value}`)).join(", "):this.stackedAccessibleLabel();return e(a,{key:"ff1b47a33a509f57362170d70c8136a516162164",class:{"chart-bar":true,[`chart-bar--${this.variant}`]:true}},e("svg",{key:"2fd71dab6d10c26c7a6ba61565d261a70cf33ef2",class:"chart-bar__svg",ref:t=>{this.svgEl=t??null},width:t,height:s,role:"img","aria-label":d},e("g",{key:"5c137636b8a4b888662f60f1d9f326e3dc821f44",transform:`translate(${r.left}, ${r.top})`},o?this.renderSingle(c,h,n,i):this.renderStacked(c,h,n,i))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return b()}},[2,"ds-chart-bar",{variant:[1],data:[16],series:[16],categories:[16],width:[2],height:[2],viewport:[32]},undefined,{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(r(t))){customElements.define(r(t),f)}break}}))}u();const m=f;const _=u;export{m as DsChartBar,_ as defineCustomElement};
+import{p as t,H as s,h as r,a as e,t as a}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{C as n,m as i,b as o,l as h,r as l}from"./p-BybqPD8K.js";import{f as d}from"./p-DXewjzkM.js";const b=()=>`@media (forced-colors: active){.sc-ds-chart-bar:root,.sc-ds-chart-bar-h,.ds-forced-colors-scope.sc-ds-chart-bar{--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-chart-bar-h{display:inline-block;max-width:100%;font-family:var(--typography-font-family)}.chart-bar__svg.sc-ds-chart-bar{display:block;width:100%;height:100%}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:var(--dimension-stroke-width-012);vector-effect:non-scaling-stroke}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}.chart-bar__segment-shape--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}.chart-bar__segment-separator.sc-ds-chart-bar{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-012);stroke-linecap:butt;vector-effect:non-scaling-stroke}@media (forced-colors: active){.chart-bar__bar.sc-ds-chart-bar,.chart-bar__segment-shape.sc-ds-chart-bar,.chart-bar__segment-square-base.sc-ds-chart-bar{forced-color-adjust:none}.chart-bar__segment-separator.sc-ds-chart-bar{stroke:var(--ds-forced-color-surface)}}`;const f=[0,25,50,75,100];const g=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="single";this.data=[];this.series=[];this.categories=[];this.width=480;this.height=240;this.viewportController=null;this.svgEl=null}componentDidLoad(){this.connectViewportController()}connectedCallback(){if(this.svgEl&&!this.viewportController)this.connectViewportController()}componentDidRender(){if(!this.viewportController)this.connectViewportController()}connectViewportController(){if(!this.svgEl)return;this.viewportController=new n(this.svgEl,(t=>{if(t.width!==this.viewport?.width||t.height!==this.viewport?.height){this.viewport=t}}));this.viewportController.connect()}disconnectedCallback(){this.viewportController?.disconnect();this.viewportController=null}handleIntrinsicSizeChange(){this.viewport=undefined;if(typeof requestAnimationFrame==="function"){requestAnimationFrame((()=>this.viewportController?.measure()))}}renderSingle(t,s,e,a){const n=i(this.data,(t=>t.value))??0;const l=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=h().domain([0,n||1]).range([s,0]).nice();const b=d.ticks(4);return r("g",null,b.map((s=>r("g",{key:`grid-${s}`,transform:`translate(0, ${d(s)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-e,"text-anchor":"end","dominant-baseline":"middle"},s)))),this.data.map(((t,e)=>{const n=l.bandwidth();const i=l(t.label)??0;const o=d(t.value);const h=s-o;const b=o+h/2;const f=h/2;const g=t.color??c(e);return r("g",{key:t.label},r("rect",{class:"chart-bar__bar chart-bar__bar--rounded",x:i,y:o,width:n,height:h,fill:g}),r("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:i,y:b,width:n,height:f,fill:g}),r("text",{class:"chart-bar__axis-label",x:i+n/2,y:s+a,"text-anchor":"middle"},t.label))})))}valuesForCategory(t){return this.series.map((s=>Math.max(0,s.data[t]??0)))}stackedAccessibleLabel(){return this.categories.map(((t,s)=>{const r=this.valuesForCategory(s);const e=r.reduce(((t,s)=>t+s),0);const a=this.series.map(((t,s)=>{const a=r[s];const c=this.variant==="percentage"?d(e?a/e:0,1):String(a);return`${t.name}: ${c}`})).join(", ");return`${t}: ${a}`})).join("; ")}renderStacked(t,s,e,a){const n=this.categories.map(((t,s)=>this.valuesForCategory(s)));const i=n.map((t=>t.reduce(((t,s)=>t+s),0)));const l=this.variant==="percentage"?100:Math.max(0,...i);const d=o().domain(this.categories).range([0,t]).padding(.35);const b=h().domain([0,l||1]).range([s,0]).nice();const g=this.variant==="percentage"?f:b.ticks(4);return r("g",null,g.map((s=>r("g",{key:`grid-${s}`,transform:`translate(0, ${b(s)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-e,"text-anchor":"end","dominant-baseline":"middle"},this.variant==="percentage"?`${s}%`:s)))),this.categories.map(((t,e)=>{const o=d.bandwidth();const h=d(t)??0;const l=n[e];const f=i[e];const g=l.reduce(((t,s,r)=>s>0?r:t),-1);let u=0;return r("g",{class:"chart-bar__stack","data-category":t,key:t},this.series.map(((t,s)=>{const e=l[s];const a=this.variant==="percentage"?f?e/f*100:0:e;const n=u;const i=u+a;u=i;const d=b(i);const m=b(n);const _=Math.max(0,m-d);if(!_)return null;const p=t.color??c(s);const y=this.variant==="stacked"&&s===g;const x=d+_/2;const k=_/2;return r("g",{class:"chart-bar__segment","data-series":t.name,key:t.name},r("rect",{class:{"chart-bar__segment-shape":true,"chart-bar__segment-shape--rounded":y},x:h,y:d,width:o,height:_,fill:p}),y?r("rect",{class:"chart-bar__segment-square-base",x:h,y:x,width:o,height:k,fill:p}):null,n>0?r("line",{class:"chart-bar__segment-separator",x1:h,x2:h+o,y1:m,y2:m,"vector-effect":"non-scaling-stroke"}):null)})),r("text",{class:"chart-bar__axis-label",x:h+o/2,y:s+a,"text-anchor":"middle"},t))})))}render(){const t=this.viewport?.width??this.width;const s=this.viewport?.height??this.height;const{margin:a,axisLabelGap:c,categoryLabelOffset:n}=l();const i=Math.max(0,t-a.left-a.right);const o=Math.max(0,s-a.top-a.bottom);const h=this.variant==="single";const d=h?this.data.map((t=>`${t.label}: ${t.value}`)).join(", "):this.stackedAccessibleLabel();return r(e,{key:"ff1b47a33a509f57362170d70c8136a516162164",class:{"chart-bar":true,[`chart-bar--${this.variant}`]:true}},r("svg",{key:"2fd71dab6d10c26c7a6ba61565d261a70cf33ef2",class:"chart-bar__svg",ref:t=>{this.svgEl=t??null},width:t,height:s,role:"img","aria-label":d},r("g",{key:"5c137636b8a4b888662f60f1d9f326e3dc821f44",transform:`translate(${a.left}, ${a.top})`},h?this.renderSingle(i,o,c,n):this.renderStacked(i,o,c,n))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return b()}},[2,"ds-chart-bar",{variant:[1],data:[16],series:[16],categories:[16],width:[2],height:[2],viewport:[32]},undefined,{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(a(t))){customElements.define(a(t),g)}break}}))}u();const m=g;const _=u;export{m as DsChartBar,_ as defineCustomElement};
 //# sourceMappingURL=ds-chart-bar.js.map

package/dist/components/ds-chart-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["chartBarCss","PERCENTAGE_TICKS","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","data","series","categories","width","height","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","undefined","requestAnimationFrame","measure","renderSingle","innerWidth","innerHeight","axisLabelGap","categoryLabelOffset","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","tick","key","transform","class","x1","x2","x","datum","index","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y","valuesForCategory","categoryIndex","Math","stackedAccessibleLabel","category","values","total","reduce","sum","details","seriesIndex","visibleValue","formatPercentage","String","name","join","renderStacked","categoryValues","_","totals","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","hasRoundedTop","y1","y2","render","viewportWidth","viewportHeight","margin","resolveCartesianChartLayout","left","right","top","bottom","isSingle","accessibleLabel","Host","ref","element","role"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum, ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarVariant = 'single' | 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`. */\n  @Prop() variant: ChartBarVariant = 'single';\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /** Ordered stack series for stacked and percentage variants. Set as a JS property. */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels for stacked and percentage variants. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  private renderSingle(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const yMax = max(this.data, d => d.value) ?? 0;\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {tick}\n            </text>\n          </g>\n        ))}\n\n        {this.data.map((datum, index) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(datum.label) ?? 0;\n          const barY = yScale(datum.value);\n          const barHeight = innerHeight - barY;\n          const squareBaseY = barY + barHeight / 2;\n          const squareBaseHeight = barHeight / 2;\n          const fill = datum.color ?? categoryColor(index);\n          return (\n            <g key={datum.label}>\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--rounded\"\n                x={barX}\n                y={barY}\n                width={barWidth}\n                height={barHeight}\n                fill={fill}\n              />\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--square-base\"\n                x={barX}\n                y={squareBaseY}\n                width={barWidth}\n                height={squareBaseHeight}\n                fill={fill}\n              />\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {datum.label}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private stackedAccessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue =\n              this.variant === 'percentage'\n                ? formatPercentage(total ? value / total : 0, 1)\n                : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  private renderStacked(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const categoryValues = this.categories.map((_, index) =>\n      this.valuesForCategory(index)\n    );\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks =\n      this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {this.variant === 'percentage' ? `${tick}%` : tick}\n            </text>\n          </g>\n        ))}\n\n        {this.categories.map((category, categoryIndex) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(category) ?? 0;\n          const values = categoryValues[categoryIndex];\n          const total = totals[categoryIndex];\n          const topSeriesIndex = values.reduce(\n            (topIndex, value, seriesIndex) =>\n              value > 0 ? seriesIndex : topIndex,\n            -1\n          );\n          let cumulativeValue = 0;\n\n          return (\n            <g class=\"chart-bar__stack\" data-category={category} key={category}>\n              {this.series.map((series, seriesIndex) => {\n                const rawValue = values[seriesIndex];\n                const value =\n                  this.variant === 'percentage'\n                    ? total\n                      ? (rawValue / total) * 100\n                      : 0\n                    : rawValue;\n                const segmentStart = cumulativeValue;\n                const segmentEnd = cumulativeValue + value;\n                cumulativeValue = segmentEnd;\n                const segmentY = yScale(segmentEnd);\n                const segmentBottom = yScale(segmentStart);\n                const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                if (!segmentHeight) return null;\n\n                const fill = series.color ?? categoryColor(seriesIndex);\n                const hasRoundedTop =\n                  this.variant === 'stacked' && seriesIndex === topSeriesIndex;\n                const squareBaseY = segmentY + segmentHeight / 2;\n                const squareBaseHeight = segmentHeight / 2;\n\n                return (\n                  <g\n                    class=\"chart-bar__segment\"\n                    data-series={series.name}\n                    key={series.name}\n                  >\n                    <rect\n                      class={{\n                        'chart-bar__segment-shape': true,\n                        'chart-bar__segment-shape--rounded': hasRoundedTop,\n                      }}\n                      x={barX}\n                      y={segmentY}\n                      width={barWidth}\n                      height={segmentHeight}\n                      fill={fill}\n                    />\n                    {hasRoundedTop ? (\n                      <rect\n                        class=\"chart-bar__segment-square-base\"\n                        x={barX}\n                        y={squareBaseY}\n                        width={barWidth}\n                        height={squareBaseHeight}\n                        fill={fill}\n                      />\n                    ) : null}\n                    {segmentStart > 0 ? (\n                      <line\n                        class=\"chart-bar__segment-separator\"\n                        x1={barX}\n                        x2={barX + barWidth}\n                        y1={segmentBottom}\n                        y2={segmentBottom}\n                        vector-effect=\"non-scaling-stroke\"\n                      />\n                    ) : null}\n                  </g>\n                );\n              })}\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {category}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n    const isSingle = this.variant === 'single';\n    const accessibleLabel = isSingle\n      ? this.data.map(datum => `${datum.label}: ${datum.value}`).join(', ')\n      : this.stackedAccessibleLabel();\n\n    return (\n      <Host\n        class={{\n          'chart-bar': true,\n          [`chart-bar--${this.variant}`]: true,\n        }}\n      >\n        <svg\n          class=\"chart-bar__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={accessibleLabel}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {isSingle\n              ? this.renderSingle(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )\n              : this.renderStacked(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["chartBarCss","PERCENTAGE_TICKS","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","data","series","categories","width","height","viewportController","svgEl","componentDidLoad","connectViewportController","connectedCallback","componentDidRender","ChartViewportController","viewport","connect","disconnectedCallback","disconnect","handleIntrinsicSizeChange","undefined","requestAnimationFrame","measure","renderSingle","innerWidth","innerHeight","axisLabelGap","categoryLabelOffset","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","tick","key","transform","class","x1","x2","x","datum","index","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y","valuesForCategory","categoryIndex","Math","stackedAccessibleLabel","category","values","total","reduce","sum","details","seriesIndex","visibleValue","formatPercentage","String","name","join","renderStacked","categoryValues","_","totals","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","hasRoundedTop","y1","y2","render","viewportWidth","viewportHeight","margin","resolveCartesianChartLayout","left","right","top","bottom","isSingle","accessibleLabel","Host","ref","element","role"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-block;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: var(--dimension-stroke-width-012);\n  vector-effect: non-scaling-stroke;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n  vector-effect: non-scaling-stroke;\n}\n\n@media (forced-colors: active) {\n  .chart-bar__bar,\n  .chart-bar__segment-shape,\n  .chart-bar__segment-square-base {\n    forced-color-adjust: none;\n  }\n\n  .chart-bar__segment-separator {\n    stroke: var(--ds-forced-color-surface);\n  }\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport { resolveCartesianChartLayout } from '../../utils/cartesian-chart-layout';\nimport {\n  ChartViewportController,\n  type ChartViewportSize,\n} from '../../utils/chart-viewport-controller';\nimport type { ChartDatum, ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarVariant = 'single' | 'stacked' | 'percentage';\n\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Rendering model. Single uses `data`; stacked and percentage use `series` and `categories`. */\n  @Prop() variant: ChartBarVariant = 'single';\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  /** Ordered stack series for stacked and percentage variants. Set as a JS property. */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels for stacked and percentage variants. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  /** Standalone intrinsic width. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() width: number = 480;\n  /** Standalone intrinsic height. Container constraints reflow the plot at rendered pixel size. */\n  @Prop() height: number = 240;\n\n  @State() private viewport: ChartViewportSize | undefined;\n\n  private viewportController: ChartViewportController | null = null;\n  private svgEl: SVGElement | null = null;\n\n  componentDidLoad() {\n    this.connectViewportController();\n  }\n\n  connectedCallback() {\n    if (this.svgEl && !this.viewportController) this.connectViewportController();\n  }\n\n  componentDidRender() {\n    if (!this.viewportController) this.connectViewportController();\n  }\n\n  private connectViewportController() {\n    if (!this.svgEl) return;\n    this.viewportController = new ChartViewportController(this.svgEl, viewport => {\n      if (\n        viewport.width !== this.viewport?.width ||\n        viewport.height !== this.viewport?.height\n      ) {\n        this.viewport = viewport;\n      }\n    });\n    this.viewportController.connect();\n  }\n\n  disconnectedCallback() {\n    this.viewportController?.disconnect();\n    this.viewportController = null;\n  }\n\n  @Watch('width')\n  @Watch('height')\n  handleIntrinsicSizeChange() {\n    this.viewport = undefined;\n    if (typeof requestAnimationFrame === 'function') {\n      requestAnimationFrame(() => this.viewportController?.measure());\n    }\n  }\n\n  private renderSingle(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const yMax = max(this.data, d => d.value) ?? 0;\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {tick}\n            </text>\n          </g>\n        ))}\n\n        {this.data.map((datum, index) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(datum.label) ?? 0;\n          const barY = yScale(datum.value);\n          const barHeight = innerHeight - barY;\n          const squareBaseY = barY + barHeight / 2;\n          const squareBaseHeight = barHeight / 2;\n          const fill = datum.color ?? categoryColor(index);\n          return (\n            <g key={datum.label}>\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--rounded\"\n                x={barX}\n                y={barY}\n                width={barWidth}\n                height={barHeight}\n                fill={fill}\n              />\n              <rect\n                class=\"chart-bar__bar chart-bar__bar--square-base\"\n                x={barX}\n                y={squareBaseY}\n                width={barWidth}\n                height={squareBaseHeight}\n                fill={fill}\n              />\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {datum.label}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private stackedAccessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue =\n              this.variant === 'percentage'\n                ? formatPercentage(total ? value / total : 0, 1)\n                : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  private renderStacked(\n    innerWidth: number,\n    innerHeight: number,\n    axisLabelGap: number,\n    categoryLabelOffset: number\n  ) {\n    const categoryValues = this.categories.map((_, index) =>\n      this.valuesForCategory(index)\n    );\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n    const yTicks =\n      this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <g>\n        {yTicks.map(tick => (\n          <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n            <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n            <text\n              class=\"chart-bar__axis-label\"\n              x={-axisLabelGap}\n              text-anchor=\"end\"\n              dominant-baseline=\"middle\"\n            >\n              {this.variant === 'percentage' ? `${tick}%` : tick}\n            </text>\n          </g>\n        ))}\n\n        {this.categories.map((category, categoryIndex) => {\n          const barWidth = xScale.bandwidth();\n          const barX = xScale(category) ?? 0;\n          const values = categoryValues[categoryIndex];\n          const total = totals[categoryIndex];\n          const topSeriesIndex = values.reduce(\n            (topIndex, value, seriesIndex) =>\n              value > 0 ? seriesIndex : topIndex,\n            -1\n          );\n          let cumulativeValue = 0;\n\n          return (\n            <g class=\"chart-bar__stack\" data-category={category} key={category}>\n              {this.series.map((series, seriesIndex) => {\n                const rawValue = values[seriesIndex];\n                const value =\n                  this.variant === 'percentage'\n                    ? total\n                      ? (rawValue / total) * 100\n                      : 0\n                    : rawValue;\n                const segmentStart = cumulativeValue;\n                const segmentEnd = cumulativeValue + value;\n                cumulativeValue = segmentEnd;\n                const segmentY = yScale(segmentEnd);\n                const segmentBottom = yScale(segmentStart);\n                const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                if (!segmentHeight) return null;\n\n                const fill = series.color ?? categoryColor(seriesIndex);\n                const hasRoundedTop =\n                  this.variant === 'stacked' && seriesIndex === topSeriesIndex;\n                const squareBaseY = segmentY + segmentHeight / 2;\n                const squareBaseHeight = segmentHeight / 2;\n\n                return (\n                  <g\n                    class=\"chart-bar__segment\"\n                    data-series={series.name}\n                    key={series.name}\n                  >\n                    <rect\n                      class={{\n                        'chart-bar__segment-shape': true,\n                        'chart-bar__segment-shape--rounded': hasRoundedTop,\n                      }}\n                      x={barX}\n                      y={segmentY}\n                      width={barWidth}\n                      height={segmentHeight}\n                      fill={fill}\n                    />\n                    {hasRoundedTop ? (\n                      <rect\n                        class=\"chart-bar__segment-square-base\"\n                        x={barX}\n                        y={squareBaseY}\n                        width={barWidth}\n                        height={squareBaseHeight}\n                        fill={fill}\n                      />\n                    ) : null}\n                    {segmentStart > 0 ? (\n                      <line\n                        class=\"chart-bar__segment-separator\"\n                        x1={barX}\n                        x2={barX + barWidth}\n                        y1={segmentBottom}\n                        y2={segmentBottom}\n                        vector-effect=\"non-scaling-stroke\"\n                      />\n                    ) : null}\n                  </g>\n                );\n              })}\n              <text\n                class=\"chart-bar__axis-label\"\n                x={barX + barWidth / 2}\n                y={innerHeight + categoryLabelOffset}\n                text-anchor=\"middle\"\n              >\n                {category}\n              </text>\n            </g>\n          );\n        })}\n      </g>\n    );\n  }\n\n  render() {\n    const viewportWidth = this.viewport?.width ?? this.width;\n    const viewportHeight = this.viewport?.height ?? this.height;\n    const { margin, axisLabelGap, categoryLabelOffset } =\n      resolveCartesianChartLayout();\n    const innerWidth = Math.max(0, viewportWidth - margin.left - margin.right);\n    const innerHeight = Math.max(0, viewportHeight - margin.top - margin.bottom);\n    const isSingle = this.variant === 'single';\n    const accessibleLabel = isSingle\n      ? this.data.map(datum => `${datum.label}: ${datum.value}`).join(', ')\n      : this.stackedAccessibleLabel();\n\n    return (\n      <Host\n        class={{\n          'chart-bar': true,\n          [`chart-bar--${this.variant}`]: true,\n        }}\n      >\n        <svg\n          class=\"chart-bar__svg\"\n          ref={element => {\n            this.svgEl = element ?? null;\n          }}\n          width={viewportWidth}\n          height={viewportHeight}\n          role=\"img\"\n          aria-label={accessibleLabel}\n        >\n          <g transform={`translate(${margin.left}, ${margin.top})`}>\n            {isSingle\n              ? this.renderSingle(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )\n              : this.renderStacked(\n                  innerWidth,\n                  innerHeight,\n                  axisLabelGap,\n                  categoryLabelOffset\n                )}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-chart-donut.js

@@ -1,2 +1,2 @@
-import{p as t,H as n,c as e,h as i,a as s,t as r}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as a}from"./p-Ay1AX7Ql.js";import{d as c}from"./p-BroVnDzE.js";import{T as h}from"./p-C4uYvyq6.js";import{r as u}from"./p-BJMRBHKW.js";import{f as l}from"./p-BBpASejH.js";import{w as f,c as d,a as p}from"./p-CrCGIx8s.js";function y(t,n,e){t.textContent=n;if(e<=0||t.getComputedTextLength()<=e)return n;let i=0;let s=n.length;while(i<s){const r=Math.ceil((i+s)/2);t.textContent=`${n.slice(0,r)}…`;if(t.getComputedTextLength()<=e){i=r}else{s=r-1}}return i>0?`${n.slice(0,i)}…`:"…"}const v=Math.abs;const m=Math.atan2;const g=Math.cos;const b=Math.max;const x=Math.min;const M=Math.sin;const _=Math.sqrt;const w=1e-12;const z=Math.PI;const k=z/2;const $=2*z;function A(t){return t>1?0:t<-1?z:Math.acos(t)}function j(t){return t>=1?k:t<=-1?-k:Math.asin(t)}function C(t){return t.innerRadius}function S(t){return t.outerRadius}function B(t){return t.startAngle}function E(t){return t.endAngle}function P(t){return t&&t.padAngle}function R(t,n,e,i,s,r,o,a){var c=e-t,h=i-n,u=o-s,l=a-r,f=l*c-u*h;if(f*f<w)return;f=(u*(n-r)-l*(t-s))/f;return[t+f*c,n+f*h]}function F(t,n,e,i,s,r,o){var a=t-e,c=n-i,h=(o?r:-r)/_(a*a+c*c),u=h*c,l=-h*a,f=t+u,d=n+l,p=e+u,y=i+l,v=(f+p)/2,m=(d+y)/2,g=p-f,x=y-d,M=g*g+x*x,w=s-r,z=f*y-p*d,k=(x<0?-1:1)*_(b(0,w*w*M-z*z)),$=(z*x-g*k)/M,A=(-z*g-x*k)/M,j=(z*x+g*k)/M,C=(-z*g+x*k)/M,S=$-v,B=A-m,E=j-v,P=C-m;if(S*S+B*B>E*E+P*P)$=j,A=C;return{cx:$,cy:A,x01:-u,y01:-l,x11:$*(s/w-1),y11:A*(s/w-1)}}function T(){var t=C,n=S,e=d(0),i=null,s=B,r=E,o=P,a=null,c=f(h);function h(){var h,u,l=+t.apply(this,arguments),f=+n.apply(this,arguments),d=s.apply(this,arguments)-k,p=r.apply(this,arguments)-k,y=v(p-d),b=p>d;if(!a)a=h=c();if(f<l)u=f,f=l,l=u;if(!(f>w))a.moveTo(0,0);else if(y>$-w){a.moveTo(f*g(d),f*M(d));a.arc(0,0,f,d,p,!b);if(l>w){a.moveTo(l*g(p),l*M(p));a.arc(0,0,l,p,d,b)}}else{var C=d,S=p,B=d,E=p,P=y,T=y,D=o.apply(this,arguments)/2,H=D>w&&(i?+i.apply(this,arguments):_(l*l+f*f)),L=x(v(f-l)/2,+e.apply(this,arguments)),N=L,O=L,V,X;if(H>w){var Y=j(H/l*M(D)),q=j(H/f*M(D));if((P-=Y*2)>w)Y*=b?1:-1,B+=Y,E-=Y;else P=0,B=E=(d+p)/2;if((T-=q*2)>w)q*=b?1:-1,C+=q,S-=q;else T=0,C=S=(d+p)/2}var G=f*g(C),I=f*M(C),J=l*g(E),K=l*M(E);if(L>w){var Q=f*g(S),W=f*M(S),U=l*g(B),Z=l*M(B),tt;if(y<z){if(tt=R(G,I,U,Z,Q,W,J,K)){var nt=G-tt[0],et=I-tt[1],it=Q-tt[0],st=W-tt[1],rt=1/M(A((nt*it+et*st)/(_(nt*nt+et*et)*_(it*it+st*st)))/2),ot=_(tt[0]*tt[0]+tt[1]*tt[1]);N=x(L,(l-ot)/(rt-1));O=x(L,(f-ot)/(rt+1))}else{N=O=0}}}if(!(T>w))a.moveTo(G,I);else if(O>w){V=F(U,Z,G,I,f,O,b);X=F(Q,W,J,K,f,O,b);a.moveTo(V.cx+V.x01,V.cy+V.y01);if(O<L)a.arc(V.cx,V.cy,O,m(V.y01,V.x01),m(X.y01,X.x01),!b);else{a.arc(V.cx,V.cy,O,m(V.y01,V.x01),m(V.y11,V.x11),!b);a.arc(0,0,f,m(V.cy+V.y11,V.cx+V.x11),m(X.cy+X.y11,X.cx+X.x11),!b);a.arc(X.cx,X.cy,O,m(X.y11,X.x11),m(X.y01,X.x01),!b)}}else a.moveTo(G,I),a.arc(0,0,f,C,S,!b);if(!(l>w)||!(P>w))a.lineTo(J,K);else if(N>w){V=F(J,K,Q,W,l,-N,b);X=F(G,I,U,Z,l,-N,b);a.lineTo(V.cx+V.x01,V.cy+V.y01);if(N<L)a.arc(V.cx,V.cy,N,m(V.y01,V.x01),m(X.y01,X.x01),!b);else{a.arc(V.cx,V.cy,N,m(V.y01,V.x01),m(V.y11,V.x11),!b);a.arc(0,0,l,m(V.cy+V.y11,V.cx+V.x11),m(X.cy+X.y11,X.cx+X.x11),b);a.arc(X.cx,X.cy,N,m(X.y11,X.x11),m(X.y01,X.x01),!b)}}else a.arc(0,0,l,E,B,b)}a.closePath();if(h)return a=null,h+""||null}h.centroid=function(){var e=(+t.apply(this,arguments)+ +n.apply(this,arguments))/2,i=(+s.apply(this,arguments)+ +r.apply(this,arguments))/2-z/2;return[g(i)*e,M(i)*e]};h.innerRadius=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),h):t};h.outerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:d(+t),h):n};h.cornerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:d(+t),h):e};h.padRadius=function(t){return arguments.length?(i=t==null?null:typeof t==="function"?t:d(+t),h):i};h.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),h):s};h.endAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),h):r};h.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:d(+t),h):o};h.context=function(t){return arguments.length?(a=t==null?null:t,h):a};return h}function D(t,n){return n<t?-1:n>t?1:n>=t?0:NaN}function H(t){return t}function L(){var t=H,n=D,e=null,i=d(0),s=d($),r=d(0);function o(o){var a,c=(o=p(o)).length,h,u,l=0,f=new Array(c),d=new Array(c),y=+i.apply(this,arguments),v=Math.min($,Math.max(-$,s.apply(this,arguments)-y)),m,g=Math.min(Math.abs(v)/c,r.apply(this,arguments)),b=g*(v<0?-1:1),x;for(a=0;a<c;++a){if((x=d[f[a]=a]=+t(o[a],a,o))>0){l+=x}}if(n!=null)f.sort((function(t,e){return n(d[t],d[e])}));else if(e!=null)f.sort((function(t,n){return e(o[t],o[n])}));for(a=0,u=l?(v-c*b)/l:0;a<c;++a,y=m){h=f[a],x=d[h],m=y+(x>0?x*u:0)+b,d[h]={data:o[h],index:a,value:x,startAngle:y,endAngle:m,padAngle:g}}return d}o.value=function(n){return arguments.length?(t=typeof n==="function"?n:d(+n),o):t};o.sortValues=function(t){return arguments.length?(n=t,e=null,o):n};o.sort=function(t){return arguments.length?(e=t,n=null,o):e};o.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:d(+t),o):i};o.endAngle=function(t){return arguments.length?(s=typeof t==="function"?t:d(+t),o):s};o.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:d(+t),o):r};return o}const N=()=>`.sc-ds-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}.chart-donut__slice--dimmed.sc-ds-chart-donut{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}`;const O=0;const V=.82;const X=128;const Y=t(class t extends n{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=e(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=X;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,X)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const n=this.fillMinPx;const e=this.fillMaxPx;if(!(t>0))return n;return Math.round(Math.min(e,Math.max(n,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const n=t[0];if(!n)return;this.applyAvailableSize(n.contentRect.width,n.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,n){const e=Math.floor(Math.min(t,n));if(e>0&&e!==this.measuredSize){this.measuredSize=e}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const n=this.el.querySelector(".chart-donut__wrapper");if(!n)return;const e=n.getBoundingClientRect();this.tooltipX=t.clientX-e.left;this.tooltipY=t.clientY-e.top}updateTooltipFromSvgPoint(t,n,e,i){if(!this.showTooltip)return;const s=this.el.querySelector(".chart-donut__wrapper");const r=t.ownerSVGElement;if(!s||!r)return;const o=s.getBoundingClientRect();const a=r.getBoundingClientRect();this.tooltipX=a.left-o.left+n*(a.width/i);this.tooltipY=a.top-o.top+e*(a.height/i)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const i=n-e;const s=i*2*V;const r=this.data.reduce(((t,n)=>t+n.value),0);const o=this.centerValue??l(r,this.locale);if(this.valueTextEl){const t=y(this.valueTextEl,o,s);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const a=this.centerCaption??"";if(this.captionTextEl&&a){const t=y(this.captionTextEl,a,s);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const n=t/2;const e=u(this.thickness,h.size200);const r=u(this.cornerRadius,h.radius025);const a=n-e;const c=this.data.reduce(((t,n)=>t+n.value),0);const f=c<=0;const d=this.activeLabel??this.hoveredLabel;const p=T().innerRadius(a).outerRadius(n).cornerRadius(r).padAngle(this.gap*Math.PI/180);const y=f?[]:L().value((t=>t.value)).sort(null)(this.data);const v=f?T().innerRadius(a).outerRadius(n)({startAngle:0,endAngle:Math.PI*2}):null;const m=u(h.lineheightXl,32);const g=u(h.lineheightMd,20);const b=this.centerCaption?n-(O+g)/2:n;const x=n+(m+O)/2;const M=this.centerValue??l(c,this.locale);const _=this.centerCaption??"";const w=this.isFillMode;return i(s,{key:"8b61d0e0a38d8ffed727b338930b346e26df2e1e",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("div",{key:"147a30532a7708ac6c43259bc9f0b40b516e4da5",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},i("svg",{key:"2c1116b89b360af9e68e1519616614e8532eac03",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:f?"img":undefined,"aria-label":f?this.noDataLabel:undefined},i("g",{key:"6d0fd6cf88429c254bec9ab0f257952a3a2aab52",transform:`translate(${n}, ${n})`},f?i("path",{d:v??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):y.map(((e,s)=>{const r=this.data[s];const a=d!=null&&r.label!==d;const[c,h]=p.centroid(e);return i("path",{key:r.label,class:{"chart-donut__slice--dimmed":a},d:p(e)??undefined,fill:r.color??o(s),tabindex:0,role:"img","aria-label":`${r.label}: ${r.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(r)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:e=>{this.updateTooltipFromSvgPoint(e.currentTarget,n+c,n+h,t);this.handleHover(r)},onBlur:()=>this.handleHover(null)})}))),i("text",{key:"7501cdbda44378ec4c758c672c73ea230ca68c3b",class:"chart-donut__center-value",x:n,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||M),_&&i("text",{key:"f806109ff70c58381d439ddbfbb885531c751036",class:"chart-donut__center-caption",x:n,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||_)),this.tooltipDatum&&i("ds-tooltip-data-viz",{key:"ecc27ee6ab17b398712a78fa9e9a49ea0a8c4032",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return N()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function q(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(r(t))){customElements.define(r(t),Y)}break;case"ds-text":if(!customElements.get(r(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(r(t))){c()}break}}))}q();const G=Y;const I=q;export{G as DsChartDonut,I as defineCustomElement};
+import{p as t,H as e,c as n,h as s,a as i,t as o}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{d as c}from"./p-w2kKeG_h.js";import{d as a}from"./p-vY5ia2gz.js";import{T as h}from"./p-C4uYvyq6.js";import{r as u}from"./p-BJMRBHKW.js";import{f as l}from"./p-BBpASejH.js";import{w as d,c as f,a as p}from"./p-CrCGIx8s.js";function v(t,e,n){t.textContent=e;if(n<=0||t.getComputedTextLength()<=n)return e;let s=0;let i=e.length;while(s<i){const o=Math.ceil((s+i)/2);t.textContent=`${e.slice(0,o)}…`;if(t.getComputedTextLength()<=n){s=o}else{i=o-1}}return s>0?`${e.slice(0,s)}…`:"…"}const y=Math.abs;const g=Math.atan2;const m=Math.cos;const b=Math.max;const x=Math.min;const _=Math.sin;const M=Math.sqrt;const w=1e-12;const k=Math.PI;const z=k/2;const C=2*k;function $(t){return t>1?0:t<-1?k:Math.acos(t)}function j(t){return t>=1?z:t<=-1?-z:Math.asin(t)}function S(t){return t.innerRadius}function T(t){return t.outerRadius}function A(t){return t.startAngle}function B(t){return t.endAngle}function H(t){return t&&t.padAngle}function P(t,e,n,s,i,o,r,c){var a=n-t,h=s-e,u=r-i,l=c-o,d=l*a-u*h;if(d*d<w)return;d=(u*(e-o)-l*(t-i))/d;return[t+d*a,e+d*h]}function R(t,e,n,s,i,o,r){var c=t-n,a=e-s,h=(r?o:-o)/M(c*c+a*a),u=h*a,l=-h*c,d=t+u,f=e+l,p=n+u,v=s+l,y=(d+p)/2,g=(f+v)/2,m=p-d,x=v-f,_=m*m+x*x,w=i-o,k=d*v-p*f,z=(x<0?-1:1)*M(b(0,w*w*_-k*k)),C=(k*x-m*z)/_,$=(-k*m-x*z)/_,j=(k*x+m*z)/_,S=(-k*m+x*z)/_,T=C-y,A=$-g,B=j-y,H=S-g;if(T*T+A*A>B*B+H*H)C=j,$=S;return{cx:C,cy:$,x01:-u,y01:-l,x11:C*(i/w-1),y11:$*(i/w-1)}}function E(){var t=S,e=T,n=f(0),s=null,i=A,o=B,r=H,c=null,a=d(h);function h(){var h,u,l=+t.apply(this,arguments),d=+e.apply(this,arguments),f=i.apply(this,arguments)-z,p=o.apply(this,arguments)-z,v=y(p-f),b=p>f;if(!c)c=h=a();if(d<l)u=d,d=l,l=u;if(!(d>w))c.moveTo(0,0);else if(v>C-w){c.moveTo(d*m(f),d*_(f));c.arc(0,0,d,f,p,!b);if(l>w){c.moveTo(l*m(p),l*_(p));c.arc(0,0,l,p,f,b)}}else{var S=f,T=p,A=f,B=p,H=v,E=v,F=r.apply(this,arguments)/2,L=F>w&&(s?+s.apply(this,arguments):M(l*l+d*d)),D=x(y(d-l)/2,+n.apply(this,arguments)),N=D,O=D,G,Y;if(L>w){var K=j(L/l*_(F)),V=j(L/d*_(F));if((H-=K*2)>w)K*=b?1:-1,A+=K,B-=K;else H=0,A=B=(f+p)/2;if((E-=V*2)>w)V*=b?1:-1,S+=V,T-=V;else E=0,S=T=(f+p)/2}var q=d*m(S),I=d*_(S),J=l*m(B),W=l*_(B);if(D>w){var X=d*m(T),Q=d*_(T),U=l*m(A),Z=l*_(A),tt;if(v<k){if(tt=P(q,I,U,Z,X,Q,J,W)){var et=q-tt[0],nt=I-tt[1],st=X-tt[0],it=Q-tt[1],ot=1/_($((et*st+nt*it)/(M(et*et+nt*nt)*M(st*st+it*it)))/2),rt=M(tt[0]*tt[0]+tt[1]*tt[1]);N=x(D,(l-rt)/(ot-1));O=x(D,(d-rt)/(ot+1))}else{N=O=0}}}if(!(E>w))c.moveTo(q,I);else if(O>w){G=R(U,Z,q,I,d,O,b);Y=R(X,Q,J,W,d,O,b);c.moveTo(G.cx+G.x01,G.cy+G.y01);if(O<D)c.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(Y.y01,Y.x01),!b);else{c.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(G.y11,G.x11),!b);c.arc(0,0,d,g(G.cy+G.y11,G.cx+G.x11),g(Y.cy+Y.y11,Y.cx+Y.x11),!b);c.arc(Y.cx,Y.cy,O,g(Y.y11,Y.x11),g(Y.y01,Y.x01),!b)}}else c.moveTo(q,I),c.arc(0,0,d,S,T,!b);if(!(l>w)||!(H>w))c.lineTo(J,W);else if(N>w){G=R(J,W,X,Q,l,-N,b);Y=R(q,I,U,Z,l,-N,b);c.lineTo(G.cx+G.x01,G.cy+G.y01);if(N<D)c.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(Y.y01,Y.x01),!b);else{c.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(G.y11,G.x11),!b);c.arc(0,0,l,g(G.cy+G.y11,G.cx+G.x11),g(Y.cy+Y.y11,Y.cx+Y.x11),b);c.arc(Y.cx,Y.cy,N,g(Y.y11,Y.x11),g(Y.y01,Y.x01),!b)}}else c.arc(0,0,l,B,A,b)}c.closePath();if(h)return c=null,h+""||null}h.centroid=function(){var n=(+t.apply(this,arguments)+ +e.apply(this,arguments))/2,s=(+i.apply(this,arguments)+ +o.apply(this,arguments))/2-k/2;return[m(s)*n,_(s)*n]};h.innerRadius=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),h):t};h.outerRadius=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),h):e};h.cornerRadius=function(t){return arguments.length?(n=typeof t==="function"?t:f(+t),h):n};h.padRadius=function(t){return arguments.length?(s=t==null?null:typeof t==="function"?t:f(+t),h):s};h.startAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),h):i};h.endAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),h):o};h.padAngle=function(t){return arguments.length?(r=typeof t==="function"?t:f(+t),h):r};h.context=function(t){return arguments.length?(c=t==null?null:t,h):c};return h}function F(t,e){return e<t?-1:e>t?1:e>=t?0:NaN}function L(t){return t}function D(){var t=L,e=F,n=null,s=f(0),i=f(C),o=f(0);function r(r){var c,a=(r=p(r)).length,h,u,l=0,d=new Array(a),f=new Array(a),v=+s.apply(this,arguments),y=Math.min(C,Math.max(-C,i.apply(this,arguments)-v)),g,m=Math.min(Math.abs(y)/a,o.apply(this,arguments)),b=m*(y<0?-1:1),x;for(c=0;c<a;++c){if((x=f[d[c]=c]=+t(r[c],c,r))>0){l+=x}}if(e!=null)d.sort((function(t,n){return e(f[t],f[n])}));else if(n!=null)d.sort((function(t,e){return n(r[t],r[e])}));for(c=0,u=l?(y-a*b)/l:0;c<a;++c,v=g){h=d[c],x=f[h],g=v+(x>0?x*u:0)+b,f[h]={data:r[h],index:c,value:x,startAngle:v,endAngle:g,padAngle:m}}return f}r.value=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),r):t};r.sortValues=function(t){return arguments.length?(e=t,n=null,r):e};r.sort=function(t){return arguments.length?(n=t,e=null,r):n};r.startAngle=function(t){return arguments.length?(s=typeof t==="function"?t:f(+t),r):s};r.endAngle=function(t){return arguments.length?(i=typeof t==="function"?t:f(+t),r):i};r.padAngle=function(t){return arguments.length?(o=typeof t==="function"?t:f(+t),r):o};return r}const N=()=>`@media (forced-colors: active){.sc-ds-chart-donut:root,.sc-ds-chart-donut-h,.ds-forced-colors-scope.sc-ds-chart-donut{--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-chart-donut-h{display:inline-block;font-family:var(--typography-font-family);user-select:none}.chart-donut--fill.sc-ds-chart-donut-h{display:block;width:100%;height:100%;min-width:0;min-height:0}.chart-donut__wrapper.sc-ds-chart-donut{position:relative;overflow:visible}.chart-donut--fill.sc-ds-chart-donut-h .chart-donut__wrapper.sc-ds-chart-donut{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{cursor:default;transition:opacity var(--effect-motion-short-2)}.chart-donut__slice--dimmed.sc-ds-chart-donut{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{transition:none}}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{outline:none;stroke:var(--color-interaction-focus);stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-donut__center-value.sc-ds-chart-donut{fill:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double);cursor:default;pointer-events:none}.chart-donut__center-caption.sc-ds-chart-donut{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);cursor:default;pointer-events:none}@media (forced-colors: active){.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut{forced-color-adjust:none}.chart-donut__svg.sc-ds-chart-donut path.sc-ds-chart-donut:focus-visible{stroke:var(--ds-forced-color-selected)}}`;const O=0;const G=.82;const Y=128;const K=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsSliceHover=n(this,"dsSliceHover");this.noDataLabel="No data";this.data=[];this.thickness=h.size200;this.cornerRadius=h.radius025;this.gap=1;this.showTooltip=true;this.activeLabel=null;this.hoveredLabel=null;this.displayedValueText="";this.displayedCaptionText="";this.measuredSize=Y;this.tooltipX=0;this.tooltipY=0;this.resizeObserver=null}get isFillMode(){return this.size==null||!Number.isFinite(this.size)||this.size<=0}get fillMinPx(){return u(h.donutFillMin,Y)}get fillMaxPx(){return u(h.donutFillMax,192)}clampFillSize(t){const e=this.fillMinPx;const n=this.fillMaxPx;if(!(t>0))return e;return Math.round(Math.min(n,Math.max(e,t)))}get resolvedSize(){if(!this.isFillMode)return this.size;return this.clampFillSize(this.measuredSize)}componentDidLoad(){this.syncResizeObserver()}onSizePropChange(){this.syncResizeObserver()}disconnectedCallback(){this.teardownResizeObserver()}syncResizeObserver(){this.teardownResizeObserver();if(!this.isFillMode)return;const t=this.el;if(!t||typeof ResizeObserver==="undefined")return;this.resizeObserver=new ResizeObserver((t=>{const e=t[0];if(!e)return;this.applyAvailableSize(e.contentRect.width,e.contentRect.height)}));this.resizeObserver.observe(t);this.measureHost()}measureHost(){const t=this.el.getBoundingClientRect();this.applyAvailableSize(t.width,t.height)}applyAvailableSize(t,e){const n=Math.floor(Math.min(t,e));if(n>0&&n!==this.measuredSize){this.measuredSize=n}}teardownResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=null}handleHover(t){this.hoveredLabel=t?.label??null;this.dsSliceHover.emit(t)}get tooltipDatum(){if(!this.showTooltip||this.hoveredLabel==null)return null;return this.data.find((t=>t.label===this.hoveredLabel))??null}updateTooltipFromPointer(t){if(!this.showTooltip)return;const e=this.el.querySelector(".chart-donut__wrapper");if(!e)return;const n=e.getBoundingClientRect();this.tooltipX=t.clientX-n.left;this.tooltipY=t.clientY-n.top}updateTooltipFromSvgPoint(t,e,n,s){if(!this.showTooltip)return;const i=this.el.querySelector(".chart-donut__wrapper");const o=t.ownerSVGElement;if(!i||!o)return;const r=i.getBoundingClientRect();const c=o.getBoundingClientRect();this.tooltipX=c.left-r.left+e*(c.width/s);this.tooltipY=c.top-r.top+n*(c.height/s)}componentDidRender(){if(this.isFillMode&&!this.resizeObserver){this.syncResizeObserver()}const t=this.resolvedSize;const e=t/2;const n=u(this.thickness,h.size200);const s=e-n;const i=s*2*G;const o=this.data.reduce(((t,e)=>t+e.value),0);const r=this.centerValue??l(o,this.locale);if(this.valueTextEl){const t=v(this.valueTextEl,r,i);if(t!==this.displayedValueText)this.displayedValueText=t;else this.valueTextEl.textContent=t}const c=this.centerCaption??"";if(this.captionTextEl&&c){const t=v(this.captionTextEl,c,i);if(t!==this.displayedCaptionText)this.displayedCaptionText=t;else this.captionTextEl.textContent=t}}render(){const t=this.resolvedSize;const e=t/2;const n=u(this.thickness,h.size200);const o=u(this.cornerRadius,h.radius025);const c=e-n;const a=this.data.reduce(((t,e)=>t+e.value),0);const d=a<=0;const f=this.activeLabel??this.hoveredLabel;const p=E().innerRadius(c).outerRadius(e).cornerRadius(o).padAngle(this.gap*Math.PI/180);const v=d?[]:D().value((t=>t.value)).sort(null)(this.data);const y=d?E().innerRadius(c).outerRadius(e)({startAngle:0,endAngle:Math.PI*2}):null;const g=u(h.lineheightXl,32);const m=u(h.lineheightMd,20);const b=this.centerCaption?e-(O+m)/2:e;const x=e+(g+O)/2;const _=this.centerValue??l(a,this.locale);const M=this.centerCaption??"";const w=this.isFillMode;return s(i,{key:"8b61d0e0a38d8ffed727b338930b346e26df2e1e",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("div",{key:"147a30532a7708ac6c43259bc9f0b40b516e4da5",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("svg",{key:"2c1116b89b360af9e68e1519616614e8532eac03",class:"chart-donut__svg",viewBox:`0 0 ${t} ${t}`,width:t,height:t,role:d?"img":undefined,"aria-label":d?this.noDataLabel:undefined},s("g",{key:"6d0fd6cf88429c254bec9ab0f257952a3a2aab52",transform:`translate(${e}, ${e})`},d?s("path",{d:y??undefined,fill:"var(--color-background-faint-neutral)","aria-hidden":"true"}):v.map(((n,i)=>{const o=this.data[i];const c=f!=null&&o.label!==f;const[a,h]=p.centroid(n);return s("path",{key:o.label,class:{"chart-donut__slice--dimmed":c},d:p(n)??undefined,fill:o.color??r(i),tabindex:0,role:"img","aria-label":`${o.label}: ${o.value}`,onMouseEnter:t=>{this.updateTooltipFromPointer(t);this.handleHover(o)},onMouseMove:t=>this.updateTooltipFromPointer(t),onMouseLeave:()=>this.handleHover(null),onFocus:n=>{this.updateTooltipFromSvgPoint(n.currentTarget,e+a,e+h,t);this.handleHover(o)},onBlur:()=>this.handleHover(null)})}))),s("text",{key:"7501cdbda44378ec4c758c672c73ea230ca68c3b",class:"chart-donut__center-value",x:e,y:b,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.valueTextEl=t??undefined}},this.displayedValueText||_),M&&s("text",{key:"f806109ff70c58381d439ddbfbb885531c751036",class:"chart-donut__center-caption",x:e,y:x,"text-anchor":"middle","dominant-baseline":"central",ref:t=>{this.captionTextEl=t??undefined}},this.displayedCaptionText||M)),this.tooltipDatum&&s("ds-tooltip-data-viz",{key:"ecc27ee6ab17b398712a78fa9e9a49ea0a8c4032",label:this.tooltipDatum.label,value:l(this.tooltipDatum.value,this.locale),x:this.tooltipX,y:this.tooltipY})))}get el(){return this}static get watchers(){return{size:[{onSizePropChange:0}]}}static get style(){return N()}},[2,"ds-chart-donut",{locale:[1],noDataLabel:[1,"no-data-label"],data:[16],size:[2],thickness:[8],cornerRadius:[8,"corner-radius"],gap:[2],showTooltip:[4,"show-tooltip"],centerValue:[1,"center-value"],centerCaption:[1,"center-caption"],activeLabel:[1,"active-label"],hoveredLabel:[32],displayedValueText:[32],displayedCaptionText:[32],measuredSize:[32],tooltipX:[32],tooltipY:[32]},undefined,{size:[{onSizePropChange:0}]}]);function V(){if(typeof customElements==="undefined"){return}const t=["ds-chart-donut","ds-text","ds-tooltip-data-viz"];t.forEach((t=>{switch(t){case"ds-chart-donut":if(!customElements.get(o(t))){customElements.define(o(t),K)}break;case"ds-text":if(!customElements.get(o(t))){c()}break;case"ds-tooltip-data-viz":if(!customElements.get(o(t))){a()}break}}))}V();const q=K;const I=V;export{q as DsChartDonut,I as defineCustomElement};
 //# sourceMappingURL=ds-chart-donut.js.map