@ds-mo/ui 1.1.0 → 1.3.0

package/dist/components/p-OT-Q-NxH.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","italic","lineTruncation","fontFeature","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.text--font-feature-tabular-nums {\n  font-variant-numeric: tabular-nums;\n  font-feature-settings: 'tnum';\n}\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';\nexport type TextFontFeature = 'normal' | 'tabular-nums';\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() fontFeature: TextFontFeature = 'normal';\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      'text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\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,2nE,MCmCTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAuB,mBAGvBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,YAA+B,SAC/BJ,KAAAK,GAAkB,GA0D3B,CAtDC,MAAAC,GAIE,MAAMC,EAAMP,KAAKK,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,CAACX,KAAKC,SAAU,KAChBW,KAAQ,KACR,eAAgBZ,KAAKa,OAAS,SAC9B,gBAAiBb,KAAKa,OAAS,UAC/B,eAAgBb,KAAKa,OAAS,SAC9B,mBAAoBb,KAAKG,iBAAmB,GAAKH,KAAKa,OAAS,SAC/D,mBAAoBb,KAAKG,iBAAmB,GAAKH,KAAKa,OAAS,SAC/D,mBAAoBb,KAAKG,iBAAmB,GAAKH,KAAKa,OAAS,SAC/D,mBAAoBb,KAAKG,iBAAmB,GAAKH,KAAKa,OAAS,SAC/D,mBAAoBb,KAAKG,iBAAmB,GAAKH,KAAKa,OAAS,SAC/D,sBAAyBb,KAAKc,QAAU,UACxC,wBAAyBd,KAAKc,QAAU,YACxC,uBAAyBd,KAAKc,QAAU,WACxC,oBAAyBd,KAAKc,QAAU,QACxC,uBAAyBd,KAAKc,QAAU,WACxC,uBAAyBd,KAAKc,QAAU,WACxC,sBAAyBd,KAAKc,QAAU,UACxC,sBAAyBd,KAAKc,QAAU,UACxC,iBAAyBd,KAAKc,QAAU,KACxC,wBAAyBd,KAAKc,QAAU,YACxC,sBAAyBd,KAAKc,QAAU,UACxC,sBAAyBd,KAAKc,QAAU,UACxC,6BAAqCd,KAAKe,aAAe,YACzD,oCAAqCf,KAAKe,aAAe,mBACzD,eAAgBf,KAAKE,OACrB,mBAAsBF,KAAKgB,QAAU,OACrC,qBAAsBhB,KAAKgB,QAAU,SACrC,oBAAsBhB,KAAKgB,QAAU,QACrC,kCAAmChB,KAAKI,cAAgB,gBAG1D,MAAMa,EAAQjB,KAAKc,OAASN,EAAcR,KAAKc,OAC3C,CAAEA,MAAOd,KAAKc,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAInB,KAAKK,KAAO,SAAWL,KAAKoB,IAAKD,EAAW,OAASnB,KAAKoB,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-Dd0GrKaF.js → p-U1A-rprN.js}

