@ds-mo/ui 14.15.1 → 14.16.0

package/dist/components/ds-slider.js

@@ -1,2 +1,2 @@
-import{p as s,H as i,c as t,h as e,a as r,t as d}from"./index.js";import{d as a}from"./p-DZFilC--.js";import{a as l,s as o,c as n,r as c}from"./p-B8q-6a03.js";const h=()=>`@media (forced-colors: active){.sc-ds-slider:root,.sc-ds-slider-h,.ds-forced-colors-scope.sc-ds-slider{--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-slider-h,.ds-control-inactive.sc-ds-slider{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{color:var(--ds-forced-color-disabled);opacity:1}}.ds-field-stack.sc-ds-slider-h,.ds-field-stack.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050)}@media (forced-colors: active){.sc-ds-slider:root,.sc-ds-slider-h,.ds-forced-colors-scope.sc-ds-slider{--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-slider-h{--ds-slider-control-size:var(--dimension-size-400);--ds-slider-thumb-size:var(--dimension-size-200);--ds-slider-track-size:var(--dimension-size-100);--ds-slider-track-stroke:var(--dimension-stroke-width-012);--ds-slider-vertical-length:calc(var(--dimension-size-800) * 3);box-sizing:border-box;width:100%;color:var(--color-foreground-primary)}.slider--sm.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-300);--ds-slider-thumb-size:var(--dimension-size-150);--ds-slider-track-size:var(--dimension-size-075)}.slider--xs.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-200);--ds-slider-thumb-size:var(--dimension-size-100);--ds-slider-track-size:var(--dimension-size-050)}.slider--vertical.sc-ds-slider-h{width:fit-content;min-width:var(--dimension-form-width-xs)}.slider__label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-100);min-width:0}.slider__label.sc-ds-slider{min-width:0}.slider__value.sc-ds-slider{flex-shrink:0}.slider__control.sc-ds-slider{position:relative;width:100%;height:var(--ds-slider-control-size);border-radius:var(--dimension-radius-half);cursor:default;touch-action:none;user-select:none}.slider--vertical.sc-ds-slider-h .slider__control.sc-ds-slider{align-self:center;width:var(--ds-slider-control-size);height:var(--ds-slider-vertical-length)}.slider--readonly.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:default}.ds-control-inactive.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:not-allowed}.slider__rail.sc-ds-slider{position:absolute;top:50%;right:0;left:0;height:var(--ds-slider-track-size);overflow:hidden;border-radius:var(--dimension-radius-025);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);transform:translateY(-50%);pointer-events:none}.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{right:calc(var(--ds-slider-thumb-size) / 2);left:calc(var(--ds-slider-thumb-size) / 2)}.slider__indicator.sc-ds-slider{position:absolute;top:0;bottom:0;left:0;width:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );border-radius:inherit;background-color:var(--color-background-bold-brand)}.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );width:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(var(--ds-slider-start-pct, 0) * 1%);width:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider__thumb.sc-ds-slider{position:absolute;top:50%;left:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));width:var(--ds-slider-thumb-size);height:var(--ds-slider-thumb-size);transform:translateY(-50%);z-index:1}.slider__thumb--active.sc-ds-slider{z-index:2}.slider__input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;pointer-events:none;z-index:2}.slider__thumb-visual.sc-ds-slider{position:absolute;inset:0;box-sizing:border-box;overflow:visible;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);pointer-events:none;transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.slider__thumb-wash.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:background-color var(--effect-motion-short-2)}@media (hover: hover) and (pointer: fine){.sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb.sc-ds-slider:hover .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-hover)}}[data-dragging].sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb--active.sc-ds-slider .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-pressed)}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.slider--vertical.sc-ds-slider-h .slider__rail.sc-ds-slider{top:0;right:auto;bottom:0;left:50%;width:var(--ds-slider-track-size);height:auto;transform:translateX(-50%)}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{top:calc(var(--ds-slider-thumb-size) / 2);bottom:calc(var(--ds-slider-thumb-size) / 2)}.slider--vertical.sc-ds-slider-h .slider__indicator.sc-ds-slider{top:auto;right:0;bottom:0;left:0;width:auto;height:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );height:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(var(--ds-slider-start-pct, 0) * 1%);height:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider--vertical.sc-ds-slider-h .slider__thumb.sc-ds-slider{top:auto;bottom:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));left:50%;transform:translateX(-50%)}@media (prefers-reduced-motion: reduce){.slider__thumb-visual.sc-ds-slider,.slider__thumb-wash.sc-ds-slider{transition:none}}@media (forced-colors: active){.slider__rail.sc-ds-slider{border:var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);box-shadow:none}.slider__indicator.sc-ds-slider{background-color:var(--ds-forced-color-selected)}.slider__thumb-visual.sc-ds-slider{border:var(--dimension-stroke-width-012) solid       var(--ds-forced-color-control-boundary);background-color:var(--ds-forced-color-surface);box-shadow:none}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline-color:var(--ds-forced-color-selected)}}`;let u=0;let m=0;const b=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsCommit=t(this,"dsCommit");this.internals=this.attachInternals();this.value=0;this.min=0;this.max=100;this.step=1;this.minStepsBetweenValues=0;this.showValue=true;this.size="md";this.orientation="horizontal";this.thumbAlignment="edge";this.disabled=false;this.readOnly=false;this.isInactive=false;this.ariaLabel=null;this.startLabel="Minimum value";this.endLabel="Maximum value";this.valueTexts=[];this.valuePrefix="";this.valueSuffix="";this.rangeSeparator="–";this.formDisabled=false;this.dragging=false;this.focused=false;this.touched=false;this.activeThumbIndex=0;this.generatedId=`ds-slider-${++u}`;this.labelId=`${this.generatedId}-label`;this.initialValue=0;this.lastCommittedValue=0;this.pointerId=null;this.pointerStartValue=0;this.controlEl=null;this.handleNativeInput=(s,i)=>{const t=s.target;this.activeThumbIndex=i;if(this.readOnly||this.isDisabled){t.value=String(this.resolvedValues[i]);return}this.setValueAt(i,Number(t.value))};this.handleNativeChange=()=>{if(!this.readOnly&&!this.isDisabled)this.commitIfChanged()};this.handleKeyDown=s=>{if(!this.readOnly)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(s.key)){s.preventDefault()}};this.handleFocus=s=>{this.activeThumbIndex=s;this.focused=true};this.handleBlur=s=>{const i=s.relatedTarget;if(i instanceof Node&&this.el.contains(i))return;this.focused=false;this.touched=true};this.handleHostClick=s=>{if(s.target!==this.el||this.isDisabled)return;const i=this.el.querySelectorAll(".slider__input");i[Math.min(this.activeThumbIndex,i.length-1)]?.focus()};this.handlePointerDown=s=>{if(s.button!==0||this.isDisabled||this.readOnly)return;s.preventDefault();const i=this.valueFromPointer(s);const t=this.closestThumbIndex(i,s.target);this.activeThumbIndex=t;this.pointerId=s.pointerId;this.pointerStartValue=this.cloneValue(this.publicValue);this.dragging=true;this.setValueAt(t,i);this.controlEl?.setPointerCapture(s.pointerId);requestAnimationFrame((()=>this.el.querySelectorAll(".slider__input")[t]?.focus({preventScroll:true})))};this.handlePointerMove=s=>{if(this.pointerId!==s.pointerId||!this.dragging)return;s.preventDefault();this.setValueAt(this.activeThumbIndex,this.valueFromPointer(s))}}componentWillLoad(){this.initialValue=this.cloneValue(this.publicValue);this.lastCommittedValue=this.cloneValue(this.publicValue);this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.resolvedValues;if(this.isRange){l(this.internals,this.name,s,{inactive:this.isDisabled})}else{const i=String(s[0]);o(this.internals,this.name?i:null,{inactive:this.isDisabled,state:i})}}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.cloneValue(this.initialValue);this.lastCommittedValue=this.cloneValue(this.initialValue);this.dragging=false;this.focused=false;this.touched=false}formStateRestoreCallback(s){if(this.isRange){const i=n(s,2);this.value=i.length?i:this.cloneValue(this.initialValue)}else{const i=Number(c(s,"NaN"));if(Number.isFinite(i))this.value=i}this.lastCommittedValue=this.cloneValue(this.publicValue)}async setFocus(s=0){const i=this.el.querySelectorAll(".slider__input");i[Math.max(0,Math.min(s,i.length-1))]?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get isRange(){return Array.isArray(this.value)}get safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get safeMin(){return Number.isFinite(this.min)?this.min:0}get safeMax(){const s=this.safeMin;return Number.isFinite(this.max)&&this.max>s?this.max:s+this.safeStep}get minimumGap(){const s=Number.isFinite(this.minStepsBetweenValues)?Math.max(0,Math.floor(this.minStepsBetweenValues)):0;return s*this.safeStep}get resolvedValues(){const s=this.safeMin;const i=this.safeMax;if(!this.isRange)return[this.snap(Number(this.value))];const t=this.value;let e=this.snap(Number(t[0]??s));let r=this.snap(Number(t[1]??i));if(e>r)[e,r]=[r,e];const d=Math.min(this.minimumGap,i-s);if(r-e<d){r=Math.min(i,this.snap(e+d));e=Math.max(s,this.snap(r-d))}return[e,r]}get publicValue(){const s=this.resolvedValues;return this.isRange?[...s]:s[0]}cloneValue(s){return Array.isArray(s)?[...s]:s}valuesEqual(s,i){if(Array.isArray(s)&&Array.isArray(i)){return s.length===i.length&&s.every(((s,t)=>s===i[t]))}return!Array.isArray(s)&&!Array.isArray(i)&&s===i}decimalPlaces(s){const i=String(s).toLowerCase();if(i.includes("e-"))return Number(i.split("e-")[1])||0;return i.includes(".")?i.split(".")[1].length:0}snap(s){const i=this.safeMin;const t=this.safeMax;const e=Number.isFinite(s)?s:i;const r=i+Math.round((e-i)/this.safeStep)*this.safeStep;const d=Math.min(10,Math.max(this.decimalPlaces(i),this.decimalPlaces(t),this.decimalPlaces(this.safeStep)));return Number(Math.min(t,Math.max(i,r)).toFixed(d))}percent(s){return(s-this.safeMin)/(this.safeMax-this.safeMin)*100}allowedMin(s,i=this.resolvedValues){return this.isRange&&s===1?Math.min(this.safeMax,i[0]+this.minimumGap):this.safeMin}allowedMax(s,i=this.resolvedValues){return this.isRange&&s===0?Math.max(this.safeMin,i[1]-this.minimumGap):this.safeMax}setValueAt(s,i){const t=this.publicValue;const e=this.resolvedValues;const r=Math.min(this.allowedMax(s,e),Math.max(this.allowedMin(s,e),this.snap(i)));e[s]=r;const d=this.isRange?[...e]:e[0];if(this.valuesEqual(t,d))return false;this.value=d;this.dsChange.emit(this.cloneValue(d));return true}commitIfChanged(){const s=this.publicValue;if(this.valuesEqual(s,this.lastCommittedValue))return;this.lastCommittedValue=this.cloneValue(s);this.dsCommit.emit(this.cloneValue(s))}syncNativeLabels(){if(this.label||this.ariaLabel||this.ariaLabelledby||this.isRange)return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-slider-label-${++m}`;return s.id}));if(s.length)this.externalLabelledby=s.join(" ")}formattedValue(s,i){const t=this.valueTexts[i]??this.valueText;if(t)return t;let e;try{e=new Intl.NumberFormat(this.locale,this.formatOptions).format(s)}catch{e=String(s)}return`${this.valuePrefix}${e}${this.valueSuffix}`}ariaValueText(s,i){if(this.valueTexts[i]||this.valueText||this.valuePrefix||this.valueSuffix||this.formatOptions){return this.formattedValue(s,i)}return undefined}pointerPercent(s){const i=this.controlEl;if(!i)return 0;const t=i.getBoundingClientRect();const e=this.el.querySelector(".slider__thumb");const r=e?this.orientation==="horizontal"?e.offsetWidth:e.offsetHeight:0;const d=r/2;if(this.orientation==="vertical"){const i=Math.max(1,t.height-d*2);return Math.min(1,Math.max(0,(t.bottom-d-s.clientY)/i))}const a=Math.max(1,t.width-d*2);const l=(s.clientX-t.left-d)/a;return Math.min(1,Math.max(0,l))}valueFromPointer(s){return this.snap(this.safeMin+this.pointerPercent(s)*(this.safeMax-this.safeMin))}closestThumbIndex(s,t){const e=t instanceof i?t.closest(".slider__thumb"):null;if(e?.dataset["index"])return Number(e.dataset["index"]);if(!this.isRange)return 0;const r=this.resolvedValues;const d=Math.abs(s-r[0]);const a=Math.abs(s-r[1]);if(d===a)return s>=r[0]?1:0;return d<a?0:1}endPointerInteraction(s,i){if(this.pointerId!==s.pointerId)return;if(this.controlEl?.hasPointerCapture(s.pointerId))this.controlEl.releasePointerCapture(s.pointerId);this.pointerId=null;this.dragging=false;this.touched=true;if(!i&&!this.valuesEqual(this.pointerStartValue,this.publicValue))this.commitIfChanged()}renderThumb(s,i){const t=i===0?this.inputId??`${this.generatedId}-input`:`${this.inputId??`${this.generatedId}-input`}-end`;const r=i===0?this.startLabel:this.endLabel;const d=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const a=this.isRange?r:d?undefined:this.ariaLabel;return e("div",{class:{slider__thumb:true,"slider__thumb--active":i===this.activeThumbIndex},"data-index":String(i),style:{"--ds-slider-thumb-pct":String(this.percent(s))}},e("input",{class:"slider__input",type:"range",id:t,min:this.allowedMin(i),max:this.allowedMax(i),step:this.safeStep,value:s,disabled:this.isDisabled,"aria-label":a,"aria-labelledby":d,"aria-describedby":this.ariaDescribedby,"aria-valuetext":this.ariaValueText(s,i),"aria-orientation":this.orientation==="vertical"?"vertical":undefined,"aria-readonly":this.readOnly?"true":undefined,onInput:s=>this.handleNativeInput(s,i),onChange:this.handleNativeChange,onKeyDown:this.handleKeyDown,onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur}),e("span",{class:"slider__thumb-visual","aria-hidden":"true"},e("span",{class:"slider__thumb-wash"})))}render(){const s=this.resolvedValues;const i=s[0];const t=s[s.length-1];const d=this.inputId??`${this.generatedId}-input`;const a=!this.valuesEqual(this.publicValue,this.initialValue);const l=s.map(((s,i)=>this.formattedValue(s,i))).join(` ${this.rangeSeparator} `);return e(r,{key:"67d24f0eee3dc33c026ba57d0263418b398d049c","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,"ds-field-stack":true,[`slider--${this.size}`]:true,[`slider--${this.orientation}`]:true,[`slider--thumb-${this.thumbAlignment}`]:true,"slider--range":this.isRange,"slider--readonly":this.readOnly,"ds-control-inactive":this.isDisabled},"data-orientation":this.orientation,"data-disabled":this.isDisabled?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-dragging":this.dragging?"":undefined,"data-focused":this.focused?"":undefined,"data-filled":"","data-dirty":a?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"02b48c25f4d7f9d29728598e75c7804e4f71a49a",class:"slider__label-row"},this.label&&e("ds-text",{key:"c3d1bfc62b4df761bbc2189ea395e4fd227a15cf",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:d,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"6b693fae0d5918fc170bbd366a78f321f4eb77b3",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},l)),e("div",{key:"22d80b404662db893338081a5ee546d4b8de3a0b",class:"slider__control",ref:s=>{this.controlEl=s??null},style:{"--ds-slider-start-pct":String(this.isRange?this.percent(i):0),"--ds-slider-end-pct":String(this.percent(t))},onPointerDown:this.handlePointerDown,onPointerMove:this.handlePointerMove,onPointerUp:s=>this.endPointerInteraction(s,false),onPointerCancel:s=>this.endPointerInteraction(s,true)},e("div",{key:"679b3f18e2dd0efdc4797cc1fe767b28f6653ede",class:"slider__rail","aria-hidden":"true"},e("div",{key:"cc60e38964b6da337846eeb79e32c9de4bc68d79",class:"slider__indicator"})),s.map(((s,i)=>this.renderThumb(s,i)))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}}static get style(){return h()}},[66,"ds-slider",{value:[1026],min:[2],max:[2],step:[2],minStepsBetweenValues:[2,"min-steps-between-values"],label:[1],showValue:[4,"show-value"],size:[1],orientation:[1],thumbAlignment:[1,"thumb-alignment"],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],startLabel:[1,"start-label"],endLabel:[1,"end-label"],valueText:[1,"value-text"],valueTexts:[16],locale:[1],formatOptions:[16],valuePrefix:[1,"value-prefix"],valueSuffix:[1,"value-suffix"],rangeSeparator:[1,"range-separator"],inputId:[1,"input-id"],formDisabled:[32],dragging:[32],focused:[32],touched:[32],activeThumbIndex:[32],externalLabelledby:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(d(s))){customElements.define(d(s),b)}break;case"ds-text":if(!customElements.get(d(s))){a()}break}}))}f();const v=b;const p=f;export{v as DsSlider,p as defineCustomElement};
+import{p as s,H as i,c as t,h as e,a as r,t as d}from"./index.js";import{d as a}from"./p-BGXqFq2C.js";import{a as l,s as o,c as n,r as c}from"./p-B8q-6a03.js";const h=()=>`@media (forced-colors: active){.sc-ds-slider:root,.sc-ds-slider-h,.ds-forced-colors-scope.sc-ds-slider{--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-slider-h,.ds-control-inactive.sc-ds-slider{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{color:var(--ds-forced-color-disabled);opacity:1}}.ds-field-stack.sc-ds-slider-h,.ds-field-stack.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050)}@media (forced-colors: active){.sc-ds-slider:root,.sc-ds-slider-h,.ds-forced-colors-scope.sc-ds-slider{--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-slider-h{--ds-slider-control-size:var(--dimension-size-400);--ds-slider-thumb-size:var(--dimension-size-200);--ds-slider-track-size:var(--dimension-size-100);--ds-slider-track-stroke:var(--dimension-stroke-width-012);--ds-slider-vertical-length:calc(var(--dimension-size-800) * 3);box-sizing:border-box;width:100%;color:var(--color-foreground-primary)}.slider--sm.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-300);--ds-slider-thumb-size:var(--dimension-size-150);--ds-slider-track-size:var(--dimension-size-075)}.slider--xs.sc-ds-slider-h{--ds-slider-control-size:var(--dimension-size-200);--ds-slider-thumb-size:var(--dimension-size-100);--ds-slider-track-size:var(--dimension-size-050)}.slider--vertical.sc-ds-slider-h{width:fit-content;min-width:var(--dimension-form-width-xs)}.slider__label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-100);min-width:0}.slider__label.sc-ds-slider{min-width:0}.slider__value.sc-ds-slider{flex-shrink:0}.slider__control.sc-ds-slider{position:relative;width:100%;height:var(--ds-slider-control-size);border-radius:var(--dimension-radius-half);cursor:default;touch-action:none;user-select:none}.slider--vertical.sc-ds-slider-h .slider__control.sc-ds-slider{align-self:center;width:var(--ds-slider-control-size);height:var(--ds-slider-vertical-length)}.slider--readonly.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:default}.ds-control-inactive.sc-ds-slider-h .slider__control.sc-ds-slider{cursor:not-allowed}.slider__rail.sc-ds-slider{position:absolute;top:50%;right:0;left:0;height:var(--ds-slider-track-size);overflow:hidden;border-radius:var(--dimension-radius-025);background-color:transparent;box-shadow:inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);transform:translateY(-50%);pointer-events:none}.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{right:calc(var(--ds-slider-thumb-size) / 2);left:calc(var(--ds-slider-thumb-size) / 2)}.slider__indicator.sc-ds-slider{position:absolute;top:0;bottom:0;left:0;width:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );border-radius:inherit;background-color:var(--color-background-bold-brand)}.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );width:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{left:calc(var(--ds-slider-start-pct, 0) * 1%);width:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider__thumb.sc-ds-slider{position:absolute;top:50%;left:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));width:var(--ds-slider-thumb-size);height:var(--ds-slider-thumb-size);transform:translateY(-50%);z-index:1}.slider__thumb--active.sc-ds-slider{z-index:2}.slider__input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;appearance:none;pointer-events:none;z-index:2}.slider__thumb-visual.sc-ds-slider{position:absolute;inset:0;box-sizing:border-box;overflow:visible;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);pointer-events:none;transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.slider__thumb-wash.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:background-color var(--effect-motion-short-2)}@media (hover: hover) and (pointer: fine){.sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb.sc-ds-slider:hover .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-hover)}}[data-dragging].sc-ds-slider-h:not(.slider--readonly):not(.ds-control-inactive) .slider__thumb--active.sc-ds-slider .slider__thumb-wash.sc-ds-slider{background-color:var(--color-interaction-pressed)}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.slider--vertical.sc-ds-slider-h .slider__rail.sc-ds-slider{top:0;right:auto;bottom:0;left:50%;width:var(--ds-slider-track-size);height:auto;transform:translateX(-50%)}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__rail.sc-ds-slider{top:calc(var(--ds-slider-thumb-size) / 2);bottom:calc(var(--ds-slider-thumb-size) / 2)}.slider--vertical.sc-ds-slider-h .slider__indicator.sc-ds-slider{top:auto;right:0;bottom:0;left:0;width:auto;height:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--range.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(     var(--ds-slider-thumb-size) / 2 +       (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))   );height:calc(     ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *       (100% - var(--ds-slider-thumb-size))   )}.slider--vertical.slider--thumb-center.sc-ds-slider-h .slider__indicator.sc-ds-slider{bottom:calc(var(--ds-slider-start-pct, 0) * 1%);height:calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%)}.slider--vertical.sc-ds-slider-h .slider__thumb.sc-ds-slider{top:auto;bottom:calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));left:50%;transform:translateX(-50%)}@media (prefers-reduced-motion: reduce){.slider__thumb-visual.sc-ds-slider,.slider__thumb-wash.sc-ds-slider{transition:none}}@media (forced-colors: active){.slider__rail.sc-ds-slider{border:var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);box-shadow:none}.slider__indicator.sc-ds-slider{background-color:var(--ds-forced-color-selected)}.slider__thumb-visual.sc-ds-slider{border:var(--dimension-stroke-width-012) solid       var(--ds-forced-color-control-boundary);background-color:var(--ds-forced-color-surface);box-shadow:none}.slider__input.sc-ds-slider:focus-visible+.slider__thumb-visual.sc-ds-slider,[data-review-focus].sc-ds-slider-h .slider__thumb[data-index='0'].sc-ds-slider .slider__thumb-visual.sc-ds-slider{outline-color:var(--ds-forced-color-selected)}}`;let u=0;let m=0;const b=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.dsCommit=t(this,"dsCommit",7);this.internals=this.attachInternals();this.value=0;this.min=0;this.max=100;this.step=1;this.minStepsBetweenValues=0;this.showValue=true;this.size="md";this.orientation="horizontal";this.thumbAlignment="edge";this.disabled=false;this.readOnly=false;this.isInactive=false;this.ariaLabel=null;this.startLabel="Minimum value";this.endLabel="Maximum value";this.valueTexts=[];this.valuePrefix="";this.valueSuffix="";this.rangeSeparator="–";this.formDisabled=false;this.dragging=false;this.focused=false;this.touched=false;this.activeThumbIndex=0;this.generatedId=`ds-slider-${++u}`;this.labelId=`${this.generatedId}-label`;this.initialValue=0;this.lastCommittedValue=0;this.pointerId=null;this.pointerStartValue=0;this.controlEl=null;this.handleNativeInput=(s,i)=>{const t=s.target;this.activeThumbIndex=i;if(this.readOnly||this.isDisabled){t.value=String(this.resolvedValues[i]);return}this.setValueAt(i,Number(t.value))};this.handleNativeChange=()=>{if(!this.readOnly&&!this.isDisabled)this.commitIfChanged()};this.handleKeyDown=s=>{if(!this.readOnly)return;if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End","PageUp","PageDown"].includes(s.key)){s.preventDefault()}};this.handleFocus=s=>{this.activeThumbIndex=s;this.focused=true};this.handleBlur=s=>{const i=s.relatedTarget;if(i instanceof Node&&this.el.contains(i))return;this.focused=false;this.touched=true};this.handleHostClick=s=>{if(s.target!==this.el||this.isDisabled)return;const i=this.el.querySelectorAll(".slider__input");i[Math.min(this.activeThumbIndex,i.length-1)]?.focus()};this.handlePointerDown=s=>{if(s.button!==0||this.isDisabled||this.readOnly)return;s.preventDefault();const i=this.valueFromPointer(s);const t=this.closestThumbIndex(i,s.target);this.activeThumbIndex=t;this.pointerId=s.pointerId;this.pointerStartValue=this.cloneValue(this.publicValue);this.dragging=true;this.setValueAt(t,i);this.controlEl?.setPointerCapture(s.pointerId);requestAnimationFrame((()=>this.el.querySelectorAll(".slider__input")[t]?.focus({preventScroll:true})))};this.handlePointerMove=s=>{if(this.pointerId!==s.pointerId||!this.dragging)return;s.preventDefault();this.setValueAt(this.activeThumbIndex,this.valueFromPointer(s))}}componentWillLoad(){this.initialValue=this.cloneValue(this.publicValue);this.lastCommittedValue=this.cloneValue(this.publicValue);this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.resolvedValues;if(this.isRange){l(this.internals,this.name,s,{inactive:this.isDisabled})}else{const i=String(s[0]);o(this.internals,this.name?i:null,{inactive:this.isDisabled,state:i})}}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.value=this.cloneValue(this.initialValue);this.lastCommittedValue=this.cloneValue(this.initialValue);this.dragging=false;this.focused=false;this.touched=false}formStateRestoreCallback(s){if(this.isRange){const i=n(s,2);this.value=i.length?i:this.cloneValue(this.initialValue)}else{const i=Number(c(s,"NaN"));if(Number.isFinite(i))this.value=i}this.lastCommittedValue=this.cloneValue(this.publicValue)}async setFocus(s=0){const i=this.el.querySelectorAll(".slider__input");i[Math.max(0,Math.min(s,i.length-1))]?.focus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}get isRange(){return Array.isArray(this.value)}get safeStep(){return Number.isFinite(this.step)&&this.step>0?this.step:1}get safeMin(){return Number.isFinite(this.min)?this.min:0}get safeMax(){const s=this.safeMin;return Number.isFinite(this.max)&&this.max>s?this.max:s+this.safeStep}get minimumGap(){const s=Number.isFinite(this.minStepsBetweenValues)?Math.max(0,Math.floor(this.minStepsBetweenValues)):0;return s*this.safeStep}get resolvedValues(){const s=this.safeMin;const i=this.safeMax;if(!this.isRange)return[this.snap(Number(this.value))];const t=this.value;let e=this.snap(Number(t[0]??s));let r=this.snap(Number(t[1]??i));if(e>r)[e,r]=[r,e];const d=Math.min(this.minimumGap,i-s);if(r-e<d){r=Math.min(i,this.snap(e+d));e=Math.max(s,this.snap(r-d))}return[e,r]}get publicValue(){const s=this.resolvedValues;return this.isRange?[...s]:s[0]}cloneValue(s){return Array.isArray(s)?[...s]:s}valuesEqual(s,i){if(Array.isArray(s)&&Array.isArray(i)){return s.length===i.length&&s.every(((s,t)=>s===i[t]))}return!Array.isArray(s)&&!Array.isArray(i)&&s===i}decimalPlaces(s){const i=String(s).toLowerCase();if(i.includes("e-"))return Number(i.split("e-")[1])||0;return i.includes(".")?i.split(".")[1].length:0}snap(s){const i=this.safeMin;const t=this.safeMax;const e=Number.isFinite(s)?s:i;const r=i+Math.round((e-i)/this.safeStep)*this.safeStep;const d=Math.min(10,Math.max(this.decimalPlaces(i),this.decimalPlaces(t),this.decimalPlaces(this.safeStep)));return Number(Math.min(t,Math.max(i,r)).toFixed(d))}percent(s){return(s-this.safeMin)/(this.safeMax-this.safeMin)*100}allowedMin(s,i=this.resolvedValues){return this.isRange&&s===1?Math.min(this.safeMax,i[0]+this.minimumGap):this.safeMin}allowedMax(s,i=this.resolvedValues){return this.isRange&&s===0?Math.max(this.safeMin,i[1]-this.minimumGap):this.safeMax}setValueAt(s,i){const t=this.publicValue;const e=this.resolvedValues;const r=Math.min(this.allowedMax(s,e),Math.max(this.allowedMin(s,e),this.snap(i)));e[s]=r;const d=this.isRange?[...e]:e[0];if(this.valuesEqual(t,d))return false;this.value=d;this.dsChange.emit(this.cloneValue(d));return true}commitIfChanged(){const s=this.publicValue;if(this.valuesEqual(s,this.lastCommittedValue))return;this.lastCommittedValue=this.cloneValue(s);this.dsCommit.emit(this.cloneValue(s))}syncNativeLabels(){if(this.label||this.ariaLabel||this.ariaLabelledby||this.isRange)return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-slider-label-${++m}`;return s.id}));if(s.length)this.externalLabelledby=s.join(" ")}formattedValue(s,i){const t=this.valueTexts[i]??this.valueText;if(t)return t;let e;try{e=new Intl.NumberFormat(this.locale,this.formatOptions).format(s)}catch{e=String(s)}return`${this.valuePrefix}${e}${this.valueSuffix}`}ariaValueText(s,i){if(this.valueTexts[i]||this.valueText||this.valuePrefix||this.valueSuffix||this.formatOptions){return this.formattedValue(s,i)}return undefined}pointerPercent(s){const i=this.controlEl;if(!i)return 0;const t=i.getBoundingClientRect();const e=this.el.querySelector(".slider__thumb");const r=e?this.orientation==="horizontal"?e.offsetWidth:e.offsetHeight:0;const d=r/2;if(this.orientation==="vertical"){const i=Math.max(1,t.height-d*2);return Math.min(1,Math.max(0,(t.bottom-d-s.clientY)/i))}const a=Math.max(1,t.width-d*2);const l=(s.clientX-t.left-d)/a;return Math.min(1,Math.max(0,l))}valueFromPointer(s){return this.snap(this.safeMin+this.pointerPercent(s)*(this.safeMax-this.safeMin))}closestThumbIndex(s,t){const e=t instanceof i?t.closest(".slider__thumb"):null;if(e?.dataset["index"])return Number(e.dataset["index"]);if(!this.isRange)return 0;const r=this.resolvedValues;const d=Math.abs(s-r[0]);const a=Math.abs(s-r[1]);if(d===a)return s>=r[0]?1:0;return d<a?0:1}endPointerInteraction(s,i){if(this.pointerId!==s.pointerId)return;if(this.controlEl?.hasPointerCapture(s.pointerId))this.controlEl.releasePointerCapture(s.pointerId);this.pointerId=null;this.dragging=false;this.touched=true;if(!i&&!this.valuesEqual(this.pointerStartValue,this.publicValue))this.commitIfChanged()}renderThumb(s,i){const t=i===0?this.inputId??`${this.generatedId}-input`:`${this.inputId??`${this.generatedId}-input`}-end`;const r=i===0?this.startLabel:this.endLabel;const d=this.isRange?undefined:this.ariaLabelledby??(this.label?this.labelId:this.externalLabelledby);const a=this.isRange?r:d?undefined:this.ariaLabel;return e("div",{class:{slider__thumb:true,"slider__thumb--active":i===this.activeThumbIndex},"data-index":String(i),style:{"--ds-slider-thumb-pct":String(this.percent(s))}},e("input",{class:"slider__input",type:"range",id:t,min:this.allowedMin(i),max:this.allowedMax(i),step:this.safeStep,value:s,disabled:this.isDisabled,"aria-label":a,"aria-labelledby":d,"aria-describedby":this.ariaDescribedby,"aria-valuetext":this.ariaValueText(s,i),"aria-orientation":this.orientation==="vertical"?"vertical":undefined,"aria-readonly":this.readOnly?"true":undefined,onInput:s=>this.handleNativeInput(s,i),onChange:this.handleNativeChange,onKeyDown:this.handleKeyDown,onFocus:()=>this.handleFocus(i),onBlur:this.handleBlur}),e("span",{class:"slider__thumb-visual","aria-hidden":"true"},e("span",{class:"slider__thumb-wash"})))}render(){const s=this.resolvedValues;const i=s[0];const t=s[s.length-1];const d=this.inputId??`${this.generatedId}-input`;const a=!this.valuesEqual(this.publicValue,this.initialValue);const l=s.map(((s,i)=>this.formattedValue(s,i))).join(` ${this.rangeSeparator} `);return e(r,{key:"6bb9c7b9c87f06cfe0b3a881f2a3e70dbbc3ab04","aria-disabled":this.isDisabled?"true":undefined,class:{slider:true,"ds-field-stack":true,[`slider--${this.size}`]:true,[`slider--${this.orientation}`]:true,[`slider--thumb-${this.thumbAlignment}`]:true,"slider--range":this.isRange,"slider--readonly":this.readOnly,"ds-control-inactive":this.isDisabled},"data-orientation":this.orientation,"data-disabled":this.isDisabled?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-dragging":this.dragging?"":undefined,"data-focused":this.focused?"":undefined,"data-filled":"","data-dirty":a?"":undefined,"data-touched":this.touched?"":undefined,"data-valid":!this.isDisabled?"":undefined,onClick:this.handleHostClick},(this.label||this.showValue)&&e("div",{key:"db85acf919c22de70050c67db38cdf8d37e499b6",class:"slider__label-row"},this.label&&e("ds-text",{key:"d1686ec3d8ffc65a93803f03bd3885a519fe01fb",class:"slider__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:d,textId:this.labelId},this.label),this.showValue&&e("ds-text",{key:"aebe4a222fae23d0e1e4198c7749400f28371982",class:"slider__value",as:"span",variant:"text-body-small",color:"primary",fontFeature:"tabular-nums"},l)),e("div",{key:"9a526c9a9fc2b1ccdac3368fd022ecf3ee6e757d",class:"slider__control",ref:s=>{this.controlEl=s??null},style:{"--ds-slider-start-pct":String(this.isRange?this.percent(i):0),"--ds-slider-end-pct":String(this.percent(t))},onPointerDown:this.handlePointerDown,onPointerMove:this.handlePointerMove,onPointerUp:s=>this.endPointerInteraction(s,false),onPointerCancel:s=>this.endPointerInteraction(s,true)},e("div",{key:"3e45467608660e717ba64344a712e6fd37d21d94",class:"slider__rail","aria-hidden":"true"},e("div",{key:"10e8b355380d0fc47e4c7a0333cb21333d1fb3dd",class:"slider__indicator"})),s.map(((s,i)=>this.renderThumb(s,i)))))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}}static get style(){return h()}},[66,"ds-slider",{value:[1026],min:[2],max:[2],step:[2],minStepsBetweenValues:[2,"min-steps-between-values"],label:[1],showValue:[4,"show-value"],size:[1],orientation:[1],thumbAlignment:[1,"thumb-alignment"],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],startLabel:[1,"start-label"],endLabel:[1,"end-label"],valueText:[1,"value-text"],valueTexts:[16],locale:[1],formatOptions:[16],valuePrefix:[1,"value-prefix"],valueSuffix:[1,"value-suffix"],rangeSeparator:[1,"range-separator"],inputId:[1,"input-id"],formDisabled:[32],dragging:[32],focused:[32],touched:[32],activeThumbIndex:[32],externalLabelledby:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],min:[{syncFormValue:0}],max:[{syncFormValue:0}],step:[{syncFormValue:0}],minStepsBetweenValues:[{syncFormValue:0}],name:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-slider","ds-text"];s.forEach((s=>{switch(s){case"ds-slider":if(!customElements.get(d(s))){customElements.define(d(s),b)}break;case"ds-text":if(!customElements.get(d(s))){a()}break}}))}f();const v=b;const p=f;export{v as DsSlider,p as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","isRange","setRepeatedFormControlValue","internals","name","inactive","setFormControlValue","state","formDisabledCallback","formResetCallback","formStateRestoreCallback","restored","restoreNumberArrayFormState","restoreStringFormState","isFinite","setFocus","Array","isArray","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","map","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  box-sizing: border-box;\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:not(.slider--readonly):not(.ds-control-inactive))\n    .slider__thumb:hover\n    .slider__thumb-wash {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .slider__rail {\n    border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .slider__indicator {\n    background-color: var(--ds-forced-color-selected);\n  }\n\n  .slider__thumb-visual {\n    border:\n      var(--dimension-stroke-width-012) solid\n      var(--ds-forced-color-control-boundary);\n    background-color: var(--ds-forced-color-surface);\n    box-shadow: none;\n  }\n\n  .slider__input:focus-visible + .slider__thumb-visual,\n  :host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n    outline-color: var(--ds-forced-color-selected);\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  restoreNumberArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n} from '../../utils';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isRange) {\n      setRepeatedFormControlValue(this.internals, this.name, values, {\n        inactive: this.isDisabled,\n      });\n    } else {\n      const value = String(values[0]);\n      setFormControlValue(this.internals, this.name ? value : null, {\n        inactive: this.isDisabled,\n        state: value,\n      });\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (this.isRange) {\n      const restored = restoreNumberArrayFormState(state, 2);\n      this.value = restored.length\n        ? restored\n        : this.cloneValue(this.initialValue);\n    } else {\n      const restored = Number(restoreStringFormState(state, 'NaN'));\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          'ds-field-stack': true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["sliderCss","sliderId","sliderExternalLabelId","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","min","max","step","minStepsBetweenValues","showValue","size","orientation","thumbAlignment","disabled","readOnly","isInactive","ariaLabel","startLabel","endLabel","valueTexts","valuePrefix","valueSuffix","rangeSeparator","formDisabled","dragging","focused","touched","activeThumbIndex","generatedId","labelId","initialValue","lastCommittedValue","pointerId","pointerStartValue","controlEl","handleNativeInput","event","index","input","target","isDisabled","String","resolvedValues","setValueAt","Number","handleNativeChange","commitIfChanged","handleKeyDown","includes","key","preventDefault","handleFocus","handleBlur","next","relatedTarget","Node","el","contains","handleHostClick","inputs","querySelectorAll","Math","length","focus","handlePointerDown","button","valueFromPointer","closestThumbIndex","cloneValue","publicValue","setPointerCapture","requestAnimationFrame","preventScroll","handlePointerMove","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","values","isRange","setRepeatedFormControlValue","internals","name","inactive","setFormControlValue","state","formDisabledCallback","formResetCallback","formStateRestoreCallback","restored","restoreNumberArrayFormState","restoreStringFormState","isFinite","setFocus","Array","isArray","safeStep","safeMin","safeMax","minimum","minimumGap","steps","floor","maximum","snap","raw","lower","upper","gap","valuesEqual","a","b","every","decimalPlaces","text","toLowerCase","split","candidate","stepped","round","precision","toFixed","percent","allowedMin","allowedMax","previous","constrained","nextValue","dsChange","emit","current","dsCommit","label","ariaLabelledby","ids","from","labels","map","id","externalLabelledby","join","formattedValue","authored","valueText","number","Intl","NumberFormat","locale","formatOptions","format","ariaValueText","undefined","pointerPercent","control","rect","getBoundingClientRect","thumb","querySelector","thumbSize","offsetWidth","offsetHeight","inset","travel","height","bottom","clientY","width","clientX","left","targetElement","closest","dataset","lowerDistance","abs","upperDistance","endPointerInteraction","canceled","hasPointerCapture","releasePointerCapture","renderThumb","inputId","rangeLabel","labelledby","directLabel","h","class","slider__thumb","style","type","ariaDescribedby","onInput","onChange","onKeyDown","onFocus","onBlur","render","first","last","firstInputId","dirty","valueDisplay","Host","slider","onClick","as","variant","color","emphasis","for","textId","fontFeature","ref","element","onPointerDown","onPointerMove","onPointerUp","onPointerCancel"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  --ds-slider-control-size: var(--dimension-size-400);\n  --ds-slider-thumb-size: var(--dimension-size-200);\n  --ds-slider-track-size: var(--dimension-size-100);\n  --ds-slider-track-stroke: var(--dimension-stroke-width-012);\n  --ds-slider-vertical-length: calc(var(--dimension-size-800) * 3);\n  box-sizing: border-box;\n  width: 100%;\n  color: var(--color-foreground-primary);\n}\n\n:host(.slider--sm) {\n  --ds-slider-control-size: var(--dimension-size-300);\n  --ds-slider-thumb-size: var(--dimension-size-150);\n  --ds-slider-track-size: var(--dimension-size-075);\n}\n\n:host(.slider--xs) {\n  --ds-slider-control-size: var(--dimension-size-200);\n  --ds-slider-thumb-size: var(--dimension-size-100);\n  --ds-slider-track-size: var(--dimension-size-050);\n}\n\n:host(.slider--vertical) {\n  width: fit-content;\n  min-width: var(--dimension-form-width-xs);\n}\n\n.slider__label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.slider__label {\n  min-width: 0;\n}\n\n.slider__value {\n  flex-shrink: 0;\n}\n\n.slider__control {\n  position: relative;\n  width: 100%;\n  height: var(--ds-slider-control-size);\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  touch-action: none;\n  user-select: none;\n}\n\n:host(.slider--vertical) .slider__control {\n  align-self: center;\n  width: var(--ds-slider-control-size);\n  height: var(--ds-slider-vertical-length);\n}\n\n:host(.slider--readonly) .slider__control {\n  cursor: default;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) on the host. */\n:host(.ds-control-inactive) .slider__control {\n  cursor: not-allowed;\n}\n\n.slider__rail {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  height: var(--ds-slider-track-size);\n  overflow: hidden;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-slider-track-stroke) var(--color-border-secondary);\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n:host(.slider--thumb-center) .slider__rail {\n  right: calc(var(--ds-slider-thumb-size) / 2);\n  left: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n.slider__indicator {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  border-radius: inherit;\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.slider--range) .slider__indicator {\n  left: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  width: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--thumb-center) .slider__indicator {\n  left: calc(var(--ds-slider-start-pct, 0) * 1%);\n  width: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n.slider__thumb {\n  position: absolute;\n  top: 50%;\n  left: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  width: var(--ds-slider-thumb-size);\n  height: var(--ds-slider-thumb-size);\n  transform: translateY(-50%);\n  z-index: 1;\n}\n\n.slider__thumb--active {\n  z-index: 2;\n}\n\n.slider__input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: 0;\n  opacity: 0;\n  appearance: none;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.slider__thumb-visual {\n  position: absolute;\n  inset: 0;\n  box-sizing: border-box;\n  overflow: visible;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  pointer-events: none;\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.slider__thumb-wash {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  :host(:not(.slider--readonly):not(.ds-control-inactive))\n    .slider__thumb:hover\n    .slider__thumb-wash {\n    background-color: var(--color-interaction-hover);\n  }\n}\n\n:host([data-dragging]:not(.slider--readonly):not(.ds-control-inactive))\n  .slider__thumb--active .slider__thumb-wash {\n  background-color: var(--color-interaction-pressed);\n}\n\n.slider__input:focus-visible + .slider__thumb-visual,\n:host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.slider--vertical) .slider__rail {\n  top: 0;\n  right: auto;\n  bottom: 0;\n  left: 50%;\n  width: var(--ds-slider-track-size);\n  height: auto;\n  transform: translateX(-50%);\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__rail {\n  top: calc(var(--ds-slider-thumb-size) / 2);\n  bottom: calc(var(--ds-slider-thumb-size) / 2);\n}\n\n:host(.slider--vertical) .slider__indicator {\n  top: auto;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  width: auto;\n  height: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-end-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--range) .slider__indicator {\n  bottom: calc(\n    var(--ds-slider-thumb-size) / 2 +\n      (var(--ds-slider-start-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size))\n  );\n  height: calc(\n    ((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) / 100) *\n      (100% - var(--ds-slider-thumb-size))\n  );\n}\n\n:host(.slider--vertical.slider--thumb-center) .slider__indicator {\n  bottom: calc(var(--ds-slider-start-pct, 0) * 1%);\n  height: calc((var(--ds-slider-end-pct, 0) - var(--ds-slider-start-pct, 0)) * 1%);\n}\n\n:host(.slider--vertical) .slider__thumb {\n  top: auto;\n  bottom: calc((var(--ds-slider-thumb-pct, 0) / 100) * (100% - var(--ds-slider-thumb-size)));\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .slider__thumb-visual,\n  .slider__thumb-wash {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .slider__rail {\n    border: var(--ds-slider-track-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .slider__indicator {\n    background-color: var(--ds-forced-color-selected);\n  }\n\n  .slider__thumb-visual {\n    border:\n      var(--dimension-stroke-width-012) solid\n      var(--ds-forced-color-control-boundary);\n    background-color: var(--ds-forced-color-surface);\n    box-shadow: none;\n  }\n\n  .slider__input:focus-visible + .slider__thumb-visual,\n  :host([data-review-focus]) .slider__thumb[data-index='0'] .slider__thumb-visual {\n    outline-color: var(--ds-forced-color-selected);\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport {\n  restoreNumberArrayFormState,\n  restoreStringFormState,\n  setFormControlValue,\n  setRepeatedFormControlValue,\n} from '../../utils';\n\nexport type SliderValue = number | number[];\nexport type SliderSize = 'md' | 'sm' | 'xs';\nexport type SliderOrientation = 'horizontal' | 'vertical';\nexport type SliderThumbAlignment = 'edge' | 'center';\n\nlet sliderId = 0;\nlet sliderExternalLabelId = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Slider {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current value. Assign a two-number array through the JavaScript property for a range slider. */\n  @Prop({ mutable: true }) value: SliderValue = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  /** Minimum number of steps kept between two range thumbs. */\n  @Prop() minStepsBetweenValues: number = 0;\n  /** Visible field label. Supply aria-label when the label is intentionally hidden. */\n  @Prop() label: string | undefined;\n  /** Show the formatted current value beside the visible label. */\n  @Prop() showValue: boolean = true;\n  @Prop() size: SliderSize = 'md';\n  @Prop() orientation: SliderOrientation = 'horizontal';\n  /** Align the thumb edge with full-width rail endpoints, or its center with inset rail endpoints. */\n  @Prop() thumbAlignment: SliderThumbAlignment = 'edge';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keep the value focusable and submittable while preventing changes. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop() isInactive: boolean = false;\n  /** Direct accessible name for a single-thumb slider without a visible label. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  /** Id references for a visible single-thumb slider label. */\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  /** Id references for supporting guidance or error text. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n  /** Accessible label for the lower thumb in a range slider. */\n  @Prop() startLabel: string = 'Minimum value';\n  /** Accessible label for the upper thumb in a range slider. */\n  @Prop() endLabel: string = 'Maximum value';\n  /** Human-readable value text for a single slider or both range thumbs. */\n  @Prop() valueText: string | undefined;\n  /** Per-thumb human-readable value text for a range slider. Assign through the JavaScript property. */\n  @Prop() valueTexts: string[] = [];\n  /** Locale used by Intl.NumberFormat for the visible value. */\n  @Prop() locale: string | undefined;\n  /** Intl.NumberFormat options. Assign objects through the JavaScript property. */\n  @Prop() formatOptions: Intl.NumberFormatOptions | undefined;\n  @Prop() valuePrefix: string = '';\n  @Prop() valueSuffix: string = '';\n  @Prop() rangeSeparator: string = '–';\n  /** Id applied to the first native range input. */\n  @Prop() inputId: string | undefined;\n\n  /** Emitted continuously while the value changes. */\n  @Event() dsChange!: EventEmitter<SliderValue>;\n  /** Emitted when a pointer or keyboard value change is committed. */\n  @Event() dsCommit!: EventEmitter<SliderValue>;\n\n  @State() private formDisabled = false;\n  @State() private dragging = false;\n  @State() private focused = false;\n  @State() private touched = false;\n  @State() private activeThumbIndex = 0;\n  @State() private externalLabelledby: string | undefined;\n\n  private readonly generatedId = `ds-slider-${++sliderId}`;\n  private readonly labelId = `${this.generatedId}-label`;\n  private initialValue: SliderValue = 0;\n  private lastCommittedValue: SliderValue = 0;\n  private pointerId: number | null = null;\n  private pointerStartValue: SliderValue = 0;\n  private controlEl: HTMLDivElement | null = null;\n\n  componentWillLoad() {\n    this.initialValue = this.cloneValue(this.publicValue);\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('value')\n  @Watch('min')\n  @Watch('max')\n  @Watch('step')\n  @Watch('minStepsBetweenValues')\n  @Watch('name')\n  @Watch('disabled')\n  @Watch('isInactive')\n  syncFormValue() {\n    const values = this.resolvedValues;\n    if (this.isRange) {\n      setRepeatedFormControlValue(this.internals, this.name, values, {\n        inactive: this.isDisabled,\n      });\n    } else {\n      const value = String(values[0]);\n      setFormControlValue(this.internals, this.name ? value : null, {\n        inactive: this.isDisabled,\n        state: value,\n      });\n    }\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.cloneValue(this.initialValue);\n    this.lastCommittedValue = this.cloneValue(this.initialValue);\n    this.dragging = false;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    if (this.isRange) {\n      const restored = restoreNumberArrayFormState(state, 2);\n      this.value = restored.length\n        ? restored\n        : this.cloneValue(this.initialValue);\n    } else {\n      const restored = Number(restoreStringFormState(state, 'NaN'));\n      if (Number.isFinite(restored)) this.value = restored;\n    }\n    this.lastCommittedValue = this.cloneValue(this.publicValue);\n  }\n\n  @Method()\n  async setFocus(index: number = 0) {\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.max(0, Math.min(index, inputs.length - 1))]?.focus();\n  }\n\n  private get isDisabled(): boolean {\n    return this.disabled || this.isInactive || this.formDisabled;\n  }\n\n  private get isRange(): boolean {\n    return Array.isArray(this.value);\n  }\n\n  private get safeStep(): number {\n    return Number.isFinite(this.step) && this.step > 0 ? this.step : 1;\n  }\n\n  private get safeMin(): number {\n    return Number.isFinite(this.min) ? this.min : 0;\n  }\n\n  private get safeMax(): number {\n    const minimum = this.safeMin;\n    return Number.isFinite(this.max) && this.max > minimum ? this.max : minimum + this.safeStep;\n  }\n\n  private get minimumGap(): number {\n    const steps = Number.isFinite(this.minStepsBetweenValues)\n      ? Math.max(0, Math.floor(this.minStepsBetweenValues))\n      : 0;\n    return steps * this.safeStep;\n  }\n\n  private get resolvedValues(): number[] {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    if (!this.isRange) return [this.snap(Number(this.value))];\n\n    const raw = this.value as number[];\n    let lower = this.snap(Number(raw[0] ?? minimum));\n    let upper = this.snap(Number(raw[1] ?? maximum));\n    if (lower > upper) [lower, upper] = [upper, lower];\n\n    const gap = Math.min(this.minimumGap, maximum - minimum);\n    if (upper - lower < gap) {\n      upper = Math.min(maximum, this.snap(lower + gap));\n      lower = Math.max(minimum, this.snap(upper - gap));\n    }\n    return [lower, upper];\n  }\n\n  private get publicValue(): SliderValue {\n    const values = this.resolvedValues;\n    return this.isRange ? [...values] : values[0];\n  }\n\n  private cloneValue(value: SliderValue): SliderValue {\n    return Array.isArray(value) ? [...value] : value;\n  }\n\n  private valuesEqual(a: SliderValue, b: SliderValue): boolean {\n    if (Array.isArray(a) && Array.isArray(b)) {\n      return a.length === b.length && a.every((value, index) => value === b[index]);\n    }\n    return !Array.isArray(a) && !Array.isArray(b) && a === b;\n  }\n\n  private decimalPlaces(value: number): number {\n    const text = String(value).toLowerCase();\n    if (text.includes('e-')) return Number(text.split('e-')[1]) || 0;\n    return text.includes('.') ? text.split('.')[1].length : 0;\n  }\n\n  private snap(value: number): number {\n    const minimum = this.safeMin;\n    const maximum = this.safeMax;\n    const candidate = Number.isFinite(value) ? value : minimum;\n    const stepped = minimum + Math.round((candidate - minimum) / this.safeStep) * this.safeStep;\n    const precision = Math.min(10, Math.max(\n      this.decimalPlaces(minimum),\n      this.decimalPlaces(maximum),\n      this.decimalPlaces(this.safeStep),\n    ));\n    return Number(Math.min(maximum, Math.max(minimum, stepped)).toFixed(precision));\n  }\n\n  private percent(value: number): number {\n    return ((value - this.safeMin) / (this.safeMax - this.safeMin)) * 100;\n  }\n\n  private allowedMin(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 1\n      ? Math.min(this.safeMax, values[0] + this.minimumGap)\n      : this.safeMin;\n  }\n\n  private allowedMax(index: number, values = this.resolvedValues): number {\n    return this.isRange && index === 0\n      ? Math.max(this.safeMin, values[1] - this.minimumGap)\n      : this.safeMax;\n  }\n\n  private setValueAt(index: number, next: number): boolean {\n    const previous = this.publicValue;\n    const values = this.resolvedValues;\n    const constrained = Math.min(this.allowedMax(index, values), Math.max(this.allowedMin(index, values), this.snap(next)));\n    values[index] = constrained;\n    const nextValue: SliderValue = this.isRange ? [...values] : values[0];\n    if (this.valuesEqual(previous, nextValue)) return false;\n\n    this.value = nextValue;\n    this.dsChange.emit(this.cloneValue(nextValue));\n    return true;\n  }\n\n  private commitIfChanged() {\n    const current = this.publicValue;\n    if (this.valuesEqual(current, this.lastCommittedValue)) return;\n    this.lastCommittedValue = this.cloneValue(current);\n    this.dsCommit.emit(this.cloneValue(current));\n  }\n\n  private syncNativeLabels() {\n    if (this.label || this.ariaLabel || this.ariaLabelledby || this.isRange) return;\n    const ids = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-slider-label-${++sliderExternalLabelId}`;\n      return label.id;\n    });\n    if (ids.length) this.externalLabelledby = ids.join(' ');\n  }\n\n  private formattedValue(value: number, index: number): string {\n    const authored = this.valueTexts[index] ?? this.valueText;\n    if (authored) return authored;\n    let number: string;\n    try {\n      number = new Intl.NumberFormat(this.locale, this.formatOptions).format(value);\n    } catch {\n      number = String(value);\n    }\n    return `${this.valuePrefix}${number}${this.valueSuffix}`;\n  }\n\n  private ariaValueText(value: number, index: number): string | undefined {\n    if (this.valueTexts[index] || this.valueText || this.valuePrefix || this.valueSuffix || this.formatOptions) {\n      return this.formattedValue(value, index);\n    }\n    return undefined;\n  }\n\n  private handleNativeInput = (event: Event, index: number) => {\n    const input = event.target as HTMLInputElement;\n    this.activeThumbIndex = index;\n    if (this.readOnly || this.isDisabled) {\n      input.value = String(this.resolvedValues[index]);\n      return;\n    }\n    this.setValueAt(index, Number(input.value));\n  };\n\n  private handleNativeChange = () => {\n    if (!this.readOnly && !this.isDisabled) this.commitIfChanged();\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (!this.readOnly) return;\n    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private handleFocus = (index: number) => {\n    this.activeThumbIndex = index;\n    this.focused = true;\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    const next = event.relatedTarget;\n    if (next instanceof Node && this.el.contains(next)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleHostClick = (event: MouseEvent) => {\n    if (event.target !== this.el || this.isDisabled) return;\n    const inputs = this.el.querySelectorAll<HTMLInputElement>('.slider__input');\n    inputs[Math.min(this.activeThumbIndex, inputs.length - 1)]?.focus();\n  };\n\n  private pointerPercent(event: PointerEvent): number {\n    const control = this.controlEl;\n    if (!control) return 0;\n    const rect = control.getBoundingClientRect();\n    const thumb = this.el.querySelector<HTMLElement>('.slider__thumb');\n    const thumbSize = thumb\n      ? this.orientation === 'horizontal' ? thumb.offsetWidth : thumb.offsetHeight\n      : 0;\n    // Both alignment modes keep the complete thumb inside the control. Edge\n    // alignment lets the rail span the control while center alignment insets\n    // the rail to the same thumb-center travel.\n    const inset = thumbSize / 2;\n\n    if (this.orientation === 'vertical') {\n      const travel = Math.max(1, rect.height - inset * 2);\n      return Math.min(1, Math.max(0, (rect.bottom - inset - event.clientY) / travel));\n    }\n\n    const travel = Math.max(1, rect.width - inset * 2);\n    const percent = (event.clientX - rect.left - inset) / travel;\n    return Math.min(1, Math.max(0, percent));\n  }\n\n  private valueFromPointer(event: PointerEvent): number {\n    return this.snap(this.safeMin + this.pointerPercent(event) * (this.safeMax - this.safeMin));\n  }\n\n  private closestThumbIndex(value: number, target: EventTarget | null): number {\n    const targetElement = target instanceof HTMLElement\n      ? target.closest<HTMLElement>('.slider__thumb')\n      : null;\n    if (targetElement?.dataset['index']) return Number(targetElement.dataset['index']);\n    if (!this.isRange) return 0;\n\n    const values = this.resolvedValues;\n    const lowerDistance = Math.abs(value - values[0]);\n    const upperDistance = Math.abs(value - values[1]);\n    if (lowerDistance === upperDistance) return value >= values[0] ? 1 : 0;\n    return lowerDistance < upperDistance ? 0 : 1;\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    if (event.button !== 0 || this.isDisabled || this.readOnly) return;\n    event.preventDefault();\n    const value = this.valueFromPointer(event);\n    const index = this.closestThumbIndex(value, event.target);\n    this.activeThumbIndex = index;\n    this.pointerId = event.pointerId;\n    this.pointerStartValue = this.cloneValue(this.publicValue);\n    this.dragging = true;\n    this.setValueAt(index, value);\n    this.controlEl?.setPointerCapture(event.pointerId);\n    requestAnimationFrame(() => this.el.querySelectorAll<HTMLInputElement>('.slider__input')[index]?.focus({ preventScroll: true }));\n  };\n\n  private handlePointerMove = (event: PointerEvent) => {\n    if (this.pointerId !== event.pointerId || !this.dragging) return;\n    event.preventDefault();\n    this.setValueAt(this.activeThumbIndex, this.valueFromPointer(event));\n  };\n\n  private endPointerInteraction(event: PointerEvent, canceled: boolean) {\n    if (this.pointerId !== event.pointerId) return;\n    if (this.controlEl?.hasPointerCapture(event.pointerId)) this.controlEl.releasePointerCapture(event.pointerId);\n    this.pointerId = null;\n    this.dragging = false;\n    this.touched = true;\n    if (!canceled && !this.valuesEqual(this.pointerStartValue, this.publicValue)) this.commitIfChanged();\n  }\n\n  private renderThumb(value: number, index: number) {\n    const inputId = index === 0\n      ? this.inputId ?? `${this.generatedId}-input`\n      : `${this.inputId ?? `${this.generatedId}-input`}-end`;\n    const rangeLabel = index === 0 ? this.startLabel : this.endLabel;\n    const labelledby = this.isRange\n      ? undefined\n      : this.ariaLabelledby ?? (this.label ? this.labelId : this.externalLabelledby);\n    const directLabel = this.isRange ? rangeLabel : labelledby ? undefined : this.ariaLabel;\n\n    return (\n      <div\n        class={{\n          slider__thumb: true,\n          'slider__thumb--active': index === this.activeThumbIndex,\n        }}\n        data-index={String(index)}\n        style={{ '--ds-slider-thumb-pct': String(this.percent(value)) } as Record<string, string>}\n      >\n        <input\n          class=\"slider__input\"\n          type=\"range\"\n          id={inputId}\n          min={this.allowedMin(index)}\n          max={this.allowedMax(index)}\n          step={this.safeStep}\n          value={value}\n          disabled={this.isDisabled}\n          aria-label={directLabel}\n          aria-labelledby={labelledby}\n          aria-describedby={this.ariaDescribedby}\n          aria-valuetext={this.ariaValueText(value, index)}\n          aria-orientation={this.orientation === 'vertical' ? 'vertical' : undefined}\n          aria-readonly={this.readOnly ? 'true' : undefined}\n          onInput={(event: Event) => this.handleNativeInput(event, index)}\n          onChange={this.handleNativeChange}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => this.handleFocus(index)}\n          onBlur={this.handleBlur}\n        />\n        <span class=\"slider__thumb-visual\" aria-hidden=\"true\"><span class=\"slider__thumb-wash\" /></span>\n      </div>\n    );\n  }\n\n  render() {\n    const values = this.resolvedValues;\n    const first = values[0];\n    const last = values[values.length - 1];\n    const firstInputId = this.inputId ?? `${this.generatedId}-input`;\n    const dirty = !this.valuesEqual(this.publicValue, this.initialValue);\n    const valueDisplay = values.map((value, index) => this.formattedValue(value, index)).join(` ${this.rangeSeparator} `);\n\n    return (\n      <Host\n        aria-disabled={this.isDisabled ? 'true' : undefined}\n        class={{\n          slider: true,\n          'ds-field-stack': true,\n          [`slider--${this.size}`]: true,\n          [`slider--${this.orientation}`]: true,\n          [`slider--thumb-${this.thumbAlignment}`]: true,\n          'slider--range': this.isRange,\n          'slider--readonly': this.readOnly,\n          'ds-control-inactive': this.isDisabled,\n        }}\n        data-orientation={this.orientation}\n        data-disabled={this.isDisabled ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-dragging={this.dragging ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-filled=\"\"\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-valid={!this.isDisabled ? '' : undefined}\n        onClick={this.handleHostClick}\n      >\n        {(this.label || this.showValue) && (\n          <div class=\"slider__label-row\">\n            {this.label && (\n              <ds-text\n                class=\"slider__label\"\n                as=\"label\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                emphasis\n                for={firstInputId}\n                textId={this.labelId}\n              >\n                {this.label}\n              </ds-text>\n            )}\n            {this.showValue && (\n              <ds-text\n                class=\"slider__value\"\n                as=\"span\"\n                variant=\"text-body-small\"\n                color=\"primary\"\n                fontFeature=\"tabular-nums\"\n              >\n                {valueDisplay}\n              </ds-text>\n            )}\n          </div>\n        )}\n        <div\n          class=\"slider__control\"\n          ref={element => { this.controlEl = element ?? null; }}\n          style={{\n            '--ds-slider-start-pct': String(this.isRange ? this.percent(first) : 0),\n            '--ds-slider-end-pct': String(this.percent(last)),\n          } as Record<string, string>}\n          onPointerDown={this.handlePointerDown}\n          onPointerMove={this.handlePointerMove}\n          onPointerUp={(event: PointerEvent) => this.endPointerInteraction(event, false)}\n          onPointerCancel={(event: PointerEvent) => this.endPointerInteraction(event, true)}\n        >\n          <div class=\"slider__rail\" aria-hidden=\"true\"><div class=\"slider__indicator\" /></div>\n          {values.map((value, index) => this.renderThumb(value, index))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-swatch-picker.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-Rfpd5mWO.js";const p=o;const t=s;export{p as DsSwatchPicker,t as defineCustomElement};
+import{S as o,d as s}from"./p-BHDkJmrC.js";const r=o;const t=s;export{r as DsSwatchPicker,t as defineCustomElement};
 //# sourceMappingURL=ds-swatch-picker.js.map

