@ds-mo/ui 2.11.2 → 2.13.0

package/src/wc/utils/control-density.css

@@ -0,0 +1,42 @@
+/**
+ * Control density recipes — shared metrics for md / sm / xs interactive controls
+ * (Tag, PanelNav items, BarNav tabs, Menu items, Chip, etc.).
+ *
+ * Apply `.ds-control--md|sm|xs` on the control (host or inner row). Then use the
+ * `--ds-control-*` vars for height, padding, icon box, label inset, gap, and radius.
+ *
+ * Both `:host(.ds-control--*)` and `.ds-control--*` are listed so Stencil scoped
+ * components work whether the class is on the host (Tag) or an inner item (PanelNav).
+ *
+ * @see AGENTS.md — "Control density recipes"
+ */
+
+:host(.ds-control--md),
+.ds-control--md {
+  --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-radius: var(--dimension-radius-025);
+}
+
+:host(.ds-control--sm),
+.ds-control--sm {
+  --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-radius: var(--dimension-radius-025);
+}
+
+:host(.ds-control--xs),
+.ds-control--xs {
+  --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: var(--dimension-space-025);
+  --ds-control-radius: var(--dimension-radius-025);
+}

package/src/wc/utils/control-inactive.css

@@ -0,0 +1,20 @@
+/**
+ * Control inactive — shared disabled/inactive visual for interactive controls.
+ *
+ * Apply `.ds-control-inactive` when the control’s `isInactive` prop (or item
+ * `isInactive` field) is true. Opacity is 25% so inactive chrome stays
+ * recognizable but clearly non-interactive.
+ *
+ * Both `:host(.ds-control-inactive)` and `.ds-control-inactive` are listed so
+ * Stencil scoped components work whether the class is on the host (Chip) or an
+ * inner control (button, menu item, tab).
+ *
+ * @see AGENTS.md — "Control inactive"
+ */
+
+:host(.ds-control-inactive),
+.ds-control-inactive {
+  opacity: 0.25;
+  pointer-events: none;
+  cursor: not-allowed;
+}

package/src/wc/utils/control-width.css

@@ -0,0 +1,28 @@
+/**
+ * Control width fit — hug content or fill the parent.
+ *
+ * Apply `.ds-control-width--hug|fill` on the host (and optionally the inner
+ * control). Defaults: buttons hug; form fields (Select, Input) fill.
+ *
+ * Hug uses `fit-content` + `align-self: flex-start` so column flex parents
+ * with `align-items: stretch` don't force the control full-width.
+ *
+ * @see AGENTS.md — control density / shared control recipes
+ */
+
+:host(.ds-control-width--hug),
+.ds-control-width--hug {
+  width: fit-content;
+  max-width: 100%;
+  flex: 0 0 auto;
+  align-self: flex-start;
+}
+
+:host(.ds-control-width--fill),
+.ds-control-width--fill {
+  width: 100%;
+  min-width: 0;
+  /* Grow when the parent is a flex row; still 100% in block layouts. */
+  flex: 1 1 auto;
+  align-self: stretch;
+}

package/src/wc/utils/control-width.ts

@@ -0,0 +1,10 @@
+/** Shared width fit for interactive controls (buttons, select, …). */
+export type ControlWidth = 'hug' | 'fill';
+
+/** Host / control class map for `width="hug" | "fill"`. */
+export function controlWidthClass(width: ControlWidth): Record<string, boolean> {
+  return {
+    'ds-control-width--hug': width === 'hug',
+    'ds-control-width--fill': width === 'fill',
+  };
+}

package/src/wc/utils/index.ts

@@ -21,3 +21,5 @@ export type {
 } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS, TOKEN_CSS_LENGTHS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';
+export { controlWidthClass } from './control-width';
+export type { ControlWidth } from './control-width';

package/src/wc/utils/interaction-fill.css

