@ds-mo/ui 0.6.0 → 0.7.1

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"c2e6f2b424ae40a8fc267209e1f427a7308ae997",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"bed727ba93dab399d965ea41db450509b04ea463",class:{box:true,"box--marked":e}},e&&c("span",{key:"069c89ee183d64e4d98d738e5131ba46341c72b6",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"351edc030ea8c2d7b461eae23f5bb2d24634dc26",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
+import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"84c5739f9f5b2af0b858bcfa82411e78cb0bc74f",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"f7c77109003ed8591726f2d6e86dfc1c72ef4c2f",class:{box:true,"box--marked":e}},e&&c("span",{key:"dad6614a2efd458a4afaca4080e2a9ec24769a59",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"77e5320933b67254510fef96aa68587c5415d980",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const l=d;export{h as DsCheckbox,l as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as d,a as l,t}from"./index.js";const i=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let a=0;const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++a}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"abd78699b1ea7f147fd986804cb49a2a7e8161c8"},d("div",{key:"655188650b2b5f814d6a0180c29c36f476b79c98",class:"field"},d("label",{key:"169353b9ec7e2a40408490d746fe9d7a761152d0",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"df264f83beeb9ea6c8e4abde42b62e59d7addb92"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),c)}break}}))}f();const n=c;const o=f;export{n as DsField,o as defineCustomElement};
+import{p as e,H as s,h as d,a as l,t}from"./index.js";const i=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let c=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++c}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"871d99b66b8c173170bfd8af8946a136a8480376"},d("div",{key:"d124342c56805d07deb572cbbce189a39107fe75",class:"field"},d("label",{key:"e51514e6cf35064f8d652b5fef5384ab5970295e",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"dd7478ebc32c7d177cb555367069b755c7f0c27a"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-icon.d.ts

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

package/dist/components/ds-icon.js

@@ -0,0 +1,2 @@
+import{I as o,d as s}from"./p-Bi2mMcOi.js";const t=o;const c=s;export{t as DsIcon,c as defineCustomElement};
+//# sourceMappingURL=ds-icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as s,h as t,a,t as r}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const r=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(a,{key:"3fd6df8c2cadf139ff5b43fca917f7adf806f5eb",class:"input-container"},t("div",{key:"35fadf6c002303d24450037900a4ed9ba4c5aada",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"496c488d4497c2f73c248da93bc99371cea8b2e1",class:"row"},t("input",{key:"68ba1677844e6bbbca4cc849e19169adbb750f4a",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":r,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"5bfa02e6f818355e3e2c2b6287636363ddee1616",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"99e169ed846ef143a1ef325f105374b0d65a748b","aria-hidden":"true"},"×")),t("span",{key:"cabe4804cd83b35ffb02184738b2e652c0a8358d",class:"suffix"},t("slot",{key:"c217e76a8eb629d9c792c5f7d5a635c9f0b162d4",name:"suffix"})))),s&&t("div",{key:"ec58e969e9daec52b335fb176d368166e78eadb3",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
+import{p as e,H as i,c as s,h as a,a as t,t as r}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const r=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return a(t,{key:"08d1782a46b53a628e5c9533352acfe0e4aada28",class:"input-container"},a("div",{key:"504c03912fb25cc8a3ee3c25c6c9ba1b6c72617d",class:{wrapper:true,"wrapper--error":this.error}},a("div",{key:"06af1a2182914328ceaa340900cbb8509801735d",class:"row"},a("input",{key:"9e30342e738fc7f6a86922b07f920fc45891a2a1",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":r,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&a("button",{key:"6e6895692c7d73c03f990a917cce7f3d9ebabb38",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},a("span",{key:"6312b17ae4d3c12f14120f28ac7b1531d41b3bbb","aria-hidden":"true"},"×")),a("span",{key:"53f815a09a112bee433d9f5d2b3192bd1c27d1e0",class:"suffix"},a("slot",{key:"f09bdf3262b4bdf0880a6a574ae28df13762a5a6",name:"suffix"})))),s&&a("div",{key:"6f54cc2df5894de3731a3642c1d3be36536e696b",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["inputCss","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","type","inactive","autoFocus","error","handleInput","e","dsChange","emit","target","handleClear","dsClear","el","querySelector","focus","setFocus","render","inputId","showClear","length","showError","Boolean","errorMessage","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","wrapper","id","placeholder","disabled","ariaLabel","ariaLabelledby","onInput","onClick","name","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":[".input-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.wrapper {\n  width: 100%;\n  height: var(--dimension-size-400);\n  display: flex;\n  align-items: center;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  box-sizing: border-box;\n}\n\n.wrapper:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-foreground-bold-brand);\n}\n\n.wrapper--error {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.wrapper--error:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  gap: var(--dimension-space-050);\n}\n\n.native-input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--dimension-space-100);\n  background: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-primary);\n  border-radius: var(--dimension-radius-075);\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.native-input::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n.native-input:focus::placeholder {\n  color: var(--color-foreground-tertiary);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.clear-btn {\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-050);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n}\n\n.suffix:empty {\n  display: none;\n}\n\n.error-text {\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  color: var(--color-foreground-bold-negative);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Method, h, Host } from '@stencil/core';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop() value: string = '';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  @Prop() inactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit((e.target as HTMLInputElement).value);\n  };\n\n  private handleClear = () => {\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const showClear = this.type === 'search' && this.value.length > 0 && !this.inactive;\n    const showError = this.error && Boolean(this.errorMessage);\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host class=\"input-container\">\n        <div class={{ wrapper: true, 'wrapper--error': this.error }}>\n          <div class=\"row\">\n            <input\n              type={this.type}\n              id={inputId}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.inactive}\n              autoFocus={this.autoFocus}\n              class=\"native-input\"\n              aria-label={this.ariaLabel}\n              aria-labelledby={this.ariaLabelledby}\n              aria-describedby={describedBy}\n              aria-invalid={this.error || undefined}\n              onInput={this.handleInput}\n            />\n            {showClear && (\n              <button\n                type=\"button\"\n                class=\"clear-btn\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                <span aria-hidden=\"true\">&times;</span>\n              </button>\n            )}\n            <span class=\"suffix\">\n              <slot name=\"suffix\" />\n            </span>\n          </div>\n        </div>\n        {showError && (\n          <div id={this.errorId} role=\"alert\" class=\"error-text\">\n            {this.errorMessage}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAW,IAAM,gqECIvB,IAAIC,EAAY,E,MAOHC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4GAQUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAElBD,KAAAG,MAAgB,GAEhBH,KAAAI,KAAkB,OAClBJ,KAAAK,SAAoB,MACpBL,KAAAM,UAAqB,MACrBN,KAAAO,MAAiB,MAgBjBP,KAAAQ,YAAeC,IACrBT,KAAKU,SAASC,KAAMF,EAAEG,OAA4BT,MAAM,EAGlDH,KAAAa,YAAc,KACpBb,KAAKU,SAASC,KAAK,IACnBX,KAAKc,QAAQH,OACbX,KAAKe,GAAGC,cAAc,UAAUC,OAAO,CAsD1C,CAjEC,cAAMC,GACJlB,KAAKe,GAAGC,cAAc,UAAUC,O,CAalC,MAAAE,GACE,MAAMC,EAAUpB,KAAKoB,SAAWpB,KAAKC,YACrC,MAAMoB,EAAYrB,KAAKI,OAAS,UAAYJ,KAAKG,MAAMmB,OAAS,IAAMtB,KAAKK,SAC3E,MAAMkB,EAAYvB,KAAKO,OAASiB,QAAQxB,KAAKyB,cAE7C,MAAMC,EAAc,CAClB1B,KAAK2B,gBACLJ,EAAYvB,KAAKE,QAAU0B,WAC3BC,OAAOL,SAASM,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,QAAS,KAAM,iBAAkBnC,KAAKO,QAClDwB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OACTH,EAAA,SAAAE,IAAA,2CACE7B,KAAMJ,KAAKI,KACXgC,GAAIhB,EACJjB,MAAOH,KAAKG,MACZkC,YAAarC,KAAKqC,YAClBC,SAAUtC,KAAKK,SACfC,UAAWN,KAAKM,UAChB4B,MAAM,eAAc,aACRlC,KAAKuC,UAAS,kBACTvC,KAAKwC,eAAc,mBAClBd,EAAW,eACf1B,KAAKO,OAASqB,UAC5Ba,QAASzC,KAAKQ,cAEfa,GACCU,EAAA,UAAAE,IAAA,2CACE7B,KAAK,SACL8B,MAAM,YACNQ,QAAS1C,KAAKa,YAAW,aACd,SAEXkB,EAAA,QAAAE,IAAA,yDAAkB,QAAM,MAG5BF,EAAA,QAAAE,IAAA,2CAAMC,MAAM,UACVH,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAIhBpB,GACCQ,EAAA,OAAAE,IAAA,2CAAKG,GAAIpC,KAAKE,QAAS0C,KAAK,QAAQV,MAAM,cACvClC,KAAKyB,c","ignoreList":[]}
+{"version":3,"names":["inputCss","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","type","inactive","autoFocus","error","handleInput","e","dsChange","emit","target","handleClear","dsClear","el","querySelector","focus","setFocus","render","inputId","showClear","length","showError","Boolean","errorMessage","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","wrapper","id","placeholder","disabled","ariaLabel","ariaLabelledby","onInput","onClick","name","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":[".input-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.wrapper {\n  width: 100%;\n  height: var(--dimension-size-400);\n  display: flex;\n  align-items: center;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  box-sizing: border-box;\n}\n\n.wrapper:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-foreground-bold-brand);\n}\n\n.wrapper--error {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.wrapper--error:focus-within {\n  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  gap: var(--dimension-space-050);\n}\n\n.native-input {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--dimension-space-100);\n  background: transparent;\n  border: none;\n  outline: none;\n  font-family: inherit;\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  color: var(--color-foreground-primary);\n  border-radius: var(--dimension-radius-075);\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.native-input::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\n.native-input:focus::placeholder {\n  color: var(--color-foreground-tertiary);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.clear-btn {\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-050);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.clear-btn:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.suffix {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  margin-right: var(--dimension-space-050);\n}\n\n.suffix:empty {\n  display: none;\n}\n\n.error-text {\n  font-size: var(--typography-fontsize-sm);\n  line-height: var(--typography-lineheight-sm);\n  color: var(--color-foreground-bold-negative);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Method, h, Host } from '@stencil/core';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop() value: string = '';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  @Prop() inactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit((e.target as HTMLInputElement).value);\n  };\n\n  private handleClear = () => {\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const showClear = this.type === 'search' && this.value.length > 0 && !this.inactive;\n    const showError = this.error && Boolean(this.errorMessage);\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host class=\"input-container\">\n        <div class={{ wrapper: true, 'wrapper--error': this.error }}>\n          <div class=\"row\">\n            <input\n              type={this.type}\n              id={inputId}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.inactive}\n              autoFocus={this.autoFocus}\n              class=\"native-input\"\n              aria-label={this.ariaLabel}\n              aria-labelledby={this.ariaLabelledby}\n              aria-describedby={describedBy}\n              aria-invalid={this.error || undefined}\n              onInput={this.handleInput}\n            />\n            {showClear && (\n              <button\n                type=\"button\"\n                class=\"clear-btn\"\n                onClick={this.handleClear}\n                aria-label=\"Clear\"\n              >\n                <span aria-hidden=\"true\">&times;</span>\n              </button>\n            )}\n            <span class=\"suffix\">\n              <slot name=\"suffix\" />\n            </span>\n          </div>\n        </div>\n        {showError && (\n          <div id={this.errorId} role=\"alert\" class=\"error-text\">\n            {this.errorMessage}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAW,IAAM,gqECIvB,IAAIC,EAAY,E,MAOHC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4GAQUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAElBD,KAAAG,MAAgB,GAEhBH,KAAAI,KAAkB,OAClBJ,KAAAK,SAAoB,MACpBL,KAAAM,UAAqB,MACrBN,KAAAO,MAAiB,MAgBjBP,KAAAQ,YAAeC,IACrBT,KAAKU,SAASC,KAAMF,EAAEG,OAA4BT,MAAM,EAGlDH,KAAAa,YAAc,KACpBb,KAAKU,SAASC,KAAK,IACnBX,KAAKc,QAAQH,OACbX,KAAKe,GAAGC,cAAc,UAAUC,OAAO,CAsD1C,CAjEC,cAAMC,GACJlB,KAAKe,GAAGC,cAAc,UAAUC,O,CAalC,MAAAE,GACE,MAAMC,EAAUpB,KAAKoB,SAAWpB,KAAKC,YACrC,MAAMoB,EAAYrB,KAAKI,OAAS,UAAYJ,KAAKG,MAAMmB,OAAS,IAAMtB,KAAKK,SAC3E,MAAMkB,EAAYvB,KAAKO,OAASiB,QAAQxB,KAAKyB,cAE7C,MAAMC,EAAc,CAClB1B,KAAK2B,gBACLJ,EAAYvB,KAAKE,QAAU0B,WAC3BC,OAAOL,SAASM,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAEC,QAAS,KAAM,iBAAkBnC,KAAKO,QAClDwB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,OACTH,EAAA,SAAAE,IAAA,2CACE7B,KAAMJ,KAAKI,KACXgC,GAAIhB,EACJjB,MAAOH,KAAKG,MACZkC,YAAarC,KAAKqC,YAClBC,SAAUtC,KAAKK,SACfC,UAAWN,KAAKM,UAChB4B,MAAM,eAAc,aACRlC,KAAKuC,UAAS,kBACTvC,KAAKwC,eAAc,mBAClBd,EAAW,eACf1B,KAAKO,OAASqB,UAC5Ba,QAASzC,KAAKQ,cAEfa,GACCU,EAAA,UAAAE,IAAA,2CACE7B,KAAK,SACL8B,MAAM,YACNQ,QAAS1C,KAAKa,YAAW,aACd,SAEXkB,EAAA,QAAAE,IAAA,yDAAkB,QAAM,MAG5BF,EAAA,QAAAE,IAAA,2CAAMC,MAAM,UACVH,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAIhBpB,GACCQ,EAAA,OAAAE,IAAA,2CAAKG,GAAIpC,KAAKE,QAAS0C,KAAK,QAAQV,MAAM,cACvClC,KAAKyB,c","ignoreList":[]}

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as a,h as s,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const a=this.getFocusables(t);if(!a.length){e.preventDefault();t.focus();return}const s=a[0];const o=a[a.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();s.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"d2f1e6a955424358bb9743583ee9888edac3f071",style:{display:"contents"}},s("div",{key:"a2c2ab567b365379aa17150c32ed0b2d14373e12",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},s("div",{key:"ad4bd8f8b4f6eed83d889b6eae7474aecfaa5054",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},s("div",{key:"2de71e138ce48804de00a8015422e390e9987d9e",class:"modal-header"},s("h2",{key:"cee855d0f73e5574281e4d10777d2fd59f541668",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&s("div",{key:"1da7d6a5c84261aa0758636372b19ac01cfc5854",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),s("div",{key:"35ff42f733ff8a35c1a27e765720ea0d2b861c89",class:"modal-body"},s("slot",{key:"3720028d5831ce5b87a793d003820f61907e30a2"})),s("div",{key:"a5cdf2b1d639dae2e9f36cbedf0587e55184b4e8",class:"modal-footer"},s("slot",{key:"567dbac11f5712e70573398087ff66bb831c658b",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}h();const f=m;const u=h;export{f as DsModal,u as defineCustomElement};
+import{p as e,H as t,c as s,h as a,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const s=this.getFocusables(t);if(!s.length){e.preventDefault();t.focus();return}const a=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===a||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();a.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return a(o,{key:"bce39962324d4bfcf352127effb10bb3c5130f4b",style:{display:"contents"}},a("div",{key:"8afe43cec36ca7ef62249a6ceeace7c3da815501",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},a("div",{key:"44db66250f6ce48251e43355b84fe8fc2f2a9b14",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},a("div",{key:"f5e4386df40a94e0318024919b8d586436299199",class:"modal-header"},a("h2",{key:"56ba81706fdb5d1987b39261770bb93173345182",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&a("div",{key:"6482f2a6c8c42e386a025986acfce853d62f7f30",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),a("div",{key:"366b1908db80df07a1b1c0feb665d8ce0da98dd3",class:"modal-body"},a("slot",{key:"bfba4271887691f32fbe6d6932732069de4cd6e6"})),a("div",{key:"274b1b9b190dfc3d5321554c8a1beec704d3e604",class:"modal-footer"},a("slot",{key:"319bfe93a23a6902506df1659db5a498a660045c",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}f();const h=m;const b=f;export{h as DsModal,b as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

package/dist/components/ds-panel-nav.d.ts

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

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

@@ -0,0 +1,2 @@
+import{p as a,H as n,c as e,h as i,a as t,t as o}from"./index.js";import{d as s}from"./p-Bi2mMcOi.js";import{d as r}from"./p-DNEqvbOR.js";const d=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),     min-width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),     background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease),     border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);font-family:var(--typography-font-family, system-ui)}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{text-transform:uppercase;color:var(--_nav-fg-tertiary);padding:0 var(--dimension-space-050, 4px);margin-bottom:var(--dimension-space-025, 2px);white-space:nowrap;overflow:hidden;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__item.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px)}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot-wrap.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px)}.panel-nav__item-dot.sc-ds-panel-nav{width:var(--dimension-space-075, 6px);height:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-full, 999px);background:var(--_nav-dot);flex-shrink:0;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}.panel-nav__item-dot--mini.sc-ds-panel-nav{position:absolute;top:0;right:0;flex-shrink:unset;box-shadow:0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item.sc-ds-panel-nav{justify-content:center;padding:0 var(--dimension-space-075, 6px);gap:0}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav,.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav,.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav:not(.panel-nav__item-dot--mini){display:none}.panel-nav__footer.sc-ds-panel-nav{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050, 4px);padding:var(--_nav-padding-y) var(--_nav-padding-x);flex-shrink:0;position:relative}.panel-nav__footer.sc-ds-panel-nav::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:calc(var(--dimension-base, 8px) * 6);background:linear-gradient(to bottom, transparent, var(--_nav-bg));pointer-events:none;opacity:1;transition:opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--at-bottom.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav::before{opacity:0}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{flex-direction:column;align-items:center;gap:var(--dimension-space-050, 4px)}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half, 9999px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;flex-shrink:0;box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--dashboard.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--settings.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{flex:1;width:auto}.panel-nav__footer-user.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-align:right}.panel-nav__footer-user-mini.sc-ds-panel-nav{position:relative}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease)}`;const l=a(class a extends n{constructor(a){super();if(a!==false){this.__registerHost()}this.dsNavSelect=e(this,"dsNavSelect");this.dsNavToggle=e(this,"dsNavToggle");this.dsNavFooterAction=e(this,"dsNavFooterAction");this.variant="dashboard";this.groups="[]";this.activeId="";this.collapsed=false;this.userName="";this.userInitial="";this.parsedGroups=[];this.atBottom=false}onGroupsChange(a){try{this.parsedGroups=JSON.parse(a)}catch{this.parsedGroups=[]}}componentWillLoad(){this.onGroupsChange(this.groups)}componentDidLoad(){this.checkScroll()}checkScroll(){const a=this.el.querySelector(".panel-nav__body");if(!a)return;const n=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=n<2}handleBodyScroll(a){const n=a.target;const e=n.scrollHeight-n.scrollTop-n.clientHeight;this.atBottom=e<2}handleItemClick(a){this.dsNavSelect.emit(a)}handleToggle(){this.dsNavToggle.emit(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}render(){const a=this.variant==="dashboard";const{collapsed:n,userName:e,userInitial:o}=this;const s={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":n,"panel-nav--at-bottom":this.atBottom};return i(t,{key:"3b51aac976c81f55e0bea002e1606efa036d5378"},i("nav",{key:"345840af650f7e85a7f9f0e15ca4e2911ca71d63",class:s,"aria-label":a?"Main navigation":"Settings navigation"},i("div",{key:"a18e6ef59247d2d79f2e5428b20bf32b9266503c",class:"panel-nav__header"},i("button",{key:"c7be2e6061021250d191b59dfc49828c2668718d",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":n?"Expand navigation":"Collapse navigation"},i("span",{key:"4a14fa4ca4ca17a7b1db2c4634c5957b98ec2d87",class:"panel-nav__header-logo","aria-hidden":"true"},i("svg",{key:"7f5c7e76cd7a083076faa959e7ca9b0875998f9d",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{key:"df82fe5f08081ff5c5d6adbccd9098a3de2472ea",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),i("span",{key:"d8c4b3af4857659589365abd9c0f043e8feba440",class:"panel-nav__header-toggle","aria-hidden":"true"},i("ds-icon",{key:"8706adef46373dbe091e7b08433b0732eea44ff9",name:n?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),i("div",{key:"b450d7bc3c4135587c3867cfd1073ce3e89aa868",class:"panel-nav__body",onScroll:a=>this.handleBodyScroll(a)},this.parsedGroups.map((a=>i("div",{class:"panel-nav__group"},a.label&&!n&&i("span",{class:"panel-nav__group-label"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},a.label)),a.items.map((a=>{const e=a.id===this.activeId;return i("button",{type:"button",class:{"panel-nav__item":true,"panel-nav__item--active":e},"aria-current":e?"page":undefined,title:n?a.label:undefined,onClick:()=>this.handleItemClick(a.id)},i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:a.icon,size:"md",color:"inherit",flag:a.flag}),a.dot&&n&&i("span",{class:"panel-nav__item-dot panel-nav__item-dot--mini","aria-hidden":"true"})),!n&&i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:e?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},a.label))),a.dot&&!n&&i("span",{class:"panel-nav__item-dot-wrap","aria-hidden":"true"},i("span",{class:"panel-nav__item-dot"})))})))))),i("div",{key:"6f2118c33fe3792b746101135af5fb174fa54a68",class:"panel-nav__footer"},i("button",{key:"5a7b217bebb5bcf746d3bcb04463d90c0316b2dc",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},i("ds-icon",{key:"4fbe7016de4d5536f7e0b22129d2af5f450fac99",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),n?i("button",{type:"button",class:"panel-nav__footer-btn panel-nav__footer-user-mini",title:e,"aria-label":`User: ${e}`},i("ds-icon",{name:"Circle",size:"md",color:"inherit"}),i("span",{class:"panel-nav__user-initial","aria-hidden":"true"},i("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},o))):i("button",{type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":`User menu for ${e}`},i("span",{class:"panel-nav__item-label"},i("span",{class:"panel-nav__item-label-text"},i("ds-text",{as:"span",variant:"text-body-medium-emphasis",color:"inherit"},e))),i("span",{class:"panel-nav__item-icon"},i("ds-icon",{name:"ChevronUpDown",size:"md",color:"inherit"}))))))}get el(){return this}static get watchers(){return{groups:[{onGroupsChange:0}]}}static get style(){return d()}},[2,"ds-panel-nav",{variant:[1],groups:[1],activeId:[1,"active-id"],collapsed:[4],userName:[1,"user-name"],userInitial:[1,"user-initial"],parsedGroups:[32],atBottom:[32]},undefined,{groups:[{onGroupsChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const a=["ds-panel-nav","ds-icon","ds-text"];a.forEach((a=>{switch(a){case"ds-panel-nav":if(!customElements.get(o(a))){customElements.define(o(a),l)}break;case"ds-icon":if(!customElements.get(o(a))){s()}break;case"ds-text":if(!customElements.get(o(a))){r()}break}}))}c();const v=l;const p=c;export{v as DsPanelNav,p as defineCustomElement};
+//# sourceMappingURL=ds-panel-nav.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["panelNavCss","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","groups","activeId","collapsed","userName","userInitial","parsedGroups","atBottom","onGroupsChange","val","JSON","parse","componentWillLoad","componentDidLoad","checkScroll","body","el","querySelector","remaining","scrollHeight","scrollTop","clientHeight","handleBodyScroll","e","target","handleItemClick","id","dsNavSelect","emit","handleToggle","dsNavToggle","handleFooterAction","dsNavFooterAction","render","isDashboard","navCls","h","Host","key","class","type","onClick","viewBox","fill","xmlns","d","name","size","color","onScroll","map","group","label","as","items","item","isActive","undefined","title","icon","flag","dot"],"sources":["src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n  /* ─ Sizes ─ */\n  --_nav-width:           200px;\n  --_nav-width-collapsed: 48px;\n  --_nav-item-height:     var(--dimension-size-400, 32px);\n  --_nav-padding-x:       var(--dimension-space-100, 8px);\n  --_nav-padding-y:       var(--dimension-space-100, 8px);\n\n  /* ─ Colours – dashboard defaults ─ */\n  --_nav-bg:              var(--color-navigation-background);\n  --_nav-border:          var(--color-navigation-border-tertiary);\n  --_nav-divider:         var(--color-navigation-divider);\n  --_nav-fg-primary:      var(--color-navigation-foreground-primary);\n  --_nav-fg-secondary:    var(--color-navigation-foreground-secondary);\n  --_nav-fg-tertiary:     var(--color-navigation-foreground-tertiary);\n  --_nav-hover:           var(--color-navigation-interaction-hover);\n  --_nav-pressed:         var(--color-navigation-interaction-pressed);\n  --_nav-focus:           var(--color-navigation-interaction-focus);\n  --_nav-dot:             var(--color-navigation-foreground-brand);\n}\n\n/* ── Settings overrides ──────────────────────────────────────────────────── */\n\n.panel-nav--settings {\n  --_nav-bg:           var(--color-background-secondary);\n  --_nav-border:       var(--color-border-tertiary);\n  --_nav-divider:      var(--color-border-tertiary);\n  --_nav-fg-primary:   var(--color-foreground-primary);\n  --_nav-fg-secondary: var(--color-foreground-secondary);\n  --_nav-fg-tertiary:  var(--color-foreground-tertiary);\n  --_nav-hover:        var(--color-interaction-hover);\n  --_nav-pressed:      var(--color-interaction-pressed);\n  --_nav-focus:        var(--color-interaction-focus);\n  --_nav-dot:          var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n  display: flex;\n  flex-direction: column;\n  width: var(--_nav-width);\n  min-width: var(--_nav-width);\n  height: 100%;\n  background: var(--_nav-bg);\n  border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n  box-sizing: border-box;\n  overflow: hidden;\n  transition:\n    width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),\n    min-width var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease),\n    background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease),\n    border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n  font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav--collapsed {\n  width: var(--_nav-width-collapsed);\n  min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-100, 8px);\n  flex-shrink: 0;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n  transition: border-color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n.panel-nav__header-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-primary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n  pointer-events: none;\n}\n\n.panel-nav__header-btn:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n  transition: opacity var(--effect-animation-duration-short-2, 100ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n.panel-nav__m-mark {\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-200, 16px);\n  padding: var(--dimension-space-100, 8px);\n  box-sizing: border-box;\n  scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n  /* Typography via ds-text (text-caption-emphasis) */\n  text-transform: uppercase;\n  color: var(--_nav-fg-tertiary);\n  padding: 0 var(--dimension-space-050, 4px);\n  margin-bottom: var(--dimension-space-025, 2px);\n  white-space: nowrap;\n  overflow: hidden;\n  transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n  all: unset;\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: 0 var(--dimension-space-075, 6px);\n  height: var(--dimension-size-400, 32px);\n  border-radius: var(--dimension-radius-025, 2px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  user-select: none;\n  transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__item:hover::after  { background: var(--_nav-hover);   transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible::after {\n  outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n  color: var(--_nav-fg-primary);\n  /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n  position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n  height: var(--typography-lineheight-md, 20px);\n  line-height: var(--typography-lineheight-md, 20px);\n}\n\n.panel-nav__item-label-text {\n  padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot ───────────────────────────────────────────────── */\n\n.panel-nav__item-dot-wrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-iconography-md, 20px);\n  height: var(--dimension-iconography-md, 20px);\n}\n\n.panel-nav__item-dot {\n  width: var(--dimension-space-075, 6px);\n  height: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-full, 999px);\n  background: var(--_nav-dot);\n  flex-shrink: 0;\n  transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n\n.panel-nav__item-dot--mini {\n  position: absolute;\n  top: 0;\n  right: 0;\n  flex-shrink: unset;\n  box-shadow: 0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);\n}\n\n/* ── Collapsed: centre the icon ──────────────────────────────────────────── */\n\n.panel-nav--collapsed .panel-nav__item {\n  justify-content: center;\n  padding: 0 var(--dimension-space-075, 6px);\n  gap: 0;\n}\n\n.panel-nav--collapsed .panel-nav__item-label,\n.panel-nav--collapsed .panel-nav__group-label,\n.panel-nav--collapsed .panel-nav__item-dot:not(.panel-nav__item-dot--mini) {\n  display: none;\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n  padding: var(--_nav-padding-y) var(--_nav-padding-x);\n  flex-shrink: 0;\n  position: relative;\n}\n\n/* Gradient fade — floats above the footer, masks content scrolling under it */\n.panel-nav__footer::before {\n  content: '';\n  position: absolute;\n  bottom: 100%;\n  left: 0;\n  right: 0;\n  height: calc(var(--dimension-base, 8px) * 6);\n  background: linear-gradient(to bottom, transparent, var(--_nav-bg));\n  pointer-events: none;\n  opacity: 1;\n  transition: opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav--at-bottom .panel-nav__footer::before {\n  opacity: 0;\n}\n\n/* Collapsed footer: stack gear + user vertically */\n.panel-nav--collapsed .panel-nav__footer {\n  flex-direction: column;\n  align-items: center;\n  gap: var(--dimension-space-050, 4px);\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n  all: unset;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075, 6px);\n  border-radius: var(--dimension-radius-half, 9999px);\n  cursor: pointer;\n  color: var(--_nav-fg-secondary);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  background: transparent;\n  transition:\n    background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n    color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n/* Dashboard: hover previews settings surface */\n.panel-nav--dashboard .panel-nav__footer-btn:hover {\n  background: var(--color-background-secondary);\n  color: var(--color-foreground-secondary);\n  transition: none;\n}\n\n/* Settings: hover previews dashboard nav surface */\n.panel-nav--settings .panel-nav__footer-btn:hover {\n  background: var(--color-navigation-background);\n  color: var(--color-navigation-foreground-secondary);\n  transition: none;\n}\n\n/* ── Footer user (expanded) — panel-nav__item base, icon on right ────────── */\n\n.panel-nav__footer-user {\n  flex: 1;\n  width: auto;\n}\n\n.panel-nav__footer-user .panel-nav__item-label {\n  text-align: right;\n}\n\n/* ── Footer user mini (collapsed) — avatar icon + overlaid initial ───────── */\n\n.panel-nav__footer-user-mini {\n  position: relative;\n}\n\n.panel-nav__user-initial {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--_nav-fg-secondary);\n  text-transform: uppercase;\n  line-height: 1;\n  pointer-events: none;\n  transition: color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-in-out, ease);\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\n\nexport type PanelNavVariant = 'dashboard' | 'settings';\n\nexport interface PanelNavItem {\n  id: string;\n  icon: string;\n  label: string;\n  /** Show a notification dot badge on the item */\n  dot?: boolean;\n  flag?: boolean;\n}\n\nexport interface PanelNavGroup {\n  id?: string;\n  label?: string;\n  items: PanelNavItem[];\n}\n\n@Component({\n  tag: 'ds-panel-nav',\n  styleUrl: 'PanelNav.css',\n  scoped: true,\n})\nexport class PanelNav {\n  /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */\n  @Prop() variant: PanelNavVariant = 'dashboard';\n\n  /** JSON string of `PanelNavGroup[]` */\n  @Prop() groups: string = '[]';\n\n  /** ID of the currently active/selected nav item */\n  @Prop() activeId: string = '';\n\n  /** Whether the nav is in collapsed (icon-only) state */\n  @Prop() collapsed: boolean = false;\n\n  /** Display name for the footer user section */\n  @Prop() userName: string = '';\n\n  /** Single character shown in the collapsed avatar */\n  @Prop() userInitial: string = '';\n\n  /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n  @Event() dsNavSelect!: EventEmitter<string>;\n\n  /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n  @Event() dsNavToggle!: EventEmitter<boolean>;\n\n  /** Emitted when the footer left button (gear / dashboard) is clicked. */\n  @Event() dsNavFooterAction!: EventEmitter<void>;\n\n  @Element() el!: HTMLElement;\n\n  @State() private parsedGroups: PanelNavGroup[] = [];\n  @State() private atBottom = false;\n\n  @Watch('groups')\n  onGroupsChange(val: string) {\n    try {\n      this.parsedGroups = JSON.parse(val);\n    } catch {\n      this.parsedGroups = [];\n    }\n  }\n\n  componentWillLoad() {\n    this.onGroupsChange(this.groups);\n  }\n\n  componentDidLoad() {\n    this.checkScroll();\n  }\n\n  private checkScroll() {\n    const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n    if (!body) return;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleBodyScroll(e: Event) {\n    const body = e.target as HTMLElement;\n    const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n    this.atBottom = remaining < 2;\n  }\n\n  private handleItemClick(id: string) {\n    this.dsNavSelect.emit(id);\n  }\n\n  private handleToggle() {\n    this.dsNavToggle.emit(!this.collapsed);\n  }\n\n  private handleFooterAction() {\n    this.dsNavFooterAction.emit();\n  }\n\n  render() {\n    const isDashboard = this.variant === 'dashboard';\n    const { collapsed, userName, userInitial } = this;\n\n    const navCls: Record<string, boolean> = {\n      'panel-nav': true,\n      'panel-nav--dashboard': isDashboard,\n      'panel-nav--settings': !isDashboard,\n      'panel-nav--collapsed': collapsed,\n      'panel-nav--at-bottom': this.atBottom,\n    };\n\n    return (\n      <Host>\n        <nav class={navCls} aria-label={isDashboard ? 'Main navigation' : 'Settings navigation'}>\n\n          {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n          <div class=\"panel-nav__header\">\n            <button\n              type=\"button\"\n              class=\"panel-nav__header-btn\"\n              onClick={() => this.handleToggle()}\n              aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n            >\n              {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n              <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n                <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <path d=\"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z\" fill=\"currentColor\"/>\n                </svg>\n              </span>\n              {/* Collapse / expand icon — revealed on hover via CSS */}\n              <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n                <ds-icon\n                  name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n                  size=\"md\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n          </div>\n\n          {/* ── Scrollable body ── */}\n          <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n            {this.parsedGroups.map(group => (\n              <div class=\"panel-nav__group\">\n                {group.label && !collapsed && (\n                  <span class=\"panel-nav__group-label\">\n                    <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                      {group.label}\n                    </ds-text>\n                  </span>\n                )}\n                {group.items.map(item => {\n                  const isActive = item.id === this.activeId;\n                  return (\n                    <button\n                      type=\"button\"\n                      class={{\n                        'panel-nav__item': true,\n                        'panel-nav__item--active': isActive,\n                      }}\n                      aria-current={isActive ? 'page' : undefined}\n                      title={collapsed ? item.label : undefined}\n                      onClick={() => this.handleItemClick(item.id)}\n                    >\n                      <span class=\"panel-nav__item-icon\">\n                        <ds-icon\n                          name={item.icon}\n                          size=\"md\"\n                          color=\"inherit\"\n                          flag={item.flag}\n                        />\n                        {item.dot && collapsed && (\n                          <span class=\"panel-nav__item-dot panel-nav__item-dot--mini\" aria-hidden=\"true\" />\n                        )}\n                      </span>\n                      {!collapsed && (\n                        <span class=\"panel-nav__item-label\">\n                          <span class=\"panel-nav__item-label-text\">\n                            <ds-text\n                              as=\"span\"\n                              variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n                              color=\"inherit\"\n                            >\n                              {item.label}\n                            </ds-text>\n                          </span>\n                        </span>\n                      )}\n                      {item.dot && !collapsed && (\n                        <span class=\"panel-nav__item-dot-wrap\" aria-hidden=\"true\">\n                          <span class=\"panel-nav__item-dot\" />\n                        </span>\n                      )}\n                    </button>\n                  );\n                })}\n              </div>\n            ))}\n          </div>\n\n          {/* ── Footer ── */}\n          <div class=\"panel-nav__footer\">\n            {/* Left icon button — Gear in dashboard, Dashboard in settings */}\n            <button\n              type=\"button\"\n              class=\"panel-nav__footer-btn\"\n              title={isDashboard ? 'Settings' : 'Dashboard'}\n              aria-label={isDashboard ? 'Open settings' : 'Go to dashboard'}\n              onClick={() => this.handleFooterAction()}\n            >\n              <ds-icon name={isDashboard ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n            </button>\n\n            {/* Right user — expanded: item-style with icon on right; mini: avatar + overlaid initial */}\n            {collapsed ? (\n              <button\n                type=\"button\"\n                class=\"panel-nav__footer-btn panel-nav__footer-user-mini\"\n                title={userName}\n                aria-label={`User: ${userName}`}\n              >\n                <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n                <span class=\"panel-nav__user-initial\" aria-hidden=\"true\">\n                  <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n                    {userInitial}\n                  </ds-text>\n                </span>\n              </button>\n            ) : (\n              <button\n                type=\"button\"\n                class=\"panel-nav__item panel-nav__footer-user\"\n                aria-label={`User menu for ${userName}`}\n              >\n                <span class=\"panel-nav__item-label\">\n                  <span class=\"panel-nav__item-label-text\">\n                    <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n                      {userName}\n                    </ds-text>\n                  </span>\n                </span>\n                <span class=\"panel-nav__item-icon\">\n                  <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n                </span>\n              </button>\n            )}\n          </div>\n\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAc,IAAM,83T,MCwBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6KAOUC,KAAAC,QAA2B,YAG3BD,KAAAE,OAAiB,KAGjBF,KAAAG,SAAmB,GAGnBH,KAAAI,UAAqB,MAGrBJ,KAAAK,SAAmB,GAGnBL,KAAAM,YAAsB,GAabN,KAAAO,aAAgC,GAChCP,KAAAQ,SAAW,KAqM7B,CAlMC,cAAAC,CAAeC,GACb,IACEV,KAAKO,aAAeI,KAAKC,MAAMF,E,CAC/B,MACAV,KAAKO,aAAe,E,EAIxB,iBAAAM,GACEb,KAAKS,eAAeT,KAAKE,O,CAG3B,gBAAAY,GACEd,KAAKe,a,CAGC,WAAAA,GACN,MAAMC,EAAOhB,KAAKiB,GAAGC,cAAc,oBACnC,IAAKF,EAAM,OACX,MAAMG,EAAYH,EAAKI,aAAeJ,EAAKK,UAAYL,EAAKM,aAC5DtB,KAAKQ,SAAWW,EAAY,C,CAGtB,gBAAAI,CAAiBC,GACvB,MAAMR,EAAOQ,EAAEC,OACf,MAAMN,EAAYH,EAAKI,aAAeJ,EAAKK,UAAYL,EAAKM,aAC5DtB,KAAKQ,SAAWW,EAAY,C,CAGtB,eAAAO,CAAgBC,GACtB3B,KAAK4B,YAAYC,KAAKF,E,CAGhB,YAAAG,GACN9B,KAAK+B,YAAYF,MAAM7B,KAAKI,U,CAGtB,kBAAA4B,GACNhC,KAAKiC,kBAAkBJ,M,CAGzB,MAAAK,GACE,MAAMC,EAAcnC,KAAKC,UAAY,YACrC,MAAMG,UAAEA,EAASC,SAAEA,EAAQC,YAAEA,GAAgBN,KAE7C,MAAMoC,EAAkC,CACtC,YAAa,KACb,uBAAwBD,EACxB,uBAAwBA,EACxB,uBAAwB/B,EACxB,uBAAwBJ,KAAKQ,UAG/B,OACE6B,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOJ,EAAM,aAAcD,EAAc,kBAAoB,uBAGhEE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,UAAAE,IAAA,2CACEE,KAAK,SACLD,MAAM,wBACNE,QAAS,IAAM1C,KAAK8B,eAAc,aACtB1B,EAAY,oBAAsB,uBAG9CiC,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yBAAwB,cAAa,QAC/CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBAAoBG,QAAQ,YAAYC,KAAK,OAAOC,MAAM,8BACnER,EAAA,QAAAE,IAAA,2CAAMO,EAAE,qKAAqKF,KAAK,mBAItLP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,2BAA0B,cAAa,QACjDH,EAAA,WAAAE,IAAA,2CACEQ,KAAM3C,EAAY,cAAgB,gBAClC4C,KAAK,KACLC,MAAM,eAOdZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAkBU,SAAU1B,GAAKxB,KAAKuB,iBAAiBC,IAC/DxB,KAAKO,aAAa4C,KAAIC,GACrBf,EAAA,OAAKG,MAAM,oBACRY,EAAMC,QAAUjD,GACfiC,EAAA,QAAMG,MAAM,0BACVH,EAAA,WAASiB,GAAG,OAAOrD,QAAQ,wBAAwBgD,MAAM,WACtDG,EAAMC,QAIZD,EAAMG,MAAMJ,KAAIK,IACf,MAAMC,EAAWD,EAAK7B,KAAO3B,KAAKG,SAClC,OACEkC,EAAA,UACEI,KAAK,SACLD,MAAO,CACL,kBAAmB,KACnB,0BAA2BiB,GAC5B,eACaA,EAAW,OAASC,UAClCC,MAAOvD,EAAYoD,EAAKH,MAAQK,UAChChB,QAAS,IAAM1C,KAAK0B,gBAAgB8B,EAAK7B,KAEzCU,EAAA,QAAMG,MAAM,wBACVH,EAAA,WACEU,KAAMS,EAAKI,KACXZ,KAAK,KACLC,MAAM,UACNY,KAAML,EAAKK,OAEZL,EAAKM,KAAO1D,GACXiC,EAAA,QAAMG,MAAM,gDAA+C,cAAa,WAG1EpC,GACAiC,EAAA,QAAMG,MAAM,yBACVH,EAAA,QAAMG,MAAM,8BACVH,EAAA,WACEiB,GAAG,OACHrD,QAASwD,EAAW,4BAA8B,mBAClDR,MAAM,WAELO,EAAKH,SAKbG,EAAKM,MAAQ1D,GACZiC,EAAA,QAAMG,MAAM,2BAA0B,cAAa,QACjDH,EAAA,QAAMG,MAAM,yBAGT,QAQnBH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBAETH,EAAA,UAAAE,IAAA,2CACEE,KAAK,SACLD,MAAM,wBACNmB,MAAOxB,EAAc,WAAa,YAAW,aACjCA,EAAc,gBAAkB,kBAC5CO,QAAS,IAAM1C,KAAKgC,sBAEpBK,EAAA,WAAAE,IAAA,2CAASQ,KAAMZ,EAAc,OAAS,YAAaa,KAAK,KAAKC,MAAM,aAIpE7C,EACCiC,EAAA,UACEI,KAAK,SACLD,MAAM,oDACNmB,MAAOtD,EAAQ,aACH,SAASA,KAErBgC,EAAA,WAASU,KAAK,SAASC,KAAK,KAAKC,MAAM,YACvCZ,EAAA,QAAMG,MAAM,0BAAyB,cAAa,QAChDH,EAAA,WAASiB,GAAG,OAAOrD,QAAQ,wBAAwBgD,MAAM,WACtD3C,KAKP+B,EAAA,UACEI,KAAK,SACLD,MAAM,yCAAwC,aAClC,iBAAiBnC,KAE7BgC,EAAA,QAAMG,MAAM,yBACVH,EAAA,QAAMG,MAAM,8BACVH,EAAA,WAASiB,GAAG,OAAOrD,QAAQ,4BAA4BgD,MAAM,WAC1D5C,KAIPgC,EAAA,QAAMG,MAAM,wBACVH,EAAA,WAASU,KAAK,gBAAgBC,KAAK,KAAKC,MAAM,gB","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as r,H as i,c as e,h as o,a as s,t as a}from"./index.js";const t=()=>`.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-item--inactive.sc-ds-radio-group{cursor:not-allowed;opacity:0.5;pointer-events:none}.circle.sc-ds-radio-group{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:10px;height:10px;border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const n=r(class r extends i{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.options=[];this.value="";this.direction="vertical";this.inactive=false}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(r){const i=this.activeItems;if(!i.length)return;const e=i.find((r=>r===document.activeElement));if(!e)return;const o=i.indexOf(e);let s=-1;switch(r.key){case"ArrowDown":case"ArrowRight":r.preventDefault();s=(o+1)%i.length;break;case"ArrowUp":case"ArrowLeft":r.preventDefault();s=(o-1+i.length)%i.length;break;case"Home":r.preventDefault();s=0;break;case"End":r.preventDefault();s=i.length-1;break}if(s>=0){i[s].focus();const r=i[s].dataset["value"];if(r&&r!==this.value){this.value=r;this.dsChange.emit(r)}}}selectItem(r){if(this.inactive)return;if(r!==this.value){this.value=r;this.dsChange.emit(r)}}render(){const r=this.options.findIndex((r=>r.value===this.value));const i=this.options.findIndex((r=>!this.inactive&&!r.inactive));const e=r>=0&&!this.inactive&&!this.options[r]?.inactive?r:i;return o(s,{key:"beae09bd3129fbff51d9e72d1027e1fe29cdafa6",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((r,i)=>{const s=this.inactive||!!r.inactive;const a=r.value===this.value;const t=s?-1:i===e?0:-1;return o("div",{key:r.value,role:"radio","aria-checked":String(a),"aria-disabled":s||undefined,tabIndex:t,"data-radio-item":true,"data-value":r.value,"data-inactive":s||undefined,class:{"radio-item":true,"radio-item--inactive":s},onClick:()=>!s&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!s){i.preventDefault();this.selectItem(r.value)}}},o("span",{class:{circle:true,"circle--checked":a}},a&&o("span",{class:"dot"})),o("span",{class:"text-body-medium radio-label"},r.label))})))}get el(){return this}static get style(){return t()}},[2,"ds-radio-group",{options:[16],value:[1025],direction:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-radio-group"];r.forEach((r=>{switch(r){case"ds-radio-group":if(!customElements.get(a(r))){customElements.define(a(r),n)}break}}))}d();const c=n;const l=d;export{c as DsRadioGroup,l as defineCustomElement};
+import{p as r,H as i,c as e,h as o,a as s,t}from"./index.js";const a=()=>`.group.sc-ds-radio-group{display:flex;flex-direction:column;gap:var(--dimension-space-025)}.group--horizontal.sc-ds-radio-group{flex-direction:row;gap:var(--dimension-space-100)}.radio-item.sc-ds-radio-group{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2);outline:none}.radio-item.sc-ds-radio-group:hover{background-color:var(--color-interaction-hover)}.radio-item.sc-ds-radio-group:active{background-color:var(--color-interaction-pressed)}.radio-item.sc-ds-radio-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.radio-item--inactive.sc-ds-radio-group{cursor:not-allowed;opacity:0.5;pointer-events:none}.circle.sc-ds-radio-group{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-half);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.circle--checked.sc-ds-radio-group{border-color:var(--color-foreground-primary)}.dot.sc-ds-radio-group{width:10px;height:10px;border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-primary)}.radio-label.sc-ds-radio-group{flex:1;min-width:0}`;const n=r(class r extends i{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.options=[];this.value="";this.direction="vertical";this.inactive=false}get activeItems(){return Array.from(this.el.querySelectorAll("[data-radio-item]:not([data-inactive])"))}handleKeyDown(r){const i=this.activeItems;if(!i.length)return;const e=i.find((r=>r===document.activeElement));if(!e)return;const o=i.indexOf(e);let s=-1;switch(r.key){case"ArrowDown":case"ArrowRight":r.preventDefault();s=(o+1)%i.length;break;case"ArrowUp":case"ArrowLeft":r.preventDefault();s=(o-1+i.length)%i.length;break;case"Home":r.preventDefault();s=0;break;case"End":r.preventDefault();s=i.length-1;break}if(s>=0){i[s].focus();const r=i[s].dataset["value"];if(r&&r!==this.value){this.value=r;this.dsChange.emit(r)}}}selectItem(r){if(this.inactive)return;if(r!==this.value){this.value=r;this.dsChange.emit(r)}}render(){const r=this.options.findIndex((r=>r.value===this.value));const i=this.options.findIndex((r=>!this.inactive&&!r.inactive));const e=r>=0&&!this.inactive&&!this.options[r]?.inactive?r:i;return o(s,{key:"14e21548d54c0f56a04d1b8dd584f6bbc6cc5874",role:"radiogroup","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,class:{group:true,"group--horizontal":this.direction==="horizontal"}},this.options.map(((r,i)=>{const s=this.inactive||!!r.inactive;const t=r.value===this.value;const a=s?-1:i===e?0:-1;return o("div",{key:r.value,role:"radio","aria-checked":String(t),"aria-disabled":s||undefined,tabIndex:a,"data-radio-item":true,"data-value":r.value,"data-inactive":s||undefined,class:{"radio-item":true,"radio-item--inactive":s},onClick:()=>!s&&this.selectItem(r.value),onKeyDown:i=>{if((i.key===" "||i.key==="Enter")&&!s){i.preventDefault();this.selectItem(r.value)}}},o("span",{class:{circle:true,"circle--checked":t}},t&&o("span",{class:"dot"})),o("span",{class:"text-body-medium radio-label"},r.label))})))}get el(){return this}static get style(){return a()}},[2,"ds-radio-group",{options:[16],value:[1025],direction:[1],inactive:[4],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-radio-group"];r.forEach((r=>{switch(r){case"ds-radio-group":if(!customElements.get(t(r))){customElements.define(t(r),n)}break}}))}d();const c=n;const l=d;export{c as DsRadioGroup,l as defineCustomElement};
 //# sourceMappingURL=ds-radio-group.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","direction","inactive","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","length","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabel","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n  outline: none;\n}\n\n.radio-item:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.radio-item--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  border: 1.5px solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-half);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  transition: all var(--effect-motion-short-2);\n}\n\n.circle--checked {\n  border-color: var(--color-foreground-primary);\n}\n\n.dot {\n  width: 10px;\n  height: 10px;\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n  flex: 1;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  inactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-radio-group',\n  styleUrl: 'RadioGroup.css',\n  scoped: true,\n})\nexport class RadioGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop() options: RadioOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() inactive: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.inactive) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const selectedIdx = this.options.findIndex(o => o.value === this.value);\n    const firstActiveIdx = this.options.findIndex(o => !this.inactive && !o.inactive);\n    const focusableIdx = selectedIdx >= 0 && !this.inactive && !this.options[selectedIdx]?.inactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((opt, i) => {\n          const isItemInactive = this.inactive || !!opt.inactive;\n          const isChecked = opt.value === this.value;\n          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n          return (\n            <div\n              key={opt.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive || undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={opt.value}\n              data-inactive={isItemInactive || undefined}\n              class={{ 'radio-item': true, 'radio-item--inactive': isItemInactive }}\n              onClick={() => !isItemInactive && this.selectItem(opt.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(opt.value);\n                }\n              }}\n            >\n              <span class={{ circle: true, 'circle--checked': isChecked }}>\n                {isChecked && <span class=\"dot\" />}\n              </span>\n              <span class=\"text-body-medium radio-label\">{opt.label}</span>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,28C,MCafC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,6EAQUC,KAAAC,QAAyB,GACRD,KAAAE,MAAgB,GACjCF,KAAAG,UAAuC,WACvCH,KAAAI,SAAoB,KA4G7B,CAtGC,eAAYC,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,0C,CAI1D,aAAAC,CAAcC,GACZ,MAAMC,EAAQZ,KAAKK,YACnB,IAAKO,EAAMC,OAAQ,OAEnB,MAAMC,EAAUF,EAAMG,MAAKC,GAAQA,IAASC,SAASC,gBACrD,IAAKJ,EAAS,OAEd,MAAMK,EAAMP,EAAMQ,QAAQN,GAC1B,IAAIO,GAAO,EAEX,OAAQV,EAAEW,KACR,IAAK,YACL,IAAK,aACHX,EAAEY,iBACFF,GAAQF,EAAM,GAAKP,EAAMC,OACzB,MACF,IAAK,UACL,IAAK,YACHF,EAAEY,iBACFF,GAAQF,EAAM,EAAIP,EAAMC,QAAUD,EAAMC,OACxC,MACF,IAAK,OACHF,EAAEY,iBACFF,EAAO,EACP,MACF,IAAK,MACHV,EAAEY,iBACFF,EAAOT,EAAMC,OAAS,EACtB,MAGJ,GAAIQ,GAAQ,EAAG,CACbT,EAAMS,GAAMG,QACZ,MAAMC,EAAYb,EAAMS,GAAMK,QAAQ,SACtC,GAAID,GAAaA,IAAczB,KAAKE,MAAO,CACzCF,KAAKE,MAAQuB,EACbzB,KAAK2B,SAASC,KAAKH,E,GAKjB,UAAAI,CAAWC,GACjB,GAAI9B,KAAKI,SAAU,OACnB,GAAI0B,IAAa9B,KAAKE,MAAO,CAC3BF,KAAKE,MAAQ4B,EACb9B,KAAK2B,SAASC,KAAKE,E,EAIvB,MAAAC,GACE,MAAMC,EAAchC,KAAKC,QAAQgC,WAAUC,GAAKA,EAAEhC,QAAUF,KAAKE,QACjE,MAAMiC,EAAiBnC,KAAKC,QAAQgC,WAAUC,IAAMlC,KAAKI,WAAa8B,EAAE9B,WACxE,MAAMgC,EAAeJ,GAAe,IAAMhC,KAAKI,WAAaJ,KAAKC,QAAQ+B,IAAc5B,SACnF4B,EACAG,EAEJ,OACEE,EAACC,EAAI,CAAAhB,IAAA,2CACHiB,KAAK,aAAY,aACLvC,KAAKwC,UAAS,kBACTxC,KAAKyC,eACtBC,MAAO,CAAEC,MAAO,KAAM,oBAAqB3C,KAAKG,YAAc,eAE7DH,KAAKC,QAAQ2C,KAAI,CAACC,EAAKC,KACtB,MAAMC,EAAiB/C,KAAKI,YAAcyC,EAAIzC,SAC9C,MAAM4C,EAAYH,EAAI3C,QAAUF,KAAKE,MACrC,MAAM+C,EAASF,GAAiB,EAAMD,IAAMV,EAAe,GAAI,EAE/D,OACEC,EAAA,OACEf,IAAKuB,EAAI3C,MACTqC,KAAK,QAAO,eACEW,OAAOF,GAAU,gBAChBD,GAAkBI,UACjCC,SAAUH,EAAM,oCAEJJ,EAAI3C,MAAK,gBACN6C,GAAkBI,UACjCT,MAAO,CAAE,aAAc,KAAM,uBAAwBK,GACrDM,QAAS,KAAON,GAAkB/C,KAAK6B,WAAWgB,EAAI3C,OACtDoD,UAAY3C,IACV,IAAKA,EAAEW,MAAQ,KAAOX,EAAEW,MAAQ,WAAayB,EAAgB,CAC3DpC,EAAEY,iBACFvB,KAAK6B,WAAWgB,EAAI3C,M,IAIxBmC,EAAA,QAAMK,MAAO,CAAEa,OAAQ,KAAM,kBAAmBP,IAC7CA,GAAaX,EAAA,QAAMK,MAAM,SAE5BL,EAAA,QAAMK,MAAM,gCAAgCG,EAAIW,OAC5C,I","ignoreList":[]}
+{"version":3,"names":["radioGroupCss","RadioGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","options","value","direction","inactive","activeItems","Array","from","el","querySelectorAll","handleKeyDown","e","items","length","focused","find","item","document","activeElement","idx","indexOf","next","key","preventDefault","focus","nextValue","dataset","dsChange","emit","selectItem","optValue","render","selectedIdx","findIndex","o","firstActiveIdx","focusableIdx","h","Host","role","ariaLabel","ariaLabelledby","class","group","map","opt","i","isItemInactive","isChecked","tabIdx","String","undefined","tabIndex","onClick","onKeyDown","circle","label"],"sources":["src/wc/components/RadioGroup/RadioGroup.css?tag=ds-radio-group&encapsulation=scoped","src/wc/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.group--horizontal {\n  flex-direction: row;\n  gap: var(--dimension-space-100);\n}\n\n/* ── Radio item ──────────────────────────────────────────────────────────── */\n\n.radio-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  cursor: pointer;\n  user-select: none;\n  border-radius: var(--dimension-radius-075);\n  transition: background-color var(--effect-motion-short-2);\n  outline: none;\n}\n\n.radio-item:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.radio-item:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.radio-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.radio-item--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Circle indicator ────────────────────────────────────────────────────── */\n\n.circle {\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n  border: 1.5px solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-half);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  transition: all var(--effect-motion-short-2);\n}\n\n.circle--checked {\n  border-color: var(--color-foreground-primary);\n}\n\n.dot {\n  width: 10px;\n  height: 10px;\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-primary);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.radio-label {\n  flex: 1;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';\n\nexport interface RadioOption {\n  label: string;\n  value: string;\n  inactive?: boolean;\n}\n\n@Component({\n  tag: 'ds-radio-group',\n  styleUrl: 'RadioGroup.css',\n  scoped: true,\n})\nexport class RadioGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop() options: RadioOption[] = [];\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() direction: 'vertical' | 'horizontal' = 'vertical';\n  @Prop() inactive: boolean = false;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get activeItems(): HTMLElement[] {\n    return Array.from(this.el.querySelectorAll<HTMLElement>('[data-radio-item]:not([data-inactive])'));\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const items = this.activeItems;\n    if (!items.length) return;\n\n    const focused = items.find(item => item === document.activeElement);\n    if (!focused) return;\n\n    const idx = items.indexOf(focused);\n    let next = -1;\n\n    switch (e.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        e.preventDefault();\n        next = (idx + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        e.preventDefault();\n        next = (idx - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        next = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        next = items.length - 1;\n        break;\n    }\n\n    if (next >= 0) {\n      items[next].focus();\n      const nextValue = items[next].dataset['value'];\n      if (nextValue && nextValue !== this.value) {\n        this.value = nextValue;\n        this.dsChange.emit(nextValue);\n      }\n    }\n  }\n\n  private selectItem(optValue: string) {\n    if (this.inactive) return;\n    if (optValue !== this.value) {\n      this.value = optValue;\n      this.dsChange.emit(optValue);\n    }\n  }\n\n  render() {\n    const selectedIdx = this.options.findIndex(o => o.value === this.value);\n    const firstActiveIdx = this.options.findIndex(o => !this.inactive && !o.inactive);\n    const focusableIdx = selectedIdx >= 0 && !this.inactive && !this.options[selectedIdx]?.inactive\n      ? selectedIdx\n      : firstActiveIdx;\n\n    return (\n      <Host\n        role=\"radiogroup\"\n        aria-label={this.ariaLabel}\n        aria-labelledby={this.ariaLabelledby}\n        class={{ group: true, 'group--horizontal': this.direction === 'horizontal' }}\n      >\n        {this.options.map((opt, i) => {\n          const isItemInactive = this.inactive || !!opt.inactive;\n          const isChecked = opt.value === this.value;\n          const tabIdx = isItemInactive ? -1 : (i === focusableIdx ? 0 : -1);\n\n          return (\n            <div\n              key={opt.value}\n              role=\"radio\"\n              aria-checked={String(isChecked)}\n              aria-disabled={isItemInactive || undefined}\n              tabIndex={tabIdx}\n              data-radio-item\n              data-value={opt.value}\n              data-inactive={isItemInactive || undefined}\n              class={{ 'radio-item': true, 'radio-item--inactive': isItemInactive }}\n              onClick={() => !isItemInactive && this.selectItem(opt.value)}\n              onKeyDown={(e: KeyboardEvent) => {\n                if ((e.key === ' ' || e.key === 'Enter') && !isItemInactive) {\n                  e.preventDefault();\n                  this.selectItem(opt.value);\n                }\n              }}\n            >\n              <span class={{ circle: true, 'circle--checked': isChecked }}>\n                {isChecked && <span class=\"dot\" />}\n              </span>\n              <span class=\"text-body-medium radio-label\">{opt.label}</span>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAgB,IAAM,28C,MCafC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,6EAQUC,KAAAC,QAAyB,GACRD,KAAAE,MAAgB,GACjCF,KAAAG,UAAuC,WACvCH,KAAAI,SAAoB,KA4G7B,CAtGC,eAAYC,GACV,OAAOC,MAAMC,KAAKP,KAAKQ,GAAGC,iBAA8B,0C,CAI1D,aAAAC,CAAcC,GACZ,MAAMC,EAAQZ,KAAKK,YACnB,IAAKO,EAAMC,OAAQ,OAEnB,MAAMC,EAAUF,EAAMG,MAAKC,GAAQA,IAASC,SAASC,gBACrD,IAAKJ,EAAS,OAEd,MAAMK,EAAMP,EAAMQ,QAAQN,GAC1B,IAAIO,GAAO,EAEX,OAAQV,EAAEW,KACR,IAAK,YACL,IAAK,aACHX,EAAEY,iBACFF,GAAQF,EAAM,GAAKP,EAAMC,OACzB,MACF,IAAK,UACL,IAAK,YACHF,EAAEY,iBACFF,GAAQF,EAAM,EAAIP,EAAMC,QAAUD,EAAMC,OACxC,MACF,IAAK,OACHF,EAAEY,iBACFF,EAAO,EACP,MACF,IAAK,MACHV,EAAEY,iBACFF,EAAOT,EAAMC,OAAS,EACtB,MAGJ,GAAIQ,GAAQ,EAAG,CACbT,EAAMS,GAAMG,QACZ,MAAMC,EAAYb,EAAMS,GAAMK,QAAQ,SACtC,GAAID,GAAaA,IAAczB,KAAKE,MAAO,CACzCF,KAAKE,MAAQuB,EACbzB,KAAK2B,SAASC,KAAKH,E,GAKjB,UAAAI,CAAWC,GACjB,GAAI9B,KAAKI,SAAU,OACnB,GAAI0B,IAAa9B,KAAKE,MAAO,CAC3BF,KAAKE,MAAQ4B,EACb9B,KAAK2B,SAASC,KAAKE,E,EAIvB,MAAAC,GACE,MAAMC,EAAchC,KAAKC,QAAQgC,WAAUC,GAAKA,EAAEhC,QAAUF,KAAKE,QACjE,MAAMiC,EAAiBnC,KAAKC,QAAQgC,WAAUC,IAAMlC,KAAKI,WAAa8B,EAAE9B,WACxE,MAAMgC,EAAeJ,GAAe,IAAMhC,KAAKI,WAAaJ,KAAKC,QAAQ+B,IAAc5B,SACnF4B,EACAG,EAEJ,OACEE,EAACC,EAAI,CAAAhB,IAAA,2CACHiB,KAAK,aAAY,aACLvC,KAAKwC,UAAS,kBACTxC,KAAKyC,eACtBC,MAAO,CAAEC,MAAO,KAAM,oBAAqB3C,KAAKG,YAAc,eAE7DH,KAAKC,QAAQ2C,KAAI,CAACC,EAAKC,KACtB,MAAMC,EAAiB/C,KAAKI,YAAcyC,EAAIzC,SAC9C,MAAM4C,EAAYH,EAAI3C,QAAUF,KAAKE,MACrC,MAAM+C,EAASF,GAAiB,EAAMD,IAAMV,EAAe,GAAI,EAE/D,OACEC,EAAA,OACEf,IAAKuB,EAAI3C,MACTqC,KAAK,QAAO,eACEW,OAAOF,GAAU,gBAChBD,GAAkBI,UACjCC,SAAUH,EAAM,oCAEJJ,EAAI3C,MAAK,gBACN6C,GAAkBI,UACjCT,MAAO,CAAE,aAAc,KAAM,uBAAwBK,GACrDM,QAAS,KAAON,GAAkB/C,KAAK6B,WAAWgB,EAAI3C,OACtDoD,UAAY3C,IACV,IAAKA,EAAEW,MAAQ,KAAOX,EAAEW,MAAQ,WAAayB,EAAgB,CAC3DpC,EAAEY,iBACFvB,KAAK6B,WAAWgB,EAAI3C,M,IAIxBmC,EAAA,QAAMK,MAAO,CAAEa,OAAQ,KAAM,kBAAmBP,IAC7CA,GAAaX,EAAA,QAAMK,MAAM,SAE5BL,EAAA,QAAMK,MAAM,gCAAgCG,EAAIW,OAC5C,I","ignoreList":[]}

package/dist/components/ds-scrollbar.js

@@ -1,2 +1,2 @@
-import{p as s,H as t,h as o,a as r,t as e}from"./index.js";const i=()=>`.sc-ds-scrollbar-h{display:contents}.scrollbar-container.sc-ds-scrollbar{position:relative;width:100%;height:100%;overflow:hidden}.scrollbar-content.sc-ds-scrollbar{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scrollbar-content.sc-ds-scrollbar::-webkit-scrollbar{display:none}.scrollbar-content.sc-ds-scrollbar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.scrollbar-track.sc-ds-scrollbar{position:absolute;top:0;right:0;bottom:0;width:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb.sc-ds-scrollbar{position:absolute;right:0;width:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-track-h.sc-ds-scrollbar{position:absolute;left:0;right:0;bottom:0;height:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb-h.sc-ds-scrollbar{position:absolute;bottom:0;height:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb-h.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}`;const c=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.variant="default";this.showTrackOnHover=true;this.thumbHeight=0;this.thumbTop=0;this.thumbWidth=0;this.thumbLeft=0;this.isDragging=false;this.isDraggingH=false;this.isPointerInside=false;this.contentEl=null;this.resizeObserver=null;this.scrollHandler=null;this.dragStartY=0;this.dragStartScrollTop=0;this.dragStartX=0;this.dragStartScrollLeft=0}componentDidLoad(){this.contentEl=this.el.querySelector(".scrollbar-content");if(!this.contentEl)return;this.scrollHandler=()=>this.updateThumb();this.contentEl.addEventListener("scroll",this.scrollHandler);this.resizeObserver=new ResizeObserver((()=>this.updateThumb()));this.resizeObserver.observe(this.contentEl);window.addEventListener("resize",this.scrollHandler);this.updateThumb()}disconnectedCallback(){if(this.contentEl&&this.scrollHandler){this.contentEl.removeEventListener("scroll",this.scrollHandler)}if(this.scrollHandler){window.removeEventListener("resize",this.scrollHandler)}this.resizeObserver?.disconnect()}updateThumb(){const s=this.el.querySelector(".scrollbar-container");const t=this.contentEl;if(!s||!t)return;const o=s.clientHeight;const r=s.clientWidth;const e=t.scrollHeight;const i=t.scrollWidth;const c=t.scrollTop;const a=t.scrollLeft;if(e<=o){this.thumbHeight=0}else{const s=Math.max(20,o*(o/e));this.thumbHeight=s;this.thumbTop=c/(e-o)*(o-s)}if(i<=r){this.thumbWidth=0}else{const s=Math.max(20,r*(r/i));this.thumbWidth=s;this.thumbLeft=a/(i-r)*(r-s)}}handleThumbMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDragging=true;this.dragStartY=s.clientY;this.dragStartScrollTop=t.scrollTop;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientY-this.dragStartY;const e=t.scrollHeight-o.clientHeight;const i=e/(o.clientHeight-this.thumbHeight);t.scrollTop=Math.max(0,Math.min(e,this.dragStartScrollTop+r*i))};const e=()=>{this.isDragging=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}handleThumbHMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDraggingH=true;this.dragStartX=s.clientX;this.dragStartScrollLeft=t.scrollLeft;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientX-this.dragStartX;const e=t.scrollWidth-o.clientWidth;const i=e/(o.clientWidth-this.thumbWidth);t.scrollLeft=Math.max(0,Math.min(e,this.dragStartScrollLeft+r*i))};const e=()=>{this.isDraggingH=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}render(){const s=this.thumbHeight>0;const t=this.thumbWidth>0;const e=s||t;const i=this.showTrackOnHover&&(this.isPointerInside||this.isDragging||this.isDraggingH);return o(r,{key:"f17c615932ef7c60a241f53e846d4713a1d642e8",style:{display:"contents"}},o("div",{key:"4a598edf8e5a8c4d30be79f3d8ea709e61d29406",class:{"scrollbar-container":true,"scrollbar-container--thick":this.variant==="thick"},"data-show-track":i?"true":"false","data-dragging":this.isDragging||this.isDraggingH,onMouseEnter:()=>{if(this.showTrackOnHover)this.isPointerInside=true},onMouseLeave:()=>{this.isPointerInside=false}},o("div",{key:"5fc94b1d1ccb34d52540e572fd232a1af3967ea0",class:"scrollbar-content",tabIndex:e?0:undefined},o("slot",{key:"9813df10bb98f6fd2fe88672e41ad419f517c005"})),s&&o("div",{key:"6d053e1dd5404ab4e460e56ad6caa80bb253a9da",class:"scrollbar-track","aria-hidden":"true"},o("div",{key:"e421f36e1c0803cf33492dd421eabaeb80e1c94c",class:"scrollbar-thumb",style:{height:`${this.thumbHeight}px`,top:`${this.thumbTop}px`},onMouseDown:s=>this.handleThumbMouseDown(s)})),t&&o("div",{key:"60ad02d1c84479e97a63159e659c8a883ecc8fa9",class:"scrollbar-track-h","aria-hidden":"true"},o("div",{key:"6f72147ee14a5727b029a557f18c62986cb554e9",class:"scrollbar-thumb-h",style:{width:`${this.thumbWidth}px`,left:`${this.thumbLeft}px`},onMouseDown:s=>this.handleThumbHMouseDown(s)}))))}get el(){return this}static get style(){return i()}},[262,"ds-scrollbar",{variant:[1],showTrackOnHover:[4,"show-track-on-hover"],thumbHeight:[32],thumbTop:[32],thumbWidth:[32],thumbLeft:[32],isDragging:[32],isDraggingH:[32],isPointerInside:[32]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-scrollbar"];s.forEach((s=>{switch(s){case"ds-scrollbar":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}a();const n=c;const l=a;export{n as DsScrollbar,l as defineCustomElement};
+import{p as s,H as t,h as o,a as r,t as e}from"./index.js";const i=()=>`.sc-ds-scrollbar-h{display:contents}.scrollbar-container.sc-ds-scrollbar{position:relative;width:100%;height:100%;overflow:hidden}.scrollbar-content.sc-ds-scrollbar{width:100%;height:100%;min-height:0;overflow-y:auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.scrollbar-content.sc-ds-scrollbar::-webkit-scrollbar{display:none}.scrollbar-content.sc-ds-scrollbar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.scrollbar-track.sc-ds-scrollbar{position:absolute;top:0;right:0;bottom:0;width:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb.sc-ds-scrollbar{position:absolute;right:0;width:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-track-h.sc-ds-scrollbar{position:absolute;left:0;right:0;bottom:0;height:var(--dimension-size-050, 4px);pointer-events:none;z-index:10;opacity:0;transition:opacity var(--effect-motion-short-2)}.scrollbar-container[data-show-track='true'].sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{opacity:1;pointer-events:auto}.scrollbar-thumb-h.sc-ds-scrollbar{position:absolute;bottom:0;height:var(--dimension-size-050, 4px);cursor:grab;border-radius:0;background-color:var(--color-foreground-quaternary);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none}.scrollbar-thumb-h.sc-ds-scrollbar:active{cursor:grabbing}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb.sc-ds-scrollbar{width:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-track-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}.scrollbar-container--thick.sc-ds-scrollbar .scrollbar-thumb-h.sc-ds-scrollbar{height:var(--dimension-size-100, 8px)}`;const c=s(class s extends t{constructor(s){super();if(s!==false){this.__registerHost()}this.variant="default";this.showTrackOnHover=true;this.thumbHeight=0;this.thumbTop=0;this.thumbWidth=0;this.thumbLeft=0;this.isDragging=false;this.isDraggingH=false;this.isPointerInside=false;this.contentEl=null;this.resizeObserver=null;this.scrollHandler=null;this.dragStartY=0;this.dragStartScrollTop=0;this.dragStartX=0;this.dragStartScrollLeft=0}componentDidLoad(){this.contentEl=this.el.querySelector(".scrollbar-content");if(!this.contentEl)return;this.scrollHandler=()=>this.updateThumb();this.contentEl.addEventListener("scroll",this.scrollHandler);this.resizeObserver=new ResizeObserver((()=>this.updateThumb()));this.resizeObserver.observe(this.contentEl);window.addEventListener("resize",this.scrollHandler);this.updateThumb()}disconnectedCallback(){if(this.contentEl&&this.scrollHandler){this.contentEl.removeEventListener("scroll",this.scrollHandler)}if(this.scrollHandler){window.removeEventListener("resize",this.scrollHandler)}this.resizeObserver?.disconnect()}updateThumb(){const s=this.el.querySelector(".scrollbar-container");const t=this.contentEl;if(!s||!t)return;const o=s.clientHeight;const r=s.clientWidth;const e=t.scrollHeight;const i=t.scrollWidth;const c=t.scrollTop;const a=t.scrollLeft;if(e<=o){this.thumbHeight=0}else{const s=Math.max(20,o*(o/e));this.thumbHeight=s;this.thumbTop=c/(e-o)*(o-s)}if(i<=r){this.thumbWidth=0}else{const s=Math.max(20,r*(r/i));this.thumbWidth=s;this.thumbLeft=a/(i-r)*(r-s)}}handleThumbMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDragging=true;this.dragStartY=s.clientY;this.dragStartScrollTop=t.scrollTop;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientY-this.dragStartY;const e=t.scrollHeight-o.clientHeight;const i=e/(o.clientHeight-this.thumbHeight);t.scrollTop=Math.max(0,Math.min(e,this.dragStartScrollTop+r*i))};const e=()=>{this.isDragging=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}handleThumbHMouseDown(s){s.preventDefault();s.stopPropagation();const t=this.contentEl;if(!t)return;this.isDraggingH=true;this.dragStartX=s.clientX;this.dragStartScrollLeft=t.scrollLeft;const o=this.el.querySelector(".scrollbar-container");const r=s=>{const r=s.clientX-this.dragStartX;const e=t.scrollWidth-o.clientWidth;const i=e/(o.clientWidth-this.thumbWidth);t.scrollLeft=Math.max(0,Math.min(e,this.dragStartScrollLeft+r*i))};const e=()=>{this.isDraggingH=false;document.removeEventListener("mousemove",r);document.removeEventListener("mouseup",e)};document.addEventListener("mousemove",r);document.addEventListener("mouseup",e)}render(){const s=this.thumbHeight>0;const t=this.thumbWidth>0;const e=s||t;const i=this.showTrackOnHover&&(this.isPointerInside||this.isDragging||this.isDraggingH);return o(r,{key:"5dcbd959c8a725551e6a050539cd86729078a9d0",style:{display:"contents"}},o("div",{key:"12d1a12ed6747b44f170876982916fc5cc4bec06",class:{"scrollbar-container":true,"scrollbar-container--thick":this.variant==="thick"},"data-show-track":i?"true":"false","data-dragging":this.isDragging||this.isDraggingH,onMouseEnter:()=>{if(this.showTrackOnHover)this.isPointerInside=true},onMouseLeave:()=>{this.isPointerInside=false}},o("div",{key:"14fd9bbc5e4a3cec5a794343c5a40025dad32860",class:"scrollbar-content",tabIndex:e?0:undefined},o("slot",{key:"3b02c72243fade49c352234ffb1cd9a212e419ce"})),s&&o("div",{key:"62bfbd864daabed9ed08eddaead3a2aff34fad44",class:"scrollbar-track","aria-hidden":"true"},o("div",{key:"e1f07fe21c3fe5dae124ff8fb8acac2ef661c316",class:"scrollbar-thumb",style:{height:`${this.thumbHeight}px`,top:`${this.thumbTop}px`},onMouseDown:s=>this.handleThumbMouseDown(s)})),t&&o("div",{key:"242910f9718f0d9e45c13608b5657ea7e066518b",class:"scrollbar-track-h","aria-hidden":"true"},o("div",{key:"d6ba4341f9732465f0f2b2c288061df870fd7658",class:"scrollbar-thumb-h",style:{width:`${this.thumbWidth}px`,left:`${this.thumbLeft}px`},onMouseDown:s=>this.handleThumbHMouseDown(s)}))))}get el(){return this}static get style(){return i()}},[262,"ds-scrollbar",{variant:[1],showTrackOnHover:[4,"show-track-on-hover"],thumbHeight:[32],thumbTop:[32],thumbWidth:[32],thumbLeft:[32],isDragging:[32],isDraggingH:[32],isPointerInside:[32]}]);function a(){if(typeof customElements==="undefined"){return}const s=["ds-scrollbar"];s.forEach((s=>{switch(s){case"ds-scrollbar":if(!customElements.get(e(s))){customElements.define(e(s),c)}break}}))}a();const n=c;const l=a;export{n as DsScrollbar,l as defineCustomElement};
 //# sourceMappingURL=ds-scrollbar.js.map

package/dist/components/ds-slider.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"6930e8a688750371059f3b877d2974c7e8d35d81",class:"field"},t("div",{key:"8211b920fc39310c45ccb8e9bb5d49c93a143ee9",class:"label-row"},t("label",{key:"57266c6c8069a498d238fda17b96374886244fd4",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"3d72bae5a11cf8e8f842701d09abb32b3080cb3f",class:"text-body-small-emphasis"},this.value)),t("div",{key:"47d61f37dba4d825c992037f93b18cea15d57625",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"e76e087a1c26ca09a61a9b1b425b29a470590bda",class:"track-inner"},t("div",{key:"cdfa1e026879fc32d0cef9b3dee67f3dbfb04285",class:"fill-track"},t("div",{key:"bc324df752cc5c632df418741451683f700c25eb",class:"fill"})),t("div",{key:"c9bb436330bef0155bdac1877a1987edb5a84514",class:"thumb"})),t("input",{key:"b38b14f8fdfb6686fd7a5c4d3b1f00f0fe1dd771",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color 100ms ease}.track.sc-ds-slider:hover:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.track--inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track--inactive.sc-ds-slider{cursor:not-allowed;opacity:0.5}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.inactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"07801286fb41c14907a16b87602ea9384ebc850c",class:"field"},t("div",{key:"220a8e43e745fd262580e5e3bc372b2cb0ec3021",class:"label-row"},t("label",{key:"0586bc2f5909a910011f2dc8a4df8dc1ef89e6d7",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"082c63e0e65ef8255baefaac9e427a836621af2e",class:"text-body-small-emphasis"},this.value)),t("div",{key:"12c95aa287cc855c3667f25190653132c58ccad3",class:{track:true,"track--inactive":this.inactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"1f5f984e824e1a7b414bd28ddb187b1fff62238e",class:"track-inner"},t("div",{key:"e4a7d0059371a632773172c54bad670ca9baf5c4",class:"fill-track"},t("div",{key:"d1d63864d04415604b76c576733e00e46694aa49",class:"fill"})),t("div",{key:"9f5b118b87e05a079d3c3fcedbd8b7568a031e15",class:"thumb"})),t("input",{key:"704fa6c21d48bed5bb52b987bff7973de5966116",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.inactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],inactive:[4],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

package/dist/components/ds-surface.js

@@ -1,2 +1,2 @@
-import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"382282efe29c88f628391d2d0fdd00e09960100a",style:{display:"contents"}},e(r,{key:"49437cbe97fef48d2098087529e67e82fed3bc51",class:i,style:d?{borderRadius:d}:undefined},e("slot",{key:"42715615fcb2ec7e84179d849f2165a034acfee8"})))}static get style(){return n()}},[262,"ds-surface",{background:[1],intent:[1],contrast:[1],elevation:[1],edge:[1],radius:[1],interactive:[4],selected:[4],inactive:[4],as:[1]}]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-surface"];r.forEach((r=>{switch(r){case"ds-surface":if(!customElements.get(s(r))){customElements.define(s(r),t)}break}}))}d();const i=t;const u=d;export{i as DsSurface,u as defineCustomElement};
+import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"833490f6f497c75e99975d66c1b3bdf04669af0f",style:{display:"contents"}},e(r,{key:"813fa617a09e66a55e7940ed9ffe0380f85614c6",class:i,style:d?{borderRadius:d}:undefined},e("slot",{key:"2067b83c407c942794e60673a7a45e805605e28a"})))}static get style(){return n()}},[262,"ds-surface",{background:[1],intent:[1],contrast:[1],elevation:[1],edge:[1],radius:[1],interactive:[4],selected:[4],inactive:[4],as:[1]}]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-surface"];r.forEach((r=>{switch(r){case"ds-surface":if(!customElements.get(s(r))){customElements.define(s(r),t)}break}}))}d();const i=t;const u=d;export{i as DsSurface,u as defineCustomElement};
 //# sourceMappingURL=ds-surface.js.map

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

@@ -1,2 +1,2 @@
-import{p as o,H as r,c as e,h as t,a,t as s}from"./index.js";const n=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;position:relative;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-secondary)}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tab.sc-ds-tab-group:hover{background-color:var(--_hover-bg)}.tab.sc-ds-tab-group:active{background-color:var(--_pressed-bg)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.indicator.sc-ds-tab-group{position:absolute;bottom:0;height:2px;background-color:var(--color-foreground-brand);border-radius:var(--dimension-radius-full, 9999px);transition:left var(--effect-motion-short-3), width var(--effect-motion-short-3);pointer-events:none}`;const i=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.indicatorLeft=0;this.indicatorWidth=0;this.resizeObserver=null}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>this.updateIndicator()));const o=this.el.querySelector('[role="tablist"]');if(o)this.resizeObserver.observe(o);this.updateIndicator()}disconnectedCallback(){this.resizeObserver?.disconnect()}onValueChange(){this.updateIndicator()}onTabsChange(){requestAnimationFrame((()=>this.updateIndicator()))}updateIndicator(){const o=this.el.querySelector(`[data-tab-id="${this.value}"]`);if(!o)return;const r=o.closest(".tab-list");if(!r)return;const e=r.getBoundingClientRect();const t=o.getBoundingClientRect();this.indicatorLeft=t.left-e.left;this.indicatorWidth=t.width}selectTab(o){this.value=o;this.dsChange.emit(o)}handleKeyDown(o){const r=this.tabs.filter((o=>!o.disabled));if(!r.length)return;const e=r.findIndex((o=>o.id===this.value));let t=null;if(o.key==="ArrowRight"){t=(e+1)%r.length}else if(o.key==="ArrowLeft"){t=(e-1+r.length)%r.length}else if(o.key==="Home"){t=0}else if(o.key==="End"){t=r.length-1}if(t!==null){o.preventDefault();const e=r[t];this.selectTab(e.id);const a=this.el.querySelector(`[data-tab-id="${e.id}"]`);a?.focus()}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();return t(a,{key:"f6e9952d377834d3ab8a8568efe419f285c325f0",class:"tab-group-host"},t("div",{key:"c69c059ff256b7ed33564178d64a08247ea80ed8",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map((r=>{const e=r.id===this.value;return t("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":e,[o]:!!o},"aria-selected":e,"aria-disabled":r.disabled||undefined,disabled:r.disabled,tabIndex:e?0:-1,onClick:()=>!r.disabled&&this.selectTab(r.id)},t("span",{class:e?"text-body-medium-emphasis":"text-body-medium"},r.label))})),t("div",{key:"ad70a0dd1a59bd44d8170f25bea13cb31bc004f0",class:"indicator",style:{left:`${this.indicatorLeft}px`,width:`${this.indicatorWidth}px`}})))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return n()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],indicatorLeft:[32],indicatorWidth:[32]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(s(o))){customElements.define(s(o),i)}break}}))}d();const c=i;const l=d;export{c as DsTabGroup,l as defineCustomElement};
+import{p as o,H as r,c as e,h as t,a,t as s}from"./index.js";const n=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;position:relative;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-secondary)}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tab.sc-ds-tab-group:hover{background-color:var(--_hover-bg)}.tab.sc-ds-tab-group:active{background-color:var(--_pressed-bg)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.indicator.sc-ds-tab-group{position:absolute;bottom:0;height:2px;background-color:var(--color-foreground-brand);border-radius:var(--dimension-radius-full, 9999px);transition:left var(--effect-motion-short-3), width var(--effect-motion-short-3);pointer-events:none}`;const i=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.indicatorLeft=0;this.indicatorWidth=0;this.resizeObserver=null}componentDidLoad(){this.resizeObserver=new ResizeObserver((()=>this.updateIndicator()));const o=this.el.querySelector('[role="tablist"]');if(o)this.resizeObserver.observe(o);this.updateIndicator()}disconnectedCallback(){this.resizeObserver?.disconnect()}onValueChange(){this.updateIndicator()}onTabsChange(){requestAnimationFrame((()=>this.updateIndicator()))}updateIndicator(){const o=this.el.querySelector(`[data-tab-id="${this.value}"]`);if(!o)return;const r=o.closest(".tab-list");if(!r)return;const e=r.getBoundingClientRect();const t=o.getBoundingClientRect();this.indicatorLeft=t.left-e.left;this.indicatorWidth=t.width}selectTab(o){this.value=o;this.dsChange.emit(o)}handleKeyDown(o){const r=this.tabs.filter((o=>!o.disabled));if(!r.length)return;const e=r.findIndex((o=>o.id===this.value));let t=null;if(o.key==="ArrowRight"){t=(e+1)%r.length}else if(o.key==="ArrowLeft"){t=(e-1+r.length)%r.length}else if(o.key==="Home"){t=0}else if(o.key==="End"){t=r.length-1}if(t!==null){o.preventDefault();const e=r[t];this.selectTab(e.id);const a=this.el.querySelector(`[data-tab-id="${e.id}"]`);a?.focus()}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();return t(a,{key:"7c428efc5194ae70b2f9185b31915aab8dcc42d6",class:"tab-group-host"},t("div",{key:"eb51b878e90980a1efb7639e4e3431e20fb2614f",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map((r=>{const e=r.id===this.value;return t("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":e,[o]:!!o},"aria-selected":e,"aria-disabled":r.disabled||undefined,disabled:r.disabled,tabIndex:e?0:-1,onClick:()=>!r.disabled&&this.selectTab(r.id)},t("span",{class:e?"text-body-medium-emphasis":"text-body-medium"},r.label))})),t("div",{key:"b89becbf28c5886f7ae302fe72b4fe78ac711f79",class:"indicator",style:{left:`${this.indicatorLeft}px`,width:`${this.indicatorWidth}px`}})))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return n()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],indicatorLeft:[32],indicatorWidth:[32]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(s(o))){customElements.define(s(o),i)}break}}))}d();const c=i;const l=d;export{c as DsTabGroup,l as defineCustomElement};
 //# sourceMappingURL=ds-tab-group.js.map

