@ds-mo/ui 2.12.0 → 2.13.1

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

@@ -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":"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":[]}
+{"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":[]}

package/dist/components/ds-icon.js

@@ -1,2 +1,2 @@
-import{I as o,d as s}from"./p-CyFVn2Sc.js";const t=o;const c=s;export{t as DsIcon,c as defineCustomElement};
+import{I as o,d as s}from"./p-B82KZX9D.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
 //# sourceMappingURL=ds-icon.js.map

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as s,h as t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.isInactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.isInactive;const s=this.error&&Boolean(this.errorMessage);const r=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(a,{key:"3fedcfd651ec9a8e158ca749b84a562f3935207f",class:{"input-container":true,"ds-control-inactive":this.isInactive}},t("div",{key:"8ab20d1588c29ca2d2b921e7f1eaf1f4e9d7a704",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"1aaee585e0f7bd55b92aa46b8b5803286eb87d0d",class:"row"},t("input",{key:"20f63e90b317e31f7a59a691b229186783347811",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.isInactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":r,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"614b601791c2bc930be8b7e168677a27257fd107",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"38206d2b051471d88bba2507eb9c962fc2c0df72","aria-hidden":"true"},"×")),t("span",{key:"aecdd907831c1506ea3ad73e575d42662a060549",class:"suffix"},t("slot",{key:"f44ee339b4373dd028544090381a4e070bb050eb",name:"suffix"})))),s&&t("div",{key:"d4e3b331b5bfcea4af584b4a9faaae2c072cf986",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
+import{p as e,H as i,c as s,h as t,a as r,t as n}from"./index.js";const a=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.isInactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.isInactive;const s=this.error&&Boolean(this.errorMessage);const n=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"9e30bcb69738d05f526cdbac569cef05efcbb53e",class:{"input-container":true,"ds-control-inactive":this.isInactive}},t("div",{key:"8478f8dfbe08665b11aed1b8d6e1aaa36bd43184",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"f5d22390e8d5f5201a96270f652148603fe5ec70",class:"row"},t("input",{key:"c2d8d8f7c1bdfef674780d3c68bcf164419d7681",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.isInactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":n,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"812bc2544d8fcf9ed79c71dfdfe3d0cac24a0b05",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"ed5de109d5c4a00e511b19ec85576197e2b2863b","aria-hidden":"true"},"×")),t("span",{key:"7fe5f03e6e8877e00f80d4fea33942211de52d3c",class:"suffix"},t("slot",{key:"64ad61b6b2d3d0aaa5e89739b7240c40edce45d7",name:"suffix"})))),s&&t("div",{key:"1ded4f78b960208101e549132f2c49508b7354b7",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return a()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(n(e))){customElements.define(n(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["inputCss","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","type","isInactive","autoFocus","error","handleInput","e","dsChange","emit","target","handleClear","dsClear","el","querySelector","focus","setFocus","render","inputId","showClear","length","showError","Boolean","errorMessage","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","wrapper","id","placeholder","disabled","ariaLabel","ariaLabelledby","onInput","onClick","name","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.wrapper {\n  width: 100%;\n  height: var(--dimension-size-400);\n  display: flex;\n  align-items: center;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  box-sizing: border-box;\n}\n\n.wrapper:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-foreground-bold-brand);\n}\n\n.wrapper--error {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.wrapper--error:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  gap: var(--dimension-space-050);\n}\n\n.native-input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--dimension-space-100);\n  background: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-primary);\n  border-radius: var(--dimension-radius-075);\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n/* Inactive: host `.ds-control-inactive` (25% opacity). Native disabled still blocks input. */\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n.native-input:focus::placeholder {\n  color: var(--color-foreground-tertiary);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.clear-btn {\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-050);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.clear-btn:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n}\n\n.suffix:empty {\n  display: none;\n}\n\n.error-text {\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  color: var(--color-foreground-bold-negative);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Method, h, Host } from '@stencil/core';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop() value: string = '';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit((e.target as HTMLInputElement).value);\n  };\n\n  private handleClear = () => {\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const showClear = this.type === 'search' && this.value.length > 0 && !this.isInactive;\n    const showError = this.error && Boolean(this.errorMessage);\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host class={{ 'input-container': true, 'ds-control-inactive': this.isInactive }}>\n        <div class={{ wrapper: true, 'wrapper--error': this.error }}>\n          <div class=\"row\">\n            <input\n              type={this.type}\n              id={inputId}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.isInactive}\n              autoFocus={this.autoFocus}\n              class=\"native-input\"\n              aria-label={this.ariaLabel}\n              aria-labelledby={this.ariaLabelledby}\n              aria-describedby={describedBy}\n              aria-invalid={this.error || undefined}\n              onInput={this.handleInput}\n            />\n            {showClear && (\n              <button\n                type=\"button\"\n                class=\"clear-btn\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                <span aria-hidden=\"true\">&times;</span>\n              </button>\n            )}\n            <span class=\"suffix\">\n              <slot name=\"suffix\" />\n            </span>\n          </div>\n        </div>\n        {showError && (\n          <div id={this.errorId} role=\"alert\" class=\"error-text\">\n            {this.errorMessage}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAW,IAAM,m0ECIvB,IAAIC,EAAY,E,MAOHC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4GAQUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAElBD,KAAAG,MAAgB,GAEhBH,KAAAI,KAAkB,OAClBJ,KAAAK,WAAsB,MACtBL,KAAAM,UAAqB,MACrBN,KAAAO,MAAiB,MAgBjBP,KAAAQ,YAAeC,IACrBT,KAAKU,SAASC,KAAMF,EAAEG,OAA4BT,MAAM,EAGlDH,KAAAa,YAAc,KACpBb,KAAKU,SAASC,KAAK,IACnBX,KAAKc,QAAQH,OACbX,KAAKe,GAAGC,cAAc,UAAUC,OAAO,CAsD1C,CAjEC,cAAMC,GACJlB,KAAKe,GAAGC,cAAc,UAAUC,O,CAalC,MAAAE,GACE,MAAMC,EAAUpB,KAAKoB,SAAWpB,KAAKC,YACrC,MAAMoB,EAAYrB,KAAKI,OAAS,UAAYJ,KAAKG,MAAMmB,OAAS,IAAMtB,KAAKK,WAC3E,MAAMkB,EAAYvB,KAAKO,OAASiB,QAAQxB,KAAKyB,cAE7C,MAAMC,EAAc,CAClB1B,KAAK2B,gBACLJ,EAAYvB,KAAKE,QAAU0B,WAC3BC,OAAOL,SAASM,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,kBAAmB,KAAM,sBAAuBlC,KAAKK,aAClE0B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,QAAS,KAAM,iBAAkBnC,KAAKO,QAClDwB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OACTH,EAAA,SAAAE,IAAA,2CACE7B,KAAMJ,KAAKI,KACXgC,GAAIhB,EACJjB,MAAOH,KAAKG,MACZkC,YAAarC,KAAKqC,YAClBC,SAAUtC,KAAKK,WACfC,UAAWN,KAAKM,UAChB4B,MAAM,eAAc,aACRlC,KAAKuC,UAAS,kBACTvC,KAAKwC,eAAc,mBAClBd,EAAW,eACf1B,KAAKO,OAASqB,UAC5Ba,QAASzC,KAAKQ,cAEfa,GACCU,EAAA,UAAAE,IAAA,2CACE7B,KAAK,SACL8B,MAAM,YACNQ,QAAS1C,KAAKa,YAAW,aACd,SAEXkB,EAAA,QAAAE,IAAA,yDAAkB,QAAM,MAG5BF,EAAA,QAAAE,IAAA,2CAAMC,MAAM,UACVH,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAIhBpB,GACCQ,EAAA,OAAAE,IAAA,2CAAKG,GAAIpC,KAAKE,QAAS0C,KAAK,QAAQV,MAAM,cACvClC,KAAKyB,c","ignoreList":[]}
+{"version":3,"names":["inputCss","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","type","isInactive","autoFocus","error","handleInput","e","dsChange","emit","target","handleClear","dsClear","el","querySelector","focus","setFocus","render","inputId","showClear","length","showError","Boolean","errorMessage","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","wrapper","id","placeholder","disabled","ariaLabel","ariaLabelledby","onInput","onClick","name","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.wrapper {\n  width: 100%;\n  height: var(--dimension-size-400);\n  display: flex;\n  align-items: center;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  box-sizing: border-box;\n}\n\n.wrapper:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-foreground-bold-brand);\n}\n\n.wrapper--error {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.wrapper--error:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  gap: var(--dimension-space-050);\n}\n\n.native-input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--dimension-space-100);\n  background: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-primary);\n  border-radius: var(--dimension-radius-075);\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n/* Inactive: host `.ds-control-inactive` (25% opacity). Native disabled still blocks input. */\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n.native-input:focus::placeholder {\n  color: var(--color-foreground-tertiary);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.clear-btn {\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-050);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.clear-btn:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n}\n\n.suffix:empty {\n  display: none;\n}\n\n.error-text {\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  color: var(--color-foreground-bold-negative);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Method, h, Host } from '@stencil/core';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop() value: string = '';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit((e.target as HTMLInputElement).value);\n  };\n\n  private handleClear = () => {\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const showClear = this.type === 'search' && this.value.length > 0 && !this.isInactive;\n    const showError = this.error && Boolean(this.errorMessage);\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host class={{ 'input-container': true, 'ds-control-inactive': this.isInactive }}>\n        <div class={{ wrapper: true, 'wrapper--error': this.error }}>\n          <div class=\"row\">\n            <input\n              type={this.type}\n              id={inputId}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.isInactive}\n              autoFocus={this.autoFocus}\n              class=\"native-input\"\n              aria-label={this.ariaLabel}\n              aria-labelledby={this.ariaLabelledby}\n              aria-describedby={describedBy}\n              aria-invalid={this.error || undefined}\n              onInput={this.handleInput}\n            />\n            {showClear && (\n              <button\n                type=\"button\"\n                class=\"clear-btn\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                <span aria-hidden=\"true\">&times;</span>\n              </button>\n            )}\n            <span class=\"suffix\">\n              <slot name=\"suffix\" />\n            </span>\n          </div>\n        </div>\n        {showError && (\n          <div id={this.errorId} role=\"alert\" class=\"error-text\">\n            {this.errorMessage}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAW,IAAM,m0ECIvB,IAAIC,EAAY,E,MAOHC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4GAQUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAElBD,KAAAG,MAAgB,GAEhBH,KAAAI,KAAkB,OAClBJ,KAAAK,WAAsB,MACtBL,KAAAM,UAAqB,MACrBN,KAAAO,MAAiB,MAgBjBP,KAAAQ,YAAeC,IACrBT,KAAKU,SAASC,KAAMF,EAAEG,OAA4BT,MAAM,EAGlDH,KAAAa,YAAc,KACpBb,KAAKU,SAASC,KAAK,IACnBX,KAAKc,QAAQH,OACbX,KAAKe,GAAGC,cAAc,UAAUC,OAAO,CAsD1C,CAjEC,cAAMC,GACJlB,KAAKe,GAAGC,cAAc,UAAUC,O,CAalC,MAAAE,GACE,MAAMC,EAAUpB,KAAKoB,SAAWpB,KAAKC,YACrC,MAAMoB,EAAYrB,KAAKI,OAAS,UAAYJ,KAAKG,MAAMmB,OAAS,IAAMtB,KAAKK,WAC3E,MAAMkB,EAAYvB,KAAKO,OAASiB,QAAQxB,KAAKyB,cAE7C,MAAMC,EAAc,CAClB1B,KAAK2B,gBACLJ,EAAYvB,KAAKE,QAAU0B,WAC3BC,OAAOL,SAASM,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,kBAAmB,KAAM,sBAAuBlC,KAAKK,aAClE0B,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,QAAS,KAAM,iBAAkBnC,KAAKO,QAClDwB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OACTH,EAAA,SAAAE,IAAA,2CACE7B,KAAMJ,KAAKI,KACXgC,GAAIhB,EACJjB,MAAOH,KAAKG,MACZkC,YAAarC,KAAKqC,YAClBC,SAAUtC,KAAKK,WACfC,UAAWN,KAAKM,UAChB4B,MAAM,eAAc,aACRlC,KAAKuC,UAAS,kBACTvC,KAAKwC,eAAc,mBAClBd,EAAW,eACf1B,KAAKO,OAASqB,UAC5Ba,QAASzC,KAAKQ,cAEfa,GACCU,EAAA,UAAAE,IAAA,2CACE7B,KAAK,SACL8B,MAAM,YACNQ,QAAS1C,KAAKa,YAAW,aACd,SAEXkB,EAAA,QAAAE,IAAA,yDAAkB,QAAM,MAG5BF,EAAA,QAAAE,IAAA,2CAAMC,MAAM,UACVH,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAIhBpB,GACCQ,EAAA,OAAAE,IAAA,2CAAKG,GAAIpC,KAAKE,QAAS0C,KAAK,QAAQV,MAAM,cACvClC,KAAKyB,c","ignoreList":[]}

package/dist/components/ds-loader.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as t,t as i}from"./index.js";import{T as n}from"./p-B9dHCgY-.js";import{r}from"./p-BWUTr_XN.js";const a=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin var(--effect-animation-duration-long-1) var(--effect-animation-easing-linear) infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=n.iconographyMd}get sizePx(){return r(this.size,n.iconographyMd)}render(){const e=`${this.sizePx}px`;const s=t("svg",{style:{width:e,height:e},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return s;return t("span",{role:"status","aria-live":"polite",class:"status"},s,t("span",{class:"visually-hidden"},this.label))}static get style(){return a()}},[1,"ds-loader",{size:[8],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-loader"];e.forEach((e=>{switch(e){case"ds-loader":if(!customElements.get(i(e))){customElements.define(i(e),o)}break}}))}l();const c=o;const d=l;export{c as DsLoader,d as defineCustomElement};
+import{p as e,H as s,h as t,t as i}from"./index.js";import{T as n}from"./p-B_g8X0eh.js";import{r}from"./p-BWUTr_XN.js";const a=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin var(--effect-animation-duration-long-1) var(--effect-animation-easing-linear) infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=n.iconographyMd}get sizePx(){return r(this.size,n.iconographyMd)}render(){const e=`${this.sizePx}px`;const s=t("svg",{style:{width:e,height:e},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return s;return t("span",{role:"status","aria-live":"polite",class:"status"},s,t("span",{class:"visually-hidden"},this.label))}static get style(){return a()}},[1,"ds-loader",{size:[8],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-loader"];e.forEach((e=>{switch(e){case"ds-loader":if(!customElements.get(i(e))){customElements.define(i(e),o)}break}}))}l();const c=o;const d=l;export{c as DsLoader,d as defineCustomElement};
 //# sourceMappingURL=ds-loader.js.map

package/dist/components/ds-menu.js

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-DKdI8T8v.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
+import{M as s,d as o}from"./p-CwARVsZQ.js";const t=s;const p=o;export{t as DsMenu,p as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,c as s,h as t,a as o,t as i}from"./index.js";import{r as d}from"./p-C1cBr-Ri.js";import{T as n}from"./p-B9dHCgY-.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let m=0;const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const a=this.el.querySelector(".modal-dialog");if(!a)return;const s=this.getFocusables(a);if(!s.length){e.preventDefault();a.focus();return}const t=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===t||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.contains(i)){e.preventDefault();t.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return t(o,{key:"0a59d1100fd45aa4b68102c3b51766d121abd168",style:{display:"contents"}},t("div",{key:"d245c0df5efc615f44a98f51367a9206aed73ed5",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},t("div",{key:"6b8ebc451b6207147ba08d602ba2dfe8f5510a2e",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"0c18ff7da02c4231f297058823687145f57e34cd",class:"modal-header"},t("h2",{key:"5ed85b775a37981e1d6428baa339998faf00ffd3",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&t("div",{key:"4a6f52a367e10de66c777e89c29400e4649ab02c",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),t("div",{key:"3a9cf05910cc360b3021a1043026fcc676bc3adb",class:"modal-body"},t("slot",{key:"ef9cdd5243332e943898e3b776418303a8ba1a35"})),t("div",{key:"04ca8da98cf02310802370f7ee68b296cd28fd96",class:"modal-footer"},t("slot",{key:"4ad33064f0a70856581698ca2c4aa224b8f66772",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break}}))}h();const u=f;const b=h;export{u as DsModal,b as defineCustomElement};
+import{p as e,H as a,c as s,h as t,a as o,t as i}from"./index.js";import{r as d}from"./p-C1cBr-Ri.js";import{T as n}from"./p-B_g8X0eh.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let m=0;const f=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const a=this.el.querySelector(".modal-dialog");if(!a)return;const s=this.getFocusables(a);if(!s.length){e.preventDefault();a.focus();return}const t=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===t||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.contains(i)){e.preventDefault();t.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return t(o,{key:"08c4b8a5557d422ee941b4bd7911eeca103f48f9",style:{display:"contents"}},t("div",{key:"9caff4fe0f8cdbb4edaf816b1fd456c6601c850f",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},t("div",{key:"d4bb68021b342f139162d4d50af07f644cd07b92",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"9f31431e6471551ea32677aea332fa7a12922643",class:"modal-header"},t("h2",{key:"d56b50fa521269a9f1e7126f020ea0d13aa78ab4",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&t("div",{key:"93dac27479e8104ba05caeda608c0d4452e38a0d",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),t("div",{key:"653b3430fce8332c505221f4a17022f6c9f6ac0f",class:"modal-body"},t("slot",{key:"51dd38c0b0fc35ba8aea5a491d9fb4d29902e671"})),t("div",{key:"b8738d0229a34f231122a750b9511e4682b31eaa",class:"modal-footer"},t("slot",{key:"44634bc0f5d46d72b3504835a099e4c31686b734",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),f)}break}}))}h();const u=f;const b=h;export{u as DsModal,b as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as a,h as i,a as t,t as s}from"./index.js";import{d as o}from"./p-EK1hOP19.js";import{d as r}from"./p-BTC9Njj6.js";import{d}from"./p-CyFVn2Sc.js";import{d as l}from"./p-DRqxVEye.js";import{d as c}from"./p-UbKTMQjv.js";import{a as v}from"./p-B9dHCgY-.js";function p(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:i}=e;if(i===true){a["scroll-edge-fade--at-end"]=true}else if(i&&typeof i==="object"){const e=n.every((e=>i[e]));if(e){a["scroll-edge-fade--at-end"]=true}}return a}const h={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:v.space050};const f="data-nav-style";function u(e){if(e==="dashboard"||e==="settings")return e;return undefined}function m(e,n,a){const i=u(n);if(i)return i;const t=typeof document!=="undefined"?document.documentElement.getAttribute(f):null;const s=u(t);if(s)return s;return e}function g(e,n){return e!==n}function b(e,n){return e===n||e.startsWith(`${n}/`)}function _(e,n){if(!e)return"";let a="";let i=0;for(const t of n){if(!t.href)continue;if(b(e,t.href)&&t.href.length>i){a=t.id;i=t.href.length}}return a}function y(e){return e.reduce(((e,n)=>e+n.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function w(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function k(e,n){return y(e)===0&&y(x(n))>0}const z="ds-panel-nav-user-menu-anchor";const C=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const A=()=>`.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_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-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);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.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);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.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;height:var(--dimension-size-600, 48px);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;position:relative;z-index:0;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);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.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:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.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{opacity:1}.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{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;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);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.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;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;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;z-index:2;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.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;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding 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-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.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:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));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);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:20;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-foreground-primary);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:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const I=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];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}get effectiveDisableViewTransition(){return w(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=m(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();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;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=n=>{if(n.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("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}this.urlDerivedActiveId=_(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(g(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(k(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${z}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:h})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const i=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===i)return;if(n===a)t=i;else t=n+1;break;case"ArrowUp":if(n===0)return;if(n===i)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=i;else return;break;case"ArrowLeft":if(n===i)t=a;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=i;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:h})}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(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const i=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",i);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=i;window.addEventListener("mousemove",a);window.addEventListener("mouseup",i)}renderFooterAction(e){const n=e?"Open settings":"Go to dashboard";return i("ds-tooltip",{label:n,side:"right",size:"sm"},i("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const t=e?`User: ${n}`:`User menu for ${n}`;const s=i("button",{type:"button",id:z,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":t,onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},i("span",{class:"panel-nav__item-label panel-nav__footer-user-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),i("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},i("span",{class:"panel-nav__footer-icon-expanded"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),i("span",{class:"panel-nav__footer-icon-collapsed"},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("span",{class:"panel-nav__user-initial"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a)))));if(!e)return s;return i("ds-tooltip",{label:t,side:"right",size:"sm"},s)}renderNavItem(e,n,a){const t=e.id===this.effectiveActiveId;const s=n+1;const o=[i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&i("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":t?"page":undefined,tabIndex:s===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,s),onFocus:()=>{this.rovingIndex=s}};const d=this.routerMode==="anchor"&&e.href;const l=d?i("a",{...r,href:e.href},o):i("button",{...r,type:"button"},o);if(!a)return l;return i("ds-tooltip",{label:e.label,side:"right",size:"sm"},l)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating};return i(t,{key:"a836882fb4f94471e39d23004c133500f5de0a93",style:{display:"block",position:"relative"}},i("nav",{key:"58795102b15b4586d589dbd6c2d755dee6cd3831",class:d,"aria-label":n?"Dashboard navigation":"Settings navigation"},i("div",{key:"3ad58910d48f7ddb88541840ce1eb35f3842b517",class:"panel-nav__header"},i("button",{key:"8bc0d155a6aa558a03050dbb66e42d24e9918c43",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":s?"Expand navigation":"Collapse navigation","aria-expanded":s?"false":"true"},i("span",{key:"7b40d855936174c605e6bf3a8be4f9ba452067bf",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"f981be3d1b75320a1f0326404cd7f1ee2214faf9",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},i("path",{key:"ccad4ad52d16e2d5bfa0e46cae8171919e1c5125",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:"752d2113c973b6e1f24bd73294b8b9e1a1cf5c70",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"2174a08040a3ca0a5f114870e555bada5f5eb532",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"d839d4db75eadde56e24b57cea5ff1a06d31976a",class:{"panel-nav__body":true,...p({edges:"bottom"})}},(()=>{let e=0;return this.parsedGroups.map((n=>i("div",{class:"panel-nav__group"},n.label&&i("span",{class:"panel-nav__group-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,s))))))})()),i("div",{key:"a8561a3cc3f25d2c8080f6868066f82f7f518287",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(s,o,r))),!this.viewportNarrow&&i("div",{key:"ec8c3fd40deb235e78aedcc81fc4dd6bb9ccf26a",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return C()+A()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);I.HOST_PROP_SYNC_BUDGET=8;function E(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),I)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(s(e))){r()}break;case"ds-icon":if(!customElements.get(s(e))){d()}break;case"ds-text":if(!customElements.get(s(e))){l()}break;case"ds-tooltip":if(!customElements.get(s(e))){c()}break}}))}E();const D=I;const N=E;export{D as DsPanelNav,N as defineCustomElement};
+import{p as e,H as n,c as a,h as i,a as t,t as s}from"./index.js";import{d as o}from"./p-EK1hOP19.js";import{d as r}from"./p-CuRjYmBk.js";import{d as l}from"./p-B82KZX9D.js";import{d}from"./p-CtwNUCnp.js";import{d as c}from"./p-CDHRJqea.js";import{a as v}from"./p-B_g8X0eh.js";function p(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:i}=e;if(i===true){a["scroll-edge-fade--at-end"]=true}else if(i&&typeof i==="object"){const e=n.every((e=>i[e]));if(e){a["scroll-edge-fade--at-end"]=true}}return a}const h={side:"right",align:"end",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:v.space050};const f="data-nav-style";function u(e){if(e==="dashboard"||e==="settings")return e;return undefined}function m(e,n,a){const i=u(n);if(i)return i;const t=typeof document!=="undefined"?document.documentElement.getAttribute(f):null;const s=u(t);if(s)return s;return e}function g(e,n){return e!==n}function b(e,n){return e===n||e.startsWith(`${n}/`)}function _(e,n){if(!e)return"";let a="";let i=0;for(const t of n){if(!t.href)continue;if(b(e,t.href)&&t.href.length>i){a=t.id;i=t.href.length}}return a}function y(e){return e.reduce(((e,n)=>e+n.items.length),0)}function x(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function w(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function k(e,n){return y(e)===0&&y(x(n))>0}const z="ds-panel-nav-user-menu-anchor";const C=()=>`.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600)}.scroll-edge-fade--top.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);mask-image:linear-gradient(to bottom, #000 0, #000 50%, transparent 100%);-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--bottom.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--left.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to right,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--right.sc-ds-panel-nav{-webkit-mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );mask-image:linear-gradient(     to left,     #000 0,     #000 calc(100% - var(--ds-scroll-edge-fade-size)),     transparent 100%   );-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}`;const A=()=>`.sc-ds-panel-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-panel-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-panel-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-panel-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-panel-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-nav{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-panel-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-nav{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-panel-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-nav{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.panel-nav.sc-ds-panel-nav{--_nav-width:var(--dimension-panel-width-2xs);--_nav-width-collapsed:var(--dimension-size-600);--_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-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);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}ds-app-shell[gradient].sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav,ds-app-shell[gradient] .sc-ds-panel-nav-h .panel-nav.sc-ds-panel-nav{background-color:transparent}.panel-nav--dashboard.sc-ds-panel-nav,.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);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;position:relative;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background-color:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:visible;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background-color var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.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;height:var(--dimension-size-600, 48px);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;position:relative;z-index:0;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);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;opacity:1}.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:flex;align-items:center;justify-content:center;position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none}.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{opacity:1}.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{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;position:relative;z-index:0;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);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.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;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;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;z-index:2;right:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));top:calc(var(--dimension-space-100, 8px) + var(--dimension-space-050, 4px) + var(--dimension-stroke-width-012, 1px));pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:var(--dimension-space-075);top:var(--dimension-space-075)}.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;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding 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-btn.sc-ds-panel-nav{position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);--ds-button-unfilled-fg:var(--_nav-fg-secondary);--ds-button-unfilled-fg-active:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-hover);--ds-interaction-pressed:var(--_nav-pressed);--ds-focus-ring-color:var(--_nav-focus)}.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:calc(var(--_nav-padding-x) - var(--dimension-stroke-width-012, 1px));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);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:20;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-foreground-primary);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:var(--effect-animation-duration-instant) !important;animation-duration:var(--effect-animation-duration-instant) !important;transition-delay:var(--effect-animation-duration-instant) !important}}`;const I=e(class e extends n{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavSelect=a(this,"dsNavSelect");this.dsNavToggle=a(this,"dsNavToggle");this.dsChromeTransitionStart=a(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=a(this,"dsChromeTransitionEnd");this.dsNavFooterAction=a(this,"dsNavFooterAction");this.dsNavUserAction=a(this,"dsNavUserAction");this.navStyle="dashboard";this.disableViewTransition=false;this.groups="[]";this.routerMode="anchor";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedStyle="dashboard";this.parsedGroups=[];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}get effectiveDisableViewTransition(){return w(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined)return;this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=x(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=m(this.navStyle,this.el.getAttribute("nav-style"));if(this.storageKey){try{const e=localStorage.getItem(this.storageKey);if(e!==null)this.collapsed=e==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.syncHostPropsIfNeeded();this.scheduleDeferredHostPropSync();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;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;if(this.transitionEndHandler){e?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=n=>{if(n.propertyName==="width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionEndHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e)}}))}))}finishCollapseAnimation(e){if(!this.isAnimating)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"});if(this.transitionEndHandler){e?.removeEventListener("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}this.urlDerivedActiveId=_(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(g(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(k(this.parsedGroups,this.groups)){this.onGroupsChange(this.groups)}else if(this.currentUrl){this.syncActiveFromUrl()}}scheduleDeferredHostPropSync(){let n=e.HOST_PROP_SYNC_BUDGET;const a=()=>{this.syncHostPropsIfNeeded();if(--n>0){requestAnimationFrame(a)}};queueMicrotask(a)}applyToggle(e){this.collapsed=e;if(this.storageKey){try{localStorage.setItem(this.storageKey,String(e))}catch{}}this.dsNavToggle.emit(e)}getAllItems(){return this.parsedGroups.flatMap((e=>e.items))}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.el.querySelector(".panel-nav__header-btn")}if(e>=1&&e<=n){const n=this.el.querySelectorAll(".panel-nav__body .panel-nav__item");return n[e-1]??null}if(e===this.getFooterRovingIndex()){return this.el.querySelector(".panel-nav__footer-btn .button-icon")}if(e===this.getUserRovingIndex()){return this.el.querySelector(".panel-nav__footer-user")}return null}focusRovingAt(e){this.rovingIndex=e;this.getRovingElement(e)?.focus({preventScroll:true})}activateRovingIndex(e){const n=this.getAllItems().length;const a=this.getAllItems();if(e===0){this.handleToggle();return}if(e>=1&&e<=n){this.handleItemClick(a[e-1].id);return}if(e===this.getFooterRovingIndex()){this.handleFooterAction();return}if(e===this.getUserRovingIndex()){const e=this.el.querySelector(`#${z}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:h})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const i=this.getUserRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===i)return;if(n===a)t=i;else t=n+1;break;case"ArrowUp":if(n===0)return;if(n===i)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=i;else return;break;case"ArrowLeft":if(n===i)t=a;else return;break;case"Home":e.preventDefault();t=0;break;case"End":e.preventDefault();t=i;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){this.applyToggle(!this.collapsed)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:h})}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(e){e.preventDefault();e.stopPropagation();const n=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=e.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const a=e=>{const a=e.clientX-this.dragStartX;this.lastDeltaX=Math.abs(a);if(this.didSnap)return;if(!n&&a<-8){this.applyToggle(true);this.didSnap=true}else if(n&&a>8){this.applyToggle(false);this.didSnap=true}};const i=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!n)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",a);window.removeEventListener("mouseup",i);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=i;window.addEventListener("mousemove",a);window.addEventListener("mouseup",i)}renderFooterAction(e){const n=e?"Settings":"Dashboard";return i("ds-tooltip",{label:n,side:"right",size:"sm"},i("ds-button-unfilled",{variant:"icon",class:"panel-nav__footer-btn",icon:e?"Gear":"Dashboard",activeFill:false,hasBorder:false,focusTabIndex:this.rovingIndex===this.getFooterRovingIndex()?0:-1,"aria-label":n,onDsClick:()=>this.handleFooterAction(),onKeyDown:e=>this.handleRovingKeyDown(e,this.getFooterRovingIndex()),onFocusin:()=>{this.rovingIndex=this.getFooterRovingIndex()}}))}renderFooterUser(e,n,a){const t=e?"Account":"";const s=i("button",{type:"button",id:z,class:"panel-nav__item panel-nav__footer-user ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":"Account",onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},i("span",{class:"panel-nav__item-label panel-nav__footer-user-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),i("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},i("span",{class:"panel-nav__footer-icon-expanded"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),i("span",{class:"panel-nav__footer-icon-collapsed"},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("span",{class:"panel-nav__user-initial"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a)))));return i("ds-tooltip",{label:t,side:"right",size:"sm"},s)}renderNavItem(e,n,a){const t=e.id===this.effectiveActiveId;const s=n+1;const o=[i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:e.icon,size:"md",color:"inherit",flag:e.flag})),i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:t?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},e.label))),e.dot&&i("ds-badge",{class:"panel-nav__item-dot",variant:"dot",background:"var(--_nav-bg)",label:"","aria-hidden":"true"})];const r={class:{"panel-nav__item":true,"panel-nav__item--active":t,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":t?"page":undefined,tabIndex:s===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,s),onFocus:()=>{this.rovingIndex=s}};const l=this.routerMode==="anchor"&&e.href;const d=l?i("a",{...r,href:e.href},o):i("button",{...r,type:"button"},o);return i("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},d)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const s=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const l={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":s,"panel-nav--animating":this.isAnimating};return i(t,{key:"aed22dc315704e320c3fa544bffce6efeef09a9b",style:{display:"block",position:"relative"}},i("nav",{key:"2f6497e1579d3b32bde2c4ccf65bd5dc61cbaf1d",class:l,"aria-label":n?"Dashboard navigation":"Settings navigation"},i("div",{key:"13605ce585013d2b25768faf97d3e8a3624f3fc0",class:"panel-nav__header"},i("button",{key:"0206f813f542130b58ddecb7e6485f73c08e05b9",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",tabIndex:this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":s?"Expand navigation":"Collapse navigation","aria-expanded":s?"false":"true"},i("span",{key:"fb5b6c3e5f7f0401bfca99ba7c689ecec44fe08c",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"cb376a9da7a06ade65254b9fd0897a95b58b045a",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},i("path",{key:"050452e744633be064440d23010ee04e36269d89",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:"a366046422cbbe85a4fe35db6fa469e484eca13d",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"e56abeec141327c1f553ca313fd4721a41351a6c",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"ef64a59702c450a75a8e255876d7e0ed54afdc59",class:{"panel-nav__body":true,...p({edges:"bottom"})}},(()=>{let e=0;return this.parsedGroups.map((n=>i("div",{class:"panel-nav__group"},n.label&&i("span",{class:"panel-nav__group-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,e++,s))))))})()),i("div",{key:"e4d23219f169733b06d767c221c9b900658b0f88",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(s,o,r))),!this.viewportNarrow&&i("div",{key:"a4e8055387467d4e4f5ba0f71c1888540675ba34",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:e=>this.handleResizeHandleMouseDown(e),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}}static get style(){return C()+A()}},[2,"ds-panel-nav",{navStyle:[513,"nav-style"],disableViewTransition:[4,"disable-view-transition"],groups:[1],routerMode:[1,"router-mode"],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32],toggleCollapsed:[64]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onViewportNarrowChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],navStyle:[{onNavStyleChange:0}]}]);I.HOST_PROP_SYNC_BUDGET=8;function D(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(s(e))){customElements.define(s(e),I)}break;case"ds-badge":if(!customElements.get(s(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(s(e))){r()}break;case"ds-icon":if(!customElements.get(s(e))){l()}break;case"ds-text":if(!customElements.get(s(e))){d()}break;case"ds-tooltip":if(!customElements.get(s(e))){c()}break}}))}D();const E=I;const N=D;export{E as DsPanelNav,N as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map