npm - @ds-mo/ui - Versions diffs - 0.7.4 → 0.8.0 - Mend

@ds-mo/ui 0.7.4 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/dist/components/ds-checkbox.js +1 -1
package/dist/components/ds-checkbox.js.map +1 -1
package/dist/components/ds-field.js +1 -1
package/dist/components/ds-field.js.map +1 -1
package/dist/components/ds-panel-nav.js +1 -1
package/dist/components/ds-panel-nav.js.map +1 -1
package/dist/components/ds-radio-group.js +1 -1
package/dist/components/ds-scrollbar.js +1 -1
package/dist/components/ds-slider.js +1 -1
package/dist/components/ds-slider.js.map +1 -1
package/dist/components/ds-surface.js +1 -1
package/dist/components/ds-tab-group.js +1 -1
package/dist/components/ds-table.js +1 -1
package/dist/components/ds-table.js.map +1 -1
package/dist/components/ds-tag.js +1 -1
package/dist/components/ds-text.js +1 -1
package/dist/components/ds-toast-provider.js +1 -1
package/dist/components/ds-toggle.js +1 -1
package/dist/components/ds-tooltip.js +1 -1
package/dist/components/{p-DNEqvbOR.js → p-CIMd6yG3.js} +2 -2
package/dist/types/.stencil/PanelNav/PanelNav.d.ts +57 -2
package/dist/types/components.d.ts +37 -4
package/package.json +4 -3
package/src/angular/proxies.ts +2 -2
/package/dist/components/{p-DNEqvbOR.js.map → p-CIMd6yG3.js.map} +0 -0