@@ -0,0 +1,162 @@
+/**
+ * Interaction fill — selected (`::before`) + hover/press (`::after`) overlays.
+ *
+ * Paint translucent interaction tokens *over* the control’s own background —
+ * never by swapping `background-color` on `:hover` / `:active`, and never via
+ * `color-mix(bg, fg)` for control chrome.
+ *
+ * Paint order (bottom → top):
+ *   1. Element background (intent / surface)
+ *   2. `::before` — selected / active (opt-in via `.ds-interaction-fill--selected`)
+ *   3. Label / icon / badge content (`.ds-interaction-fill__content` or z-index: 2)
+ *   4. `::after` — hover / press wash + optional inset border + inset focus ring
+ *
+ * Apply `.ds-interaction-fill` on the interactive element (host or inner row).
+ * Omit `.ds-interaction-fill--selected` when chrome wants icon-color-only
+ * selection (`activeFill={false}` on unfilled icon buttons).
+ *
+ * Fills use positive z-index so they paint *above* an opaque host background
+ * (Chip, ButtonFilled). Content sits under the hover wash so badge dots are
+ * covered; raise label/icon with `.ds-interaction-fill__content` (z-index: 2)
+ * — never above `::after` (z-index: 3).
+ *
+ * Inset borders must paint on `::after` (not the element’s own `box-shadow`)
+ * so the stroke stays visible above selected / hover washes. Set
+ * `--ds-interaction-border-*` or use `.ds-interaction-fill--bordered`.
+ * Do not use a layout `border` on interaction targets.
+ *
+ * If the control uses `all: unset`, re-assert `position: relative; z-index: 0`
+ * after the unset so this util’s stacking context still applies.
+ *
+ * Surface helpers remap tokens + `--ds-focus-ring-color`:
+ *   `.ds-interaction-fill--on-medium|bold|strong|always-dark|navigation`
+ *
+ * Override hooks: `--ds-interaction-hover`, `--ds-interaction-pressed`,
+ * `--ds-interaction-active`, `--ds-interaction-border-color`,
+ * `--ds-interaction-border-width`.
+ *
+ * @see AGENTS.md — "Interaction fill"
+ */
+
+:host(.ds-interaction-fill),
+.ds-interaction-fill {
+  position: relative;
+  z-index: 0;
+  --ds-interaction-hover: var(--color-interaction-hover);
+  --ds-interaction-pressed: var(--color-interaction-pressed);
+  --ds-interaction-active: var(--color-interaction-active);
+  /* Inset stroke on ::after — default off (transparent / zero width). */
+  --ds-interaction-border-width: 0px;
+  --ds-interaction-border-color: transparent;
+}
+
+:host(.ds-interaction-fill)::before,
+.ds-interaction-fill::before,
+:host(.ds-interaction-fill)::after,
+.ds-interaction-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: transparent;
+  pointer-events: none;
+  transition: none;
+}
+
+/* Layer stack (bottom → top): selected → content → hover/press + border (topmost). */
+:host(.ds-interaction-fill)::before,
+.ds-interaction-fill::before {
+  z-index: 1;
+}
+
+:host(.ds-interaction-fill)::after,
+.ds-interaction-fill::after {
+  z-index: 3;
+  /* Border above selected (::before) and this pseudo’s own hover wash. */
+  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);
+}
+
+/* Opt-in tertiary inset border (override color via `--ds-interaction-border-color`). */
+:host(.ds-interaction-fill--bordered),
+.ds-interaction-fill--bordered {
+  --ds-interaction-border-width: var(--dimension-stroke-width-012);
+  --ds-interaction-border-color: var(--color-border-tertiary);
+}
+
+:host(.ds-interaction-fill--selected)::before,
+.ds-interaction-fill--selected::before {
+  background: var(--ds-interaction-active);
+}
+
+/*
+ * Notification-dot halo: when selected fill is on, set `--ds-interaction-dot-ring`
+ * to the active wash so rings can match. Prefer also remapping the consumer’s
+ * surface ring token (e.g. `--ds-button-unfilled-dot-ring`) or passing
+ * `background="var(--ds-interaction-active)"` from the parent when selected —
+ * custom-property fallbacks through nested scoped hosts are easy to miss.
+ * Omit `--selected` (chrome `activeFill={false}`) to keep the surface ring.
+ */
+:host(.ds-interaction-fill--selected),
+.ds-interaction-fill--selected {
+  --ds-interaction-dot-ring: var(--ds-interaction-active);
+}
+
+:host(.ds-interaction-fill:hover:not(:disabled))::after,
+.ds-interaction-fill:hover:not(:disabled)::after {
+  background: var(--ds-interaction-hover);
+}
+
+:host(.ds-interaction-fill:active:not(:disabled))::after,
+.ds-interaction-fill:active:not(:disabled)::after {
+  background: var(--ds-interaction-pressed);
+}
+
+/* Content under the hover wash (so badge dots are covered by ::after). */
+:host(.ds-interaction-fill) > .ds-interaction-fill__content,
+.ds-interaction-fill > .ds-interaction-fill__content,
+.ds-interaction-fill__content {
+  position: relative;
+  z-index: 2;
+}
+
+/* ── Surface context ─────────────────────────────────────────────────────── */
+
+:host(.ds-interaction-fill--on-medium),
+.ds-interaction-fill--on-medium {
+  --ds-interaction-hover: var(--color-interaction-on-medium-background-hover);
+  --ds-interaction-pressed: var(--color-interaction-on-medium-background-pressed);
+  --ds-interaction-active: var(--color-interaction-on-medium-background-active);
+  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);
+}
+
+:host(.ds-interaction-fill--on-bold),
+.ds-interaction-fill--on-bold {
+  --ds-interaction-hover: var(--color-interaction-on-bold-background-hover);
+  --ds-interaction-pressed: var(--color-interaction-on-bold-background-pressed);
+  --ds-interaction-active: var(--color-interaction-on-bold-background-active);
+  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);
+}
+
+:host(.ds-interaction-fill--on-strong),
+.ds-interaction-fill--on-strong {
+  --ds-interaction-hover: var(--color-interaction-on-strong-background-hover);
+  --ds-interaction-pressed: var(--color-interaction-on-strong-background-pressed);
+  --ds-interaction-active: var(--color-interaction-on-strong-background-active);
+  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);
+}
+
+:host(.ds-interaction-fill--on-always-dark),
+.ds-interaction-fill--on-always-dark {
+  --ds-interaction-hover: var(--color-always-dark-interaction-hover);
+  --ds-interaction-pressed: var(--color-always-dark-interaction-pressed);
+  --ds-interaction-active: var(--color-always-dark-interaction-active);
+  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);
+}
+
+:host(.ds-interaction-fill--on-navigation),
+.ds-interaction-fill--on-navigation {
+  --ds-interaction-hover: var(--color-navigation-interaction-hover);
+  --ds-interaction-pressed: var(--color-navigation-interaction-pressed);
+  --ds-interaction-active: var(--color-navigation-interaction-active);
+  --ds-focus-ring-color: var(--color-navigation-interaction-focus);
+}

package/src/wc/utils/scroll-edge-fade.css

@@ -10,6 +10,9 @@
   --ds-scroll-edge-fade-size: var(--dimension-size-600);
 }
 
+/* Mask gradients use #000 / transparent as luminance stops — not theme colors. */
+/* stylelint-disable color-no-hex */
+
 .scroll-edge-fade--top {
   -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
   mask-image: linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);
@@ -73,3 +76,5 @@
   -webkit-mask-image: none;
   mask-image: none;
 }
+
+/* stylelint-enable color-no-hex */

package/src/wc/utils/token-defaults.ts

