@ds-mo/ui 2.14.0 → 2.15.0

package/dist/components/p-DQ3MyAC7.js

@@ -0,0 +1,2 @@
+import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{d as e}from"./p-BDQgqw5J.js";import{a as r,T as a}from"./p-B_g8X0eh.js";import{r as h}from"./p-BWUTr_XN.js";import{r as d}from"./p-C1cBr-Ri.js";import{C as l}from"./p-BvF44IQK.js";const c=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--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);--ds-control-line-height:var(--typography-lineheight-md)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--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);--ds-control-line-height:var(--typography-lineheight-sm)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--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);--ds-control-line-height:var(--typography-lineheight-xs)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const p={md:a.size400,sm:a.size300,xs:a.size200};let u=0;let f=0;let m=null;function g(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";i.textContent=t.text;return i}const v=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=r.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++f}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(m===this)m=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.calculatePosition()}get viewportPadPx(){return h(a.space050,a.space050)}get sideOffsetPx(){return h(this.sideOffset,a.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return d(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return d(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return d(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(m===this)m=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(m&&m!==this){m.hideInstant();t=true}m=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;u=Date.now();if(m===this)m=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=l[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("div");i.className=`key-hint ${s}`;i.setAttribute("aria-hidden","true");i.appendChild(g({variant:"text-caption",emphasis:true,text:this.shortcutKey}));o.appendChild(i)};n("start");const e=document.createElement("span");e.className=`tooltip-label ${s}`;e.appendChild(g({variant:t,text:this.label}));o.appendChild(e);n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const d=Math.min(Math.max(a,r),window.innerWidth-s-r);const l=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(d)}px, ${Math.round(l)}px)`}render(){return s(o,{key:"7fdceff27e453e4ee597ca93895cca29cb15761b",style:{display:"contents"}},s("slot",{key:"99a74382700ed01fa0ccf7da071ff1654f3dca73"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return c()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),v)}break;case"ds-text":if(!customElements.get(n(t))){e()}break}}))}b();export{v as T,b as d};
+//# sourceMappingURL=p-DQ3MyAC7.js.map

package/dist/components/p-DQ3MyAC7.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","textContent","text","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","label","trim","hideInstant","renderPopupContent","calculatePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","remove","Date","now","instant","mountPopup","setTimeout","classList","add","tip","id","className","Object","assign","style","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","hint","labelWrap","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n.tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n  animation: none;\n  opacity: 1;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n.tooltip-label {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--color-foreground-primary);\n}\n\n.key-hint {\n  width: var(--ds-control-icon, var(--dimension-size-200));\n  height: var(--ds-control-icon, var(--dimension-size-200));\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  border-bottom-width: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-025);\n  color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n  CONTROL_TEXT_VARIANT,\n  resolveCssLengthPx,\n  resolveCssTimeMs,\n  TOKEN_CSS_LENGTHS,\n  TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n  md: TOKEN_DEFAULTS.size400,\n  sm: TOKEN_DEFAULTS.size300,\n  xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n  as: string;\n  variant: TextVariant;\n  emphasis: boolean;\n  color: string;\n};\n\nfunction createDsText(opts: {\n  variant: TextVariant;\n  emphasis?: boolean;\n  color?: string;\n  text: string;\n}): DsTextEl {\n  const el = document.createElement('ds-text') as DsTextEl;\n  el.as = 'span';\n  el.variant = opts.variant;\n  el.emphasis = opts.emphasis ?? false;\n  el.color = opts.color ?? 'inherit';\n  el.textContent = opts.text;\n  return el;\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n   * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n   */\n  @Prop() label!: string;\n\n  /** Control density (height, padding, type). */\n  @Prop() size: TooltipSize = 'md';\n\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  /**\n   * Hover show delay before the tooltip appears.\n   * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n   * initial hover/focus show only — after a recent dismiss, reopen is instant.\n   * Prefer the default; override only for denser chrome or rare/destructive actions.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private popupEl: HTMLElement | null = null;\n  private skipEnterAnimation = false;\n  private isOpen = false;\n  private mouseEnterHandler: () => void = () => this.show();\n  private mouseLeaveHandler: () => void = () => this.hide();\n  /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n  private focusHandler: () => void = () => this.show();\n  private blurHandler: (e: FocusEvent) => void = (e) => {\n    const next = e.relatedTarget as Node | null;\n    if (next && this.anchor?.contains(next)) return;\n    this.hide();\n  };\n\n  componentDidLoad() {\n    this.bindAnchor();\n  }\n\n  disconnectedCallback() {\n    if (activeTooltip === this) activeTooltip = null;\n    this.unbindAnchor();\n    this.clearTimers();\n    this.destroyPopup();\n  }\n\n  @Watch('label')\n  @Watch('size')\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  @Watch('shortcutKey')\n  @Watch('shortcutKeyPosition')\n  onContentOrPositionChange() {\n    if (!this.label?.trim()) {\n      if (this.isOpen || this.popupEl) this.hideInstant();\n      return;\n    }\n    if (!this.popupEl || !this.isOpen) return;\n    this.renderPopupContent();\n    this.calculatePosition();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get hoverDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n  }\n\n  private get instantReopenMs(): number {\n    return resolveCssTimeMs(\n      TOKEN_DEFAULTS.animationDurationMedium1,\n      TOKEN_DEFAULTS.animationDurationMedium1,\n    );\n  }\n\n  private get fadeOutMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private get tooltipFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n  }\n\n  private get tooltipFallbackHeightPx(): number {\n    const token = FALLBACK_HEIGHT[this.size];\n    return resolveCssLengthPx(token, token);\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child) return;\n    this.anchor = child;\n    child.setAttribute('aria-describedby', this.tooltipId);\n    child.addEventListener('mouseenter', this.mouseEnterHandler);\n    child.addEventListener('mouseleave', this.mouseLeaveHandler);\n    child.addEventListener('focusin', this.focusHandler);\n    child.addEventListener('focusout', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.anchor.removeAttribute('aria-describedby');\n    this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n    this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n    this.anchor.removeEventListener('focusin', this.focusHandler);\n    this.anchor.removeEventListener('focusout', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private destroyPopup() {\n    if (!this.popupEl) return;\n    this.popupEl.remove();\n    this.popupEl = null;\n  }\n\n  /** Drop the open tip immediately (warm handoff to another tooltip). */\n  private hideInstant() {\n    this.clearTimers();\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    this.destroyPopup();\n    this.isOpen = false;\n    this.skipEnterAnimation = false;\n  }\n\n  private show() {\n    // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n    // but no tip should appear.\n    if (!this.label?.trim()) return;\n    this.clearTimers();\n    let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n    if (activeTooltip && activeTooltip !== this) {\n      activeTooltip.hideInstant();\n      instant = true;\n    }\n    activeTooltip = this;\n    this.skipEnterAnimation = instant;\n    if (instant) {\n      this.mountPopup();\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      if (!this.label?.trim()) return;\n      this.mountPopup();\n    }, this.hoverDelayMs);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.popupEl && !this.isOpen) return;\n    lastDismissedAt = Date.now();\n    if (activeTooltip === this) activeTooltip = null;\n    if (!this.popupEl) {\n      this.isOpen = false;\n      return;\n    }\n    this.popupEl.classList.remove('tooltip-popup--instant');\n    this.popupEl.classList.add('tooltip-popup--closing');\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.destroyPopup();\n      this.isOpen = false;\n      this.skipEnterAnimation = false;\n    }, this.fadeOutMs);\n  }\n\n  private mountPopup() {\n    if (!this.popupEl) {\n      const tip = document.createElement('div');\n      tip.id = this.tooltipId;\n      tip.setAttribute('role', 'tooltip');\n      // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n      tip.className = 'tooltip-popup sc-ds-tooltip';\n      Object.assign(tip.style, {\n        position: 'fixed',\n        left: '0',\n        top: '0',\n        zIndex: 'var(--dimension-z-index-tooltip)',\n        pointerEvents: 'none',\n      });\n      document.body.appendChild(tip);\n      this.popupEl = tip;\n    }\n\n    this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n    this.popupEl.classList.remove('tooltip-popup--closing');\n    this.renderPopupContent();\n    this.calculatePosition();\n    this.isOpen = true;\n  }\n\n  private renderPopupContent() {\n    if (!this.popupEl) return;\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const density =\n      this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n    // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n    const sc = 'sc-ds-tooltip';\n\n    const inner = document.createElement('div');\n    inner.className = `tooltip-inner ${density} ${sc}`;\n\n    const appendShortcut = (position: 'start' | 'end') => {\n      if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n      const hint = document.createElement('div');\n      hint.className = `key-hint ${sc}`;\n      hint.setAttribute('aria-hidden', 'true');\n      hint.appendChild(\n        createDsText({ variant: 'text-caption', emphasis: true, text: this.shortcutKey }),\n      );\n      inner.appendChild(hint);\n    };\n\n    appendShortcut('start');\n\n    const labelWrap = document.createElement('span');\n    labelWrap.className = `tooltip-label ${sc}`;\n    labelWrap.appendChild(createDsText({ variant: textVariant, text: this.label }));\n    inner.appendChild(labelWrap);\n\n    appendShortcut('end');\n\n    this.popupEl.replaceChildren(inner);\n  }\n\n  private calculatePosition() {\n    if (!this.anchor || !this.popupEl) return;\n    const tip = this.popupEl;\n    const a = this.anchor.getBoundingClientRect();\n    const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n    const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n    const sideOffset = this.sideOffsetPx;\n    const alignOffset = this.alignOffsetPx;\n    const vpPad = this.viewportPadPx;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - th - sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + sideOffset;\n        x = this.align === 'start' ? a.left + alignOffset\n          : this.align === 'end' ? a.right - tw + alignOffset\n          : a.left + a.width / 2 - tw / 2 + alignOffset;\n        break;\n      case 'left':\n        x = a.left - tw - sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n      case 'right':\n        x = a.right + sideOffset;\n        y = this.align === 'start' ? a.top + alignOffset\n          : this.align === 'end' ? a.bottom - th + alignOffset\n          : a.top + a.height / 2 - th / 2 + alignOffset;\n        break;\n    }\n\n    const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n    const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n    tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-BAeKw2pj.js → p-DkcH8mRl.js}

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-gradient-swatch:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"fa7ca80e52696c8015cb394c1ac893101cae32ef"},a("button",{key:"c1822d03928817a7df1a41b9cbad384af22da34a",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"cfb65947bea286b30bfce3283e14aa9d3d663d45",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"2b71f81ad5ace582e421e6e097f1cbfcb1738619",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"ac55a44f4d3507084bffcdf842cdef9fce23ffb7",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"670b4907259680e86bfad3a0911e8c0eae6d7f14",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"d3f7ebc3f370da233a55cc946c9c57808c769f42",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
-//# sourceMappingURL=p-BAeKw2pj.js.map
+import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-gradient-swatch:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"ee4f84cf983cf1509667a219ef6fbd8b0983c3f5"},a("button",{key:"7317a3b59f9dd9a5dc253618763a261f301e842c",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"3a277f88e4e8dfa3c3e4181c173be492f7f25608",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"b571ad3dc7a86ee36cbb027805d7f1225d061556",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"d2e276ff999efc3bf4e637fd2c04ba5399d8ea68",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"b245a99ef984b6a10f132941e89f111b81edc3d3",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"d0b756c66cf76ac5eedc0a56b5d228cd32776978",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
+//# sourceMappingURL=p-DkcH8mRl.js.map

package/dist/components/p-DrhmNrKD.js

@@ -0,0 +1,2 @@
+import{p as o,H as t,c as r,h as s,a,t as n}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-AiGt4dQS.js";import{d as c}from"./p-BDQgqw5J.js";const l=()=>`.sc-ds-tab-group-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap;line-height:var(--typography-lineheight-md)}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.dsRovingExit=r(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,t){if(!this.selectionFollowsFocus){if(t===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(t===undefined||o===t)return;requestAnimationFrame((()=>{const t=document.activeElement;if(!t||!this.el.contains(t))return;const r=t.getAttribute("data-tab-id");if(r===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{t.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const t=this.el.querySelector(`[data-tab-id="${o}"]`);t?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const t=[...o].reverse().find((o=>!o.isInactive));if(t)await this.focusTab(t.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const t=this.selectableTabs;if(t.some((t=>t.id===o&&!t.isInactive))){this.focusedTabId=o;return}const r=t.find((o=>!o.isInactive));this.focusedTabId=r?.id??""}selectTab(o,t){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(t?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,t){const r=this.selectableTabs;for(let s=o+t;s>=0&&s<r.length;s+=t){if(!r[s]?.isInactive)return s}return null}findEnabled(o,t){const r=this.selectableTabs;const s=r.length;for(let a=0;a<s;a++){const n=(o+t*(a+1)+s*(a+1))%s;if(!r[n]?.isInactive)return n}return o}moveFocusToIndex(o){const t=this.selectableTabs[o];if(!t)return;this.focusedTabId=t.id;void this.focusTab(t.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const t=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!t||t.isInactive)return;o.preventDefault();this.selectTab(t.id,{focus:true})}handleKeyDown(o){const t=this.selectableTabs;if(!t.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const r=this.selectionFollowsFocus?t.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(r<0)return;const s=this.orientation==="vertical";let a=null;let n=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){a=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){a=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)n="start";else a=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){a=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){a=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)n="start";else a=o}}}if(o.key==="Home"){const o=t.findIndex((o=>!o.isInactive));a=o===-1?null:o}else if(o.key==="End"){const o=[...t].reverse().findIndex((o=>!o.isInactive));a=o===-1?null:t.length-1-o}if(n){o.preventDefault();this.dsRovingExit.emit(n);return}if(a!==null&&a!==r){o.preventDefault();const r=t[a];if(this.selectionFollowsFocus){this.selectTab(r.id)}else{this.moveFocusToIndex(a)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const t=this.orientation==="vertical";const r=this.background==="navigation";return s(a,{key:"236e7372792a0b307271737f30ecf1463ca602e6",class:"tab-group-nav-host"},s("div",{key:"dd36f2682a2d6482fa008958a603440eca61c910",role:"tablist",class:{"tab-list":true,"tab-list--vertical":t,"tab-list--on-navigation":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":t?"vertical":undefined},this.tabs.map(((r,a)=>{if(e(r)){return s("div",{key:`divider-${a}`,class:{"tab-divider":true,"tab-divider--vertical":t},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=r.id===this.value;return s("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":n,"ds-focus-ring-inset":true,"ds-control-inactive":!!r.isInactive,[o]:!!o},"aria-selected":n,"aria-disabled":r.isInactive||undefined,"aria-controls":r.panelId??undefined,disabled:r.isInactive,tabIndex:this.tabIndexForTab(r),onClick:()=>!r.isInactive&&this.selectTab(r.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=r.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!r.dot}},s("ds-text",{as:"span",variant:"text-body-medium",emphasis:n,color:"inherit"},r.label),r.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return l()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(n(o))){customElements.define(n(o),u)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break;case"ds-text":if(!customElements.get(n(o))){c()}break}}))}b();export{u as T,b as d};
+//# sourceMappingURL=p-DrhmNrKD.js.map

package/dist/components/p-DrhmNrKD.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectionFollowsFocus","rovingEnabled","focusedTabId","selectableTabs","getSelectableTabs","componentWillLoad","syncFocusedTabId","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","el","contains","activeId","getAttribute","nextTab","querySelector","focus","preventScroll","blur","onTabsChange","some","tab","id","focusTab","btn","focusLastTab","last","reverse","find","isInactive","focusFirstTab","first","preferred","selectTab","options","dsChange","emit","getFocusedIndex","findIndex","findEnabledLinear","from","step","i","length","findEnabled","len","n","moveFocusToIndex","nextIdx","activateFocusedTab","e","key","item","preventDefault","handleKeyDown","currentIdx","t","isVertical","exit","candidate","lastEnabled","dsRovingExit","getBgClass","background","tabIndexForTab","render","bgClass","isNavigation","h","Host","class","role","ariaLabel","ariaLabelledby","map","index","isTabDivider","isSelected","type","panelId","disabled","tabIndex","onClick","onFocus","tab__label","dot","as","variant","emphasis","color","label"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n/* Inactive: `.ds-control-inactive` (25% opacity) — applied via class in TSX. */\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n  line-height: var(--typography-lineheight-md);\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n  color: var(--color-navigation-foreground-secondary);\n  --_hover-bg: var(--color-navigation-interaction-hover);\n  --_pressed-bg: var(--color-navigation-interaction-pressed);\n  --_dot: var(--color-navigation-foreground-brand);\n  --_dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.tab-list--on-navigation .tab-divider__line {\n  background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, Method, State, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-tab-group-nav',\n  styleUrl: 'TabGroupNav.css',\n  scoped: true,\n})\nexport class TabGroupNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabGroupNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection.\n   * Used by bar nav where each tab is a full page transition.\n   */\n  @Prop() selectionFollowsFocus: boolean = true;\n\n  /** When `false`, every tab uses `tabindex=\"-1\"` (another chrome control owns the tab stop). */\n  @Prop() rovingEnabled: boolean = true;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  /** Fired when arrow navigation reaches the first/last tab in manual selection mode. */\n  @Event() dsRovingExit!: EventEmitter<'start' | 'end'>;\n\n  @State() private focusedTabId: string = '';\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  componentWillLoad() {\n    this.syncFocusedTabId(this.value);\n  }\n\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (!this.selectionFollowsFocus) {\n      if (prev === undefined || next !== this.focusedTabId) {\n        this.syncFocusedTabId(next);\n      }\n      return;\n    }\n\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  @Watch('tabs')\n  onTabsChange() {\n    if (!this.selectableTabs.some(tab => tab.id === this.focusedTabId)) {\n      this.syncFocusedTabId(this.value);\n    }\n  }\n\n  @Method()\n  async focusTab(id: string) {\n    this.focusedTabId = id;\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  @Method()\n  async focusLastTab() {\n    const tabs = this.selectableTabs;\n    const last = [...tabs].reverse().find(tab => !tab.isInactive);\n    if (last) await this.focusTab(last.id);\n  }\n\n  @Method()\n  async focusFirstTab() {\n    const first = this.selectableTabs.find(tab => !tab.isInactive);\n    if (first) await this.focusTab(first.id);\n  }\n\n  private syncFocusedTabId(preferred: string) {\n    const tabs = this.selectableTabs;\n    if (tabs.some(tab => tab.id === preferred && !tab.isInactive)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.isInactive);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.focusedTabId = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      void this.focusTab(id);\n    }\n  }\n\n  private getFocusedIndex(): number {\n    return this.selectableTabs.findIndex(tab => tab.id === this.focusedTabId);\n  }\n\n  private findEnabledLinear(from: number, step: 1 | -1): number | null {\n    const tabs = this.selectableTabs;\n    for (let i = from + step; i >= 0 && i < tabs.length; i += step) {\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return null;\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  private moveFocusToIndex(nextIdx: number) {\n    const next = this.selectableTabs[nextIdx];\n    if (!next) return;\n    this.focusedTabId = next.id;\n    void this.focusTab(next.id);\n  }\n\n  private activateFocusedTab(e: KeyboardEvent) {\n    if (e.key !== 'Enter' && e.key !== ' ') return;\n    const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);\n    if (!tab || tab.isInactive) return;\n    e.preventDefault();\n    this.selectTab(tab.id, { focus: true });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    if (!this.selectionFollowsFocus) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        this.activateFocusedTab(e);\n        return;\n      }\n    }\n\n    const currentIdx = this.selectionFollowsFocus\n      ? tabs.findIndex(t => t.id === this.value)\n      : this.getFocusedIndex();\n    if (currentIdx < 0) return;\n\n    const isVertical = this.orientation === 'vertical';\n    let nextIdx: number | null = null;\n    let exit: 'start' | 'end' | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, 1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, 1);\n          if (candidate === null) exit = 'end';\n          else nextIdx = candidate;\n        }\n      } else if (e.key === 'ArrowLeft') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, -1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, -1);\n          if (candidate === null) exit = 'start';\n          else nextIdx = candidate;\n        }\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, 1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, 1);\n          if (candidate === null) exit = 'end';\n          else nextIdx = candidate;\n        }\n      } else if (e.key === 'ArrowUp') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, -1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, -1);\n          if (candidate === null) exit = 'start';\n          else nextIdx = candidate;\n        }\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (exit) {\n      e.preventDefault();\n      this.dsRovingExit.emit(exit);\n      return;\n    }\n\n    if (nextIdx !== null && nextIdx !== currentIdx) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      if (this.selectionFollowsFocus) {\n        this.selectTab(next.id);\n      } else {\n        this.moveFocusToIndex(nextIdx);\n      }\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    if (this.background === 'navigation') return 'on-navigation';\n    return `on-${this.background}`;\n  }\n\n  private tabIndexForTab(tab: TabItemTab): number {\n    if (!this.rovingEnabled) return -1;\n    if (this.selectionFollowsFocus) {\n      return tab.id === this.value ? 0 : -1;\n    }\n    return tab.id === this.focusedTabId ? 0 : -1;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n    const isNavigation = this.background === 'navigation';\n\n    return (\n      <Host class=\"tab-group-nav-host\">\n        <div\n          role=\"tablist\"\n          class={{\n            'tab-list': true,\n            'tab-list--vertical': isVertical,\n            'tab-list--on-navigation': isNavigation,\n          }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  'ds-focus-ring-inset': true,\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={this.tabIndexForTab(tab)}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n                onFocus={() => {\n                  if (!this.selectionFollowsFocus) {\n                    this.focusedTabId = tab.id;\n                  }\n                }}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                }}>\n                  <ds-text as=\"span\" variant=\"text-body-medium\" emphasis={isSelected} color=\"inherit\">\n                    {tab.label}\n                  </ds-text>\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-B2_D4IDN.js → p-DujEDZ7f.js}

@@ -1,2 +1,2 @@
-import{p as d,H as a,h as r,a as e,t as i}from"./index.js";import{d as s}from"./p-CtwNUCnp.js";const c=()=>`.sc-ds-card-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-width);min-height:var(--_card-min-height);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--editing.sc-ds-card-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card__header.sc-ds-card{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);flex-shrink:0;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--editing.sc-ds-card-h .card__header.sc-ds-card{background-color:transparent;border-bottom-color:transparent}.card__title-wrap.sc-ds-card{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__title.sc-ds-card{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card__actions.sc-ds-card{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card__actions.sc-ds-card:empty{display:none}.card__body.sc-ds-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__body.sc-ds-card{border-radius:var(--dimension-radius-025)}`;const o={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const t="var(--color-foreground-faint-brand)";const l=d(class d extends a{constructor(d){super();if(d!==false){this.__registerHost()}this.cardWidth="md";this.appearance="default"}render(){const d=this.appearance==="editing";return r(e,{key:"c0a1a2eed24f2fae229f75d8b27527ae0c5b832f",class:{card:true,"card--editing":d},style:{"--_card-width":o[this.cardWidth],"--_card-min-height":n[this.cardWidth]}},r("header",{key:"120832c3d2391a079bbe2cd034c339d7778ef98f",class:"card__header"},r("div",{key:"5579ce0f79d5d4bbd4df742216a7465614399daa",class:"card__title-wrap"},r("ds-text",{key:"759e9a6e4e13574ef6e9715a5d0aa62a6425a64d",class:"card__title",variant:"text-title-small",color:d?t:"primary",as:"h2"},this.heading)),r("div",{key:"a8a092f8e4dd0250975afdac050ab7d74fef46ff",class:"card__actions"},r("slot",{key:"dc531217d9737775310ebf04d7da3bf749dbd874",name:"actions"}))),r("div",{key:"31223265fa3b2efb8a39ecd86a6c8b3156fc0d2e",class:"card__body"},r("slot",{key:"92fc459b514100a0f2e29855dc62539625b85525"})))}static get style(){return c()}},[262,"ds-card",{heading:[1],cardWidth:[1,"card-width"],appearance:[1]}]);function b(){if(typeof customElements==="undefined"){return}const d=["ds-card","ds-text"];d.forEach((d=>{switch(d){case"ds-card":if(!customElements.get(i(d))){customElements.define(i(d),l)}break;case"ds-text":if(!customElements.get(i(d))){s()}break}}))}b();export{l as C,b as d};
-//# sourceMappingURL=p-B2_D4IDN.js.map
+import{p as a,H as d,h as e,a as r,t as s}from"./index.js";import{d as i}from"./p-BDQgqw5J.js";const c=()=>`.sc-ds-card-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-width);min-height:var(--_card-min-height);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--editing.sc-ds-card-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card__header.sc-ds-card{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);flex-shrink:0;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--editing.sc-ds-card-h .card__header.sc-ds-card{background-color:transparent;border-bottom-color:transparent}.card__title-wrap.sc-ds-card{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__title.sc-ds-card{display:inline-flex;align-items:center;min-width:0;padding:var(--dimension-space-025)}.card__actions.sc-ds-card{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card__actions.sc-ds-card:empty{display:none}.card__body.sc-ds-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__body.sc-ds-card{border-radius:var(--dimension-radius-025)}`;const o={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const t="var(--color-foreground-faint-brand)";const l=a(class a extends d{constructor(a){super();if(a!==false){this.__registerHost()}this.cardWidth="md";this.appearance="default"}render(){const a=this.appearance==="editing";return e(r,{key:"9aa61d42e716d0f272c9789e216ec8716ead2bb8",class:{card:true,"card--editing":a},style:{"--_card-width":o[this.cardWidth],"--_card-min-height":n[this.cardWidth]}},e("header",{key:"d41b866be284957d8be5b030ca3c38f8bbe7edf5",class:"card__header"},e("div",{key:"3fb3af4ba49e4ec9c7887643cfbf5c7de178a38f",class:"card__title-wrap"},e("span",{key:"f34da818e29f3673e06d992644c9851d989bdbbe",class:"card__title"},e("ds-text",{key:"a23cacaa8f123c8a6e8cb88f1082b79ab1ae76a4",variant:"text-title-small",emphasis:true,color:a?t:"primary",as:"h2"},this.heading))),e("div",{key:"6143ac25297f4147dddb4a19680abd56a0afad73",class:"card__actions"},e("slot",{key:"0f496eb417e6d6b6c94db422d65bc6038928b292",name:"actions"}))),e("div",{key:"368e1dae26709b0fe5400a2558ee5c59caae7ee9",class:"card__body"},e("slot",{key:"d0fb63a1cc2ac545acbfdec70f153545e9072a31"})))}static get style(){return c()}},[262,"ds-card",{heading:[1],cardWidth:[1,"card-width"],appearance:[1]}]);function b(){if(typeof customElements==="undefined"){return}const a=["ds-card","ds-text"];a.forEach((a=>{switch(a){case"ds-card":if(!customElements.get(s(a))){customElements.define(s(a),l)}break;case"ds-text":if(!customElements.get(s(a))){i()}break}}))}b();export{l as C,b as d};
+//# sourceMappingURL=p-DujEDZ7f.js.map

package/dist/components/p-DujEDZ7f.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","appearance","render","editing","h","Host","key","class","card","style","variant","emphasis","color","as","heading","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-width);\n  min-height: var(--_card-min-height);\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:host(.card--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card__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  flex-shrink: 0;\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:host(.card--editing) .card__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\n.card__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__title {\n  display: inline-flex;\n  align-items: center;\n  min-width: 0;\n  padding: var(--dimension-space-025);\n}\n\n.card__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card__actions:empty {\n  display: none;\n}\n\n.card__body {\n  flex: 1 1 auto;\n  min-height: 0;\n  display: flex;\n  flex-direction: column;\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:host(.card--editing) .card__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type CardWidth = 'sm' | 'md' | 'lg';\n\n/** Visual chrome recipe — default app surface, or settings edit wash. */\nexport type CardAppearance = 'default' | 'editing';\n\nconst CARD_WIDTH_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n/**\n * Shared card chrome — width + matching min-height tokens, header (title + actions),\n * and a flex body that fills leftover space. Compose this from settings / data-viz cards.\n */\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so empty bodies still fill the card.\n   */\n  @Prop() cardWidth: CardWidth = 'md';\n\n  /** Chrome recipe — `editing` applies the settings edit wash. */\n  @Prop() appearance: CardAppearance = 'default';\n\n  render() {\n    const editing = this.appearance === 'editing';\n\n    return (\n      <Host\n        class={{\n          card: true,\n          'card--editing': editing,\n        }}\n        style={{\n          '--_card-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card__header\">\n          <div class=\"card__title-wrap\">\n            <span class=\"card__title\">\n              <ds-text\n                variant=\"text-title-small\"\n                emphasis\n                color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n                as=\"h2\"\n              >\n                {this.heading}\n              </ds-text>\n            </span>\n          </div>\n          <div class=\"card__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAU,IAAM,mtDCOtB,MAAMC,EAA6C,CACjDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAA8C,CAClDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAWnBC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAaUC,KAAAC,UAAuB,KAGvBD,KAAAE,WAA6B,SAuCtC,CArCC,MAAAC,GACE,MAAMC,EAAUJ,KAAKE,aAAe,UAEpC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,KAAM,KACN,gBAAiBL,GAEnBM,MAAO,CACL,gBAAiBrB,EAAgBW,KAAKC,WACtC,qBAAsBR,EAAiBO,KAAKC,aAG9CI,EAAA,UAAAE,IAAA,2CAAQC,MAAM,gBACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,eACVH,EAAA,WAAAE,IAAA,2CACEI,QAAQ,mBACRC,SAAQ,KACRC,MAAOT,EAAUV,EAA0B,UAC3CoB,GAAG,MAEFd,KAAKe,WAIZV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,cAGfX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/p-DwQ-zdqa.js

@@ -0,0 +1,2 @@
+import{p as t,H as i,h as o,a as s,t as a}from"./index.js";import{d as e}from"./p-BDQgqw5J.js";import{T as n}from"./p-B_g8X0eh.js";import{r as d}from"./p-C1cBr-Ri.js";const r=()=>`.ds-control--md.sc-ds-tooltip-data-viz-h,.ds-control--md.sc-ds-tooltip-data-viz{--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);--ds-control-line-height:var(--typography-lineheight-md)}.ds-control--sm.sc-ds-tooltip-data-viz-h,.ds-control--sm.sc-ds-tooltip-data-viz{--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);--ds-control-line-height:var(--typography-lineheight-sm)}.ds-control--xs.sc-ds-tooltip-data-viz-h,.ds-control--xs.sc-ds-tooltip-data-viz{--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);--ds-control-line-height:var(--typography-lineheight-xs)}.sc-ds-tooltip-data-viz-h{position:absolute;z-index:var(--dimension-z-index-tooltip);display:block;box-sizing:border-box;background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md));border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;opacity:0}.tooltip-data-viz--visible.sc-ds-tooltip-data-viz-h{animation:tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards}.tooltip-data-viz__item.sc-ds-tooltip-data-viz{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--dimension-space-025);padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-data-viz__label.sc-ds-tooltip-data-viz,.tooltip-data-viz__value.sc-ds-tooltip-data-viz{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));line-height:var(--typography-lineheight-md)}@keyframes tooltip-data-viz-fade-in{from{opacity:0}to{opacity:1}}`;const l=12;const c=8;const h=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.value="";this.label="";this.x=0;this.y=0;this.delay=n.animationDelayInstant;this.side="right";this.align="bottom";this.visible=false;this.delayTimer=null}componentDidLoad(){this.scheduleShow();this.calculatePlacement()}disconnectedCallback(){this.clearDelayTimer()}onAnchorChange(){requestAnimationFrame((()=>this.calculatePlacement()))}onDelayChange(){if(!this.visible)this.scheduleShow()}get showDelayMs(){return d(this.delay,n.animationDelayInstant)}clearDelayTimer(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}}scheduleShow(){this.clearDelayTimer();this.visible=false;const t=this.showDelayMs;if(t<=0){this.visible=true;return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.visible=true;requestAnimationFrame((()=>this.calculatePlacement()))}),t)}calculatePlacement(){const t=this.el.getBoundingClientRect();if(!t.width||!t.height)return;const i=t.right>window.innerWidth-c?"left":"right";const o=t.bottom>window.innerHeight-c?"top":"bottom";if(i!==this.side)this.side=i;if(o!==this.align)this.align=o}render(){const t=this.side==="right"?`${l}px`:`calc(-100% - ${l}px)`;const i=this.align==="bottom"?`${l}px`:`calc(-100% - ${l}px)`;return o(s,{key:"41988cc4fd41db994cbab65d89c6b90b063a269b",class:{"tooltip-data-viz":true,"tooltip-data-viz--visible":this.visible},style:{left:`${this.x}px`,top:`${this.y}px`,transform:`translate(${t}, ${i})`}},o("div",{key:"884cbc0ece14ed705dddba5b5322c36d7bc70415",class:"tooltip-data-viz__item ds-control--md"},o("span",{key:"29161a93b512478766e6d0ba7dc32b6e60042e2e",class:"tooltip-data-viz__label"},o("ds-text",{key:"f7759a6f020297438e5c65d2ee8304c008f5d6d9",as:"span",variant:"text-body-medium",color:"var(--color-foreground-on-translucent-background-secondary)"},this.label)),o("span",{key:"641ad5d3f03018740d49c9111a8b584bb0fb6e87",class:"tooltip-data-viz__value"},o("ds-text",{key:"7005941bd68a1596636ba02b7aaa8897ad019c1e",as:"span",variant:"text-body-medium",emphasis:true,color:"var(--color-foreground-on-translucent-background-primary)"},this.value))))}get el(){return this}static get watchers(){return{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}}static get style(){return r()}},[2,"ds-tooltip-data-viz",{value:[8],label:[1],x:[2],y:[2],delay:[8],side:[32],align:[32],visible:[32]},undefined,{x:[{onAnchorChange:0}],y:[{onAnchorChange:0}],delay:[{onDelayChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip-data-viz","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip-data-viz":if(!customElements.get(a(t))){customElements.define(a(t),h)}break;case"ds-text":if(!customElements.get(a(t))){e()}break}}))}p();export{h as T,p as d};
+//# sourceMappingURL=p-DwQ-zdqa.js.map

package/dist/components/p-DwQ-zdqa.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipDataVizCss","CURSOR_OFFSET_PX","VIEWPORT_PAD_PX","TooltipDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","label","x","y","delay","TOKEN_DEFAULTS","animationDelayInstant","side","align","visible","delayTimer","componentDidLoad","scheduleShow","calculatePlacement","disconnectedCallback","clearDelayTimer","onAnchorChange","requestAnimationFrame","onDelayChange","showDelayMs","resolveCssTimeMs","clearTimeout","ms","setTimeout","rect","el","getBoundingClientRect","width","height","nextSide","right","window","innerWidth","nextAlign","bottom","innerHeight","render","translateX","translateY","h","Host","key","class","style","left","top","transform","as","variant","color","emphasis"],"sources":["src/wc/components/TooltipDataViz/TooltipDataViz.css?tag=ds-tooltip-data-viz&encapsulation=scoped","src/wc/components/TooltipDataViz/TooltipDataViz.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n/* No padding here — the item div below owns all the spacing, so there's exactly one padding\n   box instead of stacking the host's padding on top of the item's. */\n:host {\n  position: absolute;\n  z-index: var(--dimension-z-index-tooltip);\n  display: block;\n  box-sizing: border-box;\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  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  box-shadow: var(--effect-elevation-elevated-floating);\n  white-space: nowrap;\n  pointer-events: none;\n  opacity: 0;\n}\n\n:host(.tooltip-data-viz--visible) {\n  animation: tooltip-data-viz-fade-in var(--effect-motion-short-2) forwards;\n}\n\n/* Density: md control recipe (height / pad / label inset) — non-interactive, no interaction-fill. */\n.tooltip-data-viz__item {\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/* <ds-text>'s host is `display: contents` — padding/line-height on it would no-op, so this\n   wrapper owns both: label inset around the text, and line-height matching text-body-medium\n   so the wrapper hugs its actual content instead of inheriting the browser default. */\n.tooltip-data-viz__label,\n.tooltip-data-viz__value {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  line-height: var(--typography-lineheight-md);\n}\n\n@keyframes tooltip-data-viz-fade-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nconst CURSOR_OFFSET_PX = 12;\nconst VIEWPORT_PAD_PX = 8;\n\nexport type TooltipDataVizSide = 'left' | 'right';\nexport type TooltipDataVizAlign = 'top' | 'bottom';\n\n/**\n * Positioned value/label callout for chart hover interactions (donut slice, bar,\n * line point, ...). Unlike `ds-tooltip`, this doesn't bind to a slotted anchor element —\n * charts hover-highlight data that lives inside an SVG, so the chart itself computes\n * the anchor point (e.g. the cursor position while hovering) and passes it in as `x`/`y`.\n *\n * Renders `position: absolute` — place inside a `position: relative` chart wrapper,\n * with `x`/`y` as pixel coordinates within that wrapper. Defaults to sitting below-right\n * of the anchor (matching cursor-following tooltips), flipping to whichever side/edge\n * keeps it on-screen.\n *\n * Mount (or remount) when a hover session starts so `delay` applies once per hover;\n * keep the instance mounted while the cursor moves so tracking stays instant.\n */\n@Component({\n  tag: 'ds-tooltip-data-viz',\n  styleUrl: 'TooltipDataViz.css',\n  scoped: true,\n})\nexport class TooltipDataViz {\n  @Element() el!: HTMLElement;\n\n  @Prop() value: string | number = '';\n  @Prop() label: string = '';\n  /** Anchor point in px, relative to the nearest `position: relative` ancestor — e.g. the cursor. */\n  @Prop() x: number = 0;\n  @Prop() y: number = 0;\n\n  /**\n   * Show delay after mount before the callout appears.\n   * Default: `--effect-animation-delay-instant` (0ms). Accepts a number (ms)\n   * or a TokoMo time token / `var(--effect-animation-delay-*)`. Charts need\n   * immediate feedback while scrubbing; prefer the default. Mount once per\n   * hover session so any non-zero delay runs once, then track `x`/`y` instantly.\n   */\n  @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayInstant;\n\n  @State() private side: TooltipDataVizSide = 'right';\n  @State() private align: TooltipDataVizAlign = 'bottom';\n  @State() private visible: boolean = false;\n\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.scheduleShow();\n    this.calculatePlacement();\n  }\n\n  disconnectedCallback() {\n    this.clearDelayTimer();\n  }\n\n  @Watch('x')\n  @Watch('y')\n  onAnchorChange() {\n    requestAnimationFrame(() => this.calculatePlacement());\n  }\n\n  @Watch('delay')\n  onDelayChange() {\n    if (!this.visible) this.scheduleShow();\n  }\n\n  private get showDelayMs(): number {\n    return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayInstant);\n  }\n\n  private clearDelayTimer() {\n    if (this.delayTimer) {\n      clearTimeout(this.delayTimer);\n      this.delayTimer = null;\n    }\n  }\n\n  private scheduleShow() {\n    this.clearDelayTimer();\n    this.visible = false;\n    const ms = this.showDelayMs;\n    if (ms <= 0) {\n      this.visible = true;\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePlacement());\n    }, ms);\n  }\n\n  private calculatePlacement() {\n    const rect = this.el.getBoundingClientRect();\n    if (!rect.width || !rect.height) return;\n\n    const nextSide: TooltipDataVizSide = rect.right > window.innerWidth - VIEWPORT_PAD_PX ? 'left' : 'right';\n    const nextAlign: TooltipDataVizAlign = rect.bottom > window.innerHeight - VIEWPORT_PAD_PX ? 'top' : 'bottom';\n\n    if (nextSide !== this.side) this.side = nextSide;\n    if (nextAlign !== this.align) this.align = nextAlign;\n  }\n\n  render() {\n    const translateX = this.side === 'right' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n    const translateY = this.align === 'bottom' ? `${CURSOR_OFFSET_PX}px` : `calc(-100% - ${CURSOR_OFFSET_PX}px)`;\n\n    return (\n      <Host\n        class={{\n          'tooltip-data-viz': true,\n          'tooltip-data-viz--visible': this.visible,\n        }}\n        style={{ left: `${this.x}px`, top: `${this.y}px`, transform: `translate(${translateX}, ${translateY})` }}\n      >\n        <div class=\"tooltip-data-viz__item ds-control--md\">\n          <span class=\"tooltip-data-viz__label\">\n            <ds-text as=\"span\" variant=\"text-body-medium\" color=\"var(--color-foreground-on-translucent-background-secondary)\">\n              {this.label}\n            </ds-text>\n          </span>\n          <span class=\"tooltip-data-viz__value\">\n            <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"var(--color-foreground-on-translucent-background-primary)\">\n              {this.value}\n            </ds-text>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAoB,IAAM,+1ECGhC,MAAMC,EAAmB,GACzB,MAAMC,EAAkB,E,MAwBXC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,4CAQUC,KAAAC,MAAyB,GACzBD,KAAAE,MAAgB,GAEhBF,KAAAG,EAAY,EACZH,KAAAI,EAAY,EASZJ,KAAAK,MAAyBC,EAAeC,sBAE/BP,KAAAQ,KAA2B,QAC3BR,KAAAS,MAA6B,SAC7BT,KAAAU,QAAmB,MAE5BV,KAAAW,WAAmD,IAsF5D,CApFC,gBAAAC,GACEZ,KAAKa,eACLb,KAAKc,oB,CAGP,oBAAAC,GACEf,KAAKgB,iB,CAKP,cAAAC,GACEC,uBAAsB,IAAMlB,KAAKc,sB,CAInC,aAAAK,GACE,IAAKnB,KAAKU,QAASV,KAAKa,c,CAG1B,eAAYO,GACV,OAAOC,EAAiBrB,KAAKK,MAAOC,EAAeC,sB,CAG7C,eAAAS,GACN,GAAIhB,KAAKW,WAAY,CACnBW,aAAatB,KAAKW,YAClBX,KAAKW,WAAa,I,EAId,YAAAE,GACNb,KAAKgB,kBACLhB,KAAKU,QAAU,MACf,MAAMa,EAAKvB,KAAKoB,YAChB,GAAIG,GAAM,EAAG,CACXvB,KAAKU,QAAU,KACf,M,CAEFV,KAAKW,WAAaa,YAAW,KAC3BxB,KAAKW,WAAa,KAClBX,KAAKU,QAAU,KACfQ,uBAAsB,IAAMlB,KAAKc,sBAAqB,GACrDS,E,CAGG,kBAAAT,GACN,MAAMW,EAAOzB,KAAK0B,GAAGC,wBACrB,IAAKF,EAAKG,QAAUH,EAAKI,OAAQ,OAEjC,MAAMC,EAA+BL,EAAKM,MAAQC,OAAOC,WAAavC,EAAkB,OAAS,QACjG,MAAMwC,EAAiCT,EAAKU,OAASH,OAAOI,YAAc1C,EAAkB,MAAQ,SAEpG,GAAIoC,IAAa9B,KAAKQ,KAAMR,KAAKQ,KAAOsB,EACxC,GAAII,IAAclC,KAAKS,MAAOT,KAAKS,MAAQyB,C,CAG7C,MAAAG,GACE,MAAMC,EAAatC,KAAKQ,OAAS,QAAU,GAAGf,MAAuB,gBAAgBA,OACrF,MAAM8C,EAAavC,KAAKS,QAAU,SAAW,GAAGhB,MAAuB,gBAAgBA,OAEvF,OACE+C,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpB,4BAA6B3C,KAAKU,SAEpCkC,MAAO,CAAEC,KAAM,GAAG7C,KAAKG,MAAO2C,IAAK,GAAG9C,KAAKI,MAAO2C,UAAW,aAAaT,MAAeC,OAEzFC,EAAA,OAAAE,IAAA,2CAAKC,MAAM,yCACTH,EAAA,QAAAE,IAAA,2CAAMC,MAAM,2BACVH,EAAA,WAAAE,IAAA,2CAASM,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,+DACjDlD,KAAKE,QAGVsC,EAAA,QAAAE,IAAA,2CAAMC,MAAM,2BACVH,EAAA,WAAAE,IAAA,2CAASM,GAAG,OAAOC,QAAQ,mBAAmBE,SAAQ,KAACD,MAAM,6DAC1DlD,KAAKC,S","ignoreList":[]}

package/dist/lib/components/Text/text-types.d.ts

@@ -0,0 +1,9 @@
+export type TextVariant = 'text-display-medium' | 'text-display-small' | 'text-title-large' | 'text-title-medium' | 'text-title-small' | 'text-body-large' | 'text-body-medium' | 'text-body-small' | 'text-caption';
+export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
+export type TextColor = TextColorToken | `var(--${string})`;
+export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
+export type TextAlign = 'left' | 'center' | 'right';
+export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
+export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
+export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextFontFeature = 'normal' | 'tabular-nums';

package/dist/lib/utils/control-text.d.ts

@@ -0,0 +1,5 @@
+import type { TextVariant } from '../components/Text/text-types';
+/** Control-density sizes shared by buttons, tags, chips, select, tooltip. */
+export type ControlDensitySize = 'md' | 'sm' | 'xs';
+/** Body/caption variant per control-density size (emphasis is separate). */
+export declare const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant>;

package/dist/lib/utils/index.d.ts

@@ -9,3 +9,5 @@ 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';
+export { CONTROL_TEXT_VARIANT } from './control-text';
+export type { ControlDensitySize } from './control-text';

package/dist/lib/utils/index.js

@@ -301,7 +301,15 @@ function controlWidthClass(width) {
     "ds-control-width--fill": width === "fill"
   };
 }
+
+// src/wc/utils/control-text.ts
+var CONTROL_TEXT_VARIANT = {
+  md: "text-body-medium",
+  sm: "text-body-small",
+  xs: "text-caption"
+};
 export {
+  CONTROL_TEXT_VARIANT,
   SCROLL_EDGE_FADE_DEFAULT_SIZE,
   SCROLL_EDGE_FADE_SIZE_VAR,
   TOKEN_CSS_LENGTHS,

package/dist/lib/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/wc/components/Icon/icon-cache.ts", "../../../src/wc/utils/resolve-css-length-px.ts", "../../../src/wc/utils/format-compact-number.ts", "../../../src/wc/utils/truncate-svg-text.ts", "../../../src/wc/utils/resolve-css-time-ms.ts", "../../../src/wc/utils/scroll-edge-fade.ts", "../../../src/wc/utils/token-defaults.ts", "../../../src/wc/utils/control-width.ts"],
-  "sourcesContent": ["/**\n * Shared SVG glyph cache for ds-icon.\n *\n * Keyed on a global symbol so every module instance (the compiled Stencil chunk\n * inside dist/components and any direct source import, e.g. via `@ds-mo/ui/utils`)\n * reads and writes the same cache. Without this, `registerIcons` called from an\n * app would fill a different Map than the one ds-icon resolves from.\n */\nconst CACHE_KEY = Symbol.for('ds-mo.icon-svg-cache');\n\ntype IconCacheMap = Map<string, string>;\n\ntype GlobalWithIconCache = { [CACHE_KEY]?: IconCacheMap };\n\nexport function iconCacheKey(name: string, flag: boolean): string {\n  return flag ? `flag:${name}` : `system:${name}`;\n}\n\nexport function iconCache(): IconCacheMap {\n  const g = globalThis as GlobalWithIconCache;\n  return (g[CACHE_KEY] ??= new Map());\n}\n\n/**\n * Pre-register glyphs so ds-icon renders them synchronously \u2014 no lazy-chunk\n * fetch, no first-paint pop-in. Import the SVG strings from `@ds-mo/icons`\n * in the app (statically, so they ship in the app's own bundle):\n *\n * ```ts\n * import { Bell } from '@ds-mo/icons/svg/Bell';\n * import { US } from '@ds-mo/icons/svg/flags/US';\n * import { registerIcons } from '@ds-mo/ui/utils';\n *\n * registerIcons({ Bell });\n * registerIcons({ US }, { flag: true });\n * ```\n *\n * Icons that are not registered still work \u2014 they lazy-load on first render\n * and stay cached afterwards.\n */\nexport function registerIcons(icons: Record<string, string>, options?: { flag?: boolean }): void {\n  const cache = iconCache();\n  const flag = options?.flag === true;\n  for (const [name, svg] of Object.entries(icons)) {\n    cache.set(iconCacheKey(name, flag), svg);\n  }\n}\n", "const lengthPxCache = new Map<string, number>();\n\nlet probeEl: HTMLElement | null = null;\n\nfunction getProbeElement(): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n\n  if (!probeEl) {\n    probeEl = document.createElement('div');\n    probeEl.setAttribute('aria-hidden', 'true');\n    probeEl.style.cssText =\n      'position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:0;overflow:hidden;';\n    document.documentElement.appendChild(probeEl);\n  }\n\n  return probeEl;\n}\n\n/** Clear session cache (tests only). */\nexport function clearCssLengthPxCache(): void {\n  lengthPxCache.clear();\n}\n\n/**\n * Resolve a CSS length to pixels for layout math.\n * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.\n */\nexport function resolveCssLengthPx(\n  value: number | string | undefined,\n  fallback: number | string,\n): number {\n  const resolved = value === undefined || value === null || value === '' ? fallback : value;\n  if (typeof resolved === 'number') return resolved;\n\n  const trimmed = resolved.trim();\n  if (!trimmed) return resolveCssLengthPx(fallback, 0);\n\n  const cached = lengthPxCache.get(trimmed);\n  if (cached !== undefined) return cached;\n\n  if (/^-?\\d+(\\.\\d+)?$/.test(trimmed)) {\n    const n = Number(trimmed);\n    lengthPxCache.set(trimmed, n);\n    return n;\n  }\n\n  const pxMatch = trimmed.match(/^(-?\\d+(\\.\\d+)?)px$/);\n  if (pxMatch) {\n    const px = parseFloat(pxMatch[1]);\n    lengthPxCache.set(trimmed, px);\n    return px;\n  }\n\n  const cssLength = /^--[\\w-]+$/.test(trimmed) ? `var(${trimmed})` : trimmed;\n\n  const probe = getProbeElement();\n  if (!probe) {\n    return typeof fallback === 'number' ? fallback : 0;\n  }\n\n  probe.style.width = cssLength;\n  const px = probe.getBoundingClientRect().width;\n  probe.style.width = '';\n  lengthPxCache.set(trimmed, px);\n  return px;\n}\n", "const COMPACT_UNITS: { threshold: number; suffix: string }[] = [\n  { threshold: 1_000_000_000, suffix: 'b' },\n  { threshold: 1_000_000, suffix: 'm' },\n  { threshold: 1_000, suffix: 'k' },\n];\n\n/** Compact large numbers for display: 1000 -> \"1k\", 1500 -> \"1.5k\", 110100 -> \"110.1k\", 1000000 -> \"1m\". */\nexport function formatCompactNumber(value: number): string {\n  const sign = value < 0 ? '-' : '';\n  const abs = Math.abs(value);\n  if (abs < 1000) return String(value);\n\n  for (let i = 0; i < COMPACT_UNITS.length; i++) {\n    const unit = COMPACT_UNITS[i];\n    if (abs < unit.threshold) continue;\n\n    let scaled = Math.round((abs / unit.threshold) * 10) / 10;\n    // Carry over, e.g. 999.96k rounds to \"1000k\" \u2014 bump to the next unit instead.\n    if (scaled >= 1000 && i > 0) {\n      const next = COMPACT_UNITS[i - 1];\n      scaled = Math.round((abs / next.threshold) * 10) / 10;\n      return `${sign}${scaled}${next.suffix}`;\n    }\n    return `${sign}${scaled}${unit.suffix}`;\n  }\n  return String(value);\n}\n", "/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement \u2014\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}\u2026`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}\u2026` : '\u2026';\n}\n", "/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */\nexport function parseCssTimeMs(value: string, fallback: number): number {\n  const firstToken = value.trim().split(/\\s+/)[0] ?? '';\n  const num = parseFloat(firstToken);\n  if (Number.isNaN(num)) return fallback;\n  if (/ms\\s*$/.test(firstToken)) return num;\n  if (/s\\s*$/.test(firstToken)) return num * 1000;\n  return num;\n}\n\nfunction extractCssCustomProp(ref: string): string | null {\n  const varMatch = ref.match(/^var\\(\\s*(--[^),]+)/);\n  if (varMatch) return varMatch[1].trim();\n  if (ref.startsWith('--')) return ref.trim();\n  return null;\n}\n\nfunction readTokenTimeMs(token: string, fallback: number): number {\n  if (typeof document === 'undefined') return fallback;\n\n  const prop = extractCssCustomProp(token);\n  if (!prop) return parseCssTimeMs(token, fallback);\n\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();\n  return parseCssTimeMs(raw, fallback);\n}\n\n/**\n * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.\n * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.\n */\nexport function resolveCssTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  if (typeof value === 'number') return value;\n\n  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;\n  const prop = extractCssCustomProp(token);\n\n  if (prop) {\n    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n  }\n\n  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n}\n", "/** CSS custom property for scroll-edge fade depth (dimension token or length). */\nexport const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';\n\nexport const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';\n\nexport type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';\n\nexport type ScrollEdgeFadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\n\nexport type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;\n\nexport interface ScrollEdgeFadeOptions {\n  /** One or more edges to fade. */\n  edges: ScrollEdgeFadeEdge | ScrollEdgeFadeEdge[];\n  /**\n   * When true, or when every listed edge is at its scroll limit, removes the mask.\n   * Pass a per-edge map to hide only the edges that are flush (panel-nav bottom fade).\n   */\n  atEnd?: boolean | Partial<Record<ScrollEdgeFadeEdge, boolean>>;\n  /** Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). */\n  hidden?: boolean;\n}\n\n/** Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. */\nexport function resolveScrollEdgeFadeSize(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): string {\n  if (height) return height;\n  return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)\n    ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]\n    : size;\n}\n\n/** Inline style map setting fade depth on a scroll container. */\nexport function scrollEdgeFadeSizeStyle(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): Record<string, string> {\n  return {\n    [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),\n  };\n}\n\n/**\n * Alpha mask for a scroll container edge \u2014 content fades to transparent so\n * textured backgrounds (shell gradients, images) show through.\n */\nexport function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {\n  switch (edge) {\n    case 'top':\n      return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;\n    case 'bottom':\n      return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'left':\n      return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'right':\n      return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n  }\n}\n\n/** Inline style map for a masked scroll region (single edge). */\nexport function scrollEdgeFadeMaskStyle(\n  edge: ScrollEdgeFadeEdge,\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): Record<string, string> {\n  const mask = scrollEdgeFadeMaskImage(edge);\n  return {\n    ...scrollEdgeFadeSizeStyle(size, height),\n    WebkitMaskImage: mask,\n    maskImage: mask,\n    WebkitMaskSize: '100% 100%',\n    maskSize: '100% 100%',\n  };\n}\n\n/** Class map for `scroll-edge-fade` modifiers \u2014 pair with `scroll-edge-fade.css`. */\nexport function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {\n  const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];\n  const classes: Record<string, boolean> = {\n    'scroll-edge-fade': true,\n    'scroll-edge-fade--hidden': opts.hidden === true,\n  };\n\n  for (const edge of edges) {\n    classes[`scroll-edge-fade--${edge}`] = true;\n  }\n\n  const { atEnd } = opts;\n  if (atEnd === true) {\n    classes['scroll-edge-fade--at-end'] = true;\n  } else if (atEnd && typeof atEnd === 'object') {\n    const allAtEnd = edges.every(edge => atEnd[edge]);\n    if (allAtEnd) {\n      classes['scroll-edge-fade--at-end'] = true;\n    }\n  }\n\n  return classes;\n}\n\n/** Whether a scroll container is flush with the given edge (within `threshold` px). */\nexport function isScrollAtEdge(\n  el: HTMLElement,\n  edge: ScrollEdgeFadeEdge,\n  threshold = 2,\n): boolean {\n  switch (edge) {\n    case 'top':\n      return el.scrollTop <= threshold;\n    case 'bottom':\n      return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n    case 'left':\n      return el.scrollLeft <= threshold;\n    case 'right':\n      return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;\n  }\n}\n", "import {\n  dimensionIconographyMd,\n  dimensionIconographySm,\n  dimensionIconographyXs,\n  dimensionMenuWidthXs,\n  dimensionPanelWidth2xs,\n  dimensionPanelWidthLg,\n  dimensionPanelWidthMd,\n  dimensionRadius025,\n  dimensionSize200,\n  dimensionSize300,\n  dimensionSize400,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  typographyLineheightLg,\n  typographyLineheightMd,\n  typographyLineheightSm,\n  typographyLineheightXl,\n  typographyLineheightXs,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayMedium3,\n  effectAnimationDelayInstant,\n  effectAnimationDelayShort2,\n  effectAnimationDurationMedium1,\n  effectAnimationDurationShort3,\n  effectMotionShort2,\n  effectMotionShort3,\n} from '@ds-mo/tokens/ts';\n\n/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */\nexport const TOKEN_DEFAULTS = {\n  space050: dimensionSpace050,\n  space200: dimensionSpace200,\n  radius025: dimensionRadius025,\n  size200: dimensionSize200,\n  size300: dimensionSize300,\n  size400: dimensionSize400,\n  size600: dimensionSize600,\n  size800: dimensionSize800,\n  iconographyMd: dimensionIconographyMd,\n  iconographySm: dimensionIconographySm,\n  iconographyXs: dimensionIconographyXs,\n  panelWidth2xs: dimensionPanelWidth2xs,\n  panelWidthMd: dimensionPanelWidthMd,\n  panelWidthLg: dimensionPanelWidthLg,\n  menuWidthXs: dimensionMenuWidthXs,\n  lineheightLg: typographyLineheightLg,\n  lineheightMd: typographyLineheightMd,\n  lineheightSm: typographyLineheightSm,\n  lineheightXl: typographyLineheightXl,\n  lineheightXs: typographyLineheightXs,\n  motionShort2: effectMotionShort2,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayInstant: effectAnimationDelayInstant,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayMedium3: effectAnimationDelayMedium3,\n  animationDelayShort2: effectAnimationDelayShort2,\n  animationDelayLong2: effectAnimationDelayLong2,\n  /** Unmeasured menu height fallback: 20\u00D7 base (160px at default scale). */\n  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',\n  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */\n  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',\n  /** Fill-mode donut diameter floor: 16\u00D7 size-base (128px). */\n  donutFillMin: 'calc(var(--dimension-size-base) * 16)',\n  /** Fill-mode donut diameter ceiling: 24\u00D7 size-base (192px). */\n  donutFillMax: 'calc(var(--dimension-size-base) * 24)',\n} as const;\n\nexport type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;\n\n/** Valid CSS length strings for overlay offset props \u2014 bind on `sideOffset` / `alignOffset` in hosts. */\nexport const TOKEN_CSS_LENGTHS = {\n  space050: `var(${dimensionSpace050})`,\n  space200: `var(${dimensionSpace200})`,\n  menuWidthXs: `var(${dimensionMenuWidthXs})`,\n} as const;\n", "/** Shared width fit for interactive controls (buttons, select, \u2026). */\nexport type ControlWidth = 'hug' | 'fill';\n\n/** Host / control class map for `width=\"hug\" | \"fill\"`. */\nexport function controlWidthClass(width: ControlWidth): Record<string, boolean> {\n  return {\n    'ds-control-width--hug': width === 'hug',\n    'ds-control-width--fill': width === 'fill',\n  };\n}\n"],
-  "mappings": "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",
+  "sources": ["../../../src/wc/components/Icon/icon-cache.ts", "../../../src/wc/utils/resolve-css-length-px.ts", "../../../src/wc/utils/format-compact-number.ts", "../../../src/wc/utils/truncate-svg-text.ts", "../../../src/wc/utils/resolve-css-time-ms.ts", "../../../src/wc/utils/scroll-edge-fade.ts", "../../../src/wc/utils/token-defaults.ts", "../../../src/wc/utils/control-width.ts", "../../../src/wc/utils/control-text.ts"],
+  "sourcesContent": ["/**\n * Shared SVG glyph cache for ds-icon.\n *\n * Keyed on a global symbol so every module instance (the compiled Stencil chunk\n * inside dist/components and any direct source import, e.g. via `@ds-mo/ui/utils`)\n * reads and writes the same cache. Without this, `registerIcons` called from an\n * app would fill a different Map than the one ds-icon resolves from.\n */\nconst CACHE_KEY = Symbol.for('ds-mo.icon-svg-cache');\n\ntype IconCacheMap = Map<string, string>;\n\ntype GlobalWithIconCache = { [CACHE_KEY]?: IconCacheMap };\n\nexport function iconCacheKey(name: string, flag: boolean): string {\n  return flag ? `flag:${name}` : `system:${name}`;\n}\n\nexport function iconCache(): IconCacheMap {\n  const g = globalThis as GlobalWithIconCache;\n  return (g[CACHE_KEY] ??= new Map());\n}\n\n/**\n * Pre-register glyphs so ds-icon renders them synchronously \u2014 no lazy-chunk\n * fetch, no first-paint pop-in. Import the SVG strings from `@ds-mo/icons`\n * in the app (statically, so they ship in the app's own bundle):\n *\n * ```ts\n * import { Bell } from '@ds-mo/icons/svg/Bell';\n * import { US } from '@ds-mo/icons/svg/flags/US';\n * import { registerIcons } from '@ds-mo/ui/utils';\n *\n * registerIcons({ Bell });\n * registerIcons({ US }, { flag: true });\n * ```\n *\n * Icons that are not registered still work \u2014 they lazy-load on first render\n * and stay cached afterwards.\n */\nexport function registerIcons(icons: Record<string, string>, options?: { flag?: boolean }): void {\n  const cache = iconCache();\n  const flag = options?.flag === true;\n  for (const [name, svg] of Object.entries(icons)) {\n    cache.set(iconCacheKey(name, flag), svg);\n  }\n}\n", "const lengthPxCache = new Map<string, number>();\n\nlet probeEl: HTMLElement | null = null;\n\nfunction getProbeElement(): HTMLElement | null {\n  if (typeof document === 'undefined') return null;\n\n  if (!probeEl) {\n    probeEl = document.createElement('div');\n    probeEl.setAttribute('aria-hidden', 'true');\n    probeEl.style.cssText =\n      'position:absolute;visibility:hidden;pointer-events:none;top:0;left:0;width:0;height:0;overflow:hidden;';\n    document.documentElement.appendChild(probeEl);\n  }\n\n  return probeEl;\n}\n\n/** Clear session cache (tests only). */\nexport function clearCssLengthPxCache(): void {\n  lengthPxCache.clear();\n}\n\n/**\n * Resolve a CSS length to pixels for layout math.\n * Numbers pass through; `var(--dimension-*)`, `calc(...)`, and `16px` resolve via a hidden probe.\n */\nexport function resolveCssLengthPx(\n  value: number | string | undefined,\n  fallback: number | string,\n): number {\n  const resolved = value === undefined || value === null || value === '' ? fallback : value;\n  if (typeof resolved === 'number') return resolved;\n\n  const trimmed = resolved.trim();\n  if (!trimmed) return resolveCssLengthPx(fallback, 0);\n\n  const cached = lengthPxCache.get(trimmed);\n  if (cached !== undefined) return cached;\n\n  if (/^-?\\d+(\\.\\d+)?$/.test(trimmed)) {\n    const n = Number(trimmed);\n    lengthPxCache.set(trimmed, n);\n    return n;\n  }\n\n  const pxMatch = trimmed.match(/^(-?\\d+(\\.\\d+)?)px$/);\n  if (pxMatch) {\n    const px = parseFloat(pxMatch[1]);\n    lengthPxCache.set(trimmed, px);\n    return px;\n  }\n\n  const cssLength = /^--[\\w-]+$/.test(trimmed) ? `var(${trimmed})` : trimmed;\n\n  const probe = getProbeElement();\n  if (!probe) {\n    return typeof fallback === 'number' ? fallback : 0;\n  }\n\n  probe.style.width = cssLength;\n  const px = probe.getBoundingClientRect().width;\n  probe.style.width = '';\n  lengthPxCache.set(trimmed, px);\n  return px;\n}\n", "const COMPACT_UNITS: { threshold: number; suffix: string }[] = [\n  { threshold: 1_000_000_000, suffix: 'b' },\n  { threshold: 1_000_000, suffix: 'm' },\n  { threshold: 1_000, suffix: 'k' },\n];\n\n/** Compact large numbers for display: 1000 -> \"1k\", 1500 -> \"1.5k\", 110100 -> \"110.1k\", 1000000 -> \"1m\". */\nexport function formatCompactNumber(value: number): string {\n  const sign = value < 0 ? '-' : '';\n  const abs = Math.abs(value);\n  if (abs < 1000) return String(value);\n\n  for (let i = 0; i < COMPACT_UNITS.length; i++) {\n    const unit = COMPACT_UNITS[i];\n    if (abs < unit.threshold) continue;\n\n    let scaled = Math.round((abs / unit.threshold) * 10) / 10;\n    // Carry over, e.g. 999.96k rounds to \"1000k\" \u2014 bump to the next unit instead.\n    if (scaled >= 1000 && i > 0) {\n      const next = COMPACT_UNITS[i - 1];\n      scaled = Math.round((abs / next.threshold) * 10) / 10;\n      return `${sign}${scaled}${next.suffix}`;\n    }\n    return `${sign}${scaled}${unit.suffix}`;\n  }\n  return String(value);\n}\n", "/**\n * Binary-searches the longest prefix of `text` (plus an ellipsis) that fits within `maxWidth`\n * px when rendered by `el`, using the SVG `getComputedTextLength()` API for exact measurement \u2014\n * `text-overflow: ellipsis` doesn't apply to raw SVG `<text>` nodes.\n *\n * Mutates `el.textContent` during measurement; the caller's next render (driven by the\n * returned string going into state) overwrites it with the final value.\n */\nexport function truncateSvgTextToWidth(el: SVGTextElement, text: string, maxWidth: number): string {\n  el.textContent = text;\n  if (maxWidth <= 0 || el.getComputedTextLength() <= maxWidth) return text;\n\n  let lo = 0;\n  let hi = text.length;\n  while (lo < hi) {\n    const mid = Math.ceil((lo + hi) / 2);\n    el.textContent = `${text.slice(0, mid)}\u2026`;\n    if (el.getComputedTextLength() <= maxWidth) {\n      lo = mid;\n    } else {\n      hi = mid - 1;\n    }\n  }\n  return lo > 0 ? `${text.slice(0, lo)}\u2026` : '\u2026';\n}\n", "/** Parse a CSS <time> value (or motion shorthand's first token) to milliseconds. */\nexport function parseCssTimeMs(value: string, fallback: number): number {\n  const firstToken = value.trim().split(/\\s+/)[0] ?? '';\n  const num = parseFloat(firstToken);\n  if (Number.isNaN(num)) return fallback;\n  if (/ms\\s*$/.test(firstToken)) return num;\n  if (/s\\s*$/.test(firstToken)) return num * 1000;\n  return num;\n}\n\nfunction extractCssCustomProp(ref: string): string | null {\n  const varMatch = ref.match(/^var\\(\\s*(--[^),]+)/);\n  if (varMatch) return varMatch[1].trim();\n  if (ref.startsWith('--')) return ref.trim();\n  return null;\n}\n\nfunction readTokenTimeMs(token: string, fallback: number): number {\n  if (typeof document === 'undefined') return fallback;\n\n  const prop = extractCssCustomProp(token);\n  if (!prop) return parseCssTimeMs(token, fallback);\n\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(prop).trim();\n  return parseCssTimeMs(raw, fallback);\n}\n\n/**\n * Resolve a duration to milliseconds for JS timers aligned with CSS motion tokens.\n * Accepts numbers (ms), raw times (`200ms`, `0.75s`), or `var(--effect-*)` references.\n */\nexport function resolveCssTimeMs(\n  value: number | string | undefined,\n  fallbackToken: string,\n): number {\n  if (typeof value === 'number') return value;\n\n  const token = typeof value === 'string' && value.trim() ? value.trim() : fallbackToken;\n  const prop = extractCssCustomProp(token);\n\n  if (prop) {\n    return readTokenTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n  }\n\n  return parseCssTimeMs(token, readTokenTimeMs(fallbackToken, 200));\n}\n", "/** CSS custom property for scroll-edge fade depth (dimension token or length). */\nexport const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';\n\nexport const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';\n\nexport type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';\n\nexport type ScrollEdgeFadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\n\nexport type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;\n\nexport interface ScrollEdgeFadeOptions {\n  /** One or more edges to fade. */\n  edges: ScrollEdgeFadeEdge | ScrollEdgeFadeEdge[];\n  /**\n   * When true, or when every listed edge is at its scroll limit, removes the mask.\n   * Pass a per-edge map to hide only the edges that are flush (panel-nav bottom fade).\n   */\n  atEnd?: boolean | Partial<Record<ScrollEdgeFadeEdge, boolean>>;\n  /** Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). */\n  hidden?: boolean;\n}\n\n/** Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. */\nexport function resolveScrollEdgeFadeSize(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): string {\n  if (height) return height;\n  return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)\n    ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]\n    : size;\n}\n\n/** Inline style map setting fade depth on a scroll container. */\nexport function scrollEdgeFadeSizeStyle(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): Record<string, string> {\n  return {\n    [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),\n  };\n}\n\n/**\n * Alpha mask for a scroll container edge \u2014 content fades to transparent so\n * textured backgrounds (shell gradients, images) show through.\n */\nexport function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {\n  switch (edge) {\n    case 'top':\n      return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;\n    case 'bottom':\n      return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'left':\n      return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'right':\n      return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n  }\n}\n\n/** Inline style map for a masked scroll region (single edge). */\nexport function scrollEdgeFadeMaskStyle(\n  edge: ScrollEdgeFadeEdge,\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): Record<string, string> {\n  const mask = scrollEdgeFadeMaskImage(edge);\n  return {\n    ...scrollEdgeFadeSizeStyle(size, height),\n    WebkitMaskImage: mask,\n    maskImage: mask,\n    WebkitMaskSize: '100% 100%',\n    maskSize: '100% 100%',\n  };\n}\n\n/** Class map for `scroll-edge-fade` modifiers \u2014 pair with `scroll-edge-fade.css`. */\nexport function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {\n  const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];\n  const classes: Record<string, boolean> = {\n    'scroll-edge-fade': true,\n    'scroll-edge-fade--hidden': opts.hidden === true,\n  };\n\n  for (const edge of edges) {\n    classes[`scroll-edge-fade--${edge}`] = true;\n  }\n\n  const { atEnd } = opts;\n  if (atEnd === true) {\n    classes['scroll-edge-fade--at-end'] = true;\n  } else if (atEnd && typeof atEnd === 'object') {\n    const allAtEnd = edges.every(edge => atEnd[edge]);\n    if (allAtEnd) {\n      classes['scroll-edge-fade--at-end'] = true;\n    }\n  }\n\n  return classes;\n}\n\n/** Whether a scroll container is flush with the given edge (within `threshold` px). */\nexport function isScrollAtEdge(\n  el: HTMLElement,\n  edge: ScrollEdgeFadeEdge,\n  threshold = 2,\n): boolean {\n  switch (edge) {\n    case 'top':\n      return el.scrollTop <= threshold;\n    case 'bottom':\n      return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n    case 'left':\n      return el.scrollLeft <= threshold;\n    case 'right':\n      return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;\n  }\n}\n", "import {\n  dimensionIconographyMd,\n  dimensionIconographySm,\n  dimensionIconographyXs,\n  dimensionMenuWidthXs,\n  dimensionPanelWidth2xs,\n  dimensionPanelWidthLg,\n  dimensionPanelWidthMd,\n  dimensionRadius025,\n  dimensionSize200,\n  dimensionSize300,\n  dimensionSize400,\n  dimensionSize600,\n  dimensionSize800,\n  dimensionSpace050,\n  dimensionSpace200,\n  typographyLineheightLg,\n  typographyLineheightMd,\n  typographyLineheightSm,\n  typographyLineheightXl,\n  typographyLineheightXs,\n  effectAnimationDelayLong2,\n  effectAnimationDelayMedium1,\n  effectAnimationDelayMedium3,\n  effectAnimationDelayInstant,\n  effectAnimationDelayShort2,\n  effectAnimationDurationMedium1,\n  effectAnimationDurationShort3,\n  effectMotionShort2,\n  effectMotionShort3,\n} from '@ds-mo/tokens/ts';\n\n/** TokoMo CSS custom-property names for shared component defaults (runtime resolution). */\nexport const TOKEN_DEFAULTS = {\n  space050: dimensionSpace050,\n  space200: dimensionSpace200,\n  radius025: dimensionRadius025,\n  size200: dimensionSize200,\n  size300: dimensionSize300,\n  size400: dimensionSize400,\n  size600: dimensionSize600,\n  size800: dimensionSize800,\n  iconographyMd: dimensionIconographyMd,\n  iconographySm: dimensionIconographySm,\n  iconographyXs: dimensionIconographyXs,\n  panelWidth2xs: dimensionPanelWidth2xs,\n  panelWidthMd: dimensionPanelWidthMd,\n  panelWidthLg: dimensionPanelWidthLg,\n  menuWidthXs: dimensionMenuWidthXs,\n  lineheightLg: typographyLineheightLg,\n  lineheightMd: typographyLineheightMd,\n  lineheightSm: typographyLineheightSm,\n  lineheightXl: typographyLineheightXl,\n  lineheightXs: typographyLineheightXs,\n  motionShort2: effectMotionShort2,\n  motionShort3: effectMotionShort3,\n  animationDurationShort3: effectAnimationDurationShort3,\n  animationDurationMedium1: effectAnimationDurationMedium1,\n  animationDelayInstant: effectAnimationDelayInstant,\n  animationDelayMedium1: effectAnimationDelayMedium1,\n  animationDelayMedium3: effectAnimationDelayMedium3,\n  animationDelayShort2: effectAnimationDelayShort2,\n  animationDelayLong2: effectAnimationDelayLong2,\n  /** Unmeasured menu height fallback: 20\u00D7 base (160px at default scale). */\n  menuFallbackHeight: 'calc(var(--dimension-size-base) * 20)',\n  /** Unmeasured tooltip width fallback: size-800 + size-200 (80px). */\n  tooltipFallbackWidth: 'calc(var(--dimension-size-800) + var(--dimension-size-200))',\n  /** Fill-mode donut diameter floor: 16\u00D7 size-base (128px). */\n  donutFillMin: 'calc(var(--dimension-size-base) * 16)',\n  /** Fill-mode donut diameter ceiling: 24\u00D7 size-base (192px). */\n  donutFillMax: 'calc(var(--dimension-size-base) * 24)',\n} as const;\n\nexport type TokenDefaultKey = keyof typeof TOKEN_DEFAULTS;\n\n/** Valid CSS length strings for overlay offset props \u2014 bind on `sideOffset` / `alignOffset` in hosts. */\nexport const TOKEN_CSS_LENGTHS = {\n  space050: `var(${dimensionSpace050})`,\n  space200: `var(${dimensionSpace200})`,\n  menuWidthXs: `var(${dimensionMenuWidthXs})`,\n} as const;\n", "/** Shared width fit for interactive controls (buttons, select, \u2026). */\nexport type ControlWidth = 'hug' | 'fill';\n\n/** Host / control class map for `width=\"hug\" | \"fill\"`. */\nexport function controlWidthClass(width: ControlWidth): Record<string, boolean> {\n  return {\n    'ds-control-width--hug': width === 'hug',\n    'ds-control-width--fill': width === 'fill',\n  };\n}\n", "import type { TextVariant } from '../components/Text/text-types';\n\n/** Control-density sizes shared by buttons, tags, chips, select, tooltip. */\nexport type ControlDensitySize = 'md' | 'sm' | 'xs';\n\n/** Body/caption variant per control-density size (emphasis is separate). */\nexport const CONTROL_TEXT_VARIANT: Record<ControlDensitySize, TextVariant> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n"],
+  "mappings": ";AAQA,IAAM,YAAY,uBAAO,IAAI,sBAAsB;AAM5C,SAAS,aAAa,MAAc,MAAuB;AAChE,SAAO,OAAO,QAAQ,IAAI,KAAK,UAAU,IAAI;AAC/C;AAEO,SAAS,YAA0B;AACxC,QAAM,IAAI;AACV,SAAQ,gCAAiB,oBAAI,IAAI;AACnC;AAmBO,SAAS,cAAc,OAA+B,SAAoC;AAC/F,QAAM,QAAQ,UAAU;AACxB,QAAM,OAAO,SAAS,SAAS;AAC/B,aAAW,CAAC,MAAM,GAAG,KAAK,OAAO,QAAQ,KAAK,GAAG;AAC/C,UAAM,IAAI,aAAa,MAAM,IAAI,GAAG,GAAG;AAAA,EACzC;AACF;;;AC9CA,IAAM,gBAAgB,oBAAI,IAAoB;AAE9C,IAAI,UAA8B;AAElC,SAAS,kBAAsC;AAC7C,MAAI,OAAO,aAAa,YAAa,QAAO;AAE5C,MAAI,CAAC,SAAS;AACZ,cAAU,SAAS,cAAc,KAAK;AACtC,YAAQ,aAAa,eAAe,MAAM;AAC1C,YAAQ,MAAM,UACZ;AACF,aAAS,gBAAgB,YAAY,OAAO;AAAA,EAC9C;AAEA,SAAO;AACT;AAGO,SAAS,wBAA8B;AAC5C,gBAAc,MAAM;AACtB;AAMO,SAAS,mBACd,OACA,UACQ;AACR,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU,KAAK,WAAW;AACpF,MAAI,OAAO,aAAa,SAAU,QAAO;AAEzC,QAAM,UAAU,SAAS,KAAK;AAC9B,MAAI,CAAC,QAAS,QAAO,mBAAmB,UAAU,CAAC;AAEnD,QAAM,SAAS,cAAc,IAAI,OAAO;AACxC,MAAI,WAAW,OAAW,QAAO;AAEjC,MAAI,kBAAkB,KAAK,OAAO,GAAG;AACnC,UAAM,IAAI,OAAO,OAAO;AACxB,kBAAc,IAAI,SAAS,CAAC;AAC5B,WAAO;AAAA,EACT;AAEA,QAAM,UAAU,QAAQ,MAAM,qBAAqB;AACnD,MAAI,SAAS;AACX,UAAMA,MAAK,WAAW,QAAQ,CAAC,CAAC;AAChC,kBAAc,IAAI,SAASA,GAAE;AAC7B,WAAOA;AAAA,EACT;AAEA,QAAM,YAAY,aAAa,KAAK,OAAO,IAAI,OAAO,OAAO,MAAM;AAEnE,QAAM,QAAQ,gBAAgB;AAC9B,MAAI,CAAC,OAAO;AACV,WAAO,OAAO,aAAa,WAAW,WAAW;AAAA,EACnD;AAEA,QAAM,MAAM,QAAQ;AACpB,QAAM,KAAK,MAAM,sBAAsB,EAAE;AACzC,QAAM,MAAM,QAAQ;AACpB,gBAAc,IAAI,SAAS,EAAE;AAC7B,SAAO;AACT;;;ACjEA,IAAM,gBAAyD;AAAA,EAC7D,EAAE,WAAW,KAAe,QAAQ,IAAI;AAAA,EACxC,EAAE,WAAW,KAAW,QAAQ,IAAI;AAAA,EACpC,EAAE,WAAW,KAAO,QAAQ,IAAI;AAClC;AAGO,SAAS,oBAAoB,OAAuB;AACzD,QAAM,OAAO,QAAQ,IAAI,MAAM;AAC/B,QAAM,MAAM,KAAK,IAAI,KAAK;AAC1B,MAAI,MAAM,IAAM,QAAO,OAAO,KAAK;AAEnC,WAAS,IAAI,GAAG,IAAI,cAAc,QAAQ,KAAK;AAC7C,UAAM,OAAO,cAAc,CAAC;AAC5B,QAAI,MAAM,KAAK,UAAW;AAE1B,QAAI,SAAS,KAAK,MAAO,MAAM,KAAK,YAAa,EAAE,IAAI;AAEvD,QAAI,UAAU,OAAQ,IAAI,GAAG;AAC3B,YAAM,OAAO,cAAc,IAAI,CAAC;AAChC,eAAS,KAAK,MAAO,MAAM,KAAK,YAAa,EAAE,IAAI;AACnD,aAAO,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,MAAM;AAAA,IACvC;AACA,WAAO,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,MAAM;AAAA,EACvC;AACA,SAAO,OAAO,KAAK;AACrB;;;AClBO,SAAS,uBAAuB,IAAoB,MAAc,UAA0B;AACjG,KAAG,cAAc;AACjB,MAAI,YAAY,KAAK,GAAG,sBAAsB,KAAK,SAAU,QAAO;AAEpE,MAAI,KAAK;AACT,MAAI,KAAK,KAAK;AACd,SAAO,KAAK,IAAI;AACd,UAAM,MAAM,KAAK,MAAM,KAAK,MAAM,CAAC;AACnC,OAAG,cAAc,GAAG,KAAK,MAAM,GAAG,GAAG,CAAC;AACtC,QAAI,GAAG,sBAAsB,KAAK,UAAU;AAC1C,WAAK;AAAA,IACP,OAAO;AACL,WAAK,MAAM;AAAA,IACb;AAAA,EACF;AACA,SAAO,KAAK,IAAI,GAAG,KAAK,MAAM,GAAG,EAAE,CAAC,WAAM;AAC5C;;;ACvBO,SAAS,eAAe,OAAe,UAA0B;AACtE,QAAM,aAAa,MAAM,KAAK,EAAE,MAAM,KAAK,EAAE,CAAC,KAAK;AACnD,QAAM,MAAM,WAAW,UAAU;AACjC,MAAI,OAAO,MAAM,GAAG,EAAG,QAAO;AAC9B,MAAI,SAAS,KAAK,UAAU,EAAG,QAAO;AACtC,MAAI,QAAQ,KAAK,UAAU,EAAG,QAAO,MAAM;AAC3C,SAAO;AACT;AAEA,SAAS,qBAAqB,KAA4B;AACxD,QAAM,WAAW,IAAI,MAAM,qBAAqB;AAChD,MAAI,SAAU,QAAO,SAAS,CAAC,EAAE,KAAK;AACtC,MAAI,IAAI,WAAW,IAAI,EAAG,QAAO,IAAI,KAAK;AAC1C,SAAO;AACT;AAEA,SAAS,gBAAgB,OAAe,UAA0B;AAChE,MAAI,OAAO,aAAa,YAAa,QAAO;AAE5C,QAAM,OAAO,qBAAqB,KAAK;AACvC,MAAI,CAAC,KAAM,QAAO,eAAe,OAAO,QAAQ;AAEhD,QAAM,MAAM,iBAAiB,SAAS,eAAe,EAAE,iBAAiB,IAAI,EAAE,KAAK;AACnF,SAAO,eAAe,KAAK,QAAQ;AACrC;AAMO,SAAS,iBACd,OACA,eACQ;AACR,MAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,QAAM,QAAQ,OAAO,UAAU,YAAY,MAAM,KAAK,IAAI,MAAM,KAAK,IAAI;AACzE,QAAM,OAAO,qBAAqB,KAAK;AAEvC,MAAI,MAAM;AACR,WAAO,gBAAgB,OAAO,gBAAgB,eAAe,GAAG,CAAC;AAAA,EACnE;AAEA,SAAO,eAAe,OAAO,gBAAgB,eAAe,GAAG,CAAC;AAClE;;;AC5CO,IAAM,4BAA4B;AAElC,IAAM,gCAAgC;AAoB7C,IAAM,aAAsD;AAAA,EAC1D,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,YAAY;AACd;AAEA,IAAM,WAAW,OAAO,yBAAyB,KAAK,6BAA6B;AAe5E,SAAS,0BACd,OAA2B,YAC3B,QACQ;AACR,MAAI,OAAQ,QAAO;AACnB,SAAO,OAAO,UAAU,eAAe,KAAK,YAAY,IAAI,IACxD,WAAW,IAA+B,IAC1C;AACN;AAGO,SAAS,wBACd,OAA2B,YAC3B,QACwB;AACxB,SAAO;AAAA,IACL,CAAC,yBAAyB,GAAG,0BAA0B,MAAM,MAAM;AAAA,EACrE;AACF;AAMO,SAAS,wBAAwB,MAAkC;AACxE,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO,uDAAuD,QAAQ;AAAA,IACxE,KAAK;AACH,aAAO,sDAAsD,QAAQ;AAAA,IACvE,KAAK;AACH,aAAO,qDAAqD,QAAQ;AAAA,EACxE;AACF;AAGO,SAAS,wBACd,MACA,OAA2B,YAC3B,QACwB;AACxB,QAAM,OAAO,wBAAwB,IAAI;AACzC,SAAO;AAAA,IACL,GAAG,wBAAwB,MAAM,MAAM;AAAA,IACvC,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,EACZ;AACF;AAGO,SAAS,uBAAuB,MAAsD;AAC3F,QAAM,QAAQ,MAAM,QAAQ,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC,KAAK,KAAK;AAClE,QAAM,UAAmC;AAAA,IACvC,oBAAoB;AAAA,IACpB,4BAA4B,KAAK,WAAW;AAAA,EAC9C;AAEA,aAAW,QAAQ,OAAO;AACxB,YAAQ,qBAAqB,IAAI,EAAE,IAAI;AAAA,EACzC;AAEA,QAAM,EAAE,MAAM,IAAI;AAClB,MAAI,UAAU,MAAM;AAClB,YAAQ,0BAA0B,IAAI;AAAA,EACxC,WAAW,SAAS,OAAO,UAAU,UAAU;AAC7C,UAAM,WAAW,MAAM,MAAM,UAAQ,MAAM,IAAI,CAAC;AAChD,QAAI,UAAU;AACZ,cAAQ,0BAA0B,IAAI;AAAA,IACxC;AAAA,EACF;AAEA,SAAO;AACT;AAGO,SAAS,eACd,IACA,MACA,YAAY,GACH;AACT,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO,GAAG,aAAa;AAAA,IACzB,KAAK;AACH,aAAO,GAAG,eAAe,GAAG,YAAY,GAAG,gBAAgB;AAAA,IAC7D,KAAK;AACH,aAAO,GAAG,cAAc;AAAA,IAC1B,KAAK;AACH,aAAO,GAAG,cAAc,GAAG,aAAa,GAAG,eAAe;AAAA,EAC9D;AACF;;;ACnJA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGA,IAAM,iBAAiB;AAAA,EAC5B,UAAU;AAAA,EACV,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,eAAe;AAAA,EACf,cAAc;AAAA,EACd,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,cAAc;AAAA,EACd,yBAAyB;AAAA,EACzB,0BAA0B;AAAA,EAC1B,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,qBAAqB;AAAA;AAAA,EAErB,oBAAoB;AAAA;AAAA,EAEpB,sBAAsB;AAAA;AAAA,EAEtB,cAAc;AAAA;AAAA,EAEd,cAAc;AAChB;AAKO,IAAM,oBAAoB;AAAA,EAC/B,UAAU,OAAO,iBAAiB;AAAA,EAClC,UAAU,OAAO,iBAAiB;AAAA,EAClC,aAAa,OAAO,oBAAoB;AAC1C;;;AC5EO,SAAS,kBAAkB,OAA8C;AAC9E,SAAO;AAAA,IACL,yBAAyB,UAAU;AAAA,IACnC,0BAA0B,UAAU;AAAA,EACtC;AACF;;;ACHO,IAAM,uBAAgE;AAAA,EAC3E,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;",
   "names": ["px"]
 }

package/dist/types/components/ButtonFilled/ButtonFilled.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ControlWidth } from '../../utils/control-width';
+import { type ControlWidth } from '../../utils';
 export type ButtonFilledIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive' | 'guide' | 'walkthrough';
 export type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';
 export type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ControlWidth } from '../../utils/control-width';
+import { type ControlWidth } from '../../utils';
 export type ButtonUnfilledOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';
 export type ButtonUnfilledBackground = 'always-dark' | 'navigation';
 export type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';

package/dist/types/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { type ControlWidth } from '../../utils/control-width';
+import { type ControlWidth } from '../../utils';
 export interface SelectOption {
     label: string;
     value: string;

package/dist/types/components/Text/Text.d.ts

@@ -1,14 +1,12 @@
-export type TextVariant = 'text-display-medium' | 'text-display-small' | 'text-title-large' | 'text-title-medium' | 'text-title-small' | 'text-body-large' | 'text-body-large-emphasis' | 'text-body-medium' | 'text-body-medium-emphasis' | 'text-body-small' | 'text-body-small-emphasis' | 'text-caption' | 'text-caption-emphasis';
-export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
-export type TextColor = TextColorToken | `var(--${string})`;
-export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
-export type TextAlign = 'left' | 'center' | 'right';
-export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
-export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
-export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type TextFontFeature = 'normal' | 'tabular-nums';
+import type { TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, LineTruncation, TextWrap } from './text-types';
 export declare class Text {
     variant: TextVariant;
+    /**
+     * Heavier weight + tighter letter-spacing for the variant.
+     * `false` (default): regular weight (caption stays medium).
+     * `true`: display bold, title/caption semibold, body medium.
+     */
+    emphasis: boolean;
     color: TextColor | undefined;
     decoration: TextDecoration | undefined;
     italic: boolean;
@@ -19,6 +17,8 @@ export declare class Text {
     as: TextElement;
     /** Maps to `for` attribute on <label> elements. */
     for: string | undefined;
+    /** Forwarded to the inner element (e.g. aria-labelledby targets). */
+    textId: string | undefined;
     render(): any;
 }
 //# sourceMappingURL=Text.d.ts.map

package/dist/types/components/Text/index.d.ts

@@ -1,2 +1,3 @@
-export type { TextVariant, TextColor, TextColorToken, TextDecoration, TextAlign, LineTruncation, TextWrap, TextElement } from './Text';
+export type { TextVariant, TextColor, TextColorToken, TextDecoration, TextAlign, LineTruncation, TextWrap, TextElement, TextFontFeature, } from './text-types';
+export { textVariantClass } from './text-utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/components/Text/text-types.d.ts

@@ -0,0 +1,10 @@
+export type TextVariant = 'text-display-medium' | 'text-display-small' | 'text-title-large' | 'text-title-medium' | 'text-title-small' | 'text-body-large' | 'text-body-medium' | 'text-body-small' | 'text-caption';
+export type TextColorToken = 'primary' | 'secondary' | 'tertiary' | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'on-strong' | 'on-bold' | 'inherit';
+export type TextColor = TextColorToken | `var(--${string})`;
+export type TextDecoration = 'none' | 'underline' | 'dotted-underline';
+export type TextAlign = 'left' | 'center' | 'right';
+export type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';
+export type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';
+export type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextFontFeature = 'normal' | 'tabular-nums';
+//# sourceMappingURL=text-types.d.ts.map

package/dist/types/components/Text/text-utils.d.ts

@@ -0,0 +1,4 @@
+import type { TextVariant } from './text-types';
+/** `text-body-medium` → `ds-text--body-medium` */
+export declare function textVariantClass(variant: TextVariant): string;
+//# sourceMappingURL=text-utils.d.ts.map

package/dist/types/components/Tooltip/Tooltip.d.ts

@@ -1,3 +1,4 @@
+import '../Text/Text';
 export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
 export type TooltipAlign = 'start' | 'center' | 'end';
 export type TooltipSize = 'md' | 'sm' | 'xs';