@ds-mo/ui 1.7.4 → 1.8.0

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

@@ -1 +1 @@
-{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","inactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color 100ms ease;\n}\n\n.track:hover:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n.track--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() inactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n          <span class=\"text-body-small-emphasis\">{this.value}</span>\n        </div>\n        <div\n          class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.inactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAY,IAAM,wqFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,SAAoB,MAOpBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CA0CnE,CAvCC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,2BAA2BC,QAASN,GAAUlB,KAAKyB,OAChEL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,4BAA4BvB,KAAKE,QAE/CkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEG,MAAO,KAAM,kBAAmB1B,KAAKM,SAAU,gBAAiBO,IAAQ,GACjFc,MAAO,CAAE,eAAgBC,OAAOf,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEO,KAAK,QACLC,GAAIZ,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZ6B,SAAU/B,KAAKM,SACfiB,MAAM,cAAa,iBACHvB,KAAKgC,UACrBC,QAASjC,KAAKO,e","ignoreList":[]}
+{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","inactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color 100ms ease;\n}\n\n.track:hover:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n.track--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() inactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n          <span class=\"text-body-small-emphasis\">{this.value}</span>\n        </div>\n        <div\n          class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.inactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,wqFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,SAAoB,MAOpBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CA0CnE,CAvCC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,2BAA2BC,QAASN,GAAUlB,KAAKyB,OAChEL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,4BAA4BvB,KAAKE,QAE/CkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEG,MAAO,KAAM,kBAAmB1B,KAAKM,SAAU,gBAAiBO,IAAQ,GACjFc,MAAO,CAAE,eAAgBC,OAAOf,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEO,KAAK,QACLC,GAAIZ,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZ6B,SAAU/B,KAAKM,SACfiB,MAAM,cAAa,iBACHvB,KAAKgC,UACrBC,QAASjC,KAAKO,e","ignoreList":[]}

package/dist/components/ds-tab-group-nav.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-D7HuiVTa.js";const t=o;const a=s;export{t as DsTabGroupNav,a as defineCustomElement};
+import{T as o,d as s}from"./p-DZDXwEMg.js";const t=o;const p=s;export{t as DsTabGroupNav,p as defineCustomElement};
 //# sourceMappingURL=ds-tab-group-nav.js.map

package/dist/components/ds-tab-group.js

