@ds-mo/ui 12.1.0 → 12.2.0

package/dist/components/ds-message-composer.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as a,a as o,t as i}from"./index.js";import{d as r}from"./p-DxeHimqk.js";import{d as c}from"./p-DpyTrZa2.js";import{d as n}from"./p-webARv8d.js";import{d}from"./p-BAfG3M8z.js";import{d as m}from"./p-Cpr3K41-.js";import{d as l}from"./p-Bs6SS34m.js";import{d as p}from"./p-DfIch2Dk.js";const h=()=>`.sc-ds-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty{display:none}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}textarea.sc-ds-message-composer{width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);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);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}`;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=t(this,"dsInput");this.dsSubmit=t(this,"dsSubmit");this.dsStop=t(this,"dsStop");this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.handleInput=e=>{this.value=e.target.value;this.resize();this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}componentDidLoad(){this.resize()}onValueChange(){requestAnimationFrame((()=>this.resize()))}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}resize(){if(!this.textarea)return;this.textarea.style.height="auto";this.textarea.style.height=`${this.textarea.scrollHeight}px`}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";const s=!this.streaming&&(this.isInactive||!this.value.trim());return a(o,{key:"87abacc3c23f6fc89cc483c938279506581dcb2f"},a("form",{key:"ddc13207dc3ac623189aa4737a14ec1e7a44a9a9",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},a("div",{key:"1ad7352159aec989245decae7c086e359d059939",class:"message-composer__attachments"},a("slot",{key:"96f20fa62368afcb796148f20be5469b7b154644",name:"attachments"})),a("div",{key:"755c37c2648751ab45d4f220bfa0641095e615d0",class:"message-composer__field"},a("textarea",{key:"30f86db9c742b355beeac19dae0b9a21da9b0c11",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,disabled:this.isInactive,rows:2,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),a("div",{key:"66363baf8a9684d4123c21ae38700a1be2d33934",class:"message-composer__controls"},a("div",{key:"d37dccbde99be8a2fc903ed9888eb729eff1fc81",class:"message-composer__tools"},a("slot",{key:"976b333e9244e18450089990830ed76a022a7513",name:"tools"})),a("div",{key:"ef41e0bfd62c2bcc2bfc1679a44872518d860ff8",class:"message-composer__actions"},a("slot",{key:"32e762556ebc88a1e4705704f590ec6e85729569",name:"actions"}),s?a("ds-tooltip",{label:"Send message",side:"top",size:"sm"},a("ds-button-unfilled",{class:"message-composer__action",variant:"icon",icon:"ArrowUp",size:"md","aria-label":"Send message",hasBorder:true,isInactive:true,onDsClick:this.handleAction})):a("ds-tooltip",{label:this.streaming?"Stop response":"Send message",side:"top",size:"sm"},a("ds-button-filled",{class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"brand":this.submitIntent,contrast:"bold",size:"md","aria-label":this.streaming?"Stop response":"Send message",onDsClick:this.handleAction})))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return h()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(i(e))){customElements.define(i(e),g)}break;case"ds-badge":if(!customElements.get(i(e))){r()}break;case"ds-button-filled":if(!customElements.get(i(e))){c()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){n()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-loader":if(!customElements.get(i(e))){m()}break;case"ds-text":if(!customElements.get(i(e))){l()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}f();const u=g;const b=f;export{u as DsMessageComposer,b as defineCustomElement};
+import{p as e,H as s,c as a,h as t,a as o,t as i}from"./index.js";import{d as r}from"./p-DOCKtrS4.js";import{d as n}from"./p-GMDGgtY8.js";import{d as c}from"./p-xY3TjBF5.js";import{d}from"./p-BAfG3M8z.js";import{d as m}from"./p-Cpr3K41-.js";import{d as l}from"./p-C0_8K4y7.js";import{d as p}from"./p-CCHqsF_H.js";const h=()=>`.sc-ds-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty{display:none}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-125);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer.sc-ds-message-composer:not(.message-composer--error) .message-composer__field.sc-ds-message-composer:focus-within{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-018) var(--color-border-bold-brand)}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}textarea.sc-ds-message-composer{width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);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);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}textarea.sc-ds-message-composer:focus,textarea.sc-ds-message-composer:focus-visible{outline:none}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto;margin-inline-start:auto}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=a(this,"dsInput");this.dsSubmit=a(this,"dsSubmit");this.dsStop=a(this,"dsStop");this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.handleInput=e=>{this.value=e.target.value;this.resize();this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}componentDidLoad(){this.resize()}onValueChange(){requestAnimationFrame((()=>this.resize()))}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}resize(){if(!this.textarea)return;this.textarea.style.height="auto";this.textarea.style.height=`${this.textarea.scrollHeight}px`}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";const s=!this.streaming&&(this.isInactive||!this.value.trim());return t(o,{key:"235bc0af1080359e164f3a0ec556e0fd1a42fd25"},t("form",{key:"aa0bf8f675e6a7f53e93665e343fe25b9da1a85d",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},t("div",{key:"55fd112b02d02e008ead76a9e3ab89d7271ebe7f",class:"message-composer__attachments"},t("slot",{key:"b613e971e30c4f5e65ba7509446c5c4006904fa1",name:"attachments"})),t("div",{key:"dd24f705ec9ad808a011faf7bc88db308c5101ac",class:"message-composer__field"},t("textarea",{key:"c109beb5e43a65f5ecbcf1737e449a25e8aa1ddf",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,disabled:this.isInactive,rows:2,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),t("div",{key:"308e041091fbbd1cb5bfa4e7e879ac3f87594f95",class:"message-composer__controls"},t("div",{key:"8105e9df256a30c0f889f5d382d2110e0e9ec142",class:"message-composer__tools"},t("slot",{key:"7cf3964731e89fc59faec121aa1aa3e48ae9a9d5",name:"tools"})),t("div",{key:"c947bf43d3206e1e385ca2aa1ca2229f1c573a88",class:"message-composer__actions"},t("slot",{key:"edf1efb13711c88c65d459b21cc170eeb649ea59",name:"actions"}),s?t("ds-tooltip",{label:"Send message",side:"top",size:"sm"},t("ds-button-unfilled",{class:"message-composer__action",variant:"icon",icon:"ArrowUp",size:"md","aria-label":"Send message",hasBorder:true,isInactive:true,onDsClick:this.handleAction})):t("ds-tooltip",{label:this.streaming?"Stop response":"Send message",side:"top",size:"sm"},t("ds-button-filled",{class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",intent:this.streaming?"brand":this.submitIntent,contrast:"bold",size:"md","aria-label":this.streaming?"Stop response":"Send message",onDsClick:this.handleAction})))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return h()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(i(e))){customElements.define(i(e),f)}break;case"ds-badge":if(!customElements.get(i(e))){r()}break;case"ds-button-filled":if(!customElements.get(i(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){c()}break;case"ds-icon":if(!customElements.get(i(e))){d()}break;case"ds-loader":if(!customElements.get(i(e))){m()}break;case"ds-text":if(!customElements.get(i(e))){l()}break;case"ds-tooltip":if(!customElements.get(i(e))){p()}break}}))}g();const u=f;const b=g;export{u as DsMessageComposer,b as defineCustomElement};
 //# sourceMappingURL=ds-message-composer.js.map

package/dist/components/ds-message-scroller.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as a,a as r,t as l}from"./index.js";import{d as o}from"./p-DxeHimqk.js";import{d as i}from"./p-webARv8d.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as n}from"./p-Bs6SS34m.js";import{d as f}from"./p-DfIch2Dk.js";const g=()=>`@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-message-scroller{--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-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{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-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--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 h=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--dimension-panel-width-2xl);min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc(     var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px)   );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc(     var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200)   );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const m=24;const p=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.overlayBlockSize=0;this.overlayContentBlockSize=0;this.handleScroll=()=>{if(!this.viewport)return;this.syncContentFade();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=m;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.resizeObserver?.disconnect();this.overlayResizeObserver?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content)return;this.previousScrollHeight=this.viewport.scrollHeight;this.resizeObserver=new ResizeObserver((()=>this.handleContentGrowth()));this.resizeObserver.observe(this.content);this.resizeObserver.observe(this.viewport);if(this.overlay){this.overlayResizeObserver=new ResizeObserver((e=>{const s=Math.ceil(e[0]?.contentRect.height??0);this.overlayBlockSize=s;this.el.style.setProperty("--ds-message-scroller-overlay-block-size",`${s}px`);this.syncOverlayContentBlockSize();this.handleContentGrowth()}));this.overlayResizeObserver.observe(this.overlay)}this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=m&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.syncContentFade()}syncContentFade(){if(!this.viewport||!this.content)return;const e=Math.max(this.viewport.scrollTop+this.viewport.clientHeight,0);const s=Math.max(e-this.overlayContentBlockSize,0);this.content.style.setProperty("--ds-scroll-edge-fade-window-start",`${s}px`);this.content.style.setProperty("--ds-scroll-edge-fade-window-end",`${e}px`)}syncOverlayContentBlockSize(){if(!this.overlay)return;const e=this.el.querySelector('[slot="overlay"]');if(!(e instanceof s)){this.overlayContentBlockSize=this.overlayBlockSize}else{const t=e.firstElementChild instanceof s?e.firstElementChild:e;const a=Math.max(Math.ceil(t.getBoundingClientRect().top-this.overlay.getBoundingClientRect().top),0);this.overlayContentBlockSize=Math.max(this.overlayBlockSize-a,0)}this.el.style.setProperty("--ds-message-scroller-overlay-content-block-size",`${this.overlayContentBlockSize}px`)}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.syncContentFade();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.syncContentFade();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.syncContentFade()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=m}render(){return a(r,{key:"cf5e1e12abd1f53c651092c47c8a75101f4764f8"},a("div",{key:"2cddb47049185dcd94af5174a92223d6e06a07fe",class:"message-scroller"},a("div",{key:"4c2d524f3c350c90424a6797325d5e736442faac",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},a("div",{key:"53c3a88e6639612e1ce8d6e7cd86ef8b513158d9",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},a("slot",{key:"8650e6621f56b59f8ae0711fe03decac0f363dea"}))),a("div",{key:"83092aa4f2296a74a0bf4537ee715571a5723a5e",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},a("slot",{key:"f73d7becf944ef294b4ca6b3d752499957df1b61",name:"overlay"})),this.showScrollToLatest?a("div",{class:"message-scroller__control"},a("ds-tooltip",{label:"Scroll to latest message",side:"top",size:"sm"},a("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()}))):null))}get el(){return this}static get style(){return g()+h()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),p)}break;case"ds-badge":if(!customElements.get(l(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){i()}break;case"ds-icon":if(!customElements.get(l(e))){d()}break;case"ds-loader":if(!customElements.get(l(e))){c()}break;case"ds-text":if(!customElements.get(l(e))){n()}break;case"ds-tooltip":if(!customElements.get(l(e))){f()}break}}))}b();const v=p;const u=b;export{v as DsMessageScroller,u as defineCustomElement};
+import{p as e,H as s,c as t,h as a,a as r,t as l}from"./index.js";import{S as o}from"./p-BE_CDJeL.js";import{d}from"./p-DOCKtrS4.js";import{d as i}from"./p-xY3TjBF5.js";import{d as c}from"./p-BAfG3M8z.js";import{d as n}from"./p-Cpr3K41-.js";import{d as g}from"./p-C0_8K4y7.js";import{d as f}from"./p-CCHqsF_H.js";const h=()=>`@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-message-scroller{--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-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{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-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--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 m=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--dimension-panel-width-2xl);min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc(     var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)   );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc(     var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200)   );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const p=24;const b=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.handleScroll=()=>{if(!this.viewport)return;this.scrollOverlayController?.sync();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=p;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content||!this.overlay)return;this.previousScrollHeight=this.viewport.scrollHeight;this.scrollOverlayController=new o({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,onGeometryChange:()=>this.handleContentGrowth()});this.scrollOverlayController.connect();this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=p&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.scrollOverlayController?.sync()}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.scrollOverlayController?.sync();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.scrollOverlayController?.sync();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.scrollOverlayController?.sync()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=p}render(){return a(r,{key:"c913cc43b43c95d60da5984a0c5963c8cdbdb193"},a("div",{key:"465ca3f82da91608fb963214c89fa6db97ca2fc9",class:"message-scroller"},a("div",{key:"6ad576efc33f0c217189b78a67276d9447bdff60",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},a("div",{key:"6e15d72ca22b5d6ab84e14bae53ecb28fdf2138c",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},a("slot",{key:"e9ac89c978d88111a8ec2acdb3a8730c9cd8641e"}))),a("div",{key:"68e3a69c60187aca1448a8b4ff006f1b16af6c4a",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},a("slot",{key:"acdd34e65890dbe74bd20c485b4956f38e480e18",name:"overlay"})),this.showScrollToLatest?a("div",{class:"message-scroller__control"},a("ds-tooltip",{label:"Scroll to latest message",side:"top",size:"sm"},a("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()}))):null))}get el(){return this}static get style(){return h()+m()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function v(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),b)}break;case"ds-badge":if(!customElements.get(l(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){i()}break;case"ds-icon":if(!customElements.get(l(e))){c()}break;case"ds-loader":if(!customElements.get(l(e))){n()}break;case"ds-text":if(!customElements.get(l(e))){g()}break;case"ds-tooltip":if(!customElements.get(l(e))){f()}break}}))}v();const u=b;const k=v;export{u as DsMessageScroller,k as defineCustomElement};
 //# sourceMappingURL=ds-message-scroller.js.map

package/dist/components/ds-message-scroller.js.map

@@ -1 +1 @@
-{"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","overlayBlockSize","overlayContentBlockSize","handleScroll","viewport","syncContentFade","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","resizeObserver","disconnect","overlayResizeObserver","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","ResizeObserver","handleContentGrowth","observe","overlay","entries","blockSize","Math","ceil","contentRect","height","style","setProperty","syncOverlayContentBlockSize","MutationObserver","childList","subtree","characterData","nextHeight","delta","fadeEnd","max","fadeStart","assigned","querySelector","visibleContent","firstElementChild","topInset","getBoundingClientRect","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","label","side","size","variant","icon","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n  from { --ds-scroll-edge-fade-top: 0px; }\n  to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n  from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n  to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n  from { --ds-scroll-edge-fade-left: 0px; }\n  to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n  from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n  to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n  --ds-scroll-edge-fade-size: var(--dimension-size-600);\n  --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n  --ds-scroll-edge-fade-target-top: 0px;\n  --ds-scroll-edge-fade-target-bottom: 0px;\n  --ds-scroll-edge-fade-target-left: 0px;\n  --ds-scroll-edge-fade-target-right: 0px;\n  --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n  --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n  --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n  --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n  --ds-scroll-edge-fade-block-mask: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-top),\n    #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n    transparent 100%\n  );\n  --ds-scroll-edge-fade-inline-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-left),\n    #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n    transparent 100%\n  );\n\n  /* Intersecting the block and inline masks lets every edge compose correctly. */\n  -webkit-mask-image:\n    var(--ds-scroll-edge-fade-block-mask),\n    var(--ds-scroll-edge-fade-inline-mask);\n  mask-image:\n    var(--ds-scroll-edge-fade-block-mask),\n    var(--ds-scroll-edge-fade-inline-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n  --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n  --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n  --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n  --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n  --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n  --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n  --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n  --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n  .scroll-edge-fade--scroll-aware {\n    animation-name:\n      ds-scroll-edge-fade-reveal-top,\n      ds-scroll-edge-fade-reveal-bottom,\n      ds-scroll-edge-fade-reveal-left,\n      ds-scroll-edge-fade-reveal-right;\n    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n    animation-duration: 1ms;\n    animation-timing-function: ease-in-out;\n    animation-fill-mode: both;\n    animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n    animation-range:\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .scroll-edge-fade--scroll-aware {\n      animation: none;\n    }\n  }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n  --ds-scroll-edge-fade-window-start: 100%;\n  --ds-scroll-edge-fade-window-end: 100%;\n\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.message-scroller {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n\n.message-scroller__viewport {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-300);\n  width: 100%;\n  max-width: var(--dimension-panel-width-2xl);\n  min-height: 100%;\n  margin-inline: auto;\n  padding-block-start: var(--dimension-space-200);\n  padding-inline: var(--dimension-space-200);\n  padding-block-end: calc(\n    var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px)\n  );\n  box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__control {\n  position: absolute;\n  bottom: calc(\n    var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200)\n  );\n  left: 50%;\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  box-shadow: var(--effect-elevation-elevated-md);\n  transform: translateX(-50%);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class MessageScroller {\n  @Element() el!: HTMLElement;\n\n  @Prop() busy: boolean = false;\n  @Prop() autoFollow: boolean = true;\n  @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n  @Prop() messagesLabel: string = 'Messages';\n\n  @Event() dsReachStart!: EventEmitter<void>;\n\n  @State() private showScrollToLatest = false;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private overlayResizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private atStart = false;\n  private programmatic = false;\n  private previousScrollHeight = 0;\n  private overlayBlockSize = 0;\n  private overlayContentBlockSize = 0;\n\n  componentDidLoad() {\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.overlayResizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  @Method()\n  async scrollToMessage(id: string): Promise<boolean> {\n    const message = Array.from(\n      this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n    ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n    if (!message) return false;\n    this.following = false;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.scrollTo(0);\n    this.following = false;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.scrollTo(this.viewport?.scrollHeight ?? 0);\n  }\n\n  private motionBehavior(): ScrollBehavior {\n    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n  }\n\n  private scrollTo(top: number) {\n    if (!this.viewport) return;\n    this.programmatic = true;\n    this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content) return;\n    this.previousScrollHeight = this.viewport.scrollHeight;\n    this.resizeObserver = new ResizeObserver(() => this.handleContentGrowth());\n    this.resizeObserver.observe(this.content);\n    this.resizeObserver.observe(this.viewport);\n    if (this.overlay) {\n      this.overlayResizeObserver = new ResizeObserver(entries => {\n        const blockSize = Math.ceil(entries[0]?.contentRect.height ?? 0);\n        this.overlayBlockSize = blockSize;\n        this.el.style.setProperty('--ds-message-scroller-overlay-block-size', `${blockSize}px`);\n        this.syncOverlayContentBlockSize();\n        this.handleContentGrowth();\n      });\n      this.overlayResizeObserver.observe(this.overlay);\n    }\n    this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n    this.mutationObserver.observe(this.content, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    const nextHeight = this.viewport.scrollHeight;\n    const delta = nextHeight - this.previousScrollHeight;\n    if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n      this.viewport.scrollTop += delta;\n    } else if (this.autoFollow && this.following) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    this.previousScrollHeight = nextHeight;\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.syncContentFade();\n  }\n\n  private syncContentFade() {\n    if (!this.viewport || !this.content) return;\n    const fadeEnd = Math.max(this.viewport.scrollTop + this.viewport.clientHeight, 0);\n    const fadeStart = Math.max(fadeEnd - this.overlayContentBlockSize, 0);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-start', `${fadeStart}px`);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-end', `${fadeEnd}px`);\n  }\n\n  private syncOverlayContentBlockSize() {\n    if (!this.overlay) return;\n    const assigned = this.el.querySelector<HTMLElement>('[slot=\"overlay\"]');\n    if (!(assigned instanceof HTMLElement)) {\n      this.overlayContentBlockSize = this.overlayBlockSize;\n    } else {\n      const visibleContent =\n        assigned.firstElementChild instanceof HTMLElement ? assigned.firstElementChild : assigned;\n      const topInset = Math.max(\n        Math.ceil(visibleContent.getBoundingClientRect().top - this.overlay.getBoundingClientRect().top),\n        0\n      );\n      this.overlayContentBlockSize = Math.max(this.overlayBlockSize - topInset, 0);\n    }\n    this.el.style.setProperty(\n      '--ds-message-scroller-overlay-content-block-size',\n      `${this.overlayContentBlockSize}px`\n    );\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.syncContentFade();\n      return;\n    }\n    if (this.defaultPosition === 'last-anchor') {\n      const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n      const last = anchors.item(anchors.length - 1);\n      if (last) {\n        last.scrollIntoView({ block: 'start' });\n        this.following = this.isAtLiveEdge();\n        this.showScrollToLatest = !this.following;\n        this.syncContentFade();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.syncContentFade();\n  }\n\n  private isAtLiveEdge(): boolean {\n    if (!this.viewport) return true;\n    return (\n      this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n      LIVE_EDGE_THRESHOLD\n    );\n  }\n\n  private handleScroll = () => {\n    if (!this.viewport) return;\n    this.syncContentFade();\n    if (this.programmatic) return;\n    this.following = this.isAtLiveEdge();\n    this.showScrollToLatest = !this.following;\n    const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n    if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n    this.atStart = nextAtStart;\n  };\n\n  private releaseFollow = () => {\n    this.following = false;\n    this.showScrollToLatest = !this.isAtLiveEdge();\n  };\n\n  private handleSelectionChange = () => {\n    const selection = document.getSelection();\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      this.el.contains(selection.anchorNode)\n    ) {\n      this.following = false;\n      this.showScrollToLatest = !this.isAtLiveEdge();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"message-scroller\">\n          <div\n            class=\"message-scroller__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role=\"region\"\n            aria-label={this.messagesLabel}\n            tabIndex={0}\n            onScroll={this.handleScroll}\n            onPointerDown={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n            }}\n          >\n            <div\n              class=\"message-scroller__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n              role=\"log\"\n              aria-live=\"polite\"\n              aria-relevant=\"additions\"\n              aria-busy={this.busy ? 'true' : undefined}\n            >\n              <slot />\n            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control\">\n              <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  icon=\"ChevronDown\"\n                  size=\"md\"\n                  rounded\n                  hasBorder={false}\n                  aria-label=\"Scroll to latest message\"\n                  onDsClick={() => void this.scrollToEnd()}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qRAAA,MAAMA,EAAoB,IAAM,uhJCAhC,MAAMC,EAAqB,IAAM,wnDCajC,MAAMC,EAAsB,G,MAQfC,EAAeC,EAAA,MAAAD,UAAAE,EAN5B,WAAAC,CAAAC,G,qFASUC,KAAAC,KAAgB,MAChBD,KAAAE,WAAsB,KACtBF,KAAAG,gBAA2C,cAC3CH,KAAAI,cAAwB,WAIfJ,KAAAK,mBAAqB,MAQ9BL,KAAAM,UAAY,KACZN,KAAAO,QAAU,MACVP,KAAAQ,aAAe,MACfR,KAAAS,qBAAuB,EACvBT,KAAAU,iBAAmB,EACnBV,KAAAW,wBAA0B,EA4J1BX,KAAAY,aAAe,KACrB,IAAKZ,KAAKa,SAAU,OACpBb,KAAKc,kBACL,GAAId,KAAKQ,aAAc,OACvBR,KAAKM,UAAYN,KAAKe,eACtBf,KAAKK,oBAAsBL,KAAKM,UAChC,MAAMU,EAAchB,KAAKa,SAASI,WAAavB,EAC/C,GAAIsB,IAAgBhB,KAAKO,QAASP,KAAKkB,aAAaC,OACpDnB,KAAKO,QAAUS,CAAW,EAGpBhB,KAAAoB,cAAgB,KACtBpB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKe,cAAc,EAGxCf,KAAAqB,sBAAwB,KAC9B,MAAMC,EAAYC,SAASC,eAC3B,GACEF,IACCA,EAAUG,aACXH,EAAUI,YACV1B,KAAK2B,GAAGC,SAASN,EAAUI,YAC3B,CACA1B,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKe,c,EA8DrC,CAjPC,gBAAAc,GACE7B,KAAK8B,mBACLC,uBAAsB,IAAM/B,KAAKgC,yBACjCT,SAASU,iBAAiB,kBAAmBjC,KAAKqB,sB,CAGpD,oBAAAa,GACElC,KAAKmC,gBAAgBC,aACrBpC,KAAKqC,uBAAuBD,aAC5BpC,KAAKsC,kBAAkBF,aACvBb,SAASgB,oBAAoB,kBAAmBvC,KAAKqB,sB,CAIvD,qBAAMmB,CAAgBC,GACpB,MAAMC,EAAUC,MAAMC,KACpB5C,KAAK2B,GAAGkB,iBAAuD,eAC/DC,MAAKC,GAAQA,EAAKC,YAAcP,GAAMM,EAAKE,aAAa,gBAAkBR,IAC5E,IAAKC,EAAS,OAAO,MACrB1C,KAAKM,UAAY,MACjBN,KAAKK,mBAAqB,KAC1BqC,EAAQQ,eAAe,CAAEC,MAAO,QAASC,SAAUpD,KAAKqD,mBACxD,OAAO,I,CAIT,mBAAMC,GACJtD,KAAKuD,SAAS,GACdvD,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBmD,QACxBxD,KAAKa,UAAYb,KAAKa,SAAS4C,aAAezD,KAAKa,SAAS6C,a,CAKhE,iBAAMC,GACJ3D,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKuD,SAASvD,KAAKa,UAAU4C,cAAgB,E,CAGvC,cAAAJ,GACN,OAAOO,WAAW,oCAAoCC,QAAU,OAAS,Q,CAGnE,QAAAN,CAASO,GACf,IAAK9D,KAAKa,SAAU,OACpBb,KAAKQ,aAAe,KACpBR,KAAKa,SAAS0C,SAAS,CAAEO,MAAKV,SAAUpD,KAAKqD,mBAC7CtB,uBAAsB,KACpB/B,KAAKQ,aAAe,KAAK,G,CAIrB,gBAAAsB,GACN,IAAK9B,KAAKa,WAAab,KAAK+D,QAAS,OACrC/D,KAAKS,qBAAuBT,KAAKa,SAAS4C,aAC1CzD,KAAKmC,eAAiB,IAAI6B,gBAAe,IAAMhE,KAAKiE,wBACpDjE,KAAKmC,eAAe+B,QAAQlE,KAAK+D,SACjC/D,KAAKmC,eAAe+B,QAAQlE,KAAKa,UACjC,GAAIb,KAAKmE,QAAS,CAChBnE,KAAKqC,sBAAwB,IAAI2B,gBAAeI,IAC9C,MAAMC,EAAYC,KAAKC,KAAKH,EAAQ,IAAII,YAAYC,QAAU,GAC9DzE,KAAKU,iBAAmB2D,EACxBrE,KAAK2B,GAAG+C,MAAMC,YAAY,2CAA4C,GAAGN,OACzErE,KAAK4E,8BACL5E,KAAKiE,qBAAqB,IAE5BjE,KAAKqC,sBAAsB6B,QAAQlE,KAAKmE,Q,CAE1CnE,KAAKsC,iBAAmB,IAAIuC,kBAAiB,IAAM7E,KAAKiE,wBACxDjE,KAAKsC,iBAAiB4B,QAAQlE,KAAK+D,QAAS,CAC1Ce,UAAW,KACXC,QAAS,KACTC,cAAe,M,CAIX,mBAAAf,GACN,IAAKjE,KAAKa,SAAU,OACpB,MAAMoE,EAAajF,KAAKa,SAAS4C,aACjC,MAAMyB,EAAQD,EAAajF,KAAKS,qBAChC,GAAIyE,EAAQ,GAAKlF,KAAKa,SAASI,WAAavB,IAAwBM,KAAKM,UAAW,CAClFN,KAAKa,SAASI,WAAaiE,C,MACtB,GAAIlF,KAAKE,YAAcF,KAAKM,UAAW,CAC5CN,KAAKa,SAASI,UAAYgE,C,CAE5BjF,KAAKS,qBAAuBwE,EAC5BjF,KAAKK,oBAAsBL,KAAKM,YAAcN,KAAKe,eACnDf,KAAKc,iB,CAGC,eAAAA,GACN,IAAKd,KAAKa,WAAab,KAAK+D,QAAS,OACrC,MAAMoB,EAAUb,KAAKc,IAAIpF,KAAKa,SAASI,UAAYjB,KAAKa,SAAS6C,aAAc,GAC/E,MAAM2B,EAAYf,KAAKc,IAAID,EAAUnF,KAAKW,wBAAyB,GACnEX,KAAK+D,QAAQW,MAAMC,YAAY,qCAAsC,GAAGU,OACxErF,KAAK+D,QAAQW,MAAMC,YAAY,mCAAoC,GAAGQ,M,CAGhE,2BAAAP,GACN,IAAK5E,KAAKmE,QAAS,OACnB,MAAMmB,EAAWtF,KAAK2B,GAAG4D,cAA2B,oBACpD,KAAMD,aAAoBzF,GAAc,CACtCG,KAAKW,wBAA0BX,KAAKU,gB,KAC/B,CACL,MAAM8E,EACJF,EAASG,6BAA6B5F,EAAcyF,EAASG,kBAAoBH,EACnF,MAAMI,EAAWpB,KAAKc,IACpBd,KAAKC,KAAKiB,EAAeG,wBAAwB7B,IAAM9D,KAAKmE,QAAQwB,wBAAwB7B,KAC5F,GAEF9D,KAAKW,wBAA0B2D,KAAKc,IAAIpF,KAAKU,iBAAmBgF,EAAU,E,CAE5E1F,KAAK2B,GAAG+C,MAAMC,YACZ,mDACA,GAAG3E,KAAKW,4B,CAIJ,oBAAAqB,GACN,IAAKhC,KAAKa,SAAU,OACpB,GAAIb,KAAKG,kBAAoB,QAAS,CACpCH,KAAKa,SAASI,UAAY,EAC1BjB,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBL,KAAKa,SAAS4C,aAAezD,KAAKa,SAAS6C,aACrE1D,KAAKc,kBACL,M,CAEF,GAAId,KAAKG,kBAAoB,cAAe,CAC1C,MAAMyF,EAAU5F,KAAK2B,GAAGkB,iBAA8B,6BACtD,MAAMgD,EAAOD,EAAQ7C,KAAK6C,EAAQE,OAAS,GAC3C,GAAID,EAAM,CACRA,EAAK3C,eAAe,CAAEC,MAAO,UAC7BnD,KAAKM,UAAYN,KAAKe,eACtBf,KAAKK,oBAAsBL,KAAKM,UAChCN,KAAKc,kBACL,M,EAGJd,KAAKa,SAASI,UAAYjB,KAAKa,SAAS4C,aACxCzD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKc,iB,CAGC,YAAAC,GACN,IAAKf,KAAKa,SAAU,OAAO,KAC3B,OACEb,KAAKa,SAAS4C,aAAezD,KAAKa,SAAS6C,aAAe1D,KAAKa,SAASI,WACxEvB,C,CAiCJ,MAAAqG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,6BACNC,IAAKC,IACHrG,KAAKa,SAAWwF,CAAO,EAEzBC,KAAK,SAAQ,aACDtG,KAAKI,cACjBmG,SAAU,EACVC,SAAUxG,KAAKY,aACf6F,cAAezG,KAAKoB,cACpBsF,UAAYC,IACV,GAAI,CAAC,UAAW,SAAU,QAAQC,SAASD,EAAMT,KAAMlG,KAAKoB,eAAe,GAG7E4E,EAAA,OAAAE,IAAA,2CACEC,MAAM,2DACNC,IAAKC,IACHrG,KAAK+D,QAAUsC,CAAO,EAExBC,KAAK,MAAK,YACA,SAAQ,gBACJ,YAAW,YACdtG,KAAKC,KAAO,OAAS4G,WAEhCb,EAAA,QAAAE,IAAA,+CAGJF,EAAA,OAAAE,IAAA,2CACEC,MAAM,4BACNC,IAAKC,IACHrG,KAAKmE,QAAUkC,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMY,KAAK,aAEZ9G,KAAKK,mBACJ2F,EAAA,OAAKG,MAAM,6BACTH,EAAA,cAAYe,MAAM,2BAA2BC,KAAK,MAAMC,KAAK,MAC3DjB,EAAA,sBACEkB,QAAQ,OACRC,KAAK,cACLF,KAAK,KACLG,QAAO,KACPC,UAAW,MAAK,aACL,2BACXC,UAAW,SAAWtH,KAAK2D,kBAI/B,M","ignoreList":[]}
+{"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","handleScroll","viewport","scrollOverlayController","sync","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","disconnect","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","overlay","ScrollOverlayController","host","onGeometryChange","handleContentGrowth","connect","MutationObserver","observe","childList","subtree","characterData","nextHeight","delta","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","label","side","size","variant","icon","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n  from { --ds-scroll-edge-fade-top: 0px; }\n  to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n  from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n  to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n  from { --ds-scroll-edge-fade-left: 0px; }\n  to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n  from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n  to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n  --ds-scroll-edge-fade-size: var(--dimension-size-600);\n  --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n  --ds-scroll-edge-fade-target-top: 0px;\n  --ds-scroll-edge-fade-target-bottom: 0px;\n  --ds-scroll-edge-fade-target-left: 0px;\n  --ds-scroll-edge-fade-target-right: 0px;\n  --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n  --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n  --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n  --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n  --ds-scroll-edge-fade-block-mask: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-top),\n    #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n    transparent 100%\n  );\n  --ds-scroll-edge-fade-inline-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-left),\n    #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n    transparent 100%\n  );\n\n  /* Intersecting the block and inline masks lets every edge compose correctly. */\n  -webkit-mask-image:\n    var(--ds-scroll-edge-fade-block-mask),\n    var(--ds-scroll-edge-fade-inline-mask);\n  mask-image:\n    var(--ds-scroll-edge-fade-block-mask),\n    var(--ds-scroll-edge-fade-inline-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n  --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n  --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n  --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n  --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n  --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n  --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n  --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n  --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n  .scroll-edge-fade--scroll-aware {\n    animation-name:\n      ds-scroll-edge-fade-reveal-top,\n      ds-scroll-edge-fade-reveal-bottom,\n      ds-scroll-edge-fade-reveal-left,\n      ds-scroll-edge-fade-reveal-right;\n    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n    animation-duration: 1ms;\n    animation-timing-function: ease-in-out;\n    animation-fill-mode: both;\n    animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n    animation-range:\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .scroll-edge-fade--scroll-aware {\n      animation: none;\n    }\n  }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n  --ds-scroll-edge-fade-window-start: 100%;\n  --ds-scroll-edge-fade-window-end: 100%;\n\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.message-scroller {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n\n.message-scroller__viewport {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-300);\n  width: 100%;\n  max-width: var(--dimension-panel-width-2xl);\n  min-height: 100%;\n  margin-inline: auto;\n  padding-block-start: var(--dimension-space-200);\n  padding-inline: var(--dimension-space-200);\n  padding-block-end: calc(\n    var(--dimension-space-200) + var(--ds-scroll-overlay-block-size, 0px)\n  );\n  box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__control {\n  position: absolute;\n  bottom: calc(\n    var(--ds-scroll-overlay-content-block-size, 0px) + var(--dimension-space-200)\n  );\n  left: 50%;\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  box-shadow: var(--effect-elevation-elevated-md);\n  transform: translateX(-50%);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class MessageScroller {\n  @Element() el!: HTMLElement;\n\n  @Prop() busy: boolean = false;\n  @Prop() autoFollow: boolean = true;\n  @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n  @Prop() messagesLabel: string = 'Messages';\n\n  @Event() dsReachStart!: EventEmitter<void>;\n\n  @State() private showScrollToLatest = false;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private scrollOverlayController?: ScrollOverlayController;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private atStart = false;\n  private programmatic = false;\n  private previousScrollHeight = 0;\n\n  componentDidLoad() {\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.scrollOverlayController?.disconnect();\n    this.mutationObserver?.disconnect();\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  @Method()\n  async scrollToMessage(id: string): Promise<boolean> {\n    const message = Array.from(\n      this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n    ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n    if (!message) return false;\n    this.following = false;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.scrollTo(0);\n    this.following = false;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.scrollTo(this.viewport?.scrollHeight ?? 0);\n  }\n\n  private motionBehavior(): ScrollBehavior {\n    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n  }\n\n  private scrollTo(top: number) {\n    if (!this.viewport) return;\n    this.programmatic = true;\n    this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content || !this.overlay) return;\n    this.previousScrollHeight = this.viewport.scrollHeight;\n    this.scrollOverlayController = new ScrollOverlayController({\n      host: this.el,\n      viewport: this.viewport,\n      content: this.content,\n      overlay: this.overlay,\n      onGeometryChange: () => this.handleContentGrowth(),\n    });\n    this.scrollOverlayController.connect();\n    this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n    this.mutationObserver.observe(this.content, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    const nextHeight = this.viewport.scrollHeight;\n    const delta = nextHeight - this.previousScrollHeight;\n    if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n      this.viewport.scrollTop += delta;\n    } else if (this.autoFollow && this.following) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    this.previousScrollHeight = nextHeight;\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.scrollOverlayController?.sync();\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.scrollOverlayController?.sync();\n      return;\n    }\n    if (this.defaultPosition === 'last-anchor') {\n      const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n      const last = anchors.item(anchors.length - 1);\n      if (last) {\n        last.scrollIntoView({ block: 'start' });\n        this.following = this.isAtLiveEdge();\n        this.showScrollToLatest = !this.following;\n        this.scrollOverlayController?.sync();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.scrollOverlayController?.sync();\n  }\n\n  private isAtLiveEdge(): boolean {\n    if (!this.viewport) return true;\n    return (\n      this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n      LIVE_EDGE_THRESHOLD\n    );\n  }\n\n  private handleScroll = () => {\n    if (!this.viewport) return;\n    this.scrollOverlayController?.sync();\n    if (this.programmatic) return;\n    this.following = this.isAtLiveEdge();\n    this.showScrollToLatest = !this.following;\n    const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n    if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n    this.atStart = nextAtStart;\n  };\n\n  private releaseFollow = () => {\n    this.following = false;\n    this.showScrollToLatest = !this.isAtLiveEdge();\n  };\n\n  private handleSelectionChange = () => {\n    const selection = document.getSelection();\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      this.el.contains(selection.anchorNode)\n    ) {\n      this.following = false;\n      this.showScrollToLatest = !this.isAtLiveEdge();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"message-scroller\">\n          <div\n            class=\"message-scroller__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role=\"region\"\n            aria-label={this.messagesLabel}\n            tabIndex={0}\n            onScroll={this.handleScroll}\n            onPointerDown={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n            }}\n          >\n            <div\n              class=\"message-scroller__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n              role=\"log\"\n              aria-live=\"polite\"\n              aria-relevant=\"additions\"\n              aria-busy={this.busy ? 'true' : undefined}\n            >\n              <slot />\n            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control\">\n              <ds-tooltip label=\"Scroll to latest message\" side=\"top\" size=\"sm\">\n                <ds-button-unfilled\n                  variant=\"icon\"\n                  icon=\"ChevronDown\"\n                  size=\"md\"\n                  rounded\n                  hasBorder={false}\n                  aria-label=\"Scroll to latest message\"\n                  onDsClick={() => void this.scrollToEnd()}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-message.js

@@ -1,2 +1,2 @@
-import{M as s,d as o}from"./p-DszI94sZ.js";const t=s;const p=o;export{t as DsMessage,p as defineCustomElement};
+import{M as s,d as o}from"./p-ky1msbJ8.js";const t=s;const m=o;export{t as DsMessage,m as defineCustomElement};
 //# sourceMappingURL=ds-message.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as o,H as e,c as s,h as t,a,t as i}from"./index.js";import{d}from"./p-DxeHimqk.js";import{d as n}from"./p-webARv8d.js";import{d as l}from"./p-BAfG3M8z.js";import{d as r}from"./p-Cpr3K41-.js";import{d as c}from"./p-Bs6SS34m.js";import{d as m}from"./p-DfIch2Dk.js";import{b as f,T as h}from"./p-Dg3xLna0.js";const b=()=>`.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box}.modal-dialog[open].sc-ds-modal{display:flex;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary)}ds-text.modal-heading.sc-ds-modal{flex:1 1 0;width:auto;min-width:0;text-align:left;-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer.sc-ds-modal slot.sc-ds-modal{display:contents}`;const u={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const p=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let g=0;const y=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.open=false;this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++g}`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(o){if(o){this.clearCloseTimer();const o=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||o)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true;const o=this.closeAnimationMs;if(o<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),o)}}focusClose(){const o=this.el.querySelector("ds-button-unfilled.modal-close");void o?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(o,e){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:o,originalEvent:e});this.open=false}updateFooterPresence(o){const e=o?.assignedNodes({flatten:true})??[];this.hasFooter=e.some((o=>o.nodeType!==Node.TEXT_NODE||!!o.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(o){o.preventDefault();this.requestClose("escape",o)}handleBackdropPointerDown(o){if(o.target===this.dialogEl)this.requestClose("backdrop",o)}handleKeyDown(o){if(o.key!=="Tab"||!this.dialogEl)return;const e=Array.from(this.dialogEl.querySelectorAll(p)).filter((o=>!o.hasAttribute("disabled")&&o.getAttribute("aria-hidden")!=="true"));if(!e.length){o.preventDefault();this.dialogEl.focus();return}const s=e[0];const t=e[e.length-1];const a=document.activeElement;if(o.shiftKey&&(a===s||a===this.dialogEl)){o.preventDefault();t.focus()}else if(!o.shiftKey&&a===t){o.preventDefault();s.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return u[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return f(h.motionShort3,h.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return t(a,{key:"56bc00f2c8d696808659836bcb2da5f8a26ecbc2"},t("dialog",{key:"1a4d78b08c8725b1192e16cee429afa170e7c560",ref:o=>{this.dialogEl=o??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.ariaDescribedby,onCancel:o=>this.handleCancel(o),onPointerDown:o=>this.handleBackdropPointerDown(o),onKeyDown:o=>this.handleKeyDown(o),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"bca5aa346244215c6893315e63c3b257352a3773",class:"modal-header"},t("ds-text",{key:"b2bf256a260b1f5d838e37b0d9c1c786dca15491",class:"modal-heading",as:"h2",variant:"text-title-medium",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),t("ds-tooltip",{key:"4cd6d3c5d85ce9fc6fea3bc10b9283f9e1ea3dba",class:"modal-close-tooltip",label:this.closeAriaLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"5932f58d80db94c53156ffcdc928db44b66db7c9",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:o=>this.requestClose("close-button",o.detail)}))),t("div",{key:"6b11bcf5377df5d12f0f2a0d8c6be22d3e60eca4",class:"modal-content"},t("slot",{key:"1b9b0dec9e6cb20fdb8c555016c7cb19944aff62"})),t("div",{key:"220b13ff833eaf7843bf3daa5b7dd0d3ed9a66c0",class:{"modal-footer":true,"modal-footer--empty":!this.hasFooter}},t("slot",{key:"5582827bc6a99e3dd2752cda1484e9fdcea19e6d",name:"footer",onSlotchange:o=>this.updateFooterPresence(o.currentTarget)}))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return b()}},[262,"ds-modal",{open:[1028],heading:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const o=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];o.forEach((o=>{switch(o){case"ds-modal":if(!customElements.get(i(o))){customElements.define(i(o),y)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(o))){n()}break;case"ds-icon":if(!customElements.get(i(o))){l()}break;case"ds-loader":if(!customElements.get(i(o))){r()}break;case"ds-text":if(!customElements.get(i(o))){c()}break;case"ds-tooltip":if(!customElements.get(i(o))){m()}break}}))}k();const v=y;const x=k;export{v as DsModal,x as defineCustomElement};
+import{p as o,H as e,c as s,h as t,a,t as i}from"./index.js";import{d}from"./p-DOCKtrS4.js";import{d as n}from"./p-xY3TjBF5.js";import{d as l}from"./p-BAfG3M8z.js";import{d as r}from"./p-Cpr3K41-.js";import{d as c}from"./p-C0_8K4y7.js";import{d as m}from"./p-CCHqsF_H.js";import{b as f,T as h}from"./p-Dg3xLna0.js";const b=()=>`.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box}.modal-dialog[open].sc-ds-modal{display:flex;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary)}ds-text.modal-heading.sc-ds-modal{flex:1 1 0;width:auto;min-width:0;text-align:left;-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer.sc-ds-modal slot.sc-ds-modal{display:contents}`;const u={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const p=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let g=0;const y=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.open=false;this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++g}`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(o){if(o){this.clearCloseTimer();const o=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||o)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true;const o=this.closeAnimationMs;if(o<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),o)}}focusClose(){const o=this.el.querySelector("ds-button-unfilled.modal-close");void o?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(o,e){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:o,originalEvent:e});this.open=false}updateFooterPresence(o){const e=o?.assignedNodes({flatten:true})??[];this.hasFooter=e.some((o=>o.nodeType!==Node.TEXT_NODE||!!o.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(o){o.preventDefault();this.requestClose("escape",o)}handleBackdropPointerDown(o){if(o.target===this.dialogEl)this.requestClose("backdrop",o)}handleKeyDown(o){if(o.key!=="Tab"||!this.dialogEl)return;const e=Array.from(this.dialogEl.querySelectorAll(p)).filter((o=>!o.hasAttribute("disabled")&&o.getAttribute("aria-hidden")!=="true"));if(!e.length){o.preventDefault();this.dialogEl.focus();return}const s=e[0];const t=e[e.length-1];const a=document.activeElement;if(o.shiftKey&&(a===s||a===this.dialogEl)){o.preventDefault();t.focus()}else if(!o.shiftKey&&a===t){o.preventDefault();s.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return u[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return f(h.motionShort3,h.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return t(a,{key:"f59182e6839061125508db976ff99f611b8c5526"},t("dialog",{key:"5dabbc641a95efad670090961df7b4cea70ab442",ref:o=>{this.dialogEl=o??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.ariaDescribedby,onCancel:o=>this.handleCancel(o),onPointerDown:o=>this.handleBackdropPointerDown(o),onKeyDown:o=>this.handleKeyDown(o),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},t("div",{key:"245860f909ff4e06713ffc7ec2e8278bd1b72aa3",class:"modal-header"},t("ds-text",{key:"ccf29c35d05e108743ff1372f7e036c85fd244c9",class:"modal-heading",as:"h2",variant:"text-title-medium",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),t("ds-tooltip",{key:"2fe8e5251a9ba285c81b20bcf8574626434f346b",class:"modal-close-tooltip",label:this.closeAriaLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"8de4b7884640f8cc324f6965a05a23aa219e7b0a",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:o=>this.requestClose("close-button",o.detail)}))),t("div",{key:"f8e03771adcfbc95f6614df91795cac6f0e4a53e",class:"modal-content"},t("slot",{key:"6fe8f545bb0090effc74dfefc7410f2891957195"})),t("div",{key:"9122f7c8130ecf812f010052bf151dd14844d943",class:{"modal-footer":true,"modal-footer--empty":!this.hasFooter}},t("slot",{key:"ef0cd796c14460d0c974ae32b9823c9d2b4d5b7b",name:"footer",onSlotchange:o=>this.updateFooterPresence(o.currentTarget)}))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return b()}},[262,"ds-modal",{open:[1028],heading:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];o.forEach((o=>{switch(o){case"ds-modal":if(!customElements.get(i(o))){customElements.define(i(o),y)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(o))){n()}break;case"ds-icon":if(!customElements.get(i(o))){l()}break;case"ds-loader":if(!customElements.get(i(o))){r()}break;case"ds-text":if(!customElements.get(i(o))){c()}break;case"ds-tooltip":if(!customElements.get(i(o))){m()}break}}))}v();const k=y;const x=v;export{k as DsModal,x as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as n,c as a,h as t,a as s,t as i}from"./index.js";import{p as o,c as r}from"./p-Dg3xLna0.js";import{d}from"./p-DxeHimqk.js";import{d as l}from"./p-webARv8d.js";import{d as c}from"./p-BAfG3M8z.js";import{d as v}from"./p-Cpr3K41-.js";import{d as p}from"./p-Bs6SS34m.js";import{d as f}from"./p-DfIch2Dk.js";function h(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:t}=e;if(t===true){a["scroll-edge-fade--at-end"]=true}else if(t&&typeof t==="object"){for(const e of n){if(t[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const u={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const g="data-nav-style";function m(e){if(e==="dashboard"||e==="settings")return e;return undefined}function b(e,n,a){const t=m(n);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(g):null;const i=m(s);if(i)return i;return e}function _(e,n){return e!==n}function x(e,n){return e===n||e.startsWith(`${n}/`)}function y(e,n){if(!e)return"";let a="";let t=0;for(const s of n){if(!s.href)continue;if(x(e,s.href)&&s.href.length>t){a=s.id;t=s.href.length}}return a}function w(e){return e.reduce(((e,n)=>e+n.items.length),0)}function k(e,n){return n?null:!e}function z(e){return e.split(",").map((e=>o(e.trim(),0)))}function C(e){const n=e.transitionProperty.split(",").map((e=>e.trim()));const a=z(e.transitionDuration);const t=z(e.transitionDelay);return n.reduce(((e,n,s)=>{if(n!=="all"&&n!=="width"&&n!=="min-width")return e;const i=a[s%a.length]??0;const o=t[s%t.length]??0;return Math.max(e,i+o,0)}),0)}function A(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function I(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function N(e,n){return w(e)===0&&w(A(n))>0}const S="ds-panel-nav-user-menu-anchor";const D=()=>`@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 E=()=>`.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--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}.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: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))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-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)}.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, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:pointer;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--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}.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;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}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:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--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,.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--_nav-pressed)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.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 R=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 I(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=A(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=b(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 t=C(getComputedStyle(e));if(t<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),t)}))}))}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=y(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(_(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(N(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(`#${S}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:u})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const t=this.getUserRovingIndex();const s=this.getFirstRovingIndex();let i;switch(e.key){case"ArrowDown":if(n===t)return;if(n===a)i=t;else i=n+1;break;case"ArrowUp":if(n===s)return;if(n===t)i=a;else if(n===a)i=a-1;else i=n-1;break;case"ArrowRight":if(n===a)i=t;else return;break;case"ArrowLeft":if(n===t)i=a;else return;break;case"Home":e.preventDefault();i=s;break;case"End":e.preventDefault();i=t;break;default:return}if(i===undefined||i===n)return;e.preventDefault();this.focusRovingAt(i)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=k(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:u})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(r()){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 t=()=>{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",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=t;window.addEventListener("mousemove",a);window.addEventListener("mouseup",t)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return t("ds-tooltip",{label:n,side:"right",size:"sm"},t("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 s=e?this.accountLabel:"";const i=t("button",{type:"button",id:S,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()}},t("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"},n),t("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{class:"panel-nav__footer-icon-expanded"},t("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{name:"Circle",size:"md",color:"inherit"}),t("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return t("ds-tooltip",{label:s,side:"right",size:"sm"},i)}renderNavItem(e,n,a){const s=e.id===this.effectiveActiveId;const i=n+1;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit"})),t("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},e.label),e.dot&&t("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const d=this.routerMode==="anchor"&&e.href;const l=d?t("a",{...r,href:e.href},o):t("button",{...r,type:"button"},o);return t("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},l)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const i=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":i,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return t(s,{key:"68fdc3f2b5eb53b4c8d5fa7b2dc833dfdd362955",style:{display:"block",position:"relative"}},t("nav",{key:"70c252c041466c524e7e3f4c27b20bf10093d795",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},t("div",{key:"db799e0a0d294bb16f6809f59bed117bd1fb1bb0",class:"panel-nav__header"},t("button",{key:"bac900880dc696966b50571b033cedc8f751b921",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":i?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":i?"false":"true"},t("span",{key:"b8ccac9a36bcb35266eabc05853203a4662c7f16",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"8662fbc2d1e084cf5a419adbe68dbaa39eac6d01",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"a3c3a5c90cf3cd30412ccd2378f6af578000e791",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"48f846559f73ffc0ae0d54e9a1a3b2ab4533a76a",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"50efc816da0a0ccf5f9a841d51925d0f3ba8afee",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"8e06729cd2046618d5d05266f1df1338660cef33",class:{"panel-nav__body":true,"ds-focus-ring":this.bodyScrollable,...h({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},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("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++,i))))))})()),t("div",{key:"6cb98e0aaf69c1d1d56f7341640d8154153c88ae",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(i,o,r))),!this.viewportNarrow&&t("div",{key:"ba63fc4326b15c7104ca9bd250239ab9f54cb367",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 D()+E()}},[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}]}]);R.HOST_PROP_SYNC_BUDGET=8;function L(){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(i(e))){customElements.define(i(e),R)}break;case"ds-badge":if(!customElements.get(i(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){l()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-loader":if(!customElements.get(i(e))){v()}break;case"ds-text":if(!customElements.get(i(e))){p()}break;case"ds-tooltip":if(!customElements.get(i(e))){f()}break}}))}L();const j=R;const F=L;export{j as DsPanelNav,F as defineCustomElement};
+import{p as e,H as n,c as a,h as t,a as s,t as i}from"./index.js";import{p as o,c as r}from"./p-Dg3xLna0.js";import{d}from"./p-DOCKtrS4.js";import{d as l}from"./p-xY3TjBF5.js";import{d as c}from"./p-BAfG3M8z.js";import{d as v}from"./p-Cpr3K41-.js";import{d as p}from"./p-C0_8K4y7.js";import{d as f}from"./p-CCHqsF_H.js";function h(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:t}=e;if(t===true){a["scroll-edge-fade--at-end"]=true}else if(t&&typeof t==="object"){for(const e of n){if(t[e]){a[`scroll-edge-fade--${e}-at-edge`]=true}}}return a}const u={side:"right",align:"end",anchorAlignment:"choice-cell",sideOffset:"calc(var(--dimension-space-100) + var(--dimension-space-050))",alignOffset:0};const g="data-nav-style";function m(e){if(e==="dashboard"||e==="settings")return e;return undefined}function b(e,n,a){const t=m(n);if(t)return t;const s=typeof document!=="undefined"?document.documentElement.getAttribute(g):null;const i=m(s);if(i)return i;return e}function _(e,n){return e!==n}function x(e,n){return e===n||e.startsWith(`${n}/`)}function y(e,n){if(!e)return"";let a="";let t=0;for(const s of n){if(!s.href)continue;if(x(e,s.href)&&s.href.length>t){a=s.id;t=s.href.length}}return a}function w(e){return e.reduce(((e,n)=>e+n.items.length),0)}function k(e,n){return n?null:!e}function z(e){return e.split(",").map((e=>o(e.trim(),0)))}function C(e){const n=e.transitionProperty.split(",").map((e=>e.trim()));const a=z(e.transitionDuration);const t=z(e.transitionDelay);return n.reduce(((e,n,s)=>{if(n!=="all"&&n!=="width"&&n!=="min-width")return e;const i=a[s%a.length]??0;const o=t[s%t.length]??0;return Math.max(e,i+o,0)}),0)}function A(e){if(Array.isArray(e))return e;if(typeof e==="string"){try{const n=JSON.parse(e);return Array.isArray(n)?n:[]}catch{return[]}}return[]}function I(e,n){if(e)return true;if(n===null)return false;return n!=="false"}function N(e,n){return w(e)===0&&w(A(n))>0}const S="ds-panel-nav-user-menu-anchor";const D=()=>`@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 E=()=>`.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--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}.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: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))}.ds-interaction-fill.sc-ds-panel-nav-h,.ds-interaction-fill.sc-ds-panel-nav{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before,.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-nav-h::before,.ds-interaction-fill.sc-ds-panel-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-nav-h::after,.ds-interaction-fill.sc-ds-panel-nav::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-panel-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-nav-h,.ds-interaction-fill--selected.sc-ds-panel-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-nav-h>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill.sc-ds-panel-nav>.ds-interaction-fill__content.sc-ds-panel-nav,.ds-interaction-fill__content.sc-ds-panel-nav{position:relative;z-index:2}.ds-interaction-fill--on-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)}.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, system-ui);isolation:isolate}.panel-nav__header.sc-ds-panel-nav,.panel-nav__body.sc-ds-panel-nav,.panel-nav__footer.sc-ds-panel-nav{position:relative;z-index:3}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;height:var(--dimension-size-600, 48px);padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;position:relative;z-index:0;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--ds-control-radius, var(--dimension-radius-025, 2px));cursor:pointer;color:var(--_nav-fg-primary);flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav--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}.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;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}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:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative;z-index:2}.panel-nav__item-label.sc-ds-panel-nav{position:relative;z-index:2;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--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,.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav:hover:not(:disabled)::after{background:var(--_nav-pressed)}.panel-nav__footer-user--menu-expanded.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.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 L=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 I(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=A(e);this.rovingIndex=0;this.syncActiveFromUrl()}onActiveIdChange(){}onCurrentUrlChange(){this.syncActiveFromUrl()}onNavStyleChange(e){this.renderedStyle=e}componentWillLoad(){this.renderedStyle=b(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 t=C(getComputedStyle(e));if(t<=0){this.finishCollapseAnimation(e);return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishCollapseAnimation(e)}),t)}))}))}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=y(this.currentUrl,this.getAllItems())}syncHostPropsIfNeeded(){if(_(this.renderedStyle,this.navStyle)){this.renderedStyle=this.navStyle}if(N(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(`#${S}`);if(e)this.dsNavUserAction.emit({anchor:e,menuPlacement:u})}}handleRovingKeyDown(e,n){if(e.key==="Enter"||e.key===" "){e.preventDefault();this.activateRovingIndex(n);return}const a=this.getFooterRovingIndex();const t=this.getUserRovingIndex();const s=this.getFirstRovingIndex();let i;switch(e.key){case"ArrowDown":if(n===t)return;if(n===a)i=t;else i=n+1;break;case"ArrowUp":if(n===s)return;if(n===t)i=a;else if(n===a)i=a-1;else i=n-1;break;case"ArrowRight":if(n===a)i=t;else return;break;case"ArrowLeft":if(n===t)i=a;else return;break;case"Home":e.preventDefault();i=s;break;case"End":e.preventDefault();i=t;break;default:return}if(i===undefined||i===n)return;e.preventDefault();this.focusRovingAt(i)}handleItemClick(e){this.dsNavSelect.emit(e)}handleToggle(){const e=k(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:u})}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();if(r()){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 t=()=>{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",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=a;this.globalMouseUpHandler=t;window.addEventListener("mousemove",a);window.addEventListener("mouseup",t)}renderFooterAction(e){const n=e?this.settingsLabel:this.dashboardLabel;return t("ds-tooltip",{label:n,side:"right",size:"sm"},t("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 s=e?this.accountLabel:"";const i=t("button",{type:"button",id:S,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()}},t("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"},n),t("span",{class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{class:"panel-nav__footer-icon-expanded"},t("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{name:"Circle",size:"md",color:"inherit"}),t("ds-text",{class:"panel-nav__user-initial",as:"span",variant:"text-caption",emphasis:true,align:"center",color:"inherit"},a))));return t("ds-tooltip",{label:s,side:"right",size:"sm"},i)}renderNavItem(e,n,a){const s=e.id===this.effectiveActiveId;const i=n+1;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:e.icon,size:"md",color:"inherit"})),t("ds-text",{class:"panel-nav__item-label panel-nav__item-label-text ds-control--md",as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},e.label),e.dot&&t("span",{class:"panel-nav__item-dot-box","aria-hidden":"true"},t("ds-badge",{class:"panel-nav__item-dot",variant:"dot",hasRing:a,label:""}))];const r={class:{"panel-nav__item":true,"panel-nav__item--active":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,tabIndex:i===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(e.id),onKeyDown:e=>this.handleRovingKeyDown(e,i),onFocus:()=>{this.rovingIndex=i}};const d=this.routerMode==="anchor"&&e.href;const l=d?t("a",{...r,href:e.href},o):t("button",{...r,type:"button"},o);return t("ds-tooltip",{label:a?e.label:"",side:"right",size:"sm"},l)}render(){const e=this.renderedStyle;const n=e==="dashboard";const a=this.navStyle==="dashboard";const i=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":i,"panel-nav--breakpoint-locked":this.viewportNarrow,"panel-nav--animating":this.isAnimating};return t(s,{key:"ca80fb5c0f9e8b7de9d7d5c77aa18de9a1600a3d",style:{display:"block",position:"relative"}},t("nav",{key:"000573d90c4d349b8dc4363f245d65321df99ae1",class:d,"aria-label":n?this.dashboardNavigationLabel:this.settingsNavigationLabel},t("div",{key:"4efae2a70bc6a4b6e6509d6137b23c41af01cb1e",class:"panel-nav__header"},t("button",{key:"535e300147a10326d75930622c38b5bbfe219370",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":i?this.expandNavigationLabel:this.collapseNavigationLabel,"aria-expanded":i?"false":"true"},t("span",{key:"35ba007ec62cde52599088563be567ebc78ab712",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"a1a66fb70224dcdb1833bd721f19d1a7aae0e4d8",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"d43bce4061738bfe09dac1027958213087a14058",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"94c3ff1b0f97d3002c91ca07ee5f9f9daae01bbc",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"5dce715153d8a8b197843c14665e635668e5d216",name:i?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"9fdc4bdac6f061bb6e26a5acf964c0ce78cecfe0",class:{"panel-nav__body":true,"ds-focus-ring":this.bodyScrollable,...h({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},(()=>{let e=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("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++,i))))))})()),t("div",{key:"9b00e7d7907374252bbfdc0f7a7fdb704e49a1bd",class:"panel-nav__footer"},this.renderFooterAction(n),this.renderFooterUser(i,o,r))),!this.viewportNarrow&&t("div",{key:"cfe8ac2300d8abdcd654b786fc125b78d8d67836",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 D()+E()}},[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}]}]);L.HOST_PROP_SYNC_BUDGET=8;function R(){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(i(e))){customElements.define(i(e),L)}break;case"ds-badge":if(!customElements.get(i(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(e))){l()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-loader":if(!customElements.get(i(e))){v()}break;case"ds-text":if(!customElements.get(i(e))){p()}break;case"ds-tooltip":if(!customElements.get(i(e))){f()}break}}))}R();const j=L;const F=R;export{j as DsPanelNav,F as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map