npm - @ds-mo/ui - Versions diffs - 14.22.0 → 14.22.1 - Mend

@ds-mo/ui 14.22.0 → 14.22.1

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

Files changed (92) hide show

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

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

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as d,h as t,a as i,t as n}from"./index.js";import{d as r}from"./p-DzPtYdXy.js";import{d as o}from"./p-BnTPuV3x.js";import{d as a}from"./p-DSy1oOnd.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-Cd1JnnVK.js";import{d as m}from"./p-pnO8tAYB.js";const h=()=>`.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;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;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.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--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;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{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0}.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-125) var(--dimension-radius-125)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-125)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const b={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={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 v=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction",7);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:"a688541841664f1a00c09e1da030b154be044833",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":b[this.cardWidth],"--_card-setting-min-height":p[this.cardWidth]}},t("header",{key:"6565dc6cd085fbf0add734cf3b122c563a3a6de0",class:"card-setting__header ds-chrome-header"},t("div",{key:"f969c9d53e0a66746e9f7ab3e11286ae1f2680f6",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},t("ds-text",{key:"7ecb79dd0bb82415f36c175870b1ee0e5a552113",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading)),t("div",{key:"916ded30521bf3d20b06233464c05ef969466061",class:"card-setting__actions ds-chrome-header__trailing"},!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:"b8b86d5312a34910c7daa35d542474241dfff2d2",class:"card-setting__body"},t("slot",{key:"b40ef97b364f1fe38a8a5009da2d3b3ee10c74bd"})))}static get style(){return h()}},[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 u(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(n(s))){customElements.define(n(s),v)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-button-filled":if(!customElements.get(n(s))){o()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){a()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-text":if(!customElements.get(n(s))){g()}break;case"ds-tooltip":if(!customElements.get(n(s))){m()}break}}))}u();const _=v;const x=u;export{_ as DsCardSetting,x as defineCustomElement};
+import{p as s,H as e,c as d,h as t,a as i,t as n}from"./index.js";import{d as r}from"./p-DzPtYdXy.js";import{d as o}from"./p-BnTPuV3x.js";import{d as a}from"./p-7MWaWl8w.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-0XTyQNRG.js";import{d as g}from"./p-Cd1JnnVK.js";import{d as m}from"./p-9X_p0bHr.js";const h=()=>`.ds-control--lg.sc-ds-card-setting,.ds-control--lg.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting,.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting,.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-setting-h,.ds-control--lg.sc-ds-card-setting{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-setting-h,.ds-control--md.sc-ds-card-setting{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-setting-h,.ds-control--sm.sc-ds-card-setting{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-setting-h,.ds-control--xs.sc-ds-card-setting{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-setting{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-setting{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-setting{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-setting,.ds-chrome-header__trailing.sc-ds-card-setting{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-setting{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-setting{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-setting{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-setting{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-setting,.ds-chrome-header__description.sc-ds-card-setting{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-setting{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-setting .ds-chrome-header__description.sc-ds-card-setting{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-setting:root,.sc-ds-card-setting-h,.ds-forced-colors-scope.sc-ds-card-setting{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-setting-h{position:relative;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;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-setting-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.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--editing.sc-ds-card-setting-h::after{box-shadow:none}.card-setting__header.sc-ds-card-setting{flex:0 0 auto;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{border-bottom-color:transparent}.card-setting__copy.sc-ds-card-setting{align-items:center}ds-text.card-setting__title.sc-ds-card-setting{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{flex-shrink:0}.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-125) var(--dimension-radius-125)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-125)}@media (forced-colors: active){.sc-ds-card-setting-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-setting-h::after{box-shadow:none}}`;const b={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={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 v=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsAction=d(this,"dsAction",7);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:"a688541841664f1a00c09e1da030b154be044833",class:{"card-setting":true,"card-setting--editing":s},style:{"--_card-setting-width":b[this.cardWidth],"--_card-setting-min-height":p[this.cardWidth]}},t("header",{key:"6565dc6cd085fbf0add734cf3b122c563a3a6de0",class:"card-setting__header ds-chrome-header"},t("div",{key:"f969c9d53e0a66746e9f7ab3e11286ae1f2680f6",class:"card-setting__copy ds-chrome-header__copy ds-control--md"},t("ds-text",{key:"7ecb79dd0bb82415f36c175870b1ee0e5a552113",class:"card-setting__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:s?f:"primary",as:"h2"},this.heading)),t("div",{key:"916ded30521bf3d20b06233464c05ef969466061",class:"card-setting__actions ds-chrome-header__trailing"},!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:"b8b86d5312a34910c7daa35d542474241dfff2d2",class:"card-setting__body"},t("slot",{key:"b40ef97b364f1fe38a8a5009da2d3b3ee10c74bd"})))}static get style(){return h()}},[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 u(){if(typeof customElements==="undefined"){return}const s=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-card-setting":if(!customElements.get(n(s))){customElements.define(n(s),v)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-button-filled":if(!customElements.get(n(s))){o()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){a()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){l()}break;case"ds-text":if(!customElements.get(n(s))){g()}break;case"ds-tooltip":if(!customElements.get(n(s))){m()}break}}))}u();const _=v;const x=u;export{_ as DsCardSetting,x as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

package/dist/components/ds-code-block.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{C as o,d as s}from"./p-Dit6JmAK.js";const t=o;const m=s;export{t as DsCodeBlock,m as defineCustomElement};
+import{C as o,d as s}from"./p-DiyO47xX.js";const t=o;const p=s;export{t as DsCodeBlock,p as defineCustomElement};
 //# sourceMappingURL=ds-code-block.js.map

package/dist/components/ds-filter-menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{F as o,d as s}from"./p-hYjmOPCI.js";const t=o;const m=s;export{t as DsFilterMenu,m as defineCustomElement};
+import{F as o,d as s}from"./p-9M0ak2q_.js";const t=o;const a=s;export{t as DsFilterMenu,a as defineCustomElement};
 //# sourceMappingURL=ds-filter-menu.js.map

package/dist/components/ds-input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{I as o,d as s}from"./p-pxN8JGEh.js";const p=o;const t=s;export{p as DsInput,t as defineCustomElement};
+import{I as o,d as s}from"./p-nVv71P3f.js";const t=o;const n=s;export{t as DsInput,n as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

package/dist/components/ds-markdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-D36EmETH.js";const t=o;const m=s;export{t as DsMarkdown,m as defineCustomElement};
+import{M as o,d as s}from"./p-CilwchJH.js";const t=o;const c=s;export{t as DsMarkdown,c as defineCustomElement};
 //# sourceMappingURL=ds-markdown.js.map

package/dist/components/ds-menu.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-CFkZSDwI.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
+import{M as o,d as s}from"./p-DeK_6Uym.js";const t=o;const m=s;export{t as DsMenu,m as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map

package/dist/components/ds-message-actions.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as i,a,t as o}from"./index.js";import{C as n}from"./p-BnhGV__o.js";import{d}from"./p-DzPtYdXy.js";import{d as l}from"./p-DSy1oOnd.js";import{d as c}from"./p-Cea7rROU.js";import{d as r}from"./p-0XTyQNRG.js";import{d as p}from"./p-Cd1JnnVK.js";import{d as h}from"./p-pnO8tAYB.js";const m=()=>`.sc-ds-message-actions-h{display:inline-flex;box-sizing:border-box}.message-actions.sc-ds-message-actions{display:inline-flex;align-items:center;gap:var(--dimension-space-050)}`;const f=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsCopyResult=t(this,"dsCopyResult",7);this.dsFeedbackChange=t(this,"dsFeedbackChange",7);this.feedbackEnabled=false;this.copied=false;this.copyFeedback=new n((s=>{this.copied=s}));this.copy=async()=>{const s=await this.copyFeedback.copy(this.copyText??"");if(s===undefined)return;this.dsCopyResult.emit({status:s?"success":"error"})}}connectedCallback(){this.copyFeedback.connect()}handleCopyTextChange(){this.copyFeedback.reset()}disconnectedCallback(){this.copyFeedback.disconnect()}changeFeedback(s,e){this.dsFeedbackChange.emit(e?s:undefined)}render(){const s=this.copied?"Copied":"Copy message";return i(a,{key:"3e8bc9b94aa84a9e5a7f6cd4f2be134896d9b2db"},i("div",{key:"b303b01863a8fe1462d3fd0603e6da629c1ce17e",class:"message-actions",role:"group","aria-label":"Message actions"},this.copyText?i("ds-tooltip",{label:s,side:"top",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.copied?"Check":"Copy",size:"xs","aria-label":s,hasBorder:false,onDsClick:this.copy})):null,this.feedbackEnabled?i("ds-tooltip",{label:"Good response",side:"top",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.feedback==="positive"?"ThumbsUpFilled":"ThumbsUp",size:"xs","aria-label":"Good response",hasBorder:false,activeFill:false,pressed:this.feedback==="positive",onDsChange:s=>this.changeFeedback("positive",s.detail)})):null,this.feedbackEnabled?i("ds-tooltip",{label:"Bad response",side:"top",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.feedback==="negative"?"ThumbsDownFilled":"ThumbsDown",size:"xs","aria-label":"Bad response",hasBorder:false,activeFill:false,pressed:this.feedback==="negative",onDsChange:s=>this.changeFeedback("negative",s.detail)})):null))}static get watchers(){return{copyText:[{handleCopyTextChange:0}]}}static get style(){return m()}},[2,"ds-message-actions",{copyText:[1,"copy-text"],feedbackEnabled:[4,"feedback-enabled"],feedback:[1],copied:[32]},undefined,{copyText:[{handleCopyTextChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const s=["ds-message-actions","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-message-actions":if(!customElements.get(o(s))){customElements.define(o(s),f)}break;case"ds-badge":if(!customElements.get(o(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){c()}break;case"ds-loader":if(!customElements.get(o(s))){r()}break;case"ds-text":if(!customElements.get(o(s))){p()}break;case"ds-tooltip":if(!customElements.get(o(s))){h()}break}}))}b();const u=f;const g=b;export{u as DsMessageActions,g as defineCustomElement};
+import{p as s,H as e,c as t,h as i,a,t as o}from"./index.js";import{C as n}from"./p-BnhGV__o.js";import{d}from"./p-DzPtYdXy.js";import{d as l}from"./p-7MWaWl8w.js";import{d as c}from"./p-Cea7rROU.js";import{d as r}from"./p-0XTyQNRG.js";import{d as p}from"./p-Cd1JnnVK.js";import{d as h}from"./p-9X_p0bHr.js";const m=()=>`.sc-ds-message-actions-h{display:inline-flex;box-sizing:border-box}.message-actions.sc-ds-message-actions{display:inline-flex;align-items:center;gap:var(--dimension-space-050)}`;const f=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsCopyResult=t(this,"dsCopyResult",7);this.dsFeedbackChange=t(this,"dsFeedbackChange",7);this.feedbackEnabled=false;this.copied=false;this.copyFeedback=new n((s=>{this.copied=s}));this.copy=async()=>{const s=await this.copyFeedback.copy(this.copyText??"");if(s===undefined)return;this.dsCopyResult.emit({status:s?"success":"error"})}}connectedCallback(){this.copyFeedback.connect()}handleCopyTextChange(){this.copyFeedback.reset()}disconnectedCallback(){this.copyFeedback.disconnect()}changeFeedback(s,e){this.dsFeedbackChange.emit(e?s:undefined)}render(){const s=this.copied?"Copied":"Copy message";return i(a,{key:"3e8bc9b94aa84a9e5a7f6cd4f2be134896d9b2db"},i("div",{key:"b303b01863a8fe1462d3fd0603e6da629c1ce17e",class:"message-actions",role:"group","aria-label":"Message actions"},this.copyText?i("ds-tooltip",{label:s,side:"top",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.copied?"Check":"Copy",size:"xs","aria-label":s,hasBorder:false,onDsClick:this.copy})):null,this.feedbackEnabled?i("ds-tooltip",{label:"Good response",side:"top",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.feedback==="positive"?"ThumbsUpFilled":"ThumbsUp",size:"xs","aria-label":"Good response",hasBorder:false,activeFill:false,pressed:this.feedback==="positive",onDsChange:s=>this.changeFeedback("positive",s.detail)})):null,this.feedbackEnabled?i("ds-tooltip",{label:"Bad response",side:"top",size:"sm"},i("ds-button-unfilled",{variant:"icon",icon:this.feedback==="negative"?"ThumbsDownFilled":"ThumbsDown",size:"xs","aria-label":"Bad response",hasBorder:false,activeFill:false,pressed:this.feedback==="negative",onDsChange:s=>this.changeFeedback("negative",s.detail)})):null))}static get watchers(){return{copyText:[{handleCopyTextChange:0}]}}static get style(){return m()}},[2,"ds-message-actions",{copyText:[1,"copy-text"],feedbackEnabled:[4,"feedback-enabled"],feedback:[1],copied:[32]},undefined,{copyText:[{handleCopyTextChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const s=["ds-message-actions","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-message-actions":if(!customElements.get(o(s))){customElements.define(o(s),f)}break;case"ds-badge":if(!customElements.get(o(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){c()}break;case"ds-loader":if(!customElements.get(o(s))){r()}break;case"ds-text":if(!customElements.get(o(s))){p()}break;case"ds-tooltip":if(!customElements.get(o(s))){h()}break}}))}b();const u=f;const g=b;export{u as DsMessageActions,g as defineCustomElement};
 //# sourceMappingURL=ds-message-actions.js.map

package/dist/components/ds-message-composer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as r,a,t}from"./index.js";import{d as c}from"./p-DzPtYdXy.js";import{d as i}from"./p-BnTPuV3x.js";import{d}from"./p-DSy1oOnd.js";import{d as m}from"./p-Cea7rROU.js";import{d as n}from"./p-0XTyQNRG.js";import{d as l}from"./p-Cd1JnnVK.js";import{d as p}from"./p-pnO8tAYB.js";const g=()=>`@media (forced-colors: active){.sc-ds-message-composer:root,.sc-ds-message-composer-h,.ds-forced-colors-scope.sc-ds-message-composer{--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-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty,.message-composer__error-actions.sc-ds-message-composer:empty{display:none}.message-composer__error-support.sc-ds-message-composer,.message-composer__error-message.sc-ds-message-composer,.message-composer__error-actions.sc-ds-message-composer{display:flex;align-items:center}.message-composer__error-support.sc-ds-message-composer{justify-content:space-between;flex-wrap:wrap;gap:var(--dimension-space-075) var(--dimension-space-100);min-width:0;padding:var(--dimension-space-075) var(--dimension-space-100);background:var(--color-background-faint-negative)}.message-composer__error-message.sc-ds-message-composer{flex:1 1 var(--dimension-panel-width-xs);gap:var(--dimension-space-050);min-width:0;color:var(--color-foreground-bold-negative)}.message-composer__error-actions.sc-ds-message-composer{flex:0 1 auto;flex-wrap:wrap;gap:var(--dimension-space-050)}.message-composer__stack.sc-ds-message-composer{min-width:0}.message-composer--error.sc-ds-message-composer .message-composer__stack.sc-ds-message-composer{overflow:hidden;border:var(--dimension-stroke-width-012) solid var(--color-border-bold-negative);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md)}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{border-radius:0;box-shadow:none}textarea.sc-ds-message-composer{field-sizing:content;width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family-ui);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);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}@media (forced-colors: active){.message-composer__field.sc-ds-message-composer{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);box-shadow:none}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{border:0}.message-composer--error.sc-ds-message-composer .message-composer__stack.sc-ds-message-composer{border:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-content);box-shadow:none}.message-composer__error-support.sc-ds-message-composer{border-block-end:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface)}}`;let f=0;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=o(this,"dsInput",7);this.dsSubmit=o(this,"dsSubmit",7);this.dsStop=o(this,"dsStop",7);this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.errorId=`ds-message-composer-error-${++f}`;this.handleInput=e=>{this.value=e.target.value;this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";const s=this.errorMessage||"Message could not be sent.";const o=!this.streaming&&(this.isInactive||!this.value.trim());return r(a,{key:"c8f686e7957530d5e16e688de664eed65a1a0a4c"},r("form",{key:"369c4af0c6ede17ff4ea7a2852f1101fe5af271a",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},r("div",{key:"b1645148e470ebc8ef4834dbb1fda927fb40e189",class:"message-composer__attachments"},r("slot",{key:"3a03e51afe17e91b617e1db176584e2ff10d8e03",name:"attachments"})),r("div",{key:"5cec1c578a6f4fc43c80921a586c5d983f95de55",class:"message-composer__stack"},e?r("div",{class:"message-composer__error-support"},r("div",{id:this.errorId,class:"message-composer__error-message",role:"alert"},r("ds-icon",{name:"ErrorTriangle",size:"xs",color:"inherit"}),r("ds-text",{variant:"text-body-small",color:"negative"},s)),r("div",{class:"message-composer__error-actions"},r("slot",{name:"error-actions"}))):null,r("div",{key:"b7a7b4427113d264d16bf4bcf3f60c467f807f4c",class:"message-composer__field"},r("textarea",{key:"5bde005904de9423ecf858a54b3311a9b336fa96",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,"aria-describedby":e?this.errorId:undefined,disabled:this.isInactive,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),r("div",{key:"6b30f473dd925ab2b0348e357e4ede7848b0074f",class:"message-composer__controls"},r("div",{key:"60cbb015ce3e8529e542e533bf5037c80b8c42d4",class:"message-composer__tools"},r("slot",{key:"6412025530ad8ac9715bcbb87027453a2004a87e",name:"tools"})),r("div",{key:"5b40e8a0ef2784d96f1c1d9577af3d5bd198a3f9",class:"message-composer__actions"},r("slot",{key:"db9da3518c49e6ec87f45c16cd736efad856f192",name:"actions"}),o?r("ds-tooltip",{label:"Send message",side:"top",size:"sm"},r("ds-button-unfilled",{class:"message-composer__action",variant:"icon",icon:"ArrowUp",size:"md","aria-label":"Send message",hasBorder:true,isInactive:true,onDsClick:this.handleAction})):r("ds-tooltip",{label:this.streaming?"Stop response":"Send message",side:"top",size:"sm"},r("ds-button-filled",{class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"brand":this.submitIntent,contrast:"bold",size:"md","aria-label":this.streaming?"Stop response":"Send message",onDsClick:this.handleAction}))))))))}get el(){return this}static get style(){return g()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],errorMessage:[1,"error-message"],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(t(e))){customElements.define(t(e),h)}break;case"ds-badge":if(!customElements.get(t(e))){c()}break;case"ds-button-filled":if(!customElements.get(t(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){m()}break;case"ds-loader":if(!customElements.get(t(e))){n()}break;case"ds-text":if(!customElements.get(t(e))){l()}break;case"ds-tooltip":if(!customElements.get(t(e))){p()}break}}))}b();const u=h;const v=b;export{u as DsMessageComposer,v as defineCustomElement};
+import{p as e,H as s,c as o,h as r,a,t}from"./index.js";import{d as c}from"./p-DzPtYdXy.js";import{d as i}from"./p-BnTPuV3x.js";import{d}from"./p-7MWaWl8w.js";import{d as m}from"./p-Cea7rROU.js";import{d as n}from"./p-0XTyQNRG.js";import{d as l}from"./p-Cd1JnnVK.js";import{d as p}from"./p-9X_p0bHr.js";const g=()=>`@media (forced-colors: active){.sc-ds-message-composer:root,.sc-ds-message-composer-h,.ds-forced-colors-scope.sc-ds-message-composer{--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-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty,.message-composer__error-actions.sc-ds-message-composer:empty{display:none}.message-composer__error-support.sc-ds-message-composer,.message-composer__error-message.sc-ds-message-composer,.message-composer__error-actions.sc-ds-message-composer{display:flex;align-items:center}.message-composer__error-support.sc-ds-message-composer{justify-content:space-between;flex-wrap:wrap;gap:var(--dimension-space-075) var(--dimension-space-100);min-width:0;padding:var(--dimension-space-075) var(--dimension-space-100);background:var(--color-background-faint-negative)}.message-composer__error-message.sc-ds-message-composer{flex:1 1 var(--dimension-panel-width-xs);gap:var(--dimension-space-050);min-width:0;color:var(--color-foreground-bold-negative)}.message-composer__error-actions.sc-ds-message-composer{flex:0 1 auto;flex-wrap:wrap;gap:var(--dimension-space-050)}.message-composer__stack.sc-ds-message-composer{min-width:0}.message-composer--error.sc-ds-message-composer .message-composer__stack.sc-ds-message-composer{overflow:hidden;border:var(--dimension-stroke-width-012) solid var(--color-border-bold-negative);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md)}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{border-radius:0;box-shadow:none}textarea.sc-ds-message-composer{field-sizing:content;width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family-ui);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);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}@media (forced-colors: active){.message-composer__field.sc-ds-message-composer{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);box-shadow:none}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{border:0}.message-composer--error.sc-ds-message-composer .message-composer__stack.sc-ds-message-composer{border:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-content);box-shadow:none}.message-composer__error-support.sc-ds-message-composer{border-block-end:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface)}}`;let f=0;const h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=o(this,"dsInput",7);this.dsSubmit=o(this,"dsSubmit",7);this.dsStop=o(this,"dsStop",7);this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.errorId=`ds-message-composer-error-${++f}`;this.handleInput=e=>{this.value=e.target.value;this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";const s=this.errorMessage||"Message could not be sent.";const o=!this.streaming&&(this.isInactive||!this.value.trim());return r(a,{key:"c8f686e7957530d5e16e688de664eed65a1a0a4c"},r("form",{key:"369c4af0c6ede17ff4ea7a2852f1101fe5af271a",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},r("div",{key:"b1645148e470ebc8ef4834dbb1fda927fb40e189",class:"message-composer__attachments"},r("slot",{key:"3a03e51afe17e91b617e1db176584e2ff10d8e03",name:"attachments"})),r("div",{key:"5cec1c578a6f4fc43c80921a586c5d983f95de55",class:"message-composer__stack"},e?r("div",{class:"message-composer__error-support"},r("div",{id:this.errorId,class:"message-composer__error-message",role:"alert"},r("ds-icon",{name:"ErrorTriangle",size:"xs",color:"inherit"}),r("ds-text",{variant:"text-body-small",color:"negative"},s)),r("div",{class:"message-composer__error-actions"},r("slot",{name:"error-actions"}))):null,r("div",{key:"b7a7b4427113d264d16bf4bcf3f60c467f807f4c",class:"message-composer__field"},r("textarea",{key:"5bde005904de9423ecf858a54b3311a9b336fa96",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,"aria-describedby":e?this.errorId:undefined,disabled:this.isInactive,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),r("div",{key:"6b30f473dd925ab2b0348e357e4ede7848b0074f",class:"message-composer__controls"},r("div",{key:"60cbb015ce3e8529e542e533bf5037c80b8c42d4",class:"message-composer__tools"},r("slot",{key:"6412025530ad8ac9715bcbb87027453a2004a87e",name:"tools"})),r("div",{key:"5b40e8a0ef2784d96f1c1d9577af3d5bd198a3f9",class:"message-composer__actions"},r("slot",{key:"db9da3518c49e6ec87f45c16cd736efad856f192",name:"actions"}),o?r("ds-tooltip",{label:"Send message",side:"top",size:"sm"},r("ds-button-unfilled",{class:"message-composer__action",variant:"icon",icon:"ArrowUp",size:"md","aria-label":"Send message",hasBorder:true,isInactive:true,onDsClick:this.handleAction})):r("ds-tooltip",{label:this.streaming?"Stop response":"Send message",side:"top",size:"sm"},r("ds-button-filled",{class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"brand":this.submitIntent,contrast:"bold",size:"md","aria-label":this.streaming?"Stop response":"Send message",onDsClick:this.handleAction}))))))))}get el(){return this}static get style(){return g()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],errorMessage:[1,"error-message"],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(t(e))){customElements.define(t(e),h)}break;case"ds-badge":if(!customElements.get(t(e))){c()}break;case"ds-button-filled":if(!customElements.get(t(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){m()}break;case"ds-loader":if(!customElements.get(t(e))){n()}break;case"ds-text":if(!customElements.get(t(e))){l()}break;case"ds-tooltip":if(!customElements.get(t(e))){p()}break}}))}b();const u=h;const v=b;export{u as DsMessageComposer,v as defineCustomElement};
 //# sourceMappingURL=ds-message-composer.js.map

package/dist/components/ds-message-scroller.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as r,a,t as o}from"./index.js";import{S as i}from"./p-Ck1hgD6g.js";import{r as l}from"./p-CochmPyg.js";import{d}from"./p-DzPtYdXy.js";import{d as n}from"./p-DSy1oOnd.js";import{d as c}from"./p-Cea7rROU.js";import{d as h}from"./p-0XTyQNRG.js";import{d as f}from"./p-Cd1JnnVK.js";import{d as g}from"./p-pnO8tAYB.js";const m=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const v=()=>`.ds-control-elevation.sc-ds-message-scroller-h,.ds-control-elevation.sc-ds-message-scroller{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-message-scroller-h::after,.ds-control-elevation.sc-ds-message-scroller::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-message-scroller-h,.ds-control-elevation--sm.sc-ds-message-scroller{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-message-scroller-h,.ds-control-elevation--md.sc-ds-message-scroller{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-message-scroller-h,.ds-control-elevation--floating.sc-ds-message-scroller{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-message-scroller{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-message-scroller{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-message-scroller,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-message-scroller{scale:none;transition:none}}.sc-ds-message-scroller-h{--ds-message-scroller-anchor-offset:var(--dimension-space-800);display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--ds-message-scroller-content-max-width, var(--dimension-panel-width-2xl));min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:max(     calc(var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)),     var(--ds-message-scroller-turn-clearance, 0px)   );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__overlay-stack.sc-ds-message-scroller{display:grid;width:100%}.message-scroller__interaction.sc-ds-message-scroller,.message-scroller__overlay-content.sc-ds-message-scroller{min-width:0}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc(var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200));left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const u=24;const p=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart",7);this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.followReleased=false;this.releasePendingAtLiveEdge=false;this.atStart=false;this.programmatic=false;this.transcriptChildren=[];this.knownTranscriptElements=new Set;this.knownTurnAnchors=new Set;this.turnClearance=0;this.prependReconciliation=0;this.handleTranscriptChange=()=>{const e=this.getTranscriptChildren();const s=this.transcriptChildren;const t=this.knownTranscriptElements.size>0;const r=new Set(this.knownTranscriptElements);const a=[...e].reverse().find(((s,t)=>{if(!s.matches("ds-message[scroll-anchor]")||this.knownTurnAnchors.has(s)){return false}const r=e.length-t-1;return e.slice(r+1).every((e=>!this.knownTranscriptElements.has(e)))}));e.forEach((e=>{this.knownTranscriptElements.add(e);if(e.matches("ds-message[scroll-anchor]")){this.knownTurnAnchors.add(e)}}));if(!s.length){this.transcriptChildren=e;if(a&&t){requestAnimationFrame((()=>this.positionNewTurn(a)))}return}const o=e.findIndex((e=>r.has(e)));const i=e.filter((e=>!r.has(e)));const l=e.length>s.length&&s.every(((t,r)=>e[e.length-s.length+r]===t))||!a&&i.length>0&&o>0&&i.every((s=>e.indexOf(s)<o));this.transcriptChildren=e;if(l){if(this.viewport){const e=this.activeTurnAnchor?.isConnected?this.activeTurnAnchor:s[0];const t=this.activeTurnAnchor?.isConnected?this.activeTurnAnchorViewportTop:this.firstChildViewportTop;if(e&&t!==undefined){this.reconcilePrependPosition(e,t);this.schedulePrependReconciliation(e,t,i)}}this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop();this.scrollOverlayController?.sync();return}if(a){requestAnimationFrame((()=>this.positionNewTurn(a)))}};this.handleTranscriptSlotChange=()=>this.handleTranscriptChange();this.handleScroll=()=>{if(!this.viewport)return;this.scrollOverlayController?.sync();this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop();if(this.programmatic)return;const e=this.isAtLiveEdge();if(this.releasePendingAtLiveEdge&&e){this.following=false;this.followReleased=true;this.showScrollToLatest=false;return}this.releasePendingAtLiveEdge=false;this.following=e;this.followReleased=!this.following;this.showScrollToLatest=!this.following;const s=this.viewport.scrollTop<=u;if(s&&!this.atStart)this.dsReachStart.emit();this.atStart=s};this.releaseFollow=()=>{this.prependReconciliation+=1;this.releasePendingAtLiveEdge=this.isAtLiveEdge();this.following=false;this.followReleased=true;this.showScrollToLatest=!this.releasePendingAtLiveEdge};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.releaseFollow()}}}componentDidLoad(){this.transcriptChildren=this.getTranscriptChildren();this.transcriptChildren.forEach((e=>{this.knownTranscriptElements.add(e);if(e.matches("ds-message[scroll-anchor]")){this.knownTurnAnchors.add(e)}}));this.rememberFirstChildTop();this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.prependReconciliation+=1;this.scrollOverlayController?.disconnect();this.mutationObserver?.disconnect();if(this.programmaticTimer)clearTimeout(this.programmaticTimer);document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.releasePendingAtLiveEdge=false;this.following=false;this.followReleased=true;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.releasePendingAtLiveEdge=false;this.scrollTo(0);this.following=false;this.followReleased=true;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.releasePendingAtLiveEdge=false;this.following=true;this.followReleased=false;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;const s=this.motionBehavior();this.viewport.scrollTo({top:e,behavior:s});if(this.programmaticTimer)clearTimeout(this.programmaticTimer);this.programmaticTimer=setTimeout((()=>{this.programmatic=false;this.programmaticTimer=undefined;if(this.following){this.viewport.scrollTop=e;this.showScrollToLatest=false}}),s==="smooth"?600:0)}connectObservers(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new i({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:".message-scroller__overlay-stack",onGeometryChange:()=>this.handleContentGrowth()});this.scrollOverlayController.connect();this.mutationObserver=new MutationObserver((()=>{this.handleTranscriptChange();this.handleContentGrowth()}));this.mutationObserver.observe(this.el,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;this.syncTurnClearance();const e=this.viewport.scrollHeight;if(this.autoFollow&&this.following&&!this.followReleased){this.viewport.scrollTop=e}if(this.releasePendingAtLiveEdge&&!this.isAtLiveEdge()){this.releasePendingAtLiveEdge=false}this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.scrollOverlayController?.sync()}rememberFirstChildTop(){if(!this.viewport)return;const e=this.getTranscriptChildren()[0];this.firstChildViewportTop=e?e.getBoundingClientRect().top-this.viewport.getBoundingClientRect().top:undefined}getTranscriptChildren(){const e=this.transcriptSlot?.assignedElements()??[];const t=e.filter((e=>e instanceof s&&(e.matches("ds-message")||e.matches("ds-agent-response"))));const r=Array.from(this.el.querySelectorAll("ds-message, ds-agent-response")).filter((e=>{if(e.closest(".message-scroller__interaction, .message-scroller__overlay-content")){return false}if(e.matches("ds-agent-response"))return true;return!e.closest("ds-agent-response")}));return r.length>t.length?r:t}reconcilePrependPosition(e,s){if(!this.viewport||!e.isConnected)return;const t=e.getBoundingClientRect().top-this.viewport.getBoundingClientRect().top;this.viewport.scrollTop+=t-s}schedulePrependReconciliation(e,s,t){const r=++this.prependReconciliation;const a=t.flatMap((e=>[e,...Array.from(e.querySelectorAll("*"))])).map((e=>{const s=e.componentOnReady;return s?s.call(e).catch((()=>undefined)):null})).filter((e=>Boolean(e)));void Promise.all(a).then((()=>{requestAnimationFrame((()=>{if(r!==this.prependReconciliation)return;this.reconcilePrependPosition(e,s);requestAnimationFrame((()=>{if(r!==this.prependReconciliation)return;this.reconcilePrependPosition(e,s);this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop();this.scrollOverlayController?.sync()}))}))}))}positionNewTurn(e){if(!this.viewport)return;this.activeTurnAnchor=e;this.syncTurnClearance();requestAnimationFrame((()=>this.finishPositionNewTurn(e)))}finishPositionNewTurn(e){if(!this.viewport||!e.isConnected)return;const s=this.viewport.getBoundingClientRect();const t=e.getBoundingClientRect().top-s.top+this.viewport.scrollTop;const r=getComputedStyle(this.el).getPropertyValue("--ds-message-scroller-anchor-offset").trim();const a=l(r,"var(--dimension-space-800)");const o=Math.max(this.viewport.scrollHeight-this.viewport.clientHeight,0);const i=Math.min(Math.max(t-a,0),o);this.following=o-i<=u;this.followReleased=!this.following;this.showScrollToLatest=!this.following;this.programmatic=true;this.viewport.scrollTop=i;requestAnimationFrame((()=>{this.programmatic=false;this.following=this.isAtLiveEdge();this.followReleased=!this.following;this.showScrollToLatest=!this.following;this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop()}));this.scrollOverlayController?.sync()}rememberActiveTurnAnchorTop(){if(!this.viewport||!this.activeTurnAnchor?.isConnected)return;this.activeTurnAnchorViewportTop=this.activeTurnAnchor.getBoundingClientRect().top-this.viewport.getBoundingClientRect().top}syncTurnClearance(){if(!this.viewport||!this.activeTurnAnchor?.isConnected)return;const e=this.getTranscriptChildren();const s=e[e.length-1];if(!s)return;const t=this.activeTurnAnchor.getBoundingClientRect();const r=s.getBoundingClientRect();const a=getComputedStyle(this.el).getPropertyValue("--ds-message-scroller-anchor-offset").trim();const o=l(a,"var(--dimension-space-800)");const i=Math.max(r.bottom-t.top,0);const d=Math.max(Math.ceil(this.viewport.clientHeight-o-i),0);if(d===this.turnClearance)return;this.turnClearance=d;this.el.style.setProperty("--ds-message-scroller-turn-clearance",`${d}px`)}applyDefaultPosition(){if(!this.viewport)return;this.releasePendingAtLiveEdge=false;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.followReleased=true;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.scrollOverlayController?.sync();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.followReleased=!this.following;this.showScrollToLatest=!this.following;this.scrollOverlayController?.sync();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.followReleased=false;this.showScrollToLatest=false;this.scrollOverlayController?.sync()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=u}render(){return r(a,{key:"71da536fc68d85c8da755dc93aa64237bdcad84a"},r("div",{key:"853aec9a2a75daeba5c5f00d46aab74a93427695",class:"message-scroller"},r("div",{key:"88d602eb2e971e759bad18859d3c5e3f451e4b65",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:e=>{if(e.pointerType==="touch")this.releaseFollow()},onWheel:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "].includes(e.key)){this.releaseFollow()}}},r("div",{key:"7bf678765cc2d4e75b73da72f0927299ba14b693",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},r("slot",{key:"7b03d33a12ff4756266ffc47c8ab06833ebe86c2",ref:e=>{this.transcriptSlot=e},onSlotchange:this.handleTranscriptSlotChange}))),r("div",{key:"775e76853d4e772f0503c9efbf9e3ae57da4ca72",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},r("div",{key:"86aeb161772d76a8d089f12187526b46d0130fd9",class:"message-scroller__overlay-stack"},r("div",{key:"462488e753d65b8ab9002312fdb099ef5a9144ae",class:"message-scroller__interaction"},r("slot",{key:"edb3b0415198a996570d8e5a9b7ec8f34a96cf06",name:"interaction"})),r("div",{key:"d9749cbaa783d27005aa35530b6f6c3399396e0b",class:"message-scroller__overlay-content"},r("slot",{key:"305417f51585ee3c682ec7fbf5379fcbb32c51f7",name:"overlay"})))),this.showScrollToLatest?r("div",{class:"message-scroller__control ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},r("ds-tooltip",{label:"Scroll to latest message",side:"top",size:"sm"},r("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()}))):null))}get el(){return this}static get style(){return m()+v()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(o(e))){customElements.define(o(e),p)}break;case"ds-badge":if(!customElements.get(o(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(e))){n()}break;case"ds-icon":if(!customElements.get(o(e))){c()}break;case"ds-loader":if(!customElements.get(o(e))){h()}break;case"ds-text":if(!customElements.get(o(e))){f()}break;case"ds-tooltip":if(!customElements.get(o(e))){g()}break}}))}b();const k=p;const w=b;export{k as DsMessageScroller,w as defineCustomElement};
+import{p as e,H as s,c as t,h as r,a,t as o}from"./index.js";import{S as i}from"./p-Ck1hgD6g.js";import{r as l}from"./p-CochmPyg.js";import{d}from"./p-DzPtYdXy.js";import{d as n}from"./p-7MWaWl8w.js";import{d as c}from"./p-Cea7rROU.js";import{d as h}from"./p-0XTyQNRG.js";import{d as f}from"./p-Cd1JnnVK.js";import{d as g}from"./p-9X_p0bHr.js";const m=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const v=()=>`.ds-control-elevation.sc-ds-message-scroller-h,.ds-control-elevation.sc-ds-message-scroller{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-message-scroller-h::after,.ds-control-elevation.sc-ds-message-scroller::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-message-scroller-h,.ds-control-elevation--sm.sc-ds-message-scroller{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-message-scroller-h,.ds-control-elevation--md.sc-ds-message-scroller{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-message-scroller-h,.ds-control-elevation--floating.sc-ds-message-scroller{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-message-scroller{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-message-scroller{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-message-scroller,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-message-scroller{scale:none;transition:none}}.sc-ds-message-scroller-h{--ds-message-scroller-anchor-offset:var(--dimension-space-800);display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overflow-anchor:none;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--ds-message-scroller-content-max-width, var(--dimension-panel-width-2xl));min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:max(     calc(var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)),     var(--ds-message-scroller-turn-clearance, 0px)   );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__overlay-stack.sc-ds-message-scroller{display:grid;width:100%}.message-scroller__interaction.sc-ds-message-scroller,.message-scroller__overlay-content.sc-ds-message-scroller{min-width:0}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc(var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200));left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const u=24;const p=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart",7);this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.followReleased=false;this.releasePendingAtLiveEdge=false;this.atStart=false;this.programmatic=false;this.transcriptChildren=[];this.knownTranscriptElements=new Set;this.knownTurnAnchors=new Set;this.turnClearance=0;this.prependReconciliation=0;this.handleTranscriptChange=()=>{const e=this.getTranscriptChildren();const s=this.transcriptChildren;const t=this.knownTranscriptElements.size>0;const r=new Set(this.knownTranscriptElements);const a=[...e].reverse().find(((s,t)=>{if(!s.matches("ds-message[scroll-anchor]")||this.knownTurnAnchors.has(s)){return false}const r=e.length-t-1;return e.slice(r+1).every((e=>!this.knownTranscriptElements.has(e)))}));e.forEach((e=>{this.knownTranscriptElements.add(e);if(e.matches("ds-message[scroll-anchor]")){this.knownTurnAnchors.add(e)}}));if(!s.length){this.transcriptChildren=e;if(a&&t){requestAnimationFrame((()=>this.positionNewTurn(a)))}return}const o=e.findIndex((e=>r.has(e)));const i=e.filter((e=>!r.has(e)));const l=e.length>s.length&&s.every(((t,r)=>e[e.length-s.length+r]===t))||!a&&i.length>0&&o>0&&i.every((s=>e.indexOf(s)<o));this.transcriptChildren=e;if(l){if(this.viewport){const e=this.activeTurnAnchor?.isConnected?this.activeTurnAnchor:s[0];const t=this.activeTurnAnchor?.isConnected?this.activeTurnAnchorViewportTop:this.firstChildViewportTop;if(e&&t!==undefined){this.reconcilePrependPosition(e,t);this.schedulePrependReconciliation(e,t,i)}}this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop();this.scrollOverlayController?.sync();return}if(a){requestAnimationFrame((()=>this.positionNewTurn(a)))}};this.handleTranscriptSlotChange=()=>this.handleTranscriptChange();this.handleScroll=()=>{if(!this.viewport)return;this.scrollOverlayController?.sync();this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop();if(this.programmatic)return;const e=this.isAtLiveEdge();if(this.releasePendingAtLiveEdge&&e){this.following=false;this.followReleased=true;this.showScrollToLatest=false;return}this.releasePendingAtLiveEdge=false;this.following=e;this.followReleased=!this.following;this.showScrollToLatest=!this.following;const s=this.viewport.scrollTop<=u;if(s&&!this.atStart)this.dsReachStart.emit();this.atStart=s};this.releaseFollow=()=>{this.prependReconciliation+=1;this.releasePendingAtLiveEdge=this.isAtLiveEdge();this.following=false;this.followReleased=true;this.showScrollToLatest=!this.releasePendingAtLiveEdge};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.releaseFollow()}}}componentDidLoad(){this.transcriptChildren=this.getTranscriptChildren();this.transcriptChildren.forEach((e=>{this.knownTranscriptElements.add(e);if(e.matches("ds-message[scroll-anchor]")){this.knownTurnAnchors.add(e)}}));this.rememberFirstChildTop();this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.prependReconciliation+=1;this.scrollOverlayController?.disconnect();this.mutationObserver?.disconnect();if(this.programmaticTimer)clearTimeout(this.programmaticTimer);document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.releasePendingAtLiveEdge=false;this.following=false;this.followReleased=true;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.releasePendingAtLiveEdge=false;this.scrollTo(0);this.following=false;this.followReleased=true;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.releasePendingAtLiveEdge=false;this.following=true;this.followReleased=false;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;const s=this.motionBehavior();this.viewport.scrollTo({top:e,behavior:s});if(this.programmaticTimer)clearTimeout(this.programmaticTimer);this.programmaticTimer=setTimeout((()=>{this.programmatic=false;this.programmaticTimer=undefined;if(this.following){this.viewport.scrollTop=e;this.showScrollToLatest=false}}),s==="smooth"?600:0)}connectObservers(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new i({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:".message-scroller__overlay-stack",onGeometryChange:()=>this.handleContentGrowth()});this.scrollOverlayController.connect();this.mutationObserver=new MutationObserver((()=>{this.handleTranscriptChange();this.handleContentGrowth()}));this.mutationObserver.observe(this.el,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;this.syncTurnClearance();const e=this.viewport.scrollHeight;if(this.autoFollow&&this.following&&!this.followReleased){this.viewport.scrollTop=e}if(this.releasePendingAtLiveEdge&&!this.isAtLiveEdge()){this.releasePendingAtLiveEdge=false}this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.scrollOverlayController?.sync()}rememberFirstChildTop(){if(!this.viewport)return;const e=this.getTranscriptChildren()[0];this.firstChildViewportTop=e?e.getBoundingClientRect().top-this.viewport.getBoundingClientRect().top:undefined}getTranscriptChildren(){const e=this.transcriptSlot?.assignedElements()??[];const t=e.filter((e=>e instanceof s&&(e.matches("ds-message")||e.matches("ds-agent-response"))));const r=Array.from(this.el.querySelectorAll("ds-message, ds-agent-response")).filter((e=>{if(e.closest(".message-scroller__interaction, .message-scroller__overlay-content")){return false}if(e.matches("ds-agent-response"))return true;return!e.closest("ds-agent-response")}));return r.length>t.length?r:t}reconcilePrependPosition(e,s){if(!this.viewport||!e.isConnected)return;const t=e.getBoundingClientRect().top-this.viewport.getBoundingClientRect().top;this.viewport.scrollTop+=t-s}schedulePrependReconciliation(e,s,t){const r=++this.prependReconciliation;const a=t.flatMap((e=>[e,...Array.from(e.querySelectorAll("*"))])).map((e=>{const s=e.componentOnReady;return s?s.call(e).catch((()=>undefined)):null})).filter((e=>Boolean(e)));void Promise.all(a).then((()=>{requestAnimationFrame((()=>{if(r!==this.prependReconciliation)return;this.reconcilePrependPosition(e,s);requestAnimationFrame((()=>{if(r!==this.prependReconciliation)return;this.reconcilePrependPosition(e,s);this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop();this.scrollOverlayController?.sync()}))}))}))}positionNewTurn(e){if(!this.viewport)return;this.activeTurnAnchor=e;this.syncTurnClearance();requestAnimationFrame((()=>this.finishPositionNewTurn(e)))}finishPositionNewTurn(e){if(!this.viewport||!e.isConnected)return;const s=this.viewport.getBoundingClientRect();const t=e.getBoundingClientRect().top-s.top+this.viewport.scrollTop;const r=getComputedStyle(this.el).getPropertyValue("--ds-message-scroller-anchor-offset").trim();const a=l(r,"var(--dimension-space-800)");const o=Math.max(this.viewport.scrollHeight-this.viewport.clientHeight,0);const i=Math.min(Math.max(t-a,0),o);this.following=o-i<=u;this.followReleased=!this.following;this.showScrollToLatest=!this.following;this.programmatic=true;this.viewport.scrollTop=i;requestAnimationFrame((()=>{this.programmatic=false;this.following=this.isAtLiveEdge();this.followReleased=!this.following;this.showScrollToLatest=!this.following;this.rememberFirstChildTop();this.rememberActiveTurnAnchorTop()}));this.scrollOverlayController?.sync()}rememberActiveTurnAnchorTop(){if(!this.viewport||!this.activeTurnAnchor?.isConnected)return;this.activeTurnAnchorViewportTop=this.activeTurnAnchor.getBoundingClientRect().top-this.viewport.getBoundingClientRect().top}syncTurnClearance(){if(!this.viewport||!this.activeTurnAnchor?.isConnected)return;const e=this.getTranscriptChildren();const s=e[e.length-1];if(!s)return;const t=this.activeTurnAnchor.getBoundingClientRect();const r=s.getBoundingClientRect();const a=getComputedStyle(this.el).getPropertyValue("--ds-message-scroller-anchor-offset").trim();const o=l(a,"var(--dimension-space-800)");const i=Math.max(r.bottom-t.top,0);const d=Math.max(Math.ceil(this.viewport.clientHeight-o-i),0);if(d===this.turnClearance)return;this.turnClearance=d;this.el.style.setProperty("--ds-message-scroller-turn-clearance",`${d}px`)}applyDefaultPosition(){if(!this.viewport)return;this.releasePendingAtLiveEdge=false;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.followReleased=true;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.scrollOverlayController?.sync();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.followReleased=!this.following;this.showScrollToLatest=!this.following;this.scrollOverlayController?.sync();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.followReleased=false;this.showScrollToLatest=false;this.scrollOverlayController?.sync()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=u}render(){return r(a,{key:"71da536fc68d85c8da755dc93aa64237bdcad84a"},r("div",{key:"853aec9a2a75daeba5c5f00d46aab74a93427695",class:"message-scroller"},r("div",{key:"88d602eb2e971e759bad18859d3c5e3f451e4b65",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:e=>{if(e.pointerType==="touch")this.releaseFollow()},onWheel:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","ArrowDown","PageUp","PageDown","Home","End"," "].includes(e.key)){this.releaseFollow()}}},r("div",{key:"7bf678765cc2d4e75b73da72f0927299ba14b693",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},r("slot",{key:"7b03d33a12ff4756266ffc47c8ab06833ebe86c2",ref:e=>{this.transcriptSlot=e},onSlotchange:this.handleTranscriptSlotChange}))),r("div",{key:"775e76853d4e772f0503c9efbf9e3ae57da4ca72",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},r("div",{key:"86aeb161772d76a8d089f12187526b46d0130fd9",class:"message-scroller__overlay-stack"},r("div",{key:"462488e753d65b8ab9002312fdb099ef5a9144ae",class:"message-scroller__interaction"},r("slot",{key:"edb3b0415198a996570d8e5a9b7ec8f34a96cf06",name:"interaction"})),r("div",{key:"d9749cbaa783d27005aa35530b6f6c3399396e0b",class:"message-scroller__overlay-content"},r("slot",{key:"305417f51585ee3c682ec7fbf5379fcbb32c51f7",name:"overlay"})))),this.showScrollToLatest?r("div",{class:"message-scroller__control ds-control-elevation ds-control-elevation--md ds-control-elevation--press-scale"},r("ds-tooltip",{label:"Scroll to latest message",side:"top",size:"sm"},r("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()}))):null))}get el(){return this}static get style(){return m()+v()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(o(e))){customElements.define(o(e),p)}break;case"ds-badge":if(!customElements.get(o(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(e))){n()}break;case"ds-icon":if(!customElements.get(o(e))){c()}break;case"ds-loader":if(!customElements.get(o(e))){h()}break;case"ds-text":if(!customElements.get(o(e))){f()}break;case"ds-tooltip":if(!customElements.get(o(e))){g()}break}}))}b();const k=p;const w=b;export{k as DsMessageScroller,w as defineCustomElement};
 //# sourceMappingURL=ds-message-scroller.js.map

package/dist/components/ds-mobile-header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-6rB0eAda.js";const r=o;const t=s;export{r as DsMobileHeader,t as defineCustomElement};
+import{M as o,d as s}from"./p-FxtgCvhA.js";const t=o;const p=s;export{t as DsMobileHeader,p as defineCustomElement};
 //# sourceMappingURL=ds-mobile-header.js.map

package/dist/components/ds-mobile-section-switcher.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-CZ144LS5.js";const t=o;const p=s;export{t as DsMobileSectionSwitcher,p as defineCustomElement};
+import{M as o,d as s}from"./p-0X-4KGQf.js";const t=o;const p=s;export{t as DsMobileSectionSwitcher,p as defineCustomElement};
 //# sourceMappingURL=ds-mobile-section-switcher.js.map

package/dist/components/ds-mobile-sheet-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-De0qjzPu.js";const t=o;const p=s;export{t as DsMobileSheetNav,p as defineCustomElement};
+import{M as o,d as s}from"./p-DAFR4U9P.js";const t=o;const p=s;export{t as DsMobileSheetNav,p as defineCustomElement};
 //# sourceMappingURL=ds-mobile-sheet-nav.js.map

package/dist/components/ds-modal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-9ykZwPlI.js";const t=o;const p=s;export{t as DsModal,p as defineCustomElement};
+import{M as o,d as s}from"./p-CL0tECXf.js";const t=o;const p=s;export{t as DsModal,p as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

package/dist/components/ds-pagination.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-CeKa4VbU.js";const t=o;const a=s;export{t as DsPagination,a as defineCustomElement};
+import{P as o,d as s}from"./p-DXbryJHz.js";const r=o;const t=s;export{r as DsPagination,t as defineCustomElement};
 //# sourceMappingURL=ds-pagination.js.map

package/dist/components/ds-panel-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-CB3fv_Oh.js";const t=o;const p=s;export{t as DsPanelNav,p as defineCustomElement};
+import{P as o,d as s}from"./p-DrVA5L25.js";const r=o;const t=s;export{r as DsPanelNav,t as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map

package/dist/components/ds-panel-tool-header.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-BbG7nOcz.js";const t=o;const c=s;export{t as DsPanelToolHeader,c as defineCustomElement};
+import{P as o,d as s}from"./p-DzVYGJJv.js";const t=o;const p=s;export{t as DsPanelToolHeader,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-header.js.map

package/dist/components/ds-panel-tool-search.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as o,h as a,a as r,t}from"./index.js";import{a as n}from"./p-BEttT0UB.js";import{d as i}from"./p-DzPtYdXy.js";import{d as c}from"./p-DSy1oOnd.js";import{d as l}from"./p-Bv6FSDPR.js";import{d}from"./p-Cea7rROU.js";import{d as h}from"./p-pxN8JGEh.js";import{d as p}from"./p-0XTyQNRG.js";import{d as m}from"./p-Cd1JnnVK.js";import{d as f}from"./p-pnO8tAYB.js";const g=()=>`.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{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-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search--without-focus-boundary.sc-ds-panel-tool-search::after{display:none}.select-search__control.sc-ds-panel-tool-search{display:flex;width:100%;min-width:0}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const u=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.dsClear=o(this,"dsClear",7);this.dsFilterToggle=o(this,"dsFilterToggle",7);this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=s=>{this.value=s;this.dsChange.emit(s)}}componentDidRender(){const s=this.el.querySelector("input");if(s&&s.value!==this.value)s.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const s=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(s?.setFocus?.())}render(){return a(r,{key:"fe6884e8c441f66f94e916fe013e6367d93a1586"},a("div",{key:"fddf33898f788ec873a0d1bd62f13fa891ae6eb9",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(n,{key:"1dbd969e91aec6290758a5313f386053326a753c",hasFocusBoundary:false,hasInteractionFill:false,value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:s=>{s.stopPropagation()},onDsClick:s=>{s.stopPropagation();this.dsFilterToggle.emit(s.detail)}}))):null))}get el(){return this}static get style(){return g()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tool-search":if(!customElements.get(t(s))){customElements.define(t(s),u)}break;case"ds-badge":if(!customElements.get(t(s))){i()}break;case"ds-button-unfilled":if(!customElements.get(t(s))){c()}break;case"ds-divider":if(!customElements.get(t(s))){l()}break;case"ds-icon":if(!customElements.get(t(s))){d()}break;case"ds-input":if(!customElements.get(t(s))){h()}break;case"ds-loader":if(!customElements.get(t(s))){p()}break;case"ds-text":if(!customElements.get(t(s))){m()}break;case"ds-tooltip":if(!customElements.get(t(s))){f()}break}}))}v();const b=u;const x=v;export{b as DsPanelToolSearch,x as defineCustomElement};
+import{p as s,H as e,c as o,h as a,a as r,t}from"./index.js";import{a as n}from"./p-BEttT0UB.js";import{d as i}from"./p-DzPtYdXy.js";import{d as c}from"./p-7MWaWl8w.js";import{d as l}from"./p-Bv6FSDPR.js";import{d}from"./p-Cea7rROU.js";import{d as h}from"./p-nVv71P3f.js";import{d as p}from"./p-0XTyQNRG.js";import{d as m}from"./p-Cd1JnnVK.js";import{d as f}from"./p-9X_p0bHr.js";const g=()=>`.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{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-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search--without-focus-boundary.sc-ds-panel-tool-search::after{display:none}.select-search__control.sc-ds-panel-tool-search{display:flex;width:100%;min-width:0}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;width:100%;height:100%;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const u=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.dsClear=o(this,"dsClear",7);this.dsFilterToggle=o(this,"dsFilterToggle",7);this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=s=>{this.value=s;this.dsChange.emit(s)}}componentDidRender(){const s=this.el.querySelector("input");if(s&&s.value!==this.value)s.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const s=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(s?.setFocus?.())}render(){return a(r,{key:"fe6884e8c441f66f94e916fe013e6367d93a1586"},a("div",{key:"fddf33898f788ec873a0d1bd62f13fa891ae6eb9",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(n,{key:"1dbd969e91aec6290758a5313f386053326a753c",hasFocusBoundary:false,hasInteractionFill:false,value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:s=>{s.stopPropagation()},onDsClick:s=>{s.stopPropagation();this.dsFilterToggle.emit(s.detail)}}))):null))}get el(){return this}static get style(){return g()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tool-search":if(!customElements.get(t(s))){customElements.define(t(s),u)}break;case"ds-badge":if(!customElements.get(t(s))){i()}break;case"ds-button-unfilled":if(!customElements.get(t(s))){c()}break;case"ds-divider":if(!customElements.get(t(s))){l()}break;case"ds-icon":if(!customElements.get(t(s))){d()}break;case"ds-input":if(!customElements.get(t(s))){h()}break;case"ds-loader":if(!customElements.get(t(s))){p()}break;case"ds-text":if(!customElements.get(t(s))){m()}break;case"ds-tooltip":if(!customElements.get(t(s))){f()}break}}))}v();const b=u;const x=v;export{b as DsPanelToolSearch,x as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-search.js.map

package/dist/components/ds-panel-tools.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-Bd8I2oXN.js";const t=o;const p=s;export{t as DsPanelTools,p as defineCustomElement};
+import{P as o,d as s}from"./p-COFw_fcj.js";const t=o;const c=s;export{t as DsPanelTools,c as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-BFit8o0r.js";const t=o;const r=s;export{t as DsSelect,r as defineCustomElement};
+import{S as o,d as s}from"./p-BIaHDBfP.js";const t=o;const a=s;export{t as DsSelect,a as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map