@@ -1,2 +1,2 @@
-import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-DAycHO-h.js";const c=()=>`.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;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.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-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);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-300);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:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;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);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.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;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-neutral)}.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-neutral);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-neutral);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 l=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 i(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:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",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(n(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-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[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 b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
+import{p as r,H as e,c as o,h as a,a as t,t as s}from"./index.js";import{g as i,i as n}from"./p-BQq26pt9.js";import{d}from"./p-CX7-_qOW.js";const c=()=>`.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;width:max-content;max-width:100%;height:var(--dimension-size-400);padding:calc(var(--dimension-space-050) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);border-radius:var(--dimension-radius-half);box-sizing:border-box}.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-050);background-color:transparent;border:var(--dimension-stroke-width-012) solid transparent;border-radius:var(--dimension-radius-half);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-300);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:calc(var(--dimension-stroke-width-012) * -1);border-radius:inherit;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);background-color:var(--color-background-primary);border-color:var(--color-border-tertiary)}.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;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-neutral)}.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-neutral);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-neutral);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 l=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 i(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:"3169bbef555225fc37eebbc55efac726b2def9c6",class:"tab-group-host"},a("div",{key:"18770a26e5ebfd75e95dda95548a67b2d32e61b6",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(n(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-small-emphasis":"text-body-small"]:true}},o.label,o.dot&&a("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return c()}},[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 b(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group","ds-badge"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),l)}break;case"ds-badge":if(!customElements.get(s(r))){d()}break}}))}b();const u=l;const g=b;export{u as DsTabGroup,g as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/ds-toggle.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"d46b9a27b57c8ca0ec4dba401fbd7e85cb9386c5",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"d676d16896c875a02953b58355f8cbc5b3c51912",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
+import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"a5549e47aa82166c1cc4af2704e9c9cc47555bfb",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"20f443768a712e2766391018dea2e67bee970ea9",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
 //# sourceMappingURL=ds-toggle.js.map

package/dist/components/p-B8VZmH43.js

@@ -0,0 +1,2 @@
+import{p as n}from"./p-BvmooLHV.js";const t="ds-shell-bar-nav";const o="ds-shell-nav-vt-style";const e="--effect-animation-duration-medium-3";const i="--effect-animation-easing-ease-in-out";const a=500;const s="ease-in-out";function c(n,t){if(typeof document==="undefined")return t;const o=getComputedStyle(document.documentElement).getPropertyValue(n).trim();return o||t}function r(){if(typeof document==="undefined")return;if(document.getElementById(o))return;const n=document.createElement("style");n.id=o;n.textContent=["::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}",`::view-transition-old(${t}),::view-transition-new(${t}){animation:none;mix-blend-mode:normal}`,"::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}",`::view-transition-new(${t}){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`].join("\n");document.head.appendChild(n)}function d(n){const t=n??document.querySelector(".panel-nav__footer-btn");const o=t?.getBoundingClientRect();const e=o?Math.round(o.left+o.width/2):Math.round(window.innerWidth/2);const i=o?Math.round(o.top+o.height/2):Math.round(window.innerHeight/2);const a=Math.ceil(Math.hypot(Math.max(e,window.innerWidth-e),Math.max(i,window.innerHeight-i)));return{x:e,y:i,maxRadius:a}}function u(n){document.documentElement.style.setProperty("--vt-x",`${n.x}px`);document.documentElement.style.setProperty("--vt-y",`${n.y}px`)}function m(o,r){const d=n(c(e,"400ms"),a);const u=c(i,s);const m={clipPath:[`circle(0px at ${o.x}px ${o.y}px)`,`circle(${o.maxRadius}px at ${o.x}px ${o.y}px)`]};const l={duration:d,easing:u,fill:"forwards"};document.documentElement.animate(m,{...l,pseudoElement:"::view-transition-new(root)"});document.documentElement.animate(m,{...l,pseudoElement:`::view-transition-new(${t})`})}export{t as S,m as a,r as e,d as r,u as s};
+//# sourceMappingURL=p-B8VZmH43.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["SHELL_BAR_NAV_VT_NAME","VT_STYLE_ID","SHELL_NAV_REVEAL_DURATION_VAR","SHELL_NAV_REVEAL_EASING_VAR","SHELL_NAV_REVEAL_DURATION_FALLBACK_MS","SHELL_NAV_REVEAL_EASING_FALLBACK","readCssCustomProperty","name","fallback","document","value","getComputedStyle","documentElement","getPropertyValue","trim","ensureShellNavVtStyle","getElementById","style","createElement","id","textContent","join","head","appendChild","resolveShellNavRevealOrigin","originEl","btn","querySelector","rect","getBoundingClientRect","x","Math","round","left","width","window","innerWidth","y","top","height","innerHeight","maxRadius","ceil","hypot","max","setShellNavRevealOriginVars","origin","setProperty","animateShellNavRadialReveal","durationMs","duration","parseCssTimeMs","easing","keyframes","clipPath","options","fill","animate","pseudoElement"],"sources":["src/wc/nav/shell-view-transition.ts"],"sourcesContent":["import { parseCssTimeMs } from '../utils/resolve-css-time-ms';\n\n/** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */\nexport const SHELL_BAR_NAV_VT_NAME = 'ds-shell-bar-nav';\n\nexport { parseCssTimeMs };\n\nconst VT_STYLE_ID = 'ds-shell-nav-vt-style';\n\n/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */\nexport const SHELL_NAV_REVEAL_DURATION_VAR = '--effect-animation-duration-medium-3';\nexport const SHELL_NAV_REVEAL_EASING_VAR = '--effect-animation-easing-ease-in-out';\n\nconst SHELL_NAV_REVEAL_DURATION_FALLBACK_MS = 500;\nconst SHELL_NAV_REVEAL_EASING_FALLBACK = 'ease-in-out';\n\nfunction readCssCustomProperty(name: string, fallback: string): string {\n  if (typeof document === 'undefined') return fallback;\n  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n  return value || fallback;\n}\n\n/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */\nexport function ensureShellNavVtStyle(): void {\n  if (typeof document === 'undefined') return;\n  if (document.getElementById(VT_STYLE_ID)) return;\n\n  const style = document.createElement('style');\n  style.id = VT_STYLE_ID;\n  style.textContent = [\n    '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',\n    `::view-transition-old(${SHELL_BAR_NAV_VT_NAME}),::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){animation:none;mix-blend-mode:normal}`,\n    '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n    `::view-transition-new(${SHELL_BAR_NAV_VT_NAME}){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}`,\n  ].join('\\n');\n  document.head.appendChild(style);\n}\n\nexport interface ShellNavRevealOrigin {\n  x: number;\n  y: number;\n  maxRadius: number;\n}\n\n/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */\nexport function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin {\n  const btn =\n    originEl ??\n    document.querySelector<HTMLElement>('.panel-nav__footer-btn');\n  const rect = btn?.getBoundingClientRect();\n  const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);\n  const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);\n  const maxRadius = Math.ceil(\n    Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y)),\n  );\n  return { x, y, maxRadius };\n}\n\nexport function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void {\n  document.documentElement.style.setProperty('--vt-x', `${origin.x}px`);\n  document.documentElement.style.setProperty('--vt-y', `${origin.y}px`);\n}\n\n/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */\nexport function animateShellNavRadialReveal(\n  origin: ShellNavRevealOrigin,\n  durationMs?: number,\n): void {\n  const duration =\n    durationMs ??\n    parseCssTimeMs(\n      readCssCustomProperty(SHELL_NAV_REVEAL_DURATION_VAR, '400ms'),\n      SHELL_NAV_REVEAL_DURATION_FALLBACK_MS,\n    );\n  const easing = readCssCustomProperty(\n    SHELL_NAV_REVEAL_EASING_VAR,\n    SHELL_NAV_REVEAL_EASING_FALLBACK,\n  );\n  const keyframes = {\n    clipPath: [\n      `circle(0px at ${origin.x}px ${origin.y}px)`,\n      `circle(${origin.maxRadius}px at ${origin.x}px ${origin.y}px)`,\n    ],\n  };\n  const options = {\n    duration,\n    easing,\n    fill: 'forwards' as const,\n  };\n\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: '::view-transition-new(root)',\n  });\n  document.documentElement.animate(keyframes, {\n    ...options,\n    pseudoElement: `::view-transition-new(${SHELL_BAR_NAV_VT_NAME})`,\n  });\n}\n\n/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */\nexport function runShellNavStyleRevealOnReady(\n  transition: { ready: Promise<void> },\n  originEl?: HTMLElement | null,\n): void {\n  ensureShellNavVtStyle();\n  const origin = resolveShellNavRevealOrigin(originEl);\n  setShellNavRevealOriginVars(origin);\n\n  transition.ready\n    .then(() => animateShellNavRadialReveal(origin))\n    .catch(() => {\n      /* transition skipped or superseded */\n    });\n}\n"],"mappings":"oCAGO,MAAMA,EAAwB,mBAIrC,MAAMC,EAAc,wBAGb,MAAMC,EAAgC,uCACtC,MAAMC,EAA8B,wCAE3C,MAAMC,EAAwC,IAC9C,MAAMC,EAAmC,cAEzC,SAASC,EAAsBC,EAAcC,GAC3C,UAAWC,WAAa,YAAa,OAAOD,EAC5C,MAAME,EAAQC,iBAAiBF,SAASG,iBAAiBC,iBAAiBN,GAAMO,OAChF,OAAOJ,GAASF,CAClB,C,SAGgBO,IACd,UAAWN,WAAa,YAAa,OACrC,GAAIA,SAASO,eAAef,GAAc,OAE1C,MAAMgB,EAAQR,SAASS,cAAc,SACrCD,EAAME,GAAKlB,EACXgB,EAAMG,YAAc,CAClB,gGACA,yBAAyBpB,4BAAgDA,2CACzE,wFACA,yBAAyBA,gEACzBqB,KAAK,MACPZ,SAASa,KAAKC,YAAYN,EAC5B,CASM,SAAUO,EAA4BC,GAC1C,MAAMC,EACJD,GACAhB,SAASkB,cAA2B,0BACtC,MAAMC,EAAOF,GAAKG,wBAClB,MAAMC,EAAIF,EAAOG,KAAKC,MAAMJ,EAAKK,KAAOL,EAAKM,MAAQ,GAAKH,KAAKC,MAAMG,OAAOC,WAAa,GACzF,MAAMC,EAAIT,EAAOG,KAAKC,MAAMJ,EAAKU,IAAMV,EAAKW,OAAS,GAAKR,KAAKC,MAAMG,OAAOK,YAAc,GAC1F,MAAMC,EAAYV,KAAKW,KACrBX,KAAKY,MAAMZ,KAAKa,IAAId,EAAGK,OAAOC,WAAaN,GAAIC,KAAKa,IAAIP,EAAGF,OAAOK,YAAcH,KAElF,MAAO,CAAEP,IAAGO,IAAGI,YACjB,CAEM,SAAUI,EAA4BC,GAC1CrC,SAASG,gBAAgBK,MAAM8B,YAAY,SAAU,GAAGD,EAAOhB,OAC/DrB,SAASG,gBAAgBK,MAAM8B,YAAY,SAAU,GAAGD,EAAOT,MACjE,CAGM,SAAUW,EACdF,EACAG,GAEA,MAAMC,EAEJC,EACE7C,EAAsBJ,EAA+B,SACrDE,GAEJ,MAAMgD,EAAS9C,EACbH,EACAE,GAEF,MAAMgD,EAAY,CAChBC,SAAU,CACR,iBAAiBR,EAAOhB,OAAOgB,EAAOT,OACtC,UAAUS,EAAOL,kBAAkBK,EAAOhB,OAAOgB,EAAOT,SAG5D,MAAMkB,EAAU,CACdL,WACAE,SACAI,KAAM,YAGR/C,SAASG,gBAAgB6C,QAAQJ,EAAW,IACvCE,EACHG,cAAe,gCAEjBjD,SAASG,gBAAgB6C,QAAQJ,EAAW,IACvCE,EACHG,cAAe,yBAAyB1D,MAE5C,Q","ignoreList":[]}

package/dist/components/p-BucV1U6A.js

@@ -0,0 +1,2 @@
+const n="--ds-shell-gradient-image";const t="--ds-shell-gradient-size";const a="--ds-shell-gradient-position-panel";const s="--ds-shell-gradient-position-bar";const r="--ds-shell-gradient-opacity";const o="0.1";const e="100% 100% at 0% 0%";function i(){return`radial-gradient(${e}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`}function c(n){return i()}function l(n){return`${Math.round(n.width)}px ${Math.round(n.height)}px`}function d(){return"0 0"}function u(n){return`${-Math.round(n)}px 0`}export{s as S,a,n as b,t as c,r as d,o as e,u as f,d as g,l as h,c as s};
+//# sourceMappingURL=p-BucV1U6A.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","SHELL_GRADIENT_OPACITY","GRADIENT_GEOMETRY","buildShellRadialGradient","shellGradientImageForStyle","_style","shellGradientSize","layout","Math","round","width","height","shellGradientPositionPanel","shellGradientPositionBar","panelWidth"],"sources":["src/wc/nav/shell-gradient.ts"],"sourcesContent":["import type { NavChromeStyle } from './nav-chrome';\n\n/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-app-shell`. */\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n\n/** Layer opacity for the nav gradient wash. */\nexport const SHELL_GRADIENT_OPACITY = '0.1';\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\n/**\n * Unified shell radial — same wash for all nav chrome styles.\n * Tokens follow `data-theme` (light/dark blue intent).\n */\nexport function buildShellRadialGradient(): string {\n  return `radial-gradient(${GRADIENT_GEOMETRY}, var(--color-background-transparent) 0%, var(--color-color-intent-blue-strong-background) 100%)`;\n}\n\n/** Built-in radial image (optional `gradientSrc` on shell overrides). */\nexport function shellGradientImageForStyle(_style: NavChromeStyle): string {\n  return buildShellRadialGradient();\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\nexport function shellGradientSize(layout: ShellGradientLayout): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n"],"mappings":"AAGO,MAAMA,EAA2B,4BACjC,MAAMC,EAA0B,2BAChC,MAAMC,EAAoC,qCAC1C,MAAMC,EAAkC,mCACxC,MAAMC,EAA6B,8BAGnC,MAAMC,EAAyB,MAEtC,MAAMC,EAAoB,qB,SAMVC,IACd,MAAO,mBAAmBD,mGAC5B,CAGM,SAAUE,EAA2BC,GACzC,OAAOF,GACT,CAQM,SAAUG,EAAkBC,GAChC,MAAO,GAAGC,KAAKC,MAAMF,EAAOG,YAAYF,KAAKC,MAAMF,EAAOI,WAC5D,C,SAEgBC,IACd,MAAO,KACT,CAEM,SAAUC,EAAyBC,GACvC,MAAO,IAAIN,KAAKC,MAAMK,QACxB,Q","ignoreList":[]}

package/dist/components/p-CX7-_qOW.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as i,a as n,t as r}from"./index.js";import{i as s,f as d,b as t,B as o,r as g}from"./p-TtnqbcnR.js";const c=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0;border-radius:var(--dimension-radius-half);font-size:var(--typography-fontsize-xs);line-height:1}.badge--selected.sc-ds-badge-h{--_badge-bg:var(--color-foreground-primary)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:var(--_badge-gradient-position, 0 0);background-repeat:no-repeat;opacity:var(--ds-shell-gradient-opacity, 1)}`;const b={default:"var(--color-background-secondary)",primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const l=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="default";this.gradientBackground=false;this.isSelected=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const i=this.el.closest("ds-bar-nav");if(i)this.gradientObserver.observe(i);const n=this.el.closest("ds-panel-nav");if(n)this.gradientObserver.observe(n)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground)return a;const i=d(this.el);if(!i)return a;a[o]=t(this.el,i,g(i));return a}render(){const e=this.variant==="dot";if(!e&&this.count===0)return i(n,{style:{display:"none"}});const a=this.count>this.max?"+":String(this.count);const r=this.label??(e?"Notification":String(this.count));const s=this.background??b[this.surface];return i(n,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--selected":this.isSelected,"badge--on-gradient-background":this.gradientBackground},"aria-label":r,style:this.ringHostStyle(s)},i("span",{class:{badge__mark:true,"text-caption-emphasis":!e},"aria-hidden":"true"},!e&&a))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return c()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"on-gradient-background"],isSelected:[4,"is-selected"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),l)}break}}))}h();export{l as B,h as d};
+//# sourceMappingURL=p-CX7-_qOW.js.map

package/dist/components/p-CX7-_qOW.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","isShellGradientActive","el","update","window","addEventListener","ResizeObserver","observe","shell","closest","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","findGradientSurface","BADGE_GRADIENT_POSITION_VAR","badgeGradientPosition","readShellGradientPosition","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","badge__mark"],"sources":["src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0;\n  border-radius: var(--dimension-radius-half);\n  font-size: var(--typography-fontsize-xs);\n  line-height: 1;\n}\n\n:host(.badge--selected) {\n  --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: var(--_badge-gradient-position, 0 0);\n  background-repeat: no-repeat;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  badgeGradientPosition,\n  findGradientSurface,\n  isShellGradientActive,\n  readShellGradientPosition,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  default: 'var(--color-background-secondary)',\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"+\". */\n  @Prop() max: number = 9;\n\n  /** Surface context for the ring around dots. */\n  @Prop() surface: BadgeSurface = 'default';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled in `componentDidLoad` under `ds-app-shell[gradient]`;\n   * set `on-gradient-background` to opt in/out explicitly.\n   */\n  @Prop({ attribute: 'on-gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n  @Prop() isSelected: boolean = false;\n\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground) return style;\n\n    const surface = findGradientSurface(this.el);\n    if (!surface) return style;\n\n    style[BADGE_GRADIENT_POSITION_VAR] = badgeGradientPosition(\n      this.el,\n      surface,\n      readShellGradientPosition(surface),\n    );\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? '+' : String(this.count);\n    const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--selected': this.isSelected,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        aria-label={ariaLabel}\n        style={this.ringHostStyle(ring)}\n      >\n        <span\n          class={{\n            'badge__mark': true,\n            'text-caption-emphasis': !isDot,\n          }}\n          aria-hidden=\"true\"\n        >\n          {!isDot && display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2HAAA,MAAMA,EAAW,IAAM,8mECoBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAU8BJ,KAAAK,mBAA8B,MAGpFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IAkHvD,CAhHC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBW,EAAsBhB,KAAKiB,IAAK,CAC9DjB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMa,EAAS,KACblB,KAAKO,uBAAyB,CAAC,EAEjCW,IAEAlB,KAAKS,uBAAyBS,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCrB,KAAKQ,iBAAmB,IAAIa,eAAeH,GAC3ClB,KAAKQ,iBAAiBc,QAAQtB,KAAKiB,IAEnC,MAAMM,EAAQvB,KAAKiB,GAAGO,QAAQ,gBAC9B,GAAID,EAAOvB,KAAKQ,iBAAiBc,QAAQC,GAEzC,MAAME,EAAMzB,KAAKiB,GAAGO,QAAQ,cAC5B,GAAIC,EAAKzB,KAAKQ,iBAAiBc,QAAQG,GAEvC,MAAMC,EAAQ1B,KAAKiB,GAAGO,QAAQ,gBAC9B,GAAIE,EAAO1B,KAAKQ,iBAAiBc,QAAQI,E,EAIrC,sBAAAb,GACN,GAAIb,KAAKS,uBAAwB,CAC/BU,OAAOQ,oBAAoB,SAAU3B,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBoB,aACvB5B,KAAKQ,iBAAmB,I,CAGlB,aAAAqB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK9B,KAAKK,mBAAoB,OAAO0B,EAErC,MAAM3B,EAAU4B,EAAoBhC,KAAKiB,IACzC,IAAKb,EAAS,OAAO2B,EAErBA,EAAME,GAA+BC,EACnClC,KAAKiB,GACLb,EACA+B,EAA0B/B,IAE5B,OAAO2B,C,CAGT,MAAAK,GACE,MAAMC,EAAQrC,KAAKC,UAAY,MAE/B,IAAKoC,GAASrC,KAAKE,QAAU,EAAG,OAAOoC,EAACC,EAAI,CAACR,MAAO,CAAES,QAAS,UAE/D,MAAMA,EAAUxC,KAAKE,MAAQF,KAAKG,IAAM,IAAMsC,OAAOzC,KAAKE,OAC1D,MAAMwC,EAAY1C,KAAK2C,QAAUN,EAAQ,eAAiBI,OAAOzC,KAAKE,QACtE,MAAM4B,EAAO9B,KAAK4C,YAAczD,EAAaa,KAAKI,SAElD,OACEkC,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmBrC,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACWqC,EACZX,MAAO/B,KAAK6B,cAAcC,IAE1BQ,EAAA,QACEO,MAAO,CACLE,YAAe,KACf,yBAA0BV,GAC3B,cACW,SAEVA,GAASG,G","ignoreList":[]}

package/dist/components/{p-D7HuiVTa.js → p-DZDXwEMg.js}

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

package/dist/components/{p-CiQqF0cR.js → p-DrvpsLK6.js}

@@ -1,2 +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 i}from"./p-DAycHO-h.js";import{d as s}from"./p-DqBCQRRd.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)}.onNavigation.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot-ring:var(--color-navigation-background)}.onNavigation.selected.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-primary)}.onNavigation.sc-ds-bar-nav-action:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.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",onNavigation:o==="navigation"};return a(e,{key:"57b69eb521518d3b6f704744577eb8a2f03c8c8b"},a("button",{key:"7c143ab8690e9bbcd949606f15b12591d4c64e3a",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"3c6075a72e121a3841372f55f9753c2f72360dca",class:"action-btn__icon-wrap"},a("ds-icon",{key:"31669d5ef1360da0b6627bdc9d194df46474ad6a",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("ds-badge",{key:"45f275b1db47869c9733fad4b9fd1e5e4875db48",class:"action-btn__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}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 l(){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))){i()}break;case"ds-icon":if(!customElements.get(t(o))){s()}break}}))}l();export{d as B,l as d};
-//# sourceMappingURL=p-CiQqF0cR.js.map
+import{p as o,H as n,c as r,h as a,a as e,t}from"./index.js";import{d as i}from"./p-CX7-_qOW.js";import{d as s}from"./p-DqBCQRRd.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)}.onNavigation.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot-ring:var(--color-navigation-background)}.onNavigation.selected.sc-ds-bar-nav-action{color:var(--color-navigation-foreground-primary)}.onNavigation.sc-ds-bar-nav-action:focus-visible{outline-color:var(--color-navigation-interaction-focus)}.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",onNavigation:o==="navigation"};return a(e,{key:"57b69eb521518d3b6f704744577eb8a2f03c8c8b"},a("button",{key:"7c143ab8690e9bbcd949606f15b12591d4c64e3a",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"3c6075a72e121a3841372f55f9753c2f72360dca",class:"action-btn__icon-wrap"},a("ds-icon",{key:"31669d5ef1360da0b6627bdc9d194df46474ad6a",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("ds-badge",{key:"45f275b1db47869c9733fad4b9fd1e5e4875db48",class:"action-btn__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}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 l(){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))){i()}break;case"ds-icon":if(!customElements.get(t(o))){s()}break}}))}l();export{d as B,l as d};
+//# sourceMappingURL=p-DrvpsLK6.js.map

package/dist/components/p-TtnqbcnR.js

@@ -0,0 +1,2 @@
+import{S as n,a as t}from"./p-BucV1U6A.js";const o="--_badge-gradient-position";function s(n){const t=n.closest("ds-app-shell");return t?.hasAttribute("gradient")===true}function r(o){const s=o.closest("ds-bar-nav");if(s){const t=s.shadowRoot??s;const o=t.querySelector(".bar-nav");if(o){return{element:o,chromeHost:s,positionVar:n}}}const r=o.closest("ds-panel-nav");if(r){const n=r.shadowRoot??r;const o=n.querySelector(".panel-nav");if(o){return{element:o,chromeHost:r,positionVar:t}}}return null}function e(n){const t=n.trim();if(!t)return{x:0,y:0};const o=t.split(/\s+/);const s=c(o[0]??"0");const r=c(o[1]??"0");return{x:s,y:r}}function c(n){const t=n.match(/^(-?[\d.]+)px$/);if(t)return Number(t[1]);return 0}function a(n,t,o){const s=n.getBoundingClientRect();const r=t.element.getBoundingClientRect();const c=s.left+s.width/2-r.left;const a=s.top+s.height/2-r.top;const{x:i,y:u}=e(o);return`${Math.round(i-c)}px ${Math.round(u-a)}px`}function i(n){const t=getComputedStyle(n.chromeHost);return t.getPropertyValue(n.positionVar).trim()||"0 0"}export{o as B,a as b,r as f,s as i,i as r};
+//# sourceMappingURL=p-TtnqbcnR.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","hasAttribute","findGradientSurface","barHost","root","shadowRoot","element","querySelector","chromeHost","positionVar","SHELL_GRADIENT_POSITION_BAR_VAR","panelHost","SHELL_GRADIENT_POSITION_PANEL_VAR","parseCssBackgroundPosition","value","trimmed","trim","x","y","parts","split","parseLength","token","px","match","Number","badgeGradientPosition","badgeHost","surface","shellPosition","badgeRect","getBoundingClientRect","surfaceRect","anchorX","left","width","anchorY","top","height","Math","round","readShellGradientPosition","styles","getComputedStyle","getPropertyValue"],"sources":["src/wc/nav/badge-gradient-ring.ts"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under `ds-app-shell[gradient]`. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  const shell = from.closest('ds-app-shell');\n  return shell?.hasAttribute('gradient') === true;\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host. */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  const surface = findGradientSurface(badgeHost);\n  if (!surface) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  const shellPosition = readShellGradientPosition(surface);\n  badgeHost.style.setProperty(\n    BADGE_GRADIENT_POSITION_VAR,\n    badgeGradientPosition(badgeHost, surface, shellPosition),\n  );\n}\n"],"mappings":"2CAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GACpC,MAAMC,EAAQD,EAAKE,QAAQ,gBAC3B,OAAOD,GAAOE,aAAa,cAAgB,IAC7C,CAGM,SAAUC,EAAoBJ,GAClC,MAAMK,EAAUL,EAAKE,QAAQ,cAC7B,GAAIG,EAAS,CACX,MAAMC,EAAOD,EAAQE,YAAcF,EACnC,MAAMG,EAAUF,EAAKG,cAAc,YACnC,GAAID,EAAS,CACX,MAAO,CACLA,QAASA,EACTE,WAAYL,EACZM,YAAaC,E,EAKnB,MAAMC,EAAYb,EAAKE,QAAQ,gBAC/B,GAAIW,EAAW,CACb,MAAMP,EAAOO,EAAUN,YAAcM,EACrC,MAAML,EAAUF,EAAKG,cAAc,cACnC,GAAID,EAAS,CACX,MAAO,CACLA,QAASA,EACTE,WAAYG,EACZF,YAAaG,E,EAKnB,OAAO,IACT,CAQM,SAAUC,EAA2BC,GACzC,MAAMC,EAAUD,EAAME,OACtB,IAAKD,EAAS,MAAO,CAAEE,EAAG,EAAGC,EAAG,GAEhC,MAAMC,EAAQJ,EAAQK,MAAM,OAC5B,MAAMH,EAAII,EAAYF,EAAM,IAAM,KAClC,MAAMD,EAAIG,EAAYF,EAAM,IAAM,KAClC,MAAO,CAAEF,IAAGC,IACd,CAEA,SAASG,EAAYC,GACnB,MAAMC,EAAKD,EAAME,MAAM,kBACvB,GAAID,EAAI,OAAOE,OAAOF,EAAG,IACzB,OAAO,CACT,C,SAMgBG,EACdC,EACAC,EACAC,GAEA,MAAMC,EAAYH,EAAUI,wBAC5B,MAAMC,EAAcJ,EAAQtB,QAAQyB,wBACpC,MAAME,EAAUH,EAAUI,KAAOJ,EAAUK,MAAQ,EAAIH,EAAYE,KACnE,MAAME,EAAUN,EAAUO,IAAMP,EAAUQ,OAAS,EAAIN,EAAYK,IACnE,MAAMpB,EAAEA,EAACC,EAAEA,GAAML,EAA2BgB,GAE5C,MAAO,GAAGU,KAAKC,MAAMvB,EAAIgB,QAAcM,KAAKC,MAAMtB,EAAIkB,MACxD,CAGM,SAAUK,EAA0Bb,GACxC,MAAMc,EAASC,iBAAiBf,EAAQpB,YACxC,OAAOkC,EAAOE,iBAAiBhB,EAAQnB,aAAaO,QAAU,KAChE,Q","ignoreList":[]}

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

@@ -59,11 +59,14 @@ export declare class BarNav {
     private resizeObserver;
     private overflowCheckScheduled;
     private intrinsicWidthRetryCount;
+    /** Matches `basePath` once tabs + URL are reconciled for the active section. */
+    private committedSection;
+    /** Section waiting for URL + tabs to catch up after a cross-area navigation. */
+    private pendingSection;
     private get effectiveValue();
     private get activeTabLabel();
     private get activeTabHasDot();
-    onPropsChange(): void;
-    onUrlChange(): void;
+    onHostPropsChange(): void;
     onSelectionChange(): void;
     onMenuOpenChange(open: boolean): void;
     onTabsCollapsedChange(collapsed: boolean, prevCollapsed: boolean | undefined): void;
@@ -87,6 +90,10 @@ export declare class BarNav {
     private syncMenuAnchor;
     private handleMenuSelect;
     private handleMenuClose;
+    /** Batch tabs/basePath/currentUrl updates so URL derivation never runs with a mixed section. */
+    private incomingTabs;
+    private incomingActions;
+    private applyHostProps;
     private syncMenuSections;
     private syncValueFromUrl;
     private selectTab;

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

@@ -3,6 +3,9 @@ export type FadeSurface = 'default' | 'primary' | 'secondary' | 'navigation' | '
 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 {
+    el: HTMLElement;
+    /** When under `ds-app-shell[gradient]`, composites the shell wash over the base fade. */
+    private shellGradientChrome;
     /** Edge where the fade is anchored. */
     side: FadeSide;
     /** Fade depth along the fade axis. Accepts dimension size token names or any CSS length. */
@@ -18,6 +21,8 @@ export declare class Fade {
     background: string;
     /** Controls visibility without removing the element from layout/positioning. */
     visible: boolean;
+    componentDidLoad(): void;
+    private syncShellGradient;
     private resolveSize;
     private resolveBackground;
     render(): any;

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

@@ -0,0 +1,27 @@
+import { type PanelToolsToolId } from './panel-tools-types';
+export declare class PanelTools {
+    el: HTMLElement;
+    /** When false, width animates to 0. */
+    open: boolean;
+    /** Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`. */
+    activeTool: PanelToolsToolId | '';
+    /** Stays true until the close width transition finishes. */
+    private expanded;
+    /** Suppresses width transition until the host has painted its initial open state. */
+    private readyForMotion;
+    private motionEnableGeneration;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /** Two rAFs after the last pre-ready prop change — host bindings may land late on refresh. */
+    private deferMotionEnable;
+    connectedCallback(): void;
+    openChanged(isOpen: boolean): void;
+    activeToolChanged(): void;
+    private handleTransitionEnd;
+    private isShowingContent;
+    private isActiveTool;
+    private headerLabel;
+    render(): any;
+}
+//# sourceMappingURL=PanelTools.d.ts.map

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

@@ -0,0 +1,3 @@
+export type { PanelToolsToolId } from './panel-tools-types';
+export { PANEL_TOOLS_LABELS, PANEL_TOOLS_TOOL_IDS } from './panel-tools-types';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/PanelTools/panel-tools-types.d.ts

@@ -0,0 +1,5 @@
+/** Bar-nav tool ids that map to `ds-panel-tools` views. */
+export type PanelToolsToolId = 'search' | 'messages' | 'stacks' | 'activity' | 'agents';
+export declare const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[];
+export declare const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string>;
+//# sourceMappingURL=panel-tools-types.d.ts.map

package/dist/types/components.d.ts

@@ -26,6 +26,7 @@ import { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 import { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 import { ModalWidth } from "./components/Modal/Modal";
 import { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+import { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 import { RadioOption } from "./components/RadioGroup/RadioGroup";
 import { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 import { SelectOption } from "./components/Select/Select";
@@ -62,6 +63,7 @@ export { MenuItemData, MenuSection } from "./components/Menu/menu-types";
 export { MenuAlign, MenuSide } from "./components/Menu/menu-position";
 export { ModalWidth } from "./components/Modal/Modal";
 export { PanelNavGroup, PanelNavRouterMode, PanelNavUserActionDetail } from "./components/PanelNav/panel-nav-types";
+export { PanelToolsToolId } from "./components/PanelTools/panel-tools-types";
 export { RadioOption } from "./components/RadioGroup/RadioGroup";
 export { ScrollbarVariant } from "./components/Scrollbar/Scrollbar";
 export { SelectOption } from "./components/Select/Select";
@@ -680,6 +682,18 @@ export namespace Components {
          */
         "userName": string;
     }
+    interface DsPanelTools {
+        /**
+          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * @default ''
+         */
+        "activeTool": PanelToolsToolId | '';
+        /**
+          * When false, width animates to 0.
+          * @default false
+         */
+        "open": boolean;
+    }
     interface DsRadioGroup {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
@@ -1465,6 +1479,12 @@ declare global {
         prototype: HTMLDsPanelNavElement;
         new (): HTMLDsPanelNavElement;
     };
+    interface HTMLDsPanelToolsElement extends Components.DsPanelTools, HTMLStencilElement {
+    }
+    var HTMLDsPanelToolsElement: {
+        prototype: HTMLDsPanelToolsElement;
+        new (): HTMLDsPanelToolsElement;
+    };
     interface HTMLDsRadioGroupElementEventMap {
         "dsChange": string;
     }
@@ -1687,6 +1707,7 @@ declare global {
         "ds-modal": HTMLDsModalElement;
         "ds-pagination": HTMLDsPaginationElement;
         "ds-panel-nav": HTMLDsPanelNavElement;
+        "ds-panel-tools": HTMLDsPanelToolsElement;
         "ds-radio-group": HTMLDsRadioGroupElement;
         "ds-scrollbar": HTMLDsScrollbarElement;
         "ds-select": HTMLDsSelectElement;
@@ -2366,6 +2387,18 @@ declare namespace LocalJSX {
          */
         "userName"?: string;
     }
+    interface DsPanelTools {
+        /**
+          * Active tool view — `search`, `messages`, `stacks`, `activity`, or `agents`.
+          * @default ''
+         */
+        "activeTool"?: PanelToolsToolId | '';
+        /**
+          * When false, width animates to 0.
+          * @default false
+         */
+        "open"?: boolean;
+    }
     interface DsRadioGroup {
         "ariaLabel"?: string | undefined;
         "ariaLabelledby"?: string | undefined;
@@ -2953,6 +2986,10 @@ declare namespace LocalJSX {
         "userName": string;
         "userInitial": string;
     }
+    interface DsPanelToolsAttributes {
+        "open": boolean;
+        "activeTool": PanelToolsToolId | '';
+    }
     interface DsRadioGroupAttributes {
         "value": string;
         "direction": 'vertical' | 'horizontal';
@@ -3103,6 +3140,7 @@ declare namespace LocalJSX {
         "ds-modal": Omit<DsModal, keyof DsModalAttributes> & { [K in keyof DsModal & keyof DsModalAttributes]?: DsModal[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `attr:${K}`]?: DsModalAttributes[K] } & { [K in keyof DsModal & keyof DsModalAttributes as `prop:${K}`]?: DsModal[K] } & OneOf<"heading", DsModal["heading"], DsModalAttributes["heading"]>;
         "ds-pagination": Omit<DsPagination, keyof DsPaginationAttributes> & { [K in keyof DsPagination & keyof DsPaginationAttributes]?: DsPagination[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `attr:${K}`]?: DsPaginationAttributes[K] } & { [K in keyof DsPagination & keyof DsPaginationAttributes as `prop:${K}`]?: DsPagination[K] };
         "ds-panel-nav": Omit<DsPanelNav, keyof DsPanelNavAttributes> & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes]?: DsPanelNav[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `attr:${K}`]?: DsPanelNavAttributes[K] } & { [K in keyof DsPanelNav & keyof DsPanelNavAttributes as `prop:${K}`]?: DsPanelNav[K] };
+        "ds-panel-tools": Omit<DsPanelTools, keyof DsPanelToolsAttributes> & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes]?: DsPanelTools[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `attr:${K}`]?: DsPanelToolsAttributes[K] } & { [K in keyof DsPanelTools & keyof DsPanelToolsAttributes as `prop:${K}`]?: DsPanelTools[K] };
         "ds-radio-group": Omit<DsRadioGroup, keyof DsRadioGroupAttributes> & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes]?: DsRadioGroup[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `attr:${K}`]?: DsRadioGroupAttributes[K] } & { [K in keyof DsRadioGroup & keyof DsRadioGroupAttributes as `prop:${K}`]?: DsRadioGroup[K] };
         "ds-scrollbar": Omit<DsScrollbar, keyof DsScrollbarAttributes> & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes]?: DsScrollbar[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `attr:${K}`]?: DsScrollbarAttributes[K] } & { [K in keyof DsScrollbar & keyof DsScrollbarAttributes as `prop:${K}`]?: DsScrollbar[K] };
         "ds-select": Omit<DsSelect, keyof DsSelectAttributes> & { [K in keyof DsSelect & keyof DsSelectAttributes]?: DsSelect[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `attr:${K}`]?: DsSelectAttributes[K] } & { [K in keyof DsSelect & keyof DsSelectAttributes as `prop:${K}`]?: DsSelect[K] };
@@ -3149,6 +3187,7 @@ declare module "@stencil/core" {
             "ds-modal": LocalJSX.IntrinsicElements["ds-modal"] & JSXBase.HTMLAttributes<HTMLDsModalElement>;
             "ds-pagination": LocalJSX.IntrinsicElements["ds-pagination"] & JSXBase.HTMLAttributes<HTMLDsPaginationElement>;
             "ds-panel-nav": LocalJSX.IntrinsicElements["ds-panel-nav"] & JSXBase.HTMLAttributes<HTMLDsPanelNavElement>;
+            "ds-panel-tools": LocalJSX.IntrinsicElements["ds-panel-tools"] & JSXBase.HTMLAttributes<HTMLDsPanelToolsElement>;
             "ds-radio-group": LocalJSX.IntrinsicElements["ds-radio-group"] & JSXBase.HTMLAttributes<HTMLDsRadioGroupElement>;
             "ds-scrollbar": LocalJSX.IntrinsicElements["ds-scrollbar"] & JSXBase.HTMLAttributes<HTMLDsScrollbarElement>;
             "ds-select": LocalJSX.IntrinsicElements["ds-select"] & JSXBase.HTMLAttributes<HTMLDsSelectElement>;

package/dist/types/nav/index.d.ts

@@ -1,6 +1,6 @@
 export type { NavChromeStyle } from './nav-chrome';
 export { NAV_STYLE_HINT_ATTR, readNavStyleAttr, setNavStyleHint, clearNavStyleHint, resolveNavChromeStyle, shouldResyncNavChromeStyle, } from './nav-chrome';
-export { SHELL_BAR_NAV_VT_NAME, parseCssTimeMs, ensureShellNavVtStyle, resolveShellNavRevealOrigin, setShellNavRevealOriginVars, animateShellNavRadialReveal, runShellNavStyleRevealOnReady, } from './shell-view-transition';
+export { SHELL_BAR_NAV_VT_NAME, SHELL_NAV_REVEAL_DURATION_VAR, SHELL_NAV_REVEAL_EASING_VAR, parseCssTimeMs, ensureShellNavVtStyle, resolveShellNavRevealOrigin, setShellNavRevealOriginVars, animateShellNavRadialReveal, runShellNavStyleRevealOnReady, } from './shell-view-transition';
 export type { ShellNavRevealOrigin } from './shell-view-transition';
 export { SHELL_GRADIENT_IMAGE_VAR, SHELL_GRADIENT_SIZE_VAR, SHELL_GRADIENT_POSITION_PANEL_VAR, SHELL_GRADIENT_POSITION_BAR_VAR, SHELL_GRADIENT_OPACITY_VAR, SHELL_GRADIENT_OPACITY, buildShellRadialGradient, shellGradientImageForStyle, shellGradientSize, shellGradientPositionPanel, shellGradientPositionBar, } from './shell-gradient';
 export type { ShellGradientLayout } from './shell-gradient';

package/dist/types/nav/shell-view-transition.d.ts

@@ -2,6 +2,9 @@ import { parseCssTimeMs } from '../utils/resolve-css-time-ms';
 /** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
 export declare const SHELL_BAR_NAV_VT_NAME = "ds-shell-bar-nav";
 export { parseCssTimeMs };
+/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */
+export declare const SHELL_NAV_REVEAL_DURATION_VAR = "--effect-animation-duration-medium-3";
+export declare const SHELL_NAV_REVEAL_EASING_VAR = "--effect-animation-easing-ease-in-out";
 /** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
 export declare function ensureShellNavVtStyle(): void;
 export interface ShellNavRevealOrigin {

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

@@ -1,5 +1,7 @@
 export { clearCssLengthPxCache, resolveCssLengthPx } from './resolve-css-length-px';
 export { parseCssTimeMs, resolveCssTimeMs } from './resolve-css-time-ms';
+export { SCROLL_EDGE_FADE_DEFAULT_SIZE, SCROLL_EDGE_FADE_SIZE_VAR, scrollEdgeFadeMaskImage, scrollEdgeFadeMaskStyle, } from './scroll-edge-fade';
+export type { ScrollEdgeFadeEdge } from './scroll-edge-fade';
 export { TOKEN_DEFAULTS } from './token-defaults';
 export type { TokenDefaultKey } from './token-defaults';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/utils/scroll-edge-fade.d.ts

@@ -0,0 +1,13 @@
+/** CSS custom property for scroll-edge fade depth (dimension token or length). */
+export declare const SCROLL_EDGE_FADE_SIZE_VAR = "--ds-scroll-edge-fade-size";
+export declare const SCROLL_EDGE_FADE_DEFAULT_SIZE = "var(--dimension-size-600)";
+export type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Alpha mask for a scroll container edge — content fades to transparent so
+ * textured backgrounds (gradients, images) show through. Prefer over painted
+ * `ds-fade` overlays on non-flat surfaces.
+ */
+export declare function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string;
+/** Inline style map for a masked scroll region. */
+export declare function scrollEdgeFadeMaskStyle(edge: ScrollEdgeFadeEdge): Record<string, string>;
+//# sourceMappingURL=scroll-edge-fade.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "1.7.4",
+  "version": "1.8.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -69,7 +69,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/badge-gradient-ring.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",

package/src/angular/index.ts

@@ -26,6 +26,7 @@ export const DIRECTIVES = [
   d.DsModal,
   d.DsPagination,
   d.DsPanelNav,
+  d.DsPanelTools,
   d.DsRadioGroup,
   d.DsScrollbar,
   d.DsSelect,

package/src/angular/proxies.ts

@@ -688,6 +688,29 @@ export declare interface DsPanelNav extends Components.DsPanelNav {
 }
 
 
+@ProxyCmp({
+  inputs: ['activeTool', 'open']
+})
+@Component({
+  selector: 'ds-panel-tools',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['activeTool', 'open'],
+  standalone: false
+})
+export class DsPanelTools {
+  protected el: HTMLDsPanelToolsElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsPanelTools extends Components.DsPanelTools {}
+
+
 @ProxyCmp({
   inputs: ['ariaLabel', 'ariaLabelledby', 'direction', 'inactive', 'options', 'value']
 })