@@ -9,6 +9,7 @@ import {
   dimensionRadius025,
   dimensionSize200,
   dimensionSize300,
+  dimensionSize400,
   dimensionSize600,
   dimensionSize800,
   dimensionSpace050,
@@ -20,6 +21,8 @@ import {
   typographyLineheightXs,
   effectAnimationDelayLong2,
   effectAnimationDelayMedium1,
+  effectAnimationDelayMedium3,
+  effectAnimationDelayInstant,
   effectAnimationDelayShort2,
   effectAnimationDurationMedium1,
   effectAnimationDurationShort3,
@@ -34,6 +37,7 @@ export const TOKEN_DEFAULTS = {
   radius025: dimensionRadius025,
   size200: dimensionSize200,
   size300: dimensionSize300,
+  size400: dimensionSize400,
   size600: dimensionSize600,
   size800: dimensionSize800,
   iconographyMd: dimensionIconographyMd,
@@ -52,13 +56,19 @@ export const TOKEN_DEFAULTS = {
   motionShort3: effectMotionShort3,
   animationDurationShort3: effectAnimationDurationShort3,
   animationDurationMedium1: effectAnimationDurationMedium1,
+  animationDelayInstant: effectAnimationDelayInstant,
   animationDelayMedium1: effectAnimationDelayMedium1,
+  animationDelayMedium3: effectAnimationDelayMedium3,
   animationDelayShort2: effectAnimationDelayShort2,
   animationDelayLong2: effectAnimationDelayLong2,
   /** Unmeasured menu height fallback: 20× base (160px at default scale). */
   menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',
   /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */
   tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',
+  /** Fill-mode donut diameter floor: 16× size-base (128px). */
+  donutFillMin: 'calc(var(--dimension-size-base) * 16)',
+  /** Fill-mode donut diameter ceiling: 24× size-base (192px). */
+  donutFillMax: 'calc(var(--dimension-size-base) * 24)',
 } as const;
 
 export type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;

package/dist/components/ds-accordion.js

@@ -1,2 +0,0 @@
-import{p as e,t as s,H as o,c as t,h as i,a as n}from"./index.js";const r=()=>`.sc-ds-accordion-h{display:flex;flex-direction:column}.item.sc-ds-accordion{border-bottom:1px solid var(--color-border-secondary)}.item.sc-ds-accordion:first-child{border-top:1px solid var(--color-border-secondary)}.item--inactive.sc-ds-accordion{opacity:0.5;pointer-events:none}.trigger.sc-ds-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--dimension-space-100) var(--dimension-space-050);background:none;border:none;cursor:pointer;color:var(--color-foreground-primary);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none;box-sizing:border-box;text-align:left}.trigger.sc-ds-accordion:hover{background-color:var(--color-interaction-hover)}.trigger.sc-ds-accordion:active{background-color:var(--color-interaction-pressed)}.trigger.sc-ds-accordion:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.chevron.sc-ds-accordion{font-size:18px;line-height:1;transform:rotate(0deg);transition:transform var(--effect-motion-short-3);color:var(--color-foreground-secondary);flex-shrink:0}.chevron--open.sc-ds-accordion{transform:rotate(90deg)}.body.sc-ds-accordion{overflow:hidden;transition:height var(--effect-motion-short-3)}.body-inner.sc-ds-accordion{padding:var(--dimension-space-050) var(--dimension-space-050) var(--dimension-space-100);color:var(--color-foreground-secondary)}`;let c=0;const a=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.dsExpandedChange=t(this,"dsExpandedChange");this.items=[];this.multiple=false;this.expandedIds="";this.internalIds=[];this.heights={};this.instanceId=++c;this.resizeObservers=new Map}get activeIds(){if(this.expandedIds)return this.expandedIds.split(",").map((e=>e.trim())).filter(Boolean);return this.internalIds}componentDidLoad(){this.bindResizeObservers()}disconnectedCallback(){this.resizeObservers.forEach((e=>e.disconnect()));this.resizeObservers.clear()}onItemsChange(){requestAnimationFrame((()=>{this.bindResizeObservers();this.measureAll()}))}bindResizeObservers(){this.resizeObservers.forEach((e=>e.disconnect()));this.resizeObservers.clear();this.items.forEach((e=>{const s=this.el.querySelector(`[data-inner="${e.id}"]`);if(!s)return;const o=new ResizeObserver((()=>{this.heights={...this.heights,[e.id]:s.scrollHeight}}));o.observe(s);this.resizeObservers.set(e.id,o)}))}measureAll(){const e={...this.heights};this.items.forEach((s=>{const o=this.el.querySelector(`[data-inner="${s.id}"]`);if(o)e[s.id]=o.scrollHeight}));this.heights=e}toggle(e){const s=this.activeIds;let o;if(s.includes(e)){o=s.filter((s=>s!==e))}else{o=this.multiple?[...s,e]:[e]}this.internalIds=o;this.dsExpandedChange.emit(o)}render(){const e=this.activeIds;return i(n,{key:"e34b49b748fd0a561c616d4ef5b2069d2e809831",class:"accordion"},this.items.map((s=>{const o=e.includes(s.id);const t=`ds-accordion-${this.instanceId}-trigger-${s.id}`;const n=`ds-accordion-${this.instanceId}-panel-${s.id}`;const r=this.heights[s.id]??0;return i("div",{key:s.id,class:{item:true,"item--inactive":!!s.inactive}},i("button",{type:"button",id:t,class:"trigger",onClick:()=>!s.inactive&&this.toggle(s.id),"aria-expanded":o,"aria-controls":n,"aria-disabled":s.inactive||undefined,tabIndex:s.inactive?-1:0},i("span",{class:"text-body-medium-emphasis"},s.label),i("span",{class:{chevron:true,"chevron--open":o},"aria-hidden":"true"},"›")),i("div",{id:n,role:"region","aria-labelledby":t,class:"body",style:{height:o?`${r}px`:"0"},"aria-hidden":!o},i("div",{class:"body-inner","data-inner":s.id},s.content?i("span",{class:"text-body-medium"},s.content):i("slot",{name:s.id}))))})))}get el(){return this}static get watchers(){return{items:[{onItemsChange:0}]}}static get style(){return r()}},[262,"ds-accordion",{items:[16],multiple:[4],expandedIds:[1025,"expanded-ids"],internalIds:[32],heights:[32]},undefined,{items:[{onItemsChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-accordion"];e.forEach((e=>{switch(e){case"ds-accordion":if(!customElements.get(s(e))){customElements.define(s(e),a)}break}}))}d();const l=a;const h=d;export{l as DsAccordion,h as defineCustomElement};
-//# sourceMappingURL=ds-accordion.js.map

package/dist/components/ds-accordion.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["accordionCss","idCounter","Accordion","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","multiple","expandedIds","internalIds","heights","instanceId","resizeObservers","Map","activeIds","split","map","s","trim","filter","Boolean","componentDidLoad","bindResizeObservers","disconnectedCallback","forEach","ro","disconnect","clear","onItemsChange","requestAnimationFrame","measureAll","item","inner","el","querySelector","id","ResizeObserver","scrollHeight","observe","set","next","toggle","current","includes","x","dsExpandedChange","emit","render","h","Host","key","class","isExpanded","triggerId","panelId","bodyHeight","inactive","type","onClick","undefined","tabIndex","label","chevron","role","style","height","content","name"],"sources":["src/wc/components/Accordion/Accordion.css?tag=ds-accordion&encapsulation=scoped","src/wc/components/Accordion/Accordion.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n\n.item {\n  border-bottom: 1px solid var(--color-border-secondary);\n}\n\n.item:first-child {\n  border-top: 1px solid var(--color-border-secondary);\n}\n\n.item--inactive {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--dimension-space-100) var(--dimension-space-050);\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--color-foreground-primary);\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2);\n  -webkit-user-select: none;\n  user-select: none;\n  box-sizing: border-box;\n  text-align: left;\n}\n\n.trigger:hover  { background-color: var(--color-interaction-hover); }\n.trigger:active { background-color: var(--color-interaction-pressed); }\n\n.trigger:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.chevron {\n  font-size: 18px;\n  line-height: 1;\n  transform: rotate(0deg);\n  transition: transform var(--effect-motion-short-3);\n  color: var(--color-foreground-secondary);\n  flex-shrink: 0;\n}\n\n.chevron--open { transform: rotate(90deg); }\n\n.body {\n  overflow: hidden;\n  transition: height var(--effect-motion-short-3);\n}\n\n.body-inner {\n  padding: var(--dimension-space-050) var(--dimension-space-050) var(--dimension-space-100);\n  color: var(--color-foreground-secondary);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface AccordionItemData {\n  id: string;\n  label: string;\n  content?: string;\n  inactive?: boolean;\n}\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-accordion',\n  styleUrl: 'Accordion.css',\n  scoped: true,\n})\nexport class Accordion {\n  @Element() el!: HTMLElement;\n\n  @Prop() items: AccordionItemData[] = [];\n  @Prop() multiple: boolean = false;\n  /** Comma-separated list of expanded item IDs for controlled mode. */\n  @Prop({ mutable: true }) expandedIds: string = '';\n\n  @State() private internalIds: string[] = [];\n  @State() private heights: Record<string, number> = {};\n\n  @Event() dsExpandedChange!: EventEmitter<string[]>;\n\n  private instanceId = ++idCounter;\n  private resizeObservers: Map<string, ResizeObserver> = new Map();\n\n  private get activeIds(): string[] {\n    if (this.expandedIds) return this.expandedIds.split(',').map(s => s.trim()).filter(Boolean);\n    return this.internalIds;\n  }\n\n  componentDidLoad() {\n    this.bindResizeObservers();\n  }\n\n  disconnectedCallback() {\n    this.resizeObservers.forEach(ro => ro.disconnect());\n    this.resizeObservers.clear();\n  }\n\n  @Watch('items')\n  onItemsChange() {\n    requestAnimationFrame(() => {\n      this.bindResizeObservers();\n      this.measureAll();\n    });\n  }\n\n  private bindResizeObservers() {\n    this.resizeObservers.forEach(ro => ro.disconnect());\n    this.resizeObservers.clear();\n\n    this.items.forEach(item => {\n      const inner = this.el.querySelector(`[data-inner=\"${item.id}\"]`) as HTMLElement | null;\n      if (!inner) return;\n      const ro = new ResizeObserver(() => {\n        this.heights = { ...this.heights, [item.id]: inner.scrollHeight };\n      });\n      ro.observe(inner);\n      this.resizeObservers.set(item.id, ro);\n    });\n  }\n\n  private measureAll() {\n    const next: Record<string, number> = { ...this.heights };\n    this.items.forEach(item => {\n      const inner = this.el.querySelector(`[data-inner=\"${item.id}\"]`) as HTMLElement | null;\n      if (inner) next[item.id] = inner.scrollHeight;\n    });\n    this.heights = next;\n  }\n\n  private toggle(id: string) {\n    const current = this.activeIds;\n    let next: string[];\n    if (current.includes(id)) {\n      next = current.filter(x => x !== id);\n    } else {\n      next = this.multiple ? [...current, id] : [id];\n    }\n    this.internalIds = next;\n    this.dsExpandedChange.emit(next);\n  }\n\n  render() {\n    const activeIds = this.activeIds;\n\n    return (\n      <Host class=\"accordion\">\n        {this.items.map(item => {\n          const isExpanded = activeIds.includes(item.id);\n          const triggerId = `ds-accordion-${this.instanceId}-trigger-${item.id}`;\n          const panelId = `ds-accordion-${this.instanceId}-panel-${item.id}`;\n          const bodyHeight = this.heights[item.id] ?? 0;\n\n          return (\n            <div\n              key={item.id}\n              class={{ item: true, 'item--inactive': !!item.inactive }}\n            >\n              <button\n                type=\"button\"\n                id={triggerId}\n                class=\"trigger\"\n                onClick={() => !item.inactive && this.toggle(item.id)}\n                aria-expanded={isExpanded}\n                aria-controls={panelId}\n                aria-disabled={item.inactive || undefined}\n                tabIndex={item.inactive ? -1 : 0}\n              >\n                <span class=\"text-body-medium-emphasis\">{item.label}</span>\n                <span\n                  class={{ chevron: true, 'chevron--open': isExpanded }}\n                  aria-hidden=\"true\"\n                >&#x203A;</span>\n              </button>\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                class=\"body\"\n                style={{ height: isExpanded ? `${bodyHeight}px` : '0' }}\n                aria-hidden={!isExpanded}\n              >\n                <div class=\"body-inner\" data-inner={item.id}>\n                  {item.content\n                    ? <span class=\"text-body-medium\">{item.content}</span>\n                    : <slot name={item.id} />\n                  }\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-breadcrumb.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsBreadcrumb extends Components.DsBreadcrumb, HTMLElement {}
-export const DsBreadcrumb: {
-    prototype: DsBreadcrumb;
-    new (): DsBreadcrumb;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-breadcrumb.js

@@ -1,2 +0,0 @@
-import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"18a93bad46568264a308c3aa3067dca124a42aac"},a("nav",{key:"a19a1a8233e23ea548544f09658cbc49211b9a75","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"1edb429d1686e8285bf707da5f0b46f410283d79",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
-//# sourceMappingURL=ds-breadcrumb.js.map

package/dist/components/ds-breadcrumb.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbCss","Breadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","separator","handleClick","item","index","e","href","preventDefault","dsNavigate","emit","render","h","Host","key","class","map","i","isLast","length","label","onClick"],"sources":["src/wc/components/Breadcrumb/Breadcrumb.css?tag=ds-breadcrumb&encapsulation=scoped","src/wc/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":[".breadcrumb {\n  display: flex;\n  align-items: center;\n}\n\n.list {\n  display: flex;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  gap: var(--dimension-space-050);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.item-inner {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.link {\n  color: var(--color-foreground-secondary);\n  text-decoration: none;\n  padding: var(--dimension-space-025) var(--dimension-space-050);\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);\n}\n\n.link:hover {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.link:active { background-color: var(--color-interaction-pressed); }\n\n.link:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.separator {\n  color: var(--color-foreground-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.current {\n  color: var(--color-foreground-primary);\n  padding: var(--dimension-space-025) var(--dimension-space-050);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  @Prop() items: BreadcrumbItem[] = [];\n  @Prop() separator: string = '/';\n\n  @Event() dsNavigate!: EventEmitter<{ item: BreadcrumbItem; index: number }>;\n\n  private handleClick(item: BreadcrumbItem, index: number, e: MouseEvent) {\n    if (!item.href) {\n      e.preventDefault();\n    }\n    this.dsNavigate.emit({ item, index });\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\n          <ol class=\"list\">\n            {this.items.map((item, i) => {\n              const isLast = i === this.items.length - 1;\n              return (\n                <li class=\"item\" key={i}>\n                  {isLast ? (\n                    <span class=\"text-body-medium-emphasis current\" aria-current=\"page\">\n                      {item.label}\n                    </span>\n                  ) : (\n                    <span class=\"item-inner\">\n                      <a\n                        href={item.href ?? '#'}\n                        class=\"link text-body-medium\"\n                        onClick={e => this.handleClick(item, i, e)}\n                      >\n                        {item.label}\n                      </a>\n                      <span class=\"separator text-body-small\" aria-hidden=\"true\">\n                        {this.separator}\n                      </span>\n                    </span>\n                  )}\n                </li>\n              );\n            })}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,gtC,MCYfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,iFAMUC,KAAAC,MAA0B,GAC1BD,KAAAE,UAAoB,GA8C7B,CA1CS,WAAAC,CAAYC,EAAsBC,EAAeC,GACvD,IAAKF,EAAKG,KAAM,CACdD,EAAEE,gB,CAEJR,KAAKS,WAAWC,KAAK,CAAEN,OAAMC,S,CAG/B,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAgB,aAAaC,MAAM,cACjCH,EAAA,MAAAE,IAAA,2CAAIC,MAAM,QACPf,KAAKC,MAAMe,KAAI,CAACZ,EAAMa,KACrB,MAAMC,EAASD,IAAMjB,KAAKC,MAAMkB,OAAS,EACzC,OACEP,EAAA,MAAIG,MAAM,OAAOD,IAAKG,GACnBC,EACCN,EAAA,QAAMG,MAAM,oCAAmC,eAAc,QAC1DX,EAAKgB,OAGRR,EAAA,QAAMG,MAAM,cACVH,EAAA,KACEL,KAAMH,EAAKG,MAAQ,IACnBQ,MAAM,wBACNM,QAASf,GAAKN,KAAKG,YAAYC,EAAMa,EAAGX,IAEvCF,EAAKgB,OAERR,EAAA,QAAMG,MAAM,4BAA2B,cAAa,QACjDf,KAAKE,YAIT,M","ignoreList":[]}

package/dist/components/ds-button-unfilled-icon.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsButtonUnfilledIcon extends Components.DsButtonUnfilledIcon, HTMLElement {}
-export const DsButtonUnfilledIcon: {
-    prototype: DsButtonUnfilledIcon;
-    new (): DsButtonUnfilledIcon;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-button-unfilled-icon.js

@@ -1,2 +0,0 @@
-import{B as o,d as s}from"./p-BSFgy5r6.js";const r=o;const t=s;export{r as DsButtonUnfilledIcon,t as defineCustomElement};
-//# sourceMappingURL=ds-button-unfilled-icon.js.map

package/dist/components/ds-card-data-viz.js

@@ -1,2 +0,0 @@
-import{p as a,H as e,h as d,a as i,t as s}from"./index.js";import{d as t}from"./p-DOU4cbpc.js";const r=()=>`.sc-ds-card-data-viz-h{display:block;box-sizing:border-box;width:var(--_card-data-viz-width);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card-data-viz__header.sc-ds-card-data-viz{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card-data-viz__title-wrap.sc-ds-card-data-viz{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--dimension-space-075);box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-data-viz__title.sc-ds-card-data-viz{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card-data-viz__body.sc-ds-card-data-viz{display:flex;flex-direction:column;gap:var(--dimension-space-200);min-height:var(--dimension-card-width-sm);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card-data-viz__chart-region.sc-ds-card-data-viz{display:flex;justify-content:center;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400)}.card-data-viz__legend-region.sc-ds-card-data-viz{padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}`;const c={xs:"var(--dimension-card-width-xs)",sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=a=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=a.detail?.label??null};this.handleLegendHover=a=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=a.detail?.label??null}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector(':scope > [slot="chart"]');this.hasLegendSlot=!!this.el.querySelector(':scope > [slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return d(i,{key:"44bbd306b1f5532484182d5705946692fa3c9a52",class:"card-data-viz",style:{"--_card-data-viz-width":c[this.cardWidth]}},d("header",{key:"e82b704e5d88ecd671f38b8a1b659738056d2758",class:"card-data-viz__header"},d("div",{key:"da783803752c8bd50f3c4c9e16c51e43031e3796",class:"card-data-viz__title-wrap"},d("ds-text",{key:"b523db239bb280e20035e558b15b7eeea79c0f50",class:"card-data-viz__title",variant:"text-title-small",color:"primary",as:"h2"},this.heading))),d("div",{key:"21e6d2abcd0ad4df1b2f6c86ac8fe46661c574f6",class:"card-data-viz__body"},this.hasChartSlot&&d("div",{key:"2d40abd960557ea52240eca6077756f33808af29",class:"card-data-viz__chart-region"},d("slot",{key:"2db547e8a6e94f468b006adf54d0964ffffc2262",name:"chart"})),this.hasLegendSlot&&d("div",{key:"1b50a2606964865d08fdbd8fdcbf51d900d345e3",class:"card-data-viz__legend-region"},d("slot",{key:"32af5e2e45cd89ff89ee13350c8d3b37d5e9b781",name:"legend"}))))}get el(){return this}static get style(){return r()}},[262,"ds-card-data-viz",{heading:[1],cardWidth:[1,"card-width"],hasChartSlot:[32],hasLegendSlot:[32]}]);function o(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(s(a))){customElements.define(s(a),n)}break;case"ds-text":if(!customElements.get(s(a))){t()}break}}))}o();const l=n;const v=o;export{l as DsCardDataViz,v as defineCustomElement};
-//# sourceMappingURL=ds-card-data-viz.js.map

package/dist/components/ds-card-data-viz.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","xs","sm","md","lg","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","componentWillRender","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","render","h","Host","key","class","style","variant","color","as","heading","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  max-width: 100%;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n  overflow: hidden;\n}\n\n.card-data-viz__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n.card-data-viz__title-wrap {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card-data-viz__body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200);\n  min-height: var(--dimension-card-width-sm);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n/*\n * Chart and legend regions carry their own padding (instead of one flat body padding) so the\n * 16px gap between them comes from the body's own `gap`, not doubled-up padding at their\n * shared edge — each region's padding is 0 on the side that touches the other region.\n */\n.card-data-viz__chart-region {\n  display: flex;\n  justify-content: center;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n}\n\n/* 8px here + the legend item's own 6px padding + the legend text's own 2px padding = 16px total. */\n.card-data-viz__legend-region {\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n","import { Component, Element, State, h, Host, Prop } from '@stencil/core';\n\nexport type CardDataVizWidth = 'xs' | 'sm' | 'md' | 'lg';\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into hover sync by exposing an `activeLabel` prop. */\ntype SyncableSlot = HTMLElement & { activeLabel?: string | null };\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, string> = {\n  xs: 'var(--dimension-card-width-xs)',\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\n/**\n * Copied from CardSetting as a starting scaffold — header edit affordance removed for now\n * (data-viz widgets don't have an obvious \"edit\" action the way settings fields do); revisit\n * once the data-viz card's real header actions (menu, caption, footer stat) are designed.\n */\n@Component({\n  tag: 'ds-card-data-viz',\n  styleUrl: 'CardDataViz.css',\n  scoped: true,\n})\nexport class CardDataViz {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token. */\n  @Prop() cardWidth: CardDataVizWidth = 'md';\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector(':scope > [slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector(':scope > [slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-* + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner `.chart-region`/`.legend-region` wrapper on render, so\n    // they're no longer direct children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz\" style={{ '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth] }}>\n        <header class=\"card-data-viz__header\">\n          <div class=\"card-data-viz__title-wrap\">\n            <ds-text class=\"card-data-viz__title\" variant=\"text-title-small\" color=\"primary\" as=\"h2\">\n              {this.heading}\n            </ds-text>\n          </div>\n        </header>\n        <div class=\"card-data-viz__body\">\n          {this.hasChartSlot && (\n            <div class=\"card-data-viz__chart-region\">\n              <slot name=\"chart\" />\n            </div>\n          )}\n          {this.hasLegendSlot && (\n            <div class=\"card-data-viz__legend-region\">\n              <slot name=\"legend\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAiB,IAAM,6kDCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kC,MAaOC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,4CAYUC,KAAAC,UAA8B,KAKrBD,KAAAE,aAAe,MACfF,KAAAG,cAAgB,MAqBzBH,KAAAI,iBAAoBC,IAI1B,MAAMC,EAASN,KAAKO,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEX,KAAAY,kBAAqBP,IAC3B,MAAMQ,EAAQb,KAAKO,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,CA4B7E,CA3DC,mBAAAG,GACEd,KAAKE,eAAiBF,KAAKO,GAAGC,cAAc,2BAC5CR,KAAKG,gBAAkBH,KAAKO,GAAGC,cAAc,2B,CAG/C,gBAAAO,GAKEf,KAAKO,GAAGS,iBAAiB,eAAgBhB,KAAKI,kBAC9CJ,KAAKO,GAAGS,iBAAiB,cAAehB,KAAKY,kB,CAG/C,oBAAAK,GACEjB,KAAKO,GAAGW,oBAAoB,eAAgBlB,KAAKI,kBACjDJ,KAAKO,GAAGW,oBAAoB,cAAelB,KAAKY,kB,CAkBlD,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,gBAAgBC,MAAO,CAAE,yBAA0BlC,EAAgBU,KAAKC,aAClFmB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,yBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,uBAAuBE,QAAQ,mBAAmBC,MAAM,UAAUC,GAAG,MACjF3B,KAAK4B,WAIZR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACRvB,KAAKE,cACJkB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,WAGd7B,KAAKG,eACJiB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gCACTH,EAAA,QAAAE,IAAA,2CAAMO,KAAK,a","ignoreList":[]}

package/dist/components/ds-fade.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as a,a as t,t as d}from"./index.js";import{s as i,a as r}from"./p-CBUIn8dk.js";const o=()=>`.scroll-edge-fade.sc-ds-fade{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-fade{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-fade{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-fade{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-fade{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-fade,.scroll-edge-fade--hidden.sc-ds-fade{-webkit-mask-image:none;mask-image:none}.sc-ds-fade-h{display:block;height:100%;box-sizing:border-box}.fade__scroll.sc-ds-fade{height:100%;overflow:auto;box-sizing:border-box}`;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.side="bottom";this.size="size-600";this.visible=true}render(){return a(t,{key:"167df54396bc0d4fff2335254bd48398785ee117"},a("div",{key:"576b3aff27a66ab3d6a5067627f333fe2c64330e",class:{fade__scroll:true,...r({edges:this.side,hidden:!this.visible})},style:i(this.size,this.height)},a("slot",{key:"3f8afcaf1f1f06c08291e6ed9317f8d39d0acc6c"})))}static get style(){return o()}},[262,"ds-fade",{side:[1],size:[1],height:[1],visible:[4]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-fade"];e.forEach((e=>{switch(e){case"ds-fade":if(!customElements.get(d(e))){customElements.define(d(e),n)}break}}))}l();const c=n;const f=l;export{c as DsFade,f as defineCustomElement};
-//# sourceMappingURL=ds-fade.js.map

package/dist/components/ds-fade.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fadeCss","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","side","size","visible","render","h","Host","key","class","fade__scroll","scrollEdgeFadeClassMap","edges","hidden","style","scrollEdgeFadeSizeStyle","height"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=scoped","src/wc/components/Fade/Fade.tsx"],"sourcesContent":["@import '../../utils/scroll-edge-fade.css';\n\n:host {\n  display: block;\n  height: 100%;\n  box-sizing: border-box;\n}\n\n.fade__scroll {\n  height: 100%;\n  overflow: auto;\n  box-sizing: border-box;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport {\n  scrollEdgeFadeClassMap,\n  scrollEdgeFadeSizeStyle,\n  type ScrollEdgeFadeEdge,\n  type ScrollEdgeFadeSize,\n  type ScrollEdgeFadeSizeToken,\n} from '../../utils/scroll-edge-fade';\n\n/** @deprecated Use `ScrollEdgeFadeEdge` from `@ds-mo/ui/utils`. */\nexport type FadeSide = ScrollEdgeFadeEdge;\n\n/** @deprecated Use `ScrollEdgeFadeSizeToken` from `@ds-mo/ui/utils`. */\nexport type FadeSizeToken = ScrollEdgeFadeSizeToken;\n\n/** @deprecated Use `ScrollEdgeFadeSize` from `@ds-mo/ui/utils`. */\nexport type FadeSize = ScrollEdgeFadeSize;\n\n@Component({\n  tag: 'ds-fade',\n  styleUrl: 'Fade.css',\n  scoped: true,\n})\nexport class Fade {\n  /** Edge where content fades as it approaches the scroll boundary. */\n  @Prop() side: FadeSide = 'bottom';\n\n  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */\n  @Prop() size: FadeSize = 'size-600';\n\n  /**\n   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.\n   * Prefer `size`.\n   */\n  @Prop() height: string | undefined;\n\n  /** Controls the mask without removing the scroll container from layout. */\n  @Prop() visible: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'fade__scroll': true,\n            ...scrollEdgeFadeClassMap({\n              edges: this.side,\n              hidden: !this.visible,\n            }),\n          }}\n          style={scrollEdgeFadeSizeStyle(this.size, this.height) as Record<string, string>}\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAU,IAAM,onD,MCuBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAiB,SAGjBD,KAAAE,KAAiB,WASjBF,KAAAG,QAAmB,IAoB5B,CAlBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLC,aAAgB,QACbC,EAAuB,CACxBC,MAAOX,KAAKC,KACZW,QAASZ,KAAKG,WAGlBU,MAAOC,EAAwBd,KAAKE,KAAMF,KAAKe,SAE/CV,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ds-header.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsHeader extends Components.DsHeader, HTMLElement {}
-export const DsHeader: {
-    prototype: DsHeader;
-    new (): DsHeader;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-header.js

@@ -1,2 +0,0 @@
-import{p as e,H as r,h as s,a,t as d}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const t=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return s(a,{key:"582bd542b6447ced6cc66144e906bf0cf8fdc580",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},s("div",{key:"99f7eb72f19e7de12127559b8e41c542ebadb244",class:"left"},s("slot",{key:"cb8b7e3eb281d4895ad80dc45ec924dfe775afd4",name:"left"}),this.heading&&s("span",{key:"853d46a3d631c2f4cd42b07d28759fefdf623cdf",class:"title text-title-small"},this.heading)),s("div",{key:"438d9b039dad0c9e11fa24734bfff287706704bc",class:"center"},s("slot",{key:"6176e5d35bbbdce7c62ee0af91ddc5f528ffa7a9",name:"center"})),s("div",{key:"c2a09f30c23df0af7da6c37c88193223defae7cb",class:"right"},s("slot",{key:"204f71f84780469d01b4b91d6970c2ac16ba8c22",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(d(e))){customElements.define(d(e),t)}break}}))}n();const i=t;const o=n;export{i as DsHeader,o as defineCustomElement};
-//# sourceMappingURL=ds-header.js.map

package/dist/components/ds-header.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}

package/dist/components/ds-scrollbar.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsScrollbar extends Components.DsScrollbar, HTMLElement {}
-export const DsScrollbar: {
-    prototype: DsScrollbar;
-    new (): DsScrollbar;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-scrollbar.js

@@ -1,2 +0,0 @@
-import{p as s,H as t,h as o,a as r,t as e}from"./index.js";const i=()=>`.sc-ds-scrollbar-h{display:contents}.scrollbar-container.sc-ds-scrollbar{position:relative;width:100%;height:100%;overflow:hidden}.scrollbar-content.sc-ds-scrollbar{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scrollbar-content.sc-ds-scrollbar::-webkit-scrollbar{display:none}.scrollbar-content.sc-ds-scrollbar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.scrollbar-track.sc-ds-scrollbar{position:absolute;top:0;right:0;bottom:0;width:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb.sc-ds-scrollbar{position:absolute;right:0;width:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-track-h.sc-ds-scrollbar{position:absolute;left:0;right:0;bottom:0;height:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb-h.sc-ds-scrollbar{position:absolute;bottom:0;height:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb-h.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}`;const c=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.variant="default";this.showTrackOnHover=true;this.thumbHeight=0;this.thumbTop=0;this.thumbWidth=0;this.thumbLeft=0;this.isDragging=false;this.isDraggingH=false;this.isPointerInside=false;this.contentEl=null;this.resizeObserver=null;this.scrollHandler=null;this.dragStartY=0;this.dragStartScrollTop=0;this.dragStartX=0;this.dragStartScrollLeft=0}componentDidLoad(){this.contentEl=this.el.querySelector(".scrollbar-content");if(!this.contentEl)return;this.scrollHandler=()=>this.updateThumb();this.contentEl.addEventListener("scroll",this.scrollHandler);this.resizeObserver=new ResizeObserver((()=>this.updateThumb()));this.resizeObserver.observe(this.contentEl);window.addEventListener("resize",this.scrollHandler);this.updateThumb()}disconnectedCallback(){if(this.contentEl&&this.scrollHandler){this.contentEl.removeEventListener("scroll",this.scrollHandler)}if(this.scrollHandler){window.removeEventListener("resize",this.scrollHandler)}this.resizeObserver?.disconnect()}updateThumb(){const s=this.el.querySelector(".scrollbar-container");const t=this.contentEl;if(!s||!t)return;const o=s.clientHeight;const r=s.clientWidth;const e=t.scrollHeight;const i=t.scrollWidth;const c=t.scrollTop;const a=t.scrollLeft;if(e<=o){this.thumbHeight=0}else{const s=Math.max(20,o*(o/e));this.thumbHeight=s;this.thumbTop=c/(e-o)*(o-s)}if(i<=r){this.thumbWidth=0}else{const s=Math.max(20,r*(r/i));this.thumbWidth=s;this.thumbLeft=a/(i-r)*(r-s)}}handleThumbMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDragging=true;this.dragStartY=s.clientY;this.dragStartScrollTop=t.scrollTop;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientY-this.dragStartY;const e=t.scrollHeight-o.clientHeight;const i=e/(o.clientHeight-this.thumbHeight);t.scrollTop=Math.max(0,Math.min(e,this.dragStartScrollTop+r*i))};const e=()=>{this.isDragging=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}handleThumbHMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDraggingH=true;this.dragStartX=s.clientX;this.dragStartScrollLeft=t.scrollLeft;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientX-this.dragStartX;const e=t.scrollWidth-o.clientWidth;const i=e/(o.clientWidth-this.thumbWidth);t.scrollLeft=Math.max(0,Math.min(e,this.dragStartScrollLeft+r*i))};const e=()=>{this.isDraggingH=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}render(){const s=this.thumbHeight>0;const t=this.thumbWidth>0;const e=s||t;const i=this.showTrackOnHover&&(this.isPointerInside||this.isDragging||this.isDraggingH);return o(r,{key:"8cee4d6081129c359fc002cb331bb01091f447d5",style:{display:"contents"}},o("div",{key:"8fe7b59ae67a72f36de2ef58be66fa690a05281f",class:{"scrollbar-container":true,"scrollbar-container--thick":this.variant==="thick"},"data-show-track":i?"true":"false","data-dragging":this.isDragging||this.isDraggingH,onMouseEnter:()=>{if(this.showTrackOnHover)this.isPointerInside=true},onMouseLeave:()=>{this.isPointerInside=false}},o("div",{key:"0ac6fa91d6a5442e4abaf341614b6f2085961e3d",class:"scrollbar-content",tabIndex:e?0:undefined},o("slot",{key:"afe1f5d30796c400c872328050c5cc7dfbc6373f"})),s&&o("div",{key:"6c87d4af5f5368ef2e73d14a00128117e5d66004",class:"scrollbar-track","aria-hidden":"true"},o("div",{key:"e5523224f064842cec210301b623c5ddcd8c4107",class:"scrollbar-thumb",style:{height:`${this.thumbHeight}px`,top:`${this.thumbTop}px`},onMouseDown:s=>this.handleThumbMouseDown(s)})),t&&o("div",{key:"d5efc93a5c328013857aff36009af3a9a9c48d12",class:"scrollbar-track-h","aria-hidden":"true"},o("div",{key:"4d417d4fe7dab06c497d4f1d64cbdd0f10f556be",class:"scrollbar-thumb-h",style:{width:`${this.thumbWidth}px`,left:`${this.thumbLeft}px`},onMouseDown:s=>this.handleThumbHMouseDown(s)}))))}get el(){return this}static get style(){return i()}},[262,"ds-scrollbar",{variant:[1],showTrackOnHover:[4,"show-track-on-hover"],thumbHeight:[32],thumbTop:[32],thumbWidth:[32],thumbLeft:[32],isDragging:[32],isDraggingH:[32],isPointerInside:[32]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-scrollbar"];s.forEach((s=>{switch(s){case"ds-scrollbar":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}a();const n=c;const l=a;export{n as DsScrollbar,l as defineCustomElement};
-//# sourceMappingURL=ds-scrollbar.js.map

package/dist/components/ds-scrollbar.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["scrollbarCss","Scrollbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","showTrackOnHover","thumbHeight","thumbTop","thumbWidth","thumbLeft","isDragging","isDraggingH","isPointerInside","contentEl","resizeObserver","scrollHandler","dragStartY","dragStartScrollTop","dragStartX","dragStartScrollLeft","componentDidLoad","el","querySelector","updateThumb","addEventListener","ResizeObserver","observe","window","disconnectedCallback","removeEventListener","disconnect","container","content","cH","clientHeight","cW","clientWidth","sH","scrollHeight","sW","scrollWidth","st","scrollTop","sl","scrollLeft","h","Math","max","w","handleThumbMouseDown","e","preventDefault","stopPropagation","clientY","onMove","ev","deltaY","scrollable","ratio","min","onUp","document","handleThumbHMouseDown","clientX","deltaX","render","showThumb","showThumbH","isScrollable","showTrack","Host","key","style","display","class","onMouseEnter","onMouseLeave","tabIndex","undefined","height","top","onMouseDown","width","left"],"sources":["src/wc/components/Scrollbar/Scrollbar.css?tag=ds-scrollbar&encapsulation=scoped","src/wc/components/Scrollbar/Scrollbar.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.scrollbar-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.scrollbar-content {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.scrollbar-content::-webkit-scrollbar {\n  display: none;\n}\n\n.scrollbar-content:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n/* ─── Vertical track ────────────────────────────────────────────────────────── */\n\n.scrollbar-track {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--dimension-size-050, 4px);\n  pointer-events: none;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.scrollbar-container[data-show-track='true'] .scrollbar-track {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.scrollbar-thumb {\n  position: absolute;\n  right: 0;\n  width: var(--dimension-size-050, 4px);\n  cursor: grab;\n  border-radius: 0;\n  background-color: var(--color-foreground-quaternary);\n  transition: background-color var(--effect-motion-short-2);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.scrollbar-thumb:active {\n  cursor: grabbing;\n}\n\n/* ─── Horizontal track ──────────────────────────────────────────────────────── */\n\n.scrollbar-track-h {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: var(--dimension-size-050, 4px);\n  pointer-events: none;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.scrollbar-container[data-show-track='true'] .scrollbar-track-h {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.scrollbar-thumb-h {\n  position: absolute;\n  bottom: 0;\n  height: var(--dimension-size-050, 4px);\n  cursor: grab;\n  border-radius: 0;\n  background-color: var(--color-foreground-quaternary);\n  transition: background-color var(--effect-motion-short-2);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.scrollbar-thumb-h:active {\n  cursor: grabbing;\n}\n\n/* ─── Thick variant ─────────────────────────────────────────────────────────── */\n\n.scrollbar-container--thick .scrollbar-track       { width:  var(--dimension-size-100, 8px); }\n.scrollbar-container--thick .scrollbar-thumb       { width:  var(--dimension-size-100, 8px); }\n.scrollbar-container--thick .scrollbar-track-h     { height: var(--dimension-size-100, 8px); }\n.scrollbar-container--thick .scrollbar-thumb-h     { height: var(--dimension-size-100, 8px); }\n","import { Component, Prop, State, Element, h, Host } from '@stencil/core';\n\nexport type ScrollbarVariant = 'default' | 'thick';\n\n@Component({\n  tag: 'ds-scrollbar',\n  styleUrl: 'Scrollbar.css',\n  scoped: true,\n})\nexport class Scrollbar {\n  @Element() el!: HTMLElement;\n\n  @Prop() variant: ScrollbarVariant = 'default';\n  @Prop() showTrackOnHover: boolean = true;\n\n  @State() private thumbHeight: number = 0;\n  @State() private thumbTop: number = 0;\n  @State() private thumbWidth: number = 0;\n  @State() private thumbLeft: number = 0;\n  @State() private isDragging: boolean = false;\n  @State() private isDraggingH: boolean = false;\n  @State() private isPointerInside: boolean = false;\n\n  private contentEl: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private scrollHandler: (() => void) | null = null;\n\n  // Drag state (not reactive — no re-render needed)\n  private dragStartY = 0;\n  private dragStartScrollTop = 0;\n  private dragStartX = 0;\n  private dragStartScrollLeft = 0;\n\n  componentDidLoad() {\n    this.contentEl = this.el.querySelector('.scrollbar-content') as HTMLElement | null;\n    if (!this.contentEl) return;\n\n    this.scrollHandler = () => this.updateThumb();\n    this.contentEl.addEventListener('scroll', this.scrollHandler);\n\n    this.resizeObserver = new ResizeObserver(() => this.updateThumb());\n    this.resizeObserver.observe(this.contentEl);\n    window.addEventListener('resize', this.scrollHandler);\n\n    this.updateThumb();\n  }\n\n  disconnectedCallback() {\n    if (this.contentEl && this.scrollHandler) {\n      this.contentEl.removeEventListener('scroll', this.scrollHandler);\n    }\n    if (this.scrollHandler) {\n      window.removeEventListener('resize', this.scrollHandler);\n    }\n    this.resizeObserver?.disconnect();\n  }\n\n  private updateThumb() {\n    const container = this.el.querySelector('.scrollbar-container') as HTMLElement | null;\n    const content = this.contentEl;\n    if (!container || !content) return;\n\n    const cH = container.clientHeight;\n    const cW = container.clientWidth;\n    const sH = content.scrollHeight;\n    const sW = content.scrollWidth;\n    const st = content.scrollTop;\n    const sl = content.scrollLeft;\n\n    if (sH <= cH) {\n      this.thumbHeight = 0;\n    } else {\n      const h = Math.max(20, cH * (cH / sH));\n      this.thumbHeight = h;\n      this.thumbTop = (st / (sH - cH)) * (cH - h);\n    }\n\n    if (sW <= cW) {\n      this.thumbWidth = 0;\n    } else {\n      const w = Math.max(20, cW * (cW / sW));\n      this.thumbWidth = w;\n      this.thumbLeft = (sl / (sW - cW)) * (cW - w);\n    }\n  }\n\n  private handleThumbMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    const content = this.contentEl;\n    if (!content) return;\n\n    this.isDragging = true;\n    this.dragStartY = e.clientY;\n    this.dragStartScrollTop = content.scrollTop;\n\n    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaY = ev.clientY - this.dragStartY;\n      const scrollable = content.scrollHeight - container.clientHeight;\n      const ratio = scrollable / (container.clientHeight - this.thumbHeight);\n      content.scrollTop = Math.max(0, Math.min(scrollable, this.dragStartScrollTop + deltaY * ratio));\n    };\n    const onUp = () => {\n      this.isDragging = false;\n      document.removeEventListener('mousemove', onMove);\n      document.removeEventListener('mouseup', onUp);\n    };\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onUp);\n  }\n\n  private handleThumbHMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    const content = this.contentEl;\n    if (!content) return;\n\n    this.isDraggingH = true;\n    this.dragStartX = e.clientX;\n    this.dragStartScrollLeft = content.scrollLeft;\n\n    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      const scrollable = content.scrollWidth - container.clientWidth;\n      const ratio = scrollable / (container.clientWidth - this.thumbWidth);\n      content.scrollLeft = Math.max(0, Math.min(scrollable, this.dragStartScrollLeft + deltaX * ratio));\n    };\n    const onUp = () => {\n      this.isDraggingH = false;\n      document.removeEventListener('mousemove', onMove);\n      document.removeEventListener('mouseup', onUp);\n    };\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onUp);\n  }\n\n  render() {\n    const showThumb  = this.thumbHeight > 0;\n    const showThumbH = this.thumbWidth > 0;\n    const isScrollable = showThumb || showThumbH;\n    const showTrack = this.showTrackOnHover && (this.isPointerInside || this.isDragging || this.isDraggingH);\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{\n            'scrollbar-container': true,\n            'scrollbar-container--thick': this.variant === 'thick',\n          }}\n          data-show-track={showTrack ? 'true' : 'false'}\n          data-dragging={this.isDragging || this.isDraggingH}\n          onMouseEnter={() => { if (this.showTrackOnHover) this.isPointerInside = true; }}\n          onMouseLeave={() => { this.isPointerInside = false; }}\n        >\n          <div\n            class=\"scrollbar-content\"\n            tabIndex={isScrollable ? 0 : undefined}\n          >\n            <slot />\n          </div>\n\n          {showThumb && (\n            <div class=\"scrollbar-track\" aria-hidden=\"true\">\n              <div\n                class=\"scrollbar-thumb\"\n                style={{ height: `${this.thumbHeight}px`, top: `${this.thumbTop}px` }}\n                onMouseDown={(e: MouseEvent) => this.handleThumbMouseDown(e)}\n              />\n            </div>\n          )}\n\n          {showThumbH && (\n            <div class=\"scrollbar-track-h\" aria-hidden=\"true\">\n              <div\n                class=\"scrollbar-thumb-h\"\n                style={{ width: `${this.thumbWidth}px`, left: `${this.thumbLeft}px` }}\n                onMouseDown={(e: MouseEvent) => this.handleThumbHMouseDown(e)}\n              />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-surface.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DsSurface extends Components.DsSurface, HTMLElement {}
-export const DsSurface: {
-    prototype: DsSurface;
-    new (): DsSurface;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/dist/components/ds-surface.js

@@ -1,2 +0,0 @@
-import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"336d95fbb17cb9f4a02e7f5a338b41000dc8605d",style:{display:"contents"}},e(r,{key:"c9b8daaef99b94527604ab5008650bb2839c8aa8",class:i,style:d?{borderRadius:d}:undefined},e("slot",{key:"e2ac706676c2d7a980b3aaa115d17eb9b0bc7e50"})))}static get style(){return n()}},[262,"ds-surface",{background:[1],intent:[1],contrast:[1],elevation:[1],edge:[1],radius:[1],interactive:[4],selected:[4],inactive:[4],as:[1]}]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-surface"];r.forEach((r=>{switch(r){case"ds-surface":if(!customElements.get(s(r))){customElements.define(s(r),t)}break}}))}d();const i=t;const u=d;export{i as DsSurface,u as defineCustomElement};
-//# sourceMappingURL=ds-surface.js.map