@ds-mo/ui 1.0.2 → 1.2.0

package/dist/components/ds-label-wrap.js

@@ -1,2 +0,0 @@
-import{p as s,H as e,h as t,a,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return t(a,{key:"257df8bf93f21f0905e6b659d6342d2bba19917b",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},t("slot",{key:"65bb9c0c981bd2f24dbd66e5b2a92f856fc25263"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
-//# sourceMappingURL=ds-label-wrap.js.map

package/dist/components/ds-label-wrap.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["labelWrapCss","LabelWrap","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","truncate","render","h","Host","key","class"],"sources":["src/wc/components/LabelWrap/LabelWrap.css?tag=ds-label-wrap&encapsulation=scoped","src/wc/components/LabelWrap/LabelWrap.tsx"],"sourcesContent":["/* ==========================================================================\n   LabelWrap — kills line-height struts; adds optical horizontal padding.\n   Used internally inside interactive components.\n   ========================================================================== */\n\n:host(.label-wrap) {\n  display: inline-block;\n  line-height: 0;\n  white-space: nowrap;\n  flex-shrink: 0;\n  /* md / lg: body scale optical padding */\n  padding: 0 var(--dimension-space-050);\n}\n\n/* xs / sm: tighter scale optical padding */\n:host(.size-xs),\n:host(.size-sm) {\n  padding: 0 var(--dimension-space-025);\n}\n\n/* Truncation mode — use inside full-width containers */\n:host(.truncate) {\n  flex-shrink: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type LabelWrapSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/**\n * Internal utility wrapper that kills line-height struts and adds optical\n * horizontal padding. Used inside interactive components (Button, Tag, etc.)\n *\n * Not intended as a standalone consumer-facing component — internal use only.\n */\n@Component({\n  tag: 'ds-label-wrap',\n  styleUrl: 'LabelWrap.css',\n  scoped: true,\n})\nexport class LabelWrap {\n  /** Typography size — controls optical horizontal padding. */\n  @Prop() size: LabelWrapSize = 'md';\n\n  /** Enable truncation with ellipsis — use inside full-width containers. */\n  @Prop() truncate: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'label-wrap': true,\n          'size-xs': this.size === 'xs',\n          'size-sm': this.size === 'sm',\n          'size-lg': this.size === 'lg',\n          truncate: this.truncate,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAe,IAAM,sU,MCedC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAsB,KAGtBD,KAAAE,SAAoB,KAiB7B,CAfC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,UAAWP,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,KACzB,UAAWD,KAAKC,OAAS,KACzBC,SAAUF,KAAKE,WAGjBE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/p-C4p1fG67.js

@@ -1,2 +0,0 @@
-import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const i=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const i=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;return o(r,{key:"afcb798deeba1365d592cb7787dfe37734991a7d",style:{display:"contents"}},o(t,{key:"008310b07aada0e93694977c90d23d32d9cc5106",class:s,style:i,...n},o("slot",{key:"09bad46e878c7541c570153683223050373b2a13"})))}static get style(){return i()}},[262,"ds-text",{variant:[1],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],as:[1],for:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(s(t))){customElements.define(s(t),n)}break}}))}c();export{n as T,c as d};
-//# sourceMappingURL=p-C4p1fG67.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","italic","lineTruncation","as","render","Tag","isCustomColor","c","startsWith","cls","text","wrap","color","decoration","align","style","undefined","extraProps","for","h","Host","key","display","class"],"sources":["src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":[".text {\n  margin: 0;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n.text--truncate-1 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.text--truncate-2,\n.text--truncate-3,\n.text--truncate-4,\n.text--truncate-5 {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n.text--truncate-2 { -webkit-line-clamp: 2; }\n.text--truncate-3 { -webkit-line-clamp: 3; }\n.text--truncate-4 { -webkit-line-clamp: 4; }\n.text--truncate-5 { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n.text--nowrap {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.text--balance { text-wrap: balance; }\n.text--pretty  { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n.text--color-primary   { color: var(--color-foreground-primary); }\n.text--color-secondary { color: var(--color-foreground-secondary); }\n.text--color-tertiary  { color: var(--color-foreground-tertiary); }\n.text--color-brand     { color: var(--color-foreground-bold-brand); }\n.text--color-negative  { color: var(--color-foreground-bold-negative); }\n.text--color-positive  { color: var(--color-foreground-bold-positive); }\n.text--color-warning   { color: var(--color-foreground-bold-warning); }\n.text--color-caution   { color: var(--color-foreground-bold-caution); }\n.text--color-ai        { color: var(--color-foreground-bold-ai); }\n.text--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.text--color-on-bold   { color: var(--color-foreground-on-bold-background-primary); }\n.text--color-inherit   { color: inherit; }\n\n/* ── Decoration ─────────────────────────────────────────────────────────── */\n\n.text--decoration-underline {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n.text--decoration-dotted-underline {\n  text-decoration: underline dotted;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n.text--italic { font-style: italic; }\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n.text--align-left   { text-align: left; }\n.text--align-center { text-align: center; }\n.text--align-right  { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-large-emphasis'\n  | 'text-body-medium'\n  | 'text-body-medium-emphasis'\n  | 'text-body-small'\n  | 'text-body-small-emphasis'\n  | 'text-caption'\n  | 'text-caption-emphasis';\n\nexport type TextColorToken =\n  | 'primary' | 'secondary' | 'tertiary'\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n  | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n@Component({\n  tag: 'ds-text',\n  styleUrl: 'Text.css',\n  scoped: true,\n})\nexport class Text {\n  @Prop() variant: TextVariant = 'text-body-medium';\n  @Prop() color: TextColor | undefined;\n  @Prop() decoration: TextDecoration | undefined;\n  @Prop() italic: boolean = false;\n  @Prop() align: TextAlign | undefined;\n  @Prop() lineTruncation: LineTruncation = 'none';\n  @Prop() wrap: TextWrap | undefined;\n  @Prop() as: TextElement = 'p';\n  /** Maps to `for` attribute on <label> elements. */\n  @Prop() for: string | undefined;\n\n  render() {\n    // Polymorphic element: TSX treats a variable tag as a component, so a\n    // dynamic intrinsic element name must be cast to `any` to render.\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const Tag = this.as as any;\n    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n    const cls: Record<string, boolean> = {\n      [this.variant]: true,\n      'text': true,\n      'text--nowrap': this.wrap === 'nowrap',\n      'text--balance': this.wrap === 'balance',\n      'text--pretty': this.wrap === 'pretty',\n      'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n      'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n      'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n      'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n      'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n      'text--color-primary':   this.color === 'primary',\n      'text--color-secondary': this.color === 'secondary',\n      'text--color-tertiary':  this.color === 'tertiary',\n      'text--color-brand':     this.color === 'brand',\n      'text--color-negative':  this.color === 'negative',\n      'text--color-positive':  this.color === 'positive',\n      'text--color-warning':   this.color === 'warning',\n      'text--color-caution':   this.color === 'caution',\n      'text--color-ai':        this.color === 'ai',\n      'text--color-on-strong': this.color === 'on-strong',\n      'text--color-on-bold':   this.color === 'on-bold',\n      'text--color-inherit':   this.color === 'inherit',\n      'text--decoration-underline':        this.decoration === 'underline',\n      'text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n      'text--italic': this.italic,\n      'text--align-left':   this.align === 'left',\n      'text--align-center': this.align === 'center',\n      'text--align-right':  this.align === 'right',\n    };\n\n    const style = this.color && isCustomColor(this.color)\n      ? { color: this.color as string }\n      : undefined;\n\n    const extraProps: Record<string, string> = {};\n    if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <Tag class={cls} style={style} {...extraProps}>\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,ghE,MCkCTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAuB,mBAGvBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,GAAkB,GAyD3B,CArDC,MAAAC,GAIE,MAAMC,EAAMN,KAAKI,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,CAACV,KAAKC,SAAU,KAChBU,KAAQ,KACR,eAAgBX,KAAKY,OAAS,SAC9B,gBAAiBZ,KAAKY,OAAS,UAC/B,eAAgBZ,KAAKY,OAAS,SAC9B,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,sBAAyBZ,KAAKa,QAAU,UACxC,wBAAyBb,KAAKa,QAAU,YACxC,uBAAyBb,KAAKa,QAAU,WACxC,oBAAyBb,KAAKa,QAAU,QACxC,uBAAyBb,KAAKa,QAAU,WACxC,uBAAyBb,KAAKa,QAAU,WACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,iBAAyBb,KAAKa,QAAU,KACxC,wBAAyBb,KAAKa,QAAU,YACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,6BAAqCb,KAAKc,aAAe,YACzD,oCAAqCd,KAAKc,aAAe,mBACzD,eAAgBd,KAAKE,OACrB,mBAAsBF,KAAKe,QAAU,OACrC,qBAAsBf,KAAKe,QAAU,SACrC,oBAAsBf,KAAKe,QAAU,SAGvC,MAAMC,EAAQhB,KAAKa,OAASN,EAAcP,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKI,KAAO,SAAWJ,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAE9D,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACN,MAAO,CAAEO,QAAS,aACtBH,EAACd,EAAG,CAAAgB,IAAA,2CAACE,MAAOd,EAAKM,MAAOA,KAAWE,GACjCE,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/p-DV8pmt1m.js

