@ds-mo/ui 13.4.0 → 13.6.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","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","layout","periodLabel","comparisonLabel","metricMinWidth","isLoading","overviewLabel","scrollCollapseProgress","focusedMetricIndex","layoutResizeObserver","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","componentDidLoad","observeLayout","componentDidRender","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 always-dark 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-always-dark-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-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-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-always-dark-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-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** 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   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant, 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={ALWAYS_DARK_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={ALWAYS_DARK_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={ALWAYS_DARK_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={ALWAYS_DARK_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-always-dark': 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={ALWAYS_DARK_PRIMARY}\n            fontFeature=\"tabular-nums\"\n          >\n            {metric.value}\n          </ds-text>\n          {this.renderTrend(metric.trend, 'text-body-medium')}\n        </div>\n      </div>\n    );\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={ALWAYS_DARK_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={ALWAYS_DARK_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=\"always-dark\"\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":["resolveOverviewGridColumns","options","cellCount","Math","max","floor","minCellWidth","maxColumns","fittingColumns","min","availableWidth","columns","resolveCardOverviewCollapseGeometry","compactHeight","expandedHeight","progress","variant","Number","isFinite","distance","offset","active","visibleHeight","resolveSafetyScoreLevel","value","numericValue","undefined","resolveOverviewRovingIndex","metrics","focusedIndex","first","findIndex","metric","isInactive","findNextOverviewMetricIndex","from","step","length","next","cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","LOADING_PLACEHOLDER_COUNT","MAX_METRIC_COUNT","TREND_COLORS","positive","negative","neutral","ALWAYS_DARK_PRIMARY","ALWAYS_DARK_SECONDARY","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","layout","periodLabel","comparisonLabel","metricMinWidth","isLoading","overviewLabel","scrollCollapseProgress","focusedMetricIndex","layoutResizeObserver","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","componentDidLoad","observeLayout","componentDidRender","updateLayoutGeometry","disconnectedCallback","disconnect","visibleMetrics","slice","visibleCellCount","metricCount","resolvedScrollCollapseProgress","scrollCollapseGeometry","resolveCssLengthPx","TOKEN_DEFAULTS","size600","layoutEl","bounds","getBoundingClientRect","width","height","ResizeObserver","entries","rect","contentRect","observe","resolvedWidth","resolvedHeight","abs","menuWidthXs","gridColumns","rovingIndex","selectMetric","dsMetricSelect","emit","cells","el","querySelectorAll","focus","bar","textVariant","className","h","class","background","renderTrend","trend","emphasis","color","as","tone","fontFeature","direction","renderScore","part","unavailableMessage","scoreErrorMessage","score","role","level","Boolean","label","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","size","renderMetrics","Array","_","map","render","compact","collapse","Host","style","String","ref","element","name","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 {\n  CardOverviewVariant,\n  OverviewMetric,\n  SafetyScoreLevel,\n} from './card-overview-types';\n\nexport interface CardOverviewCollapseGeometry {\n  active: boolean;\n  expandedHeight: number;\n  offset: number;\n  visibleHeight: number;\n}\n\n/**\n * Choose the densest column count that fits without leaving an incomplete row\n * for even cell totals. Odd totals retain the densest fitting layout and may\n * therefore leave an orphan in the final row.\n */\nexport function resolveOverviewGridColumns(options: {\n  cellCount: number;\n  availableWidth: number;\n  minCellWidth: number;\n  maxColumns?: number;\n}): number {\n  const cellCount = Math.max(1, Math.floor(options.cellCount));\n  const minCellWidth = Math.max(1, options.minCellWidth);\n  const maxColumns = Math.max(1, Math.floor(options.maxColumns ?? 4));\n  const fittingColumns = Math.max(\n    1,\n    Math.min(cellCount, maxColumns, Math.floor(Math.max(0, options.availableWidth) / minCellWidth))\n  );\n\n  if (cellCount % 2 !== 0) return fittingColumns;\n\n  for (let columns = fittingColumns; columns >= 1; columns -= 1) {\n    if (cellCount % columns === 0) return columns;\n  }\n\n  return 1;\n}\n\nexport function resolveCardOverviewCollapseGeometry(options: {\n  variant: CardOverviewVariant;\n  progress: number;\n  expandedHeight: number;\n  compactHeight: number;\n}): CardOverviewCollapseGeometry {\n  const compactHeight = Math.max(0, options.compactHeight);\n  const expandedHeight = Math.max(options.expandedHeight, compactHeight);\n  const progress =\n    options.variant === 'compact' || !Number.isFinite(options.progress)\n      ? 0\n      : Math.min(1, Math.max(0, options.progress));\n  const distance = Math.max(0, expandedHeight - compactHeight);\n  const offset = distance * progress;\n\n  return {\n    active: progress > 0 && distance > 0,\n    expandedHeight,\n    offset,\n    visibleHeight: expandedHeight - offset,\n  };\n}\n\nexport function resolveSafetyScoreLevel(value: string | number): SafetyScoreLevel | undefined {\n  const numericValue = typeof value === 'number' ? value : Number(value);\n  if (!Number.isFinite(numericValue) || numericValue < 0 || numericValue > 100) return undefined;\n  if (numericValue <= 50) return 'fair';\n  if (numericValue <= 80) return 'good';\n  return 'excellent';\n}\n\nexport function resolveOverviewRovingIndex(\n  metrics: readonly OverviewMetric[],\n  focusedIndex: number\n): number {\n  const first = metrics.findIndex(metric => !metric.isInactive);\n  if (first < 0) return -1;\n  return metrics[focusedIndex] && !metrics[focusedIndex].isInactive\n    ? focusedIndex\n    : first;\n}\n\nexport function findNextOverviewMetricIndex(\n  metrics: readonly OverviewMetric[],\n  from: number,\n  step: -1 | 1\n): number {\n  for (let offset = 1; offset <= metrics.length; offset += 1) {\n    const next = (((from + step * offset) % metrics.length) + metrics.length) % metrics.length;\n    if (!metrics[next]?.isInactive) return next;\n  }\n  return -1;\n}\n","@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  container-type: inline-size;\n  -webkit-user-select: none;\n  user-select: none;\n  --ds-card-overview-metric-min: calc(var(--dimension-size-400) * 5);\n  --ds-card-overview-divider-width: var(--dimension-stroke-width-012);\n  --ds-card-overview-divider-color: var(--color-always-dark-border-tertiary);\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__surface {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  overflow-anchor: none;\n}\n\n.card-overview__clip {\n  height: 100%;\n  min-width: 0;\n  border-radius: inherit;\n  background: inherit;\n  overflow: hidden;\n}\n\n:host(.card-overview--scroll-collapsing) {\n  height: var(--ds-card-overview-expanded-height);\n  pointer-events: none;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__surface {\n  height: var(--ds-card-overview-visible-height);\n  pointer-events: auto;\n  will-change: height;\n}\n\n:host(.card-overview--scroll-collapsing) .card-overview__body {\n  transform: translateY(calc(-1 * var(--ds-card-overview-content-offset)));\n  will-change: transform;\n}\n\n.card-overview__layout {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.card-overview__summary {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 auto;\n  min-width: 0;\n  background: var(--color-always-dark-background);\n}\n\n.card-overview__header {\n  display: flex;\n  position: relative;\n  align-items: center;\n  gap: 0;\n  width: 100%;\n  height: var(--dimension-size-600);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n.card-overview__header::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block-end: 0;\n  height: var(--ds-card-overview-divider-width);\n  background: var(--ds-card-overview-divider-color);\n  pointer-events: none;\n}\n\n.card-overview__period {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: 0;\n  min-width: 0;\n  min-height: var(--ds-control-height);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.card-overview__period-current,\n.card-overview__period-comparison {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-overview__period-current {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n}\n\n.card-overview__period-fixed {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.card-overview__period-comparison {\n  flex: 0 0 auto;\n}\n\n.card-overview__filter {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.card-overview__body {\n  display: flex;\n  position: relative;\n  z-index: 0;\n  flex-direction: column;\n  min-width: 0;\n  transform: translateY(0);\n}\n\n.card-overview__metrics {\n  display: grid;\n  flex: 1 1 auto;\n  grid-template-columns: repeat(\n    var(--ds-card-overview-grid-columns, auto-fit),\n    minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)\n  );\n  align-content: stretch;\n  min-width: 0;\n  overflow: clip;\n}\n\n.card-overview__score,\n.card-overview__metric {\n  display: flex;\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-shadow:\n    var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),\n    0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);\n  box-sizing: border-box;\n}\n\n.card-overview__score-content,\n.card-overview__metric-action {\n  display: flex;\n  flex: 1 1 auto;\n  min-width: 0;\n  padding: var(--dimension-space-075);\n  border-radius: var(--dimension-radius-025);\n  box-sizing: border-box;\n}\n\n.card-overview__score-content {\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  background: var(--color-always-dark-interaction-active);\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__score-content--fair {\n  background: var(--color-safety-score-background-fair);\n  color: var(--color-safety-score-foreground-on-fair);\n}\n\n.card-overview__score-content--good {\n  background: var(--color-safety-score-background-good);\n  color: var(--color-safety-score-foreground-on-good);\n}\n\n.card-overview__score-content--excellent {\n  background: var(--color-safety-score-background-excellent);\n  color: var(--color-safety-score-foreground-on-excellent);\n}\n\n.card-overview__score-copy {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.card-overview__score-value,\n.card-overview__score-figure {\n  flex: 0 0 auto;\n  margin-block: calc(-1 * var(--dimension-space-150));\n}\n\n.card-overview__score-content--error {\n  align-items: center;\n  justify-content: center;\n  border: var(--ds-card-overview-divider-width) solid\n    var(--color-always-dark-border-tertiary);\n  background: transparent;\n  color: var(--color-always-dark-foreground-negative);\n  text-align: center;\n}\n\n.card-overview__metric-action {\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n}\n\n.card-overview__metric-action[role='button'] {\n  cursor: default;\n}\n\n.card-overview__metric-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.card-overview__metric-label {\n  min-width: 0;\n}\n\n.card-overview__metric-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n:host(.card-overview--stacked) .card-overview__metrics {\n  grid-template-columns: minmax(0, 1fr);\n}\n\n:host(.card-overview--compact) {\n  height: var(--dimension-size-600);\n  min-height: var(--dimension-size-600);\n}\n\n:host(.card-overview--compact) .card-overview__surface,\n:host(.card-overview--compact) .card-overview__clip,\n:host(.card-overview--compact) .card-overview__layout,\n:host(.card-overview--compact) .card-overview__summary {\n  width: 100%;\n  height: 100%;\n}\n\n:host(.card-overview--compact) .card-overview__header::after {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .card-overview__header::after {\n    background: var(--ds-forced-color-content);\n  }\n\n  .card-overview__score-content {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    background: var(--ds-forced-color-surface);\n    color: var(--ds-forced-color-content);\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\nimport type { TextColor, TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type {\n  CardOverviewLayout,\n  CardOverviewVariant,\n  OverviewMetric,\n  OverviewScore,\n} from './card-overview-types';\nimport {\n  findNextOverviewMetricIndex,\n  resolveCardOverviewCollapseGeometry,\n  resolveOverviewGridColumns,\n  resolveOverviewRovingIndex,\n  resolveSafetyScoreLevel,\n} from './card-overview-controller';\n\n/** Metric cells below this width drop a grid column rather than compress further. */\nconst DEFAULT_METRIC_MIN_WIDTH = 'var(--dimension-menu-width-xs)';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst LOADING_PLACEHOLDER_COUNT = 4;\n\n/** Maximum number of comparable measures the summary bar presents at once. */\nconst MAX_METRIC_COUNT = 7;\n\nconst TREND_COLORS: Record<MetricTrend['tone'], TextColor> = {\n  positive: 'var(--color-always-dark-foreground-positive)',\n  negative: 'var(--color-always-dark-foreground-negative)',\n  neutral: 'var(--color-always-dark-foreground-secondary)',\n};\n\nconst ALWAYS_DARK_PRIMARY: TextColor = 'var(--color-always-dark-foreground-primary)';\nconst ALWAYS_DARK_SECONDARY: TextColor = 'var(--color-always-dark-foreground-secondary)';\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Full summary card, or the condensed 48px summary bar. */\n  @Prop() variant: CardOverviewVariant = 'default';\n\n  /** Intrinsic responsive layout, or a page-owned single-column stack. */\n  @Prop() layout: CardOverviewLayout = 'auto';\n\n  /** Optional nonselectable safety score rendered as the first grid cell. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Fixed current date or range. Replaced by content in the `period` slot. */\n  @Prop() periodLabel: string = '';\n\n  /** Copy between the current period and comparison control, usually `vs.`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. Only the first seven are shown. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * uses this threshold while choosing an evenly distributed column count.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /**\n   * Page-controlled visual collapse from the full card (`0`) toward its 48px\n   * compact handoff height (`1`). The component preserves its expanded flow\n   * height, keeps the period bar stationary, and moves/clips the grid beneath\n   * it. The page still owns sticky positioning and the final compact handoff.\n   */\n  @Prop() scrollCollapseProgress: number = 0;\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n  @State() private expandedHeight: number = 0;\n  @State() private gridColumns: number | undefined;\n\n  private layoutEl?: HTMLElement;\n  private layoutResizeObserver: ResizeObserver | null = null;\n\n  componentDidLoad() {\n    this.observeLayout();\n  }\n\n  componentDidRender() {\n    // Re-bind after HMR when DidLoad's observer was dropped.\n    if (!this.layoutResizeObserver) this.observeLayout();\n    else this.updateLayoutGeometry();\n  }\n\n  disconnectedCallback() {\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = null;\n  }\n\n  private get visibleMetrics(): OverviewMetric[] {\n    return this.metrics.slice(0, MAX_METRIC_COUNT);\n  }\n\n  private get visibleCellCount(): number {\n    const metricCount =\n      this.isLoading && this.metrics.length === 0\n        ? LOADING_PLACEHOLDER_COUNT\n        : this.visibleMetrics.length;\n    return 1 + metricCount;\n  }\n\n  private get resolvedScrollCollapseProgress(): number {\n    if (this.variant === 'compact' || !Number.isFinite(this.scrollCollapseProgress)) return 0;\n    return Math.min(1, Math.max(0, this.scrollCollapseProgress));\n  }\n\n  private get scrollCollapseGeometry() {\n    const compactHeight = resolveCssLengthPx(TOKEN_DEFAULTS.size600, 48);\n    return resolveCardOverviewCollapseGeometry({\n      variant: this.variant,\n      progress: this.resolvedScrollCollapseProgress,\n      expandedHeight: this.expandedHeight,\n      compactHeight,\n    });\n  }\n\n  private observeLayout() {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds = layout.getBoundingClientRect();\n    this.updateLayoutGeometry(bounds.width, bounds.height);\n    if (typeof ResizeObserver === 'undefined') return;\n\n    this.layoutResizeObserver?.disconnect();\n    this.layoutResizeObserver = new ResizeObserver(entries => {\n      const rect = entries[0]?.contentRect;\n      if (rect) this.updateLayoutGeometry(rect.width, rect.height);\n    });\n    this.layoutResizeObserver.observe(layout);\n  }\n\n  private updateLayoutGeometry(width?: number, height?: number) {\n    const layout = this.layoutEl;\n    if (!layout) return;\n\n    const bounds = width === undefined || height === undefined ? layout.getBoundingClientRect() : null;\n    const resolvedWidth = width ?? bounds?.width ?? 0;\n    const resolvedHeight = height ?? bounds?.height ?? 0;\n\n    if (resolvedHeight > 0 && Math.abs(resolvedHeight - this.expandedHeight) >= 0.5) {\n      this.expandedHeight = resolvedHeight;\n    }\n\n    const columns = resolveOverviewGridColumns({\n      cellCount: this.visibleCellCount,\n      availableWidth: resolvedWidth,\n      minCellWidth: resolveCssLengthPx(this.metricMinWidth, TOKEN_DEFAULTS.menuWidthXs),\n    });\n    if (columns !== this.gridColumns) this.gridColumns = columns;\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    return resolveOverviewRovingIndex(this.visibleMetrics, this.focusedMetricIndex);\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const metrics = this.visibleMetrics;\n    const next = findNextOverviewMetricIndex(metrics, from, step < 0 ? -1 : 1);\n    if (next < 0) return;\n\n    this.focusedMetricIndex = next;\n    const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric-action');\n    cells[next]?.focus();\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed so the base and shimmer follow the card's\n   * permanently dark surface in both themes.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(\n    trend: MetricTrend | undefined,\n    variant: TextVariant,\n    emphasis = false,\n    color?: TextColor\n  ) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          'ds-control-label-box': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        emphasis={emphasis}\n        color={color ?? TREND_COLORS[trend.tone]}\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score\" part=\"score\">\n          <div class=\"card-overview__score-content\">\n            <div class=\"card-overview__score-copy\">\n              {this.bar('text-body-small', '64px', 'card-overview__score-label')}\n              {this.bar('text-body-medium', '28px')}\n            </div>\n            <div class=\"card-overview__score-figure\">\n              {this.bar('text-display-medium', '56px')}\n            </div>\n          </div>\n        </div>\n      );\n    }\n\n    const unavailableMessage =\n      this.scoreErrorMessage || (!this.score ? 'Score unavailable' : undefined);\n    if (unavailableMessage) {\n      return (\n        /* eslint-disable-next-line local/prefer-direct-ds-text -- The score track owns the grid divider and 8px outer inset. */\n        <div class=\"card-overview__score\" part=\"score\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-content card-overview__score-content--error\"\n            variant=\"text-body-medium\"\n            color=\"inherit\"\n            role=\"alert\"\n          >\n            {unavailableMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n    const level = score.level ?? resolveSafetyScoreLevel(score.value);\n\n    return (\n      <div class=\"card-overview__score\" part=\"score\">\n        <div\n          class={{\n            'card-overview__score-content': true,\n            [`card-overview__score-content--${level}`]: Boolean(level),\n          }}\n        >\n          <div class=\"card-overview__score-copy\">\n            <ds-text\n              as=\"span\"\n              class=\"card-overview__score-label ds-control-label-box\"\n              variant=\"text-body-small\"\n              color=\"inherit\"\n            >\n              {score.label}\n            </ds-text>\n            {this.renderTrend(score.trend, 'text-body-medium', false, 'inherit')}\n          </div>\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-value ds-control-label-box\"\n            variant=\"text-display-medium\"\n            emphasis\n            color=\"inherit\"\n            fontFeature=\"tabular-nums\"\n          >\n            {score.value}\n          </ds-text>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text\n        as=\"span\"\n        class=\"card-overview__metric-label ds-control-label-box\"\n        variant=\"text-body-small\"\n        color={ALWAYS_DARK_SECONDARY}\n      >\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div class=\"card-overview__metric\" part=\"metric\">\n        <div\n          class={{\n            'card-overview__metric-action': true,\n            'card-overview__metric-action--inactive': !selectable,\n            // Selection targets get the shared wash; press scaling is not used here\n            // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n            'ds-interaction-fill': selectable,\n            'ds-interaction-fill--on-always-dark': selectable,\n            'ds-focus-ring-inset': selectable,\n          }}\n          role={selectable ? 'button' : undefined}\n          tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n          onClick={() => this.selectMetric(metric, index)}\n          onKeyDown={event => this.handleMetricKeyDown(event, index)}\n          onFocusin={() => {\n            if (selectable) this.focusedMetricIndex = index;\n          }}\n        >\n          <div class=\"ds-interaction-fill__content card-overview__metric-content\">\n            {metric.labelTooltip ? (\n              <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">\n                {label}\n              </ds-tooltip>\n            ) : (\n              label\n            )}\n            <div class=\"card-overview__metric-figure\">\n              <ds-text\n                as=\"span\"\n                class=\"card-overview__metric-value ds-control-label-box\"\n                variant=\"text-body-medium\"\n                color={ALWAYS_DARK_PRIMARY}\n                fontFeature=\"tabular-nums\"\n              >\n                {metric.value}\n              </ds-text>\n              {this.renderTrend(metric.trend, 'text-body-medium')}\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading && this.metrics.length === 0) {\n      return [\n        this.renderScore(),\n        ...Array.from({ length: LOADING_PLACEHOLDER_COUNT }, (_, index) => (\n          <div class=\"card-overview__metric\" key={`loading-${index}`}>\n            <div class=\"card-overview__metric-action card-overview__metric-action--inactive\">\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          </div>\n        )),\n      ];\n    }\n\n    return [\n      this.renderScore(),\n      ...this.visibleMetrics.map((metric, index) => this.renderMetric(metric, index)),\n    ];\n  }\n\n  render() {\n    const compact = this.variant === 'compact';\n    const collapse = this.scrollCollapseGeometry;\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--compact': compact,\n          'card-overview--stacked': !compact && this.layout === 'stacked',\n          'card-overview--scroll-collapsing': collapse.active,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{\n          '--ds-card-overview-metric-min': this.metricMinWidth,\n          '--ds-card-overview-grid-columns': this.gridColumns\n            ? String(this.gridColumns)\n            : undefined,\n          '--ds-card-overview-expanded-height': collapse.active\n            ? `${collapse.expandedHeight}px`\n            : undefined,\n          '--ds-card-overview-visible-height': collapse.active\n            ? `${collapse.visibleHeight}px`\n            : undefined,\n          '--ds-card-overview-content-offset': collapse.active\n            ? `${collapse.offset}px`\n            : undefined,\n        }}\n      >\n        <div\n          class={{\n            'card-overview__surface': true,\n            // Split shadow and inset highlight, so the opaque surface cannot cover\n            // the highlight the way a combined elevation shadow would.\n            'ds-control-elevation': true,\n            'ds-control-elevation--sm': !compact,\n            'ds-control-elevation--floating': compact,\n          }}\n        >\n          <div class=\"card-overview__clip\">\n            <div\n              ref={element => {\n                this.layoutEl = (element as HTMLElement) ?? undefined;\n              }}\n              class={{\n                'card-overview__layout': true,\n              }}\n            >\n              <div class=\"card-overview__summary\">\n                <div class=\"card-overview__header ds-control--md\">\n                  {this.isLoading ? (\n                    <div class=\"card-overview__period\">\n                      {this.bar('text-body-medium', '184px')}\n                      {this.bar('text-body-medium', '248px')}\n                    </div>\n                  ) : (\n                    <div class=\"card-overview__period\">\n                      <div class=\"card-overview__period-current\">\n                        <slot name=\"period\">\n                          {this.periodLabel && (\n                            /* eslint-disable-next-line local/prefer-direct-ds-text -- Fixed copy uses the same structural frame and label inset as a slotted Select. */\n                            <div class=\"card-overview__period-fixed ds-control-frame\">\n                              <ds-text\n                                as=\"span\"\n                                class=\"ds-control-label-box\"\n                                variant=\"text-body-medium\"\n                                emphasis\n                                color={ALWAYS_DARK_PRIMARY}\n                              >\n                                {this.periodLabel}\n                              </ds-text>\n                            </div>\n                          )}\n                        </slot>\n                      </div>\n                      {this.comparisonLabel && (\n                        <ds-text\n                          as=\"span\"\n                          class=\"card-overview__period-comparison ds-control-label-box\"\n                          variant=\"text-body-medium\"\n                          color={ALWAYS_DARK_SECONDARY}\n                        >\n                          {this.comparisonLabel}\n                        </ds-text>\n                      )}\n                    </div>\n                  )}\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=\"always-dark\"\n                      />\n                    ) : (\n                      <slot name=\"filter\" />\n                    )}\n                  </div>\n                </div>\n              </div>\n\n              {!compact && (\n                <div class=\"card-overview__body\">\n                  <div class=\"card-overview__metrics\" part=\"metrics\">\n                    {this.renderMetrics()}\n                  </div>\n\n                  <slot name=\"footer\" />\n                </div>\n              )}\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as d,h as t,a as i,t as 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};
+import{p as s,H as e,c as d,h as t,a,t as i}from"./index.js";import{d as r}from"./p-IYy-jODg.js";import{d as c}from"./p-BFfHIu6y.js";import{d as n}from"./p-BR_oMaas.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as m}from"./p-Bb4f5SuF.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 f="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(a,{key:"350f5c23f14cefc61416a405654b458592330a13",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:"4519408151de57147a8e2591a9ad7a6da0eed7da",class:"card-setting__header ds-chrome-row ds-chrome-space--md"},t("ds-text",{key:"ecda5a9fd573a6e2bd432fb6b144fa220cffceba",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading),t("div",{key:"ec2fc8d5dd55f8a72418a1097c9eebe3bb60da93",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:"d77bf8480f6818e8f8a8d3f7b2b51dfd4f57a4a6",class:"card-setting__body"},t("slot",{key:"e8f442d4d483f27dc87265d2a38e885a025b7e98"})))}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 p(){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(i(s))){customElements.define(i(s),u)}break;case"ds-badge":if(!customElements.get(i(s))){r()}break;case"ds-button-filled":if(!customElements.get(i(s))){c()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){n()}break;case"ds-icon":if(!customElements.get(i(s))){o()}break;case"ds-loader":if(!customElements.get(i(s))){l()}break;case"ds-text":if(!customElements.get(i(s))){m()}break}}))}p();const v=u;const k=p;export{v as DsCardSetting,k as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","editLabel","cancelLabel","saveLabel","emitAction","action","originalEvent","dsAction","emit","render","h","Host","key","class","style","variant","emphasis","color","as","heading","type","icon","onDsClick","event","detail","background","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  flex: 0 0 auto;\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header ds-chrome-row ds-chrome-space--md\">\n          <ds-text\n            class=\"card-setting__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-setting__actions\">\n          {!editing ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAction('edit', event.detail)\n              }\n            />\n          ) : (\n            [\n              <ds-button-unfilled\n                key=\"cancel\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('cancel', event.detail)\n                }\n              />,\n              <ds-button-filled\n                key=\"save\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('save', event.detail)\n                }\n              />,\n            ]\n          )}\n          </div>\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAiB,IAAM,szFCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAqD,CACzDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,6EAcUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MACVF,KAAAG,UAAoB,OACpBH,KAAAI,YAAsB,SACtBJ,KAAAK,UAAoB,MA+E7B,CA1ES,UAAAC,CAAWC,EAA2BC,GAC5CR,KAAKS,SAASC,KAAK,CAAEH,SAAQC,iB,CAG/B,MAAAG,GACE,MAAMT,EAAUF,KAAKE,QAErB,OACEU,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBb,GAE3Bc,MAAO,CACL,wBAAyB3B,EAAgBW,KAAKC,WAC9C,6BAA8BR,EAAiBO,KAAKC,aAGtDW,EAAA,UAAAE,IAAA,2CAAQC,MAAM,0DACZH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,SAAQ,KACRC,MAAOjB,EAAUR,EAA0B,UAC3C0B,GAAG,MAEFpB,KAAKqB,SAERT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTb,EACAU,EAAA,sBACEK,QAAQ,OACRK,KAAK,SACLC,KAAK,SAAQ,aACDvB,KAAKG,UACjBqB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,UAEhC,CAGAd,EAAA,sBACEE,IAAI,SACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLI,WAAW,OAAM,aACL3B,KAAKI,YACjBoB,UAAYC,GACVzB,KAAKM,WAAW,SAAUmB,EAAMC,UAGpCd,EAAA,oBACEE,IAAI,OACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLK,OAAO,QACPC,SAAS,QAAO,aACJ7B,KAAKK,UACjBmB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,aAOxCd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","editLabel","cancelLabel","saveLabel","emitAction","action","originalEvent","dsAction","emit","render","h","Host","key","class","style","variant","emphasis","color","as","heading","type","icon","onDsClick","event","detail","background","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  flex: 0 0 auto;\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header ds-chrome-row ds-chrome-space--md\">\n          <ds-text\n            class=\"card-setting__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-setting__actions\">\n          {!editing ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAction('edit', event.detail)\n              }\n            />\n          ) : (\n            [\n              <ds-button-unfilled\n                key=\"cancel\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('cancel', event.detail)\n                }\n              />,\n              <ds-button-filled\n                key=\"save\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('save', event.detail)\n                }\n              />,\n            ]\n          )}\n          </div>\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qRAAA,MAAMA,EAAiB,IAAM,szFCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAqD,CACzDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,6EAcUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MACVF,KAAAG,UAAoB,OACpBH,KAAAI,YAAsB,SACtBJ,KAAAK,UAAoB,MA+E7B,CA1ES,UAAAC,CAAWC,EAA2BC,GAC5CR,KAAKS,SAASC,KAAK,CAAEH,SAAQC,iB,CAG/B,MAAAG,GACE,MAAMT,EAAUF,KAAKE,QAErB,OACEU,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBb,GAE3Bc,MAAO,CACL,wBAAyB3B,EAAgBW,KAAKC,WAC9C,6BAA8BR,EAAiBO,KAAKC,aAGtDW,EAAA,UAAAE,IAAA,2CAAQC,MAAM,0DACZH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,SAAQ,KACRC,MAAOjB,EAAUR,EAA0B,UAC3C0B,GAAG,MAEFpB,KAAKqB,SAERT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTb,EACAU,EAAA,sBACEK,QAAQ,OACRK,KAAK,SACLC,KAAK,SAAQ,aACDvB,KAAKG,UACjBqB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,UAEhC,CAGAd,EAAA,sBACEE,IAAI,SACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLI,WAAW,OAAM,aACL3B,KAAKI,YACjBoB,UAAYC,GACVzB,KAAKM,WAAW,SAAUmB,EAAMC,UAGpCd,EAAA,oBACEE,IAAI,OACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLK,OAAO,QACPC,SAAS,QAAO,aACJ7B,KAAKK,UACjBmB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,aAOxCd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-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};
+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 d}from"./p-BybqPD8K.js";import{f as l}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 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 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 d=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const l=h().domain([0,n||1]).range([s,0]).nice();const b=l.ticks(4);return r("g",null,b.map((s=>r("g",{key:`grid-${s}`,transform:`translate(0, ${l(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=d.bandwidth();const i=d(t.label)??0;const o=l(t.value);const h=s-o;const b=o+h/2;const g=h/2;const f=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:f}),r("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:i,y:b,width:n,height:g,fill:f}),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"?l(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 d=this.variant==="percentage"?100:Math.max(0,...i);const l=o().domain(this.categories).range([0,t]).padding(.35);const b=h().domain([0,d||1]).range([s,0]).nice();const f=this.variant==="percentage"?g:b.ticks(4);return r("g",null,f.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=l.bandwidth();const h=l(t)??0;const d=n[e];const g=i[e];const f=d.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=d[s];const a=this.variant==="percentage"?g?e/g*100:0:e;const n=u;const i=u+a;u=i;const l=b(i);const m=b(n);const _=Math.max(0,m-l);if(!_)return null;const p=t.color??c(s);const y=this.variant==="stacked"&&s===f;const x=l+_/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:l,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}=d();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 l=h?this.data.map((t=>`${t.label}: ${t.value}`)).join(", "):this.stackedAccessibleLabel();return r(e,{key:"115c9fc9850860c4d99819833f84eea56f06879d",class:{"chart-bar":true,[`chart-bar--${this.variant}`]:true}},r("svg",{key:"52973e4b9adb252708b17ffbed24304de32fd86b",class:"chart-bar__svg",ref:t=>{this.svgEl=t??null},width:t,height:s,role:"img","aria-label":l},r("g",{key:"18058e256191ae51060d3486b1c55490c588bcdd",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),f)}break}}))}u();const m=f;const _=u;export{m as DsChartBar,_ as defineCustomElement};
 //# sourceMappingURL=ds-chart-bar.js.map

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

@@ -1,2 +1,2 @@
-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 a}from"./p-w2kKeG_h.js";import{d as c}from"./p-RT1mts9U.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 T(t){return t.innerRadius}function S(t){return t.outerRadius}function A(t){return t.startAngle}function R(t){return t.endAngle}function B(t){return t&&t.padAngle}function H(t,e,n,s,i,o,r,a){var c=n-t,h=s-e,u=r-i,l=a-o,d=l*c-u*h;if(d*d<w)return;d=(u*(e-o)-l*(t-i))/d;return[t+d*c,e+d*h]}function P(t,e,n,s,i,o,r){var a=t-n,c=e-s,h=(r?o:-o)/M(a*a+c*c),u=h*c,l=-h*a,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)/_,T=(-k*m+x*z)/_,S=C-y,A=$-g,R=j-y,B=T-g;if(S*S+A*A>R*R+B*B)C=j,$=T;return{cx:C,cy:$,x01:-u,y01:-l,x11:C*(i/w-1),y11:$*(i/w-1)}}function E(){var t=T,e=S,n=f(0),s=null,i=A,o=R,r=B,a=null,c=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(!a)a=h=c();if(d<l)u=d,d=l,l=u;if(!(d>w))a.moveTo(0,0);else if(v>C-w){a.moveTo(d*m(f),d*_(f));a.arc(0,0,d,f,p,!b);if(l>w){a.moveTo(l*m(p),l*_(p));a.arc(0,0,l,p,f,b)}}else{var T=f,S=p,A=f,R=p,B=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,K;if(L>w){var V=j(L/l*_(F)),Y=j(L/d*_(F));if((B-=V*2)>w)V*=b?1:-1,A+=V,R-=V;else B=0,A=R=(f+p)/2;if((E-=Y*2)>w)Y*=b?1:-1,T+=Y,S-=Y;else E=0,T=S=(f+p)/2}var q=d*m(T),I=d*_(T),J=l*m(R),U=l*_(R);if(D>w){var W=d*m(S),X=d*_(S),Q=l*m(A),Z=l*_(A),tt;if(v<k){if(tt=H(q,I,Q,Z,W,X,J,U)){var et=q-tt[0],nt=I-tt[1],st=W-tt[0],it=X-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))a.moveTo(q,I);else if(O>w){G=P(Q,Z,q,I,d,O,b);K=P(W,X,J,U,d,O,b);a.moveTo(G.cx+G.x01,G.cy+G.y01);if(O<D)a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(K.y01,K.x01),!b);else{a.arc(G.cx,G.cy,O,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,d,g(G.cy+G.y11,G.cx+G.x11),g(K.cy+K.y11,K.cx+K.x11),!b);a.arc(K.cx,K.cy,O,g(K.y11,K.x11),g(K.y01,K.x01),!b)}}else a.moveTo(q,I),a.arc(0,0,d,T,S,!b);if(!(l>w)||!(B>w))a.lineTo(J,U);else if(N>w){G=P(J,U,W,X,l,-N,b);K=P(q,I,Q,Z,l,-N,b);a.lineTo(G.cx+G.x01,G.cy+G.y01);if(N<D)a.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(K.y01,K.x01),!b);else{a.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(G.y11,G.x11),!b);a.arc(0,0,l,g(G.cy+G.y11,G.cx+G.x11),g(K.cy+K.y11,K.cx+K.x11),b);a.arc(K.cx,K.cy,N,g(K.y11,K.x11),g(K.y01,K.x01),!b)}}else a.arc(0,0,l,R,A,b)}a.closePath();if(h)return a=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?(a=t==null?null:t,h):a};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 a,c=(r=p(r)).length,h,u,l=0,d=new Array(c),f=new Array(c),v=+s.apply(this,arguments),y=Math.min(C,Math.max(-C,i.apply(this,arguments)-v)),g,m=Math.min(Math.abs(y)/c,o.apply(this,arguments)),b=m*(y<0?-1:1),x;for(a=0;a<c;++a){if((x=f[d[a]=a]=+t(r[a],a,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(a=0,u=l?(y-c*b)/l:0;a<c;++a,v=g){h=d[a],x=f[h],g=v+(x>0?x*u:0)+b,f[h]={data:r[h],index:a,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 K=128;const V=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=K;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,K)}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 a=o.getBoundingClientRect();this.tooltipX=a.left-r.left+e*(a.width/s);this.tooltipY=a.top-r.top+n*(a.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 a=this.centerCaption??"";if(this.captionTextEl&&a){const t=v(this.captionTextEl,a,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 a=e-n;const c=this.data.reduce(((t,e)=>t+e.value),0);const d=c<=0;const f=this.activeLabel??this.hoveredLabel;const p=E().innerRadius(a).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(a).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(c,this.locale);const M=this.centerCaption??"";const w=this.isFillMode;return s(i,{key:"34932019fbc0ddbb3c696831c66e8c45eb71847a",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("div",{key:"9e69474dfca77a5ea83bb3628abdc8d6110b05fc",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("svg",{key:"5bf722efba962b1237beae1c416da5ab2114882c",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:"0648f10a26120b2b97a61355b39d2c09aa007002",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 a=f!=null&&o.label!==f;const[c,h]=p.centroid(n);return s("path",{key:o.label,class:{"chart-donut__slice--dimmed":a},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+c,e+h,t);this.handleHover(o)},onBlur:()=>this.handleHover(null)})}))),s("text",{key:"a9fc55be17efe297ff286bbd1f23813ce5091ff7",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:"9c6cba0b3151fe9ba47a7a5b62b31a4a81352401",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:"301537599f870238e7a033a8e5b1e296ac11f422",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 Y(){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),V)}break;case"ds-text":if(!customElements.get(o(t))){a()}break;case"ds-tooltip-data-viz":if(!customElements.get(o(t))){c()}break}}))}Y();const q=V;const I=Y;export{q 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-Bb4f5SuF.js";import{d as a}from"./p-CbjFUpOj.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 j=2*k;function C(t){return t>1?0:t<-1?k:Math.acos(t)}function $(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 F(t){return t&&t.padAngle}function H(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 P(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)),j=(k*x-m*z)/_,C=(-k*m-x*z)/_,$=(k*x+m*z)/_,S=(-k*m+x*z)/_,T=j-y,A=C-g,B=$-y,F=S-g;if(T*T+A*A>B*B+F*F)j=$,C=S;return{cx:j,cy:C,x01:-u,y01:-l,x11:j*(i/w-1),y11:C*(i/w-1)}}function R(){var t=S,e=T,n=f(0),s=null,i=A,o=B,r=F,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>j-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,F=v,R=v,E=r.apply(this,arguments)/2,L=E>w&&(s?+s.apply(this,arguments):M(l*l+d*d)),O=x(y(d-l)/2,+n.apply(this,arguments)),D=O,N=O,G,V;if(L>w){var Y=$(L/l*_(E)),q=$(L/d*_(E));if((F-=Y*2)>w)Y*=b?1:-1,A+=Y,B-=Y;else F=0,A=B=(f+p)/2;if((R-=q*2)>w)q*=b?1:-1,S+=q,T-=q;else R=0,S=T=(f+p)/2}var I=d*m(S),J=d*_(S),K=l*m(B),U=l*_(B);if(O>w){var W=d*m(T),X=d*_(T),Q=l*m(A),Z=l*_(A),tt;if(v<k){if(tt=H(I,J,Q,Z,W,X,K,U)){var et=I-tt[0],nt=J-tt[1],st=W-tt[0],it=X-tt[1],ot=1/_(C((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]);D=x(O,(l-rt)/(ot-1));N=x(O,(d-rt)/(ot+1))}else{D=N=0}}}if(!(R>w))c.moveTo(I,J);else if(N>w){G=P(Q,Z,I,J,d,N,b);V=P(W,X,K,U,d,N,b);c.moveTo(G.cx+G.x01,G.cy+G.y01);if(N<O)c.arc(G.cx,G.cy,N,g(G.y01,G.x01),g(V.y01,V.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,d,g(G.cy+G.y11,G.cx+G.x11),g(V.cy+V.y11,V.cx+V.x11),!b);c.arc(V.cx,V.cy,N,g(V.y11,V.x11),g(V.y01,V.x01),!b)}}else c.moveTo(I,J),c.arc(0,0,d,S,T,!b);if(!(l>w)||!(F>w))c.lineTo(K,U);else if(D>w){G=P(K,U,W,X,l,-D,b);V=P(I,J,Q,Z,l,-D,b);c.lineTo(G.cx+G.x01,G.cy+G.y01);if(D<O)c.arc(G.cx,G.cy,D,g(G.y01,G.x01),g(V.y01,V.x01),!b);else{c.arc(G.cx,G.cy,D,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(V.cy+V.y11,V.cx+V.x11),b);c.arc(V.cx,V.cy,D,g(V.y11,V.x11),g(V.y01,V.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 E(t,e){return e<t?-1:e>t?1:e>=t?0:NaN}function L(t){return t}function O(){var t=L,e=E,n=null,s=f(0),i=f(j),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(j,Math.max(-j,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 D=()=>`@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 N=0;const G=.82;const V=128;const Y=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=V;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,V)}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=R().innerRadius(c).outerRadius(e).cornerRadius(o).padAngle(this.gap*Math.PI/180);const v=d?[]:O().value((t=>t.value)).sort(null)(this.data);const y=d?R().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-(N+m)/2:e;const x=e+(g+N)/2;const _=this.centerValue??l(a,this.locale);const M=this.centerCaption??"";const w=this.isFillMode;return s(i,{key:"557aaf4b8b7fa159451f380234ad4f10acc45c3d",class:{"chart-donut":true,"chart-donut--fill":w,"chart-donut--fixed":!w},style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("div",{key:"26849d3d6696793fbe39d9eeff11f66c00779566",class:"chart-donut__wrapper",style:!w?{width:`${t}px`,height:`${t}px`}:undefined},s("svg",{key:"b0f7dda945de41ceb91decb9da502c3df90d0d3f",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:"aee8865bbadb16d9856cbce1dcd327dd2cb95373",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:"9b54c53fa6892f756e2ef6ba62f1f3c606dc4f26",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:"61a160f7df8c517d971997718b886b30d0375a8c",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:"fb48a072fe53da4f222cb6ced55997b21c5c8c2c",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 D()}},[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(o(t))){customElements.define(o(t),Y)}break;case"ds-text":if(!customElements.get(o(t))){c()}break;case"ds-tooltip-data-viz":if(!customElements.get(o(t))){a()}break}}))}q();const I=Y;const J=q;export{I as DsChartDonut,J as defineCustomElement};
 //# sourceMappingURL=ds-chart-donut.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as t,h as s,a as r,t as i}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-w2kKeG_h.js";import{r as d}from"./p-C-vRkDyn.js";import{f as a}from"./p-DXewjzkM.js";import{f as l}from"./p-BBpASejH.js";const h=()=>`.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--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-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--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-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return s(r,{key:"56768db4666c6250db91d3e21bbba23387335982",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},s("ul",{key:"a2419dd08afef5debc882dc83541458851ab9354",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,r)=>{const i=n!=null&&t.label!==n;const c=d(t.href);const h=c?"a":"div";const g=t.value!=null?a(e?t.value/e:0,this.percentageDecimals,this.locale):"";return s("li",{class:"chart-legend__list-item",key:t.label},s(h,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!c,"chart-legend__item--dimmed":i,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!c,"ds-focus-ring-inset":!!c},href:c,onClick:c?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},s("span",{class:"chart-legend__swatch-box"},s("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(r)}})),s("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&s("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},l(t.value,this.locale)),t.value!=null&&this.showPercentage&&s("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:g},g)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return h()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-text":if(!customElements.get(i(e))){c()}break}}))}f();const v=g;const u=f;export{v as DsChartLegend,u as defineCustomElement};
+import{p as e,H as n,c as t,h as s,a as r,t as i}from"./index.js";import{c as o}from"./p-CMv_7vFs.js";import{d as c}from"./p-Bb4f5SuF.js";import{r as d}from"./p-C-vRkDyn.js";import{f as a}from"./p-DXewjzkM.js";import{f as l}from"./p-BBpASejH.js";const h=()=>`.ds-control--lg.sc-ds-chart-legend,.ds-control--lg.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend,.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend,.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-chart-legend-h,.ds-control--lg.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-chart-legend-h,.ds-control--md.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-chart-legend-h,.ds-control--sm.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-chart-legend-h,.ds-control--xs.sc-ds-chart-legend{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-chart-legend-h,.ds-interaction-fill.sc-ds-chart-legend{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before,.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-chart-legend-h::before,.ds-interaction-fill.sc-ds-chart-legend::before{z-index:1}.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chart-legend-h,.ds-interaction-fill--bordered.sc-ds-chart-legend{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chart-legend-h,.ds-interaction-fill--selected.sc-ds-chart-legend{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-chart-legend-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chart-legend:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chart-legend-h>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill.sc-ds-chart-legend>.ds-interaction-fill__content.sc-ds-chart-legend,.ds-interaction-fill__content.sc-ds-chart-legend{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-chart-legend-h,.ds-interaction-fill--on-faint.sc-ds-chart-legend{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-chart-legend-h,.ds-interaction-fill--on-medium.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chart-legend-h,.ds-interaction-fill--on-bold.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chart-legend-h,.ds-interaction-fill--on-strong.sc-ds-chart-legend{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-chart-legend-h,.ds-interaction-fill--on-translucent.sc-ds-chart-legend{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-chart-legend-h,.ds-interaction-fill--on-inverted.sc-ds-chart-legend{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-chart-legend-h,.ds-interaction-fill--on-media.sc-ds-chart-legend{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chart-legend-h,.ds-interaction-fill--on-always-dark.sc-ds-chart-legend{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chart-legend-h,.ds-interaction-fill--on-navigation.sc-ds-chart-legend{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-chart-legend-h::after,.ds-interaction-fill.sc-ds-chart-legend::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-chart-legend-h::before,.ds-interaction-fill--selected.sc-ds-chart-legend::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-chart-legend-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-chart-legend:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--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-legend-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chart-legend-h,.ds-focus-ring.sc-ds-chart-legend,.ds-focus-ring-inset.sc-ds-chart-legend-h,.ds-focus-ring-inset.sc-ds-chart-legend{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring.sc-ds-chart-legend:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-chart-legend{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chart-legend-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-chart-legend:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chart-legend::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-chart-legend-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-chart-legend:root,.sc-ds-chart-legend-h,.ds-forced-colors-scope.sc-ds-chart-legend{--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-legend-h{display:block;font-family:var(--typography-font-family);user-select:none}.chart-legend__list.sc-ds-chart-legend{margin:0;padding:0;list-style:none}.chart-legend__list-item.sc-ds-chart-legend{display:contents}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:grid;grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600);column-gap:var(--dimension-space-075);row-gap:var(--dimension-space-050)}.chart-legend--vertical.chart-legend--show-percentage.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{grid-template-columns:auto minmax(0, 1fr) var(--dimension-size-600) var(--dimension-size-800)}.chart-legend--vertical.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__list.sc-ds-chart-legend{display:flex;flex-wrap:wrap;gap:var(--dimension-space-200)}.chart-legend--horizontal.sc-ds-chart-legend-h .chart-legend__item.sc-ds-chart-legend{display:flex;gap:var(--dimension-space-100)}.chart-legend__item.sc-ds-chart-legend{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));align-items:center;padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border-radius:var(--ds-control-radius, var(--dimension-radius-025));text-decoration:none;color:inherit;transition:opacity var(--effect-motion-short-2)}.chart-legend__item--dimmed.sc-ds-chart-legend{opacity:var(--effect-opacity-medium)}@media (prefers-reduced-motion: reduce){.chart-legend__item.sc-ds-chart-legend{transition:none}}.chart-legend__item--interactive.sc-ds-chart-legend{cursor:pointer}.chart-legend__item.sc-ds-chart-legend>*.sc-ds-chart-legend{position:relative;z-index:2}.chart-legend__swatch-box.sc-ds-chart-legend{width:var(--dimension-size-250);height:var(--dimension-size-250);display:flex;align-items:center;justify-content:center;flex-shrink:0}.chart-legend__swatch.sc-ds-chart-legend{width:var(--dimension-space-150);height:var(--dimension-space-150);border-radius:var(--dimension-radius-025);flex-shrink:0}.chart-legend__label.sc-ds-chart-legend{min-width:0}.chart-legend__percentage.sc-ds-chart-legend{width:100%;min-width:0;text-align:right}.chart-legend__value.sc-ds-chart-legend{width:100%;text-align:right;min-width:0}@media (forced-colors: active){.chart-legend__swatch.sc-ds-chart-legend{forced-color-adjust:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content)}}`;const g=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsItemHover=t(this,"dsItemHover");this.dsItemClick=t(this,"dsItemClick");this.items=[];this.direction="vertical";this.showPercentage=true;this.percentageDecimals=1;this.highlightOnHover=true;this.activeLabel=null;this.hoveredLabel=null;this.handleClick=(e,n)=>{this.dsItemClick.emit({item:e,originalEvent:n})}}handleHighlightOnHoverChange(e){if(!e)this.hoveredLabel=null}handleHover(e){this.hoveredLabel=e?.label??null;this.dsItemHover.emit(e)}render(){const e=this.items.reduce(((e,n)=>e+(n.value??0)),0);const n=this.activeLabel??(this.highlightOnHover?this.hoveredLabel:null);return s(r,{key:"642fbb1af61d424497d6c002f340183fa81417ce",class:{"chart-legend":true,[`chart-legend--${this.direction}`]:true,"chart-legend--show-percentage":this.showPercentage}},s("ul",{key:"4aa9d192532379a7a02dfb6055824f173ee1bcfb",class:"chart-legend__list",onMouseLeave:this.highlightOnHover?()=>this.handleHover(null):undefined},this.items.map(((t,r)=>{const i=n!=null&&t.label!==n;const c=d(t.href);const h=c?"a":"div";const g=t.value!=null?a(e?t.value/e:0,this.percentageDecimals,this.locale):"";return s("li",{class:"chart-legend__list-item",key:t.label},s(h,{class:{"chart-legend__item":true,"chart-legend__item--interactive":!!c,"chart-legend__item--dimmed":i,"ds-control--md":true,"ds-interaction-fill":this.highlightOnHover||!!c,"ds-focus-ring-inset":!!c},href:c,onClick:c?e=>this.handleClick(t,e):undefined,onMouseEnter:this.highlightOnHover?()=>this.handleHover(t):undefined,onFocus:this.highlightOnHover?()=>this.handleHover(t):undefined,onBlur:this.highlightOnHover?()=>this.handleHover(null):undefined},s("span",{class:"chart-legend__swatch-box"},s("span",{class:"chart-legend__swatch",style:{backgroundColor:t.color??o(r)}})),s("ds-text",{class:"chart-legend__label",as:"span",variant:"text-body-medium",color:"secondary",lineTruncation:1,title:t.label},t.label),t.value!=null&&s("ds-text",{class:"chart-legend__value",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:String(t.value)},l(t.value,this.locale)),t.value!=null&&this.showPercentage&&s("ds-text",{class:"chart-legend__percentage",as:"span",variant:"text-body-medium",color:"primary",lineTruncation:1,align:"right",fontFeature:"tabular-nums",title:g},g)))}))))}static get watchers(){return{highlightOnHover:[{handleHighlightOnHoverChange:0}]}}static get style(){return h()}},[2,"ds-chart-legend",{locale:[1],items:[16],direction:[1],showPercentage:[4,"show-percentage"],percentageDecimals:[2,"percentage-decimals"],highlightOnHover:[4,"highlight-on-hover"],activeLabel:[1,"active-label"],hoveredLabel:[32]},undefined,{highlightOnHover:[{handleHighlightOnHoverChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-chart-legend","ds-text"];e.forEach((e=>{switch(e){case"ds-chart-legend":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-text":if(!customElements.get(i(e))){c()}break}}))}f();const v=g;const u=f;export{v as DsChartLegend,u as defineCustomElement};
 //# sourceMappingURL=ds-chart-legend.js.map

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

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as i,a as n,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{C as o,r as a,m as c,p as l,l as h}from"./p-BybqPD8K.js";import{w as d,c as f,a as u}from"./p-CrCGIx8s.js";function p(t){this._context=t}p.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,e){t=+t,e=+e;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,e):this._context.moveTo(t,e);break;case 1:this._point=2;default:this._context.lineTo(t,e);break}}};function g(t){return new p(t)}function m(t){return t[0]}function y(t){return t[1]}function b(t,e){var i=f(true),n=null,s=g,r=null,o=d(a);t=typeof t==="function"?t:t===undefined?m:f(t);e=typeof e==="function"?e:e===undefined?y:f(e);function a(a){var c,l=(a=u(a)).length,h,d=false,f;if(n==null)r=s(f=o());for(c=0;c<=l;++c){if(!(c<l&&i(h=a[c],c,a))===d){if(d=!d)r.lineStart();else r.lineEnd()}if(d)r.point(+t(h,c,a),+e(h,c,a))}if(f)return r=null,f+""||null}a.x=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),a):t};a.y=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),a):e};a.defined=function(t){return arguments.length?(i=typeof t==="function"?t:f(!!t),a):i};a.curve=function(t){return arguments.length?(s=t,n!=null&&(r=s(n)),a):s};a.context=function(t){return arguments.length?(t==null?n=r=null:r=s(n=t),a):n};return a}const v=()=>`@media (forced-colors: active){.sc-ds-chart-line:root,.sc-ds-chart-line-h,.ds-forced-colors-scope.sc-ds-chart-line{--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-line-h{display:inline-block;max-width:100%;font-family:var(--typography-font-family)}.chart-line__svg.sc-ds-chart-line{display:block;width:100%;height:100%}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:var(--dimension-stroke-width-012);vector-effect:non-scaling-stroke}.chart-line__axis-label.sc-ds-chart-line{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-line__path.sc-ds-chart-line{fill:none;stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-018);r:calc(var(--dimension-size-075) / 2);vector-effect:non-scaling-stroke}@media (forced-colors: active){.chart-line__path.sc-ds-chart-line,.chart-line__point.sc-ds-chart-line{forced-color-adjust:none}.chart-line__point.sc-ds-chart-line{stroke:var(--ds-forced-color-surface)}}`;const _=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true;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 o(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()))}}render(){const t=this.viewport?.width??this.width;const e=this.viewport?.height??this.height;const{margin:s,axisLabelGap:o,categoryLabelOffset:d}=a();const f=Math.max(0,t-s.left-s.right);const u=Math.max(0,e-s.top-s.bottom);const p=this.series.flatMap((t=>t.data));const g=c(p)??0;const m=l().domain(this.categories.map(((t,e)=>e))).range([0,f]);const y=h().domain([0,g||1]).range([u,0]).nice();const v=b().x(((t,e)=>m(e)??0)).y((t=>y(t)));const _=y.ticks(4);return i(n,{key:"a05b286837f2e03e0af24da3241babab381eae7e",class:"chart-line"},i("svg",{key:"a96b4c763842c78ec4b56b9b69de1b5ea067086b",class:"chart-line__svg",ref:t=>{this.svgEl=t??null},width:t,height:e,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"1ecea80a2cd82c752ead21d4f623fe243bd466ed",transform:`translate(${s.left}, ${s.top})`},_.map((t=>i("g",{key:`grid-${t}`,transform:`translate(0, ${y(t)})`},i("line",{class:"chart-line__gridline",x1:0,x2:f}),i("text",{class:"chart-line__axis-label",x:-o,"text-anchor":"end","dominant-baseline":"middle"},t)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:m(e)??0,y:u+d,"text-anchor":"middle"},t))),this.series.map(((t,e)=>{const n=t.color??r(e);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:v(t.data)??undefined,stroke:n}),this.showPoints&&t.data.map(((e,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:m(s)??0,cy:y(e),fill:n}))))})))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return v()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"],viewport:[32]},undefined,{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),_)}break}}))}k();const x=_;const w=k;export{x as DsChartLine,w as defineCustomElement};
+import{p as t,H as e,h as i,a as n,t as s}from"./index.js";import{c as r}from"./p-CMv_7vFs.js";import{C as c,r as o,m as a,p as l,l as h}from"./p-BybqPD8K.js";import{w as d,c as f,a as u}from"./p-CrCGIx8s.js";function p(t){this._context=t}p.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._point=0},lineEnd:function(){if(this._line||this._line!==0&&this._point===1)this._context.closePath();this._line=1-this._line},point:function(t,e){t=+t,e=+e;switch(this._point){case 0:this._point=1;this._line?this._context.lineTo(t,e):this._context.moveTo(t,e);break;case 1:this._point=2;default:this._context.lineTo(t,e);break}}};function g(t){return new p(t)}function m(t){return t[0]}function y(t){return t[1]}function v(t,e){var i=f(true),n=null,s=g,r=null,c=d(o);t=typeof t==="function"?t:t===undefined?m:f(t);e=typeof e==="function"?e:e===undefined?y:f(e);function o(o){var a,l=(o=u(o)).length,h,d=false,f;if(n==null)r=s(f=c());for(a=0;a<=l;++a){if(!(a<l&&i(h=o[a],a,o))===d){if(d=!d)r.lineStart();else r.lineEnd()}if(d)r.point(+t(h,a,o),+e(h,a,o))}if(f)return r=null,f+""||null}o.x=function(e){return arguments.length?(t=typeof e==="function"?e:f(+e),o):t};o.y=function(t){return arguments.length?(e=typeof t==="function"?t:f(+t),o):e};o.defined=function(t){return arguments.length?(i=typeof t==="function"?t:f(!!t),o):i};o.curve=function(t){return arguments.length?(s=t,n!=null&&(r=s(n)),o):s};o.context=function(t){return arguments.length?(t==null?n=r=null:r=s(n=t),o):n};return o}const _=()=>`@media (forced-colors: active){.sc-ds-chart-line:root,.sc-ds-chart-line-h,.ds-forced-colors-scope.sc-ds-chart-line{--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-line-h{display:inline-block;max-width:100%;font-family:var(--typography-font-family)}.chart-line__svg.sc-ds-chart-line{display:block;width:100%;height:100%}.chart-line__gridline.sc-ds-chart-line{stroke:var(--color-border-tertiary);stroke-width:var(--dimension-stroke-width-012);vector-effect:non-scaling-stroke}.chart-line__axis-label.sc-ds-chart-line{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-line__path.sc-ds-chart-line{fill:none;stroke-width:var(--dimension-stroke-width-025);vector-effect:non-scaling-stroke}.chart-line__point.sc-ds-chart-line{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-018);r:calc(var(--dimension-size-075) / 2);vector-effect:non-scaling-stroke}@media (forced-colors: active){.chart-line__path.sc-ds-chart-line,.chart-line__point.sc-ds-chart-line{forced-color-adjust:none}.chart-line__point.sc-ds-chart-line{stroke:var(--ds-forced-color-surface)}}`;const k=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.width=480;this.height=240;this.showPoints=true;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 c(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()))}}render(){const t=this.viewport?.width??this.width;const e=this.viewport?.height??this.height;const{margin:s,axisLabelGap:c,categoryLabelOffset:d}=o();const f=Math.max(0,t-s.left-s.right);const u=Math.max(0,e-s.top-s.bottom);const p=this.series.flatMap((t=>t.data));const g=a(p)??0;const m=l().domain(this.categories.map(((t,e)=>e))).range([0,f]);const y=h().domain([0,g||1]).range([u,0]).nice();const _=v().x(((t,e)=>m(e)??0)).y((t=>y(t)));const k=y.ticks(4);return i(n,{key:"7d4d60d091c245883080eea2825f1b180240c4c4",class:"chart-line"},i("svg",{key:"94baae5d9e48a8e858766ea5f1dabbd7a5bd57c4",class:"chart-line__svg",ref:t=>{this.svgEl=t??null},width:t,height:e,role:"img","aria-label":this.series.map((t=>t.name)).join(", ")},i("g",{key:"df2cead58c1ac0bdc654deed5cfb13ec9dd69fd3",transform:`translate(${s.left}, ${s.top})`},k.map((t=>i("g",{key:`grid-${t}`,transform:`translate(0, ${y(t)})`},i("line",{class:"chart-line__gridline",x1:0,x2:f}),i("text",{class:"chart-line__axis-label",x:-c,"text-anchor":"end","dominant-baseline":"middle"},t)))),this.categories.map(((t,e)=>i("text",{key:`x-${t}`,class:"chart-line__axis-label",x:m(e)??0,y:u+d,"text-anchor":"middle"},t))),this.series.map(((t,e)=>{const n=t.color??r(e);return i("g",{key:t.name},i("path",{class:"chart-line__path",d:_(t.data)??undefined,stroke:n}),this.showPoints&&t.data.map(((e,s)=>i("circle",{key:`${t.name}-${s}`,class:"chart-line__point",cx:m(s)??0,cy:y(e),fill:n}))))})))))}static get watchers(){return{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}}static get style(){return _()}},[2,"ds-chart-line",{series:[16],categories:[16],width:[2],height:[2],showPoints:[4,"show-points"],viewport:[32]},undefined,{width:[{handleIntrinsicSizeChange:0}],height:[{handleIntrinsicSizeChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-line"];t.forEach((t=>{switch(t){case"ds-chart-line":if(!customElements.get(s(t))){customElements.define(s(t),k)}break}}))}b();const x=k;const w=b;export{x as DsChartLine,w as defineCustomElement};
 //# sourceMappingURL=ds-chart-line.js.map

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{C as o,d as s}from"./p-BApNi_xA.js";const p=o;const t=s;export{p as DsCheckbox,t as defineCustomElement};
+import{C as o,d as s}from"./p-B6RrZQqw.js";const r=o;const t=s;export{r as DsCheckbox,t as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map