@ds-mo/ui 12.1.0 → 12.2.0

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

@@ -1,2 +1,2 @@
-import{p as n,H as s,c as e,h as a,a as o,t as i}from"./index.js";import{d as r}from"./p-Bs6SS34m.js";const t=()=>`.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav,.ds-control--sm.sc-ds-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav,.ds-control--xs.sc-ds-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-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-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-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-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-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-sub-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-sub-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-sub-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-sub-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-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-sub-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-sub-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-sub-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-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-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before,.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-sub-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-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h,.ds-interaction-fill--selected.sc-ds-panel-sub-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-sub-nav-h>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill.sc-ds-panel-sub-nav>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill__content.sc-ds-panel-sub-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-sub-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)}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-panel-sub-nav-h{display:block;width:100%}.panel-sub-nav.sc-ds-panel-sub-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-sub-nav__item.sc-ds-panel-sub-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);width:100%;height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-primary)}.panel-sub-nav__item--on-medium.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-secondary)}.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-primary)}.panel-sub-nav__item--on-bold.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-secondary)}.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-primary)}.panel-sub-nav__item--on-strong.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-secondary)}.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-primary)}.panel-sub-nav__item--on-translucent.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-secondary)}.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-primary)}.panel-sub-nav__item--on-inverted.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-secondary)}.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-primary)}.panel-sub-nav__item--on-media.sc-ds-panel-sub-nav{color:var(--color-media-foreground-secondary)}.panel-sub-nav__item--on-media.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-media-foreground-primary)}.panel-sub-nav__item--on-always-dark.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-secondary)}.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-primary)}ds-text.panel-sub-nav__label.sc-ds-panel-sub-nav{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const c=n(class n extends s{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.items=[];this.ariaLabel=null}get enabledItems(){return this.items.filter((n=>!n.isInactive))}get focusableId(){return this.enabledItems.some((n=>n.id===this.value))?this.value:this.enabledItems[0]?.id??""}selectItem(n){this.value=n;this.dsChange.emit(n);this.focusItem(n)}focusItem(n){const s=this.el.querySelector(`[data-panel-sub-nav-id="${n}"]`);s?.focus({preventScroll:true})}onValueChange(n,s){if(s===undefined||n===s)return;requestAnimationFrame((()=>{const s=document.activeElement;if(!s||!this.el.contains(s))return;this.focusItem(this.enabledItems.some((s=>s.id===n))?n:this.focusableId)}))}findEnabled(n,s){const e=this.items.length;for(let a=1;a<=e;a++){const o=(n+s*a+e*a)%e;if(!this.items[o]?.isInactive)return o}return n}handleKeyDown(n){if(!this.enabledItems.length)return;const s=n.target?.closest("[data-panel-sub-nav-id]")?.dataset["panelSubNavId"];const e=this.items.findIndex((n=>n.id===s));const a=this.items.findIndex((n=>n.id===this.value&&!n.isInactive));const o=e>=0?e:a>=0?a:n.key==="ArrowUp"?0:-1;let i=null;if(n.key==="ArrowDown"){i=this.findEnabled(o,1)}else if(n.key==="ArrowUp"){i=this.findEnabled(o,-1)}else if(n.key==="Home"){i=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));i=n<0?null:this.items.length-1-n}if(i===null||i<0)return;const r=this.items[i];if(!r||r.isInactive)return;n.preventDefault();this.selectItem(r.id)}render(){const n=this.focusableId;const s=this.background;return a(o,{key:"d2d9baf9fb38acf129ddbaf8946fa0ee69b62a7e"},a("div",{key:"094fa67ea80f3be59adae04ef1c68a2ec7ca3dba",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((e=>{const o=e.id===this.value;return a("button",{id:e.id,type:"button",role:"tab","data-panel-sub-nav-id":e.id,class:{"panel-sub-nav__item":true,"panel-sub-nav__item--selected":o,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":o&&!e.isInactive,"ds-interaction-fill--on-faint":s==="faint","ds-interaction-fill--on-medium":s==="medium","ds-interaction-fill--on-bold":s==="bold","ds-interaction-fill--on-strong":s==="strong","ds-interaction-fill--on-translucent":s==="translucent","ds-interaction-fill--on-inverted":s==="inverted","ds-interaction-fill--on-media":s==="media","ds-interaction-fill--on-always-dark":s==="always-dark",[`panel-sub-nav__item--on-${s}`]:!!s,"ds-control-inactive":!!e.isInactive},"aria-selected":o?"true":"false","aria-controls":e.panelId,"aria-disabled":e.isInactive?"true":undefined,disabled:e.isInactive,tabIndex:e.id===n?0:-1,onClick:()=>!e.isInactive&&this.selectItem(e.id)},a("ds-text",{class:"panel-sub-nav__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:"inherit"},e.label))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return t()}},[2,"ds-panel-sub-nav",{value:[1025],items:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const n=["ds-panel-sub-nav","ds-text"];n.forEach((n=>{switch(n){case"ds-panel-sub-nav":if(!customElements.get(i(n))){customElements.define(i(n),c)}break;case"ds-text":if(!customElements.get(i(n))){r()}break}}))}d();const l=c;const u=d;export{l as DsPanelSubNav,u as defineCustomElement};
+import{p as n,H as s,c as e,h as o,a,t as i}from"./index.js";import{d as r}from"./p-C0_8K4y7.js";const t=()=>`.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-nav,.ds-control--sm.sc-ds-panel-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-nav,.ds-control--xs.sc-ds-panel-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-panel-sub-nav-h,.ds-control--md.sc-ds-panel-sub-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-sub-nav-h,.ds-control--sm.sc-ds-panel-sub-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-sub-nav-h,.ds-control--xs.sc-ds-panel-sub-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-sub-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-sub-nav-h:focus-visible,.ds-focus-ring.sc-ds-panel-sub-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-sub-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-panel-sub-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-sub-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-panel-sub-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-panel-sub-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-panel-sub-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-sub-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-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-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before,.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill.sc-ds-panel-sub-nav::before{z-index:1}.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--bordered.sc-ds-panel-sub-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-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h,.ds-interaction-fill--selected.sc-ds-panel-sub-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-panel-sub-nav-h>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill.sc-ds-panel-sub-nav>.ds-interaction-fill__content.sc-ds-panel-sub-nav,.ds-interaction-fill__content.sc-ds-panel-sub-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-faint.sc-ds-panel-sub-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-panel-sub-nav-h,.ds-interaction-fill--on-medium.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-bold.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-strong.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-translucent.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-inverted.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-media.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-panel-sub-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-sub-nav-h,.ds-interaction-fill--on-navigation.sc-ds-panel-sub-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)}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:0.5;pointer-events:none;cursor:not-allowed}.sc-ds-panel-sub-nav-h{display:block;width:100%}.panel-sub-nav.sc-ds-panel-sub-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.panel-sub-nav__item.sc-ds-panel-sub-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);width:100%;height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);box-sizing:border-box;border:none;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);cursor:pointer;text-align:left;-webkit-user-select:none;user-select:none;transition:color var(--effect-motion-short-2)}.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-primary)}.panel-sub-nav__item--on-medium.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-secondary)}.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-medium-background-primary)}.panel-sub-nav__item--on-bold.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-secondary)}.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-bold-background-primary)}.panel-sub-nav__item--on-strong.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-secondary)}.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-foreground-on-strong-background-primary)}.panel-sub-nav__item--on-translucent.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-secondary)}.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-translucent-foreground-primary)}.panel-sub-nav__item--on-inverted.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-secondary)}.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-inverted-foreground-primary)}.panel-sub-nav__item--on-media.sc-ds-panel-sub-nav{color:var(--color-media-foreground-secondary)}.panel-sub-nav__item--on-media.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-media-foreground-primary)}.panel-sub-nav__item--on-always-dark.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-secondary)}.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected.sc-ds-panel-sub-nav{color:var(--color-always-dark-foreground-primary)}ds-text.panel-sub-nav__label.sc-ds-panel-sub-nav{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const c=n(class n extends s{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.items=[];this.ariaLabel=null}get enabledItems(){return this.items.filter((n=>!n.isInactive))}get focusableId(){return this.enabledItems.some((n=>n.id===this.value))?this.value:this.enabledItems[0]?.id??""}selectItem(n){this.value=n;this.dsChange.emit(n);this.focusItem(n)}focusItem(n){const s=this.el.querySelector(`[data-panel-sub-nav-id="${n}"]`);s?.focus({preventScroll:true})}onValueChange(n,s){if(s===undefined||n===s)return;requestAnimationFrame((()=>{const s=document.activeElement;if(!s||!this.el.contains(s))return;this.focusItem(this.enabledItems.some((s=>s.id===n))?n:this.focusableId)}))}findEnabled(n,s){const e=this.items.length;for(let o=1;o<=e;o++){const a=(n+s*o+e*o)%e;if(!this.items[a]?.isInactive)return a}return n}handleKeyDown(n){if(!this.enabledItems.length)return;const s=n.target?.closest("[data-panel-sub-nav-id]")?.dataset["panelSubNavId"];const e=this.items.findIndex((n=>n.id===s));const o=this.items.findIndex((n=>n.id===this.value&&!n.isInactive));const a=e>=0?e:o>=0?o:n.key==="ArrowUp"?0:-1;let i=null;if(n.key==="ArrowDown"){i=this.findEnabled(a,1)}else if(n.key==="ArrowUp"){i=this.findEnabled(a,-1)}else if(n.key==="Home"){i=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));i=n<0?null:this.items.length-1-n}if(i===null||i<0)return;const r=this.items[i];if(!r||r.isInactive)return;n.preventDefault();this.selectItem(r.id)}render(){const n=this.focusableId;const s=this.background;return o(a,{key:"a024de12f8028bfc3894e96cc586ec68e65b9b6f"},o("div",{key:"51e6c65cfeb8aef7585b092bec0abea8bdae11e9",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((e=>{const a=e.id===this.value;return o("button",{id:e.id,type:"button",role:"tab","data-panel-sub-nav-id":e.id,class:{"panel-sub-nav__item":true,"panel-sub-nav__item--selected":a,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":a&&!e.isInactive,"ds-interaction-fill--on-faint":s==="faint","ds-interaction-fill--on-medium":s==="medium","ds-interaction-fill--on-bold":s==="bold","ds-interaction-fill--on-strong":s==="strong","ds-interaction-fill--on-translucent":s==="translucent","ds-interaction-fill--on-inverted":s==="inverted","ds-interaction-fill--on-media":s==="media","ds-interaction-fill--on-always-dark":s==="always-dark",[`panel-sub-nav__item--on-${s}`]:!!s,"ds-control-inactive":!!e.isInactive},"aria-selected":a?"true":"false","aria-controls":e.panelId,"aria-disabled":e.isInactive?"true":undefined,disabled:e.isInactive,tabIndex:e.id===n?0:-1,onClick:()=>!e.isInactive&&this.selectItem(e.id)},o("ds-text",{class:"panel-sub-nav__label ds-interaction-fill__content",as:"span",variant:"text-body-medium",color:"inherit"},e.label))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return t()}},[2,"ds-panel-sub-nav",{value:[1025],items:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const n=["ds-panel-sub-nav","ds-text"];n.forEach((n=>{switch(n){case"ds-panel-sub-nav":if(!customElements.get(i(n))){customElements.define(i(n),c)}break;case"ds-text":if(!customElements.get(i(n))){r()}break}}))}d();const l=c;const u=d;export{l as DsPanelSubNav,u as defineCustomElement};
 //# sourceMappingURL=ds-panel-sub-nav.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["panelSubNavCss","PanelSubNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","items","ariaLabel","enabledItems","filter","item","isInactive","focusableId","some","id","selectItem","dsChange","emit","focusItem","el","querySelector","focus","preventScroll","onValueChange","next","previous","undefined","requestAnimationFrame","active","document","activeElement","contains","findEnabled","from","step","length","offset","index","handleKeyDown","event","focusedId","target","closest","dataset","focusedIndex","findIndex","selectedIndex","currentIndex","key","nextIndex","reversedIndex","reverse","preventDefault","render","background","h","Host","class","role","ariaLabelledby","map","isSelected","type","panelId","disabled","tabIndex","onClick","as","variant","color","label"],"sources":["src/wc/components/PanelSubNav/PanelSubNav.css?tag=ds-panel-sub-nav&encapsulation=scoped","src/wc/components/PanelSubNav/PanelSubNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport type { PanelSubNavItem } from './panel-sub-nav-types';\n\nexport type PanelSubNavBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-panel-sub-nav',\n  styleUrl: 'PanelSubNav.css',\n  scoped: true,\n})\nexport class PanelSubNav {\n  @Element() el!: HTMLElement;\n\n  /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Local panel tabs. Assign this array through the JavaScript property.\n   * Replace the array reference when items change.\n   */\n  @Prop() items: PanelSubNavItem[] = [];\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: PanelSubNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get enabledItems(): PanelSubNavItem[] {\n    return this.items.filter(item => !item.isInactive);\n  }\n\n  private get focusableId(): string {\n    return this.enabledItems.some(item => item.id === this.value)\n      ? this.value\n      : (this.enabledItems[0]?.id ?? '');\n  }\n\n  private selectItem(id: string) {\n    this.value = id;\n    this.dsChange.emit(id);\n    this.focusItem(id);\n  }\n\n  private focusItem(id: string) {\n    const item = this.el.querySelector(`[data-panel-sub-nav-id=\"${id}\"]`) as HTMLElement | null;\n    item?.focus({ preventScroll: true });\n  }\n\n  @Watch('value')\n  onValueChange(next: string, previous: string | undefined) {\n    if (previous === undefined || next === previous) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n      this.focusItem(this.enabledItems.some(item => item.id === next) ? next : this.focusableId);\n    });\n  }\n\n  private findEnabled(from: number, step: 1 | -1): number {\n    const length = this.items.length;\n    for (let offset = 1; offset <= length; offset++) {\n      const index = (from + step * offset + length * offset) % length;\n      if (!this.items[index]?.isInactive) return index;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.enabledItems.length) return;\n\n    const focusedId = (event.target as Element | null)\n      ?.closest<HTMLElement>('[data-panel-sub-nav-id]')\n      ?.dataset['panelSubNavId'];\n    const focusedIndex = this.items.findIndex(item => item.id === focusedId);\n    const selectedIndex = this.items.findIndex(item => item.id === this.value && !item.isInactive);\n    const currentIndex = focusedIndex >= 0\n      ? focusedIndex\n      : selectedIndex >= 0\n        ? selectedIndex\n      : (event.key === 'ArrowUp' ? 0 : -1);\n    let nextIndex: number | null = null;\n\n    if (event.key === 'ArrowDown') {\n      nextIndex = this.findEnabled(currentIndex, 1);\n    } else if (event.key === 'ArrowUp') {\n      nextIndex = this.findEnabled(currentIndex, -1);\n    } else if (event.key === 'Home') {\n      nextIndex = this.items.findIndex(item => !item.isInactive);\n    } else if (event.key === 'End') {\n      const reversedIndex = [...this.items].reverse().findIndex(item => !item.isInactive);\n      nextIndex = reversedIndex < 0 ? null : this.items.length - 1 - reversedIndex;\n    }\n\n    if (nextIndex === null || nextIndex < 0) return;\n    const next = this.items[nextIndex];\n    if (!next || next.isInactive) return;\n\n    event.preventDefault();\n    this.selectItem(next.id);\n  }\n\n  render() {\n    const focusableId = this.focusableId;\n    const background = this.background;\n\n    return (\n      <Host>\n        <div\n          class=\"panel-sub-nav\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.items.map(item => {\n            const isSelected = item.id === this.value;\n            return (\n              <button\n                id={item.id}\n                type=\"button\"\n                role=\"tab\"\n                data-panel-sub-nav-id={item.id}\n                class={{\n                  'panel-sub-nav__item': true,\n                  'panel-sub-nav__item--selected': isSelected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !item.isInactive,\n                  'ds-interaction-fill--selected': isSelected && !item.isInactive,\n                  'ds-interaction-fill--on-faint': background === 'faint',\n                  'ds-interaction-fill--on-medium': background === 'medium',\n                  'ds-interaction-fill--on-bold': background === 'bold',\n                  'ds-interaction-fill--on-strong': background === 'strong',\n                  'ds-interaction-fill--on-translucent': background === 'translucent',\n                  'ds-interaction-fill--on-inverted': background === 'inverted',\n                  'ds-interaction-fill--on-media': background === 'media',\n                  'ds-interaction-fill--on-always-dark': background === 'always-dark',\n                  [`panel-sub-nav__item--on-${background}`]: !!background,\n                  'ds-control-inactive': !!item.isInactive,\n                }}\n                aria-selected={isSelected ? 'true' : 'false'}\n                aria-controls={item.panelId}\n                aria-disabled={item.isInactive ? 'true' : undefined}\n                disabled={item.isInactive}\n                tabIndex={item.id === focusableId ? 0 : -1}\n                onClick={() => !item.isInactive && this.selectItem(item.id)}\n              >\n                <ds-text\n                  class=\"panel-sub-nav__label ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"inherit\"\n                >\n                  {item.label}\n                </ds-text>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["panelSubNavCss","PanelSubNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","items","ariaLabel","enabledItems","filter","item","isInactive","focusableId","some","id","selectItem","dsChange","emit","focusItem","el","querySelector","focus","preventScroll","onValueChange","next","previous","undefined","requestAnimationFrame","active","document","activeElement","contains","findEnabled","from","step","length","offset","index","handleKeyDown","event","focusedId","target","closest","dataset","focusedIndex","findIndex","selectedIndex","currentIndex","key","nextIndex","reversedIndex","reverse","preventDefault","render","background","h","Host","class","role","ariaLabelledby","map","isSelected","type","panelId","disabled","tabIndex","onClick","as","variant","color","label"],"sources":["src/wc/components/PanelSubNav/PanelSubNav.css?tag=ds-panel-sub-nav&encapsulation=scoped","src/wc/components/PanelSubNav/PanelSubNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n.panel-sub-nav {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.panel-sub-nav__item {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-gap);\n  width: 100%;\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.panel-sub-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.panel-sub-nav__item--on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.panel-sub-nav__item--on-medium.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.panel-sub-nav__item--on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.panel-sub-nav__item--on-bold.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.panel-sub-nav__item--on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.panel-sub-nav__item--on-strong.panel-sub-nav__item--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.panel-sub-nav__item--on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-translucent.panel-sub-nav__item--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.panel-sub-nav__item--on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-inverted.panel-sub-nav__item--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.panel-sub-nav__item--on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-media.panel-sub-nav__item--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.panel-sub-nav__item--on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.panel-sub-nav__item--on-always-dark.panel-sub-nav__item--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\nds-text.panel-sub-nav__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport type { PanelSubNavItem } from './panel-sub-nav-types';\n\nexport type PanelSubNavBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-panel-sub-nav',\n  styleUrl: 'PanelSubNav.css',\n  scoped: true,\n})\nexport class PanelSubNav {\n  @Element() el!: HTMLElement;\n\n  /** Required selected item id when enabled items exist. Keep synchronized with the visible panel. */\n  @Prop({ mutable: true }) value: string = '';\n  /**\n   * Local panel tabs. Assign this array through the JavaScript property.\n   * Replace the array reference when items change.\n   */\n  @Prop() items: PanelSubNavItem[] = [];\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: PanelSubNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get enabledItems(): PanelSubNavItem[] {\n    return this.items.filter(item => !item.isInactive);\n  }\n\n  private get focusableId(): string {\n    return this.enabledItems.some(item => item.id === this.value)\n      ? this.value\n      : (this.enabledItems[0]?.id ?? '');\n  }\n\n  private selectItem(id: string) {\n    this.value = id;\n    this.dsChange.emit(id);\n    this.focusItem(id);\n  }\n\n  private focusItem(id: string) {\n    const item = this.el.querySelector(`[data-panel-sub-nav-id=\"${id}\"]`) as HTMLElement | null;\n    item?.focus({ preventScroll: true });\n  }\n\n  @Watch('value')\n  onValueChange(next: string, previous: string | undefined) {\n    if (previous === undefined || next === previous) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n      this.focusItem(this.enabledItems.some(item => item.id === next) ? next : this.focusableId);\n    });\n  }\n\n  private findEnabled(from: number, step: 1 | -1): number {\n    const length = this.items.length;\n    for (let offset = 1; offset <= length; offset++) {\n      const index = (from + step * offset + length * offset) % length;\n      if (!this.items[index]?.isInactive) return index;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.enabledItems.length) return;\n\n    const focusedId = (event.target as Element | null)\n      ?.closest<HTMLElement>('[data-panel-sub-nav-id]')\n      ?.dataset['panelSubNavId'];\n    const focusedIndex = this.items.findIndex(item => item.id === focusedId);\n    const selectedIndex = this.items.findIndex(item => item.id === this.value && !item.isInactive);\n    const currentIndex = focusedIndex >= 0\n      ? focusedIndex\n      : selectedIndex >= 0\n        ? selectedIndex\n      : (event.key === 'ArrowUp' ? 0 : -1);\n    let nextIndex: number | null = null;\n\n    if (event.key === 'ArrowDown') {\n      nextIndex = this.findEnabled(currentIndex, 1);\n    } else if (event.key === 'ArrowUp') {\n      nextIndex = this.findEnabled(currentIndex, -1);\n    } else if (event.key === 'Home') {\n      nextIndex = this.items.findIndex(item => !item.isInactive);\n    } else if (event.key === 'End') {\n      const reversedIndex = [...this.items].reverse().findIndex(item => !item.isInactive);\n      nextIndex = reversedIndex < 0 ? null : this.items.length - 1 - reversedIndex;\n    }\n\n    if (nextIndex === null || nextIndex < 0) return;\n    const next = this.items[nextIndex];\n    if (!next || next.isInactive) return;\n\n    event.preventDefault();\n    this.selectItem(next.id);\n  }\n\n  render() {\n    const focusableId = this.focusableId;\n    const background = this.background;\n\n    return (\n      <Host>\n        <div\n          class=\"panel-sub-nav\"\n          role=\"tablist\"\n          aria-orientation=\"vertical\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.items.map(item => {\n            const isSelected = item.id === this.value;\n            return (\n              <button\n                id={item.id}\n                type=\"button\"\n                role=\"tab\"\n                data-panel-sub-nav-id={item.id}\n                class={{\n                  'panel-sub-nav__item': true,\n                  'panel-sub-nav__item--selected': isSelected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !item.isInactive,\n                  'ds-interaction-fill--selected': isSelected && !item.isInactive,\n                  'ds-interaction-fill--on-faint': background === 'faint',\n                  'ds-interaction-fill--on-medium': background === 'medium',\n                  'ds-interaction-fill--on-bold': background === 'bold',\n                  'ds-interaction-fill--on-strong': background === 'strong',\n                  'ds-interaction-fill--on-translucent': background === 'translucent',\n                  'ds-interaction-fill--on-inverted': background === 'inverted',\n                  'ds-interaction-fill--on-media': background === 'media',\n                  'ds-interaction-fill--on-always-dark': background === 'always-dark',\n                  [`panel-sub-nav__item--on-${background}`]: !!background,\n                  'ds-control-inactive': !!item.isInactive,\n                }}\n                aria-selected={isSelected ? 'true' : 'false'}\n                aria-controls={item.panelId}\n                aria-disabled={item.isInactive ? 'true' : undefined}\n                disabled={item.isInactive}\n                tabIndex={item.id === focusableId ? 0 : -1}\n                onClick={() => !item.isInactive && this.selectItem(item.id)}\n              >\n                <ds-text\n                  class=\"panel-sub-nav__label ds-interaction-fill__content\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  color=\"inherit\"\n                >\n                  {item.label}\n                </ds-text>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-panel-tool-header.js

@@ -1,2 +1,2 @@
-import{P as s,d as o}from"./p-BzsITTZa.js";const t=s;const a=o;export{t as DsPanelToolHeader,a as defineCustomElement};
+import{P as o,d as s}from"./p-DBi1bmOL.js";const t=o;const m=s;export{t as DsPanelToolHeader,m as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-header.js.map

package/dist/components/ds-panel-tool-search.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as a,a as o,t as l}from"./index.js";import{C as r}from"./p-CUik7PCi.js";import{d as i}from"./p-DxeHimqk.js";import{d as n}from"./p-webARv8d.js";import{d}from"./p-BkwBtZs3.js";import{d as c}from"./p-BAfG3M8z.js";import{d as h}from"./p-Cpr3K41-.js";import{d as p}from"./p-Bs6SS34m.js";import{d as g}from"./p-DfIch2Dk.js";const m=()=>`.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--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}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-panel-tool-search{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-panel-tool-search:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-panel-tool-search>ds-icon.sc-ds-panel-tool-search{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-panel-tool-search .select-search__control.sc-ds-panel-tool-search .select-search__clear.sc-ds-panel-tool-search{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-cancel-button,.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-panel-tool-search-h,.ds-text--display-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-panel-tool-search-h,.ds-text--display-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-panel-tool-search-h,.ds-text--title-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-panel-tool-search-h,.ds-text--title-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-panel-tool-search-h,.ds-text--title-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-panel-tool-search-h,.ds-text--body-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-panel-tool-search-h,.ds-text--body-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-panel-tool-search-h,.ds-text--body-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-panel-tool-search-h,.ds-text--caption.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;display:flex;align-items:center;gap:var(--dimension-space-100);width:100%;height:100%;padding:var(--dimension-space-100);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.select-search.sc-ds-panel-tool-search::after{display:none}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsFilterToggle=t(this,"dsFilterToggle");this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=e=>{this.value=e;this.dsChange.emit(e)}}componentDidRender(){const e=this.el.querySelector("input");if(e&&e.value!==this.value)e.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const e=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(e?.setFocus?.())}render(){return a(o,{key:"04dc77bc212ecc448bf46804a85828f2fb8dd88f"},a("div",{key:"bb397a29ff173391df8236ac6677ddd178c6e012",class:"panel-tool-search"},a(r,{key:"68bb5caecdfb57006664fd66760b1413ee93a27f",value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:e=>{e.stopPropagation()},onDsClick:e=>{e.stopPropagation();this.dsFilterToggle.emit(e.detail)}}))):null))}get el(){return this}static get style(){return m()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function x(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-search":if(!customElements.get(l(e))){customElements.define(l(e),y)}break;case"ds-badge":if(!customElements.get(l(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){n()}break;case"ds-divider":if(!customElements.get(l(e))){d()}break;case"ds-icon":if(!customElements.get(l(e))){c()}break;case"ds-loader":if(!customElements.get(l(e))){h()}break;case"ds-text":if(!customElements.get(l(e))){p()}break;case"ds-tooltip":if(!customElements.get(l(e))){g()}break}}))}x();const f=y;const u=x;export{f as DsPanelToolSearch,u as defineCustomElement};
+import{p as e,H as s,c as t,h as a,a as o,t as l}from"./index.js";import{C as r}from"./p-DbpfpeQT.js";import{d as i}from"./p-DOCKtrS4.js";import{d as n}from"./p-xY3TjBF5.js";import{d}from"./p-D6jK2Hyi.js";import{d as c}from"./p-BAfG3M8z.js";import{d as h}from"./p-Cpr3K41-.js";import{d as p}from"./p-C0_8K4y7.js";import{d as g}from"./p-CCHqsF_H.js";const m=()=>`.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search,.ds-control--sm.sc-ds-panel-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search,.ds-control--xs.sc-ds-panel-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-panel-tool-search-h,.ds-control--md.sc-ds-panel-tool-search{--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-tool-search-h,.ds-control--sm.sc-ds-panel-tool-search{--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-tool-search-h,.ds-control--xs.sc-ds-panel-tool-search{--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}.select-search.sc-ds-panel-tool-search{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-panel-tool-search{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-panel-tool-search:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-panel-tool-search>ds-icon.sc-ds-panel-tool-search{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-panel-tool-search .select-search__control.sc-ds-panel-tool-search .select-search__clear.sc-ds-panel-tool-search{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-panel-tool-search input.sc-ds-panel-tool-search:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-cancel-button,.select-search__control.sc-ds-panel-tool-search input[type='search'].sc-ds-panel-tool-search::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-panel-tool-search-h,.ds-text--display-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-panel-tool-search-h,.ds-text--display-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-panel-tool-search-h,.ds-text--title-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-panel-tool-search-h,.ds-text--title-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-panel-tool-search-h,.ds-text--title-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-panel-tool-search-h,.ds-text--body-large.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-panel-tool-search-h,.ds-text--body-medium.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-panel-tool-search-h,.ds-text--body-small.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-panel-tool-search-h,.ds-text--caption.sc-ds-panel-tool-search{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--display-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--display-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-large.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--title-medium.ds-text--regular.sc-ds-panel-tool-search,.ds-text--title-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--emphasis.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-large.ds-text--regular.sc-ds-panel-tool-search,.ds-text--body-medium.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--body-small.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--emphasis.sc-ds-panel-tool-search{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search-h,.ds-text--caption.ds-text--regular.sc-ds-panel-tool-search{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-panel-tool-search-h{display:block;flex:0 0 var(--dimension-size-600);width:100%;min-width:0;height:var(--dimension-size-600);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search{position:relative;display:flex;align-items:center;gap:var(--dimension-space-100);width:100%;height:100%;padding:var(--dimension-space-100);box-sizing:border-box;background:transparent}.panel-tool-search.sc-ds-panel-tool-search::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-panel-tool-search{flex:1 1 auto;width:auto;min-width:0;height:var(--dimension-size-400);padding:0}.select-search.sc-ds-panel-tool-search::after{display:none}.panel-tool-search__filter-group.sc-ds-panel-tool-search{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}.panel-tool-search__divider.sc-ds-panel-tool-search,.panel-tool-search__filter.sc-ds-panel-tool-search{flex:0 0 auto}`;const y=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsFilterToggle=t(this,"dsFilterToggle");this.value="";this.placeholder="Search";this.ariaLabel="Search";this.isInactive=false;this.showFilter=false;this.filterAriaLabel="Filter";this.filterTriggerId="";this.filterExpanded=false;this.filterActive=false;this.handleChange=e=>{this.value=e;this.dsChange.emit(e)}}componentDidRender(){const e=this.el.querySelector("input");if(e&&e.value!==this.value)e.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const e=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(e?.setFocus?.())}render(){return a(o,{key:"ae194b7011fdcac0464ac05b0d539dcacd5fe9ca"},a("div",{key:"e804deadb37c966d900e3d3315848ce9a70ddfed",class:"panel-tool-search"},a(r,{key:"7e9781bb3a9462c5b69a80fb99ea04f36941d307",value:this.value,placeholder:this.placeholder,ariaLabel:this.ariaLabel,controls:this.controls,disabled:this.isInactive,inputRef:()=>undefined,clearLabel:"Clear",onValueChange:this.handleChange,onClear:()=>this.dsClear.emit(),onKeyDown:()=>undefined}),this.showFilter?a("div",{class:"panel-tool-search__filter-group"},a("ds-divider",{class:"panel-tool-search__divider",orientation:"vertical",length:"var(--dimension-size-200)"}),a("ds-tooltip",{label:this.filterAriaLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{id:this.filterTriggerId||undefined,class:"panel-tool-search__filter",variant:"icon",icon:"Filters",size:"md","aria-label":this.filterAriaLabel,haspopup:"menu",controls:this.filterControls,expanded:this.filterExpanded,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:e=>{e.stopPropagation()},onDsClick:e=>{e.stopPropagation();this.dsFilterToggle.emit(e.detail)}}))):null))}get el(){return this}static get style(){return m()}},[2,"ds-panel-tool-search",{value:[1025],placeholder:[1],ariaLabel:[1,"aria-label"],controls:[1],isInactive:[4,"is-inactive"],showFilter:[4,"show-filter"],filterAriaLabel:[1,"filter-aria-label"],filterTriggerId:[1,"filter-trigger-id"],filterControls:[1,"filter-controls"],filterExpanded:[4,"filter-expanded"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function x(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-search":if(!customElements.get(l(e))){customElements.define(l(e),y)}break;case"ds-badge":if(!customElements.get(l(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){n()}break;case"ds-divider":if(!customElements.get(l(e))){d()}break;case"ds-icon":if(!customElements.get(l(e))){c()}break;case"ds-loader":if(!customElements.get(l(e))){h()}break;case"ds-text":if(!customElements.get(l(e))){p()}break;case"ds-tooltip":if(!customElements.get(l(e))){g()}break}}))}x();const u=y;const f=x;export{u as DsPanelToolSearch,f as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-search.js.map

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as o,a as i,t as n}from"./index.js";import{p as a}from"./p-BOQnc-M4.js";import{p as l}from"./p-Dg3xLna0.js";import{d as r}from"./p-DxeHimqk.js";import{d}from"./p-webARv8d.js";import{d as c}from"./p-BAfG3M8z.js";import{d as h}from"./p-Cpr3K41-.js";import{d as p}from"./p-BzsITTZa.js";import{d as f}from"./p-Bs6SS34m.js";import{d as u}from"./p-DfIch2Dk.js";const m=["search","agents","messages","stacks","activity","help"];const g="search";const v="help";const _={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const w={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};function b(s,e){if(e){return a(e,[])}return s??[]}function y(s){const e=new Map;for(const t of s){if(!e.has(t.id))e.set(t.id,t)}return m.flatMap((s=>{const t=e.get(s);return t?[t]:[]}))}function x(s){return s!==null&&m.includes(s)}function k(s,e,t){if(!t||s.some((s=>s.id===t))){return{open:e,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function T(s){const e=s.transitionProperty.split(",").map((s=>s.trim()));const t=s.transitionDuration.split(",").map((s=>l(s.trim(),0)));const o=s.transitionDelay.split(",").map((s=>l(s.trim(),0)));return e.reduce(((s,e,i)=>{if(e!=="all"&&e!=="max-width")return s;const n=t[i%t.length]??0;const a=o[i%o.length]??0;return Math.max(s,n+a,0)}),0)}function A(s,e){return!s&&e==="idle"}function C(s,e,t){if(t==="closing")return s<=.5;if(t==="opening")return e>0&&s>=e-.5;return true}function z(s,e,t){if(s&&e===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const S=()=>`.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools,.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools,.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const j=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.headersJson="";this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=s=>{const e=s.detail;if(!this.activeTool||!e?.id)return;s.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:e.id})};this.handleTransitionEnd=s=>{const e=this.el.querySelector(".panel-tools__drawer");if(s.target!==e)return;if(s.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(s.type==="transitioncancel")return;if(e&&!this.drawerTransitionAtTerminal(e,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=s=>{const e=z(this.open,this.activeTool,s);this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:s,selected:e.selected})};this.handleRailKeyDown=(s,e)=>{const t=this.orderedRailItems;if(!t.length)return;if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleToolChange(t[e].id);return}if(s.key==="ArrowDown"){if(e>=t.length-1)return;s.preventDefault();this.focusRailAt(e+1);return}if(s.key==="ArrowUp"){if(e<=0)return;s.preventDefault();this.focusRailAt(e-1)}}}get railItems(){return b(this.items,this.itemsJson)}get orderedRailItems(){const s=y(this.railItems);const e=s.find((s=>s.id===g));const t=s.find((s=>s.id===v));const o=s.filter((s=>s.id!==g&&s.id!==v));const i=[];if(e)i.push(e);i.push(...o);if(t)i.push(t);return i}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null}presentationChanged(s,t){if(s===t)return;const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(s==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof e?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const s=this.focusBeforeFullscreen;const e=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(s?.isConnected){s.focus({preventScroll:true})}const t=s?document.activeElement===s||s.contains(document.activeElement):false;if(!t&&e)await this.focusHeaderAction(e);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:s})}handleFullscreenEscape(s){if(this.presentation!=="fullscreen"||s.key!=="Escape")return;s.preventDefault();s.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const s=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(s,e){if(s)this.drawerSurfaceRetained=true;if(this.readyForMotion&&e!==undefined&&e!==s){this.startDrawerTransition(s?"opening":"closing")}else if(!s){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const s=localStorage.getItem(this.storageKey);if(x(s))this.activeTool=s}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const s=k(this.railItems,this.open,this.activeTool);if(!s.removedTool)return;this.clearPersistedTool();this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:s.removedTool,selected:false})}startDrawerTransition(s){const e=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=s;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:s});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==s)return;if(!e){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(e,s)){this.finishDrawerTransition();return}const o=T(getComputedStyle(e));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(s,e){const t=s.getBoundingClientRect().width;const o=s.querySelector(".panel-tools__drawer-surface");const i=o?.getBoundingClientRect().width??0;return C(t,i,e)}finishDrawerTransition(){const s=this.motion;const e=s!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(s==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(s){return this.open&&this.activeTool===s}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(s){return this.isDrawerPresent()&&this.activeTool===s}hasFullView(s){return this.fullViewToolIds.includes(s)}syncFullViewTools(){const s=["search","messages","stacks","activity","agents","help"];const e=s.filter((s=>Boolean(this.el.querySelector(`[slot="${s}-view"]`))));if(e.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return _[this.activeTool]??""}resolvedHeaders(){if(Object.keys(this.headers).length)return this.headers;if(!this.headersJson.trim())return{};try{const s=JSON.parse(this.headersJson);return s&&typeof s==="object"&&!Array.isArray(s)?s:{}}catch{return{}}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(s){const e=this.railItems.find((e=>e.id===s));if(!e||e.isInactive)return;this.handleToolChange(s)}async closeDrawer(){if(!this.open)return;const s=this.activeTool;this.open=false;if(s){this.dsToolChange.emit({id:s,selected:false})}}async focusHeaderAction(s){const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}focusRailAt(s){const e=this.orderedRailItems;if(!e.length)return;const t=Math.max(0,Math.min(s,e.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(s,e){const t=s.ariaLabel??_[s.id];return o("ds-tooltip",{key:s.id,label:t,shortcutKey:w[s.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:s.icon,isActive:this.isRailSelected(s.id),activeFill:false,hasBorder:false,dot:s.dot??false,isInactive:s.isInactive,focusTabIndex:e===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(s.id),onFocusin:()=>{this.rovingIndex=e},onKeyDown:s=>this.handleRailKeyDown(s,e),onDsClick:()=>this.handleToolChange(s.id)}))}render(){const s=this.headerLabel();const e=this.activeHeader();const t=e.title?.trim()||s;const n=e.actions??[];const a=this.orderedRailItems;const l=a.find((s=>s.id===g));const r=a.find((s=>s.id===v));const d=a.filter((s=>s.id!==g&&s.id!==v));const c=r?(l?1:0)+d.length:-1;const h=this.isDrawerPresent();const p=A(this.open,this.motion);const f=Boolean(h&&this.activeTool&&this.hasFullView(this.activeTool));const u=["search","messages","stacks","activity","agents","help"];return o(i,{key:"821f824bdafa6908dfc4d546e41557f790565954",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":p,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},o("div",{key:"c34040f57ded9cbd9f280641fe4876e5c491cc9d",class:"panel-tools__layout"},o("nav",{key:"a0f6e4ede958e17235fe0ceefc2a7a79c720cd11",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},l?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(l,0)):null,o("div",{key:"86a0ee73fb93d97c7c4d76a0b9fc94bcf186305e",class:"panel-tools__rail-body"},d.map(((s,e)=>this.renderRailAction(s,l?e+1:e)))),r?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(r,c)):null),o("div",{key:"767f9d79944cc8f219424f84dc5506f8835c1e43",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":h},"aria-hidden":h?null:"true",inert:h?undefined:true},o("div",{key:"17acf487f228def4c709086595bd3dec519e3d2a",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"b8d606acf4861b33b66ace9c8bf4df5831666fd9",class:"panel-tools__body",hidden:f},u.map((s=>{const e=this.isViewActive(s);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":e},hidden:!e},o("slot",{name:s}))}))),o("div",{key:"0c8e3f72a9944aa42c50f1d0966d748348a5a8fc",class:"panel-tools__full-views",hidden:!f},u.map((s=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(s)&&this.hasFullView(s)},hidden:!(this.isViewActive(s)&&this.hasFullView(s))},o("slot",{name:`${s}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return S()}},[262,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],headersJson:[1,"headers-json"],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function E(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tools":if(!customElements.get(n(s))){customElements.define(n(s),j)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){d()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){h()}break;case"ds-panel-tool-header":if(!customElements.get(n(s))){p()}break;case"ds-text":if(!customElements.get(n(s))){f()}break;case"ds-tooltip":if(!customElements.get(n(s))){u()}break}}))}E();const F=j;const D=E;export{F as DsPanelTools,D as defineCustomElement};
+import{p as s,H as e,c as t,h as o,a as i,t as n}from"./index.js";import{p as a}from"./p-BOQnc-M4.js";import{p as l}from"./p-Dg3xLna0.js";import{d as r}from"./p-DOCKtrS4.js";import{d}from"./p-xY3TjBF5.js";import{d as c}from"./p-BAfG3M8z.js";import{d as h}from"./p-Cpr3K41-.js";import{d as p}from"./p-DBi1bmOL.js";import{d as f}from"./p-C0_8K4y7.js";import{d as u}from"./p-CCHqsF_H.js";const m=["search","agents","messages","stacks","activity","help"];const g="search";const v="help";const _={search:"Search",messages:"Messages",stacks:"Stacks",activity:"Activity",agents:"Agents",help:"Help & Support"};const b={search:"K",agents:"A",messages:"M",stacks:"S",activity:"N",help:"/"};function w(s,e){if(e){return a(e,[])}return s??[]}function y(s){const e=new Map;for(const t of s){if(!e.has(t.id))e.set(t.id,t)}return m.flatMap((s=>{const t=e.get(s);return t?[t]:[]}))}function x(s){return s!==null&&m.includes(s)}function k(s,e,t){if(!t||s.some((s=>s.id===t))){return{open:e,activeTool:t,removedTool:""}}return{open:false,activeTool:"",removedTool:t}}function C(s){const e=s.transitionProperty.split(",").map((s=>s.trim()));const t=s.transitionDuration.split(",").map((s=>l(s.trim(),0)));const o=s.transitionDelay.split(",").map((s=>l(s.trim(),0)));return e.reduce(((s,e,i)=>{if(e!=="all"&&e!=="max-width")return s;const n=t[i%t.length]??0;const a=o[i%o.length]??0;return Math.max(s,n+a,0)}),0)}function T(s,e){return!s&&e==="idle"}function A(s,e,t){if(t==="closing")return s<=.5;if(t==="opening")return e>0&&s>=e-.5;return true}function z(s,e,t){if(s&&e===t){return{open:false,activeTool:t,selected:false}}return{open:true,activeTool:t,selected:true}}const S=()=>`.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools,.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools,.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-panel-tools-h,.ds-control--md.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-panel-tools-h,.ds-control--sm.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-panel-tools-h,.ds-control--xs.sc-ds-panel-tools{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-panel-tools-h{display:block;flex:0 0 auto;box-sizing:border-box;height:100%;min-height:0;overflow:hidden;--_panel-tools-rail-width:var(--dimension-size-600);--_panel-tools-drawer-width:var(--ds-shell-panel-tools-width, var(--dimension-panel-width-xs));--_panel-tools-border:var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);--_panel-tools-expand-dur:var(--effect-animation-duration-medium-1, 300ms)}.panel-tools__layout.sc-ds-panel-tools{display:flex;flex-direction:row-reverse;align-items:stretch;height:100%;min-height:0;box-sizing:border-box}.panel-tools__drawer.sc-ds-panel-tools{flex:0 0 auto;max-width:0;min-width:0;height:100%;min-height:0;overflow:hidden;box-sizing:border-box;transition:none}.panel-tools--ready.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in-out, ease)}.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-out, ease-out)}.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:max-width var(--_panel-tools-expand-dur)     var(--effect-animation-easing-ease-in, ease-in)}.panel-tools--open.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:var(--_panel-tools-drawer-width)}.panel-tools__drawer--visible.sc-ds-panel-tools{border-left:var(--_panel-tools-border)}.panel-tools__drawer-surface.sc-ds-panel-tools{display:flex;flex-direction:column;width:var(--_panel-tools-drawer-width);height:100%;min-height:0;box-sizing:border-box;background-color:transparent}.panel-tools__full-views.sc-ds-panel-tools,.panel-tools__full-view.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:hidden}.panel-tools__full-view.sc-ds-panel-tools{height:100%}.panel-tools__full-view.sc-ds-panel-tools{display:none}.panel-tools__full-view--active.sc-ds-panel-tools{display:block}[presentation='fullscreen'].sc-ds-panel-tools-h{height:100vh;inset:0;position:fixed;width:100vw;z-index:var(--dimension-z-index-modal)}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__rail.sc-ds-panel-tools{display:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{max-width:100vw;transition:none;width:100vw}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer--visible.sc-ds-panel-tools{border-left:none}[presentation='fullscreen'].sc-ds-panel-tools-h .panel-tools__drawer-surface.sc-ds-panel-tools{background-color:transparent;width:100vw}.panel-tools--presentation-snap.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}.panel-tools__body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow:auto;position:relative}.panel-tools--drawer-resting.sc-ds-panel-tools-h .panel-tools__body.sc-ds-panel-tools{content-visibility:auto;contain-intrinsic-size:auto 200px}.panel-tools__view.sc-ds-panel-tools{display:none;height:100%;min-height:0;box-sizing:border-box;padding:var(--dimension-space-200);color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view.sc-ds-panel-tools-s>*,.panel-tools__view .sc-ds-panel-tools-s>*{margin:0;color:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.panel-tools__view--active.sc-ds-panel-tools{display:block}.panel-tools__rail.sc-ds-panel-tools{flex:0 0 var(--_panel-tools-rail-width);width:var(--_panel-tools-rail-width);min-width:var(--_panel-tools-rail-width);display:flex;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;border-left:var(--_panel-tools-border);background-color:transparent}.panel-tools__rail-header.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);flex-shrink:0;box-sizing:border-box;border-bottom:var(--_panel-tools-border)}.panel-tools__rail-body.sc-ds-panel-tools{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);box-sizing:border-box;scrollbar-width:none}.panel-tools__rail-body.sc-ds-panel-tools::-webkit-scrollbar{display:none}.panel-tools__rail-footer.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:auto;padding:var(--dimension-space-100);box-sizing:border-box}.panel-tools__rail-action.sc-ds-panel-tools{display:flex;align-items:center;justify-content:center;width:100%;height:var(--ds-control-height);flex-shrink:0}@media (prefers-reduced-motion: reduce){.panel-tools--ready.panel-tools--motion-opening.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools,.panel-tools--ready.panel-tools--motion-closing.sc-ds-panel-tools-h .panel-tools__drawer.sc-ds-panel-tools{transition:none}}`;const j=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.dsChromeTransitionStart=t(this,"dsChromeTransitionStart");this.dsChromeTransitionEnd=t(this,"dsChromeTransitionEnd");this.open=false;this.presentation="drawer";this.fullscreenHeaderMode="shared";this.activeTool="";this.items=[];this.itemsJson="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.headers={};this.headersJson="";this.storageKey="";this.motion="idle";this.drawerSurfaceRetained=false;this.readyForMotion=false;this.presentationMotionSuppressed=false;this.rovingIndex=0;this.fullViewToolIds=[];this.motionEnableGeneration=0;this.presentationMotionGeneration=0;this.transitionGeneration=0;this.transitionFallbackTimer=null;this.ignoreReplacementTerminal=false;this.focusBeforeFullscreen=null;this.fullViewObserver=null;this.handleComposedHeaderAction=s=>{const e=s.detail;if(!this.activeTool||!e?.id)return;s.stopPropagation();this.dsHeaderAction.emit({tool:this.activeTool,id:e.id})};this.handleTransitionEnd=s=>{const e=this.el.querySelector(".panel-tools__drawer");if(s.target!==e)return;if(s.propertyName!=="max-width")return;if(this.ignoreReplacementTerminal){this.ignoreReplacementTerminal=false;return}if(s.type==="transitioncancel")return;if(e&&!this.drawerTransitionAtTerminal(e,this.motion))return;this.finishDrawerTransition()};this.handleToolChange=s=>{const e=z(this.open,this.activeTool,s);this.open=e.open;this.activeTool=e.activeTool;this.dsToolChange.emit({id:s,selected:e.selected})};this.handleRailKeyDown=(s,e)=>{const t=this.orderedRailItems;if(!t.length)return;if(s.key==="Enter"||s.key===" "){s.preventDefault();this.handleToolChange(t[e].id);return}if(s.key==="ArrowDown"){if(e>=t.length-1)return;s.preventDefault();this.focusRailAt(e+1);return}if(s.key==="ArrowUp"){if(e<=0)return;s.preventDefault();this.focusRailAt(e-1)}}}get railItems(){return w(this.items,this.itemsJson)}get orderedRailItems(){const s=y(this.railItems);const e=s.find((s=>s.id===g));const t=s.find((s=>s.id===v));const o=s.filter((s=>s.id!==g&&s.id!==v));const i=[];if(e)i.push(e);i.push(...o);if(t)i.push(t);return i}disconnectedCallback(){this.el.removeEventListener("transitionend",this.handleTransitionEnd);this.el.removeEventListener("transitioncancel",this.handleTransitionEnd);this.el.removeEventListener("dsAction",this.handleComposedHeaderAction);this.clearTransitionCompletion();this.motionEnableGeneration+=1;this.fullViewObserver?.disconnect();this.fullViewObserver=null}presentationChanged(s,t){if(s===t)return;const o=++this.presentationMotionGeneration;this.presentationMotionSuppressed=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(o!==this.presentationMotionGeneration)return;this.presentationMotionSuppressed=false}))}));if(s==="fullscreen"){this.focusBeforeFullscreen=document.activeElement instanceof e?document.activeElement:null;this.open=true}else if(t==="fullscreen"){const s=this.focusBeforeFullscreen;const e=this.activeHeader().actions?.[0]?.id;requestAnimationFrame((async()=>{if(s?.isConnected){s.focus({preventScroll:true})}const t=s?document.activeElement===s||s.contains(document.activeElement):false;if(!t&&e)await this.focusHeaderAction(e);this.focusBeforeFullscreen=null}))}this.dsPresentationChange.emit({presentation:s})}handleFullscreenEscape(s){if(this.presentation!=="fullscreen"||s.key!=="Escape")return;s.preventDefault();s.stopPropagation();this.presentation="drawer"}deferMotionEnable(){if(this.readyForMotion)return;const s=++this.motionEnableGeneration;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;requestAnimationFrame((()=>{if(s!==this.motionEnableGeneration)return;this.readyForMotion=true}))}))}connectedCallback(){this.el.addEventListener("transitionend",this.handleTransitionEnd);this.el.addEventListener("transitioncancel",this.handleTransitionEnd);this.el.addEventListener("dsAction",this.handleComposedHeaderAction)}componentWillLoad(){this.restoreLastActiveTool();this.drawerSurfaceRetained=this.open}openChanged(s,e){if(s)this.drawerSurfaceRetained=true;if(this.readyForMotion&&e!==undefined&&e!==s){this.startDrawerTransition(s?"opening":"closing")}else if(!s){this.drawerSurfaceRetained=false}this.deferMotionEnable()}activeToolChanged(){this.persistLastActiveTool();this.deferMotionEnable()}storageKeyChanged(){this.restoreLastActiveTool()}componentDidLoad(){this.deferMotionEnable();this.syncFullViewTools();this.fullViewObserver=new MutationObserver((()=>this.syncFullViewTools()));this.fullViewObserver.observe(this.el,{childList:true,attributes:true,attributeFilter:["slot"]})}itemsChanged(){this.rovingIndex=0;this.reconcileActiveTool();this.deferMotionEnable()}restoreLastActiveTool(){if(!this.storageKey||this.activeTool)return;try{const s=localStorage.getItem(this.storageKey);if(x(s))this.activeTool=s}catch{}}persistLastActiveTool(){if(!this.storageKey||!this.activeTool)return;try{localStorage.setItem(this.storageKey,this.activeTool)}catch{}}clearPersistedTool(){if(!this.storageKey)return;try{localStorage.removeItem(this.storageKey)}catch{}}reconcileActiveTool(){const s=k(this.railItems,this.open,this.activeTool);if(!s.removedTool)return;this.clearPersistedTool();this.open=s.open;this.activeTool=s.activeTool;this.dsToolChange.emit({id:s.removedTool,selected:false})}startDrawerTransition(s){const e=this.el.querySelector(".panel-tools__drawer");if(this.motion!=="idle"){this.finishDrawerTransition();this.ignoreReplacementTerminal=true}this.motion=s;this.dsChromeTransitionStart.emit({source:"panel-tools",phase:s});const t=++this.transitionGeneration;requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(t!==this.transitionGeneration||this.motion!==s)return;if(!e){this.finishDrawerTransition();return}if(this.drawerTransitionAtTerminal(e,s)){this.finishDrawerTransition();return}const o=C(getComputedStyle(e));if(o<=0){this.finishDrawerTransition();return}this.transitionFallbackTimer=window.setTimeout((()=>{this.finishDrawerTransition()}),o)}))}))}drawerTransitionAtTerminal(s,e){const t=s.getBoundingClientRect().width;const o=s.querySelector(".panel-tools__drawer-surface");const i=o?.getBoundingClientRect().width??0;return A(t,i,e)}finishDrawerTransition(){const s=this.motion;const e=s!=="idle";this.clearTransitionCompletion();if(!e)return;this.ignoreReplacementTerminal=false;this.motion="idle";if(s==="closing"&&!this.open){this.drawerSurfaceRetained=false}this.dsChromeTransitionEnd.emit({source:"panel-tools"})}clearTransitionCompletion(){this.transitionGeneration+=1;if(this.transitionFallbackTimer!==null){window.clearTimeout(this.transitionFallbackTimer);this.transitionFallbackTimer=null}}isRailSelected(s){return this.open&&this.activeTool===s}isDrawerPresent(){return this.open||this.drawerSurfaceRetained}isViewActive(s){return this.isDrawerPresent()&&this.activeTool===s}hasFullView(s){return this.fullViewToolIds.includes(s)}syncFullViewTools(){const s=["search","messages","stacks","activity","agents","help"];const e=s.filter((s=>Boolean(this.el.querySelector(`[slot="${s}-view"]`))));if(e.join("|")!==this.fullViewToolIds.join("|"))this.fullViewToolIds=e}headerLabel(){if(!this.isDrawerPresent()||!this.activeTool)return"";return _[this.activeTool]??""}resolvedHeaders(){if(Object.keys(this.headers).length)return this.headers;if(!this.headersJson.trim())return{};try{const s=JSON.parse(this.headersJson);return s&&typeof s==="object"&&!Array.isArray(s)?s:{}}catch{return{}}}activeHeader(){if(!this.activeTool)return{};return this.resolvedHeaders()[this.activeTool]??{}}async activateTool(s){const e=this.railItems.find((e=>e.id===s));if(!e||e.isInactive)return;this.handleToolChange(s)}async closeDrawer(){if(!this.open)return;const s=this.activeTool;this.open=false;if(s){this.dsToolChange.emit({id:s,selected:false})}}async focusHeaderAction(s){const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}focusRailAt(s){const e=this.orderedRailItems;if(!e.length)return;const t=Math.max(0,Math.min(s,e.length-1));if(t===this.rovingIndex)return;this.rovingIndex=t;const o=Array.from(this.el.querySelectorAll(".panel-tools__rail-action .button-icon"));o[t]?.focus({preventScroll:true})}renderRailAction(s,e){const t=s.ariaLabel??_[s.id];return o("ds-tooltip",{key:s.id,label:t,shortcutKey:b[s.id],side:"left",size:"sm"},o("ds-button-unfilled",{variant:"icon",class:"panel-tools__rail-action",icon:s.icon,isActive:this.isRailSelected(s.id),activeFill:false,hasBorder:false,dot:s.dot??false,isInactive:s.isInactive,focusTabIndex:e===this.rovingIndex?0:-1,"aria-label":t,pressed:this.isRailSelected(s.id),onFocusin:()=>{this.rovingIndex=e},onKeyDown:s=>this.handleRailKeyDown(s,e),onDsClick:()=>this.handleToolChange(s.id)}))}render(){const s=this.headerLabel();const e=this.activeHeader();const t=e.title?.trim()||s;const n=e.actions??[];const a=this.orderedRailItems;const l=a.find((s=>s.id===g));const r=a.find((s=>s.id===v));const d=a.filter((s=>s.id!==g&&s.id!==v));const c=r?(l?1:0)+d.length:-1;const h=this.isDrawerPresent();const p=T(this.open,this.motion);const f=Boolean(h&&this.activeTool&&this.hasFullView(this.activeTool));const u=["search","messages","stacks","activity","agents","help"];return o(i,{key:"d41ff9cd9987900f413aa715581803f3e2a66eec",class:{"panel-tools":true,"panel-tools--open":this.open,"panel-tools--ready":this.readyForMotion,"panel-tools--motion-opening":this.motion==="opening","panel-tools--motion-closing":this.motion==="closing","panel-tools--drawer-resting":p,"panel-tools--fullscreen":this.presentation==="fullscreen","panel-tools--presentation-snap":this.presentationMotionSuppressed},role:this.presentation==="fullscreen"?"dialog":"complementary","aria-modal":this.presentation==="fullscreen"?"true":undefined,"aria-label":this.toolsLabel},o("div",{key:"ebc065d7d975b75e6517f208e0a546428c9cadaf",class:"panel-tools__layout"},o("nav",{key:"ebc4974803a07189882531a33b78f8948616c1f9",class:"panel-tools__rail","aria-label":this.toolShortcutsLabel},l?o("div",{class:"panel-tools__rail-header"},this.renderRailAction(l,0)):null,o("div",{key:"0cd7aeb26a6e75c59ee3a73dc698d933b34f2f55",class:"panel-tools__rail-body"},d.map(((s,e)=>this.renderRailAction(s,l?e+1:e)))),r?o("div",{class:"panel-tools__rail-footer"},this.renderRailAction(r,c)):null),o("div",{key:"4c0d69916508bae8ba19fe502b4b2ee1b8bb70ab",class:{"panel-tools__drawer":true,"panel-tools__drawer--visible":h},"aria-hidden":h?null:"true",inert:h?undefined:true},o("div",{key:"47e045840a18dee8df7b49f987fc2e87cb97748a",class:"panel-tools__drawer-surface"},this.presentation!=="fullscreen"||this.fullscreenHeaderMode==="shared"?o("ds-panel-tool-header",{class:"panel-tools__header",heading:t,showBack:e.showBack??false,backIcon:e.backIcon||"ChevronLeft",backAriaLabel:e.backAriaLabel||"Back",showMenu:false,ref:s=>{const e=s;if(e)e.actions=n},onDsBack:()=>{if(this.activeTool)this.dsHeaderBack.emit({tool:this.activeTool})}}):null,o("div",{key:"45049959774e03af574b0c5215b8be0138e911f4",class:"panel-tools__body",hidden:f},u.map((s=>{const e=this.isViewActive(s);return o("div",{class:{"panel-tools__view":true,"panel-tools__view--active":e},hidden:!e},o("slot",{name:s}))}))),o("div",{key:"d5317c4b098c13eebbe86a39f32cff126a481ef2",class:"panel-tools__full-views",hidden:!f},u.map((s=>o("div",{class:{"panel-tools__full-view":true,"panel-tools__full-view--active":this.isViewActive(s)&&this.hasFullView(s)},hidden:!(this.isViewActive(s)&&this.hasFullView(s))},o("slot",{name:`${s}-view`})))))))))}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}}static get style(){return S()}},[262,"ds-panel-tools",{open:[1540],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],activeTool:[1537,"active-tool"],items:[16],itemsJson:[1,"items-json"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],headers:[16],headersJson:[1,"headers-json"],storageKey:[1,"storage-key"],motion:[32],drawerSurfaceRetained:[32],readyForMotion:[32],presentationMotionSuppressed:[32],rovingIndex:[32],fullViewToolIds:[32],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},[[10,"keydown","handleFullscreenEscape"]],{presentation:[{presentationChanged:0}],open:[{openChanged:0}],activeTool:[{activeToolChanged:0}],storageKey:[{storageKeyChanged:0}],items:[{itemsChanged:0}],itemsJson:[{itemsChanged:0}]}]);function F(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-panel-tool-header","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tools":if(!customElements.get(n(s))){customElements.define(n(s),j)}break;case"ds-badge":if(!customElements.get(n(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(n(s))){d()}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-loader":if(!customElements.get(n(s))){h()}break;case"ds-panel-tool-header":if(!customElements.get(n(s))){p()}break;case"ds-text":if(!customElements.get(n(s))){f()}break;case"ds-tooltip":if(!customElements.get(n(s))){u()}break}}))}F();const E=j;const M=F;export{E as DsPanelTools,M as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-radio.js

@@ -1,2 +1,2 @@
-import{p as i,H as o,c as r,h as s,a as n,t}from"./index.js";import{d as e}from"./p-Bs6SS34m.js";const a=()=>`.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--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-radio-h,.ds-control--sm.sc-ds-radio{--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-radio-h,.ds-control--xs.sc-ds-radio{--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-radio-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-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio: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-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{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-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio: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-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::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-radio-h,.ds-interaction-fill.sc-ds-radio{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-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::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-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--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)}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:pointer;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const o=this.required&&!i&&this.value.length===0;this.internals.setValidity(o?{valueMissing:true}:{},o?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let n=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();n=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();n=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();n=0;break;case"End":i.preventDefault();n=o.length-1;break}if(n>=0){o[n].focus();const i=o[n].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const t=this.options.findIndex((o=>!i&&!o.isInactive));const e=r>=0&&!i&&!this.options[r]?.isInactive?r:t;return s(n,{key:"c370416338eae3cfde5c2aa58edf93bb76df8f8d",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const n=i||!!o.isInactive;const t=o.value===this.value;const a=n?-1:r===e?0:-1;return s("div",{key:o.value,role:"radio","aria-checked":String(t),"aria-disabled":n?"true":undefined,tabIndex:a,"data-radio-item":true,"data-value":o.value,"data-inactive":n||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":n,"ds-focus-ring-inset":!n,"ds-interaction-fill":!n},onClick:()=>!n&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!n){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":t}},t&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:d[this.size]},o.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function l(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(t(i))){customElements.define(t(i),c)}break;case"ds-text":if(!customElements.get(t(i))){e()}break}}))}l();const v=c;const f=l;export{v as DsRadio,f as defineCustomElement};
+import{p as i,H as o,c as r,h as s,a as n,t}from"./index.js";import{d as e}from"./p-C0_8K4y7.js";const a=()=>`.ds-control-inactive.sc-ds-radio-h,.ds-control-inactive.sc-ds-radio{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio,.ds-control--sm.sc-ds-radio-h,.ds-control--sm.sc-ds-radio,.ds-control--xs.sc-ds-radio-h,.ds-control--xs.sc-ds-radio{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-radio-h,.ds-control--md.sc-ds-radio{--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-radio-h,.ds-control--sm.sc-ds-radio{--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-radio-h,.ds-control--xs.sc-ds-radio{--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-radio-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-radio-h:focus-visible,.ds-focus-ring.sc-ds-radio: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-radio-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-radio{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-radio-h:focus-visible,.ds-focus-ring-inset.sc-ds-radio:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-radio-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-radio: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-radio-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-radio::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-radio-h,.ds-interaction-fill.sc-ds-radio{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-radio-h::before,.ds-interaction-fill.sc-ds-radio::before,.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-radio-h::before,.ds-interaction-fill.sc-ds-radio::before{z-index:1}.ds-interaction-fill.sc-ds-radio-h::after,.ds-interaction-fill.sc-ds-radio::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-radio-h,.ds-interaction-fill--bordered.sc-ds-radio{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-h::before,.ds-interaction-fill--selected.sc-ds-radio::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-h,.ds-interaction-fill--selected.sc-ds-radio{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-radio-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-radio-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-radio-h>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill.sc-ds-radio>.ds-interaction-fill__content.sc-ds-radio,.ds-interaction-fill__content.sc-ds-radio{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-radio-h,.ds-interaction-fill--on-faint.sc-ds-radio{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-h,.ds-interaction-fill--on-medium.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-bold.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-strong.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-translucent.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-inverted.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-media.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-always-dark.sc-ds-radio{--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-radio-h,.ds-interaction-fill--on-navigation.sc-ds-radio{--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)}.sc-ds-radio-h{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.radio--horizontal.sc-ds-radio-h{flex-direction:row;gap:var(--dimension-space-100)}.radio--md.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-sm);--_radio-dot:var(--dimension-size-100);--_radio-stroke:var(--dimension-stroke-width-015)}.radio--sm.sc-ds-radio-h{--_radio-circle:var(--dimension-iconography-xs);--_radio-dot:var(--dimension-size-075);--_radio-stroke:var(--dimension-stroke-width-012)}.radio--xs.sc-ds-radio-h{--_radio-circle:var(--dimension-size-100);--_radio-dot:var(--dimension-size-050);--_radio-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.radio__item.sc-ds-radio{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:pointer;user-select:none}.radio__placement.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.radio__circle.sc-ds-radio{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_radio-circle);height:var(--_radio-circle);border:0;border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.radio__circle--checked.sc-ds-radio{background-color:var(--color-background-bold-brand);box-shadow:none}.radio__dot.sc-ds-radio{width:var(--_radio-dot);height:var(--_radio-dot);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-on-bold-background-primary)}.radio__label.sc-ds-radio{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c=i(class i extends o{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.internals=this.attachInternals();this.options=[];this.value="";this.size="md";this.disabled=false;this.required=false;this.requiredMessage="This field is required.";this.direction="vertical";this.isInactive=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(i?null:this.value);const o=this.required&&!i&&this.value.length===0;this.internals.setValidity(o?{valueMissing:true}:{},o?this.requiredMessage:"")}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=typeof i==="string"?i:""}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(i){const o=this.activeItems;if(!o.length)return;const r=o.find((i=>i===document.activeElement));if(!r)return;const s=o.indexOf(r);let n=-1;switch(i.key){case"ArrowDown":case"ArrowRight":i.preventDefault();n=(s+1)%o.length;break;case"ArrowUp":case"ArrowLeft":i.preventDefault();n=(s-1+o.length)%o.length;break;case"Home":i.preventDefault();n=0;break;case"End":i.preventDefault();n=o.length-1;break}if(n>=0){o[n].focus();const i=o[n].dataset["value"];if(i&&i!==this.value){this.value=i;this.dsChange.emit(i)}}}selectItem(i){if(this.isInactive||this.disabled||this.formDisabled)return;if(i!==this.value){this.value=i;this.dsChange.emit(i)}}render(){const i=this.isInactive||this.disabled||this.formDisabled;const o=this.required&&!i&&this.value.length===0;const r=this.options.findIndex((i=>i.value===this.value));const t=this.options.findIndex((o=>!i&&!o.isInactive));const e=r>=0&&!i&&!this.options[r]?.isInactive?r:t;return s(n,{key:"ee27f5f42519e7bf4c8de59fd09463cada8d1bc9",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-required":this.required?"true":undefined,"aria-invalid":o?"true":undefined,class:{radio:true,"radio--horizontal":this.direction==="horizontal",[`radio--${this.size}`]:true}},this.options.map(((o,r)=>{const n=i||!!o.isInactive;const t=o.value===this.value;const a=n?-1:r===e?0:-1;return s("div",{key:o.value,role:"radio","aria-checked":String(t),"aria-disabled":n?"true":undefined,tabIndex:a,"data-radio-item":true,"data-value":o.value,"data-inactive":n||undefined,class:{radio__item:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":n,"ds-focus-ring-inset":!n,"ds-interaction-fill":!n},onClick:()=>!n&&this.selectItem(o.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!n){i.preventDefault();this.selectItem(o.value)}}},s("span",{class:"radio__placement ds-interaction-fill__content","aria-hidden":"true"},s("span",{class:{radio__circle:true,"radio__circle--checked":t}},t&&s("span",{class:"radio__dot"}))),s("ds-text",{class:"radio__label ds-interaction-fill__content",as:"span",variant:d[this.size]},o.label))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-radio",{options:[16],value:[1025],size:[1],name:[513],form:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],direction:[1],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],formDisabled:[32]},[[0,"keydown","handleKeyDown"]],{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function l(){if(typeof customElements==="undefined"){return}const i=["ds-radio","ds-text"];i.forEach((i=>{switch(i){case"ds-radio":if(!customElements.get(t(i))){customElements.define(t(i),c)}break;case"ds-text":if(!customElements.get(t(i))){e()}break}}))}l();const v=c;const f=l;export{v as DsRadio,f as defineCustomElement};
 //# sourceMappingURL=ds-radio.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["radioCss","LABEL_VARIANT","md","sm","xs","Radio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","size","disabled","required","requiredMessage","direction","isInactive","ariaLabel","initialValue","formDisabled","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","invalid","selectedIdx","findIndex","option","firstActiveIdx","focusableIdx","h","Host","role","ariaLabelledby","undefined","class","radio","map","index","isItemInactive","isChecked","tabIdx","String","tabIndex","radio__item","onClick","onKeyDown","radio__circle","as","variant","label"],"sources":["src/wc/components/Radio/Radio.css?tag=ds-radio&encapsulation=scoped","src/wc/components/Radio/Radio.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n:host(.radio--horizontal) {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--md) {\n  --_radio-circle: var(--dimension-iconography-sm);\n  --_radio-dot: var(--dimension-size-100);\n  --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n  --_radio-circle: var(--dimension-iconography-xs);\n  --_radio-dot: var(--dimension-size-075);\n  --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n  --_radio-circle: var(--dimension-size-100);\n  --_radio-dot: var(--dimension-size-050);\n  --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: pointer;\n  user-select: none;\n}\n\n.radio__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.radio__circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_radio-circle);\n  height: var(--_radio-circle);\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.radio__dot {\n  width: var(--_radio-dot);\n  height: var(--_radio-dot);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n\n.radio__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  isInactive?: boolean;\n}\n\nexport type RadioSize = 'md' | 'sm' | 'xs';\n\nconst LABEL_VARIANT: Record<RadioSize, 'text-body-medium' | 'text-body-small' | 'text-caption'> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\n@Component({\n  tag: 'ds-radio',\n  styleUrl: 'Radio.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Radio {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Visible choices in this one-of-many set. */\n  @Prop() options: RadioOption[] = [];\n  /** Selected option value. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Visual and placement density for every option. */\n  @Prop() size: RadioSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Associates the radio set with a form by id when rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n  /** Native disabled state for the complete set. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one option to be selected for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required set has no selection. */\n  @Prop() requiredMessage: string = 'This field is required.';\n  /** Layout direction for the option set. */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  /** Design-system inactive state for the complete set. */\n  @Prop() isInactive: boolean = false;\n  /** Accessible name when visible group labeling is unavailable. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id reference for a visible group label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emitted after user selection with the selected option value. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && this.value.length === 0;\n    const selectedIdx = this.options.findIndex(option => option.value === this.value);\n    const firstActiveIdx = this.options.findIndex(option => !inactive && !option.isInactive);\n    const focusableIdx = selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={invalid ? 'true' : undefined}\n        class={{\n          radio: true,\n          'radio--horizontal': this.direction === 'horizontal',\n          [`radio--${this.size}`]: true,\n        }}\n      >\n        {this.options.map((option, index) => {\n          const isItemInactive = inactive || !!option.isInactive;\n          const isChecked = option.value === this.value;\n          const tabIdx = isItemInactive ? -1 : index === focusableIdx ? 0 : -1;\n\n          return (\n            <div\n              key={option.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive ? 'true' : undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={option.value}\n              data-inactive={isItemInactive || undefined}\n              class={{\n                radio__item: true,\n                [`ds-control--${this.size}`]: true,\n                'ds-control-inactive': isItemInactive,\n                'ds-focus-ring-inset': !isItemInactive,\n                'ds-interaction-fill': !isItemInactive,\n              }}\n              onClick={() => !isItemInactive && this.selectItem(option.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(option.value);\n                }\n              }}\n            >\n              <span class=\"radio__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n                <span class={{ radio__circle: true, 'radio__circle--checked': isChecked }}>\n                  {isChecked && <span class=\"radio__dot\" />}\n                </span>\n              </span>\n              <ds-text\n                class=\"radio__label ds-interaction-fill__content\"\n                as=\"span\"\n                variant={LABEL_VARIANT[this.size]}\n              >\n                {option.label}\n              </ds-text>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["radioCss","LABEL_VARIANT","md","sm","xs","Radio","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","size","disabled","required","requiredMessage","direction","isInactive","ariaLabel","initialValue","formDisabled","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","invalid","selectedIdx","findIndex","option","firstActiveIdx","focusableIdx","h","Host","role","ariaLabelledby","undefined","class","radio","map","index","isItemInactive","isChecked","tabIdx","String","tabIndex","radio__item","onClick","onKeyDown","radio__circle","as","variant","label"],"sources":["src/wc/components/Radio/Radio.css?tag=ds-radio&encapsulation=scoped","src/wc/components/Radio/Radio.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n:host(.radio--horizontal) {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n:host(.radio--md) {\n  --_radio-circle: var(--dimension-iconography-sm);\n  --_radio-dot: var(--dimension-size-100);\n  --_radio-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.radio--sm) {\n  --_radio-circle: var(--dimension-iconography-xs);\n  --_radio-dot: var(--dimension-size-075);\n  --_radio-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.radio--xs) {\n  --_radio-circle: var(--dimension-size-100);\n  --_radio-dot: var(--dimension-size-050);\n  --_radio-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.radio__item {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: pointer;\n  user-select: none;\n}\n\n.radio__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.radio__circle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_radio-circle);\n  height: var(--_radio-circle);\n  border: 0;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--_radio-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.radio__circle--checked {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.radio__dot {\n  width: var(--_radio-dot);\n  height: var(--_radio-dot);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-on-bold-background-primary);\n}\n\n.radio__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  isInactive?: boolean;\n}\n\nexport type RadioSize = 'md' | 'sm' | 'xs';\n\nconst LABEL_VARIANT: Record<RadioSize, 'text-body-medium' | 'text-body-small' | 'text-caption'> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\n@Component({\n  tag: 'ds-radio',\n  styleUrl: 'Radio.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Radio {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Visible choices in this one-of-many set. */\n  @Prop() options: RadioOption[] = [];\n  /** Selected option value. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Visual and placement density for every option. */\n  @Prop() size: RadioSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Associates the radio set with a form by id when rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n  /** Native disabled state for the complete set. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require one option to be selected for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required set has no selection. */\n  @Prop() requiredMessage: string = 'This field is required.';\n  /** Layout direction for the option set. */\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  /** Design-system inactive state for the complete set. */\n  @Prop() isInactive: boolean = false;\n  /** Accessible name when visible group labeling is unavailable. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id reference for a visible group label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  /** Emitted after user selection with the selected option value. */\n  @Event() dsChange!: EventEmitter<string>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.isInactive || this.disabled || this.formDisabled) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && this.value.length === 0;\n    const selectedIdx = this.options.findIndex(option => option.value === this.value);\n    const firstActiveIdx = this.options.findIndex(option => !inactive && !option.isInactive);\n    const focusableIdx = selectedIdx >= 0 && !inactive && !this.options[selectedIdx]?.isInactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={invalid ? 'true' : undefined}\n        class={{\n          radio: true,\n          'radio--horizontal': this.direction === 'horizontal',\n          [`radio--${this.size}`]: true,\n        }}\n      >\n        {this.options.map((option, index) => {\n          const isItemInactive = inactive || !!option.isInactive;\n          const isChecked = option.value === this.value;\n          const tabIdx = isItemInactive ? -1 : index === focusableIdx ? 0 : -1;\n\n          return (\n            <div\n              key={option.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive ? 'true' : undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={option.value}\n              data-inactive={isItemInactive || undefined}\n              class={{\n                radio__item: true,\n                [`ds-control--${this.size}`]: true,\n                'ds-control-inactive': isItemInactive,\n                'ds-focus-ring-inset': !isItemInactive,\n                'ds-interaction-fill': !isItemInactive,\n              }}\n              onClick={() => !isItemInactive && this.selectItem(option.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(option.value);\n                }\n              }}\n            >\n              <span class=\"radio__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n                <span class={{ radio__circle: true, 'radio__circle--checked': isChecked }}>\n                  {isChecked && <span class=\"radio__dot\" />}\n                </span>\n              </span>\n              <ds-text\n                class=\"radio__label ds-interaction-fill__content\"\n                as=\"span\"\n                variant={LABEL_VARIANT[this.size]}\n              >\n                {option.label}\n              </ds-text>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-scroll-overlay.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsScrollOverlay extends Components.DsScrollOverlay, HTMLElement {}
+export const DsScrollOverlay: {
+    prototype: DsScrollOverlay;
+    new (): DsScrollOverlay;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-scroll-overlay.js

@@ -0,0 +1,2 @@
+import{p as e,H as l,c as s,h as r,a as o,t as a}from"./index.js";import{S as d}from"./p-BE_CDJeL.js";const t=()=>`@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-scroll-overlay{--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-scroll-overlay{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-scroll-overlay{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-scroll-overlay{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-scroll-overlay{animation:none}}}.scroll-edge-fade--at-end.sc-ds-scroll-overlay,.scroll-edge-fade--hidden.sc-ds-scroll-overlay{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-scroll-overlay{--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 c=()=>`.sc-ds-scroll-overlay-h{display:block;width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box}.scroll-overlay.sc-ds-scroll-overlay{position:relative;width:100%;height:100%;min-width:0;min-height:0}.scroll-overlay__viewport.sc-ds-scroll-overlay{width:100%;height:100%;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.scroll-overlay__viewport.sc-ds-scroll-overlay:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.scroll-overlay__content.sc-ds-scroll-overlay{display:flex;flex-direction:column;min-height:100%;padding-block-end:var(--ds-scroll-overlay-block-size, 0);box-sizing:border-box}.scroll-overlay__body.sc-ds-scroll-overlay{display:grid;grid-template-columns:minmax(0, 1fr);flex:1 0 auto;min-height:0}.scroll-overlay__overlay.sc-ds-scroll-overlay{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}`;const i=e(class e extends l{constructor(e){super();if(e!==false){this.__registerHost()}this.dsScroll=s(this,"dsScroll");this.handleScroll=()=>{if(!this.viewport)return;this.controller?.sync();this.dsScroll.emit({scrollTop:this.viewport.scrollTop,scrollHeight:this.viewport.scrollHeight,clientHeight:this.viewport.clientHeight})}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.controller=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay});this.controller.connect()}disconnectedCallback(){this.controller?.disconnect()}async scrollToStart(){this.viewport?.scrollTo({top:0,behavior:"auto"});this.controller?.sync()}async scrollToEnd(){this.viewport?.scrollTo({top:this.viewport.scrollHeight,behavior:"auto"});this.controller?.sync()}async refreshOverlay(){this.controller?.sync()}render(){const e=Boolean(this.scrollLabel?.trim());return r(o,{key:"5bc8ca046153364c1000c22ad1b095b9d2d893b1"},r("div",{key:"b71191b8c1f6624783df18ac85a5db1cccc2f132",class:"scroll-overlay"},r("div",{key:"83193583717135dbe97e6bd21303e7d3402f85a7",class:"scroll-overlay__viewport",ref:e=>{this.viewport=e},role:e?"region":undefined,"aria-label":e?this.scrollLabel:undefined,tabIndex:e?0:undefined,onScroll:this.handleScroll},r("div",{key:"179d10d175ecd15c61841f4aae85f863565c1a31",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"5472fe69a11e774e8cd54868fcc2257b89e9520c",class:"scroll-overlay__body"},r("slot",{key:"27eac9c242b868ffaa38b91040d4bd0e7c97b8e9"})))),r("div",{key:"b6e9bbd6db5b16143fcc6422d1c59409279df426",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"73811444ddc00c8052977af99b5fe75bf86675a6",name:"overlay"}))))}get el(){return this}static get style(){return t()+c()}},[262,"ds-scroll-overlay",{scrollLabel:[1,"scroll-label"],scrollToStart:[64],scrollToEnd:[64],refreshOverlay:[64]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-scroll-overlay"];e.forEach((e=>{switch(e){case"ds-scroll-overlay":if(!customElements.get(a(e))){customElements.define(a(e),i)}break}}))}n();const g=i;const f=n;export{g as DsScrollOverlay,f as defineCustomElement};
+//# sourceMappingURL=ds-scroll-overlay.js.map

package/dist/components/ds-scroll-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["scrollEdgeFadeCss","scrollOverlayCss","ScrollOverlay","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","handleScroll","viewport","controller","sync","dsScroll","emit","scrollTop","scrollHeight","clientHeight","componentDidLoad","content","overlay","ScrollOverlayController","host","el","connect","disconnectedCallback","disconnect","scrollToStart","scrollTo","top","behavior","scrollToEnd","refreshOverlay","render","labelled","Boolean","scrollLabel","trim","h","Host","key","class","ref","element","role","undefined","tabIndex","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.css?tag=ds-scroll-overlay&encapsulation=scoped","src/wc/components/ScrollOverlay/ScrollOverlay.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-width: 0;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.scroll-overlay {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n}\n\n.scroll-overlay__viewport {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  box-sizing: border-box;\n}\n\n.scroll-overlay__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.scroll-overlay__content {\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n  padding-block-end: var(--ds-scroll-overlay-block-size, 0);\n  box-sizing: border-box;\n}\n\n.scroll-overlay__body {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr);\n  flex: 1 0 auto;\n  min-height: 0;\n}\n\n.scroll-overlay__overlay {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--dimension-z-index-floating);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport interface ScrollOverlayScrollDetail {\n  scrollTop: number;\n  scrollHeight: number;\n  clientHeight: number;\n}\n\n@Component({\n  tag: 'ds-scroll-overlay',\n  styleUrl: 'ScrollOverlay.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class ScrollOverlay {\n  @Element() el!: HTMLElement;\n\n  /** Optional accessible name. When provided, the scrollport is a focusable region. */\n  @Prop() scrollLabel: string | undefined;\n\n  /** Reports scroll position without exposing the internal scrollport element. */\n  @Event() dsScroll!: EventEmitter<ScrollOverlayScrollDetail>;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private controller?: ScrollOverlayController;\n\n  componentDidLoad(): void {\n    if (!this.viewport || !this.content || !this.overlay) return;\n    this.controller = new ScrollOverlayController({\n      host: this.el,\n      viewport: this.viewport,\n      content: this.content,\n      overlay: this.overlay,\n    });\n    this.controller.connect();\n  }\n\n  disconnectedCallback(): void {\n    this.controller?.disconnect();\n  }\n\n  /** Move the owned scrollport to its beginning. */\n  @Method()\n  async scrollToStart(): Promise<void> {\n    this.viewport?.scrollTo({ top: 0, behavior: 'auto' });\n    this.controller?.sync();\n  }\n\n  /** Move the owned scrollport to its live end. */\n  @Method()\n  async scrollToEnd(): Promise<void> {\n    this.viewport?.scrollTo({ top: this.viewport.scrollHeight, behavior: 'auto' });\n    this.controller?.sync();\n  }\n\n  /** Re-measure footer geometry after an imperative slotted-content update. */\n  @Method()\n  async refreshOverlay(): Promise<void> {\n    this.controller?.sync();\n  }\n\n  private handleScroll = (): void => {\n    if (!this.viewport) return;\n    this.controller?.sync();\n    this.dsScroll.emit({\n      scrollTop: this.viewport.scrollTop,\n      scrollHeight: this.viewport.scrollHeight,\n      clientHeight: this.viewport.clientHeight,\n    });\n  };\n\n  render() {\n    const labelled = Boolean(this.scrollLabel?.trim());\n    return (\n      <Host>\n        <div class=\"scroll-overlay\">\n          <div\n            class=\"scroll-overlay__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role={labelled ? 'region' : undefined}\n            aria-label={labelled ? this.scrollLabel : undefined}\n            tabIndex={labelled ? 0 : undefined}\n            onScroll={this.handleScroll}\n          >\n            <div\n              class=\"scroll-overlay__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n            >\n              <div class=\"scroll-overlay__body\">\n                <slot />\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"scroll-overlay__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAoB,IAAM,2/ICAhC,MAAMC,EAAmB,IAAM,u+B,MCelBC,EAAaC,EAAA,MAAAD,UAAAE,EAN1B,WAAAC,CAAAC,G,6EAuDUC,KAAAC,aAAe,KACrB,IAAKD,KAAKE,SAAU,OACpBF,KAAKG,YAAYC,OACjBJ,KAAKK,SAASC,KAAK,CACjBC,UAAWP,KAAKE,SAASK,UACzBC,aAAcR,KAAKE,SAASM,aAC5BC,aAAcT,KAAKE,SAASO,cAC5B,CAyCL,CAnFC,gBAAAC,GACE,IAAKV,KAAKE,WAAaF,KAAKW,UAAYX,KAAKY,QAAS,OACtDZ,KAAKG,WAAa,IAAIU,EAAwB,CAC5CC,KAAMd,KAAKe,GACXb,SAAUF,KAAKE,SACfS,QAASX,KAAKW,QACdC,QAASZ,KAAKY,UAEhBZ,KAAKG,WAAWa,S,CAGlB,oBAAAC,GACEjB,KAAKG,YAAYe,Y,CAKnB,mBAAMC,GACJnB,KAAKE,UAAUkB,SAAS,CAAEC,IAAK,EAAGC,SAAU,SAC5CtB,KAAKG,YAAYC,M,CAKnB,iBAAMmB,GACJvB,KAAKE,UAAUkB,SAAS,CAAEC,IAAKrB,KAAKE,SAASM,aAAcc,SAAU,SACrEtB,KAAKG,YAAYC,M,CAKnB,oBAAMoB,GACJxB,KAAKG,YAAYC,M,CAanB,MAAAqB,GACE,MAAMC,EAAWC,QAAQ3B,KAAK4B,aAAaC,QAC3C,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,2BACNC,IAAKC,IACHnC,KAAKE,SAAWiC,CAAO,EAEzBC,KAAMV,EAAW,SAAWW,UAAS,aACzBX,EAAW1B,KAAK4B,YAAcS,UAC1CC,SAAUZ,EAAW,EAAIW,UACzBE,SAAUvC,KAAKC,cAEf6B,EAAA,OAAAE,IAAA,2CACEC,MAAM,yDACNC,IAAKC,IACHnC,KAAKW,QAAUwB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACTH,EAAA,QAAAE,IAAA,gDAINF,EAAA,OAAAE,IAAA,2CACEC,MAAM,0BACNC,IAAKC,IACHnC,KAAKY,QAAUuB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}