package/dist/components/ds-checkbox.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"84c5739f9f5b2af0b858bcfa82411e78cb0bc74f",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"f7c77109003ed8591726f2d6e86dfc1c72ef4c2f",class:{box:true,"box--marked":e}},e&&c("span",{key:"dad6614a2efd458a4afaca4080e2a9ec24769a59",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"77e5320933b67254510fef96aa68587c5415d980",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const l=d;export{h as DsCheckbox,l as defineCustomElement};
+import{p as e,H as s,c,h as o,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=c(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return o(i,{key:"2480e971f41cce5470975b6a96ac6d647a61ec1f",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},o("span",{key:"ec3b715dce5ea21ed58c489fb5ca7c0a962d9f79",class:{box:true,"box--marked":e}},e&&o("span",{key:"5052763540795454d42eadee9a6bef98e4ccc7e0",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),o("span",{key:"fb07ed711506e9a7994a24d5f0012621f39e0e2b",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const l=d;export{h as DsCheckbox,l as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","indeterminate","inactive","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","render","isMarked","h","Host","role","String","undefined","tabIndex","class","checkbox","onClick","onKeyDown","box","id","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n height: var(--dimension-size-400);\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n border-radius: var(--dimension-radius-075);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.checkbox:hover {\n background-color: var(--color-interaction-hover);\n}\n\n.checkbox:active {\n background-color: var(--color-interaction-pressed);\n}\n\n.inactive {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* ── Default box indicator ───────────────────────────────────────────────── /\n\n.box {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n border: 1.5px solid var(--color-foreground-secondary);\n border-radius: var(--dimension-radius-050);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: all var(--effect-motion-short-2);\n}\n\n.box--marked {\n background-color: var(--color-foreground-primary);\n border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n color: var(--color-foreground-on-bold-background-primary);\n font-size: 14px;\n line-height: 1;\n font-weight: 700;\n}\n\n/ ── Label ───────────────────────────────────────────────────────────────── */\n\n.checkbox__label {\n flex: 1;\n min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-checkbox',\n styleUrl: 'Checkbox.css',\n scoped: true,\n})\nexport class Checkbox {\n private labelId = `ds-checkbox-label-${++idCounter}`;\n\n @Prop() label!: string;\n @Prop({ mutable: true }) checked: boolean = false;\n @Prop() indeterminate: boolean = false;\n @Prop() inactive: boolean = false;\n\n @Event() dsChange!: EventEmitter<boolean>;\n\n private handleActivate = () => {\n if (this.inactive) return;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.handleActivate();\n }\n };\n\n render() {\n const isMarked = this.checked \|\| this.indeterminate;\n\n return (\n <Host\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}\n aria-disabled={this.inactive \|\| undefined}\n aria-labelledby={this.labelId}\n tabIndex={this.inactive ? -1 : 0}\n class={{ checkbox: true, inactive: this.inactive }}\n onClick={this.handleActivate}\n onKeyDown={this.handleKeyDown}\n >\n <span class={{ box: true, 'box--marked': isMarked }}>\n {isMarked && (\n <span class=\"checkmark\" aria-hidden=\"true\">\n {this.indeterminate ? '−' : '✓'}\n </span>\n )}\n </span>\n <span id={this.labelId} class=\"text-body-medium checkbox__label\">\n {this.label}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"~~kEAAA~~,MAAMA,EAAc,IAAM,mmCCE1B,IAAIC,EAAY,E,MAOHC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAMUC,KAAAC,QAAU,uBAAuBP,IAGhBM,KAAAE,QAAmB,MACpCF,KAAAG,cAAyB,MACzBH,KAAAI,SAAoB,MAIpBJ,KAAAK,eAAiB,KACvB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKE,SAAWF,KAAKE,QACrBF,KAAKM,SAASC,KAAKP,KAAKE,QAAQ,EAG1BF,KAAAQ,cAAiBC,IACvB,GAAIA,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFX,KAAKK,gB,EA+BV,CA3BC,MAAAO,GACE,MAAMC,EAAWb,KAAKE,SAAWF,KAAKG,cAEtC,OACEW,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,WAAU,eACDhB,KAAKG,cAAgB,QAAUc,OAAOjB,KAAKE,SAAQ,gBAClDF,KAAKI,UAAYc,UAAS,kBACxBlB,KAAKC,QACtBkB,SAAUnB,KAAKI,UAAW,EAAK,EAC/BgB,MAAO,CAAEC,SAAU,KAAMjB,SAAUJ,KAAKI,UACxCkB,QAAStB,KAAKK,eACdkB,UAAWvB,KAAKQ,eAEhBM,EAAA,QAAAJ,IAAA,2CAAMU,MAAO,CAAEI,IAAK,KAAM,cAAeX,IACtCA,GACCC,EAAA,QAAAJ,IAAA,2CAAMU,MAAM,YAAW,cAAa,QACjCpB,KAAKG,cAAgB,IAAM,MAIlCW,EAAA,QAAAJ,IAAA,2CAAMe,GAAIzB,KAAKC,QAASmB,MAAM,oCAC3BpB,KAAK0B,O","ignoreList":[]}
1	+ {"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","indeterminate","inactive","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","render","isMarked","h","Host","role","String","undefined","tabIndex","class","checkbox","onClick","onKeyDown","box","id","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-075);\n height: var(--dimension-size-400);\n box-sizing: border-box;\n cursor: pointer;\n user-select: none;\n border-radius: var(--dimension-radius-075);\n transition: background-color var(--effect-motion-short-2);\n}\n\n.checkbox:hover {\n background-color: var(--color-interaction-hover);\n}\n\n.checkbox:active {\n background-color: var(--color-interaction-pressed);\n}\n\n.inactive {\n cursor: not-allowed;\n opacity: 0.5;\n pointer-events: none;\n}\n\n/* ── Default box indicator ───────────────────────────────────────────────── /\n\n.box {\n width: 20px;\n height: 20px;\n flex-shrink: 0;\n border: 1.5px solid var(--color-foreground-secondary);\n border-radius: var(--dimension-radius-050);\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n transition: all var(--effect-motion-short-2);\n}\n\n.box--marked {\n background-color: var(--color-foreground-primary);\n border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n color: var(--color-foreground-on-bold-background-primary);\n font-size: 14px;\n line-height: 1;\n font-weight: 700;\n}\n\n/ ── Label ───────────────────────────────────────────────────────────────── */\n\n.checkbox__label {\n flex: 1;\n min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-checkbox',\n styleUrl: 'Checkbox.css',\n scoped: true,\n})\nexport class Checkbox {\n private labelId = `ds-checkbox-label-${++idCounter}`;\n\n @Prop() label!: string;\n @Prop({ mutable: true }) checked: boolean = false;\n @Prop() indeterminate: boolean = false;\n @Prop() inactive: boolean = false;\n\n @Event() dsChange!: EventEmitter<boolean>;\n\n private handleActivate = () => {\n if (this.inactive) return;\n this.checked = !this.checked;\n this.dsChange.emit(this.checked);\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.handleActivate();\n }\n };\n\n render() {\n const isMarked = this.checked \|\| this.indeterminate;\n\n return (\n <Host\n role=\"checkbox\"\n aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}\n aria-disabled={this.inactive \|\| undefined}\n aria-labelledby={this.labelId}\n tabIndex={this.inactive ? -1 : 0}\n class={{ checkbox: true, inactive: this.inactive }}\n onClick={this.handleActivate}\n onKeyDown={this.handleKeyDown}\n >\n <span class={{ box: true, 'box--marked': isMarked }}>\n {isMarked && (\n <span class=\"checkmark\" aria-hidden=\"true\">\n {this.indeterminate ? '−' : '✓'}\n </span>\n )}\n </span>\n <span id={this.labelId} class=\"text-body-medium checkbox__label\">\n {this.label}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"6DAAA,MAAMA,EAAc,IAAM,mmCCE1B,IAAIC,EAAY,E,MAOHC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAMUC,KAAAC,QAAU,uBAAuBP,IAGhBM,KAAAE,QAAmB,MACpCF,KAAAG,cAAyB,MACzBH,KAAAI,SAAoB,MAIpBJ,KAAAK,eAAiB,KACvB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKE,SAAWF,KAAKE,QACrBF,KAAKM,SAASC,KAAKP,KAAKE,QAAQ,EAG1BF,KAAAQ,cAAiBC,IACvB,GAAIA,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFX,KAAKK,gB,EA+BV,CA3BC,MAAAO,GACE,MAAMC,EAAWb,KAAKE,SAAWF,KAAKG,cAEtC,OACEW,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,WAAU,eACDhB,KAAKG,cAAgB,QAAUc,OAAOjB,KAAKE,SAAQ,gBAClDF,KAAKI,UAAYc,UAAS,kBACxBlB,KAAKC,QACtBkB,SAAUnB,KAAKI,UAAW,EAAK,EAC/BgB,MAAO,CAAEC,SAAU,KAAMjB,SAAUJ,KAAKI,UACxCkB,QAAStB,KAAKK,eACdkB,UAAWvB,KAAKQ,eAEhBM,EAAA,QAAAJ,IAAA,2CAAMU,MAAO,CAAEI,IAAK,KAAM,cAAeX,IACtCA,GACCC,EAAA,QAAAJ,IAAA,2CAAMU,MAAM,YAAW,cAAa,QACjCpB,KAAKG,cAAgB,IAAM,MAIlCW,EAAA,QAAAJ,IAAA,2CAAMe,GAAIzB,KAAKC,QAASmB,MAAM,oCAC3BpB,KAAK0B,O","ignoreList":[]}

package/dist/components/ds-field.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as d,a as l,t}from"./index.js";const i=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let c=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++c}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"871d99b66b8c173170bfd8af8946a136a8480376"},d("div",{key:"d124342c56805d07deb572cbbce189a39107fe75",class:"field"},d("label",{key:"e51514e6cf35064f8d652b5fef5384ab5970295e",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"dd7478ebc32c7d177cb555367069b755c7f0c27a"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
+import{p as e,H as s,h as d,a as l,t as c}from"./index.js";const t=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"53d7bc39c447c8344f1e7ee4063bb6b2781fdc64"},d("div",{key:"0ec8fe3094f115d2244e33ff1ecdba6fbbc4e813",class:"field"},d("label",{key:"a311af00cdad0edc0c33bf6e7102437504232a9a",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"e50d69395047fea3441db1e1b0e42c0716cae11c"})))}static get style(){return t()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(c(e))){customElements.define(c(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["fieldCss","fieldCounter","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","resolvedId","render","id","fieldId","h","Host","key","class","htmlFor","label"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n}\n\n.field__label {\n display: block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nlet fieldCounter = 0;\n\n@Component({\n tag: 'ds-field',\n styleUrl: 'Field.css',\n scoped: true,\n})\nexport class Field {\n @Prop() label!: string;\n /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */\n @Prop() fieldId: string \| undefined;\n\n private resolvedId = `ds-field-${++fieldCounter}`;\n\n render() {\n const id = this.fieldId \|\| this.resolvedId;\n return (\n <Host>\n <div class=\"field\">\n <label class=\"text-body-small-emphasis field__label\" htmlFor={id}>{this.label}</label>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"~~sDAAA~~,MAAMA,EAAW,IAAM,6JCEvB,IAAIC,EAAe,E,MAONC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAUUC,KAAAC,WAAa,cAAcP,GAapC,CAXC,MAAAQ,GACE,MAAMC,EAAKH,KAAKI,SAAWJ,KAAKC,WAChC,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,wCAAwCC,QAASN,GAAKH,KAAKU,OACxEL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
1	+ {"version":3,"names":["fieldCss","fieldCounter","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","resolvedId","render","id","fieldId","h","Host","key","class","htmlFor","label"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.field {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n}\n\n.field__label {\n display: block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nlet fieldCounter = 0;\n\n@Component({\n tag: 'ds-field',\n styleUrl: 'Field.css',\n scoped: true,\n})\nexport class Field {\n @Prop() label!: string;\n /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */\n @Prop() fieldId: string \| undefined;\n\n private resolvedId = `ds-field-${++fieldCounter}`;\n\n render() {\n const id = this.fieldId \|\| this.resolvedId;\n return (\n <Host>\n <div class=\"field\">\n <label class=\"text-body-small-emphasis field__label\" htmlFor={id}>{this.label}</label>\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAW,IAAM,6JCEvB,IAAIC,EAAe,E,MAONC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAUUC,KAAAC,WAAa,cAAcP,GAapC,CAXC,MAAAQ,GACE,MAAMC,EAAKH,KAAKI,SAAWJ,KAAKC,WAChC,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,wCAAwCC,QAASN,GAAKH,KAAKU,OACxEL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ds-panel-nav.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as a,H as n,c as e,h as i,a as t,t as o}from"./index.js";import{d as s}from"./p-Bi2mMcOi.js";import{d as r}from"./p-DNEqvbOR.js";const d=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),     min-width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),     background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease),     border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);font-family:var(--typography-font-family, system-ui)}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{text-transform:uppercase;color:var(--_nav-fg-tertiary);padding:0 var(--dimension-space-050, 4px);margin-bottom:var(--dimension-space-025, 2px);white-space:nowrap;overflow:hidden;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px)}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot-wrap.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px)}.panel-nav__item-dot.sc-ds-panel-nav{width:var(--dimension-space-075, 6px);height:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-full, 999px);background:var(--_nav-dot);flex-shrink:0;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__item-dot--mini.sc-ds-panel-nav{position:absolute;top:0;right:0;flex-shrink:unset;box-shadow:0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item.sc-ds-panel-nav{justify-content:center;padding:0 var(--dimension-space-075, 6px);gap:0}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav,.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav,.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav:not(.panel-nav__item-dot--mini){display:none}.panel-nav__footer.sc-ds-panel-nav{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050, 4px);padding:var(--_nav-padding-y) var(--_nav-padding-x);flex-shrink:0;position:relative}.panel-nav__footer.sc-ds-panel-nav::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:calc(var(--dimension-base, 8px) * 6);background:linear-gradient(to bottom, transparent, var(--_nav-bg));pointer-events:none;opacity:1;transition:opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--at-bottom.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav::before{opacity:0}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{flex-direction:column;align-items:center;gap:var(--dimension-space-050, 4px)}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half, 9999px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;flex-shrink:0;box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--dashboard.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--settings.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{flex:1;width:auto}.panel-nav__footer-user.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-align:right}.panel-nav__footer-user-mini.sc-ds-panel-nav{position:relative}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}`;const l=a(class a extends n{constructor(a){super();if(a!==false){this.__registerHost()}this.dsNavSelect=e(this,"dsNavSelect");this.dsNavToggle=e(this,"dsNavToggle");this.dsNavFooterAction=e(this,"dsNavFooterAction");this.variant="dashboard";this.groups="[]";this.activeId="";this.collapsed=false;this.userName="";this.userInitial="";this.parsedGroups=[];this.atBottom=false}onGroupsChange(a){try{this.parsedGroups=JSON.parse(a)}catch{this.parsedGroups=[]}}componentWillLoad(){this.onGroupsChange(this.groups)}componentDidLoad(){this.checkScroll()}checkScroll(){const a=this.el.querySelector(".panel-nav__body");if(!a)return;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleBodyScroll(a){const n=a.target;const e=n.scrollHeight-n.scrollTop-n.clientHeight;this.atBottom=e<2}handleItemClick(a){this.dsNavSelect.emit(a)}handleToggle(){this.dsNavToggle.emit(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}render(){const a=this.variant==="dashboard";const{collapsed:n,userName:e,userInitial:o}=this;const s={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":n,"panel-nav--at-bottom":this.atBottom};return i(t,{key:"3b51aac976c81f55e0bea002e1606efa036d5378"},i("nav",{key:"345840af650f7e85a7f9f0e15ca4e2911ca71d63",class:s,"aria-label":a?"Main navigation":"Settings navigation"},i("div",{key:"a18e6ef59247d2d79f2e5428b20bf32b9266503c",class:"panel-nav__header"},i("button",{key:"c7be2e6061021250d191b59dfc49828c2668718d",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":n?"Expand navigation":"Collapse navigation"},i("span",{key:"4a14fa4ca4ca17a7b1db2c4634c5957b98ec2d87",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"7f5c7e76cd7a083076faa959e7ca9b0875998f9d",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{key:"df82fe5f08081ff5c5d6adbccd9098a3de2472ea",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),i("span",{key:"d8c4b3af4857659589365abd9c0f043e8feba440",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"8706adef46373dbe091e7b08433b0732eea44ff9",name:n?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"b450d7bc3c4135587c3867cfd1073ce3e89aa868",class:"panel-nav__body",onScroll:a=>this.handleBodyScroll(a)},this.parsedGroups.map((a=>i("div",{class:"panel-nav__group"},a.label&&!n&&i("span",{class:"panel-nav__group-label"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label)),a.items.map((a=>{const e=a.id===this.activeId;return i("button",{type:"button",class:{"panel-nav__item":true,"panel-nav__item--active":e},"aria-current":e?"page":undefined,title:n?a.label:undefined,onClick:()=>this.handleItemClick(a.id)},i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:a.icon,size:"md",color:"inherit",flag:a.flag}),a.dot&&n&&i("span",{class:"panel-nav__item-dot panel-nav__item-dot--mini","aria-hidden":"true"})),!n&&i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:e?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},a.label))),a.dot&&!n&&i("span",{class:"panel-nav__item-dot-wrap","aria-hidden":"true"},i("span",{class:"panel-nav__item-dot"})))})))))),i("div",{key:"6f2118c33fe3792b746101135af5fb174fa54a68",class:"panel-nav__footer"},i("button",{key:"5a7b217bebb5bcf746d3bcb04463d90c0316b2dc",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},i("ds-icon",{key:"4fbe7016de4d5536f7e0b22129d2af5f450fac99",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),n?i("button",{type:"button",class:"panel-nav__footer-btn panel-nav__footer-user-mini",title:e,"aria-label":`User: ${e}`},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("span",{class:"panel-nav__user-initial","aria-hidden":"true"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},o))):i("button",{type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":`User menu for ${e}`},i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-body-medium-emphasis",color:"inherit"},e))),i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"}))))))}get el(){return this}static get watchers(){return{groups:[{onGroupsChange:0}]}}static get style(){return d()}},[2,"ds-panel-nav",{variant:[1],groups:[1],activeId:[1,"active-id"],collapsed:[4],userName:[1,"user-name"],userInitial:[1,"user-initial"],parsedGroups:[32],atBottom:[32]},undefined,{groups:[{onGroupsChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const a=["ds-panel-nav","ds-icon","ds-text"];a.forEach((a=>{switch(a){case"ds-panel-nav":if(!customElements.get(o(a))){customElements.define(o(a),l)}break;case"ds-icon":if(!customElements.get(o(a))){s()}break;case"ds-text":if(!customElements.get(o(a))){r()}break}}))}c();const v=l;const p=c;export{v as DsPanelNav,p as defineCustomElement};
+import{p as a,H as e,c as n,h as t,a as i,t as o}from"./index.js";import{d as s}from"./p-Bi2mMcOi.js";import{d as r}from"./p-CIMd6yG3.js";const l=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{text-transform:uppercase;color:var(--_nav-fg-tertiary);padding:0 var(--dimension-space-050, 4px);margin-bottom:var(--dimension-space-025, 2px);white-space:nowrap;overflow:hidden;max-height:2em;opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     margin-bottom var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;width:var(--dimension-space-075, 6px);height:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-full, 999px);background:var(--_nav-dot);box-shadow:0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     box-shadow var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:6px;top:6px}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;margin-bottom:0;pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     margin-bottom var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer.sc-ds-panel-nav::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:calc(var(--dimension-base, 8px) * 6);background:linear-gradient(to bottom, transparent, var(--_nav-bg));pointer-events:none;opacity:1;transition:opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--at-bottom.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav::before{opacity:0}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half, 9999px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--dashboard.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--settings.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;const d=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.variant="dashboard";this.groups="[]";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(a){try{this.parsedGroups=JSON.parse(a)}catch{this.parsedGroups=[]}this.syncRovingIndex()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}componentWillLoad(){if(this.storageKey){try{const a=localStorage.getItem(this.storageKey);if(a!==null)this.collapsed=a==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver()}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const a=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){a?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=e=>{if(e.propertyName==="width"){this.isAnimating=false;a?.removeEventListener("transitionend",this.transitionEndHandler)}};a?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}let a;let e=0;for(const n of this.getAllItems()){if(n.href&&this.currentUrl.startsWith(n.href)&&n.href.length>e){a=n;e=n.href.length}}this.urlDerivedActiveId=a?.id??""}applyToggle(a){this.dsNavToggle.emit(a);if(this.storageKey){this.collapsed=a;try{localStorage.setItem(this.storageKey,String(a))}catch{}}}getAllItems(){return this.parsedGroups.flatMap((a=>a.items))}syncRovingIndex(){const a=this.getAllItems().findIndex((a=>a.id===this.effectiveActiveId));this.rovingIndex=a>=0?a:0}handleItemKeyDown(a,e){const n=this.getAllItems().length;let t=e;switch(a.key){case"ArrowDown":a.preventDefault();t=(e+1)%n;break;case"ArrowUp":a.preventDefault();t=(e-1+n)%n;break;case"Home":a.preventDefault();t=0;break;case"End":a.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const a=this.el.querySelector(".panel-nav__body");if(!a)return;const e=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=e<2}handleBodyScroll(a){const e=a.target;const n=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=n<2}handleItemClick(a){this.dsNavSelect.emit(a)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(a){a.preventDefault();a.stopPropagation();const e=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=a.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=a=>{const n=a.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!e&&n<-8){this.applyToggle(true);this.didSnap=true}else if(e&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!e)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(a,e,n){const i=a.id===this.effectiveActiveId;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:a.icon,size:"md",color:"inherit",flag:a.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},a.label))),a.dot&&t("span",{class:"panel-nav__item-dot","aria-hidden":"true"})];const s={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?a.label:undefined,tabIndex:e===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(a.id),onKeyDown:a=>this.handleItemKeyDown(a,e),onFocus:()=>{this.rovingIndex=e}};return a.href?t("a",{...s,href:a.href},o):t("button",{...s,type:"button"},o)}render(){const a=this.variant==="dashboard";const e=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:o}=this;const s={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":e,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"44e0bb244829d3df63e246373469c57d2de40d64",style:{display:"block",position:"relative"}},t("nav",{key:"46856fc3c5e2cb5341c916e45d1a7b871d6225a8",class:s,"aria-label":a?"Main navigation":"Settings navigation"},t("div",{key:"59d83b742058b1ff70155eee8c4f33953cb65e1f",class:"panel-nav__header"},t("button",{key:"24a0e3bad0986e6c074833163ac573d4855f4d43",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":e?"Expand navigation":"Collapse navigation","aria-expanded":e?"false":"true"},t("span",{key:"9561f03443419ac7c8783af99ea763d9b397c905",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"6c26fc494042ee13f171493badaa0ad03260e9d6",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"29cbf2b9039b58de07333f90b8189a7125498c97",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"dc35fd85851b16c90439b8e015a25dc013421975",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"ad1a470183e94844245c0d93ba6a9451830f445f",name:e?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"66bbb51740b20e60d975413752da2fbe65f16063",class:"panel-nav__body",onScroll:a=>this.handleBodyScroll(a)},(()=>{let a=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label)),n.items.map((n=>this.renderNavItem(n,a++,e))))))})()),t("div",{key:"daae3e83ad3b945d5480d2c0b09f3f74b38a9604",class:"panel-nav__footer"},t("button",{key:"e2876afecfab631d00e466e66ed3748d51a67249",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"8938dccb48417cfedae256bdc2afc2ac43ff5e58",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"38de37144be2e84234f9c460dab556d4274118b2",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":e?`User: ${n}`:`User menu for ${n}`},t("span",{key:"59b65c4e2ced6e2acb62eae491392b44431a1429",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"c8b9cd642dfe2bf104ea280d33c304795d075281",class:"panel-nav__item-label-text"},t("ds-text",{key:"db0168fcdc56276f96c0e88241573d8a9cce73d4",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"b4c9af4b3a500d38c21a9c313a8a8596211e8397",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"f7d6fe5052b8e1d203bc4ed608f32146a74dbc59",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"26fa53376d882984fe60cd64729f43b68258c64e",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"a38a6d373dc1ea932c85a14beb1c54d4acf1c3fc",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"353c3019fbf72bbf0739e47caa98f79ecf52b1b6",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"46d0201df56c6ca01380f6f69badd850fe52e853",class:"panel-nav__user-initial"},t("ds-text",{key:"1169443c0a8205cfc2b718aa7affdc3d8ce2cf9b",as:"span",variant:"text-caption-emphasis",color:"inherit"},o))))))),!this.viewportNarrow&&t("div",{key:"8af05d483b922466faa307e0ef3e9df19d30b333",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:a=>this.handleResizeHandleMouseDown(a),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}]}}static get style(){return l()}},[2,"ds-panel-nav",{variant:[1],groups:[1],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const a=["ds-panel-nav","ds-icon","ds-text"];a.forEach((a=>{switch(a){case"ds-panel-nav":if(!customElements.get(o(a))){customElements.define(o(a),d)}break;case"ds-icon":if(!customElements.get(o(a))){s()}break;case"ds-text":if(!customElements.get(o(a))){r()}break}}))}c();const v=d;const p=c;export{v as DsPanelNav,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map

package/dist/components/ds-panel-nav.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["panelNavCss","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","groups","activeId","collapsed","userName","userInitial","parsedGroups","atBottom","onGroupsChange","val","JSON","parse","componentWillLoad","componentDidLoad","checkScroll","body","el","querySelector","remaining","scrollHeight","scrollTop","clientHeight","handleBodyScroll","e","target","handleItemClick","id","dsNavSelect","emit","handleToggle","dsNavToggle","handleFooterAction","dsNavFooterAction","render","isDashboard","navCls","h","Host","key","class","type","onClick","viewBox","fill","xmlns","d","name","size","color","onScroll","map","group","label","as","items","item","isActive","undefined","title","icon","flag","dot"],"sources":["src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/* ── Theme variables ──────────────────────────────────────────────────────── /\n\n.panel-nav {\n / ─ Sizes ─ /\n --_nav-width: 200px;\n --_nav-width-collapsed: 48px;\n --_nav-item-height: var(--dimension-size-400, 32px);\n --_nav-padding-x: var(--dimension-space-100, 8px);\n --_nav-padding-y: var(--dimension-space-100, 8px);\n\n / ─ Colours – dashboard defaults ─ /\n --_nav-bg: var(--color-navigation-background);\n --_nav-border: var(--color-navigation-border-tertiary);\n --_nav-divider: var(--color-navigation-divider);\n --_nav-fg-primary: var(--color-navigation-foreground-primary);\n --_nav-fg-secondary: var(--color-navigation-foreground-secondary);\n --_nav-fg-tertiary: var(--color-navigation-foreground-tertiary);\n --_nav-hover: var(--color-navigation-interaction-hover);\n --_nav-pressed: var(--color-navigation-interaction-pressed);\n --_nav-focus: var(--color-navigation-interaction-focus);\n --_nav-dot: var(--color-navigation-foreground-brand);\n}\n\n/ ── Settings overrides ──────────────────────────────────────────────────── /\n\n.panel-nav--settings {\n --_nav-bg: var(--color-background-secondary);\n --_nav-border: var(--color-border-tertiary);\n --_nav-divider: var(--color-border-tertiary);\n --_nav-fg-primary: var(--color-foreground-primary);\n --_nav-fg-secondary: var(--color-foreground-secondary);\n --_nav-fg-tertiary: var(--color-foreground-tertiary);\n --_nav-hover: var(--color-interaction-hover);\n --_nav-pressed: var(--color-interaction-pressed);\n --_nav-focus: var(--color-interaction-focus);\n --_nav-dot: var(--color-foreground-bold-brand);\n}\n\n/ ── Shell ───────────────────────────────────────────────────────────────── /\n\n.panel-nav {\n display: flex;\n flex-direction: column;\n width: var(--_nav-width);\n min-width: var(--_nav-width);\n height: 100%;\n background: var(--_nav-bg);\n border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n box-sizing: border-box;\n overflow: hidden;\n transition:\n width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),\n min-width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),\n background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease),\n border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav--collapsed {\n width: var(--_nav-width-collapsed);\n min-width: var(--_nav-width-collapsed);\n}\n\n/ ── Header ──────────────────────────────────────────────────────────────── /\n\n.panel-nav__header {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-100, 8px);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n transition: border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n.panel-nav__header-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-primary);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n/ Interaction pseudo-element /\n.panel-nav__header-btn::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n pointer-events: none;\n}\n\n.panel-nav__header-btn:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover /\n.panel-nav__header-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n transition: opacity var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n.panel-nav__m-mark {\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n display: block;\n}\n\n/ Toggle icon — hidden by default, revealed on hover /\n.panel-nav__header-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/ ── Scrollable body ─────────────────────────────────────────────────────── /\n\n.panel-nav__body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-200, 16px);\n padding: var(--dimension-space-100, 8px);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/ ── Group ───────────────────────────────────────────────────────────────── /\n\n.panel-nav__group {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n / Typography via ds-text (text-caption-emphasis) /\n text-transform: uppercase;\n color: var(--_nav-fg-tertiary);\n padding: 0 var(--dimension-space-050, 4px);\n margin-bottom: var(--dimension-space-025, 2px);\n white-space: nowrap;\n overflow: hidden;\n transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n/ ── Item ────────────────────────────────────────────────────────────────── /\n\n.panel-nav__item {\n all: unset;\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: 0 var(--dimension-space-075, 6px);\n height: var(--dimension-size-400, 32px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n position: relative;\n box-sizing: border-box;\n width: 100%;\n user-select: none;\n transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n/ Interaction layer /\n.panel-nav__item::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n pointer-events: none;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__item:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── /\n\n.panel-nav__item--active {\n color: var(--_nav-fg-primary);\n / Bold typography via ds-text (text-body-medium-emphasis) on the label /\n}\n\n/ ── Item icon ───────────────────────────────────────────────────────────── /\n\n.panel-nav__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n position: relative;\n}\n\n/ ── Item label ──────────────────────────────────────────────────────────── /\n\n.panel-nav__item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n height: var(--typography-lineheight-md, 20px);\n line-height: var(--typography-lineheight-md, 20px);\n}\n\n.panel-nav__item-label-text {\n padding: 0 var(--dimension-space-025, 2px);\n}\n\n/ ── Item notification dot ───────────────────────────────────────────────── /\n\n.panel-nav__item-dot-wrap {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n}\n\n.panel-nav__item-dot {\n width: var(--dimension-space-075, 6px);\n height: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-full, 999px);\n background: var(--_nav-dot);\n flex-shrink: 0;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n.panel-nav__item-dot--mini {\n position: absolute;\n top: 0;\n right: 0;\n flex-shrink: unset;\n box-shadow: 0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);\n}\n\n/ ── Collapsed: centre the icon ──────────────────────────────────────────── /\n\n.panel-nav--collapsed .panel-nav__item {\n justify-content: center;\n padding: 0 var(--dimension-space-075, 6px);\n gap: 0;\n}\n\n.panel-nav--collapsed .panel-nav__item-label,\n.panel-nav--collapsed .panel-nav__group-label,\n.panel-nav--collapsed .panel-nav__item-dot:not(.panel-nav__item-dot--mini) {\n display: none;\n}\n\n/ ── Footer ──────────────────────────────────────────────────────────────── /\n\n.panel-nav__footer {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: var(--_nav-padding-y) var(--_nav-padding-x);\n flex-shrink: 0;\n position: relative;\n}\n\n/ Gradient fade — floats above the footer, masks content scrolling under it /\n.panel-nav__footer::before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 0;\n right: 0;\n height: calc(var(--dimension-base, 8px) 6);\n background: linear-gradient(to bottom, transparent, var(--_nav-bg));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav--at-bottom .panel-nav__footer::before {\n opacity: 0;\n}\n\n/* Collapsed footer: stack gear + user vertically /\n.panel-nav--collapsed .panel-nav__footer {\n flex-direction: column;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n}\n\n/ ── Footer icon button (gear / dashboard) ───────────────────────────────── /\n\n.panel-nav__footer-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-half, 9999px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n background: transparent;\n transition:\n background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n/ Dashboard: hover previews settings surface /\n.panel-nav--dashboard .panel-nav__footer-btn:hover {\n background: var(--color-background-secondary);\n color: var(--color-foreground-secondary);\n transition: none;\n}\n\n/ Settings: hover previews dashboard nav surface /\n.panel-nav--settings .panel-nav__footer-btn:hover {\n background: var(--color-navigation-background);\n color: var(--color-navigation-foreground-secondary);\n transition: none;\n}\n\n/ ── Footer user (expanded) — panel-nav__item base, icon on right ────────── /\n\n.panel-nav__footer-user {\n flex: 1;\n width: auto;\n}\n\n.panel-nav__footer-user .panel-nav__item-label {\n text-align: right;\n}\n\n/ ── Footer user mini (collapsed) — avatar icon + overlaid initial ───────── /\n\n.panel-nav__footer-user-mini {\n position: relative;\n}\n\n.panel-nav__user-initial {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--_nav-fg-secondary);\n text-transform: uppercase;\n line-height: 1;\n pointer-events: none;\n transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\n\nexport type PanelNavVariant = 'dashboard' \| 'settings';\n\nexport interface PanelNavItem {\n id: string;\n icon: string;\n label: string;\n /* Show a notification dot badge on the item /\n dot?: boolean;\n flag?: boolean;\n}\n\nexport interface PanelNavGroup {\n id?: string;\n label?: string;\n items: PanelNavItem[];\n}\n\n@Component({\n tag: 'ds-panel-nav',\n styleUrl: 'PanelNav.css',\n scoped: true,\n})\nexport class PanelNav {\n /* Visual variant: `dashboard` = always-dark surface, `settings` = light surface /\n @Prop() variant: PanelNavVariant = 'dashboard';\n\n /* JSON string of `PanelNavGroup[]` /\n @Prop() groups: string = '[]';\n\n /* ID of the currently active/selected nav item /\n @Prop() activeId: string = '';\n\n /* Whether the nav is in collapsed (icon-only) state /\n @Prop() collapsed: boolean = false;\n\n /* Display name for the footer user section /\n @Prop() userName: string = '';\n\n /* Single character shown in the collapsed avatar /\n @Prop() userInitial: string = '';\n\n /* Emitted when a nav item is clicked. Detail = the item's `id`. /\n @Event() dsNavSelect!: EventEmitter<string>;\n\n /* Emitted when the collapse toggle is clicked. Detail = new collapsed state. /\n @Event() dsNavToggle!: EventEmitter<boolean>;\n\n /* Emitted when the footer left button (gear / dashboard) is clicked. /\n @Event() dsNavFooterAction!: EventEmitter<void>;\n\n @Element() el!: HTMLElement;\n\n @State() private parsedGroups: PanelNavGroup[] = [];\n @State() private atBottom = false;\n\n @Watch('groups')\n onGroupsChange(val: string) {\n try {\n this.parsedGroups = JSON.parse(val);\n } catch {\n this.parsedGroups = [];\n }\n }\n\n componentWillLoad() {\n this.onGroupsChange(this.groups);\n }\n\n componentDidLoad() {\n this.checkScroll();\n }\n\n private checkScroll() {\n const body = this.el.querySelector('.panel-nav__body') as HTMLElement \| null;\n if (!body) return;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleBodyScroll(e: Event) {\n const body = e.target as HTMLElement;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleItemClick(id: string) {\n this.dsNavSelect.emit(id);\n }\n\n private handleToggle() {\n this.dsNavToggle.emit(!this.collapsed);\n }\n\n private handleFooterAction() {\n this.dsNavFooterAction.emit();\n }\n\n render() {\n const isDashboard = this.variant === 'dashboard';\n const { collapsed, userName, userInitial } = this;\n\n const navCls: Record<string, boolean> = {\n 'panel-nav': true,\n 'panel-nav--dashboard': isDashboard,\n 'panel-nav--settings': !isDashboard,\n 'panel-nav--collapsed': collapsed,\n 'panel-nav--at-bottom': this.atBottom,\n };\n\n return (\n <Host>\n <nav class={navCls} aria-label={isDashboard ? 'Main navigation' : 'Settings navigation'}>\n\n {/ ── Header: Motive logo, reveals collapse toggle on hover ── /}\n <div class=\"panel-nav__header\">\n <button\n type=\"button\"\n class=\"panel-nav__header-btn\"\n onClick={() => this.handleToggle()}\n aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n >\n {/ Motive M mark — fades out on hover to reveal collapse toggle /}\n <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n {/ Collapse / expand icon — revealed on hover via CSS /}\n <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n <ds-icon\n name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n size=\"md\"\n color=\"inherit\"\n />\n </span>\n </button>\n </div>\n\n {/ ── Scrollable body ── /}\n <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n {this.parsedGroups.map(group => (\n <div class=\"panel-nav__group\">\n {group.label && !collapsed && (\n <span class=\"panel-nav__group-label\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {group.label}\n </ds-text>\n </span>\n )}\n {group.items.map(item => {\n const isActive = item.id === this.activeId;\n return (\n <button\n type=\"button\"\n class={{\n 'panel-nav__item': true,\n 'panel-nav__item--active': isActive,\n }}\n aria-current={isActive ? 'page' : undefined}\n title={collapsed ? item.label : undefined}\n onClick={() => this.handleItemClick(item.id)}\n >\n <span class=\"panel-nav__item-icon\">\n <ds-icon\n name={item.icon}\n size=\"md\"\n color=\"inherit\"\n flag={item.flag}\n />\n {item.dot && collapsed && (\n <span class=\"panel-nav__item-dot panel-nav__item-dot--mini\" aria-hidden=\"true\" />\n )}\n </span>\n {!collapsed && (\n <span class=\"panel-nav__item-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text\n as=\"span\"\n variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n </span>\n </span>\n )}\n {item.dot && !collapsed && (\n <span class=\"panel-nav__item-dot-wrap\" aria-hidden=\"true\">\n <span class=\"panel-nav__item-dot\" />\n </span>\n )}\n </button>\n );\n })}\n </div>\n ))}\n </div>\n\n {/ ── Footer ── /}\n <div class=\"panel-nav__footer\">\n {/ Left icon button — Gear in dashboard, Dashboard in settings /}\n <button\n type=\"button\"\n class=\"panel-nav__footer-btn\"\n title={isDashboard ? 'Settings' : 'Dashboard'}\n aria-label={isDashboard ? 'Open settings' : 'Go to dashboard'}\n onClick={() => this.handleFooterAction()}\n >\n <ds-icon name={isDashboard ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n </button>\n\n {/ Right user — expanded: item-style with icon on right; mini: avatar + overlaid initial */}\n {collapsed ? (\n <button\n type=\"button\"\n class=\"panel-nav__footer-btn panel-nav__footer-user-mini\"\n title={userName}\n aria-label={`User: ${userName}`}\n >\n <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n <span class=\"panel-nav__user-initial\" aria-hidden=\"true\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {userInitial}\n </ds-text>\n </span>\n </button>\n ) : (\n <button\n type=\"button\"\n class=\"panel-nav__item panel-nav__footer-user\"\n aria-label={`User menu for ${userName}`}\n >\n <span class=\"panel-nav__item-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n {userName}\n </ds-text>\n </span>\n </span>\n <span class=\"panel-nav__item-icon\">\n <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n </span>\n </button>\n )}\n </div>\n\n </nav>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["panelNavCss","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","groups","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","parsedGroups","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","JSON","parse","syncRovingIndex","onActiveIdChange","onCurrentUrlChange","syncActiveFromUrl","componentWillLoad","stored","localStorage","getItem","componentDidLoad","checkScroll","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","window","removeEventListener","globalMouseUpHandler","panel","el","querySelector","transitionEndHandler","e","propertyName","addEventListener","innerWidth","resizeObserver","ResizeObserver","observe","document","documentElement","disconnect","undefined","best","bestLen","item","getAllItems","href","startsWith","length","id","applyToggle","next","dsNavToggle","emit","setItem","String","flatMap","g","items","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","Array","from","querySelectorAll","focus","body","remaining","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","style","cursor","userSelect","onMove","ev","deltaX","Math","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","label","dot","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","type","render","isDashboard","navCls","Host","display","position","viewBox","fill","xmlns","d","onScroll","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/* ── Theme variables ──────────────────────────────────────────────────────── /\n\n.panel-nav {\n / ─ Sizes ─ /\n --_nav-width: 200px;\n --_nav-width-collapsed: 48px;\n --_nav-item-height: var(--dimension-size-400, 32px);\n --_nav-padding-x: var(--dimension-space-100, 8px);\n --_nav-padding-y: var(--dimension-space-100, 8px);\n / gear button outer width = padding2 + icon /\n --_nav-footer-btn-w: calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n /* ─ Motion ─ /\n / --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n -dur vars are duration-only (needed for calc); -motion vars add easing for use in transitions. /\n --_nav-speed: var(--ds-panel-nav-speed, 1);\n --_nav-expand-dur: calc(var(--_nav-speed) var(--effect-animation-duration-medium-1, 300ms));\n --_nav-expand-motion: var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n --_nav-label-fade-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-label-fade-motion: var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n --_nav-label-fade-out-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n /* ─ Colours – dashboard defaults ─ /\n --_nav-bg: var(--color-navigation-background);\n --_nav-border: var(--color-navigation-border-tertiary);\n --_nav-divider: var(--color-navigation-divider);\n --_nav-fg-primary: var(--color-navigation-foreground-primary);\n --_nav-fg-secondary: var(--color-navigation-foreground-secondary);\n --_nav-fg-tertiary: var(--color-navigation-foreground-tertiary);\n --_nav-hover: var(--color-navigation-interaction-hover);\n --_nav-pressed: var(--color-navigation-interaction-pressed);\n --_nav-focus: var(--color-navigation-interaction-focus);\n --_nav-dot: var(--color-navigation-foreground-brand);\n}\n\n/ ── Settings overrides ──────────────────────────────────────────────────── /\n\n.panel-nav--settings {\n --_nav-bg: var(--color-background-secondary);\n --_nav-border: var(--color-border-tertiary);\n --_nav-divider: var(--color-border-tertiary);\n --_nav-fg-primary: var(--color-foreground-primary);\n --_nav-fg-secondary: var(--color-foreground-secondary);\n --_nav-fg-tertiary: var(--color-foreground-tertiary);\n --_nav-hover: var(--color-interaction-hover);\n --_nav-pressed: var(--color-interaction-pressed);\n --_nav-focus: var(--color-interaction-focus);\n --_nav-dot: var(--color-foreground-bold-brand);\n}\n\n/ ── Shell ───────────────────────────────────────────────────────────────── /\n\n.panel-nav {\n display: flex;\n flex-direction: column;\n width: var(--_nav-width);\n min-width: var(--_nav-width);\n height: 100%;\n background: var(--_nav-bg);\n border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n box-sizing: border-box;\n overflow: hidden;\n transition:\n width var(--_nav-expand-motion),\n min-width var(--_nav-expand-motion),\n background var(--effect-motion-short-3, 200ms ease),\n border-color var(--effect-motion-short-3, 200ms ease);\n font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav--collapsed {\n width: var(--_nav-width-collapsed);\n min-width: var(--_nav-width-collapsed);\n}\n\n/ ── Header ──────────────────────────────────────────────────────────────── /\n\n.panel-nav__header {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-100, 8px);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-primary);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/ Interaction pseudo-element /\n.panel-nav__header-btn::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n pointer-events: none;\n}\n\n.panel-nav__header-btn:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover /\n.panel-nav__header-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n display: block;\n}\n\n/ Toggle icon — hidden by default, revealed on hover /\n.panel-nav__header-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/ ── Scrollable body ─────────────────────────────────────────────────────── /\n\n.panel-nav__body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-200, 16px);\n padding: var(--dimension-space-100, 8px);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/ ── Group ───────────────────────────────────────────────────────────────── /\n\n.panel-nav__group {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n / Typography via ds-text (text-caption-emphasis) /\n text-transform: uppercase;\n color: var(--_nav-fg-tertiary);\n padding: 0 var(--dimension-space-050, 4px);\n margin-bottom: var(--dimension-space-025, 2px);\n white-space: nowrap;\n overflow: hidden;\n max-height: 2em;\n opacity: 1;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n max-height var(--_nav-label-fade-motion) 0ms,\n margin-bottom var(--_nav-label-fade-motion) 0ms,\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n/ ── Item ────────────────────────────────────────────────────────────────── /\n\n.panel-nav__item {\n all: unset;\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: 0 var(--dimension-space-075, 6px);\n height: var(--dimension-size-400, 32px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n position: relative;\n box-sizing: border-box;\n width: 100%;\n user-select: none;\n transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/ Interaction layer /\n.panel-nav__item::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n pointer-events: none;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__item:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── /\n\n.panel-nav__item--active {\n color: var(--_nav-fg-primary);\n / Bold typography via ds-text (text-body-medium-emphasis) on the label /\n}\n\n/ ── Item icon ───────────────────────────────────────────────────────────── /\n\n.panel-nav__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n position: relative;\n}\n\n/ ── Item label ──────────────────────────────────────────────────────────── /\n\n.panel-nav__item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n height: var(--typography-lineheight-md, 20px);\n line-height: var(--typography-lineheight-md, 20px);\n opacity: 1;\n / Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse /\n mask-image: linear-gradient(to right, black 50%, transparent 100%);\n -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n mask-size: 200% 100%;\n -webkit-mask-size: 200% 100%;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n mask-position var(--_nav-label-fade-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n padding: 0 var(--dimension-space-025, 2px);\n}\n\n/ ── Item notification dot — single element, moves between positions ──────── /\n\n.panel-nav__item-dot {\n position: absolute;\n right: 13px;\n top: 13px;\n width: var(--dimension-space-075, 6px);\n height: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-full, 999px);\n background: var(--_nav-dot);\n box-shadow: 0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);\n pointer-events: none;\n transition:\n right var(--_nav-expand-motion),\n top var(--_nav-expand-motion),\n background var(--effect-motion-short-3, 200ms ease),\n box-shadow var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n right: 6px;\n top: 6px;\n}\n\n.panel-nav--animating .panel-nav__item-label {\n text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n opacity: 0;\n pointer-events: none;\n text-overflow: clip;\n mask-position: 100% 0;\n -webkit-mask-position: 100% 0;\n transition:\n opacity var(--_nav-label-fade-out-motion) 0ms,\n mask-position var(--_nav-label-fade-out-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n opacity: 0;\n max-height: 0;\n margin-bottom: 0;\n pointer-events: none;\n transition:\n opacity var(--_nav-label-fade-out-motion) 0ms,\n max-height var(--_nav-label-fade-out-motion) 0ms,\n margin-bottom var(--_nav-label-fade-out-motion) 0ms,\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n/ ── Footer ──────────────────────────────────────────────────────────────── /\n\n.panel-nav__footer {\n position: relative;\n flex-shrink: 0;\n / single row: padding2 + item /\n height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n /* two rows: padding2 + item2 + gap /\n height: calc(var(--_nav-padding-y) 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Gradient fade — floats above the footer, masks content scrolling under it /\n.panel-nav__footer::before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 0;\n right: 0;\n height: calc(var(--dimension-base, 8px) 6);\n background: linear-gradient(to bottom, transparent, var(--_nav-bg));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav--at-bottom .panel-nav__footer::before {\n opacity: 0;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── /\n\n.panel-nav__footer-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-half, 9999px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n box-sizing: border-box;\n background: transparent;\n transition:\n background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 var(--dimension-stroke-width-025, 2px));\n}\n\n/* Dashboard: hover previews settings surface /\n.panel-nav--dashboard .panel-nav__footer-btn:hover {\n background: var(--color-background-secondary);\n color: var(--color-foreground-secondary);\n transition: none;\n}\n\n/ Settings: hover previews dashboard nav surface /\n.panel-nav--settings .panel-nav__footer-btn:hover {\n background: var(--color-navigation-background);\n color: var(--color-navigation-foreground-secondary);\n transition: none;\n}\n\n/ ── Footer user — absolutely positioned, slides from row to below gear ───── /\n\n.panel-nav__footer-user {\n position: absolute;\n / row position: right of gear button /\n left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n right: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n width: auto;\n min-width: 0;\n transition:\n left var(--_nav-expand-motion),\n right var(--_nav-expand-motion),\n top var(--_nav-expand-motion),\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n / column position: full-width row below gear /\n left: var(--_nav-padding-x);\n right: var(--_nav-padding-x);\n top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/ Label: absolute so it stays in place and only fades — no mask slide /\n.panel-nav__footer-user-label {\n text-align: right;\n position: absolute;\n left: var(--dimension-space-075, 6px);\n right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n top: 50%;\n transform: translateY(-50%);\n flex: none;\n height: var(--typography-lineheight-md, 20px);\n mask-image: none;\n -webkit-mask-image: none;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n opacity: 0;\n pointer-events: none;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n}\n\n/ ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── /\n\n/ Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position /\n.panel-nav__footer-user-icon {\n position: absolute;\n left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n top: 0;\n bottom: 0;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n opacity: 1;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n opacity: 0;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n opacity: 0;\n transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n opacity: 1;\n transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/ ── User initial — overlaid on the circle icon ─────────────────────────── /\n\n.panel-nav__user-initial {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--_nav-fg-secondary);\n text-transform: uppercase;\n line-height: 1;\n pointer-events: none;\n transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/ ── Drag-to-resize handle ───────────────────────────────────────────────── /\n\n.panel-nav__resize-handle {\n position: absolute;\n top: 0;\n / Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone /\n right: var(--dimension-space-n050, -4px);\n bottom: 0;\n width: var(--dimension-space-100, 8px);\n z-index: 10;\n cursor: ew-resize;\n touch-action: none;\n / Needs a real background for Safari hit-testing /\n background: transparent;\n}\n\n/ Safari requires non-transparent fill for hit testing /\n.panel-nav__resize-handle::before {\n content: '';\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.001);\n}\n\n/ The brand-bold overlay line /\n.panel-nav__resize-handle::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: var(--dimension-stroke-width-025, 2px);\n background: var(--color-background-bold-brand);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n opacity: 1;\n}\n\n/ ── Reduced motion ──────────────────────────────────────────────────────── /\n\n@media (prefers-reduced-motion: reduce) {\n .panel-nav,\n .panel-nav ,\n .panel-nav ::before,\n .panel-nav ::after,\n .panel-nav__resize-handle,\n .panel-nav__resize-handle::before,\n .panel-nav__resize-handle::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n transition-delay: 0.01ms !important;\n }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\n\nexport type PanelNavVariant = 'dashboard' \| 'settings';\n\nexport interface PanelNavItem {\n id: string;\n icon: string;\n label: string;\n /** Show a notification dot badge on the item /\n dot?: boolean;\n flag?: boolean;\n /* When set, the item renders as an `<a>` element so any router that\n * intercepts anchor clicks (Angular Router, React Router, etc.) handles\n * navigation automatically. `dsNavSelect` still fires on click. /\n href?: string;\n}\n\nexport interface PanelNavGroup {\n id?: string;\n label?: string;\n items: PanelNavItem[];\n}\n\n@Component({\n tag: 'ds-panel-nav',\n styleUrl: 'PanelNav.css',\n scoped: true,\n})\nexport class PanelNav {\n /* Visual variant: `dashboard` = always-dark surface, `settings` = light surface /\n @Prop() variant: PanelNavVariant = 'dashboard';\n\n /* JSON string of `PanelNavGroup[]` /\n @Prop() groups: string = '[]';\n\n /* ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. /\n @Prop() activeId: string = '';\n\n /* Whether the nav is in collapsed (icon-only) state.\n * When `storageKey` is set the component manages this internally —\n * do not also bind it from outside in that mode. /\n @Prop({ mutable: true }) collapsed: boolean = false;\n\n /* Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. /\n @Prop() breakpoint: number = 0;\n\n /* `localStorage` key used to persist the collapsed state across page loads.\n * When set the component is self-managing for collapsed state; `dsNavToggle`\n * still fires for consumers that want to observe the change. /\n @Prop() storageKey: string = '';\n\n /* Current route URL (e.g. `window.location.pathname` or the router's active URL).\n * When set the component derives the active item by matching item `href` values\n * against this string (longest prefix wins), overriding `activeId`. /\n @Prop() currentUrl: string = '';\n\n /* Display name for the footer user section /\n @Prop() userName: string = '';\n\n /* Single character shown in the collapsed avatar /\n @Prop() userInitial: string = '';\n\n /* Emitted when a nav item is clicked. Detail = the item's `id`. /\n @Event() dsNavSelect!: EventEmitter<string>;\n\n /* Emitted when the collapse toggle is clicked. Detail = new collapsed state. /\n @Event() dsNavToggle!: EventEmitter<boolean>;\n\n /* Emitted when the footer left button (gear / dashboard) is clicked. /\n @Event() dsNavFooterAction!: EventEmitter<void>;\n\n @Element() el!: HTMLElement;\n\n @State() private parsedGroups: PanelNavGroup[] = [];\n @State() private atBottom = false;\n @State() private isAnimating = false;\n @State() private rovingIndex: number = 0;\n @State() private viewportNarrow: boolean = false;\n @State() private urlDerivedActiveId: string = '';\n\n private transitionEndHandler?: (e: TransitionEvent) => void;\n private resizeObserver?: ResizeObserver;\n\n // Drag-to-resize state (not @State — no re-render needed)\n private isDragging = false;\n private dragStartX = 0;\n private didSnap = false;\n private lastDeltaX = 0;\n private edgeOverlayTimer: number \| null = null;\n private globalMouseMoveHandler?: (e: MouseEvent) => void;\n private globalMouseUpHandler?: () => void;\n\n @State() private showEdgeOverlay = false;\n\n /* The ID that should be treated as active. `currentUrl` matching takes precedence\n * over `activeId` when both are present. /\n private get effectiveActiveId(): string {\n return this.urlDerivedActiveId \|\| this.activeId;\n }\n\n @Watch('collapsed')\n @Watch('viewportNarrow')\n onCollapsedChange() {\n this.startCollapseAnimation();\n }\n\n @Watch('breakpoint')\n onBreakpointChange() {\n this.disconnectResizeObserver();\n if (this.breakpoint > 0) this.connectResizeObserver();\n }\n\n @Watch('groups')\n onGroupsChange(val: string) {\n try {\n this.parsedGroups = JSON.parse(val);\n } catch {\n this.parsedGroups = [];\n }\n this.syncRovingIndex();\n }\n\n @Watch('activeId')\n @Watch('urlDerivedActiveId')\n onActiveIdChange() {\n this.syncRovingIndex();\n }\n\n @Watch('currentUrl')\n onCurrentUrlChange() {\n this.syncActiveFromUrl();\n }\n\n componentWillLoad() {\n if (this.storageKey) {\n try {\n const stored = localStorage.getItem(this.storageKey);\n if (stored !== null) this.collapsed = stored === 'true';\n } catch { / localStorage unavailable / }\n }\n this.onGroupsChange(this.groups);\n this.syncActiveFromUrl();\n }\n\n componentDidLoad() {\n this.checkScroll();\n if (this.breakpoint > 0) this.connectResizeObserver();\n }\n\n disconnectedCallback() {\n this.disconnectResizeObserver();\n this.clearEdgeOverlayTimer();\n if (this.globalMouseMoveHandler) {\n window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n }\n if (this.globalMouseUpHandler) {\n window.removeEventListener('mouseup', this.globalMouseUpHandler);\n }\n }\n\n private startCollapseAnimation() {\n this.isAnimating = true;\n const panel = this.el.querySelector('.panel-nav') as HTMLElement \| null;\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\n this.transitionEndHandler = (e: TransitionEvent) => {\n if (e.propertyName === 'width') {\n this.isAnimating = false;\n panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n }\n };\n panel?.addEventListener('transitionend', this.transitionEndHandler);\n }\n\n private connectResizeObserver() {\n this.viewportNarrow = window.innerWidth < this.breakpoint;\n this.resizeObserver = new ResizeObserver(() => {\n this.viewportNarrow = window.innerWidth < this.breakpoint;\n });\n this.resizeObserver.observe(document.documentElement);\n }\n\n private disconnectResizeObserver() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = undefined;\n }\n\n /* Derive active ID from the current URL by matching item `href` values.\n * Uses longest-prefix match so `/fleet/detail` correctly activates `/fleet`. /\n private syncActiveFromUrl() {\n if (!this.currentUrl) {\n this.urlDerivedActiveId = '';\n return;\n }\n let best: PanelNavItem \| undefined;\n let bestLen = 0;\n for (const item of this.getAllItems()) {\n if (item.href && this.currentUrl.startsWith(item.href) && item.href.length > bestLen) {\n best = item;\n bestLen = item.href.length;\n }\n }\n this.urlDerivedActiveId = best?.id ?? '';\n }\n\n /* Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set\n * also mutates `collapsed` directly and persists to `localStorage`. /\n private applyToggle(next: boolean) {\n this.dsNavToggle.emit(next);\n if (this.storageKey) {\n this.collapsed = next;\n try { localStorage.setItem(this.storageKey, String(next)); } catch { / unavailable / }\n }\n }\n\n private getAllItems(): PanelNavItem[] {\n return this.parsedGroups.flatMap(g => g.items);\n }\n\n private syncRovingIndex() {\n const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n this.rovingIndex = idx >= 0 ? idx : 0;\n }\n\n private handleItemKeyDown(e: KeyboardEvent, index: number) {\n const total = this.getAllItems().length;\n let next = index;\n switch (e.key) {\n case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n case 'ArrowUp': e.preventDefault(); next = (index - 1 + total) % total; break;\n case 'Home': e.preventDefault(); next = 0; break;\n case 'End': e.preventDefault(); next = total - 1; break;\n default: return;\n }\n this.rovingIndex = next;\n const items = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n );\n items[next]?.focus();\n }\n\n private checkScroll() {\n const body = this.el.querySelector('.panel-nav__body') as HTMLElement \| null;\n if (!body) return;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleBodyScroll(e: Event) {\n const body = e.target as HTMLElement;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleItemClick(id: string) {\n this.dsNavSelect.emit(id);\n }\n\n private handleToggle() {\n this.applyToggle(!this.collapsed);\n }\n\n private handleFooterAction() {\n this.dsNavFooterAction.emit();\n }\n\n private clearEdgeOverlayTimer() {\n if (this.edgeOverlayTimer !== null) {\n window.clearTimeout(this.edgeOverlayTimer);\n this.edgeOverlayTimer = null;\n }\n }\n\n private handleResizeHandleMouseEnter() {\n this.clearEdgeOverlayTimer();\n this.edgeOverlayTimer = window.setTimeout(() => {\n this.showEdgeOverlay = true;\n this.edgeOverlayTimer = null;\n }, 500);\n }\n\n private handleResizeHandleMouseLeave() {\n if (this.isDragging) return;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n }\n\n private handleResizeHandleMouseDown(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n const wasCollapsed = this.collapsed \|\| this.viewportNarrow;\n this.isDragging = true;\n this.dragStartX = e.clientX;\n this.didSnap = false;\n this.lastDeltaX = 0;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n const onMove = (ev: MouseEvent) => {\n const deltaX = ev.clientX - this.dragStartX;\n this.lastDeltaX = Math.abs(deltaX);\n if (this.didSnap) return;\n if (!wasCollapsed && deltaX < -8) {\n this.applyToggle(true);\n this.didSnap = true;\n } else if (wasCollapsed && deltaX > 8) {\n this.applyToggle(false);\n this.didSnap = true;\n }\n };\n\n const onUp = () => {\n if (!this.didSnap && this.lastDeltaX < 3) {\n this.applyToggle(!wasCollapsed);\n }\n this.isDragging = false;\n this.showEdgeOverlay = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this.globalMouseMoveHandler = undefined;\n this.globalMouseUpHandler = undefined;\n };\n\n this.globalMouseMoveHandler = onMove;\n this.globalMouseUpHandler = onUp;\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n const isActive = item.id === this.effectiveActiveId;\n\n const itemContent = [\n <span class=\"panel-nav__item-icon\">\n <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n </span>,\n <span class=\"panel-nav__item-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text\n as=\"span\"\n variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n </span>\n </span>,\n item.dot && <span class=\"panel-nav__item-dot\" aria-hidden=\"true\" />,\n ];\n\n const sharedProps = {\n class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n 'aria-current': isActive ? ('page' as const) : undefined,\n title: collapsed ? item.label : undefined,\n tabIndex: idx === this.rovingIndex ? 0 : -1,\n onClick: () => this.handleItemClick(item.id),\n onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n onFocus: () => { this.rovingIndex = idx; },\n };\n\n return item.href\n ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n }\n\n render() {\n const isDashboard = this.variant === 'dashboard';\n const collapsed = this.collapsed \|\| this.viewportNarrow;\n const { userName, userInitial } = this;\n\n const navCls: Record<string, boolean> = {\n 'panel-nav': true,\n 'panel-nav--dashboard': isDashboard,\n 'panel-nav--settings': !isDashboard,\n 'panel-nav--collapsed': collapsed,\n 'panel-nav--animating': this.isAnimating,\n 'panel-nav--at-bottom': this.atBottom,\n };\n\n return (\n <Host style={{ display: 'block', position: 'relative' }}>\n <nav class={navCls} aria-label={isDashboard ? 'Main navigation' : 'Settings navigation'}>\n\n {/ ── Header: Motive logo, reveals collapse toggle on hover ── /}\n <div class=\"panel-nav__header\">\n <button\n type=\"button\"\n class=\"panel-nav__header-btn\"\n onClick={() => this.handleToggle()}\n aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n aria-expanded={collapsed ? 'false' : 'true'}\n >\n {/ Motive M mark — fades out on hover to reveal collapse toggle /}\n <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n </svg>\n </span>\n {/ Collapse / expand icon — revealed on hover via CSS /}\n <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n <ds-icon\n name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n size=\"md\"\n color=\"inherit\"\n />\n </span>\n </button>\n </div>\n\n {/ ── Scrollable body ── /}\n <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n {(() => {\n let flatIdx = 0;\n return this.parsedGroups.map(group => (\n <div class=\"panel-nav__group\">\n {group.label && (\n <span class=\"panel-nav__group-label\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {group.label}\n </ds-text>\n </span>\n )}\n {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n </div>\n ));\n })()}\n </div>\n\n {/ ── Footer ── /}\n <div class=\"panel-nav__footer\">\n {/ Left icon button — Gear in dashboard, Dashboard in settings /}\n <button\n type=\"button\"\n class=\"panel-nav__footer-btn\"\n title={isDashboard ? 'Settings' : 'Dashboard'}\n aria-label={isDashboard ? 'Open settings' : 'Go to dashboard'}\n onClick={() => this.handleFooterAction()}\n >\n <ds-icon name={isDashboard ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n </button>\n\n {/ Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial /}\n <button\n type=\"button\"\n class=\"panel-nav__item panel-nav__footer-user\"\n aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n >\n <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n {userName}\n </ds-text>\n </span>\n </span>\n <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n <span class=\"panel-nav__footer-icon-expanded\">\n <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n </span>\n <span class=\"panel-nav__footer-icon-collapsed\">\n <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n <span class=\"panel-nav__user-initial\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {userInitial}\n </ds-text>\n </span>\n </span>\n </span>\n </button>\n </div>\n\n </nav>\n\n {/ Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n {!this.viewportNarrow && (\n <div\n class={{\n 'panel-nav__resize-handle': true,\n 'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n }}\n onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n aria-hidden=\"true\"\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-radio-group.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as r,H as i,c as e,h as o,a as s,t}from"./index.js";const a=()=>`.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-item--inactive.sc-ds-radio-group{cursor:not-allowed;opacity:0.5;pointer-events:none}.circle.sc-ds-radio-group{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:10px;height:10px;border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const n=r(class r extends i{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.options=[];this.value="";this.direction="vertical";this.inactive=false}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(r){const i=this.activeItems;if(!i.length)return;const e=i.find((r=>r===document.activeElement));if(!e)return;const o=i.indexOf(e);let s=-1;switch(r.key){case"ArrowDown":case"ArrowRight":r.preventDefault();s=(o+1)%i.length;break;case"ArrowUp":case"ArrowLeft":r.preventDefault();s=(o-1+i.length)%i.length;break;case"Home":r.preventDefault();s=0;break;case"End":r.preventDefault();s=i.length-1;break}if(s>=0){i[s].focus();const r=i[s].dataset["value"];if(r&&r!==this.value){this.value=r;this.dsChange.emit(r)}}}selectItem(r){if(this.inactive)return;if(r!==this.value){this.value=r;this.dsChange.emit(r)}}render(){const r=this.options.findIndex((r=>r.value===this.value));const i=this.options.findIndex((r=>!this.inactive&&!r.inactive));const e=r>=0&&!this.inactive&&!this.options[r]?.inactive?r:i;return o(s,{key:"14e21548d54c0f56a04d1b8dd584f6bbc6cc5874",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((r,i)=>{const s=this.inactive||!!r.inactive;const t=r.value===this.value;const a=s?-1:i===e?0:-1;return o("div",{key:r.value,role:"radio","aria-checked":String(t),"aria-disabled":s||undefined,tabIndex:a,"data-radio-item":true,"data-value":r.value,"data-inactive":s||undefined,class:{"radio-item":true,"radio-item--inactive":s},onClick:()=>!s&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!s){i.preventDefault();this.selectItem(r.value)}}},o("span",{class:{circle:true,"circle--checked":t}},t&&o("span",{class:"dot"})),o("span",{class:"text-body-medium radio-label"},r.label))})))}get el(){return this}static get style(){return a()}},[2,"ds-radio-group",{options:[16],value:[1025],direction:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-radio-group"];r.forEach((r=>{switch(r){case"ds-radio-group":if(!customElements.get(t(r))){customElements.define(t(r),n)}break}}))}d();const c=n;const l=d;export{c as DsRadioGroup,l as defineCustomElement};
+import{p as r,H as i,c as e,h as o,a as s,t}from"./index.js";const a=()=>`.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-item--inactive.sc-ds-radio-group{cursor:not-allowed;opacity:0.5;pointer-events:none}.circle.sc-ds-radio-group{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:10px;height:10px;border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const n=r(class r extends i{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.options=[];this.value="";this.direction="vertical";this.inactive=false}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(r){const i=this.activeItems;if(!i.length)return;const e=i.find((r=>r===document.activeElement));if(!e)return;const o=i.indexOf(e);let s=-1;switch(r.key){case"ArrowDown":case"ArrowRight":r.preventDefault();s=(o+1)%i.length;break;case"ArrowUp":case"ArrowLeft":r.preventDefault();s=(o-1+i.length)%i.length;break;case"Home":r.preventDefault();s=0;break;case"End":r.preventDefault();s=i.length-1;break}if(s>=0){i[s].focus();const r=i[s].dataset["value"];if(r&&r!==this.value){this.value=r;this.dsChange.emit(r)}}}selectItem(r){if(this.inactive)return;if(r!==this.value){this.value=r;this.dsChange.emit(r)}}render(){const r=this.options.findIndex((r=>r.value===this.value));const i=this.options.findIndex((r=>!this.inactive&&!r.inactive));const e=r>=0&&!this.inactive&&!this.options[r]?.inactive?r:i;return o(s,{key:"2ef1fb9ca1988bc655cb8190f1eda5e3449c8949",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((r,i)=>{const s=this.inactive||!!r.inactive;const t=r.value===this.value;const a=s?-1:i===e?0:-1;return o("div",{key:r.value,role:"radio","aria-checked":String(t),"aria-disabled":s||undefined,tabIndex:a,"data-radio-item":true,"data-value":r.value,"data-inactive":s||undefined,class:{"radio-item":true,"radio-item--inactive":s},onClick:()=>!s&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!s){i.preventDefault();this.selectItem(r.value)}}},o("span",{class:{circle:true,"circle--checked":t}},t&&o("span",{class:"dot"})),o("span",{class:"text-body-medium radio-label"},r.label))})))}get el(){return this}static get style(){return a()}},[2,"ds-radio-group",{options:[16],value:[1025],direction:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-radio-group"];r.forEach((r=>{switch(r){case"ds-radio-group":if(!customElements.get(t(r))){customElements.define(t(r),n)}break}}))}d();const c=n;const l=d;export{c as DsRadioGroup,l as defineCustomElement};
 //# sourceMappingURL=ds-radio-group.js.map

package/dist/components/ds-scrollbar.js CHANGED Viewed

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

package/dist/components/ds-slider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"07801286fb41c14907a16b87602ea9384ebc850c",class:"field"},t("div",{key:"220a8e43e745fd262580e5e3bc372b2cb0ec3021",class:"label-row"},t("label",{key:"0586bc2f5909a910011f2dc8a4df8dc1ef89e6d7",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"082c63e0e65ef8255baefaac9e427a836621af2e",class:"text-body-small-emphasis"},this.value)),t("div",{key:"12c95aa287cc855c3667f25190653132c58ccad3",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"1f5f984e824e1a7b414bd28ddb187b1fff62238e",class:"track-inner"},t("div",{key:"e4a7d0059371a632773172c54bad670ca9baf5c4",class:"fill-track"},t("div",{key:"d1d63864d04415604b76c576733e00e46694aa49",class:"fill"})),t("div",{key:"9f5b118b87e05a079d3c3fcedbd8b7568a031e15",class:"thumb"})),t("input",{key:"704fa6c21d48bed5bb52b987bff7973de5966116",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
+import{p as e,H as s,c as i,h as a,a as t,t as r}from"./index.js";const n=()=>`.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return a(t,{key:"8ae3cc02474f29b3d5ea2b7b0dd23b68750aa673",class:"field"},a("div",{key:"5ac188e70b3f286091bf76977c09afdca2098fa5",class:"label-row"},a("label",{key:"f15a618e3d9150978857fb03be745adbd6ca41cf",class:"text-body-small-emphasis",htmlFor:e},this.label),a("span",{key:"e98c9bd69aca7b296767e1d0def170714d0a20a7",class:"text-body-small-emphasis"},this.value)),a("div",{key:"1161f647fcde5c153da9fed216e7c320ba2628f4",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},a("div",{key:"97cbc354ebf8c68215e96ce26586afda6f15ee2a",class:"track-inner"},a("div",{key:"13097e266b9aa3acf3802a3f01c664c20a6b83bb",class:"fill-track"},a("div",{key:"b181ae2b17b0d4cb383ec0e466352076b5299029",class:"fill"})),a("div",{key:"58b0a1576faf43ce5ba2b85faa76f6f84d41cae7",class:"thumb"})),a("input",{key:"efa7d69f392f34e052eb5d027b1afedcdee742af",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

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

	@@ -1 +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":[]}
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":"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-surface.js CHANGED Viewed

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

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

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as e,h as t,a,t as s}from"./index.js";const n=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;position:relative;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-secondary)}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tab.sc-ds-tab-group:hover{background-color:var(--_hover-bg)}.tab.sc-ds-tab-group:active{background-color:var(--_pressed-bg)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);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);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);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.indicator.sc-ds-tab-group{position:absolute;bottom:0;height:2px;background-color:var(--color-foreground-brand);border-radius:var(--dimension-radius-full, 9999px);transition:left var(--effect-motion-short-3), width var(--effect-motion-short-3);pointer-events:none}`;const i=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.indicatorLeft=0;this.indicatorWidth=0;this.resizeObserver=null}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>this.updateIndicator()));const o=this.el.querySelector('[role="tablist"]');if(o)this.resizeObserver.observe(o);this.updateIndicator()}disconnectedCallback(){this.resizeObserver?.disconnect()}onValueChange(){this.updateIndicator()}onTabsChange(){requestAnimationFrame((()=>this.updateIndicator()))}updateIndicator(){const o=this.el.querySelector(`[data-tab-id="${this.value}"]`);if(!o)return;const r=o.closest(".tab-list");if(!r)return;const e=r.getBoundingClientRect();const t=o.getBoundingClientRect();this.indicatorLeft=t.left-e.left;this.indicatorWidth=t.width}selectTab(o){this.value=o;this.dsChange.emit(o)}handleKeyDown(o){const r=this.tabs.filter((o=>!o.disabled));if(!r.length)return;const e=r.findIndex((o=>o.id===this.value));let t=null;if(o.key==="ArrowRight"){t=(e+1)%r.length}else if(o.key==="ArrowLeft"){t=(e-1+r.length)%r.length}else if(o.key==="Home"){t=0}else if(o.key==="End"){t=r.length-1}if(t!==null){o.preventDefault();const e=r[t];this.selectTab(e.id);const a=this.el.querySelector(`[data-tab-id="${e.id}"]`);a?.focus()}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();return t(a,{key:"7c428efc5194ae70b2f9185b31915aab8dcc42d6",class:"tab-group-host"},t("div",{key:"eb51b878e90980a1efb7639e4e3431e20fb2614f",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map((r=>{const e=r.id===this.value;return t("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":e,[o]:!!o},"aria-selected":e,"aria-disabled":r.disabled||undefined,disabled:r.disabled,tabIndex:e?0:-1,onClick:()=>!r.disabled&&this.selectTab(r.id)},t("span",{class:e?"text-body-medium-emphasis":"text-body-medium"},r.label))})),t("div",{key:"b89becbf28c5886f7ae302fe72b4fe78ac711f79",class:"indicator",style:{left:`${this.indicatorLeft}px`,width:`${this.indicatorWidth}px`}})))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return n()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],indicatorLeft:[32],indicatorWidth:[32]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(s(o))){customElements.define(s(o),i)}break}}))}d();const c=i;const l=d;export{c as DsTabGroup,l as defineCustomElement};
+import{p as o,H as r,c as e,h as t,a,t as s}from"./index.js";const n=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;position:relative;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-secondary)}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tab.sc-ds-tab-group:hover{background-color:var(--_hover-bg)}.tab.sc-ds-tab-group:active{background-color:var(--_pressed-bg)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);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);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);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.indicator.sc-ds-tab-group{position:absolute;bottom:0;height:2px;background-color:var(--color-foreground-brand);border-radius:var(--dimension-radius-full, 9999px);transition:left var(--effect-motion-short-3), width var(--effect-motion-short-3);pointer-events:none}`;const i=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.indicatorLeft=0;this.indicatorWidth=0;this.resizeObserver=null}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>this.updateIndicator()));const o=this.el.querySelector('[role="tablist"]');if(o)this.resizeObserver.observe(o);this.updateIndicator()}disconnectedCallback(){this.resizeObserver?.disconnect()}onValueChange(){this.updateIndicator()}onTabsChange(){requestAnimationFrame((()=>this.updateIndicator()))}updateIndicator(){const o=this.el.querySelector(`[data-tab-id="${this.value}"]`);if(!o)return;const r=o.closest(".tab-list");if(!r)return;const e=r.getBoundingClientRect();const t=o.getBoundingClientRect();this.indicatorLeft=t.left-e.left;this.indicatorWidth=t.width}selectTab(o){this.value=o;this.dsChange.emit(o)}handleKeyDown(o){const r=this.tabs.filter((o=>!o.disabled));if(!r.length)return;const e=r.findIndex((o=>o.id===this.value));let t=null;if(o.key==="ArrowRight"){t=(e+1)%r.length}else if(o.key==="ArrowLeft"){t=(e-1+r.length)%r.length}else if(o.key==="Home"){t=0}else if(o.key==="End"){t=r.length-1}if(t!==null){o.preventDefault();const e=r[t];this.selectTab(e.id);const a=this.el.querySelector(`[data-tab-id="${e.id}"]`);a?.focus()}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();return t(a,{key:"2929e831e37d037be5aad4930a93fb2511ff2444",class:"tab-group-host"},t("div",{key:"2079f7899f8f383e77d4ab04198b5d02753d50ae",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map((r=>{const e=r.id===this.value;return t("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":e,[o]:!!o},"aria-selected":e,"aria-disabled":r.disabled||undefined,disabled:r.disabled,tabIndex:e?0:-1,onClick:()=>!r.disabled&&this.selectTab(r.id)},t("span",{class:e?"text-body-medium-emphasis":"text-body-medium"},r.label))})),t("div",{key:"9680710b10ae733145dd40bab99b0ac63fa5ca52",class:"indicator",style:{left:`${this.indicatorLeft}px`,width:`${this.indicatorWidth}px`}})))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return n()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],indicatorLeft:[32],indicatorWidth:[32]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(s(o))){customElements.define(s(o),i)}break}}))}d();const c=i;const l=d;export{c as DsTabGroup,l as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map