package/dist/components/ds-switch.js

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-Btxwp4lJ.js";const t=o;const p=s;export{t as DsSwitch,p as defineCustomElement};
+import{S as o,d as s}from"./p-BhYWdbEp.js";const p=o;const t=s;export{p as DsSwitch,t as defineCustomElement};
 //# sourceMappingURL=ds-switch.js.map

package/dist/components/ds-tab-group.js

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-BzObtSlo.js";const t=o;const p=s;export{t as DsTabGroup,p as defineCustomElement};
+import{T as o,d as s}from"./p-D2z2DgtX.js";const t=o;const p=s;export{t as DsTabGroup,p as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/ds-table-saved-views.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as i,a,t as d}from"./index.js";import{d as n}from"./p-vWK5faWZ.js";import{d as o}from"./p-BxqBiVbH.js";import{d as l}from"./p-C7rzVotG.js";import{d as r}from"./p-C5TrNd31.js";import{d as h}from"./p-DLkNcCY0.js";import{d as c}from"./p-C1q-tq3U.js";import{d as f}from"./p-BFfLvMZd.js";import{d as m}from"./p-CKY989vF.js";import{d as u}from"./p-Ca-I2UnB.js";import{d as b}from"./p-DfyfrfHL.js";import{d as p}from"./p-CjgnFGd6.js";import{d as v}from"./p-CooNucm0.js";import{d as w}from"./p-Rfpd5mWO.js";import{d as g}from"./p-Btxwp4lJ.js";import{d as k}from"./p-jMCRaxQW.js";import{d as C}from"./p-DZFilC--.js";import{d as D}from"./p-BXPQmp7q.js";const E=()=>`.sc-ds-table-saved-views-h{--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs);display:inline-block;min-inline-size:0}ds-select.sc-ds-table-saved-views{display:block}.table-saved-views__dialog-actions.sc-ds-table-saved-views{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100)}`;let y=0;const j=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsViewChange=t(this,"dsViewChange");this.dsViewCreate=t(this,"dsViewCreate");this.dsViewRename=t(this,"dsViewRename");this.dsViewRemove=t(this,"dsViewRemove");this.dsViewSave=t(this,"dsViewSave");this.dsViewDiscard=t(this,"dsViewDiscard");this.views=[];this.value="__default__";this.dirty=false;this.defaultViewId="__default__";this.defaultViewLabel="Default";this.label="Saved views";this.triggerLabel="Views";this.createLabel="New view";this.actionViewId=null;this.actionMenuOpen=false;this.actionMenuInitialFocusVisible=false;this.dialogOpen=false;this.dialogMode="create";this.dialogViewId=null;this.nameDraft="";this.nameError="";this.componentId=`ds-table-saved-views-${++y}`;this.selectId=`${this.componentId}-select`;this.actionMenuId=`${this.componentId}-actions`;this.fieldId=`${this.componentId}-name-field`;this.inputId=`${this.componentId}-name-input`;this.actionItems=[{label:"Rename",value:"rename"},{label:"Remove",value:"remove",isDestructive:true}]}get selectedCustomView(){return this.views.find((e=>e.id===this.value))}get dialogView(){return this.views.find((e=>e.id===this.dialogViewId))}get sections(){const e=this.views.map((e=>({label:e.label,value:e.id,subtextActions:this.dirty&&e.id===this.selectedCustomView?.id?[{label:"Save",value:"save"},{label:"Discard",value:"discard",tone:"negative"}]:undefined,action:{label:`Options for ${e.label}`,controls:this.actionMenuId,expanded:this.actionViewId===e.id&&this.actionMenuOpen}})));const s={header:"Templates",options:[{label:this.defaultViewLabel,value:this.defaultViewId}],divider:e.length>0};return e.length>0?[s,{header:"Custom",options:e}]:[s]}handleViewChange(e){if(typeof e==="string")this.dsViewChange.emit({viewId:e})}handleSubtextAction(e){const s=this.selectedCustomView;if(!s||!this.dirty||e.value!==s.id)return;if(e.actionValue==="save")this.dsViewSave.emit({viewId:s.id});if(e.actionValue==="discard")this.dsViewDiscard.emit({viewId:s.id})}handleOptionAction(e){if(!this.views.some((s=>s.id===e.value)))return;this.actionMenuInitialFocusVisible=e.originalEvent.detail===0;if(this.actionViewId===e.value&&this.actionMenuOpen){this.actionMenuOpen=false;return}this.actionViewId=e.value;this.actionAnchorId=e.anchorId;this.actionMenuOpen=true}handleActionSelect(e){const s=this.actionViewId;this.actionMenuOpen=false;if(!s)return;if(e.detail.value==="rename")this.openDialog("rename",s);if(e.detail.value==="remove")this.dsViewRemove.emit({viewId:s})}openDialog(e,s=null){const t=e==="rename"?this.views.find((e=>e.id===s)):undefined;if(e==="rename"&&!t)return;this.dialogMode=e;this.dialogViewId=t?.id??null;this.nameDraft=t?.label??"";this.nameError="";this.dialogOpen=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{const e=this.el.querySelector(`#${this.inputId}`);void e?.setFocus?.()}))}))}validateName(){const e=this.nameDraft.trim();if(!e)return"View name is required.";const s=this.views.some((s=>s.id!==this.dialogViewId&&s.label.trim().toLocaleLowerCase()===e.toLocaleLowerCase()));if(s||this.defaultViewLabel.trim().toLocaleLowerCase()===e.toLocaleLowerCase()){return"A view with this name already exists."}return""}submitDialog(){const e=this.validateName();if(e){this.nameError=e;return}const s=this.nameDraft.trim();if(this.dialogMode==="rename"&&this.dialogView){this.dsViewRename.emit({viewId:this.dialogView.id,name:s})}else{this.dsViewCreate.emit({name:s})}this.dialogOpen=false}finishDialogClose(){if(this.dialogOpen)return;this.dialogViewId=null;this.nameDraft="";this.nameError="";const e=this.el.querySelector(`#${this.selectId}`);void e?.setFocus?.()}render(){return i(a,{key:"e8c98e262addefc1ec8a4cf242a67563fffa1720"},i("ds-select",{key:"87217796878dd16e0d046139a2ff667c31fa7fd7",id:this.selectId,size:"md",placeholder:this.label,"aria-label":this.label,sections:this.sections,value:this.value,triggerLabel:this.selectedCustomView?undefined:this.triggerLabel,triggerLabelPlaceholder:!this.selectedCustomView,dot:this.dirty&&Boolean(this.selectedCustomView),footerActionLabel:this.createLabel,activeFill:false,allowClear:false,onDsChange:e=>this.handleViewChange(e.detail),onDsFooterAction:()=>this.openDialog("create"),onDsOptionSubtextAction:e=>this.handleSubtextAction(e.detail),onDsOptionAction:e=>this.handleOptionAction(e.detail)}),i("ds-menu",{key:"927f30a08cd445d715f0730727633caf50cf510c",id:this.actionMenuId,anchorId:this.actionAnchorId,menuLabel:"Saved view options",side:"bottom",align:"end",menuWidth:"max-content",minWidth:"0",items:this.actionItems,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,onDsClose:()=>this.actionMenuOpen=false,onDsAfterClose:()=>{if(this.actionMenuOpen)return;this.actionViewId=null;this.actionAnchorId=undefined},onDsSelect:e=>this.handleActionSelect(e)}),i("ds-modal",{key:"72e3c308aaab87d3f1f5f654ca36a51d68995787",open:this.dialogOpen,heading:this.dialogMode==="rename"?"Rename view":"Save as new view",modalWidth:"sm",onDsClose:()=>this.dialogOpen=false,onDsAfterClose:()=>this.finishDialogClose()},i("ds-field",{key:"f215df5d06752dcbf7cd26c073c8d45832e8260c",label:"Name",fieldId:this.fieldId,error:this.nameError.length>0,errorMessage:this.nameError},i("ds-input",{key:"3a75c32a887ccd98fbbe269ac9af1d34e08ca4eb",id:this.inputId,size:"md",placeholder:"Enter a unique name",value:this.nameDraft,autoFocus:true,onDsChange:e=>{this.nameDraft=e.detail;if(this.nameError)this.nameError=""},onKeyDown:e=>{if(e.key==="Enter")this.submitDialog()}})),i("div",{key:"468426c75b2c4ea68df5145172cbd4e62725f228",slot:"footer",class:"table-saved-views__dialog-actions"},i("ds-button-filled",{key:"b1ff30daf5296cd8668bfbe83c2f85da8ecb40a6",label:this.dialogMode==="rename"?"Rename":"Save",size:"md",onDsClick:()=>this.submitDialog()}),i("ds-button-unfilled",{key:"6746d513b286b7948180cb0ed5a506b990f177e9",label:"Cancel",size:"md",onDsClick:()=>this.dialogOpen=false}))))}get el(){return this}static get style(){return E()}},[2,"ds-table-saved-views",{views:[16],value:[1],dirty:[4],defaultViewId:[1,"default-view-id"],defaultViewLabel:[1,"default-view-label"],label:[1],triggerLabel:[1,"trigger-label"],createLabel:[1,"create-label"],actionViewId:[32],actionAnchorId:[32],actionMenuOpen:[32],actionMenuInitialFocusVisible:[32],dialogOpen:[32],dialogMode:[32],dialogViewId:[32],nameDraft:[32],nameError:[32]}]);function x(){if(typeof customElements==="undefined"){return}const e=["ds-table-saved-views","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-field","ds-icon","ds-input","ds-loader","ds-menu","ds-modal","ds-select","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-table-saved-views":if(!customElements.get(d(e))){customElements.define(d(e),j)}break;case"ds-badge":if(!customElements.get(d(e))){n()}break;case"ds-button-filled":if(!customElements.get(d(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){l()}break;case"ds-checkbox":if(!customElements.get(d(e))){r()}break;case"ds-empty-state":if(!customElements.get(d(e))){h()}break;case"ds-field":if(!customElements.get(d(e))){c()}break;case"ds-icon":if(!customElements.get(d(e))){f()}break;case"ds-input":if(!customElements.get(d(e))){m()}break;case"ds-loader":if(!customElements.get(d(e))){u()}break;case"ds-menu":if(!customElements.get(d(e))){b()}break;case"ds-modal":if(!customElements.get(d(e))){p()}break;case"ds-select":if(!customElements.get(d(e))){v()}break;case"ds-swatch-picker":if(!customElements.get(d(e))){w()}break;case"ds-switch":if(!customElements.get(d(e))){g()}break;case"ds-tag":if(!customElements.get(d(e))){k()}break;case"ds-text":if(!customElements.get(d(e))){C()}break;case"ds-tooltip":if(!customElements.get(d(e))){D()}break}}))}x();const V=j;const A=x;export{V as DsTableSavedViews,A as defineCustomElement};
+import{p as e,H as s,c as t,h as i,a,t as n}from"./index.js";import{d}from"./p-a6qP60zb.js";import{d as o}from"./p-U8JIZzI2.js";import{d as l}from"./p-DAV32g35.js";import{d as r}from"./p-B0PEg5RF.js";import{d as h}from"./p-23u3lIr1.js";import{d as c}from"./p-7tZx4ukz.js";import{d as m}from"./p-BFfLvMZd.js";import{d as f}from"./p-BUrbVZJU.js";import{d as u}from"./p-JPTkZ3Ji.js";import{d as b}from"./p-3dYwA4i_.js";import{d as p}from"./p-0IbKxhqM.js";import{d as v}from"./p-COVcyUAA.js";import{d as w}from"./p-BHDkJmrC.js";import{d as g}from"./p-BhYWdbEp.js";import{d as k}from"./p-y4jhIkRc.js";import{d as E}from"./p-BGXqFq2C.js";import{d as y}from"./p-BK-JjdoN.js";const D=()=>`.sc-ds-table-saved-views-h{--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs);display:inline-block;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}ds-select.sc-ds-table-saved-views{display:block;min-inline-size:0;max-inline-size:100%}.table-saved-views__dialog-actions.sc-ds-table-saved-views{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100)}`;let j=0;const x=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsViewChange=t(this,"dsViewChange",7);this.dsViewCreate=t(this,"dsViewCreate",7);this.dsViewRename=t(this,"dsViewRename",7);this.dsViewRemove=t(this,"dsViewRemove",7);this.dsViewSave=t(this,"dsViewSave",7);this.dsViewDiscard=t(this,"dsViewDiscard",7);this.views=[];this.value="__default__";this.dirty=false;this.defaultViewId="__default__";this.defaultViewLabel="Default";this.label="Saved views";this.triggerLabel="Views";this.createLabel="New view";this.actionViewId=null;this.actionMenuOpen=false;this.actionMenuInitialFocusVisible=false;this.dialogOpen=false;this.dialogMode="create";this.dialogViewId=null;this.nameDraft="";this.nameError="";this.componentId=`ds-table-saved-views-${++j}`;this.selectId=`${this.componentId}-select`;this.actionMenuId=`${this.componentId}-actions`;this.fieldId=`${this.componentId}-name-field`;this.inputId=`${this.componentId}-name-input`;this.actionItems=[{label:"Rename",value:"rename"},{label:"Remove",value:"remove",isDestructive:true}]}get selectedCustomView(){return this.views.find((e=>e.id===this.value))}get dialogView(){return this.views.find((e=>e.id===this.dialogViewId))}get sections(){const e=this.views.map((e=>({label:e.label,value:e.id,subtextActions:this.dirty&&e.id===this.selectedCustomView?.id?[{label:"Save",value:"save"},{label:"Discard",value:"discard",tone:"negative"}]:undefined,action:{label:`Options for ${e.label}`,controls:this.actionMenuId,expanded:this.actionViewId===e.id&&this.actionMenuOpen}})));const s={header:"Templates",options:[{label:this.defaultViewLabel,value:this.defaultViewId}],divider:e.length>0};return e.length>0?[s,{header:"Custom",options:e}]:[s]}handleViewChange(e){if(typeof e==="string")this.dsViewChange.emit({viewId:e})}handleSubtextAction(e){const s=this.selectedCustomView;if(!s||!this.dirty||e.value!==s.id)return;if(e.actionValue==="save")this.dsViewSave.emit({viewId:s.id});if(e.actionValue==="discard")this.dsViewDiscard.emit({viewId:s.id})}handleOptionAction(e){if(!this.views.some((s=>s.id===e.value)))return;this.actionMenuInitialFocusVisible=e.originalEvent.detail===0;if(this.actionViewId===e.value&&this.actionMenuOpen){this.actionMenuOpen=false;return}this.actionViewId=e.value;this.actionAnchorId=e.anchorId;this.actionMenuOpen=true}handleActionSelect(e){const s=this.actionViewId;this.actionMenuOpen=false;if(!s)return;if(e.detail.value==="rename")this.openDialog("rename",s);if(e.detail.value==="remove")this.dsViewRemove.emit({viewId:s})}openDialog(e,s=null){const t=e==="rename"?this.views.find((e=>e.id===s)):undefined;if(e==="rename"&&!t)return;this.dialogMode=e;this.dialogViewId=t?.id??null;this.nameDraft=t?.label??"";this.nameError="";this.dialogOpen=true;requestAnimationFrame((()=>{requestAnimationFrame((()=>{const e=this.el.querySelector(`#${this.inputId}`);void e?.setFocus?.()}))}))}validateName(){const e=this.nameDraft.trim();if(!e)return"View name is required.";const s=this.views.some((s=>s.id!==this.dialogViewId&&s.label.trim().toLocaleLowerCase()===e.toLocaleLowerCase()));if(s||this.defaultViewLabel.trim().toLocaleLowerCase()===e.toLocaleLowerCase()){return"A view with this name already exists."}return""}submitDialog(){const e=this.validateName();if(e){this.nameError=e;return}const s=this.nameDraft.trim();if(this.dialogMode==="rename"&&this.dialogView){this.dsViewRename.emit({viewId:this.dialogView.id,name:s})}else{this.dsViewCreate.emit({name:s})}this.dialogOpen=false}finishDialogClose(){if(this.dialogOpen)return;this.dialogViewId=null;this.nameDraft="";this.nameError="";const e=this.el.querySelector(`#${this.selectId}`);void e?.setFocus?.()}render(){return i(a,{key:"0647db6f18401890486124c9775dd9b95c7d35b1"},i("ds-select",{key:"b8bc9dd845444460ec24af188e9923a796a53cbc",id:this.selectId,size:"md",width:"fill",placeholder:this.label,"aria-label":this.label,sections:this.sections,value:this.value,triggerLabel:this.selectedCustomView?undefined:this.triggerLabel,triggerLabelPlaceholder:!this.selectedCustomView,dot:this.dirty&&Boolean(this.selectedCustomView),footerActionLabel:this.createLabel,activeFill:false,allowClear:false,onDsChange:e=>this.handleViewChange(e.detail),onDsFooterAction:()=>this.openDialog("create"),onDsOptionSubtextAction:e=>this.handleSubtextAction(e.detail),onDsOptionAction:e=>this.handleOptionAction(e.detail)}),i("ds-menu",{key:"ea134d3f976da13f9d489caaa76cfb8b0bc2e664",id:this.actionMenuId,anchorId:this.actionAnchorId,menuLabel:"Saved view options",side:"bottom",align:"end",menuWidth:"max-content",minWidth:"0",items:this.actionItems,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,onDsClose:()=>this.actionMenuOpen=false,onDsAfterClose:()=>{if(this.actionMenuOpen)return;this.actionViewId=null;this.actionAnchorId=undefined},onDsSelect:e=>this.handleActionSelect(e)}),i("ds-modal",{key:"b09b2ae76c97e7e6478963cd693b1fc17fc2a5bc",open:this.dialogOpen,heading:this.dialogMode==="rename"?"Rename view":"Save as new view",modalWidth:"sm",onDsClose:()=>this.dialogOpen=false,onDsAfterClose:()=>this.finishDialogClose()},i("ds-field",{key:"961b8003973edd43ed9a7b0fea2a6b79894e533d",label:"Name",fieldId:this.fieldId,error:this.nameError.length>0,errorMessage:this.nameError},i("ds-input",{key:"5c8fc9f1db26f430d84eac1f79a618c9a7d742ed",id:this.inputId,size:"md",placeholder:"Enter a unique name",value:this.nameDraft,autoFocus:true,onDsChange:e=>{this.nameDraft=e.detail;if(this.nameError)this.nameError=""},onKeyDown:e=>{if(e.key==="Enter")this.submitDialog()}})),i("div",{key:"d1e6cb0ab72a54fa5371f0b6b06559f4668fa281",slot:"footer",class:"table-saved-views__dialog-actions"},i("ds-button-filled",{key:"c508c85a098b7c9e9e51da4874bfc6414f5372e6",label:this.dialogMode==="rename"?"Rename":"Save",size:"md",onDsClick:()=>this.submitDialog()}),i("ds-button-unfilled",{key:"630a580b888bf7e76d2f64dab7d20a8221ba090b",label:"Cancel",size:"md",onDsClick:()=>this.dialogOpen=false}))))}get el(){return this}static get style(){return D()}},[2,"ds-table-saved-views",{views:[16],value:[1],dirty:[4],defaultViewId:[1,"default-view-id"],defaultViewLabel:[1,"default-view-label"],label:[1],triggerLabel:[1,"trigger-label"],createLabel:[1,"create-label"],actionViewId:[32],actionAnchorId:[32],actionMenuOpen:[32],actionMenuInitialFocusVisible:[32],dialogOpen:[32],dialogMode:[32],dialogViewId:[32],nameDraft:[32],nameError:[32]}]);function V(){if(typeof customElements==="undefined"){return}const e=["ds-table-saved-views","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-field","ds-icon","ds-input","ds-loader","ds-menu","ds-modal","ds-select","ds-swatch-picker","ds-switch","ds-tag","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-table-saved-views":if(!customElements.get(n(e))){customElements.define(n(e),x)}break;case"ds-badge":if(!customElements.get(n(e))){d()}break;case"ds-button-filled":if(!customElements.get(n(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(n(e))){l()}break;case"ds-checkbox":if(!customElements.get(n(e))){r()}break;case"ds-empty-state":if(!customElements.get(n(e))){h()}break;case"ds-field":if(!customElements.get(n(e))){c()}break;case"ds-icon":if(!customElements.get(n(e))){m()}break;case"ds-input":if(!customElements.get(n(e))){f()}break;case"ds-loader":if(!customElements.get(n(e))){u()}break;case"ds-menu":if(!customElements.get(n(e))){b()}break;case"ds-modal":if(!customElements.get(n(e))){p()}break;case"ds-select":if(!customElements.get(n(e))){v()}break;case"ds-swatch-picker":if(!customElements.get(n(e))){w()}break;case"ds-switch":if(!customElements.get(n(e))){g()}break;case"ds-tag":if(!customElements.get(n(e))){k()}break;case"ds-text":if(!customElements.get(n(e))){E()}break;case"ds-tooltip":if(!customElements.get(n(e))){y()}break}}))}V();const C=x;const A=V;export{C as DsTableSavedViews,A as defineCustomElement};
 //# sourceMappingURL=ds-table-saved-views.js.map

