@ds-mo/ui 15.1.1 → 15.3.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 o,a as i,t as a}from"./index.js";import{d as r}from"./p-DwbcNDJF.js";const t=()=>`.sc-ds-panel-sub-nav-h,.sc-ds-panel-sub-nav:where(.ds-table),.sc-ds-panel-sub-nav:where(.tooltip-popup),.sc-ds-panel-sub-nav:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-sub-nav,.ds-control--lg.sc-ds-panel-sub-nav-h,.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(--ds-radius-control)}.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--lg.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-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}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-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,.ds-focus-ring.sc-ds-panel-sub-nav,.ds-focus-ring-inset.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.sc-ds-panel-sub-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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))}@media (forced-colors: active){.sc-ds-panel-sub-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-panel-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;cursor:inherit;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 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-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)}@media (hover: hover) and (pointer: fine){.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--grouped.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-panel-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;cursor:inherit}.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-brand);--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-brand);--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-brand);--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{color:var(--ds-forced-color-disabled);opacity:1}}.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:default;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 d=n(class n extends s{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=e(this,"dsChange",7);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 i=(n+s*o+e*o)%e;if(!this.items[i]?.isInactive)return i}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 i=e>=0?e:o>=0?o:n.key==="ArrowUp"?0:-1;let a=null;if(n.key==="ArrowDown"){a=this.findEnabled(i,1)}else if(n.key==="ArrowUp"){a=this.findEnabled(i,-1)}else if(n.key==="Home"){a=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));a=n<0?null:this.items.length-1-n}if(a===null||a<0)return;const r=this.items[a];if(!r||r.isInactive)return;n.preventDefault();this.selectItem(r.id)}render(){const n=this.focusableId;const s=this.background;return o(i,{key:"a0cd84f8284eeeec0c5f41a476f7cb892cd263a5"},o("div",{key:"df6e1768502ab91eac300541bb7af29d47e8b4c3",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((e=>{const i=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":i,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":i&&!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":i?"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 c(){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(a(n))){customElements.define(a(n),d)}break;case"ds-text":if(!customElements.get(a(n))){r()}break}}))}c();const l=d;const v=c;export{l as DsPanelSubNav,v as defineCustomElement};
+import{p as n,H as s,c as e,h as o,a as i,t as a}from"./index.js";import{d as r}from"./p-Cihjy4WY.js";const t=()=>`.sc-ds-panel-sub-nav-h,.sc-ds-panel-sub-nav:where(.ds-table),.sc-ds-panel-sub-nav:where(.tooltip-popup),.sc-ds-panel-sub-nav:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-sub-nav,.ds-control--lg.sc-ds-panel-sub-nav-h,.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(--ds-radius-control)}.ds-control--lg.sc-ds-panel-sub-nav-h,.ds-control--lg.sc-ds-panel-sub-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-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}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-panel-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,.ds-focus-ring.sc-ds-panel-sub-nav,.ds-focus-ring-inset.sc-ds-panel-sub-nav-h,.ds-focus-ring-inset.sc-ds-panel-sub-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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))}@media (forced-colors: active){.sc-ds-panel-sub-nav-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-panel-sub-nav-h,.ds-interaction-fill.sc-ds-panel-sub-nav{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-panel-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;cursor:inherit;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 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-panel-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)}@media (hover: hover) and (pointer: fine){.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--grouped.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-panel-sub-nav-h,.ds-interaction-fill--grouped.sc-ds-panel-sub-nav{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-panel-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;cursor:inherit}.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-brand);--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-brand);--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-brand);--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-panel-sub-nav-h::after,.ds-interaction-fill.sc-ds-panel-sub-nav::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-panel-sub-nav:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-panel-sub-nav-h::before,.ds-interaction-fill--selected.sc-ds-panel-sub-nav::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-panel-sub-nav-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-panel-sub-nav:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-panel-sub-nav:root,.sc-ds-panel-sub-nav-h,.ds-forced-colors-scope.sc-ds-panel-sub-nav{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-panel-sub-nav-h,.ds-control-inactive.sc-ds-panel-sub-nav{color:var(--ds-forced-color-disabled);opacity:1}}.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:default;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 d=n(class n extends s{constructor(n){super();if(n!==false){this.__registerHost()}this.dsChange=e(this,"dsChange",7);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 i=(n+s*o+e*o)%e;if(!this.items[i]?.isInactive)return i}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 i=e>=0?e:o>=0?o:n.key==="ArrowUp"?0:-1;let a=null;if(n.key==="ArrowDown"){a=this.findEnabled(i,1)}else if(n.key==="ArrowUp"){a=this.findEnabled(i,-1)}else if(n.key==="Home"){a=this.items.findIndex((n=>!n.isInactive))}else if(n.key==="End"){const n=[...this.items].reverse().findIndex((n=>!n.isInactive));a=n<0?null:this.items.length-1-n}if(a===null||a<0)return;const r=this.items[a];if(!r||r.isInactive)return;n.preventDefault();this.selectItem(r.id)}render(){const n=this.focusableId;const s=this.background;return o(i,{key:"d3e7a1717358e1c75456e1da15ecfd416c843e3f"},o("div",{key:"556dff4e13e555bcf5709b134a87ce70ad74292f",class:"panel-sub-nav",role:"tablist","aria-orientation":"vertical","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.items.map((e=>{const i=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":i,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":i&&!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":i?"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 c(){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(a(n))){customElements.define(a(n),d)}break;case"ds-text":if(!customElements.get(a(n))){r()}break}}))}c();const l=d;const v=c;export{l as DsPanelSubNav,v as defineCustomElement};
 //# sourceMappingURL=ds-panel-sub-nav.js.map

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

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

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as o,h as a,a as r,t as i}from"./index.js";import{a as n}from"./p-xtGGIZmU.js";import{d as t}from"./p-ZhP2tVmM.js";import{d}from"./p-Dzndkdx5.js";import{d as c}from"./p-7V1AhetH.js";import{d as l}from"./p-DjkUFlDW.js";import{d as h}from"./p-Di5FH7eh.js";import{d as p}from"./p-0XTyQNRG.js";import{d as m}from"./p-DwbcNDJF.js";import{d as u}from"./p-CYzFfFcH.js";const f=()=>`.sc-ds-panel-tool-search-h,.sc-ds-panel-tool-search:where(.ds-table),.sc-ds-panel-tool-search:where(.tooltip-popup),.sc-ds-panel-tool-search:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.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(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-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}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.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--without-focus-boundary.sc-ds-panel-tool-search::after{display:none}.select-search__control.sc-ds-panel-tool-search{display:flex;width:100%;min-width:0}.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;width:100%;height:100%;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}.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 g=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.dsClear=o(this,"dsClear",7);this.dsFilterToggle=o(this,"dsFilterToggle",7);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=s=>{this.value=s;this.dsChange.emit(s)}}componentDidRender(){const s=this.el.querySelector("input");if(s&&s.value!==this.value)s.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const s=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(s?.setFocus?.())}render(){return a(r,{key:"c37fa841ed7c6090de7c17d8e7a62b2555765cbb"},a("div",{key:"c8f52ab20705552cb9f3fb1beaaf91738582697d",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(n,{key:"2a7af114187ac8d3f81d30db01e5082dd83317d6",hasFocusBoundary:false,hasInteractionFill:false,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,surfaceOpen:this.filterSurfaceOpen,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:s=>{s.stopPropagation()},onDsClick:s=>{s.stopPropagation();this.dsFilterToggle.emit(s.detail)}}))):null))}get el(){return this}static get style(){return f()}},[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"],filterSurfaceOpen:[4,"filter-surface-open"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-divider","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tool-search":if(!customElements.get(i(s))){customElements.define(i(s),g)}break;case"ds-badge":if(!customElements.get(i(s))){t()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){d()}break;case"ds-divider":if(!customElements.get(i(s))){c()}break;case"ds-icon":if(!customElements.get(i(s))){l()}break;case"ds-input":if(!customElements.get(i(s))){h()}break;case"ds-loader":if(!customElements.get(i(s))){p()}break;case"ds-text":if(!customElements.get(i(s))){m()}break;case"ds-tooltip":if(!customElements.get(i(s))){u()}break}}))}v();const b=g;const x=v;export{b as DsPanelToolSearch,x as defineCustomElement};
+import{p as s,H as e,c as o,h as a,a as r,t as i}from"./index.js";import{a as n,d as t}from"./p-BHI4LcGK.js";import{d}from"./p-D0KD-Nr_.js";import{d as c}from"./p-CI7c9kp-.js";import{d as l}from"./p-BugKaVWc.js";import{d as h}from"./p-7V1AhetH.js";import{d as p}from"./p-DjkUFlDW.js";import{d as m}from"./p-0XTyQNRG.js";import{d as u}from"./p-Cihjy4WY.js";import{d as f}from"./p-BXSHN1OK.js";const g=()=>`.sc-ds-panel-tool-search-h,.sc-ds-panel-tool-search:where(.ds-table),.sc-ds-panel-tool-search:where(.tooltip-popup),.sc-ds-panel-tool-search:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-panel-tool-search,.ds-control--lg.sc-ds-panel-tool-search-h,.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(--ds-radius-control)}.ds-control--lg.sc-ds-panel-tool-search-h,.ds-control--lg.sc-ds-panel-tool-search{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-panel-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}.ds-chrome-space--sm.sc-ds-panel-tool-search-h,.ds-chrome-space--sm.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-panel-tool-search-h,.ds-chrome-space--md.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-panel-tool-search-h,.ds-chrome-space--lg.sc-ds-panel-tool-search{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search,.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search,.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-panel-tool-search-h,.ds-chrome-row.sc-ds-panel-tool-search{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-panel-tool-search-h,.ds-chrome-column.sc-ds-panel-tool-search{flex-direction:column}.ds-chrome-grid.sc-ds-panel-tool-search-h,.ds-chrome-grid.sc-ds-panel-tool-search{display:grid;align-items:center}.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--without-focus-boundary.sc-ds-panel-tool-search::after{display:none}.select-search__control.sc-ds-panel-tool-search{display:flex;width:100%;min-width:0}.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;width:100%;height:100%;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}.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 v=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.dsClear=o(this,"dsClear",7);this.dsFilterToggle=o(this,"dsFilterToggle",7);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=s=>{this.value=s;this.dsChange.emit(s)}}componentDidRender(){const s=this.el.querySelector("input");if(s&&s.value!==this.value)s.value=this.value}async setFocus(){this.el.querySelector("input")?.focus()}async focusFilterTrigger(){const s=this.el.querySelector("ds-button-unfilled.panel-tool-search__filter");await(s?.setFocus?.())}render(){return a(r,{key:"0245c640af5bc40309964e9c5a53a8ccf1a47fa8"},a("div",{key:"19f3f416a05d0d5adbe7d397d33c9428436c52f1",class:"panel-tool-search ds-chrome-row ds-chrome-space--md"},a(n,{key:"f3abc020711304f76cab03ef1cafd78324f6e3d8",hasFocusBoundary:false,hasInteractionFill:false,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,surfaceOpen:this.filterSurfaceOpen,isActive:this.filterActive,isInactive:this.isInactive,activeFill:false,hasBorder:false,onDsChange:s=>{s.stopPropagation()},onDsClick:s=>{s.stopPropagation();this.dsFilterToggle.emit(s.detail)}}))):null))}get el(){return this}static get style(){return g()}},[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"],filterSurfaceOpen:[4,"filter-surface-open"],filterActive:[4,"filter-active"],setFocus:[64],focusFilterTrigger:[64]}]);function b(){if(typeof customElements==="undefined"){return}const s=["ds-panel-tool-search","ds-badge","ds-button-unfilled","ds-chip","ds-divider","ds-icon","ds-input","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-panel-tool-search":if(!customElements.get(i(s))){customElements.define(i(s),v)}break;case"ds-badge":if(!customElements.get(i(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){c()}break;case"ds-chip":if(!customElements.get(i(s))){l()}break;case"ds-divider":if(!customElements.get(i(s))){h()}break;case"ds-icon":if(!customElements.get(i(s))){p()}break;case"ds-input":if(!customElements.get(i(s))){t()}break;case"ds-loader":if(!customElements.get(i(s))){m()}break;case"ds-text":if(!customElements.get(i(s))){u()}break;case"ds-tooltip":if(!customElements.get(i(s))){f()}break}}))}b();const x=v;const k=b;export{x as DsPanelToolSearch,k as defineCustomElement};
 //# sourceMappingURL=ds-panel-tool-search.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","hasFocusBoundary","hasInteractionFill","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","label","side","size","id","variant","icon","haspopup","filterControls","expanded","surfaceOpen","filterSurfaceOpen","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Associated filter surface is visible, including exit motion. */\n  @Prop() filterSurfaceOpen: boolean | undefined;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n          <ChoiceSearch\n            hasFocusBoundary={false}\n            hasInteractionFill={false}\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={this.filterTriggerId || undefined}\n                  class=\"panel-tool-search__filter\"\n                  variant=\"icon\"\n                  icon=\"Filters\"\n                  size=\"md\"\n                  aria-label={this.filterAriaLabel}\n                  haspopup=\"menu\"\n                  controls={this.filterControls}\n                  expanded={this.filterExpanded}\n                  surfaceOpen={this.filterSurfaceOpen}\n                  isActive={this.filterActive}\n                  isInactive={this.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsChange={(event: CustomEvent<boolean>) => {\n                    event.stopPropagation();\n                  }}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    event.stopPropagation();\n                    this.dsFilterToggle.emit(event.detail);\n                  }}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iYAAA,MAAMA,EAAqB,IAAM,w1J,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,+JAS2BC,KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAI1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CA2D5B,CA/EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uDACTH,EAACI,EAAY,CAAAF,IAAA,2CACXG,iBAAkB,MAClBC,mBAAoB,MACpB3B,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChB0B,SAAU7B,KAAK6B,SACfC,SAAU9B,KAAKI,WACf2B,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAelC,KAAKU,aACpByB,QAAS,IAAMnC,KAAKoC,QAAQxB,OAC5ByB,UAAW,IAAML,YAElBhC,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNa,YAAY,WACZC,OAAO,8BAETjB,EAAA,cAAYkB,MAAOxC,KAAKM,gBAAiBmC,KAAK,SAASC,KAAK,MAC1DpB,EAAA,sBACEqB,GAAI3C,KAAKO,iBAAmByB,UAC5BP,MAAM,4BACNmB,QAAQ,OACRC,KAAK,UACLH,KAAK,KAAI,aACG1C,KAAKM,gBACjBwC,SAAS,OACTjB,SAAU7B,KAAK+C,eACfC,SAAUhD,KAAKQ,eACfyC,YAAajD,KAAKkD,kBAClBC,SAAUnD,KAAKS,aACfL,WAAYJ,KAAKI,WACjBgD,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNxD,KAAK0D,eAAe9C,KAAK2C,EAAMI,OAAO,MAK5C,M","ignoreList":[]}
+{"version":3,"names":["panelToolSearchCss","PanelToolSearch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","ariaLabel","isInactive","showFilter","filterAriaLabel","filterTriggerId","filterExpanded","filterActive","handleChange","dsChange","emit","componentDidRender","input","el","querySelector","setFocus","focus","focusFilterTrigger","trigger","render","h","Host","key","class","ChoiceSearch","hasFocusBoundary","hasInteractionFill","controls","disabled","inputRef","undefined","clearLabel","onValueChange","onClear","dsClear","onKeyDown","orientation","length","label","side","size","id","variant","icon","haspopup","filterControls","expanded","surfaceOpen","filterSurfaceOpen","isActive","activeFill","hasBorder","onDsChange","event","stopPropagation","onDsClick","dsFilterToggle","detail"],"sources":["src/wc/components/PanelToolSearch/PanelToolSearch.css?tag=ds-panel-tool-search&encapsulation=scoped","src/wc/components/PanelToolSearch/PanelToolSearch.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/search-control.css';\n\n:host {\n  display: block;\n  flex: 0 0 var(--dimension-size-600);\n  width: 100%;\n  min-width: 0;\n  height: var(--dimension-size-600);\n  box-sizing: border-box;\n  background: transparent;\n}\n\n.panel-tool-search {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n}\n\n.panel-tool-search::after {\n  content: '';\n  position: absolute;\n  inset: auto 0 0;\n  height: var(--dimension-stroke-width-012);\n  background-color: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.select-search {\n  flex: 1 1 auto;\n  width: auto;\n  min-width: 0;\n  height: var(--dimension-size-400);\n  padding: 0;\n}\n\n.panel-tool-search__filter-group {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.panel-tool-search__divider,\n.panel-tool-search__filter {\n  flex: 0 0 auto;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { ChoiceSearch } from '../../utils/choice-list-parts';\n\n@Component({\n  tag: 'ds-panel-tool-search',\n  styleUrl: 'PanelToolSearch.css',\n  scoped: true,\n})\nexport class PanelToolSearch {\n  @Element() el!: HTMLElement;\n\n  /** Current search query. */\n  @Prop({ mutable: true }) value: string = '';\n  /** Search guidance shown while the query is empty. */\n  @Prop() placeholder: string = 'Search';\n  /** Accessible name for the search field. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'Search';\n  /** Optional ID of the results region filtered by this search. */\n  @Prop() controls: string | undefined;\n  /** Prevents search interaction while keeping the row visible. */\n  @Prop() isInactive: boolean = false;\n  /** Show the optional trailing filter-menu trigger. */\n  @Prop() showFilter: boolean = false;\n  /** Accessible name for the filter-menu trigger. */\n  @Prop() filterAriaLabel: string = 'Filter';\n  /** Stable id placed on the filter trigger for ds-menu anchoring. */\n  @Prop() filterTriggerId: string = '';\n  /** Id of the menu controlled by the filter trigger. */\n  @Prop() filterControls: string | undefined;\n  /** Whether the controlled filter menu is open. */\n  @Prop() filterExpanded: boolean = false;\n  /** Associated filter surface is visible, including exit motion. */\n  @Prop() filterSurfaceOpen: boolean | undefined;\n  /** Promote the trigger foreground when one or more filters are applied. */\n  @Prop() filterActive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n  @Event() dsFilterToggle!: EventEmitter<MouseEvent>;\n\n  componentDidRender() {\n    const input = this.el.querySelector('input');\n    if (input && input.value !== this.value) input.value = this.value;\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  @Method()\n  async focusFilterTrigger() {\n    const trigger = this.el.querySelector('ds-button-unfilled.panel-tool-search__filter') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await trigger?.setFocus?.();\n  }\n\n  private handleChange = (value: string) => {\n    this.value = value;\n    this.dsChange.emit(value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"panel-tool-search ds-chrome-row ds-chrome-space--md\">\n          <ChoiceSearch\n            hasFocusBoundary={false}\n            hasInteractionFill={false}\n            value={this.value}\n            placeholder={this.placeholder}\n            ariaLabel={this.ariaLabel}\n            controls={this.controls}\n            disabled={this.isInactive}\n            inputRef={() => undefined}\n            clearLabel=\"Clear\"\n            onValueChange={this.handleChange}\n            onClear={() => this.dsClear.emit()}\n            onKeyDown={() => undefined}\n          />\n          {this.showFilter ? (\n            <div class=\"panel-tool-search__filter-group\">\n              <ds-divider\n                class=\"panel-tool-search__divider\"\n                orientation=\"vertical\"\n                length=\"var(--dimension-size-200)\"\n              />\n              <ds-tooltip label={this.filterAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={this.filterTriggerId || undefined}\n                  class=\"panel-tool-search__filter\"\n                  variant=\"icon\"\n                  icon=\"Filters\"\n                  size=\"md\"\n                  aria-label={this.filterAriaLabel}\n                  haspopup=\"menu\"\n                  controls={this.filterControls}\n                  expanded={this.filterExpanded}\n                  surfaceOpen={this.filterSurfaceOpen}\n                  isActive={this.filterActive}\n                  isInactive={this.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsChange={(event: CustomEvent<boolean>) => {\n                    event.stopPropagation();\n                  }}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    event.stopPropagation();\n                    this.dsFilterToggle.emit(event.detail);\n                  }}\n                />\n              </ds-tooltip>\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wYAAA,MAAMA,EAAqB,IAAM,w1J,MCQpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,+JAS2BC,KAAAC,MAAgB,GAEjCD,KAAAE,YAAsB,SAEKF,KAAAG,UAAoB,SAI/CH,KAAAI,WAAsB,MAEtBJ,KAAAK,WAAsB,MAEtBL,KAAAM,gBAA0B,SAE1BN,KAAAO,gBAA0B,GAI1BP,KAAAQ,eAA0B,MAI1BR,KAAAS,aAAwB,MAwBxBT,KAAAU,aAAgBT,IACtBD,KAAKC,MAAQA,EACbD,KAAKW,SAASC,KAAKX,EAAM,CA2D5B,CA/EC,kBAAAY,GACE,MAAMC,EAAQd,KAAKe,GAAGC,cAAc,SACpC,GAAIF,GAASA,EAAMb,QAAUD,KAAKC,MAAOa,EAAMb,MAAQD,KAAKC,K,CAI9D,cAAMgB,GACJjB,KAAKe,GAAGC,cAAc,UAAUE,O,CAIlC,wBAAMC,GACJ,MAAMC,EAAUpB,KAAKe,GAAGC,cAAc,sDAGhCI,GAASH,a,CAQjB,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uDACTH,EAACI,EAAY,CAAAF,IAAA,2CACXG,iBAAkB,MAClBC,mBAAoB,MACpB3B,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAClBC,UAAWH,KAAKG,UAChB0B,SAAU7B,KAAK6B,SACfC,SAAU9B,KAAKI,WACf2B,SAAU,IAAMC,UAChBC,WAAW,QACXC,cAAelC,KAAKU,aACpByB,QAAS,IAAMnC,KAAKoC,QAAQxB,OAC5ByB,UAAW,IAAML,YAElBhC,KAAKK,WACJiB,EAAA,OAAKG,MAAM,mCACTH,EAAA,cACEG,MAAM,6BACNa,YAAY,WACZC,OAAO,8BAETjB,EAAA,cAAYkB,MAAOxC,KAAKM,gBAAiBmC,KAAK,SAASC,KAAK,MAC1DpB,EAAA,sBACEqB,GAAI3C,KAAKO,iBAAmByB,UAC5BP,MAAM,4BACNmB,QAAQ,OACRC,KAAK,UACLH,KAAK,KAAI,aACG1C,KAAKM,gBACjBwC,SAAS,OACTjB,SAAU7B,KAAK+C,eACfC,SAAUhD,KAAKQ,eACfyC,YAAajD,KAAKkD,kBAClBC,SAAUnD,KAAKS,aACfL,WAAYJ,KAAKI,WACjBgD,WAAY,MACZC,UAAW,MACXC,WAAaC,IACXA,EAAMC,iBAAiB,EAEzBC,UAAYF,IACVA,EAAMC,kBACNxD,KAAK0D,eAAe9C,KAAK2C,EAAMI,OAAO,MAK5C,M","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-CdgOLWX9.js";const t=o;const p=s;export{t as DsPanelTools,p as defineCustomElement};
+import{P as o,d as s}from"./p-CJD0kLeV.js";const t=o;const p=s;export{t as DsPanelTools,p as defineCustomElement};
 //# sourceMappingURL=ds-panel-tools.js.map

package/dist/components/ds-paper-texture.js

@@ -1,2 +1,2 @@
-import{P as o,d as s}from"./p-xdmJCPCg.js";const t=o;const m=s;export{t as DsPaperTexture,m as defineCustomElement};
+import{P as o,d as s}from"./p-Gb-vTuXr.js";const r=o;const t=s;export{r as DsPaperTexture,t as defineCustomElement};
 //# sourceMappingURL=ds-paper-texture.js.map

package/dist/components/ds-radio-tile.d.ts

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

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

@@ -0,0 +1,2 @@
+import{p as i,H as e,c as o,h as r,a as t,t as d}from"./index.js";import{d as n}from"./p-Cihjy4WY.js";import{D as s,s as a}from"./p-DOUk4KoT.js";import{s as c,r as l}from"./p-C0qN3PSb.js";const v=()=>`@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-radio-tile-h,.ds-interaction-fill.sc-ds-radio-tile{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-radio-tile-h::before,.ds-interaction-fill.sc-ds-radio-tile::before,.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-radio-tile-h::before,.ds-interaction-fill.sc-ds-radio-tile::before{z-index:1}.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-radio-tile-h,.ds-interaction-fill--bordered.sc-ds-radio-tile{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-radio-tile-h::before,.ds-interaction-fill--selected.sc-ds-radio-tile::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-radio-tile-h,.ds-interaction-fill--selected.sc-ds-radio-tile{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-tile-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio-tile:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-radio-tile-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-radio-tile:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-radio-tile-h::after,.ds-interaction-fill--grouped.sc-ds-radio-tile::after,.ds-interaction-fill--grouped.sc-ds-radio-tile-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio-tile:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-radio-tile-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-radio-tile:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-radio-tile-h,.ds-interaction-fill--grouped.sc-ds-radio-tile{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-radio-tile-h>.ds-interaction-fill__content.sc-ds-radio-tile,.ds-interaction-fill.sc-ds-radio-tile>.ds-interaction-fill__content.sc-ds-radio-tile,.ds-interaction-fill__content.sc-ds-radio-tile{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-radio-tile-h,.ds-interaction-fill--on-faint.sc-ds-radio-tile{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-radio-tile-h,.ds-interaction-fill--on-medium.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-bold.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-strong.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-translucent.sc-ds-radio-tile{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-radio-tile-h,.ds-interaction-fill--on-inverted.sc-ds-radio-tile{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-radio-tile-h,.ds-interaction-fill--on-media.sc-ds-radio-tile{--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-tile-h,.ds-interaction-fill--on-always-dark.sc-ds-radio-tile{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-radio-tile-h,.ds-interaction-fill--on-navigation.sc-ds-radio-tile{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-tile-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-radio-tile:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-radio-tile-h::after,.ds-interaction-fill.sc-ds-radio-tile::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-radio-tile-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-radio-tile:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-radio-tile-h::before,.ds-interaction-fill--selected.sc-ds-radio-tile::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-radio-tile-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-radio-tile:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-radio-tile-h,.ds-control-inactive.sc-ds-radio-tile{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-radio-tile-h,.ds-control-inactive.sc-ds-radio-tile{color:var(--ds-forced-color-disabled);opacity:1}}@media (forced-colors: active){.sc-ds-radio-tile:root,.sc-ds-radio-tile-h,.ds-forced-colors-scope.sc-ds-radio-tile{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-radio-tile-h{display:flex;flex-direction:column;gap:var(--dimension-space-100)}.radio-tiles--horizontal.sc-ds-radio-tile-h{flex-direction:row;flex-wrap:wrap}.radio-tiles--horizontal.sc-ds-radio-tile-h .radio-tile.sc-ds-radio-tile{flex-basis:var(--dimension-menu-width-xs)}.radio-tile.sc-ds-radio-tile{display:flex;position:relative;align-items:flex-start;flex:1;box-sizing:border-box;gap:var(--dimension-space-100);padding:var(--dimension-space-200);min-width:0;border-radius:var(--dimension-radius-050);background:var(--color-background-primary);cursor:pointer;user-select:none}.radio-tile__outline.sc-ds-radio-tile{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);pointer-events:none}[aria-invalid='true'].sc-ds-radio-tile-h .radio-tile__outline.sc-ds-radio-tile{box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}.radio-tile__input.sc-ds-radio-tile{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:inherit;z-index:3}.radio-tile__input.sc-ds-radio-tile:disabled{cursor:not-allowed}.radio-tile__input.sc-ds-radio-tile:focus-visible+.radio-tile__outline.sc-ds-radio-tile{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-tile__indicator.sc-ds-radio-tile{display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:var(--dimension-size-200);height:var(--dimension-size-200);margin-top:calc((var(--typography-lineheight-md) - var(--dimension-size-200)) / 2);border-radius:var(--dimension-radius-half);box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary)}.radio-tile--selected.sc-ds-radio-tile .radio-tile__indicator.sc-ds-radio-tile{background:var(--color-background-bold-brand);box-shadow:none}.radio-tile__indicator.sc-ds-radio-tile>span.sc-ds-radio-tile{width:var(--dimension-size-100);height:var(--dimension-size-100);border-radius:var(--dimension-radius-half);background:var(--color-foreground-on-bold-background-primary)}.radio-tile__copy.sc-ds-radio-tile{display:grid;gap:var(--dimension-space-050);min-width:0;padding-inline:var(--dimension-space-025)}@media (forced-colors: active){.radio-tile__outline.sc-ds-radio-tile,.radio-tile__indicator.sc-ds-radio-tile{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);box-shadow:none}.radio-tile--selected.sc-ds-radio-tile .radio-tile__indicator.sc-ds-radio-tile{background:var(--ds-forced-color-selected)}.radio-tile__indicator.sc-ds-radio-tile>span.sc-ds-radio-tile{background:var(--ds-forced-color-on-selected)}}`;let f=0;const h=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsChange=o(this,"dsChange",7);this.internals=this.attachInternals();this.options=[];this.value="";this.disabled=false;this.isInactive=false;this.required=false;this.requiredMessage=s;this.direction="vertical";this.error=false;this.ariaLabel=null;this.formDisabled=false;this.generatedId=`ds-radio-tile-${++f}`;this.initialValue=""}get inactive(){return this.disabled||this.isInactive||this.formDisabled}componentWillLoad(){this.initialValue=this.value;this.syncFormValue()}syncFormValue(){const i=this.options.some((i=>i.value===this.value&&!i.isInactive));c(this.internals,i?this.value:"",{inactive:this.inactive});a(this.internals,this.required&&!this.inactive&&!i,this.requiredMessage)}formDisabledCallback(i){this.formDisabled=i;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(i){this.value=l(i)}async setFocus(){(this.el.querySelector("input:checked:not(:disabled)")??this.el.querySelector("input:not(:disabled)"))?.focus()}select(i){if(this.inactive||i===this.value)return;this.value=i;this.dsChange.emit(i)}render(){return r(t,{key:"c1b6ddcf08a19ec1827c25b06a74aa50ae825bc6",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":this.ariaDescribedby,"aria-required":this.required?"true":undefined,"aria-invalid":this.error?"true":undefined,class:{"radio-tiles":true,"radio-tiles--horizontal":this.direction==="horizontal"}},this.options.map(((i,e)=>{const o=i.value===this.value;const t=this.inactive||Boolean(i.isInactive);return r("label",{class:{"radio-tile":true,"radio-tile--selected":o,"ds-interaction-fill":!t,"ds-control-inactive":t},key:i.value},r("input",{type:"radio",class:"radio-tile__input",id:e===0?this.inputId:undefined,name:this.generatedId,form:"",value:i.value,checked:o,disabled:t,"aria-labelledby":`${this.generatedId}-label-${e}`,"aria-describedby":i.description?`${this.generatedId}-description-${e}`:undefined,onChange:()=>this.select(i.value)}),r("span",{class:"radio-tile__outline","aria-hidden":"true"}),r("span",{class:"radio-tile__indicator ds-interaction-fill__content","aria-hidden":"true"},o&&r("span",null)),r("span",{class:"radio-tile__copy ds-interaction-fill__content"},r("ds-text",{as:"span",variant:"text-body-medium",emphasis:true,textId:`${this.generatedId}-label-${e}`},i.label),i.description&&r("ds-text",{as:"span",variant:"text-body-medium",color:"secondary",textId:`${this.generatedId}-description-${e}`},i.description)))})))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}}static get style(){return v()}},[66,"ds-radio-tile",{options:[16],value:[1025],name:[513],form:[513],disabled:[516],isInactive:[4,"is-inactive"],required:[516],requiredMessage:[1,"required-message"],direction:[1],inputId:[1,"input-id"],error:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],options:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],requiredMessage:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const i=["ds-radio-tile","ds-text"];i.forEach((i=>{switch(i){case"ds-radio-tile":if(!customElements.get(d(i))){customElements.define(d(i),h)}break;case"ds-text":if(!customElements.get(d(i))){n()}break}}))}u();const b=h;const p=u;export{b as DsRadioTile,p as defineCustomElement};
+//# sourceMappingURL=ds-radio-tile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["radioTileCss","tileId","RadioTile","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","disabled","isInactive","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","direction","error","ariaLabel","formDisabled","generatedId","initialValue","inactive","componentWillLoad","syncFormValue","selected","some","option","setFormControlValue","internals","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","el","querySelector","focus","select","dsChange","emit","render","h","Host","key","role","ariaLabelledby","ariaDescribedby","undefined","class","map","index","Boolean","type","id","inputId","name","form","checked","description","onChange","as","variant","emphasis","textId","label","color"],"sources":["src/wc/components/RadioTile/RadioTile.css?tag=ds-radio-tile&encapsulation=scoped","src/wc/components/RadioTile/RadioTile.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/forced-colors.css';\n:host {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n}\n:host(.radio-tiles--horizontal) {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n:host(.radio-tiles--horizontal) .radio-tile {\n  flex-basis: var(--dimension-menu-width-xs);\n}\n.radio-tile {\n  display: flex;\n  position: relative;\n  align-items: flex-start;\n  flex: 1;\n  box-sizing: border-box;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  min-width: 0;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-primary);\n  cursor: pointer;\n  user-select: none;\n}\n.radio-tile__outline {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  pointer-events: none;\n}\n:host([aria-invalid='true']) .radio-tile__outline {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n.radio-tile__input {\n  position: absolute;\n  inset: 0;\n  opacity: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  cursor: inherit;\n  z-index: 3;\n}\n.radio-tile__input:disabled {\n  cursor: not-allowed;\n}\n.radio-tile__input:focus-visible + .radio-tile__outline {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n.radio-tile__indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  box-sizing: border-box;\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  margin-top: calc((var(--typography-lineheight-md) - var(--dimension-size-200)) / 2);\n  border-radius: var(--dimension-radius-half);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-015) var(--color-foreground-tertiary);\n}\n.radio-tile--selected .radio-tile__indicator {\n  background: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n.radio-tile__indicator > span {\n  width: var(--dimension-size-100);\n  height: var(--dimension-size-100);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-foreground-on-bold-background-primary);\n}\n.radio-tile__copy {\n  display: grid;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  padding-inline: var(--dimension-space-025);\n}\n\n@media (forced-colors: active) {\n  .radio-tile__outline,\n  .radio-tile__indicator {\n    border: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n  .radio-tile--selected .radio-tile__indicator {\n    background: var(--ds-forced-color-selected);\n  }\n  .radio-tile__indicator > span {\n    background: var(--ds-forced-color-on-selected);\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  State,\n  Watch,\n  Method,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport interface RadioTileOption {\n  value: string;\n  label: string;\n  description?: string;\n  isInactive?: boolean;\n}\nlet tileId = 0;\n\n@Component({ tag: 'ds-radio-tile', styleUrl: 'RadioTile.css', scoped: true, formAssociated: true })\nexport class RadioTile {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n  /** One-of-many choices displayed as fully clickable tiles. */\n  @Prop() options: RadioTileOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop() isInactive: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() inputId: string | undefined;\n  @Prop() error: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  @Event() dsChange!: EventEmitter<string>;\n  @State() private formDisabled = false;\n  private readonly generatedId = `ds-radio-tile-${++tileId}`;\n  private initialValue = '';\n  private get inactive() {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.syncFormValue();\n  }\n  @Watch('value')\n  @Watch('options')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('requiredMessage')\n  syncFormValue() {\n    const selected = this.options.some(option => option.value === this.value && !option.isInactive);\n    setFormControlValue(this.internals, selected ? this.value : '', { inactive: this.inactive });\n    setRequiredValidity(\n      this.internals,\n      this.required && !this.inactive && !selected,\n      this.requiredMessage\n    );\n  }\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n  @Method()\n  async setFocus() {\n    (\n      this.el.querySelector<HTMLInputElement>('input:checked:not(:disabled)') ??\n      this.el.querySelector<HTMLInputElement>('input:not(:disabled)')\n    )?.focus();\n  }\n  private select(value: string) {\n    if (this.inactive || value === this.value) return;\n    this.value = value;\n    this.dsChange.emit(value);\n  }\n  render() {\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        aria-describedby={this.ariaDescribedby}\n        aria-required={this.required ? 'true' : undefined}\n        aria-invalid={this.error ? 'true' : undefined}\n        class={{ 'radio-tiles': true, 'radio-tiles--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((option, index) => {\n          const selected = option.value === this.value;\n          const inactive = this.inactive || Boolean(option.isInactive);\n          return (\n            <label\n              class={{\n                'radio-tile': true,\n                'radio-tile--selected': selected,\n                'ds-interaction-fill': !inactive,\n                'ds-control-inactive': inactive,\n              }}\n              key={option.value}\n            >\n              <input\n                type=\"radio\"\n                class=\"radio-tile__input\"\n                id={index === 0 ? this.inputId : undefined}\n                name={this.generatedId}\n                form=\"\"\n                value={option.value}\n                checked={selected}\n                disabled={inactive}\n                aria-labelledby={`${this.generatedId}-label-${index}`}\n                aria-describedby={\n                  option.description ? `${this.generatedId}-description-${index}` : undefined\n                }\n                onChange={() => this.select(option.value)}\n              />\n              <span class=\"radio-tile__outline\" aria-hidden=\"true\" />\n              <span class=\"radio-tile__indicator ds-interaction-fill__content\" aria-hidden=\"true\">\n                {selected && <span />}\n              </span>\n              <span class=\"radio-tile__copy ds-interaction-fill__content\">\n                <ds-text\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  emphasis\n                  textId={`${this.generatedId}-label-${index}`}\n                >\n                  {option.label}\n                </ds-text>\n                {option.description && (\n                  <ds-text\n                    as=\"span\"\n                    variant=\"text-body-medium\"\n                    color=\"secondary\"\n                    textId={`${this.generatedId}-description-${index}`}\n                  >\n                    {option.description}\n                  </ds-text>\n                )}\n              </span>\n            </label>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"4LAAA,MAAMA,EAAe,IAAM,izZC0B3B,IAAIC,EAAS,E,MAGAC,EAASC,EAAA,MAAAD,UAAAE,EADtB,WAAAC,CAAAC,G,qHAKUC,KAAAC,QAA6B,GACZD,KAAAE,MAAgB,GAGhBF,KAAAG,SAAoB,MACrCH,KAAAI,WAAsB,MACLJ,KAAAK,SAAoB,MACrCL,KAAAM,gBAA0BC,EAC1BP,KAAAQ,UAAuC,WAEvCR,KAAAS,MAAiB,MACUT,KAAAU,UAA2B,KAI7CV,KAAAW,aAAe,MACfX,KAAAY,YAAc,mBAAmBlB,IAC1CM,KAAAa,aAAe,EAkHxB,CAjHC,YAAYC,GACV,OAAOd,KAAKG,UAAYH,KAAKI,YAAcJ,KAAKW,Y,CAElD,iBAAAI,GACEf,KAAKa,aAAeb,KAAKE,MACzBF,KAAKgB,e,CAQP,aAAAA,GACE,MAAMC,EAAWjB,KAAKC,QAAQiB,MAAKC,GAAUA,EAAOjB,QAAUF,KAAKE,QAAUiB,EAAOf,aACpFgB,EAAoBpB,KAAKqB,UAAWJ,EAAWjB,KAAKE,MAAQ,GAAI,CAAEY,SAAUd,KAAKc,WACjFQ,EACEtB,KAAKqB,UACLrB,KAAKK,WAAaL,KAAKc,WAAaG,EACpCjB,KAAKM,gB,CAGT,oBAAAiB,CAAqBpB,GACnBH,KAAKW,aAAeR,EACpBH,KAAKgB,e,CAEP,iBAAAQ,GACExB,KAAKE,MAAQF,KAAKa,Y,CAEpB,wBAAAY,CAAyBC,GACvB1B,KAAKE,MAAQyB,EAAuBD,E,CAGtC,cAAME,IAEF5B,KAAK6B,GAAGC,cAAgC,iCACxC9B,KAAK6B,GAAGC,cAAgC,0BACvCC,O,CAEG,MAAAC,CAAO9B,GACb,GAAIF,KAAKc,UAAYZ,IAAUF,KAAKE,MAAO,OAC3CF,KAAKE,MAAQA,EACbF,KAAKiC,SAASC,KAAKhC,E,CAErB,MAAAiC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,aAAY,aACLvC,KAAKU,UAAS,kBACTV,KAAKwC,eAAc,mBAClBxC,KAAKyC,gBAAe,gBACvBzC,KAAKK,SAAW,OAASqC,UAAS,eACnC1C,KAAKS,MAAQ,OAASiC,UACpCC,MAAO,CAAE,cAAe,KAAM,0BAA2B3C,KAAKQ,YAAc,eAE3ER,KAAKC,QAAQ2C,KAAI,CAACzB,EAAQ0B,KACzB,MAAM5B,EAAWE,EAAOjB,QAAUF,KAAKE,MACvC,MAAMY,EAAWd,KAAKc,UAAYgC,QAAQ3B,EAAOf,YACjD,OACEgC,EAAA,SACEO,MAAO,CACL,aAAc,KACd,uBAAwB1B,EACxB,uBAAwBH,EACxB,sBAAuBA,GAEzBwB,IAAKnB,EAAOjB,OAEZkC,EAAA,SACEW,KAAK,QACLJ,MAAM,oBACNK,GAAIH,IAAU,EAAI7C,KAAKiD,QAAUP,UACjCQ,KAAMlD,KAAKY,YACXuC,KAAK,GACLjD,MAAOiB,EAAOjB,MACdkD,QAASnC,EACTd,SAAUW,EAAQ,kBACD,GAAGd,KAAKY,qBAAqBiC,IAAO,mBAEnD1B,EAAOkC,YAAc,GAAGrD,KAAKY,2BAA2BiC,IAAUH,UAEpEY,SAAU,IAAMtD,KAAKgC,OAAOb,EAAOjB,SAErCkC,EAAA,QAAMO,MAAM,sBAAqB,cAAa,SAC9CP,EAAA,QAAMO,MAAM,qDAAoD,cAAa,QAC1E1B,GAAYmB,EAAA,cAEfA,EAAA,QAAMO,MAAM,iDACVP,EAAA,WACEmB,GAAG,OACHC,QAAQ,mBACRC,SAAQ,KACRC,OAAQ,GAAG1D,KAAKY,qBAAqBiC,KAEpC1B,EAAOwC,OAETxC,EAAOkC,aACNjB,EAAA,WACEmB,GAAG,OACHC,QAAQ,mBACRI,MAAM,YACNF,OAAQ,GAAG1D,KAAKY,2BAA2BiC,KAE1C1B,EAAOkC,cAIR,I","ignoreList":[]}

package/dist/components/ds-radio.js

@@ -1,2 +1,2 @@
-import{R as o,d as s}from"./p-DOAybCp0.js";const p=o;const t=s;export{p as DsRadio,t as defineCustomElement};
+import{R as o,d as s}from"./p-DCLRAH5i.js";const t=o;const p=s;export{t as DsRadio,p as defineCustomElement};
 //# sourceMappingURL=ds-radio.js.map

package/dist/components/ds-score.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-ljbw3UMZ.js";const t=o;const p=s;export{t as DsScore,p as defineCustomElement};
+import{S as o,d as s}from"./p-BYJtvRQm.js";const t=o;const m=s;export{t as DsScore,m as defineCustomElement};
 //# sourceMappingURL=ds-score.js.map

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

@@ -1,2 +1,2 @@
-import{p as e,H as l,c as s,h as r,a,t as d}from"./index.js";import{S as o}from"./p-Ck1hgD6g.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",7);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 o({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(a,{key:"b0fbd7d9adad4df094670c513a037cf8c8f19ba9"},r("div",{key:"2e76bc20ceb4dd7db7de67408f92786a40a4e0f4",class:"scroll-overlay"},r("div",{key:"0512073ac08210d0c2b5a094eecc7daabc2c9d20",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:"5dded16a4700908548556a398bf3990e43139dbf",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"58d51780024b67c5fd8d12ed1d4ea15c31a508c1",class:"scroll-overlay__body"},r("slot",{key:"02a42fb2bb5ab87011f288a3d9bd06b71c6e46c7"})))),r("div",{key:"58efa7d9e9c91a10c10d9861b251db10cb13146e",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"dcaa04f59c36da445ca369105e19a11f8d3a9757",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(d(e))){customElements.define(d(e),i)}break}}))}n();const g=i;const f=n;export{g as DsScrollOverlay,f as defineCustomElement};
+import{p as e,H as l,c as s,h as r,a,t as o}from"./index.js";import{S as d}from"./p-Ck1hgD6g.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",7);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(a,{key:"27c06978bec462ce72b36b74a5504e50c5a93fb4"},r("div",{key:"eeef6d9cfef61bad4d93111b59c5717b260d6969",class:"scroll-overlay"},r("div",{key:"55a7090f6209370174b25829ff54bae340a5c96c",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:"ab9f8e94119eccd91feb1eac80a66bf9efc166d4",class:"scroll-overlay__content scroll-edge-fade--block-window",ref:e=>{this.content=e}},r("div",{key:"8ab69830df948b4a88400f6cf8cac687949ecf6b",class:"scroll-overlay__body"},r("slot",{key:"d51604ec13926f0330a39b9c834cd5184876104d"})))),r("div",{key:"cee57d82da13236294b9ae7001971da71a3e4040",class:"scroll-overlay__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"d193be4f2b81af799a428d9173481a9764d2f381",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(o(e))){customElements.define(o(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-select.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-C6xVxqOn.js";const t=o;const n=s;export{t as DsSelect,n as defineCustomElement};
+import{S as o,d as s}from"./p-fYZK3zqM.js";const t=o;const p=s;export{t as DsSelect,p as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

package/dist/components/ds-setting-row.d.ts

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

package/dist/components/ds-setting-row.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as t,h as i,a as d,t as a}from"./index.js";import{d as c}from"./p-Dcn1eDVt.js";import{d as n}from"./p-Cihjy4WY.js";const r=()=>`.sc-ds-setting-row-h{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:start;box-sizing:border-box;min-width:0;padding:var(--dimension-space-100) var(--dimension-space-200);gap:var(--dimension-space-200)}.setting-row__copy.sc-ds-setting-row{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050);overflow-wrap:anywhere;-webkit-user-select:none;user-select:none}`;let o=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.checked=false;this.disabled=false;this.rowId=`ds-setting-row-${++o}`;this.handleChange=e=>{e.stopPropagation();e.target.checked=this.checked;this.dsChange.emit(e.detail)}}render(){return i(d,{key:"486f1e22f6cac0044019992f199bf4f2edfb1b03"},i("div",{key:"f50fc11712720e5fc9f04271b86fb46caa0fcd23",class:"setting-row__copy"},i("ds-text",{key:"342bf57ce139dadbe3385c4ad13b934c284839de",textId:`${this.rowId}-label`,variant:"text-body-medium",color:"primary",emphasis:true},this.label),this.description&&i("ds-text",{key:"4ecfa7c049e99495f2f3ba7d09d5542b12cbb7e1",textId:`${this.rowId}-description`,variant:"text-body-medium",color:"secondary"},this.description)),i("ds-switch",{key:"e0d058f0d7958123cedfecc37d32d24734916c78",checked:this.checked,disabled:this.disabled,"aria-labelledby":`${this.rowId}-label`,"aria-describedby":this.description?`${this.rowId}-description`:undefined,onDsChange:this.handleChange}))}static get style(){return r()}},[2,"ds-setting-row",{label:[1],description:[1],checked:[4],disabled:[4]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-setting-row","ds-switch","ds-text"];e.forEach((e=>{switch(e){case"ds-setting-row":if(!customElements.get(a(e))){customElements.define(a(e),f)}break;case"ds-switch":if(!customElements.get(a(e))){c()}break;case"ds-text":if(!customElements.get(a(e))){n()}break}}))}l();const h=f;const m=l;export{h as DsSettingRow,m as defineCustomElement};
+//# sourceMappingURL=ds-setting-row.js.map

package/dist/components/ds-setting-row.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["settingRowCss","settingRowSequence","SettingRow","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","disabled","rowId","handleChange","event","stopPropagation","target","dsChange","emit","detail","render","h","Host","key","class","textId","variant","color","emphasis","label","description","undefined","onDsChange"],"sources":["src/wc/components/SettingRow/SettingRow.css?tag=ds-setting-row&encapsulation=scoped","src/wc/components/SettingRow/SettingRow.tsx"],"sourcesContent":[":host {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: start;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  gap: var(--dimension-space-200);\n}\n\n.setting-row__copy {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n  overflow-wrap: anywhere;\n  -webkit-user-select: none;\n  user-select: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nlet settingRowSequence = 0;\n\n/** A labeled binary setting that applies immediately through its application owner. */\n@Component({\n  tag: 'ds-setting-row',\n  styleUrl: 'SettingRow.css',\n  scoped: true,\n})\nexport class SettingRow {\n  /** Name of the enabled setting. */\n  @Prop() label!: string;\n  /** Supporting copy explaining the setting and its alternative. */\n  @Prop() description?: string;\n  /** Controlled enabled state. */\n  @Prop() checked = false;\n  /** Prevent changes while the setting is unavailable. */\n  @Prop() disabled = false;\n\n  /** Requests the next value; the application owns acceptance and persistence. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private readonly rowId = `ds-setting-row-${++settingRowSequence}`;\n\n  private handleChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    // Keep the composed switch controlled until the owner accepts this request.\n    (event.target as HTMLDsSwitchElement).checked = this.checked;\n    this.dsChange.emit(event.detail);\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"setting-row__copy\">\n          <ds-text\n            textId={`${this.rowId}-label`}\n            variant=\"text-body-medium\"\n            color=\"primary\"\n            emphasis\n          >\n            {this.label}\n          </ds-text>\n          {this.description && (\n            <ds-text\n              textId={`${this.rowId}-description`}\n              variant=\"text-body-medium\"\n              color=\"secondary\"\n            >\n              {this.description}\n            </ds-text>\n          )}\n        </div>\n        <ds-switch\n          checked={this.checked}\n          disabled={this.disabled}\n          aria-labelledby={`${this.rowId}-label`}\n          aria-describedby={this.description ? `${this.rowId}-description` : undefined}\n          onDsChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAgB,IAAM,oZCE5B,IAAIC,EAAqB,E,MAQZC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,+EAWUC,KAAAC,QAAU,MAEVD,KAAAE,SAAW,MAKFF,KAAAG,MAAQ,oBAAoBT,IAErCM,KAAAI,aAAgBC,IACtBA,EAAMC,kBAELD,EAAME,OAA+BN,QAAUD,KAAKC,QACrDD,KAAKQ,SAASC,KAAKJ,EAAMK,OAAO,CAmCnC,CAhCC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,WAAAE,IAAA,2CACEE,OAAQ,GAAGhB,KAAKG,cAChBc,QAAQ,mBACRC,MAAM,UACNC,SAAQ,MAEPnB,KAAKoB,OAEPpB,KAAKqB,aACJT,EAAA,WAAAE,IAAA,2CACEE,OAAQ,GAAGhB,KAAKG,oBAChBc,QAAQ,mBACRC,MAAM,aAELlB,KAAKqB,cAIZT,EAAA,aAAAE,IAAA,2CACEb,QAASD,KAAKC,QACdC,SAAUF,KAAKE,SAAQ,kBACN,GAAGF,KAAKG,cAAa,mBACpBH,KAAKqB,YAAc,GAAGrB,KAAKG,oBAAsBmB,UACnEC,WAAYvB,KAAKI,e","ignoreList":[]}