@@ -1,2 +1,2 @@
-import{p as o,H as e,c as n,h as s,a as t,t as r}from"./index.js";import{d as i}from"./p-H89PzqGU.js";const a=()=>`.toggle-btn.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;background:transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.toggle-btn.sc-ds-toggle-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.toggle-btn.sc-ds-toggle-button:hover:not(.inactive){background-color:var(--_hover-bg)}.toggle-btn.sc-ds-toggle-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-toggle-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.elevationElevated.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);color:var(--color-foreground-secondary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.elevationFlat.sc-ds-toggle-button{box-shadow:inset 0 0 0 1px var(--_border);color:var(--color-foreground-secondary)}.elevationNone.sc-ds-toggle-button{color:var(--color-foreground-secondary)}.elevationFloating.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);color:var(--color-foreground-secondary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.onBold.elevationNone.sc-ds-toggle-button,.onBold.elevationFlat.sc-ds-toggle-button,.onStrong.elevationNone.sc-ds-toggle-button,.onStrong.elevationFlat.sc-ds-toggle-button{color:var(--color-foreground-on-bold-background-secondary)}.onAlwaysDark.elevationNone.sc-ds-toggle-button,.onAlwaysDark.elevationFlat.sc-ds-toggle-button{color:var(--color-always-dark-foreground-secondary)}.pressed.sc-ds-toggle-button{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.iconOnly.sc-ds-toggle-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.sizeSM.sc-ds-toggle-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:0}.sizeXS.sc-ds-toggle-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-toggle-button,.sizeXS.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-025);gap:0}.rounded.sc-ds-toggle-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-400);min-width:var(--dimension-size-400);padding:0}.rounded.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.rounded.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.inactive.sc-ds-toggle-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.toggle-btn__icon.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.toggle-btn__label.sc-ds-toggle-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;const d={md:"md",sm:"sm",xs:"xs"};const c={md:20,sm:16,xs:12};const l={md:"text-body-medium-emphasis",sm:"text-body-small-emphasis",xs:"text-caption-emphasis"};const g=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=n(this,"dsChange");this.elevation="elevated";this.size="md";this.rounded=false;this.pressed=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.pressed)}}render(){const o=this.size;const e=d[o];const n=c[o];const r=l[o];const i=!!this.icon;const a=!!this.label;const g=i&&!a;const b=a&&!i;const u=i&&a;const v=this.background;const m=this.elevation.charAt(0).toUpperCase()+this.elevation.slice(1);const p={"toggle-btn":true,[`elevation${m}`]:true,sizeSM:o==="sm",sizeXS:o==="xs",rounded:this.rounded,inactive:this.inactive,pressed:this.pressed,iconOnly:g,labelOnly:b,iconAndLabel:u,onMedium:v==="medium",onBold:v==="bold",onStrong:v==="strong",onAlwaysDark:v==="always-dark"};return s(t,{key:"1b4901ca0a1ca5c02a9a5f43ac1f6998bde0c4ed"},s("button",{key:"0fd4d550c1229d243f0f24f50259630643a422e4",type:"button",class:p,disabled:this.inactive,"aria-label":this.ariaLabel??this.label??"toggle","aria-pressed":this.pressed,onClick:this.handleClick},i&&s("span",{key:"706c25b380e9902f9d3d426254cdf8f098970d49",class:"toggle-btn__icon",style:{fontSize:`${n}px`}},s("ds-icon",{key:"9aa1a666c514343dff55de35c0f8f93ec29ed0d0",name:this.icon,size:e})),a&&s("span",{key:"587b0a65aebe52441c37fb5ebfba0e694d6526c5",class:`toggle-btn__label ${r}`},this.label)))}static get style(){return a()}},[2,"ds-toggle-button",{elevation:[1],label:[1],icon:[1],size:[1],rounded:[4],background:[1],pressed:[1028],inactive:[4],ariaLabel:[1,"aria-label"]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-toggle-button","ds-icon"];o.forEach((o=>{switch(o){case"ds-toggle-button":if(!customElements.get(r(o))){customElements.define(r(o),g)}break;case"ds-icon":if(!customElements.get(r(o))){i()}break}}))}b();export{g as T,b as d};
-//# sourceMappingURL=p-Dd0GrKaF.js.map
+import{p as o,H as e,c as n,h as s,a as t,t as r}from"./index.js";import{d as i}from"./p-DrDrPeVV.js";const a=()=>`.toggle-btn.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;background:transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.toggle-btn.sc-ds-toggle-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.toggle-btn.sc-ds-toggle-button:hover:not(.inactive){background-color:var(--_hover-bg)}.toggle-btn.sc-ds-toggle-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-toggle-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.elevationElevated.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);color:var(--color-foreground-secondary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.elevationFlat.sc-ds-toggle-button{box-shadow:inset 0 0 0 1px var(--_border);color:var(--color-foreground-secondary)}.elevationNone.sc-ds-toggle-button{color:var(--color-foreground-secondary)}.elevationFloating.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);color:var(--color-foreground-secondary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.onBold.elevationNone.sc-ds-toggle-button,.onBold.elevationFlat.sc-ds-toggle-button,.onStrong.elevationNone.sc-ds-toggle-button,.onStrong.elevationFlat.sc-ds-toggle-button{color:var(--color-foreground-on-bold-background-secondary)}.onAlwaysDark.elevationNone.sc-ds-toggle-button,.onAlwaysDark.elevationFlat.sc-ds-toggle-button{color:var(--color-always-dark-foreground-secondary)}.pressed.sc-ds-toggle-button{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.iconOnly.sc-ds-toggle-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.sizeSM.sc-ds-toggle-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:0}.sizeXS.sc-ds-toggle-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-toggle-button,.sizeXS.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-025);gap:0}.rounded.sc-ds-toggle-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-400);min-width:var(--dimension-size-400);padding:0}.rounded.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.rounded.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.inactive.sc-ds-toggle-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.toggle-btn__icon.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.toggle-btn__label.sc-ds-toggle-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;const d={md:"md",sm:"sm",xs:"xs"};const c={md:20,sm:16,xs:12};const l={md:"text-body-medium-emphasis",sm:"text-body-small-emphasis",xs:"text-caption-emphasis"};const g=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=n(this,"dsChange");this.elevation="elevated";this.size="md";this.rounded=false;this.pressed=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.pressed)}}render(){const o=this.size;const e=d[o];const n=c[o];const r=l[o];const i=!!this.icon;const a=!!this.label;const g=i&&!a;const b=a&&!i;const u=i&&a;const v=this.background;const m=this.elevation.charAt(0).toUpperCase()+this.elevation.slice(1);const p={"toggle-btn":true,[`elevation${m}`]:true,sizeSM:o==="sm",sizeXS:o==="xs",rounded:this.rounded,inactive:this.inactive,pressed:this.pressed,iconOnly:g,labelOnly:b,iconAndLabel:u,onMedium:v==="medium",onBold:v==="bold",onStrong:v==="strong",onAlwaysDark:v==="always-dark"};return s(t,{key:"81c016df38db316e44cfd9420b1b6e4cc6da25c8"},s("button",{key:"c30dbff97f9d6b30edd7a7b7549ec2420ad543d1",type:"button",class:p,disabled:this.inactive,"aria-label":this.ariaLabel??this.label??"toggle","aria-pressed":this.pressed,onClick:this.handleClick},i&&s("span",{key:"85eccd568d0806488974cb10f25bb17f271ec274",class:"toggle-btn__icon",style:{fontSize:`${n}px`}},s("ds-icon",{key:"d78efd9694a818055299b0aec02d9dd53727b56f",name:this.icon,size:e})),a&&s("span",{key:"bedaa3df90ace2bfde99d5dddae43a3d73107e21",class:`toggle-btn__label ${r}`},this.label)))}static get style(){return a()}},[2,"ds-toggle-button",{elevation:[1],label:[1],icon:[1],size:[1],rounded:[4],background:[1],pressed:[1028],inactive:[4],ariaLabel:[1,"aria-label"]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-toggle-button","ds-icon"];o.forEach((o=>{switch(o){case"ds-toggle-button":if(!customElements.get(r(o))){customElements.define(r(o),g)}break;case"ds-icon":if(!customElements.get(r(o))){i()}break}}))}b();export{g as T,b as d};
+//# sourceMappingURL=p-U1A-rprN.js.map

package/dist/components/p-X1N_ggsY.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as a,a as d,t as i}from"./index.js";const r=()=>`.sc-ds-fade-h{--ds-fade-size:var(--dimension-size-600);--ds-fade-bg:var(--color-background-secondary);--ds-fade-offset:0;position:absolute;pointer-events:none;z-index:10;opacity:1;transform:translateZ(0);backface-visibility:hidden;transition:opacity var(--effect-motion-short-3)}.fade--hidden.sc-ds-fade-h{opacity:0}.fade--vertical-edge.sc-ds-fade-h{height:var(--ds-fade-size)}.fade--horizontal-edge.sc-ds-fade-h{width:var(--ds-fade-size)}@media (prefers-reduced-motion: reduce){.sc-ds-fade-h{transition:none}}.fade--top.sc-ds-fade-h{top:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}.fade--bottom.sc-ds-fade-h{bottom:var(--ds-fade-offset);left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}.fade--left.sc-ds-fade-h{top:0;bottom:0;left:var(--ds-fade-offset);background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}.fade--right.sc-ds-fade-h{top:0;bottom:0;right:var(--ds-fade-offset);background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const t={"size-000":"var(--dimension-size-000)","size-050":"var(--dimension-size-050)","size-075":"var(--dimension-size-075)","size-100":"var(--dimension-size-100)","size-150":"var(--dimension-size-150)","size-200":"var(--dimension-size-200)","size-250":"var(--dimension-size-250)","size-300":"var(--dimension-size-300)","size-400":"var(--dimension-size-400)","size-500":"var(--dimension-size-500)","size-600":"var(--dimension-size-600)","size-800":"var(--dimension-size-800)"};const o={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",navigation:"var(--color-navigation-background)",media:"var(--color-media-background)","always-dark":"var(--color-always-dark-background)",inverted:"var(--color-inverted-background)"};const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.side="bottom";this.size="size-600";this.surface="default";this.background="var(--color-background-secondary)";this.visible=true}resolveSize(){if(this.height)return this.height;return Object.prototype.hasOwnProperty.call(t,this.size)?t[this.size]:this.size}resolveBackground(){if(this.background!=="var(--color-background-secondary)")return this.background;return o[this.surface]}render(){const e=this.side==="top"||this.side==="bottom";return a(d,{key:"95bdddf2796b3148d316facd15d373d13f2b5b8a","aria-hidden":"true",class:{fade:true,"fade--hidden":!this.visible,"fade--vertical-edge":e,"fade--horizontal-edge":!e,[`fade--${this.side}`]:true},style:{"--ds-fade-size":this.resolveSize(),"--ds-fade-bg":this.resolveBackground()}})}static get style(){return r()}},[2,"ds-fade",{side:[1],size:[1],height:[1],surface:[1],background:[1],visible:[4]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-fade"];e.forEach((e=>{switch(e){case"ds-fade":if(!customElements.get(i(e))){customElements.define(i(e),n)}break}}))}f();export{n as F,f as d};
+//# sourceMappingURL=p-X1N_ggsY.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["fadeCss","SIZE_VALUE","SURFACE_BACKGROUND","default","primary","secondary","navigation","media","inverted","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","side","size","surface","background","visible","resolveSize","height","Object","prototype","hasOwnProperty","call","resolveBackground","render","isVerticalEdge","h","Host","key","class","fade","style"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=scoped","src/wc/components/Fade/Fade.tsx"],"sourcesContent":[":host {\n  --ds-fade-size: var(--dimension-size-600);\n  --ds-fade-bg: var(--color-background-secondary);\n  --ds-fade-offset: 0;\n\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  opacity: 1;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n  transition: opacity var(--effect-motion-short-3);\n}\n\n:host(.fade--hidden) {\n  opacity: 0;\n}\n\n:host(.fade--vertical-edge) {\n  height: var(--ds-fade-size);\n}\n\n:host(.fade--horizontal-edge) {\n  width: var(--ds-fade-size);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host { transition: none; }\n}\n\n:host(.fade--top) {\n  top: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--bottom) {\n  bottom: var(--ds-fade-offset); left: 0; right: 0;\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--left) {\n  top: 0; bottom: 0; left: var(--ds-fade-offset);\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--right) {\n  top: 0; bottom: 0; right: var(--ds-fade-offset);\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\nexport type FadeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'navigation'\n  | 'media'\n  | 'always-dark'\n  | 'inverted';\nexport type FadeSizeToken =\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';\nexport type FadeSize = FadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<FadeSizeToken, 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 SURFACE_BACKGROUND: Record<FadeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  navigation: 'var(--color-navigation-background)',\n  media: 'var(--color-media-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n  inverted: 'var(--color-inverted-background)',\n};\n\n@Component({\n  tag: 'ds-fade',\n  styleUrl: 'Fade.css',\n  scoped: true,\n})\nexport class Fade {\n  /** Edge where the fade is anchored. */\n  @Prop() side: FadeSide = 'bottom';\n\n  /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */\n  @Prop() size: FadeSize = 'size-600';\n\n  /**\n   * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.\n   * Prefer `size`.\n   */\n  @Prop() height: string | undefined;\n\n  /** Surface context used to choose the fade target background token. */\n  @Prop() surface: FadeSurface = 'default';\n\n  /** Direct background override for contexts that already expose a resolved surface var. */\n  @Prop() background: string = 'var(--color-background-secondary)';\n\n  /** Controls visibility without removing the element from layout/positioning. */\n  @Prop() visible: boolean = true;\n\n  private resolveSize(): string {\n    if (this.height) return this.height;\n\n    return Object.prototype.hasOwnProperty.call(SIZE_VALUE, this.size)\n      ? SIZE_VALUE[this.size as FadeSizeToken]\n      : this.size;\n  }\n\n  private resolveBackground(): string {\n    if (this.background !== 'var(--color-background-secondary)') return this.background;\n    return SURFACE_BACKGROUND[this.surface];\n  }\n\n  render() {\n    const isVerticalEdge = this.side === 'top' || this.side === 'bottom';\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          fade: true,\n          'fade--hidden': !this.visible,\n          'fade--vertical-edge': isVerticalEdge,\n          'fade--horizontal-edge': !isVerticalEdge,\n          [`fade--${this.side}`]: true,\n        }}\n        style={{\n          '--ds-fade-size': this.resolveSize(),\n          '--ds-fade-bg': this.resolveBackground(),\n        } as Record<string, string>}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,0lCC0BtB,MAAMC,EAA4C,CAChD,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,6BAGd,MAAMC,EAAkD,CACtDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,WAAY,qCACZC,MAAO,gCACP,cAAe,sCACfC,SAAU,oC,MAQCC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAiB,SAGjBD,KAAAE,KAAiB,WASjBF,KAAAG,QAAuB,UAGvBH,KAAAI,WAAqB,oCAGrBJ,KAAAK,QAAmB,IAmC5B,CAjCS,WAAAC,GACN,GAAIN,KAAKO,OAAQ,OAAOP,KAAKO,OAE7B,OAAOC,OAAOC,UAAUC,eAAeC,KAAKxB,EAAYa,KAAKE,MACzDf,EAAWa,KAAKE,MAChBF,KAAKE,I,CAGH,iBAAAU,GACN,GAAIZ,KAAKI,aAAe,oCAAqC,OAAOJ,KAAKI,WACzE,OAAOhB,EAAmBY,KAAKG,Q,CAGjC,MAAAU,GACE,MAAMC,EAAiBd,KAAKC,OAAS,OAASD,KAAKC,OAAS,SAE5D,OACEc,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,KAAM,KACN,gBAAiBnB,KAAKK,QACtB,sBAAuBS,EACvB,yBAA0BA,EAC1B,CAAC,SAASd,KAAKC,QAAS,MAE1BmB,MAAO,CACL,iBAAkBpB,KAAKM,cACvB,eAAgBN,KAAKY,sB","ignoreList":[]}

package/dist/components/p-qfvbc9w-.js

@@ -0,0 +1,2 @@
+import{p as o,H as n,c as r,h as a,a as e,t}from"./index.js";import{d as s}from"./p-B_enucPQ.js";import{d as i}from"./p-DrDrPeVV.js";const c=()=>`.action-btn.sc-ds-bar-nav-action{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;color:var(--color-foreground-secondary);box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;transition:color var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot-ring:var(--color-background-secondary)}.action-btn.sc-ds-bar-nav-action::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none}.action-btn.sc-ds-bar-nav-action:hover:not(.inactive)::after{background:var(--_hover-bg);transition:none}.action-btn.sc-ds-bar-nav-action:active:not(.inactive)::after{background:var(--_pressed-bg);transition:none}.action-btn.sc-ds-bar-nav-action:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.action-btn.selected.sc-ds-bar-nav-action{color:var(--color-foreground-primary)}.action-btn.inactive.sc-ds-bar-nav-action{opacity:0.5;cursor:not-allowed;pointer-events:none}.onMedium.sc-ds-bar-nav-action{--_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)}.onBold.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_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)}.onBold.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onStrong.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_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)}.onStrong.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onAlwaysDark.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-secondary);--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background)}.onAlwaysDark.selected.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-primary)}.action-btn__icon-wrap.sc-ds-bar-nav-action{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-btn__dot.sc-ds-bar-nav-action{position:absolute;top:0;right:0;pointer-events:none}`;const d=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.icon="";this.selected=false;this.dot=false;this.inactive=false;this.ariaLabel="action";this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.selected)}}render(){const o=this.background;const n={"action-btn":true,selected:this.selected,inactive:this.inactive,onMedium:o==="medium",onBold:o==="bold",onStrong:o==="strong",onAlwaysDark:o==="always-dark"};return a(e,{key:"5fa334c6d5be3d288028e9294774c25104890d4c"},a("button",{key:"35c3643987bbb67d6549527ff070ba1cf802faf7",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"97b96334a820484281c73f97c84039b40a561daa",class:"action-btn__icon-wrap"},a("ds-icon",{key:"af6d46223aa9d1c56169b5917586ba95d939fd34",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("ds-badge",{key:"097c9fa1e2f282714bbb243e13fe343291dc286e",class:"action-btn__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"}))))}static get style(){return c()}},[2,"ds-bar-nav-action",{icon:[1],selected:[4],dot:[4],inactive:[4],ariaLabel:[1,"aria-label"],background:[1]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-bar-nav-action","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-bar-nav-action":if(!customElements.get(t(o))){customElements.define(t(o),d)}break;case"ds-badge":if(!customElements.get(t(o))){s()}break;case"ds-icon":if(!customElements.get(t(o))){i()}break}}))}b();export{d as B,b as d};
+//# sourceMappingURL=p-qfvbc9w-.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["barNavActionCss","BarNavAction","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","selected","dot","inactive","ariaLabel","handleClick","dsChange","emit","render","bg","background","cls","onMedium","onBold","onStrong","onAlwaysDark","h","Host","key","type","class","disabled","onClick","name","size","color","variant","label"],"sources":["src/wc/components/BarNavAction/BarNavAction.css?tag=ds-bar-nav-action&encapsulation=scoped","src/wc/components/BarNavAction/BarNavAction.tsx"],"sourcesContent":[".action-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.action-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.action-btn:hover:not(.inactive)::after  { background: var(--_hover-bg);  transition: none; }\n.action-btn:active:not(.inactive)::after { background: var(--_pressed-bg); transition: none; }\n\n.action-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* Selected: icon turns primary — no background change */\n.action-btn.selected { color: var(--color-foreground-primary); }\n\n.action-btn.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ==========================================================================\n   Background context\n   ========================================================================== */\n\n.onMedium {\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}\n\n.onBold {\n  color: var(--color-foreground-on-bold-background-secondary);\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}\n\n.onBold.selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.onStrong {\n  color: var(--color-foreground-on-bold-background-secondary);\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}\n\n.onStrong.selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.onAlwaysDark {\n  color: var(--color-always-dark-foreground-secondary);\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}\n\n.onAlwaysDark.selected { color: var(--color-always-dark-foreground-primary); }\n\n/* ==========================================================================\n   Inner layout — icon zone sits above the ::after overlay\n   ========================================================================== */\n\n.action-btn__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n/* Notification dot — top-right corner of the icon zone */\n.action-btn__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n@Component({\n  tag: 'ds-bar-nav-action',\n  styleUrl: 'BarNavAction.css',\n  scoped: true,\n})\nexport class BarNavAction {\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Controlled toggle/selected state. */\n  @Prop() selected: boolean = false;\n\n  /** Show a notification dot (brand colour) at the top-right of the icon. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n\n  /** Parent surface context — adjusts hover/press colours for coloured backgrounds. */\n  @Prop() background: BarNavActionBackground | undefined;\n\n  /** Emits the new selected value (!selected) on click. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsChange.emit(!this.selected);\n  };\n\n  render() {\n    const bg = this.background;\n\n    const cls: Record<string, boolean> = {\n      'action-btn': true,\n      selected: this.selected,\n      inactive: this.inactive,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n    };\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={cls}\n          disabled={this.inactive}\n          aria-pressed={this.selected}\n          aria-label={this.ariaLabel}\n          onClick={this.handleClick}\n        >\n          <span class=\"action-btn__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"action-btn__dot\"\n                variant=\"dot\"\n                background=\"var(--_dot-ring)\"\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAkB,IAAM,s2F,MCSjBC,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAOUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,IAAe,MAGfH,KAAAI,SAAoB,MAEOJ,KAAAK,UAAoB,SAQ/CL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,SAAU,OACnBJ,KAAKO,SAASC,MAAMR,KAAKE,SAAS,CA0CrC,CAvCC,MAAAO,GACE,MAAMC,EAAKV,KAAKW,WAEhB,MAAMC,EAA+B,CACnC,aAAc,KACdV,SAAUF,KAAKE,SACfE,SAAUJ,KAAKI,SACfS,SAAUH,IAAO,SACjBI,OAAQJ,IAAO,OACfK,SAAUL,IAAO,SACjBM,aAAcN,IAAO,eAGvB,OACEO,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAOT,EACPU,SAAUtB,KAAKI,SAAQ,eACTJ,KAAKE,SAAQ,aACfF,KAAKK,UACjBkB,QAASvB,KAAKM,aAEdW,EAAA,QAAAE,IAAA,2CAAME,MAAM,yBACVJ,EAAA,WAAAE,IAAA,2CAASK,KAAMxB,KAAKC,KAAMwB,KAAK,KAAKC,MAAM,YACzC1B,KAAKG,KACJc,EAAA,YAAAE,IAAA,2CACEE,MAAM,kBACNM,QAAQ,MACRhB,WAAW,mBACXiB,MAAM,GAAE,cACI,W","ignoreList":[]}

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

@@ -1,5 +1,17 @@
+export type BadgeVariant = 'counter' | 'dot';
+export type BadgeSurface = 'default' | 'primary' | 'secondary' | 'medium' | 'bold' | 'strong' | 'navigation' | 'always-dark';
 export declare class Badge {
+    /** Render as a compact counter or notification dot. */
+    variant: BadgeVariant;
+    /** Count shown for counter badges. Count 0 hides the badge. */
     count: number;
+    /** Highest count shown before compacting to "+". */
+    max: number;
+    /** Surface context for the ring around dots. */
+    surface: BadgeSurface;
+    /** Direct ring background override for component-local surfaces. */
+    background: string | undefined;
+    /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */
     isSelected: boolean;
     /** Accessible label. Defaults to the count as a string. */
     label: string | undefined;

package/dist/types/.stencil/Badge/index.d.ts

@@ -1,2 +1,2 @@
-export type {} from './Badge';
+export type { BadgeVariant, BadgeSurface } from './Badge';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ChipIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
+export type ChipContrast = 'strong' | 'bold' | 'medium' | 'faint';
+export type ChipElevation = 'none' | 'flat' | 'elevated';
+export type ChipSize = 'md' | 'sm' | 'xs';
+export type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export declare class Chip {
+    label: string;
+    intent: ChipIntent;
+    contrast: ChipContrast;
+    elevation: ChipElevation;
+    size: ChipSize;
+    rounded: boolean;
+    removable: boolean;
+    maxWidth: string | number | undefined;
+    inactive: boolean;
+    background: ChipBackground | undefined;
+    pressed: boolean;
+    /** Fired when the remove button is clicked. */
+    dsRemove: EventEmitter<void>;
+    /** Fired when an interactive chip is clicked. */
+    dsClick: EventEmitter<void>;
+    /** Fired when the pressed state toggles. */
+    dsPressedChange: EventEmitter<boolean>;
+    private handleClick;
+    private handleKeyDown;
+    private handleRemove;
+    render(): any;
+}
+//# sourceMappingURL=Chip.d.ts.map

package/dist/types/.stencil/Chip/index.d.ts

@@ -0,0 +1,2 @@
+export type { ChipIntent, ChipContrast, ChipElevation, ChipSize, ChipBackground } from './Chip';
+//# sourceMappingURL=index.d.ts.map

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

@@ -1,7 +1,21 @@
 export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSurface = 'default' | 'on-bold-background' | 'on-strong-background' | 'on-medium-background' | 'on-translucent-background' | 'navigation' | 'media' | 'always-dark' | 'inverted';
+export type DividerInsetToken = 'space-000' | 'space-012' | 'space-025' | 'space-050' | 'space-075' | 'space-100' | 'space-125' | 'space-150' | 'space-175' | 'space-200' | 'space-250' | 'space-300' | 'space-400' | 'space-600' | 'space-800';
+export type DividerInset = 'none' | DividerInsetToken | (string & {});
+export type DividerLength = 'auto' | 'full' | (string & {});
 export declare class Divider {
     /** Direction of the divider line. Defaults to 'horizontal'. */
     orientation: DividerOrientation;
+    /** Surface context so the divider uses the right TokoMo divider token. */
+    surface: DividerSurface;
+    /** Insets the divider from its start/end edges. Accepts spacing token names or any CSS length. */
+    inset: DividerInset;
+    /** Visual line length. Defaults to filling the available axis. Accepts any CSS length. */
+    length: DividerLength;
+    /** Expose the divider as a semantic separator. Visual-only dividers are hidden from assistive tech by default. */
+    semantic: boolean;
+    private resolveInset;
+    private resolveLength;
     render(): any;
 }
 //# sourceMappingURL=Divider.d.ts.map

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

@@ -1,10 +1,25 @@
 export type FadeSide = 'top' | 'bottom' | 'left' | 'right';
+export type FadeSurface = 'default' | 'primary' | 'secondary' | 'navigation' | 'media' | 'always-dark' | 'inverted';
+export type FadeSizeToken = 'size-000' | 'size-050' | 'size-075' | 'size-100' | 'size-150' | 'size-200' | 'size-250' | 'size-300' | 'size-400' | 'size-500' | 'size-600' | 'size-800';
+export type FadeSize = FadeSizeToken | (string & {});
 export declare class Fade {
+    /** Edge where the fade is anchored. */
     side: FadeSide;
-    /** Height (or width for left/right) of the fade overlay — any CSS value. */
+    /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
+    size: FadeSize;
+    /**
+     * Deprecated alias for size. Kept for existing consumers that pass a raw CSS length.
+     * Prefer `size`.
+     */
     height: string | undefined;
-    /** Background color to fade from. Defaults to var(--color-background-secondary). */
+    /** Surface context used to choose the fade target background token. */
+    surface: FadeSurface;
+    /** Direct background override for contexts that already expose a resolved surface var. */
     background: string;
+    /** Controls visibility without removing the element from layout/positioning. */
+    visible: boolean;
+    private resolveSize;
+    private resolveBackground;
     render(): any;
 }
 //# sourceMappingURL=Fade.d.ts.map

package/dist/types/.stencil/Fade/index.d.ts

@@ -1,2 +1,2 @@
-export type { FadeSide } from './Fade';
+export type { FadeSide, FadeSize, FadeSizeToken, FadeSurface } from './Fade';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1,9 +1,7 @@
-import { EventEmitter } from '../../stencil-public-runtime';
 export type TagIntent = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';
 export type TagContrast = 'strong' | 'bold' | 'medium' | 'faint';
 export type TagElevation = 'none' | 'flat' | 'elevated';
 export type TagSize = 'md' | 'sm' | 'xs';
-export type TagBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 export declare class Tag {
     label: string;
     intent: TagIntent;
@@ -11,22 +9,7 @@ export declare class Tag {
     elevation: TagElevation;
     size: TagSize;
     rounded: boolean;
-    removable: boolean;
     maxWidth: string | number | undefined;
-    inactive: boolean;
-    background: TagBackground | undefined;
-    pressed: boolean;
-    /** Whether the tag has a click/toggle behavior. */
-    interactive: boolean;
-    /** Fired when the remove button is clicked. */
-    dsRemove: EventEmitter<void>;
-    /** Fired when an interactive tag is clicked. */
-    dsClick: EventEmitter<void>;
-    /** Fired when the pressed state toggles. */
-    dsPressedChange: EventEmitter<boolean>;
-    private handleClick;
-    private handleKeyDown;
-    private handleRemove;
     render(): any;
 }
 //# sourceMappingURL=Tag.d.ts.map

package/dist/types/.stencil/Tag/index.d.ts

@@ -1,2 +1,2 @@
-export type { TagIntent, TagContrast, TagElevation, TagSize, TagBackground } from './Tag';
+export type { TagIntent, TagContrast, TagElevation, TagSize } from './Tag';
 //# sourceMappingURL=index.d.ts.map

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

@@ -6,6 +6,7 @@ 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';
 export declare class Text {
     variant: TextVariant;
     color: TextColor | undefined;
@@ -14,6 +15,7 @@ export declare class Text {
     align: TextAlign | undefined;
     lineTruncation: LineTruncation;
     wrap: TextWrap | undefined;
+    fontFeature: TextFontFeature;
     as: TextElement;
     /** Maps to `for` attribute on <label> elements. */
     for: string | undefined;