@ds-mo/ui 2.14.0 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","modalWidth","shouldRender","closing","instanceId","titleId","subtitleId","previousFocus","escapeHandler","tabHandler","closeTimer","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","document","activeElement","requestAnimationFrame","focusFirst","setupListeners","setTimeout","focus","closeAnimationMs","dialog","el","querySelector","focusables","getFocusables","root","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","e","key","preventDefault","close","length","first","last","active","shiftKey","contains","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleBackdropMouseDown","target","currentTarget","resolvedWidth","resolveCssTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","render","hidden","h","Host","style","display","class","onMouseDown","position","inset","zIndex","alignItems","justifyContent","padding","role","subtitle","undefined","tabIndex","width","id","heading","name"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[".modal-backdrop {\n  background-color: var(--color-background-shade);\n  backdrop-filter: blur(var(--effect-blur-sm));\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n.modal-dialog {\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-300);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n.modal-header {\n  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n  flex-shrink: 0;\n}\n\n.modal-title {\n  margin: 0;\n}\n\n.modal-subtitle {\n  margin-top: var(--dimension-space-100);\n  color: var(--color-foreground-secondary);\n  text-wrap: balance;\n}\n\n.modal-body {\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.modal-footer {\n  padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n  flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() subtitle: string | undefined;\n  @Prop() modalWidth: ModalWidth | string = 'md';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n\n  private instanceId = ++modalIdCounter;\n  private titleId = `ds-modal-title-${modalIdCounter}`;\n  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n  private previousFocus: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      requestAnimationFrame(() => {\n        this.focusFirst();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n        this.previousFocus?.focus?.();\n        this.previousFocus = null;\n      }, this.closeAnimationMs);\n    }\n  }\n\n  private focusFirst() {\n    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n    if (!dialog) return;\n    const focusables = this.getFocusables(dialog);\n    (focusables[0] ?? dialog).focus();\n  }\n\n  private getFocusables(root: HTMLElement): HTMLElement[] {\n    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n    );\n  }\n\n  private setupListeners() {\n    this.escapeHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') { e.preventDefault(); this.close(); }\n    };\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n      if (!dialog) return;\n      const focusables = this.getFocusables(dialog);\n      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (e.shiftKey) {\n        if (active === first || active === dialog || !dialog.contains(active)) {\n          e.preventDefault(); last.focus();\n        }\n      } else {\n        if (active === last || !dialog.contains(active)) {\n          e.preventDefault(); first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', this.escapeHandler);\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownListeners() {\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  private handleBackdropMouseDown(e: MouseEvent) {\n    if (e.target === e.currentTarget) this.close();\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  render() {\n    // Always render slots so scoped-mode slot distribution doesn't leak content.\n    // The backdrop is hidden via CSS when not active.\n    const hidden = !this.shouldRender && !this.closing;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n        >\n          <div\n            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.titleId}\n            aria-describedby={this.subtitle ? this.subtitleId : undefined}\n            tabIndex={-1}\n            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}\n          >\n            <div class=\"modal-header\">\n              <h2 id={this.titleId} class=\"text-title-small modal-title\">{this.heading}</h2>\n              {this.subtitle && (\n                <div id={this.subtitleId} class=\"modal-subtitle text-body-medium\">\n                  {this.subtitle}\n                </div>\n              )}\n            </div>\n            <div class=\"modal-body\">\n              <slot />\n            </div>\n            <div class=\"modal-footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","modalWidth","shouldRender","closing","instanceId","titleId","subtitleId","previousFocus","escapeHandler","tabHandler","closeTimer","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","document","activeElement","requestAnimationFrame","focusFirst","setupListeners","setTimeout","focus","closeAnimationMs","dialog","el","querySelector","focusables","getFocusables","root","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","e","key","preventDefault","close","length","first","last","active","shiftKey","contains","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleBackdropMouseDown","target","currentTarget","resolvedWidth","resolveCssTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","render","hidden","h","Host","style","display","class","onMouseDown","position","inset","zIndex","alignItems","justifyContent","padding","role","subtitle","undefined","tabIndex","width","as","variant","textId","heading","color","wrap","name"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[".modal-backdrop {\n  background-color: var(--color-background-shade);\n  backdrop-filter: blur(var(--effect-blur-sm));\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n.modal-dialog {\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-300);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n.modal-header {\n  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n  flex-shrink: 0;\n}\n\n.modal-subtitle {\n  margin-top: var(--dimension-space-100);\n}\n\n.modal-body {\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.modal-footer {\n  padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n  flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveCssTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() subtitle: string | undefined;\n  @Prop() modalWidth: ModalWidth | string = 'md';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n\n  private instanceId = ++modalIdCounter;\n  private titleId = `ds-modal-title-${modalIdCounter}`;\n  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n  private previousFocus: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      requestAnimationFrame(() => {\n        this.focusFirst();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n        this.previousFocus?.focus?.();\n        this.previousFocus = null;\n      }, this.closeAnimationMs);\n    }\n  }\n\n  private focusFirst() {\n    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n    if (!dialog) return;\n    const focusables = this.getFocusables(dialog);\n    (focusables[0] ?? dialog).focus();\n  }\n\n  private getFocusables(root: HTMLElement): HTMLElement[] {\n    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n    );\n  }\n\n  private setupListeners() {\n    this.escapeHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') { e.preventDefault(); this.close(); }\n    };\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n      if (!dialog) return;\n      const focusables = this.getFocusables(dialog);\n      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (e.shiftKey) {\n        if (active === first || active === dialog || !dialog.contains(active)) {\n          e.preventDefault(); last.focus();\n        }\n      } else {\n        if (active === last || !dialog.contains(active)) {\n          e.preventDefault(); first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', this.escapeHandler);\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownListeners() {\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  private handleBackdropMouseDown(e: MouseEvent) {\n    if (e.target === e.currentTarget) this.close();\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  render() {\n    // Always render slots so scoped-mode slot distribution doesn't leak content.\n    // The backdrop is hidden via CSS when not active.\n    const hidden = !this.shouldRender && !this.closing;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n        >\n          <div\n            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.titleId}\n            aria-describedby={this.subtitle ? this.subtitleId : undefined}\n            tabIndex={-1}\n            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}\n          >\n            <div class=\"modal-header\">\n              <ds-text\n                as=\"h2\"\n                variant=\"text-title-small\"\n                textId={this.titleId}\n              >\n                {this.heading}\n              </ds-text>\n              {this.subtitle && (\n                <ds-text\n                  class=\"modal-subtitle\"\n                  as=\"div\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  wrap=\"balance\"\n                  textId={this.subtitleId}\n                >\n                  {this.subtitle}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"modal-body\">\n              <slot />\n            </div>\n            <div class=\"modal-footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-pagination.js

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as n,h as s,a as o,t as e}from"./index.js";const a=()=>`.ds-control-inactive.sc-ds-pagination-h,.ds-control-inactive.sc-ds-pagination{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-pagination-h{display:inline-block}.pagination.sc-ds-pagination{display:flex;align-items:center;gap:var(--dimension-space-025);-webkit-user-select:none;user-select:none}.button.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0 var(--dimension-space-050);background:none;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;color:var(--color-foreground-secondary);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button.sc-ds-pagination:hover:not(:disabled){background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button.sc-ds-pagination:active:not(:disabled){background-color:var(--color-interaction-pressed)}.button.sc-ds-pagination:disabled{cursor:not-allowed;opacity:0.35}.button.sc-ds-pagination:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.button--active.sc-ds-pagination{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button--nav.sc-ds-pagination{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ellipsis.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300)}`;function r(t,i){const n=[];for(let s=t;s<=i;s++)n.push(s);return n}function c(t,i,n){const s=n*2+5;if(i<=s)return r(1,i);const o=Math.max(t-n,2);const e=Math.min(t+n,i-1);const a=o>2;const c=e<i-1;if(!a&&c)return[...r(1,n*2+3),"ellipsis",i];if(a&&!c)return[1,"ellipsis",...r(i-(n*2+2),i)];return[1,"ellipsis",...r(o,e),"ellipsis",i]}const l=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsPageChange=n(this,"dsPageChange");this.page=1;this.totalPages=1;this.siblingCount=1;this.isInactive=false}go(t){if(this.isInactive)return;this.page=t;this.dsPageChange.emit(t)}render(){if(this.totalPages<=1)return s(o,{style:{display:"none"}});const t=c(this.page,this.totalPages,this.siblingCount);return s(o,null,s("nav",{class:{pagination:true,"ds-control-inactive":this.isInactive},"aria-label":"Pagination"},s("button",{type:"button",class:"button button--nav",disabled:this.page<=1||this.isInactive,onClick:()=>this.go(this.page-1),"aria-label":"Previous page"},"‹"),t.map(((t,i)=>t==="ellipsis"?s("span",{key:`e${i}`,class:"ellipsis"},s("span",{class:"text-body-small",style:{color:"var(--color-foreground-tertiary)"}},"…")):s("button",{key:t,type:"button",class:{button:true,"button--active":t===this.page},onClick:()=>this.go(t),"aria-current":t===this.page?"page":undefined,disabled:this.isInactive},s("span",{class:t===this.page?"text-body-small-emphasis":"text-body-small"},t)))),s("button",{type:"button",class:"button button--nav",disabled:this.page>=this.totalPages||this.isInactive,onClick:()=>this.go(this.page+1),"aria-label":"Next page"},"›")))}static get style(){return a()}},[2,"ds-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],isInactive:[4,"is-inactive"]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-pagination"];t.forEach((t=>{switch(t){case"ds-pagination":if(!customElements.get(e(t))){customElements.define(e(t),l)}break}}))}d();const u=l;const p=d;export{u as DsPagination,p as defineCustomElement};
+import{p as t,H as i,c as n,h as s,a as o,t as e}from"./index.js";import{d as a}from"./p-sBx2MuF2.js";const r=()=>`.ds-control-inactive.sc-ds-pagination-h,.ds-control-inactive.sc-ds-pagination{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-pagination-h{display:inline-block}.pagination.sc-ds-pagination{display:flex;align-items:center;gap:var(--dimension-space-025);-webkit-user-select:none;user-select:none}.button.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0 var(--dimension-space-050);background:none;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;color:var(--color-foreground-secondary);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button.sc-ds-pagination:hover:not(:disabled){background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button.sc-ds-pagination:active:not(:disabled){background-color:var(--color-interaction-pressed)}.button.sc-ds-pagination:disabled{cursor:not-allowed;opacity:0.35}.button.sc-ds-pagination:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.button--active.sc-ds-pagination{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button--nav.sc-ds-pagination{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ellipsis.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300)}`;function c(t,i){const n=[];for(let s=t;s<=i;s++)n.push(s);return n}function l(t,i,n){const s=n*2+5;if(i<=s)return c(1,i);const o=Math.max(t-n,2);const e=Math.min(t+n,i-1);const a=o>2;const r=e<i-1;if(!a&&r)return[...c(1,n*2+3),"ellipsis",i];if(a&&!r)return[1,"ellipsis",...c(i-(n*2+2),i)];return[1,"ellipsis",...c(o,e),"ellipsis",i]}const d=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsPageChange=n(this,"dsPageChange");this.page=1;this.totalPages=1;this.siblingCount=1;this.isInactive=false}go(t){if(this.isInactive)return;this.page=t;this.dsPageChange.emit(t)}render(){if(this.totalPages<=1)return s(o,{style:{display:"none"}});const t=l(this.page,this.totalPages,this.siblingCount);return s(o,null,s("nav",{class:{pagination:true,"ds-control-inactive":this.isInactive},"aria-label":"Pagination"},s("button",{type:"button",class:"button button--nav",disabled:this.page<=1||this.isInactive,onClick:()=>this.go(this.page-1),"aria-label":"Previous page"},"‹"),t.map(((t,i)=>t==="ellipsis"?s("ds-text",{key:`e${i}`,class:"ellipsis",as:"span",variant:"text-body-small",color:"tertiary"},"…"):s("button",{key:t,type:"button",class:{button:true,"button--active":t===this.page},onClick:()=>this.go(t),"aria-current":t===this.page?"page":undefined,disabled:this.isInactive},s("ds-text",{as:"span",variant:"text-body-small",emphasis:t===this.page},t)))),s("button",{type:"button",class:"button button--nav",disabled:this.page>=this.totalPages||this.isInactive,onClick:()=>this.go(this.page+1),"aria-label":"Next page"},"›")))}static get style(){return r()}},[2,"ds-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],isInactive:[4,"is-inactive"]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-pagination","ds-text"];t.forEach((t=>{switch(t){case"ds-pagination":if(!customElements.get(e(t))){customElements.define(e(t),d)}break;case"ds-text":if(!customElements.get(e(t))){a()}break}}))}u();const p=d;const h=u;export{p as DsPagination,h as defineCustomElement};
 //# sourceMappingURL=ds-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["paginationCss","buildRange","start","end","items","i","push","buildPages","page","totalPages","siblings","totalSlots","leftSibling","Math","max","rightSibling","min","showLeft","showRight","Pagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","siblingCount","isInactive","go","p","dsPageChange","emit","render","h","Host","style","display","pages","class","pagination","type","disabled","onClick","map","item","key","color","button","undefined"],"sources":["src/wc/components/Pagination/Pagination.css?tag=ds-pagination&encapsulation=scoped","src/wc/components/Pagination/Pagination.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n  display: inline-block;\n}\n\n.pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0 var(--dimension-space-050);\n  background: none;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);\n}\n\n.button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button:active:not(:disabled) {\n  background-color: var(--color-interaction-pressed);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.35;\n}\n\n.button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n.button--active {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button--nav {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.ellipsis {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nfunction buildRange(start: number, end: number): (number | 'ellipsis')[] {\n  const items: (number | 'ellipsis')[] = [];\n  for (let i = start; i <= end; i++) items.push(i);\n  return items;\n}\n\nfunction buildPages(page: number, totalPages: number, siblings: number): (number | 'ellipsis')[] {\n  const totalSlots = siblings * 2 + 5;\n  if (totalPages <= totalSlots) return buildRange(1, totalPages);\n\n  const leftSibling = Math.max(page - siblings, 2);\n  const rightSibling = Math.min(page + siblings, totalPages - 1);\n  const showLeft = leftSibling > 2;\n  const showRight = rightSibling < totalPages - 1;\n\n  if (!showLeft && showRight) return [...buildRange(1, siblings * 2 + 3), 'ellipsis', totalPages];\n  if (showLeft && !showRight) return [1, 'ellipsis', ...buildRange(totalPages - (siblings * 2 + 2), totalPages)];\n  return [1, 'ellipsis', ...buildRange(leftSibling, rightSibling), 'ellipsis', totalPages];\n}\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  @Prop({ mutable: true }) page: number = 1;\n  @Prop() totalPages: number = 1;\n  @Prop() siblingCount: number = 1;\n  @Prop() isInactive: boolean = false;\n\n  @Event() dsPageChange!: EventEmitter<number>;\n\n  private go(p: number) {\n    if (this.isInactive) return;\n    this.page = p;\n    this.dsPageChange.emit(p);\n  }\n\n  render() {\n    if (this.totalPages <= 1) return <Host style={{ display: 'none' }} />;\n\n    const pages = buildPages(this.page, this.totalPages, this.siblingCount);\n\n    return (\n      <Host>\n        <nav\n          class={{ pagination: true, 'ds-control-inactive': this.isInactive }}\n          aria-label=\"Pagination\"\n        >\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page <= 1 || this.isInactive}\n            onClick={() => this.go(this.page - 1)}\n            aria-label=\"Previous page\"\n          >\n            &#x2039;\n          </button>\n\n          {pages.map((item, i) =>\n            item === 'ellipsis' ? (\n              <span key={`e${i}`} class=\"ellipsis\">\n                <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-tertiary)' }}>…</span>\n              </span>\n            ) : (\n              <button\n                key={item}\n                type=\"button\"\n                class={{ button: true, 'button--active': item === this.page }}\n                onClick={() => this.go(item)}\n                aria-current={item === this.page ? 'page' : undefined}\n                disabled={this.isInactive}\n              >\n                <span class={item === this.page ? 'text-body-small-emphasis' : 'text-body-small'}>\n                  {item}\n                </span>\n              </button>\n            )\n          )}\n\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page >= this.totalPages || this.isInactive}\n            onClick={() => this.go(this.page + 1)}\n            aria-label=\"Next page\"\n          >\n            &#x203A;\n          </button>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,shDCE5B,SAASC,EAAWC,EAAeC,GACjC,MAAMC,EAAiC,GACvC,IAAK,IAAIC,EAAIH,EAAOG,GAAKF,EAAKE,IAAKD,EAAME,KAAKD,GAC9C,OAAOD,CACT,CAEA,SAASG,EAAWC,EAAcC,EAAoBC,GACpD,MAAMC,EAAaD,EAAW,EAAI,EAClC,GAAID,GAAcE,EAAY,OAAOV,EAAW,EAAGQ,GAEnD,MAAMG,EAAcC,KAAKC,IAAIN,EAAOE,EAAU,GAC9C,MAAMK,EAAeF,KAAKG,IAAIR,EAAOE,EAAUD,EAAa,GAC5D,MAAMQ,EAAWL,EAAc,EAC/B,MAAMM,EAAYH,EAAeN,EAAa,EAE9C,IAAKQ,GAAYC,EAAW,MAAO,IAAIjB,EAAW,EAAGS,EAAW,EAAI,GAAI,WAAYD,GACpF,GAAIQ,IAAaC,EAAW,MAAO,CAAC,EAAG,cAAejB,EAAWQ,GAAcC,EAAW,EAAI,GAAID,IAClG,MAAO,CAAC,EAAG,cAAeR,EAAWW,EAAaG,GAAe,WAAYN,EAC/E,C,MAOaU,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,qFAM2BC,KAAAhB,KAAe,EAChCgB,KAAAf,WAAqB,EACrBe,KAAAC,aAAuB,EACvBD,KAAAE,WAAsB,KAiE/B,CA7DS,EAAAC,CAAGC,GACT,GAAIJ,KAAKE,WAAY,OACrBF,KAAKhB,KAAOoB,EACZJ,KAAKK,aAAaC,KAAKF,E,CAGzB,MAAAG,GACE,GAAIP,KAAKf,YAAc,EAAG,OAAOuB,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAEzD,MAAMC,EAAQ7B,EAAWiB,KAAKhB,KAAMgB,KAAKf,WAAYe,KAAKC,cAE1D,OACEO,EAACC,EAAI,KACHD,EAAA,OACEK,MAAO,CAAEC,WAAY,KAAM,sBAAuBd,KAAKE,YAAY,aACxD,cAEXM,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQ,GAAKgB,KAAKE,WACjCe,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,iBAAe,KAK3B4B,EAAMM,KAAI,CAACC,EAAMtC,IAChBsC,IAAS,WACPX,EAAA,QAAMY,IAAK,IAAIvC,IAAKgC,MAAM,YACxBL,EAAA,QAAMK,MAAM,kBAAkBH,MAAO,CAAEW,MAAO,qCAAoC,MAGpFb,EAAA,UACEY,IAAKD,EACLJ,KAAK,SACLF,MAAO,CAAES,OAAQ,KAAM,iBAAkBH,IAASnB,KAAKhB,MACvDiC,QAAS,IAAMjB,KAAKG,GAAGgB,GAAK,eACdA,IAASnB,KAAKhB,KAAO,OAASuC,UAC5CP,SAAUhB,KAAKE,YAEfM,EAAA,QAAMK,MAAOM,IAASnB,KAAKhB,KAAO,2BAA6B,mBAC5DmC,MAMTX,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQgB,KAAKf,YAAce,KAAKE,WAC/Ce,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,aAAW,M","ignoreList":[]}
