@ds-mo/ui 13.15.0 → 13.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +3 -2
- package/dist/agent.json +61 -13
- package/dist/angular/ds-bar-title.d.ts +1 -1
- package/dist/angular/ds-bar-title.js +3 -3
- package/dist/angular/ds-shell-page.d.ts +1 -1
- package/dist/angular/ds-shell-page.js +3 -3
- package/dist/angular/ds-table.d.ts +1 -1
- package/dist/angular/ds-table.js +3 -3
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-conversation-list.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-scroll-overlay.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-app.js.map +1 -1
- package/dist/components/ds-shell-page.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-DgIRyJoc.js → p-B53Vpuqq.js} +2 -2
- package/dist/components/{p-fKwbYrhi.js → p-B94M62Tx.js} +2 -2
- package/dist/components/p-BAAjiAIF.js +2 -0
- package/dist/components/p-BAAjiAIF.js.map +1 -0
- package/dist/components/{p-ClHpIZg0.js → p-BMAZWEDa.js} +2 -2
- package/dist/components/p-BMAZWEDa.js.map +1 -0
- package/dist/components/p-BMc0DE59.js +2 -0
- package/dist/components/p-BMc0DE59.js.map +1 -0
- package/dist/components/{p-CY19gMiz.js → p-CJq3n5kA.js} +2 -2
- package/dist/components/{p-IhToA4m4.js → p-CMbcRN92.js} +2 -2
- package/dist/components/{p-QDcUAz9m.js → p-CnIvWEVm.js} +2 -2
- package/dist/components/{p-CCkptWPj.js → p-D4AfoIu6.js} +2 -2
- package/dist/components/{p-CKo3OFG1.js → p-D4jQy3Ps.js} +2 -2
- package/dist/components/p-D4jQy3Ps.js.map +1 -0
- package/dist/components/{p-DWjE0VNn.js → p-D5sIwLjA.js} +2 -2
- package/dist/components/p-D9CDoQBx.js +2 -0
- package/dist/components/{p-BLaqjUWu.js.map → p-D9CDoQBx.js.map} +1 -1
- package/dist/components/{p-CekGwihQ.js → p-D9FdOR_m.js} +2 -2
- package/dist/components/{p-GSnB-sa7.js → p-DO5-fplZ.js} +2 -2
- package/dist/components/{p-D5aUkdTw.js → p-Dbobj7DI.js} +2 -2
- package/dist/components/{p-DQXzTV8N.js → p-DrvEhJhO.js} +2 -2
- package/dist/components/{p-BH_lVRgp.js → p-DyqLVdJp.js} +2 -2
- package/dist/components/{p-DWNhyLp2.js → p-m5CSrx_s.js} +2 -2
- package/dist/docs/components.json +301 -2
- package/dist/lib/components/ShellApp/shell-app-types.d.ts +12 -0
- package/dist/lib/utils/index.js +41 -4
- package/dist/lib/utils/index.js.map +2 -2
- package/dist/lib/utils/resolve-css-length-px.d.ts +1 -1
- package/dist/mcp-data/registry/bar-title.json +38 -3
- package/dist/mcp-data/registry/checkbox.json +3 -3
- package/dist/mcp-data/registry/registry.json +60 -12
- package/dist/mcp-data/registry/shell-app.json +4 -3
- package/dist/mcp-data/registry/shell-page.json +77 -4
- package/dist/mcp-data/registry/table.json +88 -12
- package/dist/styles/table.css +161 -10
- package/dist/types/components/BarTitle/BarTitle.d.ts +5 -0
- package/dist/types/components/ShellApp/ShellApp.d.ts +2 -0
- package/dist/types/components/ShellApp/shell-app-types.d.ts +12 -0
- package/dist/types/components/ShellPage/ShellPage.d.ts +9 -0
- package/dist/types/components/Table/Table.d.ts +30 -0
- package/dist/types/components/Table/table-cell-model.d.ts +2 -0
- package/dist/types/components/Table/table-layout-controller.d.ts +6 -0
- package/dist/types/components/Table/table-types.d.ts +3 -0
- package/dist/types/components/Table/table-viewport-fit-controller.d.ts +53 -0
- package/dist/types/components.d.ts +102 -0
- package/dist/types/utils/resolve-css-length-px.d.ts +1 -1
- package/package.json +1 -1
- package/dist/components/p-BJMRBHKW.js +0 -2
- package/dist/components/p-BJMRBHKW.js.map +0 -1
- package/dist/components/p-BLaqjUWu.js +0 -2
- package/dist/components/p-CKo3OFG1.js.map +0 -1
- package/dist/components/p-ClHpIZg0.js.map +0 -1
- package/dist/components/p-DyVAWGL9.js +0 -2
- package/dist/components/p-DyVAWGL9.js.map +0 -1
- /package/dist/components/{p-DgIRyJoc.js.map → p-B53Vpuqq.js.map} +0 -0
- /package/dist/components/{p-fKwbYrhi.js.map → p-B94M62Tx.js.map} +0 -0
- /package/dist/components/{p-CY19gMiz.js.map → p-CJq3n5kA.js.map} +0 -0
- /package/dist/components/{p-IhToA4m4.js.map → p-CMbcRN92.js.map} +0 -0
- /package/dist/components/{p-QDcUAz9m.js.map → p-CnIvWEVm.js.map} +0 -0
- /package/dist/components/{p-CCkptWPj.js.map → p-D4AfoIu6.js.map} +0 -0
- /package/dist/components/{p-DWjE0VNn.js.map → p-D5sIwLjA.js.map} +0 -0
- /package/dist/components/{p-CekGwihQ.js.map → p-D9FdOR_m.js.map} +0 -0
- /package/dist/components/{p-GSnB-sa7.js.map → p-DO5-fplZ.js.map} +0 -0
- /package/dist/components/{p-D5aUkdTw.js.map → p-Dbobj7DI.js.map} +0 -0
- /package/dist/components/{p-DQXzTV8N.js.map → p-DrvEhJhO.js.map} +0 -0
- /package/dist/components/{p-BH_lVRgp.js.map → p-DyqLVdJp.js.map} +0 -0
- /package/dist/components/{p-DWNhyLp2.js.map → p-m5CSrx_s.js.map} +0 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as s,H as e,c as o,h as t,a as i,t as n}from"./index.js";import{p as l}from"./p-CXduurfd.js";import{d as a}from"./p-dEouiXJ8.js";import{d as r}from"./p-DStd98dM.js";import{d}from"./p-C8U5BsJf.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as h}from"./p-DgIRyJoc.js";import{d as p}from"./p-Dhx_3_tf.js";import{d as f}from"./p-BH_lVRgp.js";const u=["search","messages","agents","stacks","activity","help"];const m={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const g={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};const v=[{id:"search",icon:"MagnifyingGlass",label:m.search,railPlacement:"header",order:0,shortcutKey:g.search,mobileDestination:"search"},{id:"messages",icon:"MessageBubbleStack",label:m.messages,order:1,shortcutKey:g.messages,mobileDestination:"messages"},{id:"agents",icon:"AI",label:m.agents,order:2,shortcutKey:g.agents,mobileDestination:"agents"},{id:"stacks",icon:"ViewMenu",label:m.stacks,order:3,shortcutKey:g.stacks,mobileDestination:"inbox"},{id:"activity",icon:"Bell",label:m.activity,order:4,shortcutKey:g.activity,mobileDestination:"inbox"},{id:"help",icon:"CircleQuestion",label:m.help,railPlacement:"footer",order:5,shortcutKey:g.help,mobileDestination:"help"}];function b(s){const e=new Map;for(const o of s){if(o.id.trim()&&!e.has(o.id))e.set(o.id,o)}const o={header:0,body:1,footer:2};return Array.from(e.values()).sort(((s,e)=>{const t=_(s);const i=_(e);const n=o[t]-o[i];if(n!==0)return n;const l=u.findIndex((e=>e===s.id));const a=u.findIndex((s=>s===e.id));const r=s.order??(l<0?Number.MAX_SAFE_INTEGER:l);const d=e.order??(a<0?Number.MAX_SAFE_INTEGER:a);return r-d}))}function w(s){return typeof s==="string"&&s.trim().length>0}function _(s){if(s.railPlacement)return s.railPlacement;if(s.id==="search")return"header";if(s.id==="help")return"footer";return"body"}function y(s,e,o){if(!o||s.some((s=>s.id===o))){return{open:e,activeTool:o,removedTool:""}}return{open:false,activeTool:"",removedTool:o}}function x(s){const e=s.transitionProperty.split(",").map((s=>s.trim()));const o=s.transitionDuration.split(",").map((s=>l(s.trim(),0)));const t=s.transitionDelay.split(",").map((s=>l(s.trim(),0)));return e.reduce(((s,e,i)=>{if(e!=="all"&&e!=="max-width")return s;const n=o[i%o.length]??0;const l=t[i%t.length]??0;return Math.max(s,n+l,0)}),0)}function k(s,e){return!s&&e==="idle"}function T(s,e,o){if(o==="closing")return s<=.5;if(o==="opening")return e>0&&s>=e-.5;return true}function C(s,e,o){if(s&&e===o){return{open:false,activeTool:o,selected:false}}return{open:true,activeTool:o,selected:true}}const A=()=>`.ds-control--lg.sc-ds-panel-tools,.ds-control--lg.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools,.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools,.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tools-h,.ds-control--lg.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tools-h,.ds-chrome-space--sm.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tools-h,.ds-chrome-space--md.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tools-h,.ds-chrome-space--lg.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools,.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools,.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-panel-tools:root,.sc-ds-panel-tools-h,.ds-forced-colors-scope.sc-ds-panel-tools{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-tools-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-tools-h,.ds-focus-ring.sc-ds-panel-tools,.ds-focus-ring-inset.sc-ds-panel-tools-h,.ds-focus-ring-inset.sc-ds-panel-tools{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-tools-h:focus-visible,.ds-focus-ring.sc-ds-panel-tools: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-tools-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-tools{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-tools-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-tools:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-tools-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-tools: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-tools-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-tools{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-tools-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-tools::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-tools-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-scrollbar-hidden.sc-ds-panel-tools-h,.ds-scrollbar-hidden.sc-ds-panel-tools{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-tools-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-tools::-webkit-scrollbar{display:none}.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h:not(.panel-tools--fullscreen) .panel-tools__drawer-surface.sc-ds-panel-tools,.panel-tools--fullscreen.sc-ds-panel-tools-h:not([presentation='fullscreen']) .panel-tools__drawer-surface.sc-ds-panel-tools{visibility:hidden}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header.sc-ds-panel-tools{justify-content:center;height:var(--dimension-size-600);flex-shrink:0;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.panel-tools__rail-actions.sc-ds-panel-tools{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-tools__rail-footer.sc-ds-panel-tools{justify-content:center;flex-shrink:0;margin-top:auto}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const z=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=o(this,"dsToolChange");this.dsPresentationChange=o(this,"dsPresentationChange");this.dsHeaderBack=o(this,"dsHeaderBack");this.dsHeaderAction=o(this,"dsHeaderAction");this.dsChromeTransitionStart=o(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=o(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.railBodyScrollable=false;this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=s=>{const e=s.detail;if(!this.activeTool||!e?.id)return;s.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:e.id})};this.handleTransitionEnd=s=>{const e=this.el.querySelector(".panel-tools__drawer");if(s.target!==e)return;if(s.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(s.type==="transitioncancel")return;if(e&&!this.drawerTransitionAtTerminal(e,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=s=>{const e=C(this.open,this.activeTool,s);this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:s,selected:e.selected})};this.handleRailKeyDown=(s,e)=>{const o=this.orderedRailItems;if(!o.length)return;if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleToolChange(o[e].id);return}if(s.key==="ArrowDown"){if(e>=o.length-1)return;s.preventDefault();this.focusRailAt(e+1);return}if(s.key==="ArrowUp"){if(e<=0)return;s.preventDefault();this.focusRailAt(e-1)}}}get railItems(){return this.items??[]}get orderedRailItems(){return b(this.railItems)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null;this.disconnectRailBodyObserver()}presentationChanged(s,o){if(s===o)return;if(this.el.getAttribute("presentation")!==s){this.el.setAttribute("presentation",s)}const t=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(s==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof e?document.activeElement:null;this.open=true}else if(o==="fullscreen"){const s=this.focusBeforeFullscreen;const e=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(s?.isConnected){s.focus({preventScroll:true})}const o=s?document.activeElement===s||s.contains(document.activeElement):false;if(!o&&e)await this.focusHeaderAction(e);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:s})}handleFullscreenEscape(s){if(this.presentation!=="fullscreen"||s.key!=="Escape")return;s.preventDefault();s.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const s=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(s,e){if(s)this.drawerSurfaceRetained=true;if(this.readyForMotion&&e!==undefined&&e!==s){this.startDrawerTransition(s?"opening":"closing")}else if(!s){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.connectRailBodyObserver();this.updateRailBodyScrollable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}componentDidRender(){this.updateRailBodyScrollable()}connectRailBodyObserver(){this.disconnectRailBodyObserver();if(!this.railBodyEl||typeof ResizeObserver==="undefined")return;this.railBodyObserver=new ResizeObserver((()=>this.updateRailBodyScrollable()));this.railBodyObserver.observe(this.railBodyEl)}disconnectRailBodyObserver(){this.railBodyObserver?.disconnect();this.railBodyObserver=undefined}updateRailBodyScrollable(){const s=Boolean(this.railBodyEl&&this.railBodyEl.scrollHeight>this.railBodyEl.clientHeight+1);if(s!==this.railBodyScrollable)this.railBodyScrollable=s}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const s=localStorage.getItem(this.storageKey);if(w(s))this.activeTool=s}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const s=y(this.railItems,this.open,this.activeTool);if(!s.removedTool)return;this.clearPersistedTool();this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:s.removedTool,selected:false})}startDrawerTransition(s){const e=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=s;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:s});const o=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.transitionGeneration||this.motion!==s)return;if(!e){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(e,s)){this.finishDrawerTransition();return}const t=x(getComputedStyle(e));if(t<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),t)}))}))}drawerTransitionAtTerminal(s,e){const o=s.getBoundingClientRect().width;const t=s.querySelector(".panel-tools__drawer-surface");const i=t?.getBoundingClientRect().width??0;return T(o,i,e)}finishDrawerTransition(){const s=this.motion;const e=s!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(s==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(s){return this.open&&this.activeTool===s}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(s){return this.isDrawerPresent()&&this.activeTool===s}hasFullView(s){return this.fullViewToolIds.includes(s)}syncFullViewTools(){const s=this.orderedRailItems.map((s=>s.id));const e=s.filter((s=>Boolean(this.el.querySelector(`[slot="${s}-view"]`))));if(e.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";const s=this.railItems.find((s=>s.id===this.activeTool));return s?.label??m[this.activeTool]??this.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(s){const e=this.railItems.find((e=>e.id===s));if(!e||e.isInactive)return;this.handleToolChange(s)}async closeDrawer(){if(!this.open)return;const s=this.activeTool;this.open=false;if(s){this.dsToolChange.emit({id:s,selected:false})}}async focusHeaderAction(s){const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}focusRailAt(s){const e=this.orderedRailItems;if(!e.length)return;const o=Math.max(0,Math.min(s,e.length-1));if(o===this.rovingIndex)return;this.rovingIndex=o;const t=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));t[o]?.focus({preventScroll:true})}renderRailAction(s,e){const o=s.ariaLabel??s.label??m[s.id]??s.id;return t("ds-tooltip",{key:s.id,label:o,shortcutKey:s.shortcutKey??g[s.id],side:"left",size:"sm"},t("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:s.icon,isActive:this.isRailSelected(s.id),activeFill:false,hasBorder:false,pressScale:false,dot:s.dot??false,isInactive:s.isInactive,focusTabIndex:e===this.rovingIndex?0:-1,"aria-label":o,pressed:this.isRailSelected(s.id),onFocusin:()=>{this.rovingIndex=e},onKeyDown:s=>this.handleRailKeyDown(s,e),onDsClick:()=>this.handleToolChange(s.id)}))}render(){const s=this.headerLabel();const e=this.activeHeader();const o=e.title?.trim()||s;const n=e.actions??[];const l=this.orderedRailItems;const a=l.filter((s=>_(s)==="header"));const r=l.filter((s=>_(s)==="body"));const d=l.filter((s=>_(s)==="footer"));const c=a.length;const h=c+r.length;const p=this.isDrawerPresent();const f=k(this.open,this.motion);const u=Boolean(p&&this.activeTool&&this.hasFullView(this.activeTool));const m=l.map((s=>s.id));return t(i,{key:"6be38c0e1c8a76da30ac642a7550060ca57006fc",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":f,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},t("div",{key:"bebb2a0eff375d3c21757ad85c0bb101fc69744d",class:"panel-tools__layout"},t("nav",{key:"d8c74f835a6b673a13c4348451ba6abe0a7571bd",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},a.length?t("div",{class:"panel-tools__rail-header ds-chrome-row ds-chrome-space--md"},a.map(((s,e)=>this.renderRailAction(s,e)))):null,t("div",{key:"d5ace1499ed6c32cc15fd51926023cffb71886ff",class:{"panel-tools__rail-body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.railBodyScrollable},ref:s=>{const e=s??undefined;if(e===this.railBodyEl)return;this.railBodyEl=e;this.connectRailBodyObserver()},role:this.railBodyScrollable?"region":undefined,"aria-label":this.railBodyScrollable?this.toolShortcutsLabel:undefined,tabIndex:this.railBodyScrollable?0:undefined},t("div",{key:"05eb1dcd42583a68f5d39f28c7b7f7af08765180",class:"panel-tools__rail-actions"},r.map(((s,e)=>this.renderRailAction(s,c+e))))),d.length?t("div",{class:"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md"},d.map(((s,e)=>this.renderRailAction(s,h+e)))):null),t("div",{key:"56ea875521a3e8583c318d9df2d821ee90408fd7",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":p},"aria-hidden":p?null:"true",inert:p?undefined:true},t("div",{key:"fa5ba5313bd59c245585b31e9a2a932921649047",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?t("ds-panel-tool-header",{class:"panel-tools__header",heading:o,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,t("div",{key:"817bec4473fa6f1d3ec9f5f41a2412909dc465f5",class:"panel-tools__body",hidden:u},m.map((s=>{const e=this.isViewActive(s);return t("div",{class:{"panel-tools__view":true,"panel-tools__view--active":e},hidden:!e},t("slot",{name:s}))}))),t("div",{key:"389284421dff07c30ecdf29737563679f1cfe518",class:"panel-tools__full-views",hidden:!u},m.map((s=>t("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(s)&&this.hasFullView(s)},hidden:!(this.isViewActive(s)&&this.hasFullView(s))},t("slot",{name:`${s}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}}static get style(){return A()}},[262,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],railBodyScrollable:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}]);function S(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tools":if(!customElements.get(n(s))){customElements.define(n(s),z)}break;case"ds-badge":if(!customElements.get(n(s))){a()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){r()}break;case"ds-icon":if(!customElements.get(n(s))){d()}break;case"ds-loader":if(!customElements.get(n(s))){c()}break;case"ds-panel-tool-header":if(!customElements.get(n(s))){h()}break;case"ds-text":if(!customElements.get(n(s))){p()}break;case"ds-tooltip":if(!customElements.get(n(s))){f()}break}}))}S();export{z as P,m as a,C as b,v as c,S as d,b as o,y as r};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as s,H as e,c as o,h as t,a as i,t as n}from"./index.js";import{p as l}from"./p-CXduurfd.js";import{d as a}from"./p-dEouiXJ8.js";import{d as r}from"./p-DStd98dM.js";import{d}from"./p-C8U5BsJf.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as h}from"./p-B53Vpuqq.js";import{d as p}from"./p-Dhx_3_tf.js";import{d as f}from"./p-DyqLVdJp.js";const u=["search","messages","agents","stacks","activity","help"];const m={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const g={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};const v=[{id:"search",icon:"MagnifyingGlass",label:m.search,railPlacement:"header",order:0,shortcutKey:g.search,mobileDestination:"search"},{id:"messages",icon:"MessageBubbleStack",label:m.messages,order:1,shortcutKey:g.messages,mobileDestination:"messages"},{id:"agents",icon:"AI",label:m.agents,order:2,shortcutKey:g.agents,mobileDestination:"agents"},{id:"stacks",icon:"ViewMenu",label:m.stacks,order:3,shortcutKey:g.stacks,mobileDestination:"inbox"},{id:"activity",icon:"Bell",label:m.activity,order:4,shortcutKey:g.activity,mobileDestination:"inbox"},{id:"help",icon:"CircleQuestion",label:m.help,railPlacement:"footer",order:5,shortcutKey:g.help,mobileDestination:"help"}];function b(s){const e=new Map;for(const o of s){if(o.id.trim()&&!e.has(o.id))e.set(o.id,o)}const o={header:0,body:1,footer:2};return Array.from(e.values()).sort(((s,e)=>{const t=_(s);const i=_(e);const n=o[t]-o[i];if(n!==0)return n;const l=u.findIndex((e=>e===s.id));const a=u.findIndex((s=>s===e.id));const r=s.order??(l<0?Number.MAX_SAFE_INTEGER:l);const d=e.order??(a<0?Number.MAX_SAFE_INTEGER:a);return r-d}))}function w(s){return typeof s==="string"&&s.trim().length>0}function _(s){if(s.railPlacement)return s.railPlacement;if(s.id==="search")return"header";if(s.id==="help")return"footer";return"body"}function y(s,e,o){if(!o||s.some((s=>s.id===o))){return{open:e,activeTool:o,removedTool:""}}return{open:false,activeTool:"",removedTool:o}}function x(s){const e=s.transitionProperty.split(",").map((s=>s.trim()));const o=s.transitionDuration.split(",").map((s=>l(s.trim(),0)));const t=s.transitionDelay.split(",").map((s=>l(s.trim(),0)));return e.reduce(((s,e,i)=>{if(e!=="all"&&e!=="max-width")return s;const n=o[i%o.length]??0;const l=t[i%t.length]??0;return Math.max(s,n+l,0)}),0)}function k(s,e){return!s&&e==="idle"}function T(s,e,o){if(o==="closing")return s<=.5;if(o==="opening")return e>0&&s>=e-.5;return true}function C(s,e,o){if(s&&e===o){return{open:false,activeTool:o,selected:false}}return{open:true,activeTool:o,selected:true}}const A=()=>`.ds-control--lg.sc-ds-panel-tools,.ds-control--lg.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools,.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools,.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tools-h,.ds-control--lg.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-tools-h,.ds-chrome-space--sm.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tools-h,.ds-chrome-space--md.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tools-h,.ds-chrome-space--lg.sc-ds-panel-tools{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools,.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools,.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tools-h,.ds-chrome-row.sc-ds-panel-tools{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tools-h,.ds-chrome-column.sc-ds-panel-tools{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tools-h,.ds-chrome-grid.sc-ds-panel-tools{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-panel-tools:root,.sc-ds-panel-tools-h,.ds-forced-colors-scope.sc-ds-panel-tools{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-tools-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-tools-h,.ds-focus-ring.sc-ds-panel-tools,.ds-focus-ring-inset.sc-ds-panel-tools-h,.ds-focus-ring-inset.sc-ds-panel-tools{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-tools-h:focus-visible,.ds-focus-ring.sc-ds-panel-tools: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-tools-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-tools{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-tools-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-tools:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-tools-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-tools: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-tools-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-tools{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-tools-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-tools::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-panel-tools-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-scrollbar-hidden.sc-ds-panel-tools-h,.ds-scrollbar-hidden.sc-ds-panel-tools{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-tools-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-tools::-webkit-scrollbar{display:none}.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur) var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h:not(.panel-tools--fullscreen) .panel-tools__drawer-surface.sc-ds-panel-tools,.panel-tools--fullscreen.sc-ds-panel-tools-h:not([presentation='fullscreen']) .panel-tools__drawer-surface.sc-ds-panel-tools{visibility:hidden}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header.sc-ds-panel-tools{justify-content:center;height:var(--dimension-size-600);flex-shrink:0;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}.panel-tools__rail-actions.sc-ds-panel-tools{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-tools__rail-footer.sc-ds-panel-tools{justify-content:center;flex-shrink:0;margin-top:auto}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const z=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=o(this,"dsToolChange");this.dsPresentationChange=o(this,"dsPresentationChange");this.dsHeaderBack=o(this,"dsHeaderBack");this.dsHeaderAction=o(this,"dsHeaderAction");this.dsChromeTransitionStart=o(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=o(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.railBodyScrollable=false;this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=s=>{const e=s.detail;if(!this.activeTool||!e?.id)return;s.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:e.id})};this.handleTransitionEnd=s=>{const e=this.el.querySelector(".panel-tools__drawer");if(s.target!==e)return;if(s.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(s.type==="transitioncancel")return;if(e&&!this.drawerTransitionAtTerminal(e,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=s=>{const e=C(this.open,this.activeTool,s);this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:s,selected:e.selected})};this.handleRailKeyDown=(s,e)=>{const o=this.orderedRailItems;if(!o.length)return;if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleToolChange(o[e].id);return}if(s.key==="ArrowDown"){if(e>=o.length-1)return;s.preventDefault();this.focusRailAt(e+1);return}if(s.key==="ArrowUp"){if(e<=0)return;s.preventDefault();this.focusRailAt(e-1)}}}get railItems(){return this.items??[]}get orderedRailItems(){return b(this.railItems)}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null;this.disconnectRailBodyObserver()}presentationChanged(s,o){if(s===o)return;if(this.el.getAttribute("presentation")!==s){this.el.setAttribute("presentation",s)}const t=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(s==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof e?document.activeElement:null;this.open=true}else if(o==="fullscreen"){const s=this.focusBeforeFullscreen;const e=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(s?.isConnected){s.focus({preventScroll:true})}const o=s?document.activeElement===s||s.contains(document.activeElement):false;if(!o&&e)await this.focusHeaderAction(e);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:s})}handleFullscreenEscape(s){if(this.presentation!=="fullscreen"||s.key!=="Escape")return;s.preventDefault();s.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const s=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(s,e){if(s)this.drawerSurfaceRetained=true;if(this.readyForMotion&&e!==undefined&&e!==s){this.startDrawerTransition(s?"opening":"closing")}else if(!s){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.connectRailBodyObserver();this.updateRailBodyScrollable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}componentDidRender(){this.updateRailBodyScrollable()}connectRailBodyObserver(){this.disconnectRailBodyObserver();if(!this.railBodyEl||typeof ResizeObserver==="undefined")return;this.railBodyObserver=new ResizeObserver((()=>this.updateRailBodyScrollable()));this.railBodyObserver.observe(this.railBodyEl)}disconnectRailBodyObserver(){this.railBodyObserver?.disconnect();this.railBodyObserver=undefined}updateRailBodyScrollable(){const s=Boolean(this.railBodyEl&&this.railBodyEl.scrollHeight>this.railBodyEl.clientHeight+1);if(s!==this.railBodyScrollable)this.railBodyScrollable=s}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const s=localStorage.getItem(this.storageKey);if(w(s))this.activeTool=s}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const s=y(this.railItems,this.open,this.activeTool);if(!s.removedTool)return;this.clearPersistedTool();this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:s.removedTool,selected:false})}startDrawerTransition(s){const e=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=s;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:s});const o=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.transitionGeneration||this.motion!==s)return;if(!e){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(e,s)){this.finishDrawerTransition();return}const t=x(getComputedStyle(e));if(t<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),t)}))}))}drawerTransitionAtTerminal(s,e){const o=s.getBoundingClientRect().width;const t=s.querySelector(".panel-tools__drawer-surface");const i=t?.getBoundingClientRect().width??0;return T(o,i,e)}finishDrawerTransition(){const s=this.motion;const e=s!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(s==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(s){return this.open&&this.activeTool===s}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(s){return this.isDrawerPresent()&&this.activeTool===s}hasFullView(s){return this.fullViewToolIds.includes(s)}syncFullViewTools(){const s=this.orderedRailItems.map((s=>s.id));const e=s.filter((s=>Boolean(this.el.querySelector(`[slot="${s}-view"]`))));if(e.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";const s=this.railItems.find((s=>s.id===this.activeTool));return s?.label??m[this.activeTool]??this.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(s){const e=this.railItems.find((e=>e.id===s));if(!e||e.isInactive)return;this.handleToolChange(s)}async closeDrawer(){if(!this.open)return;const s=this.activeTool;this.open=false;if(s){this.dsToolChange.emit({id:s,selected:false})}}async focusHeaderAction(s){const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}focusRailAt(s){const e=this.orderedRailItems;if(!e.length)return;const o=Math.max(0,Math.min(s,e.length-1));if(o===this.rovingIndex)return;this.rovingIndex=o;const t=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));t[o]?.focus({preventScroll:true})}renderRailAction(s,e){const o=s.ariaLabel??s.label??m[s.id]??s.id;return t("ds-tooltip",{key:s.id,label:o,shortcutKey:s.shortcutKey??g[s.id],side:"left",size:"sm"},t("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:s.icon,isActive:this.isRailSelected(s.id),activeFill:false,hasBorder:false,pressScale:false,dot:s.dot??false,isInactive:s.isInactive,focusTabIndex:e===this.rovingIndex?0:-1,"aria-label":o,pressed:this.isRailSelected(s.id),onFocusin:()=>{this.rovingIndex=e},onKeyDown:s=>this.handleRailKeyDown(s,e),onDsClick:()=>this.handleToolChange(s.id)}))}render(){const s=this.headerLabel();const e=this.activeHeader();const o=e.title?.trim()||s;const n=e.actions??[];const l=this.orderedRailItems;const a=l.filter((s=>_(s)==="header"));const r=l.filter((s=>_(s)==="body"));const d=l.filter((s=>_(s)==="footer"));const c=a.length;const h=c+r.length;const p=this.isDrawerPresent();const f=k(this.open,this.motion);const u=Boolean(p&&this.activeTool&&this.hasFullView(this.activeTool));const m=l.map((s=>s.id));return t(i,{key:"6be38c0e1c8a76da30ac642a7550060ca57006fc",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":f,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},t("div",{key:"bebb2a0eff375d3c21757ad85c0bb101fc69744d",class:"panel-tools__layout"},t("nav",{key:"d8c74f835a6b673a13c4348451ba6abe0a7571bd",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},a.length?t("div",{class:"panel-tools__rail-header ds-chrome-row ds-chrome-space--md"},a.map(((s,e)=>this.renderRailAction(s,e)))):null,t("div",{key:"d5ace1499ed6c32cc15fd51926023cffb71886ff",class:{"panel-tools__rail-body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.railBodyScrollable},ref:s=>{const e=s??undefined;if(e===this.railBodyEl)return;this.railBodyEl=e;this.connectRailBodyObserver()},role:this.railBodyScrollable?"region":undefined,"aria-label":this.railBodyScrollable?this.toolShortcutsLabel:undefined,tabIndex:this.railBodyScrollable?0:undefined},t("div",{key:"05eb1dcd42583a68f5d39f28c7b7f7af08765180",class:"panel-tools__rail-actions"},r.map(((s,e)=>this.renderRailAction(s,c+e))))),d.length?t("div",{class:"panel-tools__rail-footer ds-chrome-row ds-chrome-space--md"},d.map(((s,e)=>this.renderRailAction(s,h+e)))):null),t("div",{key:"56ea875521a3e8583c318d9df2d821ee90408fd7",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":p},"aria-hidden":p?null:"true",inert:p?undefined:true},t("div",{key:"fa5ba5313bd59c245585b31e9a2a932921649047",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?t("ds-panel-tool-header",{class:"panel-tools__header",heading:o,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,t("div",{key:"817bec4473fa6f1d3ec9f5f41a2412909dc465f5",class:"panel-tools__body",hidden:u},m.map((s=>{const e=this.isViewActive(s);return t("div",{class:{"panel-tools__view":true,"panel-tools__view--active":e},hidden:!e},t("slot",{name:s}))}))),t("div",{key:"389284421dff07c30ecdf29737563679f1cfe518",class:"panel-tools__full-views",hidden:!u},m.map((s=>t("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(s)&&this.hasFullView(s)},hidden:!(this.isViewActive(s)&&this.hasFullView(s))},t("slot",{name:`${s}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}}static get style(){return A()}},[262,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],railBodyScrollable:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}]}]);function S(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tools":if(!customElements.get(n(s))){customElements.define(n(s),z)}break;case"ds-badge":if(!customElements.get(n(s))){a()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){r()}break;case"ds-icon":if(!customElements.get(n(s))){d()}break;case"ds-loader":if(!customElements.get(n(s))){c()}break;case"ds-panel-tool-header":if(!customElements.get(n(s))){h()}break;case"ds-text":if(!customElements.get(n(s))){p()}break;case"ds-tooltip":if(!customElements.get(n(s))){f()}break}}))}S();export{z as P,m as a,C as b,v as c,S as d,b as o,y as r};
|
|
2
|
+
//# sourceMappingURL=p-Dbobj7DI.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,H as n,c as a,h as s,a as i,t}from"./index.js";import{r as o,p as r,a as d,d as l,s as c,b as v}from"./p-GbTasczF.js";import{c as p}from"./p-CXduurfd.js";import{r as h}from"./p-C-vRkDyn.js";import{d as f}from"./p-dEouiXJ8.js";import{d as g}from"./p-DStd98dM.js";import{d as u}from"./p-C8U5BsJf.js";import{d as m}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Dhx_3_tf.js";import{d as _}from"./p-BH_lVRgp.js";function x(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:s}=e;if(s===true){a["scroll-edge-fade--at-end"]=true}else if(s&&typeof s==="object"){for(const e of n){if(s[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const y={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const w="data-nav-style";function k(e){if(e==="dashboard"||e==="settings")return e;return undefined}function z(e,n,a){const s=k(n);if(s)return s;const i=typeof document!=="undefined"?document.documentElement.getAttribute(w):null;const t=k(i);if(t)return t;return e}function C(e,n){return e!==n}const A="ds-panel-nav-user-menu-anchor";const I=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation:none}}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-panel-nav{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const N=()=>`.ds-control--lg.sc-ds-panel-nav,.ds-control--lg.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav,.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav,.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-nav-h,.ds-control--lg.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-nav-h,.ds-chrome-space--sm.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-nav-h,.ds-chrome-space--md.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-nav-h,.ds-chrome-space--lg.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav,.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav,.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav{flex-direction:column}.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.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-h,.ds-focus-ring.sc-ds-panel-nav,.ds-focus-ring-inset.sc-ds-panel-nav-h,.ds-focus-ring-inset.sc-ds-panel-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-nav-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible::after,.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-h,.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-h::after,.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))}@media (forced-colors: active){.sc-ds-panel-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-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;cursor:inherit;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 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), 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)}@media (hover: hover) and (pointer: fine){.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--grouped.sc-ds-panel-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.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;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-nav{--ds-interaction-active:var(--color-interaction-active)}.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-translucent.sc-ds-panel-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-scrollbar-hidden.sc-ds-panel-nav-h,.ds-scrollbar-hidden.sc-ds-panel-nav{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-nav-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-nav::-webkit-scrollbar{display:none}.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-shell-app.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-shell-app:not([gradient-preset='none']) .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-ui, 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{height:var(--dimension-size-600, 48px);flex-shrink:0;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(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.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}@media (hover: hover) and (pointer: fine){.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .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}.panel-nav__sections.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);width:100%}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));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(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;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;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(--ds-control-label-inset)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate( calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)), calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px)) )}.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 ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));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-100, 8px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion), right var(--_nav-expand-motion), top var(--_nav-expand-motion)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav::after{background:var(--_nav-pressed)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav{color:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-pressed)}.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)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:inherit;pointer-events:none}.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 D=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.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.accountMenuExpanded=false;this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.navigationItemsLabel="Navigation items";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.bodyScrollable=false;this.transitionFallbackTimer=null;this.initialRenderComplete=false;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 o(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined||!this.initialRenderComplete)return;if(e&&this.rovingIndex===0){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.effectiveBreakpoint()>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=r(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=z(this.navStyle,this.el.getAttribute("nav-style"));this.viewportNarrow=this.isViewportNarrow();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.effectiveBreakpoint()>0)this.connectResizeObserver();this.connectScrollRegionObserver();this.updateBodyScrollable();this.initialRenderComplete=true}componentDidRender(){this.updateBodyScrollable()}disconnectedCallback(){this.disconnectResizeObserver();this.disconnectScrollRegionObserver();this.clearCollapseAnimationCompletion(this.el.querySelector(".panel-nav"));this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;this.clearCollapseAnimationCompletion(e);this.transitionCompletionHandler=n=>{if(n.propertyName==="width"||n.propertyName==="min-width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionCompletionHandler);e?.addEventListener("transitioncancel",this.transitionCompletionHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e);return}if(!e){this.finishCollapseAnimation(e);return}const s=d(getComputedStyle(e));if(s<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),s)}))}))}finishCollapseAnimation(e){const n=this.isAnimating;this.clearCollapseAnimationCompletion(e);if(!n)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"})}clearCollapseAnimationCompletion(e){if(this.transitionCompletionHandler){e?.removeEventListener("transitionend",this.transitionCompletionHandler);e?.removeEventListener("transitioncancel",this.transitionCompletionHandler);this.transitionCompletionHandler=undefined}if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}effectiveBreakpoint(){if(this.breakpoint>0)return this.breakpoint;const e=Number(this.el.getAttribute("breakpoint")??0);return Number.isFinite(e)&&e>0?e:0}isViewportNarrow(){const e=this.effectiveBreakpoint();return typeof window!=="undefined"&&e>0&&window.innerWidth<e}connectResizeObserver(){this.viewportNarrow=this.isViewportNarrow();this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=this.isViewportNarrow()}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}connectScrollRegionObserver(){this.disconnectScrollRegionObserver();if(!this.bodyEl||typeof ResizeObserver==="undefined")return;this.scrollRegionObserver=new ResizeObserver((()=>this.updateBodyScrollable()));this.scrollRegionObserver.observe(this.bodyEl)}disconnectScrollRegionObserver(){this.scrollRegionObserver?.disconnect();this.scrollRegionObserver=undefined}updateBodyScrollable(){const e=Boolean(this.bodyEl&&this.bodyEl.scrollHeight>this.bodyEl.clientHeight+1);if(e!==this.bodyScrollable)this.bodyScrollable=e}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=l(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(C(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(c(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){if(this.viewportNarrow)return;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))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.viewportNarrow?null: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-unfilled")}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(`#${A}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:y})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const s=this.getUserRovingIndex();const i=this.getFirstRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===s)return;if(n===a)t=s;else t=n+1;break;case"ArrowUp":if(n===i)return;if(n===s)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=s;else return;break;case"ArrowLeft":if(n===s)t=a;else return;break;case"Home":e.preventDefault();t=i;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=v(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:y})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(p()){this.showEdgeOverlay=true;return}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 s=()=>{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",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=s;window.addEventListener("mousemove",a);window.addEventListener("mouseup",s)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return s("ds-tooltip",{label:n,side:"right",size:"sm"},s("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 i=e?this.accountLabel:"";const t=s("button",{type:"button",id:A,class:{"panel-nav__item":true,"panel-nav__item--active":this.accountMenuExpanded,"panel-nav__footer-user":true,"panel-nav__footer-user--menu-expanded":this.accountMenuExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true},tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,"aria-haspopup":"menu","aria-expanded":String(this.accountMenuExpanded),onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},n),s("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{class:"panel-nav__footer-icon-expanded"},s("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{name:"Circle",size:"md",color:"inherit"}),s("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return s("ds-tooltip",{label:i,side:"right",size:"sm"},t)}renderNavItem(e,n,a){const i=e.id===this.effectiveActiveId;const t=n+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit"})),s("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:i,color:"inherit",lineTruncation:1},e.label),e.dot&&s("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},s("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":i,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,tabIndex:t===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,t),onFocus:()=>{this.rovingIndex=t}};const d=h(e.href);const l=this.routerMode==="anchor"&&d;const c=l?s("a",{...r,href:d},o):s("button",{...r,type:"button"},o);return s("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},c)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const t=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"ds-control--md":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":t,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return s(i,{key:"be5cd2a00dd4ed51d184caac65d24ace96aa7b93",style:{display:"block",position:"relative"}},s("nav",{key:"3c9d6605e6208dbf1ff4942ab7edb20e9ef1c48c",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},s("div",{key:"77219c96a63fd1ddc2b73205da987dbe970cd7b1",class:"panel-nav__header ds-chrome-row ds-chrome-space--md"},s("button",{key:"3468c4fde824ecab76a63a2e84feb6db40738e0b",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":t?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":t?"false":"true"},s("span",{key:"49aee4a5086cf736c789b6bfdd43a0285880670c",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"9a81ec81f7954650e6bd8dedc5e2835b3cda6076",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"008d1f4625011fb114ad8dc3a659e51fc4ecaf2b",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"}))),s("span",{key:"c0c2ec9a564bf3b93fc8b6a2b4cee25ed16aa1dc",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"70ca18101a84654c5b38288f241c7b53270b028e",name:t?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"71759b9a5ffee42bad5768cc5546b176a8e00e25",class:{"panel-nav__body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.bodyScrollable,...x({edges:"bottom"})},ref:e=>{const n=e??undefined;if(n===this.bodyEl)return;this.bodyEl=n;this.connectScrollRegionObserver()},role:this.bodyScrollable?"region":undefined,"aria-label":this.bodyScrollable?this.navigationItemsLabel:undefined,tabIndex:this.bodyScrollable?0:undefined},s("div",{key:"4da0609b82f03d16e17f8f2dd6b4b5f63e43f9b0",class:"panel-nav__sections"},(()=>{let e=0;return this.parsedGroups.map((n=>s("div",{class:"panel-nav__group"},n.label&&s("ds-text",{class:"panel-nav__group-label ds-control--md",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,t))))))})())),s("div",{key:"b546837f4d3c335ef96473e1fc9c206b724eb291",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(t,o,r))),!this.viewportNarrow&&s("div",{key:"9e74b3f9abf66c10cfb0ef85b276d88877000020",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 I()+N()}},[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"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],accountMenuExpanded:[4,"account-menu-expanded"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],navigationItemsLabel:[1,"navigation-items-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],bodyScrollable:[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}]}]);D.HOST_PROP_SYNC_BUDGET=8;function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(t(e))){customElements.define(t(e),D)}break;case"ds-badge":if(!customElements.get(t(e))){f()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){g()}break;case"ds-icon":if(!customElements.get(t(e))){u()}break;case"ds-loader":if(!customElements.get(t(e))){m()}break;case"ds-text":if(!customElements.get(t(e))){b()}break;case"ds-tooltip":if(!customElements.get(t(e))){_()}break}}))}S();export{D as P,S as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as e,H as n,c as a,h as s,a as i,t}from"./index.js";import{r as o,p as r,a as d,d as l,s as c,b as v}from"./p-GbTasczF.js";import{c as p}from"./p-CXduurfd.js";import{r as h}from"./p-C-vRkDyn.js";import{d as f}from"./p-dEouiXJ8.js";import{d as g}from"./p-DStd98dM.js";import{d as u}from"./p-C8U5BsJf.js";import{d as m}from"./p-Ca-I2UnB.js";import{d as b}from"./p-Dhx_3_tf.js";import{d as _}from"./p-DyqLVdJp.js";function x(e){const n=Array.isArray(e.edges)?e.edges:[e.edges];const a={"scroll-edge-fade":true,"scroll-edge-fade--scroll-aware":e.scrollAware===true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of n){a[`scroll-edge-fade--${e}`]=true}const{atEnd:s}=e;if(s===true){a["scroll-edge-fade--at-end"]=true}else if(s&&typeof s==="object"){for(const e of n){if(s[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const y={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const w="data-nav-style";function k(e){if(e==="dashboard"||e==="settings")return e;return undefined}function z(e,n,a){const s=k(n);if(s)return s;const i=typeof document!=="undefined"?document.documentElement.getAttribute(w):null;const t=k(i);if(t)return t;return e}function C(e,n){return e!==n}const A="ds-panel-nav-user-menu-anchor";const I=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-panel-nav{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient( to bottom, transparent 0, #000 var(--ds-scroll-edge-fade-top), #000 calc(100% - var(--ds-scroll-edge-fade-bottom)), transparent 100% );--ds-scroll-edge-fade-inline-mask:linear-gradient( to right, transparent 0, #000 var(--ds-scroll-edge-fade-left), #000 calc(100% - var(--ds-scroll-edge-fade-right)), transparent 100% );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask), var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-panel-nav{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation-name:ds-scroll-edge-fade-reveal-top, ds-scroll-edge-fade-reveal-bottom, ds-scroll-edge-fade-reveal-left, ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%, 0 var(--ds-scroll-edge-fade-reveal-distance), calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-panel-nav{animation:none}}}.scroll-edge-fade--at-end.sc-ds-panel-nav,.scroll-edge-fade--hidden.sc-ds-panel-nav{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-panel-nav{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );mask-image:linear-gradient( to bottom, #000 0, #000 var(--ds-scroll-edge-fade-window-start), transparent var(--ds-scroll-edge-fade-window-end) );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const N=()=>`.ds-control--lg.sc-ds-panel-nav,.ds-control--lg.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav,.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav,.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-nav-h,.ds-control--lg.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-nav-h,.ds-control--md.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-nav-h,.ds-control--sm.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-nav-h,.ds-control--xs.sc-ds-panel-nav{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-panel-nav-h,.ds-chrome-space--sm.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-nav-h,.ds-chrome-space--md.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-nav-h,.ds-chrome-space--lg.sc-ds-panel-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav,.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav,.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-nav-h,.ds-chrome-row.sc-ds-panel-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-nav-h,.ds-chrome-column.sc-ds-panel-nav{flex-direction:column}.ds-chrome-grid.sc-ds-panel-nav-h,.ds-chrome-grid.sc-ds-panel-nav{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.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-h,.ds-focus-ring.sc-ds-panel-nav,.ds-focus-ring-inset.sc-ds-panel-nav-h,.ds-focus-ring-inset.sc-ds-panel-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-panel-nav-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-nav-h:focus-visible::after,.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-h,.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-h::after,.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))}@media (forced-colors: active){.sc-ds-panel-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-nav:root,.sc-ds-panel-nav-h,.ds-forced-colors-scope.sc-ds-panel-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-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;cursor:inherit;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 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), 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)}@media (hover: hover) and (pointer: fine){.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--grouped.sc-ds-panel-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.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;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-panel-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-nav{--ds-interaction-active:var(--color-interaction-active)}.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-translucent.sc-ds-panel-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-panel-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-panel-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-scrollbar-hidden.sc-ds-panel-nav-h,.ds-scrollbar-hidden.sc-ds-panel-nav{scrollbar-width:none}.ds-scrollbar-hidden.sc-ds-panel-nav-h::-webkit-scrollbar,.ds-scrollbar-hidden.sc-ds-panel-nav::-webkit-scrollbar{display:none}.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-shell-app.sc-ds-panel-nav-h:not([gradient-preset='none']) .panel-nav.sc-ds-panel-nav,ds-shell-app:not([gradient-preset='none']) .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-ui, 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{height:var(--dimension-size-600, 48px);flex-shrink:0;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(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--breakpoint-locked.sc-ds-panel-nav .panel-nav__header-btn.sc-ds-panel-nav{cursor:default}.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}@media (hover: hover) and (pointer: fine){.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav.sc-ds-panel-nav:not(.panel-nav--breakpoint-locked) .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}.panel-nav__sections.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);width:100%}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}ds-text.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;box-sizing:border-box;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));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(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:default;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;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(--ds-control-label-inset)}.panel-nav__item-dot-box.sc-ds-panel-nav{position:absolute;z-index:2;right:var(--dimension-space-075, 6px);top:var(--dimension-space-075, 6px);display:flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);pointer-events:none}.panel-nav__item-dot.sc-ds-panel-nav{transition:transform var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{transform:translate( calc(var(--dimension-space-075, 6px) + var(--dimension-stroke-width-012, 1px)), calc(0px - var(--dimension-space-075, 6px) - var(--dimension-stroke-width-012, 1px)) )}.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 ds-text.panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 calc(var(--dimension-space-075, 6px) + var(--ds-control-label-inset));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-100, 8px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion), right var(--_nav-expand-motion), top var(--_nav-expand-motion)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav::after{background:var(--_nav-pressed)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav{color:var(--_nav-fg-primary);--ds-interaction-hover:var(--_nav-pressed)}.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)}ds-text.panel-nav__user-initial.sc-ds-panel-nav,ds-text.panel-nav__user-initial.ds-text--caption.sc-ds-panel-nav{position:absolute;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%, -50%);display:block;width:max-content;max-width:none;min-width:0;text-align:center;color:inherit;pointer-events:none}.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 D=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.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.accountMenuExpanded=false;this.dashboardNavigationLabel="Dashboard navigation";this.settingsNavigationLabel="Settings navigation";this.expandNavigationLabel="Expand navigation";this.collapseNavigationLabel="Collapse navigation";this.navigationItemsLabel="Navigation items";this.renderedStyle="dashboard";this.parsedGroups=[];this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.bodyScrollable=false;this.transitionFallbackTimer=null;this.initialRenderComplete=false;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 o(this.disableViewTransition,this.el.getAttribute("disable-view-transition"))}onCollapsedChange(e,n){if(n===undefined||!this.initialRenderComplete)return;this.startCollapseAnimation()}onViewportNarrowChange(e,n){if(n===undefined||!this.initialRenderComplete)return;if(e&&this.rovingIndex===0){this.rovingIndex=this.getFirstRovingIndex()}this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.effectiveBreakpoint()>0)this.connectResizeObserver()}onGroupsChange(e){this.parsedGroups=r(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=z(this.navStyle,this.el.getAttribute("nav-style"));this.viewportNarrow=this.isViewportNarrow();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.effectiveBreakpoint()>0)this.connectResizeObserver();this.connectScrollRegionObserver();this.updateBodyScrollable();this.initialRenderComplete=true}componentDidRender(){this.updateBodyScrollable()}disconnectedCallback(){this.disconnectResizeObserver();this.disconnectScrollRegionObserver();this.clearCollapseAnimationCompletion(this.el.querySelector(".panel-nav"));this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){if(this.isAnimating)return;this.isAnimating=true;this.dsChromeTransitionStart.emit({source:"panel-nav"});const e=this.el.querySelector(".panel-nav");const n=e?.getBoundingClientRect().width??0;this.clearCollapseAnimationCompletion(e);this.transitionCompletionHandler=n=>{if(n.propertyName==="width"||n.propertyName==="min-width"){this.finishCollapseAnimation(e)}};e?.addEventListener("transitionend",this.transitionCompletionHandler);e?.addEventListener("transitioncancel",this.transitionCompletionHandler);requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(!this.isAnimating)return;const a=e?.getBoundingClientRect().width??0;if(Math.abs(a-n)<1){this.finishCollapseAnimation(e);return}if(!e){this.finishCollapseAnimation(e);return}const s=d(getComputedStyle(e));if(s<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),s)}))}))}finishCollapseAnimation(e){const n=this.isAnimating;this.clearCollapseAnimationCompletion(e);if(!n)return;this.isAnimating=false;this.dsChromeTransitionEnd.emit({source:"panel-nav"})}clearCollapseAnimationCompletion(e){if(this.transitionCompletionHandler){e?.removeEventListener("transitionend",this.transitionCompletionHandler);e?.removeEventListener("transitioncancel",this.transitionCompletionHandler);this.transitionCompletionHandler=undefined}if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}effectiveBreakpoint(){if(this.breakpoint>0)return this.breakpoint;const e=Number(this.el.getAttribute("breakpoint")??0);return Number.isFinite(e)&&e>0?e:0}isViewportNarrow(){const e=this.effectiveBreakpoint();return typeof window!=="undefined"&&e>0&&window.innerWidth<e}connectResizeObserver(){this.viewportNarrow=this.isViewportNarrow();this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=this.isViewportNarrow()}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}connectScrollRegionObserver(){this.disconnectScrollRegionObserver();if(!this.bodyEl||typeof ResizeObserver==="undefined")return;this.scrollRegionObserver=new ResizeObserver((()=>this.updateBodyScrollable()));this.scrollRegionObserver.observe(this.bodyEl)}disconnectScrollRegionObserver(){this.scrollRegionObserver?.disconnect();this.scrollRegionObserver=undefined}updateBodyScrollable(){const e=Boolean(this.bodyEl&&this.bodyEl.scrollHeight>this.bodyEl.clientHeight+1);if(e!==this.bodyScrollable)this.bodyScrollable=e}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}this.urlDerivedActiveId=l(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(C(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(c(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){if(this.viewportNarrow)return;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))}getFirstRovingIndex(){return this.viewportNarrow?1:0}getFooterRovingIndex(){return 1+this.getAllItems().length}getUserRovingIndex(){return this.getFooterRovingIndex()+1}getRovingElement(e){const n=this.getAllItems().length;if(e===0){return this.viewportNarrow?null: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-unfilled")}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(`#${A}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:y})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const s=this.getUserRovingIndex();const i=this.getFirstRovingIndex();let t;switch(e.key){case"ArrowDown":if(n===s)return;if(n===a)t=s;else t=n+1;break;case"ArrowUp":if(n===i)return;if(n===s)t=a;else if(n===a)t=a-1;else t=n-1;break;case"ArrowRight":if(n===a)t=s;else return;break;case"ArrowLeft":if(n===s)t=a;else return;break;case"Home":e.preventDefault();t=i;break;case"End":e.preventDefault();t=s;break;default:return}if(t===undefined||t===n)return;e.preventDefault();this.focusRovingAt(t)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=v(this.collapsed,this.viewportNarrow);if(e!==null)this.applyToggle(e)}async toggleCollapsed(){this.handleToggle()}handleFooterAction(){this.dsNavFooterAction.emit()}handleUserAction(e){const n=e.currentTarget;this.dsNavUserAction.emit({anchor:n,menuPlacement:y})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(p()){this.showEdgeOverlay=true;return}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 s=()=>{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",s);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=s;window.addEventListener("mousemove",a);window.addEventListener("mouseup",s)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return s("ds-tooltip",{label:n,side:"right",size:"sm"},s("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 i=e?this.accountLabel:"";const t=s("button",{type:"button",id:A,class:{"panel-nav__item":true,"panel-nav__item--active":this.accountMenuExpanded,"panel-nav__footer-user":true,"panel-nav__footer-user--menu-expanded":this.accountMenuExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true},tabIndex:this.rovingIndex===this.getUserRovingIndex()?0:-1,"aria-label":this.accountLabel,"aria-haspopup":"menu","aria-expanded":String(this.accountMenuExpanded),onClick:e=>this.handleUserAction(e),onKeyDown:e=>this.handleRovingKeyDown(e,this.getUserRovingIndex()),onFocus:()=>{this.rovingIndex=this.getUserRovingIndex()}},s("ds-text",{class:"panel-nav__item-label panel-nav__footer-user-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},n),s("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},s("span",{class:"panel-nav__footer-icon-expanded"},s("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),s("span",{class:"panel-nav__footer-icon-collapsed"},s("ds-icon",{name:"Circle",size:"md",color:"inherit"}),s("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return s("ds-tooltip",{label:i,side:"right",size:"sm"},t)}renderNavItem(e,n,a){const i=e.id===this.effectiveActiveId;const t=n+1;const o=[s("span",{class:"panel-nav__item-icon"},s("ds-icon",{name:e.icon,size:"md",color:"inherit"})),s("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:i,color:"inherit",lineTruncation:1},e.label),e.dot&&s("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},s("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":i,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":i?"page":undefined,tabIndex:t===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,t),onFocus:()=>{this.rovingIndex=t}};const d=h(e.href);const l=this.routerMode==="anchor"&&d;const c=l?s("a",{...r,href:d},o):s("button",{...r,type:"button"},o);return s("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},c)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const t=this.collapsed||this.viewportNarrow;const{userName:o,userInitial:r}=this;const d={"panel-nav":true,"ds-control--md":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":t,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return s(i,{key:"be5cd2a00dd4ed51d184caac65d24ace96aa7b93",style:{display:"block",position:"relative"}},s("nav",{key:"3c9d6605e6208dbf1ff4942ab7edb20e9ef1c48c",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},s("div",{key:"77219c96a63fd1ddc2b73205da987dbe970cd7b1",class:"panel-nav__header ds-chrome-row ds-chrome-space--md"},s("button",{key:"3468c4fde824ecab76a63a2e84feb6db40738e0b",type:"button",class:"panel-nav__header-btn ds-focus-ring-inset ds-interaction-fill",disabled:this.viewportNarrow,tabIndex:!this.viewportNarrow&&this.rovingIndex===0?0:-1,onClick:()=>this.handleToggle(),onKeyDown:e=>this.handleRovingKeyDown(e,0),onFocus:()=>{this.rovingIndex=0},"aria-label":t?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":t?"false":"true"},s("span",{key:"49aee4a5086cf736c789b6bfdd43a0285880670c",class:"panel-nav__header-logo","aria-hidden":"true"},s("svg",{key:"9a81ec81f7954650e6bd8dedc5e2835b3cda6076",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},s("path",{key:"008d1f4625011fb114ad8dc3a659e51fc4ecaf2b",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"}))),s("span",{key:"c0c2ec9a564bf3b93fc8b6a2b4cee25ed16aa1dc",class:"panel-nav__header-toggle","aria-hidden":"true"},s("ds-icon",{key:"70ca18101a84654c5b38288f241c7b53270b028e",name:t?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),s("div",{key:"71759b9a5ffee42bad5768cc5546b176a8e00e25",class:{"panel-nav__body":true,"ds-chrome-column":true,"ds-chrome-space--md":true,"ds-scrollbar-hidden":true,"ds-focus-ring":this.bodyScrollable,...x({edges:"bottom"})},ref:e=>{const n=e??undefined;if(n===this.bodyEl)return;this.bodyEl=n;this.connectScrollRegionObserver()},role:this.bodyScrollable?"region":undefined,"aria-label":this.bodyScrollable?this.navigationItemsLabel:undefined,tabIndex:this.bodyScrollable?0:undefined},s("div",{key:"4da0609b82f03d16e17f8f2dd6b4b5f63e43f9b0",class:"panel-nav__sections"},(()=>{let e=0;return this.parsedGroups.map((n=>s("div",{class:"panel-nav__group"},n.label&&s("ds-text",{class:"panel-nav__group-label ds-control--md",as:"span",variant:"text-caption",emphasis:true,color:"inherit"},n.label),n.items.map((n=>this.renderNavItem(n,e++,t))))))})())),s("div",{key:"b546837f4d3c335ef96473e1fc9c206b724eb291",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(t,o,r))),!this.viewportNarrow&&s("div",{key:"9e74b3f9abf66c10cfb0ef85b276d88877000020",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 I()+N()}},[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"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],accountMenuExpanded:[4,"account-menu-expanded"],dashboardNavigationLabel:[1,"dashboard-navigation-label"],settingsNavigationLabel:[1,"settings-navigation-label"],expandNavigationLabel:[1,"expand-navigation-label"],collapseNavigationLabel:[1,"collapse-navigation-label"],navigationItemsLabel:[1,"navigation-items-label"],renderedStyle:[32],parsedGroups:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],bodyScrollable:[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}]}]);D.HOST_PROP_SYNC_BUDGET=8;function S(){if(typeof customElements==="undefined"){return}const e=["ds-panel-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-nav":if(!customElements.get(t(e))){customElements.define(t(e),D)}break;case"ds-badge":if(!customElements.get(t(e))){f()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){g()}break;case"ds-icon":if(!customElements.get(t(e))){u()}break;case"ds-loader":if(!customElements.get(t(e))){m()}break;case"ds-text":if(!customElements.get(t(e))){b()}break;case"ds-tooltip":if(!customElements.get(t(e))){_()}break}}))}S();export{D as P,S as d};
|
|
2
|
+
//# sourceMappingURL=p-DrvEhJhO.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as o,h as i,a as s,t as n}from"./index.js";import{A as e}from"./p-BBxcMVqk.js";import{d as r}from"./p-Dhx_3_tf.js";import{b as d,T as a,r as l,a as c}from"./p-CXduurfd.js";import{r as h}from"./p-BJMRBHKW.js";import{C as p}from"./p-CuwopElg.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const m={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return m[t.toLowerCase()]??t}function g(t){const o=t.trim();if(!o)return[];if(o.includes("+")){return o.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(o)){return o.split(/\s+/).filter(Boolean).map(f)}const i=Array.from(o);const s=[];while(i.length>1&&u.has(i[0])){s.push(i.shift())}s.push(i.join(""));return s}const v=()=>`.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}@media (forced-colors: active){.sc-ds-tooltip:root,.sc-ds-tooltip-h,.ds-forced-colors-scope.sc-ds-tooltip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}@media (forced-colors: active){.tooltip-popup.sc-ds-tooltip{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const y={md:a.size400,sm:a.size300,xs:a.size200};let b=0;let x=0;let w=null;function C(t){const o=document.createElement("ds-text");o.as="span";o.variant=t.variant;o.emphasis=t.emphasis??false;o.color=t.color??"inherit";if(t.wrap)o.wrap=t.wrap;o.textContent=t.text;return o}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const P=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=d.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.anchorObserver=null;this.position=new e({getAnchor:()=>this.anchor,getPopup:()=>this.popupEl,measure:(t,o)=>({anchorRect:t.getBoundingClientRect(),popupWidth:o.offsetWidth||this.tooltipFallbackWidthPx,popupHeight:o.offsetHeight||this.tooltipFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}),apply:({x:t,y:o,resolvedSide:i})=>{if(!this.popupEl)return;this.popupEl.dataset.side=i;this.popupEl.style.transform=`translate(${Math.round(t)}px, ${Math.round(o)}px)`},liveUpdate:"frame",observeResize:true});this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const o=t.relatedTarget;if(o&&this.anchor?.contains(o))return;this.hide()};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const o=t?.assignedElements?.()[0]??this.el.firstElementChild;if(o===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(a.space050,a.space050)}get sideOffsetPx(){return h(this.sideOffset,a.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return l(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return l(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return c(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const o=t?.assignedElements?.()??[];const i=o[0]??this.el.firstElementChild;if(!i||i===this.anchor)return;this.anchor=i;i.addEventListener("pointerenter",this.pointerEnterHandler);i.addEventListener("pointerleave",this.pointerLeaveHandler);i.addEventListener("pointerdown",this.pointerDownHandler);i.addEventListener("keydown",this.keyDownHandler);i.addEventListener("focusin",this.focusHandler);i.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){this.position.observe();document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){this.position.unobserve();document.removeEventListener("keydown",this.escapeHandler)}destroyPopup(){this.teardownOpenListeners();this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof o)k(t)};requestAnimationFrame((()=>{t();this.position.update();requestAnimationFrame((()=>{t();this.position.update()}))}));this.position.observeResizeTargets()}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup ds-forced-colors-scope sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const o=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const i="sc-ds-tooltip";const s=document.createElement("div");s.className=`tooltip-inner ${o} ${i}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const o=document.createElement("span");o.className=`key-hint-group ${i}`;o.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const s=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";s.className=`key-hint${n} ${i}`;const e=document.createElement("span");e.className=`key-hint__label ${i}`;e.textContent=t;s.appendChild(e);o.appendChild(s)}s.appendChild(o)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);s.appendChild(e);n("end");this.popupEl.replaceChildren(s)}render(){return i(s,{key:"e2a027068196e29bb8bed49baeb9335410d6df24",style:{display:"contents"}},i("slot",{key:"ae3148da2fb8fef71addf2ded1fb3ae5e9c35415",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function O(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),P)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}O();export{P as T,O as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as o,h as i,a as s,t as n}from"./index.js";import{A as e}from"./p-BBxcMVqk.js";import{d as r}from"./p-Dhx_3_tf.js";import{b as d,T as a,r as l,a as c}from"./p-CXduurfd.js";import{r as h}from"./p-BMc0DE59.js";import{C as p}from"./p-CuwopElg.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const m={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return m[t.toLowerCase()]??t}function g(t){const o=t.trim();if(!o)return[];if(o.includes("+")){return o.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(o)){return o.split(/\s+/).filter(Boolean).map(f)}const i=Array.from(o);const s=[];while(i.length>1&&u.has(i[0])){s.push(i.shift())}s.push(i.join(""));return s}const v=()=>`.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}@media (forced-colors: active){.sc-ds-tooltip:root,.sc-ds-tooltip-h,.ds-forced-colors-scope.sc-ds-tooltip{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}@media (forced-colors: active){.tooltip-popup.sc-ds-tooltip{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const y={md:a.size400,sm:a.size300,xs:a.size200};let b=0;let x=0;let w=null;function C(t){const o=document.createElement("ds-text");o.as="span";o.variant=t.variant;o.emphasis=t.emphasis??false;o.color=t.color??"inherit";if(t.wrap)o.wrap=t.wrap;o.textContent=t.text;return o}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const P=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=d.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.anchorObserver=null;this.position=new e({getAnchor:()=>this.anchor,getPopup:()=>this.popupEl,measure:(t,o)=>({anchorRect:t.getBoundingClientRect(),popupWidth:o.offsetWidth||this.tooltipFallbackWidthPx,popupHeight:o.offsetHeight||this.tooltipFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}),apply:({x:t,y:o,resolvedSide:i})=>{if(!this.popupEl)return;this.popupEl.dataset.side=i;this.popupEl.style.transform=`translate(${Math.round(t)}px, ${Math.round(o)}px)`},liveUpdate:"frame",observeResize:true});this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const o=t.relatedTarget;if(o&&this.anchor?.contains(o))return;this.hide()};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const o=t?.assignedElements?.()[0]??this.el.firstElementChild;if(o===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(a.space050,a.space050)}get sideOffsetPx(){return h(this.sideOffset,a.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return l(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return l(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return c(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const o=t?.assignedElements?.()??[];const i=o[0]??this.el.firstElementChild;if(!i||i===this.anchor)return;this.anchor=i;i.addEventListener("pointerenter",this.pointerEnterHandler);i.addEventListener("pointerleave",this.pointerLeaveHandler);i.addEventListener("pointerdown",this.pointerDownHandler);i.addEventListener("keydown",this.keyDownHandler);i.addEventListener("focusin",this.focusHandler);i.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){this.position.observe();document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){this.position.unobserve();document.removeEventListener("keydown",this.escapeHandler)}destroyPopup(){this.teardownOpenListeners();this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof o)k(t)};requestAnimationFrame((()=>{t();this.position.update();requestAnimationFrame((()=>{t();this.position.update()}))}));this.position.observeResizeTargets()}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup ds-forced-colors-scope sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const o=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const i="sc-ds-tooltip";const s=document.createElement("div");s.className=`tooltip-inner ${o} ${i}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const o=document.createElement("span");o.className=`key-hint-group ${i}`;o.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const s=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";s.className=`key-hint${n} ${i}`;const e=document.createElement("span");e.className=`key-hint__label ${i}`;e.textContent=t;s.appendChild(e);o.appendChild(s)}s.appendChild(o)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);s.appendChild(e);n("end");this.popupEl.replaceChildren(s)}render(){return i(s,{key:"e2a027068196e29bb8bed49baeb9335410d6df24",style:{display:"contents"}},i("slot",{key:"ae3148da2fb8fef71addf2ded1fb3ae5e9c35415",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function O(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),P)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}O();export{P as T,O as d};
|
|
2
|
+
//# sourceMappingURL=p-DyqLVdJp.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as i,H as e,c as t,h as s,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d}from"./p-dEouiXJ8.js";import{d as a}from"./p-IhToA4m4.js";import{d as l}from"./p-CdKz-QT2.js";import{d as h}from"./p-GWUTrIlk.js";import{d as f}from"./p-Dhx_3_tf.js";function u(i,e){const t=r(i);const s=t.findIndex((i=>i.id===e));const o=s>=0?s:0;return{selectedIndex:o,selected:t[o],hasPrevious:o>0,hasNext:o<t.length-1}}const v=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-section-switcher-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-mobile-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-mobile-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-translucent.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let b=0;const m=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.sections=[];this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=b++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const t=this.selectableSections.find((i=>i.id===e));if(!t||t.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return u(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return u(this.resolvedSections,this.value).hasPrevious}get hasNext(){return u(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const t=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){t();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}t();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return s(o,null);return s(o,null,s("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},s("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),s("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),s("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?s("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}]}}static get style(){return v()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}]}]);function w(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-menu","ds-swatch-picker","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),m)}break;case"ds-badge":if(!customElements.get(n(i))){d()}break;case"ds-menu":if(!customElements.get(n(i))){a()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){l()}break;case"ds-switch":if(!customElements.get(n(i))){h()}break;case"ds-text":if(!customElements.get(n(i))){f()}break}}))}w();export{m as M,w as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as i,H as e,c as t,h as s,a as o,t as n}from"./index.js";import{g as r,i as c}from"./p-BQq26pt9.js";import{d}from"./p-dEouiXJ8.js";import{d as a}from"./p-CMbcRN92.js";import{d as l}from"./p-CdKz-QT2.js";import{d as h}from"./p-GWUTrIlk.js";import{d as f}from"./p-Dhx_3_tf.js";function u(i,e){const t=r(i);const s=t.findIndex((i=>i.id===e));const o=s>=0?s:0;return{selectedIndex:o,selected:t[o],hasPrevious:o>0,hasNext:o<t.length-1}}const v=()=>`@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-mobile-section-switcher-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-mobile-section-switcher-h,.ds-focus-ring.sc-ds-mobile-section-switcher,.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h,.ds-focus-ring-inset.sc-ds-mobile-section-switcher{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-section-switcher-h:focus-visible,.ds-focus-ring.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-section-switcher{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-mobile-section-switcher-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-section-switcher:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-section-switcher-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-section-switcher: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-mobile-section-switcher-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-section-switcher::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-mobile-section-switcher-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-mobile-section-switcher:root,.sc-ds-mobile-section-switcher-h,.ds-forced-colors-scope.sc-ds-mobile-section-switcher{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h,.ds-interaction-fill.sc-ds-mobile-section-switcher{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before,.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill.sc-ds-mobile-section-switcher::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--bordered.sc-ds-mobile-section-switcher{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--grouped.sc-ds-mobile-section-switcher{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-mobile-section-switcher-h>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill.sc-ds-mobile-section-switcher>.ds-interaction-fill__content.sc-ds-mobile-section-switcher,.ds-interaction-fill__content.sc-ds-mobile-section-switcher{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-faint.sc-ds-mobile-section-switcher{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-medium.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-bold.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-strong.sc-ds-mobile-section-switcher{--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-translucent.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-media.sc-ds-mobile-section-switcher{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-section-switcher{--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-mobile-section-switcher-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-section-switcher{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-mobile-section-switcher-h::after,.ds-interaction-fill.sc-ds-mobile-section-switcher::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-mobile-section-switcher-h::before,.ds-interaction-fill--selected.sc-ds-mobile-section-switcher::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-section-switcher-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-mobile-section-switcher:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.sc-ds-mobile-section-switcher-h{display:block;min-width:0;max-width:100%;color:var(--color-foreground-primary)}.mobile-section-switcher.sc-ds-mobile-section-switcher{appearance:none;display:grid;grid-template-columns:var(--dimension-size-100) minmax(0, auto) var(--dimension-size-100);align-items:center;justify-content:center;gap:var(--dimension-space-050);max-width:100%;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:var(--color-background-secondary);color:inherit;box-sizing:border-box;cursor:default}.mobile-section-switcher--expanded.sc-ds-mobile-section-switcher{background:var(--color-background-tertiary)}.mobile-section-switcher__label.sc-ds-mobile-section-switcher{min-width:0;max-width:100%;text-align:center}.mobile-section-switcher__position.sc-ds-mobile-section-switcher{width:var(--dimension-size-050);height:var(--dimension-size-050);border-radius:var(--dimension-radius-half);background:currentColor;opacity:0}.mobile-section-switcher__position--visible.sc-ds-mobile-section-switcher{opacity:1}`;let b=0;const m=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.sections=[];this.value="";this.navigationLabel="Change page section";this.menuOpen=false;this.initialFocusVisible=false;this.instanceId=b++;this.triggerId=`ds-mobile-section-switcher-trigger-${this.instanceId}`;this.menuId=`ds-mobile-section-switcher-menu-${this.instanceId}`;this.triggerEl=null;this.toggleMenu=i=>{if(this.selectableSections.length<=1)return;this.initialFocusVisible=i.detail===0;this.menuOpen=!this.menuOpen};this.closeMenu=()=>{this.menuOpen=false};this.handleSelect=i=>{const e=String(i.detail.value??"");const t=this.selectableSections.find((i=>i.id===e));if(!t||t.isInactive)return;this.closeMenu();if(e!==this.selectedSection?.id)this.dsChange.emit(e);requestAnimationFrame((()=>this.triggerEl?.focus()))}}get resolvedSections(){return this.sections??[]}get selectableSections(){return r(this.resolvedSections)}get selectedIndex(){return u(this.resolvedSections,this.value).selectedIndex}get selectedSection(){return this.selectableSections[this.selectedIndex]}get hasPrevious(){return u(this.resolvedSections,this.value).hasPrevious}get hasNext(){return u(this.resolvedSections,this.value).hasNext}get triggerAriaLabel(){return`${this.navigationLabel}. Current section: ${this.selectedSection?.label??""}`}get menuSections(){const i=[];let e=[];const t=()=>{if(e.length)i.push({items:e});e=[]};for(const i of this.resolvedSections){if(c(i)){t();continue}e.push({label:i.label,value:i.id,dot:i.dot,isSelected:i.id===this.selectedSection?.id,isInactive:i.isInactive})}t();return i}handleSectionsChange(){if(this.selectableSections.length<=1)this.closeMenu()}render(){const i=this.selectedSection;if(!i)return s(o,null);return s(o,null,s("button",{ref:i=>{this.triggerEl=i??null},id:this.triggerId,class:{"mobile-section-switcher":true,"mobile-section-switcher--expanded":this.menuOpen,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.menuId,"aria-expanded":String(this.menuOpen),"aria-label":this.triggerAriaLabel,onClick:this.toggleMenu},s("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasPrevious,"ds-interaction-fill__content":true},"aria-hidden":"true"}),s("ds-text",{class:"mobile-section-switcher__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit",lineTruncation:1},i.label),s("span",{class:{"mobile-section-switcher__position":true,"mobile-section-switcher__position--visible":this.hasNext,"ds-interaction-fill__content":true},"aria-hidden":"true"})),this.selectableSections.length>1?s("ds-menu",{id:this.menuId,anchorId:this.triggerId,align:"center",menuLabel:this.navigationLabel,open:this.menuOpen,initialFocusVisible:this.initialFocusVisible,sections:this.menuSections,onDsClose:this.closeMenu,onDsSelect:this.handleSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}]}}static get style(){return v()}},[2,"ds-mobile-section-switcher",{sections:[16],value:[1],navigationLabel:[1,"navigation-label"],menuOpen:[32],initialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}]}]);function w(){if(typeof customElements==="undefined"){return}const i=["ds-mobile-section-switcher","ds-badge","ds-menu","ds-swatch-picker","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-mobile-section-switcher":if(!customElements.get(n(i))){customElements.define(n(i),m)}break;case"ds-badge":if(!customElements.get(n(i))){d()}break;case"ds-menu":if(!customElements.get(n(i))){a()}break;case"ds-swatch-picker":if(!customElements.get(n(i))){l()}break;case"ds-switch":if(!customElements.get(n(i))){h()}break;case"ds-text":if(!customElements.get(n(i))){f()}break}}))}w();export{m as M,w as d};
|
|
2
|
+
//# sourceMappingURL=p-m5CSrx_s.js.map
|