@@ -1,2 +0,0 @@
-import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";function i(r){return"type"in r&&r.type==="divider"}function n(r){return r.filter((r=>!i(r)))}const d=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{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::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:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab.sc-ds-tab-group:focus-visible:not(:hover):not(:active)::after{background:transparent}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;width:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));height:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));border-radius:var(--dimension-radius-half);background:var(--_dot);box-shadow:0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{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{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group{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 .tab-divider__line.sc-ds-tab-group{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const c=r(class r extends e{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}get selectableTabs(){return n(this.tabs)}selectTab(r,e){this.value=r;this.dsChange.emit(r);if(e?.focus!==false){this.focusTab(r)}}focusTab(r){const e=this.el.querySelector(`[data-tab-id="${r}"]`);e?.focus({preventScroll:true})}onValueChange(r,e){if(e===undefined||r===e)return;requestAnimationFrame((()=>{const e=document.activeElement;if(!e||!this.el.contains(e))return;const o=e.getAttribute("data-tab-id");if(o===r)return;const a=this.el.querySelector(`[data-tab-id="${r}"]`);if(a){a.focus({preventScroll:true})}else{e.blur()}}))}findEnabled(r,e){const o=this.selectableTabs;const a=o.length;for(let t=0;t<a;t++){const s=(r+e*(t+1)+a*(t+1))%a;if(!o[s]?.disabled)return s}return r}handleKeyDown(r){const e=this.selectableTabs;if(!e.length)return;const o=e.findIndex((r=>r.id===this.value));const a=this.orientation==="vertical";let t=null;if(!a){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=e.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...e].reverse().findIndex((r=>!r.disabled));t=r===-1?null:e.length-1-r}if(t!==null){r.preventDefault();const o=e[t];this.selectTab(o.id)}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const e=this.orientation==="vertical";return a(t,{key:"296efe6e0bc35d7eba81fa2ba35b70e78694a5d4",class:"tab-group-host"},a("div",{key:"8fe9c592fadd1e8ec05e8d01610ad6db9db3ee85",role:"tablist",class:{"tab-list":true,"tab-list--vertical":e},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":e?"vertical":undefined},this.tabs.map(((o,t)=>{if(i(o)){return a("div",{key:`divider-${t}`,class:{"tab-divider":true,"tab-divider--vertical":e},"aria-hidden":"true"},a("div",{class:"tab-divider__line"}))}const s=o.id===this.value;return a("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":s,[r]:!!r},"aria-selected":s,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:s?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},a("span",{class:{tab__label:true,"tab__label--dot":!!o.dot,[s?"text-body-medium-emphasis":"text-body-medium"]:true}},o.label,o.dot&&a("span",{class:"tab__dot","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return d()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function l(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),c)}break}}))}l();export{c as T,l as d,n as g,i};
-//# sourceMappingURL=p-DV8pmt1m.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["isTabDivider","item","type","getSelectableTabs","tabs","filter","t","tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","orientation","selectableTabs","selectTab","id","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","nextTab","blur","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","index","isSelected","panelId","tabIndex","onClick","tab__label","dot","label"],"sources":["src/wc/components/TabGroup/tab-item-utils.ts","src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["export interface TabItemDivider {\n  type: 'divider';\n}\n\nexport interface TabItemTab {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  /** id of the tabpanel this tab controls */\n  panelId?: string;\n  /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */\n  dot?: boolean;\n}\n\nexport type TabItem = TabItemTab | TabItemDivider;\n\nexport function isTabDivider(item: TabItem): item is TabItemDivider {\n  return 'type' in item && item.type === 'divider';\n}\n\n/** Tab entries that participate in selection, keyboard nav, and URL matching. */\nexport function getSelectableTabs(tabs: TabItem[]): TabItemTab[] {\n  return tabs.filter((t): t is TabItemTab => !isTabDivider(t));\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/* Focus ring only — no persistent hover fill from keyboard focus */\n.tab:focus-visible:not(:hover):not(:active)::after {\n  background: transparent;\n}\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\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}\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  width: var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));\n  height: var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));\n  border-radius: var(--dimension-radius-half);\n  background: var(--_dot);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);\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);\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);\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);\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  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\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, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabBackground | 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  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\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  /**\n   * Find the next non-disabled 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]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const currentIdx = tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\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    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n\n    return (\n      <Host class=\"tab-group-host\">\n        <div\n          role=\"tablist\"\n          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\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                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && <span class=\"tab__dot\" aria-hidden=\"true\" />}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAgBM,SAAUA,EAAaC,GAC3B,MAAO,SAAUA,GAAQA,EAAKC,OAAS,SACzC,CAGM,SAAUC,EAAkBC,GAChC,OAAOA,EAAKC,QAAQC,IAAwBN,EAAaM,IAC3D,CCvBA,MAAMC,EAAc,IAAM,4sI,MCebC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAQ2BC,KAAAC,MAAgB,GACjCD,KAAAT,KAAkB,GAIlBS,KAAAE,YAAyC,YAoKlD,CAhKC,kBAAYC,GACV,OAAOb,EAAkBU,KAAKT,K,CAGxB,SAAAa,CAAUC,EAAYC,GAC5BN,KAAKC,MAAQI,EACbL,KAAKO,SAASC,KAAKH,GACnB,GAAIC,GAASG,QAAU,MAAO,CAC5BT,KAAKU,SAASL,E,EAIV,QAAAK,CAASL,GACf,MAAMM,EAAMX,KAAKY,GAAGC,cAAc,iBAAiBR,OACnDM,GAAKF,MAAM,CAAEK,cAAe,M,CAK9B,aAAAC,CAAcC,EAAcC,GAC1B,GAAIA,IAASC,WAAaF,IAASC,EAAM,OAEzCE,uBAAsB,KACpB,MAAMC,EAASC,SAASC,cACxB,IAAKF,IAAWpB,KAAKY,GAAGW,SAASH,GAAS,OAE1C,MAAMI,EAAWJ,EAAOK,aAAa,eACrC,GAAID,IAAaR,EAAM,OAEvB,MAAMU,EAAU1B,KAAKY,GAAGC,cAAc,iBAAiBG,OACvD,GAAIU,EAAS,CACXA,EAAQjB,MAAM,CAAEK,cAAe,M,KAC1B,CACLM,EAAOO,M,KASL,WAAAC,CAAYC,EAAcC,GAChC,MAAMvC,EAAOS,KAAKG,eAClB,MAAM4B,EAAMxC,EAAKyC,OACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAKE,IAAK,CAC5B,MAAMC,GAAKL,EAAOC,GAAQG,EAAI,GAAKF,GAAOE,EAAI,IAAMF,EACpD,IAAKxC,EAAK2C,IAAIC,SAAU,OAAOD,C,CAEjC,OAAOL,C,CAIT,aAAAO,CAAcC,GACZ,MAAM9C,EAAOS,KAAKG,eAClB,IAAKZ,EAAKyC,OAAQ,OAElB,MAAMM,EAAa/C,EAAKgD,WAAU9C,GAAKA,EAAEY,KAAOL,KAAKC,QACrD,MAAMuC,EAAaxC,KAAKE,cAAgB,WAExC,IAAIuC,EAAyB,KAE7B,IAAKD,EAAY,CACf,GAAIH,EAAEK,MAAQ,aAAc,CAC1BD,EAAUzC,KAAK4B,YAAYU,EAAY,E,MAClC,GAAID,EAAEK,MAAQ,YAAa,CAChCD,EAAUzC,KAAK4B,YAAYU,GAAY,E,MAEpC,CACL,GAAID,EAAEK,MAAQ,YAAa,CACzBD,EAAUzC,KAAK4B,YAAYU,EAAY,E,MAClC,GAAID,EAAEK,MAAQ,UAAW,CAC9BD,EAAUzC,KAAK4B,YAAYU,GAAY,E,EAI3C,GAAID,EAAEK,MAAQ,OAAQ,CACpB,MAAMC,EAAQpD,EAAKgD,WAAU9C,IAAMA,EAAE0C,WACrCM,EAAUE,KAAU,EAAK,KAAOA,C,MAC3B,GAAIN,EAAEK,MAAQ,MAAO,CAC1B,MAAME,EAAc,IAAIrD,GAAMsD,UAAUN,WAAU9C,IAAMA,EAAE0C,WAC1DM,EAAUG,KAAgB,EAAK,KAAOrD,EAAKyC,OAAS,EAAIY,C,CAG1D,GAAIH,IAAY,KAAM,CACpBJ,EAAES,iBACF,MAAM9B,EAAOzB,EAAKkD,GAClBzC,KAAKI,UAAUY,EAAKX,G,EAIhB,UAAA0C,GACN,IAAK/C,KAAKgD,YAAchD,KAAKgD,aAAe,QAAS,MAAO,GAC5D,GAAIhD,KAAKgD,aAAe,cAAe,MAAO,iBAC9C,MAAO,MAAMhD,KAAKgD,Y,CAGpB,MAAAC,GACE,MAAMC,EAAUlD,KAAK+C,aACrB,MAAMP,EAAaxC,KAAKE,cAAgB,WAExC,OACEiD,EAACC,EAAI,CAAAV,IAAA,2CAACW,MAAM,kBACVF,EAAA,OAAAT,IAAA,2CACEY,KAAK,UACLD,MAAO,CAAE,WAAY,KAAM,qBAAsBb,GAAY,aACjDxC,KAAKuD,UAAS,kBACTvD,KAAKwD,eAAc,mBAClBhB,EAAa,WAAatB,WAE3ClB,KAAKT,KAAKkE,KAAI,CAACC,EAAKC,KACnB,GAAIxE,EAAauE,GAAM,CACrB,OACEP,EAAA,OACET,IAAK,WAAWiB,IAChBN,MAAO,CACL,cAAe,KACf,wBAAyBb,GAC1B,cACW,QAEZW,EAAA,OAAKE,MAAM,sB,CAKjB,MAAMO,EAAaF,EAAIrD,KAAOL,KAAKC,MACnC,OACEkD,EAAA,UACET,IAAKgB,EAAIrD,GACThB,KAAK,SACLiE,KAAK,MAAK,cACGI,EAAIrD,GACjBgD,MAAO,CACLK,IAAK,KACL,gBAAiBE,EACjBV,CAACA,KAAYA,GACd,gBACcU,EAAU,gBACVF,EAAIvB,UAAYjB,UAAS,gBACzBwC,EAAIG,SAAW3C,UAC9BiB,SAAUuB,EAAIvB,SACd2B,SAAUF,EAAa,GAAI,EAC3BG,QAAS,KAAOL,EAAIvB,UAAYnC,KAAKI,UAAUsD,EAAIrD,KAEnD8C,EAAA,QAAME,MAAO,CACXW,WAAY,KACZ,oBAAqBN,EAAIO,IACzB,CAACL,EAAa,4BAA8B,oBAAqB,OAEhEF,EAAIQ,MACJR,EAAIO,KAAOd,EAAA,QAAME,MAAM,WAAU,cAAa,UAE1C,K","ignoreList":[]}

package/dist/components/p-STnE_bmQ.js

@@ -1,2 +0,0 @@
-import{p as e,H as t,c as s,h as i,a as n,t as o}from"./index.js";const r=()=>`.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:200px;max-width:600px;overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-075);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:100%;min-height:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_selected-bg:var(--color-interaction-active)}.menu-item.sc-ds-menu:has(.menu-item__subtext){align-items:flex-start}.menu-item.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.menu-item--selected.sc-ds-menu::after{background:var(--_selected-bg);transition:none}.menu-item.sc-ds-menu:hover:not(:disabled):not(.menu-item--selected)::after,.menu-item--focused.sc-ds-menu:not(:disabled):not(.menu-item--selected)::after{background:var(--_hover-bg);transition:none}.menu-item.sc-ds-menu:active:not(:disabled)::after{background:var(--_pressed-bg);transition:none}.menu-item.sc-ds-menu:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;z-index:1;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const a=220;const d=4;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.positionReady=false;requestAnimationFrame((()=>{this.calculatePosition();this.positionReady=true;this.focusInitialItem();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),a)}}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>e.items))}calculatePosition(){const e=this.resolvedAnchor;if(!e)return;const t=this.el.querySelector(".menu-popup");if(!t)return;const s=e.getBoundingClientRect();const i=t.offsetWidth||200;const n=t.offsetHeight||160;let o=0,r=0;switch(this.side){case"top":r=s.top-n-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":r=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,d),window.innerWidth-i-d),y:Math.min(Math.max(r,d),window.innerHeight-n-d)}}focusInitialItem(){const e=this.flatItems;const t=e.findIndex((e=>e.isSelected&&!e.isInactive));const s=e.findIndex((e=>!e.isInactive));this.focusedIndex=t>=0?t:s>=0?s:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const t=e.target;const s=this.el.querySelector(".menu-popup");const i=this.resolvedAnchor;if(s?.contains(t)||i?.contains(t))return;this.close()};this.scrollResizeHandler=()=>this.calculatePosition();document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false}handleKeyDown(e){if(!this.open)return;const t=this.flatItems;const s=t.map(((e,t)=>({it:e,i:t}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!s.length)return;const i=s.indexOf(this.focusedIndex);const n=i<0?0:i;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const t=this.el.querySelectorAll(".menu-item");t[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}render(){if(!this.shouldRender)return i(n,{style:{display:"contents"}});const e=this.activeSections;let t=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return i(n,{style:{display:"contents"}},i("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((s,n)=>i("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1},role:s.header?"group":undefined,"aria-label":s.header},s.header&&i("div",{class:"section-header","aria-hidden":"true"},i("span",{class:"text-body-small-emphasis section-label"},s.header)),s.items.map((e=>{const s=t++;const n=this.focusedIndex===s;return i("button",{key:s,type:"button",class:{"menu-item":true,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=s}},i("div",{class:"menu-item__content"},i("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&i("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&i("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},i("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return r()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-menu"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),c)}break}}))}m();export{c as M,m as d};
-//# sourceMappingURL=p-STnE_bmQ.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["menuCss","CLOSE_ANIMATION_MS","VP_PAD","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","sideOffset","alignOffset","shouldRender","closing","pos","x","y","focusedIndex","positionReady","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","requestAnimationFrame","calculatePosition","focusInitialItem","setupListeners","setTimeout","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","s","anchorEl","popup","el","querySelector","a","getBoundingClientRect","pw","offsetWidth","ph","offsetHeight","top","left","right","width","bottom","height","Math","min","max","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","section","si","header","undefined","isFocused","type","isDestructive","disabled","tabIndex","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 200px;\n  max-width: 600px;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-075);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.section-label {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Items ───────────────────────────────────────────────────────────────── */\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  color: inherit;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_selected-bg: var(--color-interaction-active);\n}\n\n.menu-item:has(.menu-item__subtext) {\n  align-items: flex-start;\n}\n\n/* Interaction layer — same ::after pattern as tabs / BarNav trigger */\n.menu-item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.menu-item--selected::after {\n  background: var(--_selected-bg);\n  transition: none;\n}\n\n.menu-item:hover:not(:disabled):not(.menu-item--selected)::after,\n.menu-item--focused:not(:disabled):not(.menu-item--selected)::after {\n  background: var(--_hover-bg);\n  transition: none;\n}\n\n.menu-item:active:not(:disabled)::after {\n  background: var(--_pressed-bg);\n  transition: none;\n}\n\n.menu-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.menu-item--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.menu-item--destructive .menu-item__label {\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.menu-item__label {\n  color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n  color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n  color: var(--color-foreground-secondary);\n  line-height: 1.4;\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  height: var(--dimension-size-250);\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-translucent);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n  background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n  position: absolute;\n  top: var(--dimension-space-025);\n  left: var(--dimension-space-025);\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  border-radius: 50%;\n  background-color: var(--color-foreground-on-bold-background-primary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n  transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\n\nexport type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  showToggle?: boolean;\n  toggleValue?: boolean;\n}\n\nexport interface MenuSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nconst CLOSE_ANIMATION_MS = 220;\nconst VP_PAD = 4;\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  @Prop() sideOffset: number = 4;\n  @Prop() alignOffset: number = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      requestAnimationFrame(() => {\n        this.calculatePosition();\n        this.positionReady = true;\n        this.focusInitialItem();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, CLOSE_ANIMATION_MS);\n    }\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(s => s.items);\n  }\n\n  private calculatePosition() {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return;\n\n    const a = anchorEl.getBoundingClientRect();\n    const pw = popup.offsetWidth || 200;\n    const ph = popup.offsetHeight || 160;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - ph - this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'left':\n        x = a.left - pw - this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n      case 'right':\n        x = a.right + this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n    }\n\n    this.pos = {\n      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),\n      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),\n    };\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0\n      ? selectedIdx\n      : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => this.calculatePosition();\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.open) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n    this.close();\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label=\"Menu\"\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\n              )}\n              {section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    aria-current={item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/.stencil/LabelWrap/LabelWrap.d.ts

@@ -1,15 +0,0 @@
-export type LabelWrapSize = 'xs' | 'sm' | 'md' | 'lg';
-/**
- * Internal utility wrapper that kills line-height struts and adds optical
- * horizontal padding. Used inside interactive components (Button, Tag, etc.)
- *
- * Not intended as a standalone consumer-facing component — internal use only.
- */
-export declare class LabelWrap {
-    /** Typography size — controls optical horizontal padding. */
-    size: LabelWrapSize;
-    /** Enable truncation with ellipsis — use inside full-width containers. */
-    truncate: boolean;
-    render(): any;
-}
-//# sourceMappingURL=LabelWrap.d.ts.map