package/dist/components/ds-table-saved-views.js.map

@@ -1 +1 @@
-{"version":3,"names":["tableSavedViewsCss","tableSavedViewsId","TableSavedViews","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","views","value","dirty","defaultViewId","defaultViewLabel","label","triggerLabel","createLabel","actionViewId","actionMenuOpen","actionMenuInitialFocusVisible","dialogOpen","dialogMode","dialogViewId","nameDraft","nameError","componentId","selectId","actionMenuId","fieldId","inputId","actionItems","isDestructive","selectedCustomView","find","view","id","dialogView","sections","custom","map","subtextActions","tone","undefined","action","controls","expanded","templates","header","options","divider","length","handleViewChange","dsViewChange","emit","viewId","handleSubtextAction","detail","actionValue","dsViewSave","dsViewDiscard","handleOptionAction","some","originalEvent","actionAnchorId","anchorId","handleActionSelect","event","openDialog","dsViewRemove","mode","item","requestAnimationFrame","input","el","querySelector","setFocus","validateName","name","trim","duplicate","toLocaleLowerCase","submitDialog","error","dsViewRename","dsViewCreate","finishDialogClose","select","render","h","Host","key","size","placeholder","triggerLabelPlaceholder","dot","Boolean","footerActionLabel","activeFill","allowClear","onDsChange","onDsFooterAction","onDsOptionSubtextAction","onDsOptionAction","menuLabel","side","align","menuWidth","minWidth","items","open","initialFocusVisible","onDsClose","onDsAfterClose","onDsSelect","heading","modalWidth","errorMessage","autoFocus","onKeyDown","slot","class","onDsClick"],"sources":["src/wc/components/TableSavedViews/TableSavedViews.css?tag=ds-table-saved-views&encapsulation=scoped","src/wc/components/TableSavedViews/TableSavedViews.tsx"],"sourcesContent":[":host {\n  --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n\n  display: inline-block;\n  min-inline-size: 0;\n}\n\nds-select {\n  display: block;\n}\n\n.table-saved-views__dialog-actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--dimension-space-100);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type {\n  SelectOptionActionDetail,\n  SelectOptionSubtextActionDetail,\n  SelectValue,\n} from '../Select/Select';\nimport type {\n  TableSavedView,\n  TableSavedViewChangeDetail,\n  TableSavedViewCreateDetail,\n  TableSavedViewDiscardDetail,\n  TableSavedViewRemoveDetail,\n  TableSavedViewRenameDetail,\n  TableSavedViewSaveDetail,\n} from './table-saved-views-types';\n\ntype SavedViewDialogMode = 'create' | 'rename';\n\nlet tableSavedViewsId = 0;\n\n@Component({\n  tag: 'ds-table-saved-views',\n  styleUrl: 'TableSavedViews.css',\n  scoped: true,\n})\nexport class TableSavedViews {\n  @Element() el!: HTMLElement;\n\n  /** Application-owned custom saved views. Assign arrays through the JavaScript property. */\n  @Prop() views: TableSavedView[] = [];\n  /** ID of the controlled active view, including the default view ID. */\n  @Prop() value: string = '__default__';\n  /** Whether the current table state differs from the selected custom view. Ignored for the default view. */\n  @Prop() dirty: boolean = false;\n  /** ID used for the built-in default view. */\n  @Prop() defaultViewId: string = '__default__';\n  /** Label used for the built-in default view. */\n  @Prop() defaultViewLabel: string = 'Default';\n  /** Accessible name for the saved-views select. */\n  @Prop() label: string = 'Saved views';\n  /** Trigger label shown while the default view is selected. */\n  @Prop() triggerLabel: string = 'Views';\n  /** Footer action label that opens the create-view dialog. */\n  @Prop() createLabel: string = 'New view';\n\n  /** Emitted when a view selection is requested. */\n  @Event() dsViewChange!: EventEmitter<TableSavedViewChangeDetail>;\n  /** Emitted after a valid create-view name is submitted. */\n  @Event() dsViewCreate!: EventEmitter<TableSavedViewCreateDetail>;\n  /** Emitted after a valid renamed view name is submitted. */\n  @Event() dsViewRename!: EventEmitter<TableSavedViewRenameDetail>;\n  /** Emitted when a custom view removal is requested. */\n  @Event() dsViewRemove!: EventEmitter<TableSavedViewRemoveDetail>;\n  /** Emitted when changes to the active custom view should replace its stored payload. */\n  @Event() dsViewSave!: EventEmitter<TableSavedViewSaveDetail>;\n  /** Emitted when the active custom view's stored payload should be restored. */\n  @Event() dsViewDiscard!: EventEmitter<TableSavedViewDiscardDetail>;\n\n  @State() private actionViewId: string | null = null;\n  @State() private actionAnchorId: string | undefined;\n  @State() private actionMenuOpen = false;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private dialogOpen = false;\n  @State() private dialogMode: SavedViewDialogMode = 'create';\n  @State() private dialogViewId: string | null = null;\n  @State() private nameDraft = '';\n  @State() private nameError = '';\n\n  private readonly componentId = `ds-table-saved-views-${++tableSavedViewsId}`;\n  private readonly selectId = `${this.componentId}-select`;\n  private readonly actionMenuId = `${this.componentId}-actions`;\n  private readonly fieldId = `${this.componentId}-name-field`;\n  private readonly inputId = `${this.componentId}-name-input`;\n  private readonly actionItems: MenuItemData[] = [\n    { label: 'Rename', value: 'rename' },\n    { label: 'Remove', value: 'remove', isDestructive: true },\n  ];\n\n  private get selectedCustomView(): TableSavedView | undefined {\n    return this.views.find(view => view.id === this.value);\n  }\n\n  private get dialogView(): TableSavedView | undefined {\n    return this.views.find(view => view.id === this.dialogViewId);\n  }\n\n  private get sections() {\n    const custom = this.views.map(view => ({\n      label: view.label,\n      value: view.id,\n      subtextActions:\n        this.dirty && view.id === this.selectedCustomView?.id\n          ? [\n              { label: 'Save', value: 'save' },\n              { label: 'Discard', value: 'discard', tone: 'negative' as const },\n            ]\n          : undefined,\n      action: {\n        label: `Options for ${view.label}`,\n        controls: this.actionMenuId,\n        expanded: this.actionViewId === view.id && this.actionMenuOpen,\n      },\n    }));\n    const templates = {\n      header: 'Templates',\n      options: [{ label: this.defaultViewLabel, value: this.defaultViewId }],\n      divider: custom.length > 0,\n    };\n    return custom.length > 0 ? [templates, { header: 'Custom', options: custom }] : [templates];\n  }\n\n  private handleViewChange(value: SelectValue) {\n    if (typeof value === 'string') this.dsViewChange.emit({ viewId: value });\n  }\n\n  private handleSubtextAction(detail: SelectOptionSubtextActionDetail) {\n    const view = this.selectedCustomView;\n    if (!view || !this.dirty || detail.value !== view.id) return;\n    if (detail.actionValue === 'save') this.dsViewSave.emit({ viewId: view.id });\n    if (detail.actionValue === 'discard') this.dsViewDiscard.emit({ viewId: view.id });\n  }\n\n  private handleOptionAction(detail: SelectOptionActionDetail) {\n    if (!this.views.some(view => view.id === detail.value)) return;\n    this.actionMenuInitialFocusVisible = detail.originalEvent.detail === 0;\n    if (this.actionViewId === detail.value && this.actionMenuOpen) {\n      this.actionMenuOpen = false;\n      return;\n    }\n    this.actionViewId = detail.value;\n    this.actionAnchorId = detail.anchorId;\n    this.actionMenuOpen = true;\n  }\n\n  private handleActionSelect(event: CustomEvent<MenuItemData>) {\n    const viewId = this.actionViewId;\n    this.actionMenuOpen = false;\n    if (!viewId) return;\n    if (event.detail.value === 'rename') this.openDialog('rename', viewId);\n    if (event.detail.value === 'remove') this.dsViewRemove.emit({ viewId });\n  }\n\n  private openDialog(mode: SavedViewDialogMode, viewId: string | null = null) {\n    const view = mode === 'rename' ? this.views.find(item => item.id === viewId) : undefined;\n    if (mode === 'rename' && !view) return;\n    this.dialogMode = mode;\n    this.dialogViewId = view?.id ?? null;\n    this.nameDraft = view?.label ?? '';\n    this.nameError = '';\n    this.dialogOpen = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const input = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n          `#${this.inputId}`\n        );\n        void input?.setFocus?.();\n      });\n    });\n  }\n\n  private validateName(): string {\n    const name = this.nameDraft.trim();\n    if (!name) return 'View name is required.';\n    const duplicate = this.views.some(\n      view =>\n        view.id !== this.dialogViewId &&\n        view.label.trim().toLocaleLowerCase() === name.toLocaleLowerCase()\n    );\n    if (\n      duplicate ||\n      this.defaultViewLabel.trim().toLocaleLowerCase() === name.toLocaleLowerCase()\n    ) {\n      return 'A view with this name already exists.';\n    }\n    return '';\n  }\n\n  private submitDialog() {\n    const error = this.validateName();\n    if (error) {\n      this.nameError = error;\n      return;\n    }\n    const name = this.nameDraft.trim();\n    if (this.dialogMode === 'rename' && this.dialogView) {\n      this.dsViewRename.emit({ viewId: this.dialogView.id, name });\n    } else {\n      this.dsViewCreate.emit({ name });\n    }\n    this.dialogOpen = false;\n  }\n\n  private finishDialogClose() {\n    if (this.dialogOpen) return;\n    this.dialogViewId = null;\n    this.nameDraft = '';\n    this.nameError = '';\n    const select = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${this.selectId}`\n    );\n    void select?.setFocus?.();\n  }\n\n  render() {\n    return (\n      <Host>\n        <ds-select\n          id={this.selectId}\n          size=\"md\"\n          placeholder={this.label}\n          aria-label={this.label}\n          sections={this.sections}\n          value={this.value}\n          triggerLabel={this.selectedCustomView ? undefined : this.triggerLabel}\n          triggerLabelPlaceholder={!this.selectedCustomView}\n          dot={this.dirty && Boolean(this.selectedCustomView)}\n          footerActionLabel={this.createLabel}\n          activeFill={false}\n          allowClear={false}\n          onDsChange={(event: CustomEvent<SelectValue>) => this.handleViewChange(event.detail)}\n          onDsFooterAction={() => this.openDialog('create')}\n          onDsOptionSubtextAction={(event: CustomEvent<SelectOptionSubtextActionDetail>) =>\n            this.handleSubtextAction(event.detail)\n          }\n          onDsOptionAction={(event: CustomEvent<SelectOptionActionDetail>) =>\n            this.handleOptionAction(event.detail)\n          }\n        />\n\n        <ds-menu\n          id={this.actionMenuId}\n          anchorId={this.actionAnchorId}\n          menuLabel=\"Saved view options\"\n          side=\"bottom\"\n          align=\"end\"\n          menuWidth=\"max-content\"\n          minWidth=\"0\"\n          items={this.actionItems}\n          open={this.actionMenuOpen}\n          initialFocusVisible={this.actionMenuInitialFocusVisible}\n          onDsClose={() => (this.actionMenuOpen = false)}\n          onDsAfterClose={() => {\n            if (this.actionMenuOpen) return;\n            this.actionViewId = null;\n            this.actionAnchorId = undefined;\n          }}\n          onDsSelect={(event: CustomEvent<MenuItemData>) => this.handleActionSelect(event)}\n        />\n\n        <ds-modal\n          open={this.dialogOpen}\n          heading={this.dialogMode === 'rename' ? 'Rename view' : 'Save as new view'}\n          modalWidth=\"sm\"\n          onDsClose={() => (this.dialogOpen = false)}\n          onDsAfterClose={() => this.finishDialogClose()}\n        >\n          <ds-field\n            label=\"Name\"\n            fieldId={this.fieldId}\n            error={this.nameError.length > 0}\n            errorMessage={this.nameError}\n          >\n            <ds-input\n              id={this.inputId}\n              size=\"md\"\n              placeholder=\"Enter a unique name\"\n              value={this.nameDraft}\n              autoFocus={true}\n              onDsChange={(event: CustomEvent<string>) => {\n                this.nameDraft = event.detail;\n                if (this.nameError) this.nameError = '';\n              }}\n              onKeyDown={(event: KeyboardEvent) => {\n                if (event.key === 'Enter') this.submitDialog();\n              }}\n            />\n          </ds-field>\n\n          <div slot=\"footer\" class=\"table-saved-views__dialog-actions\">\n            <ds-button-filled\n              label={this.dialogMode === 'rename' ? 'Rename' : 'Save'}\n              size=\"md\"\n              onDsClick={() => this.submitDialog()}\n            />\n            <ds-button-unfilled\n              label=\"Cancel\"\n              size=\"md\"\n              onDsClick={() => (this.dialogOpen = false)}\n            />\n          </div>\n        </ds-modal>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tableSavedViewsCss","tableSavedViewsId","TableSavedViews","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","views","value","dirty","defaultViewId","defaultViewLabel","label","triggerLabel","createLabel","actionViewId","actionMenuOpen","actionMenuInitialFocusVisible","dialogOpen","dialogMode","dialogViewId","nameDraft","nameError","componentId","selectId","actionMenuId","fieldId","inputId","actionItems","isDestructive","selectedCustomView","find","view","id","dialogView","sections","custom","map","subtextActions","tone","undefined","action","controls","expanded","templates","header","options","divider","length","handleViewChange","dsViewChange","emit","viewId","handleSubtextAction","detail","actionValue","dsViewSave","dsViewDiscard","handleOptionAction","some","originalEvent","actionAnchorId","anchorId","handleActionSelect","event","openDialog","dsViewRemove","mode","item","requestAnimationFrame","input","el","querySelector","setFocus","validateName","name","trim","duplicate","toLocaleLowerCase","submitDialog","error","dsViewRename","dsViewCreate","finishDialogClose","select","render","h","Host","key","size","width","placeholder","triggerLabelPlaceholder","dot","Boolean","footerActionLabel","activeFill","allowClear","onDsChange","onDsFooterAction","onDsOptionSubtextAction","onDsOptionAction","menuLabel","side","align","menuWidth","minWidth","items","open","initialFocusVisible","onDsClose","onDsAfterClose","onDsSelect","heading","modalWidth","errorMessage","autoFocus","onKeyDown","slot","class","onDsClick"],"sources":["src/wc/components/TableSavedViews/TableSavedViews.css?tag=ds-table-saved-views&encapsulation=scoped","src/wc/components/TableSavedViews/TableSavedViews.tsx"],"sourcesContent":[":host {\n  --ds-choice-popup-min-inline-size: var(--dimension-menu-width-xs);\n\n  display: inline-block;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\nds-select {\n  display: block;\n  min-inline-size: 0;\n  max-inline-size: 100%;\n}\n\n.table-saved-views__dialog-actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--dimension-space-100);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type {\n  SelectOptionActionDetail,\n  SelectOptionSubtextActionDetail,\n  SelectValue,\n} from '../Select/Select';\nimport type {\n  TableSavedView,\n  TableSavedViewChangeDetail,\n  TableSavedViewCreateDetail,\n  TableSavedViewDiscardDetail,\n  TableSavedViewRemoveDetail,\n  TableSavedViewRenameDetail,\n  TableSavedViewSaveDetail,\n} from './table-saved-views-types';\n\ntype SavedViewDialogMode = 'create' | 'rename';\n\nlet tableSavedViewsId = 0;\n\n@Component({\n  tag: 'ds-table-saved-views',\n  styleUrl: 'TableSavedViews.css',\n  scoped: true,\n})\nexport class TableSavedViews {\n  @Element() el!: HTMLElement;\n\n  /** Application-owned custom saved views. Assign arrays through the JavaScript property. */\n  @Prop() views: TableSavedView[] = [];\n  /** ID of the controlled active view, including the default view ID. */\n  @Prop() value: string = '__default__';\n  /** Whether the current table state differs from the selected custom view. Ignored for the default view. */\n  @Prop() dirty: boolean = false;\n  /** ID used for the built-in default view. */\n  @Prop() defaultViewId: string = '__default__';\n  /** Label used for the built-in default view. */\n  @Prop() defaultViewLabel: string = 'Default';\n  /** Accessible name for the saved-views select. */\n  @Prop() label: string = 'Saved views';\n  /** Trigger label shown while the default view is selected. */\n  @Prop() triggerLabel: string = 'Views';\n  /** Footer action label that opens the create-view dialog. */\n  @Prop() createLabel: string = 'New view';\n\n  /** Emitted when a view selection is requested. */\n  @Event() dsViewChange!: EventEmitter<TableSavedViewChangeDetail>;\n  /** Emitted after a valid create-view name is submitted. */\n  @Event() dsViewCreate!: EventEmitter<TableSavedViewCreateDetail>;\n  /** Emitted after a valid renamed view name is submitted. */\n  @Event() dsViewRename!: EventEmitter<TableSavedViewRenameDetail>;\n  /** Emitted when a custom view removal is requested. */\n  @Event() dsViewRemove!: EventEmitter<TableSavedViewRemoveDetail>;\n  /** Emitted when changes to the active custom view should replace its stored payload. */\n  @Event() dsViewSave!: EventEmitter<TableSavedViewSaveDetail>;\n  /** Emitted when the active custom view's stored payload should be restored. */\n  @Event() dsViewDiscard!: EventEmitter<TableSavedViewDiscardDetail>;\n\n  @State() private actionViewId: string | null = null;\n  @State() private actionAnchorId: string | undefined;\n  @State() private actionMenuOpen = false;\n  @State() private actionMenuInitialFocusVisible = false;\n  @State() private dialogOpen = false;\n  @State() private dialogMode: SavedViewDialogMode = 'create';\n  @State() private dialogViewId: string | null = null;\n  @State() private nameDraft = '';\n  @State() private nameError = '';\n\n  private readonly componentId = `ds-table-saved-views-${++tableSavedViewsId}`;\n  private readonly selectId = `${this.componentId}-select`;\n  private readonly actionMenuId = `${this.componentId}-actions`;\n  private readonly fieldId = `${this.componentId}-name-field`;\n  private readonly inputId = `${this.componentId}-name-input`;\n  private readonly actionItems: MenuItemData[] = [\n    { label: 'Rename', value: 'rename' },\n    { label: 'Remove', value: 'remove', isDestructive: true },\n  ];\n\n  private get selectedCustomView(): TableSavedView | undefined {\n    return this.views.find(view => view.id === this.value);\n  }\n\n  private get dialogView(): TableSavedView | undefined {\n    return this.views.find(view => view.id === this.dialogViewId);\n  }\n\n  private get sections() {\n    const custom = this.views.map(view => ({\n      label: view.label,\n      value: view.id,\n      subtextActions:\n        this.dirty && view.id === this.selectedCustomView?.id\n          ? [\n              { label: 'Save', value: 'save' },\n              { label: 'Discard', value: 'discard', tone: 'negative' as const },\n            ]\n          : undefined,\n      action: {\n        label: `Options for ${view.label}`,\n        controls: this.actionMenuId,\n        expanded: this.actionViewId === view.id && this.actionMenuOpen,\n      },\n    }));\n    const templates = {\n      header: 'Templates',\n      options: [{ label: this.defaultViewLabel, value: this.defaultViewId }],\n      divider: custom.length > 0,\n    };\n    return custom.length > 0 ? [templates, { header: 'Custom', options: custom }] : [templates];\n  }\n\n  private handleViewChange(value: SelectValue) {\n    if (typeof value === 'string') this.dsViewChange.emit({ viewId: value });\n  }\n\n  private handleSubtextAction(detail: SelectOptionSubtextActionDetail) {\n    const view = this.selectedCustomView;\n    if (!view || !this.dirty || detail.value !== view.id) return;\n    if (detail.actionValue === 'save') this.dsViewSave.emit({ viewId: view.id });\n    if (detail.actionValue === 'discard') this.dsViewDiscard.emit({ viewId: view.id });\n  }\n\n  private handleOptionAction(detail: SelectOptionActionDetail) {\n    if (!this.views.some(view => view.id === detail.value)) return;\n    this.actionMenuInitialFocusVisible = detail.originalEvent.detail === 0;\n    if (this.actionViewId === detail.value && this.actionMenuOpen) {\n      this.actionMenuOpen = false;\n      return;\n    }\n    this.actionViewId = detail.value;\n    this.actionAnchorId = detail.anchorId;\n    this.actionMenuOpen = true;\n  }\n\n  private handleActionSelect(event: CustomEvent<MenuItemData>) {\n    const viewId = this.actionViewId;\n    this.actionMenuOpen = false;\n    if (!viewId) return;\n    if (event.detail.value === 'rename') this.openDialog('rename', viewId);\n    if (event.detail.value === 'remove') this.dsViewRemove.emit({ viewId });\n  }\n\n  private openDialog(mode: SavedViewDialogMode, viewId: string | null = null) {\n    const view = mode === 'rename' ? this.views.find(item => item.id === viewId) : undefined;\n    if (mode === 'rename' && !view) return;\n    this.dialogMode = mode;\n    this.dialogViewId = view?.id ?? null;\n    this.nameDraft = view?.label ?? '';\n    this.nameError = '';\n    this.dialogOpen = true;\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const input = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n          `#${this.inputId}`\n        );\n        void input?.setFocus?.();\n      });\n    });\n  }\n\n  private validateName(): string {\n    const name = this.nameDraft.trim();\n    if (!name) return 'View name is required.';\n    const duplicate = this.views.some(\n      view =>\n        view.id !== this.dialogViewId &&\n        view.label.trim().toLocaleLowerCase() === name.toLocaleLowerCase()\n    );\n    if (\n      duplicate ||\n      this.defaultViewLabel.trim().toLocaleLowerCase() === name.toLocaleLowerCase()\n    ) {\n      return 'A view with this name already exists.';\n    }\n    return '';\n  }\n\n  private submitDialog() {\n    const error = this.validateName();\n    if (error) {\n      this.nameError = error;\n      return;\n    }\n    const name = this.nameDraft.trim();\n    if (this.dialogMode === 'rename' && this.dialogView) {\n      this.dsViewRename.emit({ viewId: this.dialogView.id, name });\n    } else {\n      this.dsViewCreate.emit({ name });\n    }\n    this.dialogOpen = false;\n  }\n\n  private finishDialogClose() {\n    if (this.dialogOpen) return;\n    this.dialogViewId = null;\n    this.nameDraft = '';\n    this.nameError = '';\n    const select = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${this.selectId}`\n    );\n    void select?.setFocus?.();\n  }\n\n  render() {\n    return (\n      <Host>\n        <ds-select\n          id={this.selectId}\n          size=\"md\"\n          width=\"fill\"\n          placeholder={this.label}\n          aria-label={this.label}\n          sections={this.sections}\n          value={this.value}\n          triggerLabel={this.selectedCustomView ? undefined : this.triggerLabel}\n          triggerLabelPlaceholder={!this.selectedCustomView}\n          dot={this.dirty && Boolean(this.selectedCustomView)}\n          footerActionLabel={this.createLabel}\n          activeFill={false}\n          allowClear={false}\n          onDsChange={(event: CustomEvent<SelectValue>) => this.handleViewChange(event.detail)}\n          onDsFooterAction={() => this.openDialog('create')}\n          onDsOptionSubtextAction={(event: CustomEvent<SelectOptionSubtextActionDetail>) =>\n            this.handleSubtextAction(event.detail)\n          }\n          onDsOptionAction={(event: CustomEvent<SelectOptionActionDetail>) =>\n            this.handleOptionAction(event.detail)\n          }\n        />\n\n        <ds-menu\n          id={this.actionMenuId}\n          anchorId={this.actionAnchorId}\n          menuLabel=\"Saved view options\"\n          side=\"bottom\"\n          align=\"end\"\n          menuWidth=\"max-content\"\n          minWidth=\"0\"\n          items={this.actionItems}\n          open={this.actionMenuOpen}\n          initialFocusVisible={this.actionMenuInitialFocusVisible}\n          onDsClose={() => (this.actionMenuOpen = false)}\n          onDsAfterClose={() => {\n            if (this.actionMenuOpen) return;\n            this.actionViewId = null;\n            this.actionAnchorId = undefined;\n          }}\n          onDsSelect={(event: CustomEvent<MenuItemData>) => this.handleActionSelect(event)}\n        />\n\n        <ds-modal\n          open={this.dialogOpen}\n          heading={this.dialogMode === 'rename' ? 'Rename view' : 'Save as new view'}\n          modalWidth=\"sm\"\n          onDsClose={() => (this.dialogOpen = false)}\n          onDsAfterClose={() => this.finishDialogClose()}\n        >\n          <ds-field\n            label=\"Name\"\n            fieldId={this.fieldId}\n            error={this.nameError.length > 0}\n            errorMessage={this.nameError}\n          >\n            <ds-input\n              id={this.inputId}\n              size=\"md\"\n              placeholder=\"Enter a unique name\"\n              value={this.nameDraft}\n              autoFocus={true}\n              onDsChange={(event: CustomEvent<string>) => {\n                this.nameDraft = event.detail;\n                if (this.nameError) this.nameError = '';\n              }}\n              onKeyDown={(event: KeyboardEvent) => {\n                if (event.key === 'Enter') this.submitDialog();\n              }}\n            />\n          </ds-field>\n\n          <div slot=\"footer\" class=\"table-saved-views__dialog-actions\">\n            <ds-button-filled\n              label={this.dialogMode === 'rename' ? 'Rename' : 'Save'}\n              size=\"md\"\n              onDsClick={() => this.submitDialog()}\n            />\n            <ds-button-unfilled\n              label=\"Cancel\"\n              size=\"md\"\n              onDsClick={() => (this.dialogOpen = false)}\n            />\n          </div>\n        </ds-modal>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-table-sort.d.ts

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

package/dist/components/ds-table-sort.js

@@ -0,0 +1,2 @@
+import{p as s,H as e,c as t,h as i,a as n,t as o}from"./index.js";import{i as r}from"./p-BdnQv7Zl.js";import{d as a}from"./p-a6qP60zb.js";import{d as c}from"./p-DAV32g35.js";import{d as l}from"./p-BFfLvMZd.js";import{d}from"./p-JPTkZ3Ji.js";import{d as u}from"./p-3dYwA4i_.js";import{d as m}from"./p-BHDkJmrC.js";import{d as f}from"./p-BhYWdbEp.js";import{d as h}from"./p-y4jhIkRc.js";import{d as b}from"./p-BGXqFq2C.js";const p="direction:asc";const k="direction:desc";function g(s){const e=[];const t=new Set;for(const i of s){if(r(i)||!i.sortable)continue;const s=i.headerSegments?.filter((s=>s.sortKey.trim()))??[];if(s.length>0){for(const i of s){if(t.has(i.sortKey))continue;t.add(i.sortKey);e.push({id:i.sortKey,label:i.label.trim()||i.sortKey})}continue}if(t.has(i.id))continue;t.add(i.id);e.push({id:i.id,label:i.header.trim()||i.headerLabel?.trim()||i.id})}return e}function w(s,e){const t=g(s);return[{header:"Data",items:t.map((s=>({label:s.label,value:s.id,isSelected:e?.columnId===s.id})))},{header:"Direction",items:[{label:"Ascending",value:p,icon:"ArrowUp",isSelected:e?.direction==="asc"},{label:"Descending",value:k,icon:"ArrowDown",isSelected:e?.direction==="desc"}]}]}function E(s,e){if(s===e)return true;if(!s||!e)return false;return s.columnId===e.columnId&&s.direction===e.direction}function j(s,e,t){const i=g(s);if(i.length===0)return e??null;if(t.value===p||t.value===k){const s=t.value===p?"asc":"desc";const n=e?.columnId??i[0].id;return{columnId:n,direction:s}}if(!t.value||!i.some((s=>s.id===t.value)))return e??null;if(e?.columnId===t.value)return e??null;return{columnId:t.value,direction:e?.direction??"asc"}}const S=()=>`.sc-ds-table-sort-h{display:inline-flex;min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs)}[hidden].sc-ds-table-sort-h{display:none}`;let x=0;const D=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSortChange=t(this,"dsSortChange",3);this.columns=[];this.sort=null;this.ariaLabel=null;this.menuOpen=false;this.initialFocusVisible=false;this.componentId=`ds-table-sort-${++x}`;this.triggerId=`${this.componentId}-trigger`;this.menuId=`${this.componentId}-menu`}async setFocus(){const s=this.el.querySelector(`#${CSS.escape(this.triggerId)}`);await(s?.setFocus?.())}render(){const s=g(this.columns);const e=this.ariaLabel?.trim()||"Sort table";return i(n,{key:"abf2fc87dcd24183d5426a4cc0da7ab91cbac81d",hidden:s.length===0?true:undefined},s.length===0?null:i("ds-button-unfilled",{id:this.triggerId,variant:"icon-label",size:"md",icon:"ArrowsVertical",label:"Sort","aria-label":e,hasMenu:true,collapseLabel:true,expanded:this.menuOpen,controls:this.menuId,onDsClick:s=>{this.toggle(s.detail.detail===0)}}),s.length===0?null:i("ds-menu",{id:this.menuId,open:this.menuOpen,anchorId:this.triggerId,align:"end",side:"bottom",menuLabel:e,selectionMode:"none",initialFocusVisible:this.initialFocusVisible,sections:w(this.columns,this.sort),onDsClose:()=>this.close(),onDsSelect:s=>this.handleSelect(s.detail)}))}toggle(s=false){if(this.menuOpen)this.close();else this.open(s)}open(s=false){if(this.menuOpen)return;this.initialFocusVisible=s;this.menuOpen=true}close(){this.menuOpen=false}handleSelect(s){const e=j(this.columns,this.sort,s);if(E(this.sort,e))return;this.dsSortChange.emit({sort:e})}get el(){return this}static get style(){return S()}},[2,"ds-table-sort",{columns:[16],sort:[16],ariaLabel:[1,"aria-label"],menuOpen:[32],initialFocusVisible:[32],setFocus:[64]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-table-sort","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-tag","ds-text"];s.forEach((s=>{switch(s){case"ds-table-sort":if(!customElements.get(o(s))){customElements.define(o(s),D)}break;case"ds-badge":if(!customElements.get(o(s))){a()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){c()}break;case"ds-icon":if(!customElements.get(o(s))){l()}break;case"ds-loader":if(!customElements.get(o(s))){d()}break;case"ds-menu":if(!customElements.get(o(s))){u()}break;case"ds-swatch-picker":if(!customElements.get(o(s))){m()}break;case"ds-switch":if(!customElements.get(o(s))){f()}break;case"ds-tag":if(!customElements.get(o(s))){h()}break;case"ds-text":if(!customElements.get(o(s))){b()}break}}))}v();const y=D;const A=v;export{y as DsTableSort,A as defineCustomElement};
+//# sourceMappingURL=ds-table-sort.js.map

package/dist/components/ds-table-sort.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TABLE_SORT_DIRECTION_ASC","TABLE_SORT_DIRECTION_DESC","tableSortFields","columns","fields","seen","Set","column","isTableActionColumn","sortable","segments","headerSegments","filter","segment","sortKey","trim","length","has","add","push","id","label","header","headerLabel","tableSortMenuSections","sort","items","map","field","value","isSelected","columnId","icon","direction","tableSortStatesEqual","left","right","nextTableSortStateFromMenuItem","current","item","some","tableSortCss","tableSortSeq","TableSort","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","ariaLabel","menuOpen","initialFocusVisible","componentId","triggerId","menuId","setFocus","trigger","el","querySelector","CSS","escape","render","name","h","Host","key","hidden","undefined","variant","size","hasMenu","collapseLabel","expanded","controls","onDsClick","event","toggle","detail","open","anchorId","align","side","menuLabel","selectionMode","sections","onDsClose","close","onDsSelect","handleSelect","fromKeyboard","next","dsSortChange","emit"],"sources":["src/wc/components/TableSort/table-sort-menu.ts","src/wc/components/TableSort/TableSort.css?tag=ds-table-sort&encapsulation=scoped","src/wc/components/TableSort/TableSort.tsx"],"sourcesContent":["import type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport { isTableActionColumn } from '../Table/table-column-customizer';\nimport type { TableColumn, TableSortState } from '../Table/table-types';\n\nexport const TABLE_SORT_DIRECTION_ASC = 'direction:asc';\nexport const TABLE_SORT_DIRECTION_DESC = 'direction:desc';\n\nexport interface TableSortField {\n  id: string;\n  label: string;\n}\n\n/** Sortable data fields from the catalog, including compound header segments. */\nexport function tableSortFields(columns: readonly TableColumn[]): TableSortField[] {\n  const fields: TableSortField[] = [];\n  const seen = new Set<string>();\n\n  for (const column of columns) {\n    if (isTableActionColumn(column) || !column.sortable) continue;\n    const segments = column.headerSegments?.filter(segment => segment.sortKey.trim()) ?? [];\n    if (segments.length > 0) {\n      for (const segment of segments) {\n        if (seen.has(segment.sortKey)) continue;\n        seen.add(segment.sortKey);\n        fields.push({\n          id: segment.sortKey,\n          label: segment.label.trim() || segment.sortKey,\n        });\n      }\n      continue;\n    }\n    if (seen.has(column.id)) continue;\n    seen.add(column.id);\n    fields.push({\n      id: column.id,\n      label: column.header.trim() || column.headerLabel?.trim() || column.id,\n    });\n  }\n\n  return fields;\n}\n\nexport function tableSortMenuSections(\n  columns: readonly TableColumn[],\n  sort: TableSortState | null | undefined\n): MenuSection[] {\n  const fields = tableSortFields(columns);\n  return [\n    {\n      header: 'Data',\n      items: fields.map(field => ({\n        label: field.label,\n        value: field.id,\n        isSelected: sort?.columnId === field.id,\n      })),\n    },\n    {\n      header: 'Direction',\n      items: [\n        {\n          label: 'Ascending',\n          value: TABLE_SORT_DIRECTION_ASC,\n          icon: 'ArrowUp',\n          isSelected: sort?.direction === 'asc',\n        },\n        {\n          label: 'Descending',\n          value: TABLE_SORT_DIRECTION_DESC,\n          icon: 'ArrowDown',\n          isSelected: sort?.direction === 'desc',\n        },\n      ],\n    },\n  ];\n}\n\nexport function tableSortStatesEqual(\n  left: TableSortState | null | undefined,\n  right: TableSortState | null | undefined\n): boolean {\n  if (left === right) return true;\n  if (!left || !right) return false;\n  return left.columnId === right.columnId && left.direction === right.direction;\n}\n\n/** Next controlled sort from a Sort menu selection. Does not toggle like a header click. */\nexport function nextTableSortStateFromMenuItem(\n  columns: readonly TableColumn[],\n  current: TableSortState | null | undefined,\n  item: MenuItemData\n): TableSortState | null {\n  const fields = tableSortFields(columns);\n  if (fields.length === 0) return current ?? null;\n\n  if (item.value === TABLE_SORT_DIRECTION_ASC || item.value === TABLE_SORT_DIRECTION_DESC) {\n    const direction = item.value === TABLE_SORT_DIRECTION_ASC ? 'asc' : 'desc';\n    const columnId = current?.columnId ?? fields[0]!.id;\n    return { columnId, direction };\n  }\n\n  if (!item.value || !fields.some(field => field.id === item.value)) return current ?? null;\n  if (current?.columnId === item.value) return current ?? null;\n  return { columnId: item.value, direction: current?.direction ?? 'asc' };\n}\n",":host {\n  display: inline-flex;\n  min-inline-size: 0;\n  max-inline-size: var(--dimension-menu-width-xs);\n}\n\n:host([hidden]) {\n  display: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';\nimport type { MenuItemData } from '../Menu/menu-types';\nimport type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';\nimport {\n  nextTableSortStateFromMenuItem,\n  tableSortFields,\n  tableSortMenuSections,\n  tableSortStatesEqual,\n} from './table-sort-menu';\n\nlet tableSortSeq = 0;\n\n@Component({\n  tag: 'ds-table-sort',\n  styleUrl: 'TableSort.css',\n  scoped: true,\n})\nexport class TableSort {\n  @Element() private el!: HTMLElement;\n\n  /** Catalog used to derive sortable fields, including compound header segments. */\n  @Prop() columns: TableColumn[] = [];\n  /** Controlled table sort. Header sorting and this menu share the same value. */\n  @Prop() sort: TableSortState | null = null;\n  /** Accessible name for the trigger and menu. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event({ bubbles: false }) dsSortChange!: EventEmitter<TableSortChangeDetail>;\n\n  @State() private menuOpen = false;\n  @State() private initialFocusVisible = false;\n\n  private readonly componentId = `ds-table-sort-${++tableSortSeq}`;\n  private readonly triggerId = `${this.componentId}-trigger`;\n  private readonly menuId = `${this.componentId}-menu`;\n\n  @Method()\n  async setFocus() {\n    const trigger = this.el.querySelector<HTMLElement & { setFocus?: () => Promise<void> }>(\n      `#${CSS.escape(this.triggerId)}`\n    );\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const fields = tableSortFields(this.columns);\n    const name = this.ariaLabel?.trim() || 'Sort table';\n\n    return (\n      <Host hidden={fields.length === 0 ? true : undefined}>\n        {fields.length === 0 ? null : (\n          <ds-button-unfilled\n            id={this.triggerId}\n            variant=\"icon-label\"\n            size=\"md\"\n            icon=\"ArrowsVertical\"\n            label=\"Sort\"\n            aria-label={name}\n            hasMenu={true}\n            collapseLabel={true}\n            expanded={this.menuOpen}\n            controls={this.menuId}\n            onDsClick={(event: CustomEvent<MouseEvent>) => {\n              this.toggle(event.detail.detail === 0);\n            }}\n          />\n        )}\n        {fields.length === 0 ? null : (\n          <ds-menu\n            id={this.menuId}\n            open={this.menuOpen}\n            anchorId={this.triggerId}\n            align=\"end\"\n            side=\"bottom\"\n            menuLabel={name}\n            selectionMode=\"none\"\n            initialFocusVisible={this.initialFocusVisible}\n            sections={tableSortMenuSections(this.columns, this.sort)}\n            onDsClose={() => this.close()}\n            onDsSelect={event => this.handleSelect(event.detail)}\n          />\n        )}\n      </Host>\n    );\n  }\n\n  private toggle(fromKeyboard = false): void {\n    if (this.menuOpen) this.close();\n    else this.open(fromKeyboard);\n  }\n\n  private open(fromKeyboard = false): void {\n    if (this.menuOpen) return;\n    this.initialFocusVisible = fromKeyboard;\n    this.menuOpen = true;\n  }\n\n  private close(): void {\n    this.menuOpen = false;\n  }\n\n  private handleSelect(item: MenuItemData): void {\n    const next = nextTableSortStateFromMenuItem(this.columns, this.sort, item);\n    if (tableSortStatesEqual(this.sort, next)) return;\n    this.dsSortChange.emit({ sort: next });\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-table-toolbar.js

@@ -1,2 +1,2 @@
-import{p as a,H as e,h as l,a as t,t as o}from"./index.js";const s=()=>`.sc-ds-table-toolbar-h{display:block;min-inline-size:0;max-inline-size:100%}.table-toolbar.sc-ds-table-toolbar{box-sizing:border-box;display:flex;align-items:center;inline-size:100%;min-inline-size:0;gap:var(--dimension-space-100);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.table-toolbar.sc-ds-table-toolbar::-webkit-scrollbar{display:none}.table-toolbar__leading.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar{display:flex;align-items:center;min-inline-size:0;gap:var(--dimension-space-100)}.table-toolbar__leading.sc-ds-table-toolbar{flex:1 0 auto}.table-toolbar__trailing.sc-ds-table-toolbar{flex:0 0 auto;margin-inline-start:auto}.table-toolbar__leading.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar slot.sc-ds-table-toolbar{display:contents}`;const b=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.label="Table controls"}render(){return l(t,{key:"86773c3265f38ee4bec75acdfdaace6373c21087"},l("div",{key:"e922a2db8b399e825373fa2c62760815d5fe5040",class:"table-toolbar",role:"toolbar","aria-label":this.label},l("div",{key:"c3ccf787c6959601f17e89a5151f3be2e5049c61",class:"table-toolbar__leading"},l("slot",{key:"0cb9fa97c20ef16b9d805870cf82b6bc8ab400aa",name:"leading"})),l("div",{key:"24191fecd08d446a5e253670c25b8c6d10a3b788",class:"table-toolbar__trailing"},l("slot",{key:"83866d2c40f8d817444407d07c7c6b6c7da9b166",name:"trailing"}))))}static get style(){return s()}},[262,"ds-table-toolbar",{label:[1]}]);function i(){if(typeof customElements==="undefined"){return}const a=["ds-table-toolbar"];a.forEach((a=>{switch(a){case"ds-table-toolbar":if(!customElements.get(o(a))){customElements.define(o(a),b)}break}}))}i();const n=b;const r=i;export{n as DsTableToolbar,r as defineCustomElement};
+import{p as t,H as e,h as a,a as l,t as o}from"./index.js";import{d as s}from"./p-BNkU9dcc.js";const b=()=>`.sc-ds-table-toolbar-h{display:block;min-inline-size:0;max-inline-size:100%}.table-toolbar.sc-ds-table-toolbar{box-sizing:border-box;display:flex;align-items:center;inline-size:100%;min-inline-size:0;gap:var(--dimension-space-100);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.table-toolbar.sc-ds-table-toolbar::-webkit-scrollbar{display:none}.table-toolbar__start.sc-ds-table-toolbar,.table-toolbar__search.sc-ds-table-toolbar,.table-toolbar__main.sc-ds-table-toolbar,.table-toolbar__leading.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar{display:flex;align-items:center;min-inline-size:0;gap:var(--dimension-space-100)}.table-toolbar__start.sc-ds-table-toolbar{flex:0 1 var(--dimension-menu-width-xs);min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs);overflow:hidden}.table-toolbar__rule.sc-ds-table-toolbar{flex:0 0 auto}.table-toolbar__main.sc-ds-table-toolbar{flex:1 1 auto;min-inline-size:min-content}.table-toolbar__search.sc-ds-table-toolbar{flex:0 1 var(--dimension-panel-width-xs);max-inline-size:var(--dimension-panel-width-xs)}(.sc-ds-table-toolbar-h:not(:has([slot='search']))) .table-toolbar__search.sc-ds-table-toolbar{display:none}(.sc-ds-table-toolbar-h:not(:has([slot='start']))) .table-toolbar__start.sc-ds-table-toolbar,(.sc-ds-table-toolbar-h:not(:has([slot='start']))) .table-toolbar__rule.sc-ds-table-toolbar{display:none}.table-toolbar__leading.sc-ds-table-toolbar{flex:1 0 auto}.table-toolbar__trailing.sc-ds-table-toolbar{flex:0 0 auto;margin-inline-start:auto}.table-toolbar__trailing.sc-ds-table-toolbar>*.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar [slot='start'].sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-filter-menu.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-select.sc-ds-table-toolbar,.table-toolbar.sc-ds-table-toolbar ds-table-sort.sc-ds-table-toolbar{min-inline-size:0;max-inline-size:var(--dimension-menu-width-xs);--ds-choice-popup-min-inline-size:var(--dimension-menu-width-xs)}.table-toolbar__start.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__search.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__leading.sc-ds-table-toolbar slot.sc-ds-table-toolbar,.table-toolbar__trailing.sc-ds-table-toolbar slot.sc-ds-table-toolbar{display:contents}`;const r="ds-filter-menu, ds-select";const i=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.label="Table controls";this.syncCaptionControls=()=>{for(const t of this.el.querySelectorAll(r)){if(t.closest("ds-table-saved-views"))continue;if(t.collapseLabel)continue;t.collapseLabel=true}}}componentDidLoad(){this.connectCaptionControlObserver()}disconnectedCallback(){this.captionControlObserver?.disconnect()}render(){return a(l,{key:"5fca6127830eaad086c6eb29bcb577b7bc216881"},a("div",{key:"6f72461715945f8417bb6b606743f37d86cd2ae8",class:"table-toolbar",role:"toolbar","aria-label":this.label},a("div",{key:"ac5ec869572fea7fb4e49dac86bdd5e2de7a3fd8",class:"table-toolbar__start"},a("slot",{key:"fdef886e7248a19800aec5239d513067889357b4",name:"start"})),a("ds-divider",{key:"86c477cfb597691bd75ebdf600145c4696d5c8fb",class:"table-toolbar__rule",orientation:"vertical",length:"32px"}),a("div",{key:"a05084a0d5731b8fbd353aef9c25003bc4090974",class:"table-toolbar__main"},a("div",{key:"b74b7595e544ac5447986ebc754788c9a152a200",class:"table-toolbar__search"},a("slot",{key:"d299ce693e73c45b76202a3ab9fcde61fedc8244",name:"search"})),a("div",{key:"017bf42199758479bf7d5a7c2cbc1f0c6b83eb64",class:"table-toolbar__leading"},a("slot",{key:"28d552f2b76f13d53d39a11d45a1c4e2acae1516",name:"leading"})),a("div",{key:"fe9de7ece3473903ea7279ee571f6cd3a273c7e6",class:"table-toolbar__trailing"},a("slot",{key:"be72e33ce304c831471031c7613ffb718676b9e0",name:"trailing"})))))}connectCaptionControlObserver(){if(this.captionControlObserver||typeof MutationObserver==="undefined")return;this.captionControlObserver=new MutationObserver(this.syncCaptionControls);this.captionControlObserver.observe(this.el,{childList:true,subtree:true});this.syncCaptionControls()}get el(){return this}static get style(){return b()}},[262,"ds-table-toolbar",{label:[1]}]);function n(){if(typeof customElements==="undefined"){return}const t=["ds-table-toolbar","ds-divider"];t.forEach((t=>{switch(t){case"ds-table-toolbar":if(!customElements.get(o(t))){customElements.define(o(t),i)}break;case"ds-divider":if(!customElements.get(o(t))){s()}break}}))}n();const d=i;const c=n;export{d as DsTableToolbar,c as defineCustomElement};
 //# sourceMappingURL=ds-table-toolbar.js.map