package/dist/components/ds-table.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as r,a,t as o}from"./index.js";const i=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:12px;color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.cell-value.sc-ds-table{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:14px;width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function n(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return String(e).localeCompare(String(t))*r}const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,r)=>c(n(t,s),n(t,r),e.direction)))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:o}=this;const i=!o&&t.length===0;const c=this.selectedSet;const l=this.activeSort;const d=this.pageIndex!==undefined&&s>1;return r(a,{key:"b137c5b79bce05fa19bfdf93ae9ec6c91b39f754"},r("div",{key:"78fe425aaafa448aae7cc646bc29c91bcad55e0b",class:"table-wrapper","aria-busy":o||undefined},r("div",{key:"a9979d8b4e6ae07d68b5fb87f6f49735769e0258",class:"table-scroll"},r("div",{key:"65835c547a16440565376205b95849914b789569",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},r("div",{key:"d90f7332e8b0d95297d89c7ca5b7862bc496de76",class:"header-row",role:"row"},e.map((e=>{const t=l?.columnId===e.id;const s=e.sortable?t?l.direction==="asc"?"ascending":"descending":"none":undefined;return r("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},r("span",{class:"text-body-small-emphasis",style:{color:"var(--color-foreground-secondary)"}},e.header),t&&r("span",{class:"sort-indicator","aria-hidden":"true"},l.direction==="asc"?"↑":"↓"))}))),o&&Array.from({length:5}).map(((t,s)=>r("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?"Loading":undefined},e.map((e=>r("div",{key:e.id,class:"cell",role:"cell"},r("div",{class:"skeleton"}))))))),i&&r("div",{key:"3166a64299703b06922c4862a6b877886a721db6",class:"empty-row",style:{gridColumn:"1 / -1"}},r("p",{key:"4c61664dafe6c777a199ef3fb505ccca8bec5a49",class:"text-body-medium",style:{margin:"0",color:"var(--color-foreground-secondary)"}},this.emptyMessage)),!o&&t.map(((t,s)=>{const a=c.has(s);return r("div",{key:s,class:{row:true,"row--selected":a,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?a:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>r("div",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},role:"cell"},r("span",{class:"text-body-medium cell-value"},String(n(e,t)??""))))))})))),d&&r("div",{key:"13a86b8f2827090dee1ee4f289ff9ff6900acb4a",class:"table-pagination"},r("button",{key:"c4cf4d76003d14df6701be80512e81b26d1dd5fb",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"ee938e64d61adc5e45f1618a2ed2575e641d6228",class:"text-body-small"},"Previous")),r("span",{key:"fd8e6671a4bf75fbdef9ca0716c85aac240e3f42",class:"text-body-small",style:{color:"var(--color-foreground-secondary)"}},"Page ",this.pageIndex+1," of ",s),r("button",{key:"cae334450bf9cb9f238bef946f828e5e3d854e11",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"5e3d7f9fe4ae223f2dd223f756ce068598a7b536",class:"text-body-small"},"Next")))))}static get style(){return i()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-table"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(o(e))){customElements.define(o(e),l)}break}}))}d();const b=l;const u=d;export{b as DsTable,u as defineCustomElement};
+import{p as e,H as t,c as s,h as r,a as o,t as a}from"./index.js";const i=()=>`.sc-ds-table-h{display:block;width:100%}.table-wrapper.sc-ds-table{display:flex;flex-direction:column;width:100%;overflow:hidden;border-radius:var(--dimension-radius-075)}.table-scroll.sc-ds-table{overflow-x:auto;width:100%}.table.sc-ds-table{display:grid;width:100%;min-width:max-content}.header-row.sc-ds-table{display:contents}.header-cell.sc-ds-table{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075) var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);-webkit-user-select:none;user-select:none;position:sticky;top:0;z-index:2}.header-cell--sortable.sc-ds-table{cursor:pointer}.header-cell--sortable.sc-ds-table:hover{background-color:var(--color-background-translucent)}.header-cell--sortable.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:calc(var(--dimension-space-025) * -1)}.sort-indicator.sc-ds-table{font-size:12px;color:var(--color-foreground-secondary)}.row.sc-ds-table{display:contents}.row--clickable.sc-ds-table{cursor:pointer}.row.sc-ds-table:hover .cell.sc-ds-table{background-color:var(--color-interaction-hover)}.row--selected.sc-ds-table .cell.sc-ds-table{background-color:var(--color-background-faint-brand)}.row--clickable.sc-ds-table:focus-visible .cell.sc-ds-table{background-color:var(--color-interaction-hover);box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus)}.cell.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-075) var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary);min-height:var(--dimension-size-500);background-color:var(--color-background-primary);transition:background-color var(--effect-motion-short-2)}.align-right.sc-ds-table{justify-content:flex-end;text-align:right}.align-center.sc-ds-table{justify-content:center;text-align:center}.cell-value.sc-ds-table{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.empty-row.sc-ds-table{display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-400);background-color:var(--color-background-primary)}.skeleton.sc-ds-table{height:14px;width:60%;background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-050);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}.table-pagination.sc-ds-table{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-100);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary);background-color:var(--color-background-primary)}.page-button.sc-ds-table{display:flex;align-items:center;padding:var(--dimension-space-050) var(--dimension-space-100);background-color:transparent;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;transition:background-color var(--effect-motion-short-2)}.page-button.sc-ds-table:hover:not(:disabled){background-color:var(--color-interaction-hover)}.page-button.sc-ds-table:disabled{opacity:0.4;cursor:not-allowed}.page-button.sc-ds-table:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}`;function n(e,t){if(e.accessorKey)return t[e.accessorKey];if(e.accessor)return e.accessor(t);return undefined}function c(e,t,s){const r=s==="asc"?1:-1;if(e==null&&t==null)return 0;if(e==null)return r;if(t==null)return-r;if(typeof e==="number"&&typeof t==="number")return(e-t)*r;return String(e).localeCompare(String(t))*r}const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsSort=s(this,"dsSort");this.dsRowClick=s(this,"dsRowClick");this.dsPageChange=s(this,"dsPageChange");this.columns=[];this.data=[];this.loading=false;this.emptyMessage="No results found.";this.selectedRows="";this.pageSize=20}get activeSort(){return this.sortState??this.internalSort}get visibleCols(){return this.columns.filter((e=>!e.hide))}get gridTemplate(){return this.visibleCols.map((e=>{if(e.width)return typeof e.width==="number"?`${e.width}px`:e.width;return"minmax(120px, 1fr)"})).join(" ")}get sortedData(){const e=this.activeSort;if(!e)return this.data;const t=this.columns.find((t=>t.id===e.columnId));if(!t)return this.data;return[...this.data].sort(((s,r)=>c(n(t,s),n(t,r),e.direction)))}get pagedData(){if(this.pageIndex===undefined)return this.sortedData;const e=this.pageIndex*this.pageSize;return this.sortedData.slice(e,e+this.pageSize)}get totalPages(){if(this.pageIndex===undefined)return 1;return Math.ceil(this.sortedData.length/this.pageSize)}get selectedSet(){if(!this.selectedRows)return new Set;return new Set(this.selectedRows.split(",").map(Number).filter((e=>!isNaN(e))))}handleSort(e){this.dsSort.emit({columnId:e});if(!this.sortState){const t=this.internalSort;this.internalSort=t?.columnId===e?{columnId:e,direction:t.direction==="asc"?"desc":"asc"}:{columnId:e,direction:"asc"}}}render(){const{visibleCols:e,pagedData:t,totalPages:s,loading:a}=this;const i=!a&&t.length===0;const c=this.selectedSet;const d=this.activeSort;const l=this.pageIndex!==undefined&&s>1;return r(o,{key:"62c4bb9c959128210ee9d932dcaa42d064751198"},r("div",{key:"88373d46986c09330ded9b215302dedd77e6a54d",class:"table-wrapper","aria-busy":a||undefined},r("div",{key:"5b492376359ecfe13dad77bafc72050bceadb4e3",class:"table-scroll"},r("div",{key:"05fea98f62629d8bae553789937b2807ce2f96a8",class:"table",style:{gridTemplateColumns:this.gridTemplate},role:"table"},r("div",{key:"4399595e14e64e15d545ca154e4cd5b01116298a",class:"header-row",role:"row"},e.map((e=>{const t=d?.columnId===e.id;const s=e.sortable?t?d.direction==="asc"?"ascending":"descending":"none":undefined;return r("div",{key:e.id,class:{"header-cell":true,"header-cell--sortable":!!e.sortable,"align-right":e.align==="right","align-center":e.align==="center"},role:"columnheader","aria-sort":s,tabIndex:e.sortable?0:undefined,onClick:()=>e.sortable&&this.handleSort(e.id),onKeyDown:t=>{if(e.sortable&&(t.key==="Enter"||t.key===" ")){t.preventDefault();this.handleSort(e.id)}},style:e.minWidth?{minWidth:typeof e.minWidth==="number"?`${e.minWidth}px`:e.minWidth}:undefined},r("span",{class:"text-body-small-emphasis",style:{color:"var(--color-foreground-secondary)"}},e.header),t&&r("span",{class:"sort-indicator","aria-hidden":"true"},d.direction==="asc"?"↑":"↓"))}))),a&&Array.from({length:5}).map(((t,s)=>r("div",{key:`sk-${s}`,class:"row",role:s===0?"status":"row","aria-label":s===0?"Loading":undefined},e.map((e=>r("div",{key:e.id,class:"cell",role:"cell"},r("div",{class:"skeleton"}))))))),i&&r("div",{key:"7edc33cead800d4869ccdcfc24a16f11b0c183c7",class:"empty-row",style:{gridColumn:"1 / -1"}},r("p",{key:"1d63016e935ec8e2dc42b2e9e8bf0eb000cf41d0",class:"text-body-medium",style:{margin:"0",color:"var(--color-foreground-secondary)"}},this.emptyMessage)),!a&&t.map(((t,s)=>{const o=c.has(s);return r("div",{key:s,class:{row:true,"row--selected":o,"row--clickable":true},role:"row",tabIndex:0,"aria-selected":this.selectedRows?o:undefined,onClick:()=>this.dsRowClick.emit({row:t,rowIndex:s}),onKeyDown:e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();this.dsRowClick.emit({row:t,rowIndex:s})}}},e.map((e=>r("div",{key:e.id,class:{cell:true,"align-right":e.align==="right","align-center":e.align==="center"},role:"cell"},r("span",{class:"text-body-medium cell-value"},String(n(e,t)??""))))))})))),l&&r("div",{key:"a03fd40a1283f71ba478a73fbe1b4aa52038998f",class:"table-pagination"},r("button",{key:"022362f540cee843e0f77347470c7b066fabc731",type:"button",class:"page-button",disabled:this.pageIndex===0,onClick:()=>{this.pageIndex=this.pageIndex-1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"49876b26547e772091c0dd5188d0df3cf21c6882",class:"text-body-small"},"Previous")),r("span",{key:"584fb8fe26760c60d37650faa390ce2794d74324",class:"text-body-small",style:{color:"var(--color-foreground-secondary)"}},"Page ",this.pageIndex+1," of ",s),r("button",{key:"2ad172d9c2a025e3ed8cd361c86ff29083089b22",type:"button",class:"page-button",disabled:this.pageIndex>=s-1,onClick:()=>{this.pageIndex=this.pageIndex+1;this.dsPageChange.emit({pageIndex:this.pageIndex})}},r("span",{key:"5b1258e8b6fafb857fe2001f552906b613c1194e",class:"text-body-small"},"Next")))))}static get style(){return i()}},[2,"ds-table",{columns:[16],data:[16],sortState:[16],loading:[4],emptyMessage:[1,"empty-message"],selectedRows:[1,"selected-rows"],pageIndex:[1026,"page-index"],pageSize:[2,"page-size"],internalSort:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-table"];e.forEach((e=>{switch(e){case"ds-table":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}l();const b=d;const u=l;export{b as DsTable,u as defineCustomElement};
 //# sourceMappingURL=ds-table.js.map