+{"version":3,"names":["paginationCss","buildRange","start","end","items","i","push","buildPages","page","totalPages","siblings","totalSlots","leftSibling","Math","max","rightSibling","min","showLeft","showRight","Pagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","siblingCount","isInactive","go","p","dsPageChange","emit","render","h","Host","style","display","pages","class","pagination","type","disabled","onClick","map","item","key","as","variant","color","button","undefined","emphasis"],"sources":["src/wc/components/Pagination/Pagination.css?tag=ds-pagination&encapsulation=scoped","src/wc/components/Pagination/Pagination.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n  display: inline-block;\n}\n\n.pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0 var(--dimension-space-050);\n  background: none;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);\n}\n\n.button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button:active:not(:disabled) {\n  background-color: var(--color-interaction-pressed);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.35;\n}\n\n.button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n.button--active {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button--nav {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.ellipsis {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nfunction buildRange(start: number, end: number): (number | 'ellipsis')[] {\n  const items: (number | 'ellipsis')[] = [];\n  for (let i = start; i <= end; i++) items.push(i);\n  return items;\n}\n\nfunction buildPages(page: number, totalPages: number, siblings: number): (number | 'ellipsis')[] {\n  const totalSlots = siblings * 2 + 5;\n  if (totalPages <= totalSlots) return buildRange(1, totalPages);\n\n  const leftSibling = Math.max(page - siblings, 2);\n  const rightSibling = Math.min(page + siblings, totalPages - 1);\n  const showLeft = leftSibling > 2;\n  const showRight = rightSibling < totalPages - 1;\n\n  if (!showLeft && showRight) return [...buildRange(1, siblings * 2 + 3), 'ellipsis', totalPages];\n  if (showLeft && !showRight) return [1, 'ellipsis', ...buildRange(totalPages - (siblings * 2 + 2), totalPages)];\n  return [1, 'ellipsis', ...buildRange(leftSibling, rightSibling), 'ellipsis', totalPages];\n}\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  @Prop({ mutable: true }) page: number = 1;\n  @Prop() totalPages: number = 1;\n  @Prop() siblingCount: number = 1;\n  @Prop() isInactive: boolean = false;\n\n  @Event() dsPageChange!: EventEmitter<number>;\n\n  private go(p: number) {\n    if (this.isInactive) return;\n    this.page = p;\n    this.dsPageChange.emit(p);\n  }\n\n  render() {\n    if (this.totalPages <= 1) return <Host style={{ display: 'none' }} />;\n\n    const pages = buildPages(this.page, this.totalPages, this.siblingCount);\n\n    return (\n      <Host>\n        <nav\n          class={{ pagination: true, 'ds-control-inactive': this.isInactive }}\n          aria-label=\"Pagination\"\n        >\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page <= 1 || this.isInactive}\n            onClick={() => this.go(this.page - 1)}\n            aria-label=\"Previous page\"\n          >\n            &#x2039;\n          </button>\n\n          {pages.map((item, i) =>\n            item === 'ellipsis' ? (\n              <ds-text key={`e${i}`} class=\"ellipsis\" as=\"span\" variant=\"text-body-small\" color=\"tertiary\">\n                …\n              </ds-text>\n            ) : (\n              <button\n                key={item}\n                type=\"button\"\n                class={{ button: true, 'button--active': item === this.page }}\n                onClick={() => this.go(item)}\n                aria-current={item === this.page ? 'page' : undefined}\n                disabled={this.isInactive}\n              >\n                <ds-text as=\"span\" variant=\"text-body-small\" emphasis={item === this.page}>\n                  {item}\n                </ds-text>\n              </button>\n            )\n          )}\n\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page >= this.totalPages || this.isInactive}\n            onClick={() => this.go(this.page + 1)}\n            aria-label=\"Next page\"\n          >\n            &#x203A;\n          </button>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAgB,IAAM,shDCE5B,SAASC,EAAWC,EAAeC,GACjC,MAAMC,EAAiC,GACvC,IAAK,IAAIC,EAAIH,EAAOG,GAAKF,EAAKE,IAAKD,EAAME,KAAKD,GAC9C,OAAOD,CACT,CAEA,SAASG,EAAWC,EAAcC,EAAoBC,GACpD,MAAMC,EAAaD,EAAW,EAAI,EAClC,GAAID,GAAcE,EAAY,OAAOV,EAAW,EAAGQ,GAEnD,MAAMG,EAAcC,KAAKC,IAAIN,EAAOE,EAAU,GAC9C,MAAMK,EAAeF,KAAKG,IAAIR,EAAOE,EAAUD,EAAa,GAC5D,MAAMQ,EAAWL,EAAc,EAC/B,MAAMM,EAAYH,EAAeN,EAAa,EAE9C,IAAKQ,GAAYC,EAAW,MAAO,IAAIjB,EAAW,EAAGS,EAAW,EAAI,GAAI,WAAYD,GACpF,GAAIQ,IAAaC,EAAW,MAAO,CAAC,EAAG,cAAejB,EAAWQ,GAAcC,EAAW,EAAI,GAAID,IAClG,MAAO,CAAC,EAAG,cAAeR,EAAWW,EAAaG,GAAe,WAAYN,EAC/E,C,MAOaU,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,qFAM2BC,KAAAhB,KAAe,EAChCgB,KAAAf,WAAqB,EACrBe,KAAAC,aAAuB,EACvBD,KAAAE,WAAsB,KAiE/B,CA7DS,EAAAC,CAAGC,GACT,GAAIJ,KAAKE,WAAY,OACrBF,KAAKhB,KAAOoB,EACZJ,KAAKK,aAAaC,KAAKF,E,CAGzB,MAAAG,GACE,GAAIP,KAAKf,YAAc,EAAG,OAAOuB,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAEzD,MAAMC,EAAQ7B,EAAWiB,KAAKhB,KAAMgB,KAAKf,WAAYe,KAAKC,cAE1D,OACEO,EAACC,EAAI,KACHD,EAAA,OACEK,MAAO,CAAEC,WAAY,KAAM,sBAAuBd,KAAKE,YAAY,aACxD,cAEXM,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQ,GAAKgB,KAAKE,WACjCe,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,iBAAe,KAK3B4B,EAAMM,KAAI,CAACC,EAAMtC,IAChBsC,IAAS,WACPX,EAAA,WAASY,IAAK,IAAIvC,IAAKgC,MAAM,WAAWQ,GAAG,OAAOC,QAAQ,kBAAkBC,MAAM,YAAU,KAI5Ff,EAAA,UACEY,IAAKD,EACLJ,KAAK,SACLF,MAAO,CAAEW,OAAQ,KAAM,iBAAkBL,IAASnB,KAAKhB,MACvDiC,QAAS,IAAMjB,KAAKG,GAAGgB,GAAK,eACdA,IAASnB,KAAKhB,KAAO,OAASyC,UAC5CT,SAAUhB,KAAKE,YAEfM,EAAA,WAASa,GAAG,OAAOC,QAAQ,kBAAkBI,SAAUP,IAASnB,KAAKhB,MAClEmC,MAMTX,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQgB,KAAKf,YAAce,KAAKE,WAC/Ce,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,aAAW,M","ignoreList":[]}

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-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};
+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-DQ3l2TXw.js";import{d as r}from"./p-CNgNgezy.js";import{d}from"./p-9Qu1ls2y.js";import{d as l}from"./p-sBx2MuF2.js";import{d as c}from"./p-DRqJ3RUb.js";import{T as v}from"./p-8WTsyLQ9.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-secondary)}.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);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);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);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("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text",as:"span",variant:"text-body-medium",emphasis:true,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("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,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("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text",as:"span",variant:"text-body-medium",emphasis:t,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);return i("ds-tooltip",{label:a?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:"81c0de6c2eba6f079574b247e9f62a4e093c1cca",style:{display:"block",position:"relative"}},i("nav",{key:"49a3fc7f13f52bdb5a0995fc257a0ec7dfe41ee0",class:d,"aria-label":n?"Dashboard navigation":"Settings navigation"},i("div",{key:"acd6b621a0d7b52a1f58bd586b83198d9ad867c4",class:"panel-nav__header"},i("button",{key:"a901f94eb535cc427a0e2d66692e8cad2b83f60e",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:"6e672897d46a4fa6d4ef4818a280f930fe838a49",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"75b75c80a8a61ccea58d227ddcabc454e00b47a1",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:"b0739be66c4e5f76efb1c819b6e1daa948121e7e",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:"7ceb9d8855dff727239d5767cf5dbfddc308b0a5",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"ee7e008582d66a0dcf2d9dc97c6a1271549edd46",name:s?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"61e8cd5ecc801acbcca0760488411f6e3f0266fa",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("ds-text",{class:"panel-nav__group-label panel-nav__item-label-text",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,s))))))})()),i("div",{key:"0b86ee37f16834385d8019da8f3dea30addf2722",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(s,o,r))),!this.viewportNarrow&&i("div",{key:"27185b3f901cb9ac6d9e34345309756660d82277",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))){d()}break;case"ds-text":if(!customElements.get(s(e))){l()}break;case"ds-tooltip":if(!customElements.get(s(e))){c()}break}}))}D();const N=I;const E=D;export{N as DsPanelNav,E as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map