@ds-mo/ui 2.11.2 → 2.12.0

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:"3911b4c3be900f05917aa92b212d1c742fa509b9",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:"f3f5ad1e15f438fcd27cf147d33223aa15118603",class:{box:true,"box--marked":e}},e&&c("span",{key:"860e784364d654527ba37d3803bb23cb160e4919",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"f946ff62f76a788ffca47517ccd55de9c7fc3c3e",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 o,c as s,h as c,a as i,t as r}from"./index.js";const t=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.25;pointer-events:none;cursor:not-allowed}.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)}.box.sc-ds-checkbox{width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);flex-shrink:0;border:var(--dimension-stroke-width-018) 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:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-bold)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.isInactive=false;this.handleActivate=()=>{if(this.isInactive)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:"394850bcc8471f348a3698a49c48f417bcb8fdaf",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.isInactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.isInactive?-1:0,class:{checkbox:true,"ds-control-inactive":this.isInactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"b2dcb48321f4310fecc446883f9d11ae484cae87",class:{box:true,"box--marked":e}},e&&c("span",{key:"caa2bb5512a291c477f5e53d09e65b22cdef34fa",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"702dbeb44317c422785a44067ed6cfb0b1f3a699",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],isInactive:[4,"is-inactive"]}]);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};
 //# sourceMappingURL=ds-checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","indeterminate","inactive","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","render","isMarked","h","Host","role","String","undefined","tabIndex","class","checkbox","onClick","onKeyDown","box","id","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\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}\n\n.checkbox:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.checkbox:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n.inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* ── Default box indicator ───────────────────────────────────────────────── */\n\n.box {\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-050);\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.box--marked {\n  background-color: var(--color-foreground-primary);\n  border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n  color: var(--color-foreground-on-bold-background-primary);\n  font-size: 14px;\n  line-height: 1;\n  font-weight: 700;\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n\n  @Prop() label!: string;\n  @Prop({ mutable: true }) checked: boolean = false;\n  @Prop() indeterminate: boolean = false;\n  @Prop() inactive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleActivate = () => {\n    if (this.inactive) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const isMarked = this.checked || this.indeterminate;\n\n    return (\n      <Host\n        role=\"checkbox\"\n        aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled={this.inactive || undefined}\n        aria-labelledby={this.labelId}\n        tabIndex={this.inactive ? -1 : 0}\n        class={{ checkbox: true, inactive: this.inactive }}\n        onClick={this.handleActivate}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class={{ box: true, 'box--marked': isMarked }}>\n          {isMarked && (\n            <span class=\"checkmark\" aria-hidden=\"true\">\n              {this.indeterminate ? '−' : '✓'}\n            </span>\n          )}\n        </span>\n        <span id={this.labelId} class=\"text-body-medium checkbox__label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAc,IAAM,mmCCE1B,IAAIC,EAAY,E,MAOHC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAMUC,KAAAC,QAAU,uBAAuBP,IAGhBM,KAAAE,QAAmB,MACpCF,KAAAG,cAAyB,MACzBH,KAAAI,SAAoB,MAIpBJ,KAAAK,eAAiB,KACvB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKE,SAAWF,KAAKE,QACrBF,KAAKM,SAASC,KAAKP,KAAKE,QAAQ,EAG1BF,KAAAQ,cAAiBC,IACvB,GAAIA,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFX,KAAKK,gB,EA+BV,CA3BC,MAAAO,GACE,MAAMC,EAAWb,KAAKE,SAAWF,KAAKG,cAEtC,OACEW,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,WAAU,eACDhB,KAAKG,cAAgB,QAAUc,OAAOjB,KAAKE,SAAQ,gBAClDF,KAAKI,UAAYc,UAAS,kBACxBlB,KAAKC,QACtBkB,SAAUnB,KAAKI,UAAW,EAAK,EAC/BgB,MAAO,CAAEC,SAAU,KAAMjB,SAAUJ,KAAKI,UACxCkB,QAAStB,KAAKK,eACdkB,UAAWvB,KAAKQ,eAEhBM,EAAA,QAAAJ,IAAA,2CAAMU,MAAO,CAAEI,IAAK,KAAM,cAAeX,IACtCA,GACCC,EAAA,QAAAJ,IAAA,2CAAMU,MAAM,YAAW,cAAa,QACjCpB,KAAKG,cAAgB,IAAM,MAIlCW,EAAA,QAAAJ,IAAA,2CAAMe,GAAIzB,KAAKC,QAASmB,MAAM,oCAC3BpB,KAAK0B,O","ignoreList":[]}
+{"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","indeterminate","isInactive","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","render","isMarked","h","Host","role","String","undefined","tabIndex","class","checkbox","onClick","onKeyDown","box","id","label"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n.checkbox {\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}\n\n.checkbox:hover {\n  background-color: var(--color-interaction-hover);\n}\n\n.checkbox:active {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n/* ── Default box indicator ───────────────────────────────────────────────── */\n\n.box {\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  flex-shrink: 0;\n  border: var(--dimension-stroke-width-018) solid var(--color-foreground-secondary);\n  border-radius: var(--dimension-radius-050);\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.box--marked {\n  background-color: var(--color-foreground-primary);\n  border-color: var(--color-foreground-primary);\n}\n\n.checkmark {\n  color: var(--color-foreground-on-bold-background-primary);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-bold);\n}\n\n/* ── Label ───────────────────────────────────────────────────────────────── */\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n})\nexport class Checkbox {\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n\n  @Prop() label!: string;\n  @Prop({ mutable: true }) checked: boolean = false;\n  @Prop() indeterminate: boolean = false;\n  @Prop() isInactive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleActivate = () => {\n    if (this.isInactive) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const isMarked = this.checked || this.indeterminate;\n\n    return (\n      <Host\n        role=\"checkbox\"\n        aria-checked={this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled={this.isInactive || undefined}\n        aria-labelledby={this.labelId}\n        tabIndex={this.isInactive ? -1 : 0}\n        class={{ checkbox: true, 'ds-control-inactive': this.isInactive }}\n        onClick={this.handleActivate}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class={{ box: true, 'box--marked': isMarked }}>\n          {isMarked && (\n            <span class=\"checkmark\" aria-hidden=\"true\">\n              {this.indeterminate ? '−' : '✓'}\n            </span>\n          )}\n        </span>\n        <span id={this.labelId} class=\"text-body-medium checkbox__label\">\n          {this.label}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAc,IAAM,wzCCE1B,IAAIC,EAAY,E,MAOHC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAMUC,KAAAC,QAAU,uBAAuBP,IAGhBM,KAAAE,QAAmB,MACpCF,KAAAG,cAAyB,MACzBH,KAAAI,WAAsB,MAItBJ,KAAAK,eAAiB,KACvB,GAAIL,KAAKI,WAAY,OACrBJ,KAAKE,SAAWF,KAAKE,QACrBF,KAAKM,SAASC,KAAKP,KAAKE,QAAQ,EAG1BF,KAAAQ,cAAiBC,IACvB,GAAIA,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFX,KAAKK,gB,EA+BV,CA3BC,MAAAO,GACE,MAAMC,EAAWb,KAAKE,SAAWF,KAAKG,cAEtC,OACEW,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,WAAU,eACDhB,KAAKG,cAAgB,QAAUc,OAAOjB,KAAKE,SAAQ,gBAClDF,KAAKI,YAAcc,UAAS,kBAC1BlB,KAAKC,QACtBkB,SAAUnB,KAAKI,YAAa,EAAK,EACjCgB,MAAO,CAAEC,SAAU,KAAM,sBAAuBrB,KAAKI,YACrDkB,QAAStB,KAAKK,eACdkB,UAAWvB,KAAKQ,eAEhBM,EAAA,QAAAJ,IAAA,2CAAMU,MAAO,CAAEI,IAAK,KAAM,cAAeX,IACtCA,GACCC,EAAA,QAAAJ,IAAA,2CAAMU,MAAM,YAAW,cAAa,QACjCpB,KAAKG,cAAgB,IAAM,MAIlCW,EAAA,QAAAJ,IAAA,2CAAMe,GAAIzB,KAAKC,QAASmB,MAAM,oCAC3BpB,KAAK0B,O","ignoreList":[]}

package/dist/components/ds-chip.js

@@ -1,2 +1,2 @@
-import{p as o,H as t,c as r,h as a,a as n,t as e}from"./index.js";const i=()=>`.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-chip-h{height:var(--dimension-size-400);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-chip-h{height:var(--dimension-size-300);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-chip-h{height:var(--dimension-size-200);padding:0 var(--dimension-space-025);gap:0}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag--on-medium.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-chip-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-chip-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-chip-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-chip-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{color:var(--color-foreground-faint-positive)}.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-chip-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-chip-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-chip-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-chip-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-chip{line-height:0;padding:0 var(--dimension-space-025);white-space:nowrap;flex-shrink:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag--removable.sc-ds-chip-h .tag__label.sc-ds-chip{padding-inline-end:0}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag--size-md.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip,.tag--size-sm.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip{margin-inline-start:var(--dimension-space-050)}.tag--size-xs.tag--removable.sc-ds-chip-h .tag__remove.sc-ds-chip{margin-inline-start:var(--dimension-space-025)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-chip-h .tag__remove.sc-ds-chip,.tag--rounded.sc-ds-chip-h .tag__remove.sc-ds-chip::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-chip{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-chip-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const c={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const s={md:20,sm:16,xs:12};const d=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=r(this,"dsRemove");this.dsClick=r(this,"dsClick");this.dsPressedChange=r(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=c[this.size];const r=s[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const i={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":true,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return a(n,{key:"0465a0cef7f58a28ac7ee8318284d25f74055fe2",class:i,style:e,onClick:this.handleClick,onKeyDown:this.handleKeyDown,role:"button",tabIndex:this.inactive?-1:0,"aria-pressed":String(this.pressed),"aria-disabled":this.inactive||undefined},a("span",{key:"c50920e9cc5327f2df7d897965806f05b4b829fb",class:"tag__icon-slot",style:{fontSize:`${r}px`,lineHeight:"0"}},a("slot",{key:"73de9e56c10cc010b556211b510f99b74704eb0d",name:"icon"})),a("span",{key:"accc39da131dac3c21234be3295df50e44a18410",class:{tag__label:true,[t]:true}},this.label),this.removable&&a("button",{key:"554ad5a68b643ca616950c7125e1899b0b5f8a0b",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},a("slot",{key:"b928b40dddef49be8dd548405da6a94d6c72ef77",name:"remove-icon"},a("span",{key:"5d7826d02d301157ec51404b626f584864aa4526",class:"tag__remove-x",style:{fontSize:`${r}px`,lineHeight:"0"}},"✕"))))}static get style(){return i()}},[262,"ds-chip",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028]}]);function g(){if(typeof customElements==="undefined"){return}const o=["ds-chip"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(e(o))){customElements.define(e(o),d)}break}}))}g();const l=d;const h=g;export{l as DsChip,h as defineCustomElement};
+import{p as o,H as r,c as n,h as i,a as c,t}from"./index.js";import{d as a}from"./p-CyFVn2Sc.js";const s=()=>`.ds-control--md.sc-ds-chip-h,.ds-control--md.sc-ds-chip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-chip-h,.ds-control--sm.sc-ds-chip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-chip-h,.ds-control--xs.sc-ds-chip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-interaction-fill.sc-ds-chip-h,.ds-interaction-fill.sc-ds-chip{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before,.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-chip-h::before,.ds-interaction-fill.sc-ds-chip::before{z-index:1}.ds-interaction-fill.sc-ds-chip-h::after,.ds-interaction-fill.sc-ds-chip::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-chip-h,.ds-interaction-fill--bordered.sc-ds-chip{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-chip-h::before,.ds-interaction-fill--selected.sc-ds-chip::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-chip-h,.ds-interaction-fill--selected.sc-ds-chip{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-chip-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-chip-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-chip:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-chip-h>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill.sc-ds-chip>.ds-interaction-fill__content.sc-ds-chip,.ds-interaction-fill__content.sc-ds-chip{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-chip-h,.ds-interaction-fill--on-medium.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-chip-h,.ds-interaction-fill--on-bold.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-chip-h,.ds-interaction-fill--on-strong.sc-ds-chip{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-chip-h,.ds-interaction-fill--on-always-dark.sc-ds-chip{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-chip-h,.ds-interaction-fill--on-navigation.sc-ds-chip{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-chip-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-chip:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-chip{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-chip:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-chip:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-chip::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-chip-h{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;color:var(--color-foreground-primary);position:relative;border-radius:var(--ds-control-radius, var(--dimension-radius-025));height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);gap:var(--ds-control-gap);user-select:none;-webkit-user-select:none}.tag--rounded.sc-ds-chip-h{border-radius:var(--dimension-radius-half)}.tag--intent-neutral.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-chip-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-chip-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-chip-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-chip-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-chip-h{cursor:pointer;outline:none}.tag__label.sc-ds-chip{position:relative;z-index:2;line-height:0;padding:0 var(--ds-control-label-inset);white-space:nowrap;flex-shrink:0;min-width:0}.tag__icon-slot.sc-ds-chip{display:contents}.tag__icon-slot.sc-ds-chip-s>*,.tag__icon-slot .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-chip{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;z-index:2;border-radius:var(--dimension-radius-half)}.tag__remove.sc-ds-chip::before{content:'';position:absolute;inset:var(--dimension-space-n025);border-radius:var(--dimension-radius-half);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-chip:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-chip:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:var(--dimension-space-n012)}.tag--size-xs.sc-ds-chip-h .tag__remove.sc-ds-chip::before{inset:0}.tag__remove-x.sc-ds-chip{display:inline-flex;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.tag__remove.sc-ds-chip-s>*,.tag__remove .sc-ds-chip-s>*{flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.ds-control-inactive.sc-ds-chip-h,.ds-control-inactive.sc-ds-chip{opacity:0.25;pointer-events:none;cursor:not-allowed}.chip--default.sc-ds-chip-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.chip--active.sc-ds-chip-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.chip--error.sc-ds-chip-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.chip--caution.sc-ds-chip-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}`;const e={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const d={md:"md",sm:"sm",xs:"xs"};const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=n(this,"dsRemove");this.state="default";this.size="md";this.rounded=false;this.removable=true;this.isInactive=false;this.handleRemove=o=>{o.stopPropagation();if(this.isInactive)return;this.dsRemove.emit()}}render(){const o=e[this.size];const r=d[this.size];const n=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;return i(c,{key:"0e3c0c0cacbaba26a3ce13bedf44f52ad16a20fd",class:{tag:true,chip:true,[`chip--${this.state}`]:true,[`tag--size-${this.size}`]:true,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","tag--rounded":this.rounded,"tag--removable":this.removable,"ds-interaction-fill":!this.isInactive&&this.removable,"ds-interaction-fill--on-medium":this.background==="medium","ds-interaction-fill--on-bold":this.background==="bold","ds-interaction-fill--on-strong":this.background==="strong","ds-interaction-fill--on-always-dark":this.background==="always-dark","ds-control-inactive":this.isInactive},style:n,"aria-disabled":this.isInactive||undefined},i("span",{key:"d6adc6aa6c3ebb43a4f2bb53182edbce44e7d650",class:{tag__label:true,[o]:true}},this.label),this.removable&&i("button",{key:"4155d01a6cb30332decf70505802f2aaf32bd20c",type:"button",class:"tag__remove ds-focus-ring-inset",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,disabled:this.isInactive||undefined},i("slot",{key:"a352560afce001a5f96a1455bed12404590e1d14",name:"remove-icon"},i("ds-icon",{key:"42a4605462b6554614b71f8dc7613982d07283e7",class:"tag__remove-x",name:"Cross",size:r,color:"inherit"}))))}static get style(){return s()}},[262,"ds-chip",{label:[1],state:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],isInactive:[4,"is-inactive"],background:[1]}]);function g(){if(typeof customElements==="undefined"){return}const o=["ds-chip","ds-icon"];o.forEach((o=>{switch(o){case"ds-chip":if(!customElements.get(t(o))){customElements.define(t(o),l)}break;case"ds-icon":if(!customElements.get(t(o))){a()}break}}))}g();const u=l;const h=g;export{u as DsChip,h as defineCustomElement};
 //# sourceMappingURL=ds-chip.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["chipCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","elevation","size","rounded","removable","inactive","pressed","handleClick","dsPressedChange","emit","dsClick","handleKeyDown","e","key","preventDefault","handleRemove","stopPropagation","dsRemove","render","sz","toUpperCase","textVariant","iconSize","maxWidthStyle","maxWidth","undefined","hostCls","tag","background","h","Host","class","style","onClick","onKeyDown","role","tabIndex","String","fontSize","lineHeight","name","tag__label","label","type"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../Tag/Tag.css';\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ChipIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type ChipContrast   = 'strong' | 'bold' | 'medium' | 'faint';\nexport type ChipElevation  = 'none' | 'flat' | 'elevated';\nexport type ChipSize       = 'md' | 'sm' | 'xs';\nexport type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst TEXT_VARIANT: Record<ChipSize, string> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\nconst ICON_SIZE: Record<ChipSize, number> = { md: 20, sm: 16, xs: 12 };\n\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  @Prop() intent: ChipIntent = 'neutral';\n  @Prop() contrast: ChipContrast = 'faint';\n  @Prop() elevation: ChipElevation = 'none';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() removable: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() inactive: boolean = false;\n  @Prop() background: ChipBackground | undefined;\n  @Prop({ mutable: true }) pressed: boolean = false;\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n  /** Fired when an interactive chip is clicked. */\n  @Event() dsClick!: EventEmitter<void>;\n  /** Fired when the pressed state toggles. */\n  @Event() dsPressedChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.pressed = !this.pressed;\n    this.dsPressedChange.emit(this.pressed);\n    this.dsClick.emit();\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.inactive) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';\n    const textVariant = TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    const hostCls: Record<string, boolean> = {\n      'tag': true,\n      [`tag--intent-${this.intent}`]: true,\n      [`tag--contrast-${this.contrast}`]: true,\n      [`tag--elevation-${this.elevation}`]: true,\n      [`tag--size-${this.size}`]: true,\n      'tag--rounded': this.rounded,\n      'tag--rounded-no-icon-left': this.rounded,\n      'tag--rounded-no-remove-right': this.rounded && !this.removable,\n      [`tag--icon-left-${sz}`]: false,\n      [`tag--icon-right-${sz}`]: this.removable,\n      'tag--removable': this.removable,\n      'tag--interactive': true,\n      'tag--inactive': this.inactive,\n      'tag--pressed': this.pressed,\n      'tag--on-medium':      this.background === 'medium',\n      'tag--on-bold':        this.background === 'bold',\n      'tag--on-strong':      this.background === 'strong',\n      'tag--on-always-dark': this.background === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={hostCls}\n        style={maxWidthStyle}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        role=\"button\"\n        tabIndex={this.inactive ? -1 : 0}\n        aria-pressed={String(this.pressed)}\n        aria-disabled={this.inactive || undefined}\n      >\n        <span class=\"tag__icon-slot\" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>\n          <slot name=\"icon\" />\n        </span>\n        <span class={{ 'tag__label': true, [textVariant]: true }}>\n          {this.label}\n        </span>\n        {this.removable && (\n          <button\n            type=\"button\"\n            class=\"tag__remove\"\n            onClick={this.handleRemove}\n            aria-label={`Remove ${this.label}`}\n            tabIndex={-1}\n          >\n            <slot name=\"remove-icon\">\n              <span class=\"tag__remove-x\" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>\n                ✕\n              </span>\n            </slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAU,IAAM,gkWCQtB,MAAMC,EAAyC,CAC7CC,GAAI,mBACJC,GAAI,kBACJC,GAAI,gBAGN,MAAMC,EAAsC,CAAEH,GAAI,GAAIC,GAAI,GAAIC,GAAI,I,MAOrDE,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,2JAOUC,KAAAC,OAAqB,UACrBD,KAAAE,SAAyB,QACzBF,KAAAG,UAA2B,OAC3BH,KAAAI,KAAiB,KACjBJ,KAAAK,QAAmB,MACnBL,KAAAM,UAAqB,MAErBN,KAAAO,SAAoB,MAEHP,KAAAQ,QAAmB,MASpCR,KAAAS,YAAc,KACpB,GAAIT,KAAKO,SAAU,OACnBP,KAAKQ,SAAWR,KAAKQ,QACrBR,KAAKU,gBAAgBC,KAAKX,KAAKQ,SAC/BR,KAAKY,QAAQD,MAAM,EAGbX,KAAAa,cAAiBC,IACvB,GAAId,KAAKO,SAAU,OACnB,GAAIO,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACtCD,EAAEE,iBACFhB,KAAKS,a,GAIDT,KAAAiB,aAAgBH,IACtBA,EAAEI,kBACFlB,KAAKmB,SAASR,MAAM,CAoEvB,CAjEC,MAAAS,GACE,MAAMC,EAAKrB,KAAKI,KAAKkB,cACrB,MAAMC,EAAcjC,EAAaU,KAAKI,MACtC,MAAMoB,EAAW9B,EAAUM,KAAKI,MAEhC,MAAMqB,EAAgBzB,KAAK0B,UAAY,KACnC,CAAEA,gBAAiB1B,KAAK0B,WAAa,SAAW,GAAG1B,KAAK0B,aAAe1B,KAAK0B,UAC5EC,UAEJ,MAAMC,EAAmC,CACvCC,IAAO,KACP,CAAC,eAAe7B,KAAKC,UAAW,KAChC,CAAC,iBAAiBD,KAAKE,YAAa,KACpC,CAAC,kBAAkBF,KAAKG,aAAc,KACtC,CAAC,aAAaH,KAAKI,QAAS,KAC5B,eAAgBJ,KAAKK,QACrB,4BAA6BL,KAAKK,QAClC,+BAAgCL,KAAKK,UAAYL,KAAKM,UACtD,CAAC,kBAAkBe,KAAO,MAC1B,CAAC,mBAAmBA,KAAOrB,KAAKM,UAChC,iBAAkBN,KAAKM,UACvB,mBAAoB,KACpB,gBAAiBN,KAAKO,SACtB,eAAgBP,KAAKQ,QACrB,iBAAuBR,KAAK8B,aAAe,SAC3C,eAAuB9B,KAAK8B,aAAe,OAC3C,iBAAuB9B,KAAK8B,aAAe,SAC3C,sBAAuB9B,KAAK8B,aAAe,eAG7C,OACEC,EAACC,EAAI,CAAAjB,IAAA,2CACHkB,MAAOL,EACPM,MAAOT,EACPU,QAASnC,KAAKS,YACd2B,UAAWpC,KAAKa,cAChBwB,KAAK,SACLC,SAAUtC,KAAKO,UAAW,EAAK,EAAC,eAClBgC,OAAOvC,KAAKQ,SAAQ,gBACnBR,KAAKO,UAAYoB,WAEhCI,EAAA,QAAAhB,IAAA,2CAAMkB,MAAM,iBAAiBC,MAAO,CAAEM,SAAU,GAAGhB,MAAciB,WAAY,MAC3EV,EAAA,QAAAhB,IAAA,2CAAM2B,KAAK,UAEbX,EAAA,QAAAhB,IAAA,2CAAMkB,MAAO,CAAEU,WAAc,KAAMpB,CAACA,GAAc,OAC/CvB,KAAK4C,OAEP5C,KAAKM,WACJyB,EAAA,UAAAhB,IAAA,2CACE8B,KAAK,SACLZ,MAAM,cACNE,QAASnC,KAAKiB,aAAY,aACd,UAAUjB,KAAK4C,QAC3BN,UAAU,GAEVP,EAAA,QAAAhB,IAAA,2CAAM2B,KAAK,eACTX,EAAA,QAAAhB,IAAA,2CAAMkB,MAAM,gBAAgBC,MAAO,CAAEM,SAAU,GAAGhB,MAAciB,WAAY,MAAK,O","ignoreList":[]}
+{"version":3,"names":["chipCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","Chip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","state","size","rounded","removable","isInactive","handleRemove","e","stopPropagation","dsRemove","emit","render","textVariant","iconSize","maxWidthStyle","maxWidth","undefined","h","Host","key","class","tag","chip","background","style","tag__label","label","type","onClick","disabled","name","color"],"sources":["src/wc/components/Chip/Chip.css?tag=ds-chip&encapsulation=scoped","src/wc/components/Chip/Chip.tsx"],"sourcesContent":["@import '../Tag/Tag.css';\n@import '../../utils/control-inactive.css';\n\n/*\n * Semantic state colors — Chip’s differentiator from Tag.\n * All states use the faint contrast weight; hue comes from the state.\n */\n:host(.chip--default) {\n  background-color: var(--color-background-faint-neutral);\n  color: var(--color-foreground-bold-neutral);\n}\n\n:host(.chip--active) {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n:host(.chip--error) {\n  background-color: var(--color-background-faint-negative);\n  color: var(--color-foreground-bold-negative);\n}\n\n:host(.chip--caution) {\n  background-color: var(--color-background-faint-caution);\n  color: var(--color-foreground-bold-caution);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n/**\n * Semantic chip state — replaces Tag’s intent × contrast matrix.\n * - `default` — neutral faint\n * - `active` — brand faint\n * - `error` — negative faint\n * - `caution` — caution faint\n */\nexport type ChipState = 'default' | 'active' | 'error' | 'caution';\nexport type ChipSize = 'md' | 'sm' | 'xs';\nexport type ChipBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\n/** Text variant per control-density recipe (md / sm / xs). */\nconst TEXT_VARIANT: Record<ChipSize, string> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\n/** Dismiss `ds-icon` size — same iconography metrics as Tag’s leading icon. */\nconst ICON_SIZE: Record<ChipSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n/**\n * Removable chip — same density recipe as Tag, but colored by semantic `state`\n * (not intent × contrast). Not a toggle/select control; the only intentional\n * action is remove.\n */\n@Component({\n  tag: 'ds-chip',\n  styleUrl: 'Chip.css',\n  scoped: true,\n})\nexport class Chip {\n  @Prop() label!: string;\n  /** Semantic color state. @default 'default' */\n  @Prop() state: ChipState = 'default';\n  @Prop() size: ChipSize = 'md';\n  @Prop() rounded: boolean = false;\n  /** When true (default), shows the trailing dismiss control. */\n  @Prop() removable: boolean = true;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() isInactive: boolean = false;\n  /** Surface context for interaction-fill tokens when the chip sits on a non-default surface. */\n  @Prop() background: ChipBackground | undefined;\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (this.isInactive) return;\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const textVariant = TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          'tag': true,\n          'chip': true,\n          [`chip--${this.state}`]: true,\n          [`tag--size-${this.size}`]: true,\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          'tag--rounded': this.rounded,\n          'tag--removable': this.removable,\n          /* Hover overlay on the chip surface — dismiss is the only action. */\n          'ds-interaction-fill': !this.isInactive && this.removable,\n          'ds-interaction-fill--on-medium': this.background === 'medium',\n          'ds-interaction-fill--on-bold': this.background === 'bold',\n          'ds-interaction-fill--on-strong': this.background === 'strong',\n          'ds-interaction-fill--on-always-dark': this.background === 'always-dark',\n          'ds-control-inactive': this.isInactive,\n        }}\n        style={maxWidthStyle}\n        aria-disabled={this.isInactive || undefined}\n      >\n        <span class={{ 'tag__label': true, [textVariant]: true }}>\n          {this.label}\n        </span>\n        {this.removable && (\n          <button\n            type=\"button\"\n            class=\"tag__remove ds-focus-ring-inset\"\n            onClick={this.handleRemove}\n            aria-label={`Remove ${this.label}`}\n            disabled={this.isInactive || undefined}\n          >\n            <slot name=\"remove-icon\">\n              <ds-icon class=\"tag__remove-x\" name=\"Cross\" size={iconSize} color=\"inherit\"></ds-icon>\n            </slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"iGAAA,MAAMA,EAAU,IAAM,66YCctB,MAAMC,EAAyC,CAC7CC,GAAI,mBACJC,GAAI,kBACJC,GAAI,gBAIN,MAAMC,EAAkD,CACtDH,GAAI,KACJC,GAAI,KACJC,GAAI,M,MAaOE,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,6EAQUC,KAAAC,MAAmB,UACnBD,KAAAE,KAAiB,KACjBF,KAAAG,QAAmB,MAEnBH,KAAAI,UAAqB,KAErBJ,KAAAK,WAAsB,MAOtBL,KAAAM,aAAgBC,IACtBA,EAAEC,kBACF,GAAIR,KAAKK,WAAY,OACrBL,KAAKS,SAASC,MAAM,CAqDvB,CAlDC,MAAAC,GACE,MAAMC,EAActB,EAAaU,KAAKE,MACtC,MAAMW,EAAWnB,EAAUM,KAAKE,MAEhC,MAAMY,EAAgBd,KAAKe,UAAY,KACnC,CAAEA,gBAAiBf,KAAKe,WAAa,SAAW,GAAGf,KAAKe,aAAef,KAAKe,UAC5EC,UAEJ,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,IAAO,KACPC,KAAQ,KACR,CAAC,SAAStB,KAAKC,SAAU,KACzB,CAAC,aAAaD,KAAKE,QAAS,KAC5B,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,iBAAkBF,KAAKE,OAAS,KAChC,eAAgBF,KAAKG,QACrB,iBAAkBH,KAAKI,UAEvB,uBAAwBJ,KAAKK,YAAcL,KAAKI,UAChD,iCAAkCJ,KAAKuB,aAAe,SACtD,+BAAgCvB,KAAKuB,aAAe,OACpD,iCAAkCvB,KAAKuB,aAAe,SACtD,sCAAuCvB,KAAKuB,aAAe,cAC3D,sBAAuBvB,KAAKK,YAE9BmB,MAAOV,EAAa,gBACLd,KAAKK,YAAcW,WAElCC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAEK,WAAc,KAAMb,CAACA,GAAc,OAC/CZ,KAAK0B,OAEP1B,KAAKI,WACJa,EAAA,UAAAE,IAAA,2CACEQ,KAAK,SACLP,MAAM,kCACNQ,QAAS5B,KAAKM,aAAY,aACd,UAAUN,KAAK0B,QAC3BG,SAAU7B,KAAKK,YAAcW,WAE7BC,EAAA,QAAAE,IAAA,2CAAMW,KAAK,eACTb,EAAA,WAAAE,IAAA,2CAASC,MAAM,gBAAgBU,KAAK,QAAQ5B,KAAMW,EAAUkB,MAAM,c","ignoreList":[]}

package/dist/components/ds-divider.js

@@ -1,2 +1,2 @@
-import{p as i,H as e,h as d,a as r,t as s}from"./index.js";const a=()=>`.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[surface='on-bold-background'].sc-ds-divider-h,.divider--surface-on-bold-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-bold-background)}[surface='on-strong-background'].sc-ds-divider-h,.divider--surface-on-strong-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-strong-background)}[surface='on-medium-background'].sc-ds-divider-h,.divider--surface-on-medium-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-medium-background)}[surface='on-translucent-background'].sc-ds-divider-h,.divider--surface-on-translucent-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-translucent-background)}[surface='navigation'].sc-ds-divider-h,.divider--surface-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[surface='media'].sc-ds-divider-h,.divider--surface-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[surface='always-dark'].sc-ds-divider-h,.divider--surface-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[surface='inverted'].sc-ds-divider-h,.divider--surface-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}`;const n={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const c=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.orientation="horizontal";this.surface="default";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(n,this.inset)?n[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const i=this.orientation==="vertical";const e=this.length!=="auto"&&this.length!=="full";return d(r,{key:"a9e79ad8e31b1c7e49c33427e73dca4eee885096",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":i,"divider--custom-length":e,[`divider--surface-${this.surface}`]:true},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return a()}},[2,"ds-divider",{orientation:[1],surface:[1],inset:[1],length:[1],semantic:[4]}]);function o(){if(typeof customElements==="undefined"){return}const i=["ds-divider"];i.forEach((i=>{switch(i){case"ds-divider":if(!customElements.get(s(i))){customElements.define(s(i),c)}break}}))}o();const t=c;const v=o;export{t as DsDivider,v as defineCustomElement};
+import{p as i,H as e,h as d,a as r,t as s}from"./index.js";const a=()=>`.sc-ds-divider-h{--_divider-color:var(--color-divider-divider);--_divider-inset:0;--_divider-length:100%;display:block;flex-shrink:0;width:var(--_divider-length);height:var(--dimension-stroke-width-012);margin:0 var(--_divider-inset);border:none;background-color:var(--_divider-color)}.divider--vertical.sc-ds-divider-h{width:var(--dimension-stroke-width-012);height:var(--_divider-length);min-height:var(--dimension-stroke-width-012);margin:var(--_divider-inset) 0;align-self:stretch}.divider--vertical.divider--custom-length.sc-ds-divider-h{align-self:center}[surface='on-bold-background'].sc-ds-divider-h,.divider--surface-on-bold-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-bold-background)}[surface='on-strong-background'].sc-ds-divider-h,.divider--surface-on-strong-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-strong-background)}[surface='on-medium-background'].sc-ds-divider-h,.divider--surface-on-medium-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-medium-background)}[surface='on-translucent-background'].sc-ds-divider-h,.divider--surface-on-translucent-background.sc-ds-divider-h{--_divider-color:var(--color-divider-on-translucent-background)}[surface='navigation'].sc-ds-divider-h,.divider--surface-navigation.sc-ds-divider-h{--_divider-color:var(--color-navigation-divider)}[surface='media'].sc-ds-divider-h,.divider--surface-media.sc-ds-divider-h{--_divider-color:var(--color-media-divider)}[surface='always-dark'].sc-ds-divider-h,.divider--surface-always-dark.sc-ds-divider-h{--_divider-color:var(--color-always-dark-divider)}[surface='inverted'].sc-ds-divider-h,.divider--surface-inverted.sc-ds-divider-h{--_divider-color:var(--color-inverted-divider)}`;const n={none:"0","space-000":"var(--dimension-space-000)","space-012":"var(--dimension-space-012)","space-025":"var(--dimension-space-025)","space-050":"var(--dimension-space-050)","space-075":"var(--dimension-space-075)","space-100":"var(--dimension-space-100)","space-125":"var(--dimension-space-125)","space-150":"var(--dimension-space-150)","space-175":"var(--dimension-space-175)","space-200":"var(--dimension-space-200)","space-250":"var(--dimension-space-250)","space-300":"var(--dimension-space-300)","space-400":"var(--dimension-space-400)","space-600":"var(--dimension-space-600)","space-800":"var(--dimension-space-800)"};const c=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.orientation="horizontal";this.surface="default";this.inset="none";this.length="auto";this.semantic=false}resolveInset(){return Object.prototype.hasOwnProperty.call(n,this.inset)?n[this.inset]:this.inset}resolveLength(){return this.length==="auto"||this.length==="full"?"100%":this.length}render(){const i=this.orientation==="vertical";const e=this.length!=="auto"&&this.length!=="full";return d(r,{key:"1ffdf3d6abbe646767d01740edd53f45c2dff4a3",role:this.semantic?"separator":undefined,"aria-orientation":this.semantic?this.orientation:undefined,"aria-hidden":this.semantic?undefined:"true",class:{divider:true,"divider--vertical":i,"divider--custom-length":e,[`divider--surface-${this.surface}`]:true},style:{"--_divider-inset":this.resolveInset(),"--_divider-length":this.resolveLength()}})}static get style(){return a()}},[2,"ds-divider",{orientation:[1],surface:[1],inset:[1],length:[1],semantic:[4]}]);function o(){if(typeof customElements==="undefined"){return}const i=["ds-divider"];i.forEach((i=>{switch(i){case"ds-divider":if(!customElements.get(s(i))){customElements.define(s(i),c)}break}}))}o();const t=c;const v=o;export{t as DsDivider,v as defineCustomElement};
 //# sourceMappingURL=ds-divider.js.map

package/dist/components/ds-empty-state.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a as c,t as n}from"./index.js";const o=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const a={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(c,{key:"452f3dc088c95f003eff619455435893e613b794"},s("div",{key:"8cf7988d365c275dbe997961f22a77e9150dc04b",class:"empty-state"},s("p",{key:"d5ffda6a2ff29428c6247f470e4f2c28635f288b",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||a[this.type])))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(n(t))){customElements.define(n(t),d)}break}}))}i();const r=d;const f=i;export{r as DsEmptyState,f as defineCustomElement};
+import{p as t,H as e,h as s,a,t as c}from"./index.js";const o=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const n={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const r=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(a,{key:"6a82bf32c2456abb11f59735bb1f4ef5e82f5363"},s("div",{key:"82c2fa1983d50c98ed8ac1ac21b284669ef5ac76",class:"empty-state"},s("p",{key:"fc5e3554125dea2995485ac4178f46ba966e9eae",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||n[this.type])))}static get style(){return o()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(c(t))){customElements.define(c(t),r)}break}}))}i();const d=r;const p=i;export{d as DsEmptyState,p as defineCustomElement};
 //# sourceMappingURL=ds-empty-state.js.map

package/dist/components/ds-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}
+{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* Fill the parent slot — callers size the container (page body, table body, etc.).\n     Do not use --dimension-card-height-* here; those are for card chrome, not empty placeholders. */\n  height: 100%;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAgB,IAAM,sOCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}

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 c=()=>`.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 i=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"154ef5697d15acc54c2d99aa9369fe1a993accfb"},d("div",{key:"0d0487d87fe2eb6995c7a2ee03ff22eea89051ca",class:"field"},d("label",{key:"d21d011ca84f23f6abe439fb184d319c6a60e32f",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"9791ec917068cef75305e7a84cbfef33dd54dddd"})))}static get style(){return c()}},[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};
+import{p as e,H as s,h as d,a as l,t as f}from"./index.js";const c=()=>`.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 t=0;const i=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++t}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"0c8d44044fc1de4fd6b7f0ddff24c7fcf74a29cf"},d("div",{key:"c41369fa0ac4503a45192ffa9b9bad6d85738962",class:"field"},d("label",{key:"814cfce2db819d0b98facef9cd927b1861394524",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"99f6f8127348a591e1c16bfe8edd6369eb685a3c"})))}static get style(){return c()}},[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(f(e))){customElements.define(f(e),i)}break}}))}a();const n=i;const o=a;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["fieldCss","fieldCounter","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","resolvedId","render","id","fieldId","h","Host","key","class","htmlFor","label"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\n.field__label {\n  display: block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nlet fieldCounter = 0;\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Prop() label!: string;\n  /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */\n  @Prop() fieldId: string | undefined;\n\n  private resolvedId = `ds-field-${++fieldCounter}`;\n\n  render() {\n    const id = this.fieldId || this.resolvedId;\n    return (\n      <Host>\n        <div class=\"field\">\n          <label class=\"text-body-small-emphasis field__label\" htmlFor={id}>{this.label}</label>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAW,IAAM,6JCEvB,IAAIC,EAAe,E,MAONC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAUUC,KAAAC,WAAa,cAAcP,GAapC,CAXC,MAAAQ,GACE,MAAMC,EAAKH,KAAKI,SAAWJ,KAAKC,WAChC,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,wCAAwCC,QAASN,GAAKH,KAAKU,OACxEL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["fieldCss","fieldCounter","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","resolvedId","render","id","fieldId","h","Host","key","class","htmlFor","label"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\n.field__label {\n  display: block;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nlet fieldCounter = 0;\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Prop() label!: string;\n  /** ID forwarded to the slotted control via the label's `for` attribute. Auto-generated if omitted. */\n  @Prop() fieldId: string | undefined;\n\n  private resolvedId = `ds-field-${++fieldCounter}`;\n\n  render() {\n    const id = this.fieldId || this.resolvedId;\n    return (\n      <Host>\n        <div class=\"field\">\n          <label class=\"text-body-small-emphasis field__label\" htmlFor={id}>{this.label}</label>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAW,IAAM,6JCEvB,IAAIC,EAAe,E,MAONC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAUUC,KAAAC,WAAa,cAAcP,GAapC,CAXC,MAAAQ,GACE,MAAMC,EAAKH,KAAKI,SAAWJ,KAAKC,WAChC,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,wCAAwCC,QAASN,GAAKH,KAAKU,OACxEL,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ds-header.js

@@ -1,2 +1,2 @@
-import{p as e,H as r,h as s,a,t as d}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const t=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return s(a,{key:"582bd542b6447ced6cc66144e906bf0cf8fdc580",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},s("div",{key:"99f7eb72f19e7de12127559b8e41c542ebadb244",class:"left"},s("slot",{key:"cb8b7e3eb281d4895ad80dc45ec924dfe775afd4",name:"left"}),this.heading&&s("span",{key:"853d46a3d631c2f4cd42b07d28759fefdf623cdf",class:"title text-title-small"},this.heading)),s("div",{key:"438d9b039dad0c9e11fa24734bfff287706704bc",class:"center"},s("slot",{key:"6176e5d35bbbdce7c62ee0af91ddc5f528ffa7a9",name:"center"})),s("div",{key:"c2a09f30c23df0af7da6c37c88193223defae7cb",class:"right"},s("slot",{key:"204f71f84780469d01b4b91d6970c2ac16ba8c22",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(d(e))){customElements.define(d(e),t)}break}}))}n();const i=t;const o=n;export{i as DsHeader,o as defineCustomElement};
+import{p as e,H as a,h as r,a as s,t as d}from"./index.js";const t=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"d6ab9780cdcbd10699d89949ca44589744753c18",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"be3ae3d0087d7820884952dbc10b0a611401bf49",class:"left"},r("slot",{key:"788dfff408e03cfdcfd678e934ae844823e87bf5",name:"left"}),this.heading&&r("span",{key:"b5b83bde3a68d3f7bee0a0f54a3934be36f1ae85",class:"title text-title-small"},this.heading)),r("div",{key:"261907e401dddadeb505cfa4a9920bc378655bc5",class:"center"},r("slot",{key:"3c53d1e2d04f2a29f42e1e3ce92562170912b998",name:"center"})),r("div",{key:"afeab39ec0d9686da588290ab7877b0804886257",class:"right"},r("slot",{key:"effcd2865f748659fcc60a9da6c8137aaaedeed5",name:"right"})))}static get style(){return t()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(d(e))){customElements.define(d(e),c)}break}}))}n();const i=c;const o=n;export{i as DsHeader,o as defineCustomElement};
 //# sourceMappingURL=ds-header.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}
+{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}

package/dist/components/ds-icon.js

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

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as s,h as t,a as r,t as a}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 a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"215418d9e24c49aab546792a49f00ab93b6532c3",class:"input-container"},t("div",{key:"afb8e90064eb9258a998e6fc5e37405d8f45cee8",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"651fcd2ca36afe07e168ddc73fbb5676dd332fda",class:"row"},t("input",{key:"8b7027c8ed40273c90e7968afb5e06ffcbd951f1",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":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"0bc32a1f5e49a0fe138fd885cae7d1674c01db13",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"66fb9bc862c86313507ca5ba0060e327db38e4c4","aria-hidden":"true"},"×")),t("span",{key:"3dc319f395c6c9721cc01cc447d97b6ce4231b5b",class:"suffix"},t("slot",{key:"71ea40da9ac752c0f49c55a38d227c0145051380",name:"suffix"})))),s&&t("div",{key:"50f20da4db88ebfe729bb1e30d46e74dad133aa5",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(a(e))){customElements.define(a(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 t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.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{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:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.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.isInactive=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.isInactive;const s=this.error&&Boolean(this.errorMessage);const r=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(a,{key:"3fedcfd651ec9a8e158ca749b84a562f3935207f",class:{"input-container":true,"ds-control-inactive":this.isInactive}},t("div",{key:"8ab20d1588c29ca2d2b921e7f1eaf1f4e9d7a704",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"1aaee585e0f7bd55b92aa46b8b5803286eb87d0d",class:"row"},t("input",{key:"20f63e90b317e31f7a59a691b229186783347811",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.isInactive,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:"614b601791c2bc930be8b7e168677a27257fd107",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"38206d2b051471d88bba2507eb9c962fc2c0df72","aria-hidden":"true"},"×")),t("span",{key:"aecdd907831c1506ea3ad73e575d42662a060549",class:"suffix"},t("slot",{key:"f44ee339b4373dd028544090381a4e070bb050eb",name:"suffix"})))),s&&t("div",{key:"d4e3b331b5bfcea4af584b4a9faaae2c072cf986",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],isInactive:[4,"is-inactive"],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":"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":[]}
+{"version":3,"names":["inputCss","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","type","isInactive","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":["@import '../../utils/control-inactive.css';\n\n.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/* Inactive: host `.ds-control-inactive` (25% opacity). Native disabled still blocks input. */\n.native-input:disabled {\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: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\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() isInactive: 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.isInactive;\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': true, 'ds-control-inactive': this.isInactive }}>\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.isInactive}\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,m0ECIvB,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,WAAsB,MACtBL,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,WAC3E,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,MAAO,CAAE,kBAAmB,KAAM,sBAAuBlC,KAAKK,aAClE0B,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,WACfC,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-loader.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as t,t as i}from"./index.js";import{T as r}from"./p-bDf6yBQd.js";import{r as n}from"./p-BWUTr_XN.js";const o=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin 0.75s linear infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const a=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.size=r.iconographyMd}get sizePx(){return n(this.size,r.iconographyMd)}render(){const s=`${this.sizePx}px`;const e=t("svg",{style:{width:s,height:s},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return e;return t("span",{role:"status","aria-live":"polite",class:"status"},e,t("span",{class:"visually-hidden"},this.label))}static get style(){return o()}},[1,"ds-loader",{size:[8],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const s=["ds-loader"];s.forEach((s=>{switch(s){case"ds-loader":if(!customElements.get(i(s))){customElements.define(i(s),a)}break}}))}l();const d=a;const c=l;export{d as DsLoader,c as defineCustomElement};
+import{p as e,H as s,h as t,t as i}from"./index.js";import{T as n}from"./p-B9dHCgY-.js";import{r}from"./p-BWUTr_XN.js";const a=()=>`:host{display:inline-flex;align-items:center;flex-shrink:0}.spinner{flex-shrink:0;animation:spin var(--effect-animation-duration-long-1) var(--effect-animation-easing-linear) infinite}.status{display:inline-flex;align-items:center}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.size=n.iconographyMd}get sizePx(){return r(this.size,n.iconographyMd)}render(){const e=`${this.sizePx}px`;const s=t("svg",{style:{width:e,height:e},viewBox:"0 0 16 16",fill:"none",class:"spinner","aria-hidden":"true"},t("circle",{cx:"8",cy:"8",r:"5",stroke:"currentColor","stroke-width":"1","stroke-linecap":"round","stroke-dasharray":"23.6 7.9"}));if(!this.label)return s;return t("span",{role:"status","aria-live":"polite",class:"status"},s,t("span",{class:"visually-hidden"},this.label))}static get style(){return a()}},[1,"ds-loader",{size:[8],label:[1]}]);function l(){if(typeof customElements==="undefined"){return}const e=["ds-loader"];e.forEach((e=>{switch(e){case"ds-loader":if(!customElements.get(i(e))){customElements.define(i(e),o)}break}}))}l();const c=o;const d=l;export{c as DsLoader,d as defineCustomElement};
 //# sourceMappingURL=ds-loader.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","TOKEN_DEFAULTS","iconographyMd","sizePx","resolveCssLengthPx","render","px","svg","h","style","width","height","viewBox","fill","class","cx","cy","r","stroke","label","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.spinner {\n  flex-shrink: 0;\n  animation: spin 0.75s linear infinite;\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\n\n@Component({\n  tag: 'ds-loader',\n  styleUrl: 'Loader.css',\n  shadow: true,\n})\nexport class Loader {\n  /** Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.). */\n  @Prop() size: number | string = TOKEN_DEFAULTS.iconographyMd;\n  /**\n   * Accessible label for standalone usage. Wraps the spinner in a live region\n   * and renders the label visually-hidden. Omit when the host element already\n   * conveys busy state via aria-busy.\n   */\n  @Prop() label: string | undefined;\n\n  private get sizePx(): number {\n    return resolveCssLengthPx(this.size, TOKEN_DEFAULTS.iconographyMd);\n  }\n\n  render() {\n    const px = `${this.sizePx}px`;\n    const svg = (\n      <svg\n        style={{ width: px, height: px }}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"spinner\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\" cy=\"8\" r=\"5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"23.6 7.9\"\n        />\n      </svg>\n    );\n\n    if (!this.label) return svg;\n\n    return (\n      <span role=\"status\" aria-live=\"polite\" class=\"status\">\n        {svg}\n        <span class=\"visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAY,IAAM,kY,MCQXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAwBC,EAAeC,aAyChD,CAjCC,UAAYC,GACV,OAAOC,EAAmBL,KAAKC,KAAMC,EAAeC,c,CAGtD,MAAAG,GACE,MAAMC,EAAK,GAAGP,KAAKI,WACnB,MAAMI,EACJC,EAAA,OACEC,MAAO,CAAEC,MAAOJ,EAAIK,OAAQL,GAC5BM,QAAQ,YACRC,KAAK,OACLC,MAAM,UAAS,cACH,QAEZN,EAAA,UACEO,GAAG,IAAIC,GAAG,IAAIC,EAAE,IAChBC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,mBACL,cAKvB,IAAKnB,KAAKoB,MAAO,OAAOZ,EAExB,OACEC,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASN,MAAM,UAC1CP,EACDC,EAAA,QAAMM,MAAM,mBAAmBf,KAAKoB,O","ignoreList":[]}
+{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","TOKEN_DEFAULTS","iconographyMd","sizePx","resolveCssLengthPx","render","px","svg","h","style","width","height","viewBox","fill","class","cx","cy","r","stroke","label","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n\n.spinner {\n  flex-shrink: 0;\n  animation: spin var(--effect-animation-duration-long-1) var(--effect-animation-easing-linear) infinite;\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n}\n\n.visually-hidden {\n  position: absolute;\n  /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  /* stylelint-enable declaration-property-value-disallowed-list */\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(360deg); }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { resolveCssLengthPx, TOKEN_DEFAULTS } from '../../utils';\n\n@Component({\n  tag: 'ds-loader',\n  styleUrl: 'Loader.css',\n  shadow: true,\n})\nexport class Loader {\n  /** Render size — number (px) or TokoMo length (`var(--dimension-iconography-md)`, etc.). */\n  @Prop() size: number | string = TOKEN_DEFAULTS.iconographyMd;\n  /**\n   * Accessible label for standalone usage. Wraps the spinner in a live region\n   * and renders the label visually-hidden. Omit when the host element already\n   * conveys busy state via aria-busy.\n   */\n  @Prop() label: string | undefined;\n\n  private get sizePx(): number {\n    return resolveCssLengthPx(this.size, TOKEN_DEFAULTS.iconographyMd);\n  }\n\n  render() {\n    const px = `${this.sizePx}px`;\n    const svg = (\n      <svg\n        style={{ width: px, height: px }}\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        class=\"spinner\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          cx=\"8\" cy=\"8\" r=\"5\"\n          stroke=\"currentColor\"\n          stroke-width=\"1\"\n          stroke-linecap=\"round\"\n          stroke-dasharray=\"23.6 7.9\"\n        />\n      </svg>\n    );\n\n    if (!this.label) return svg;\n\n    return (\n      <span role=\"status\" aria-live=\"polite\" class=\"status\">\n        {svg}\n        <span class=\"visually-hidden\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,oc,MCQXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAwBC,EAAeC,aAyChD,CAjCC,UAAYC,GACV,OAAOC,EAAmBL,KAAKC,KAAMC,EAAeC,c,CAGtD,MAAAG,GACE,MAAMC,EAAK,GAAGP,KAAKI,WACnB,MAAMI,EACJC,EAAA,OACEC,MAAO,CAAEC,MAAOJ,EAAIK,OAAQL,GAC5BM,QAAQ,YACRC,KAAK,OACLC,MAAM,UAAS,cACH,QAEZN,EAAA,UACEO,GAAG,IAAIC,GAAG,IAAIC,EAAE,IAChBC,OAAO,eAAc,eACR,IAAG,iBACD,QAAO,mBACL,cAKvB,IAAKnB,KAAKoB,MAAO,OAAOZ,EAExB,OACEC,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASN,MAAM,UAC1CP,EACDC,EAAA,QAAMM,MAAM,mBAAmBf,KAAKoB,O","ignoreList":[]}

package/dist/components/ds-menu.js

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-CpNIQXz6.js";const p=o;const t=s;export{p as DsMenu,t as defineCustomElement};
+import{M as o,d as s}from"./p-DKdI8T8v.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as t,h as a,a as o,t as i}from"./index.js";import{r as d}from"./p-C1cBr-Ri.js";import{T as n}from"./p-bDf6yBQd.js";const l=()=>`.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 - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);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 r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["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 m=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=t(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;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}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const s=this.getFocusables(e);(s[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).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 s=this.el.querySelector(".modal-dialog");if(!s)return;const t=this.getFocusables(s);if(!t.length){e.preventDefault();s.focus();return}const a=t[0];const o=t[t.length-1];const i=document.activeElement;if(e.shiftKey){if(i===a||i===s||!s.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!s.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 r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return a(o,{key:"119e503da985fa5708c2c7905342970967a5c66c",style:{display:"contents"}},a("div",{key:"4705eb57c4e8db24f18fad413dd5de9dfbda6fb2",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:"985ae229ddf00b907770809f49b312c4e6c16bae",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 - 2 * var(--dimension-space-200)))`}},a("div",{key:"64582583cd9048d0c3da4733ddef22fd9566677c",class:"modal-header"},a("h2",{key:"9ee14d042fd5756b25f913cc6e34efda94208f01",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&a("div",{key:"66ae051aeb6d97cb96e373391ae2c4e1d81dbee8",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),a("div",{key:"d92b28b01b6cb1453822a0afd6536ffcb15b971b",class:"modal-body"},a("slot",{key:"3f2840e7549674939a5151313301bd2a34a84d14"})),a("div",{key:"3c5afd23204bfbf6d9018a5740651a4ecc242f9b",class:"modal-footer"},a("slot",{key:"159ec8278497d23cab8778b039282e7fc78428e2",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[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),f)}break}}))}h();const u=f;const b=h;export{u as DsModal,b as defineCustomElement};
+import{p as e,H as a,c as s,h as t,a as o,t as i}from"./index.js";import{r as d}from"./p-C1cBr-Ri.js";import{T as n}from"./p-B9dHCgY-.js";const l=()=>`.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 - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);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 r={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const c=["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 m=0;const f=e(class e extends a{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=++m;this.titleId=`ds-modal-title-${m}`;this.subtitleId=`ds-modal-subtitle-${m}`;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}),this.closeAnimationMs)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const a=this.getFocusables(e);(a[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(c)).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 a=this.el.querySelector(".modal-dialog");if(!a)return;const s=this.getFocusables(a);if(!s.length){e.preventDefault();a.focus();return}const t=s[0];const o=s[s.length-1];const i=document.activeElement;if(e.shiftKey){if(i===t||i===a||!a.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!a.contains(i)){e.preventDefault();t.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 r[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return d(n.motionShort3,n.animationDurationShort3)}render(){const e=!this.shouldRender&&!this.closing;return t(o,{key:"0a59d1100fd45aa4b68102c3b51766d121abd168",style:{display:"contents"}},t("div",{key:"d245c0df5efc615f44a98f51367a9206aed73ed5",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)"}},t("div",{key:"6b8ebc451b6207147ba08d602ba2dfe8f5510a2e",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 - 2 * var(--dimension-space-200)))`}},t("div",{key:"0c18ff7da02c4231f297058823687145f57e34cd",class:"modal-header"},t("h2",{key:"5ed85b775a37981e1d6428baa339998faf00ffd3",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&t("div",{key:"4a6f52a367e10de66c777e89c29400e4649ab02c",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),t("div",{key:"3a9cf05910cc360b3021a1043026fcc676bc3adb",class:"modal-body"},t("slot",{key:"ef9cdd5243332e943898e3b776418303a8ba1a35"})),t("div",{key:"04ca8da98cf02310802370f7ee68b296cd28fd96",class:"modal-footer"},t("slot",{key:"4ad33064f0a70856581698ca2c4aa224b8f66772",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[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),f)}break}}))}h();const u=f;const b=h;export{u as DsModal,b as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

package/dist/components/ds-pagination.js

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as n,h as s,a as o,t as e}from"./index.js";const a=()=>`.sc-ds-pagination-h{display:inline-block}.pagination.sc-ds-pagination{display:flex;align-items:center;gap:var(--dimension-space-025);-webkit-user-select:none;user-select:none}.pagination--inactive.sc-ds-pagination{opacity:0.5;pointer-events:none}.button.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0 var(--dimension-space-050);background:none;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;color:var(--color-foreground-secondary);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button.sc-ds-pagination:hover:not(:disabled){background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button.sc-ds-pagination:active:not(:disabled){background-color:var(--color-interaction-pressed)}.button.sc-ds-pagination:disabled{cursor:not-allowed;opacity:0.35}.button.sc-ds-pagination:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.button--active.sc-ds-pagination{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button--nav.sc-ds-pagination{font-size:18px}.ellipsis.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300)}`;function r(t,i){const n=[];for(let s=t;s<=i;s++)n.push(s);return n}function c(t,i,n){const s=n*2+5;if(i<=s)return r(1,i);const o=Math.max(t-n,2);const e=Math.min(t+n,i-1);const a=o>2;const c=e<i-1;if(!a&&c)return[...r(1,n*2+3),"ellipsis",i];if(a&&!c)return[1,"ellipsis",...r(i-(n*2+2),i)];return[1,"ellipsis",...r(o,e),"ellipsis",i]}const l=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsPageChange=n(this,"dsPageChange");this.page=1;this.totalPages=1;this.siblingCount=1;this.inactive=false}go(t){if(this.inactive)return;this.page=t;this.dsPageChange.emit(t)}render(){if(this.totalPages<=1)return s(o,{style:{display:"none"}});const t=c(this.page,this.totalPages,this.siblingCount);return s(o,null,s("nav",{class:{pagination:true,"pagination--inactive":this.inactive},"aria-label":"Pagination"},s("button",{type:"button",class:"button button--nav",disabled:this.page<=1||this.inactive,onClick:()=>this.go(this.page-1),"aria-label":"Previous page"},"‹"),t.map(((t,i)=>t==="ellipsis"?s("span",{key:`e${i}`,class:"ellipsis"},s("span",{class:"text-body-small",style:{color:"var(--color-foreground-tertiary)"}},"…")):s("button",{key:t,type:"button",class:{button:true,"button--active":t===this.page},onClick:()=>this.go(t),"aria-current":t===this.page?"page":undefined,disabled:this.inactive},s("span",{class:t===this.page?"text-body-small-emphasis":"text-body-small"},t)))),s("button",{type:"button",class:"button button--nav",disabled:this.page>=this.totalPages||this.inactive,onClick:()=>this.go(this.page+1),"aria-label":"Next page"},"›")))}static get style(){return a()}},[2,"ds-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-pagination"];t.forEach((t=>{switch(t){case"ds-pagination":if(!customElements.get(e(t))){customElements.define(e(t),l)}break}}))}d();const u=l;const p=d;export{u as DsPagination,p as defineCustomElement};
+import{p as t,H as i,c as n,h as s,a as o,t as e}from"./index.js";const a=()=>`.ds-control-inactive.sc-ds-pagination-h,.ds-control-inactive.sc-ds-pagination{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-pagination-h{display:inline-block}.pagination.sc-ds-pagination{display:flex;align-items:center;gap:var(--dimension-space-025);-webkit-user-select:none;user-select:none}.button.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0 var(--dimension-space-050);background:none;border:none;border-radius:var(--dimension-radius-075);cursor:pointer;color:var(--color-foreground-secondary);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.button.sc-ds-pagination:hover:not(:disabled){background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button.sc-ds-pagination:active:not(:disabled){background-color:var(--color-interaction-pressed)}.button.sc-ds-pagination:disabled{cursor:not-allowed;opacity:0.35}.button.sc-ds-pagination:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.button--active.sc-ds-pagination{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.button--nav.sc-ds-pagination{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ellipsis.sc-ds-pagination{display:flex;align-items:center;justify-content:center;min-width:var(--dimension-size-300);height:var(--dimension-size-300)}`;function r(t,i){const n=[];for(let s=t;s<=i;s++)n.push(s);return n}function c(t,i,n){const s=n*2+5;if(i<=s)return r(1,i);const o=Math.max(t-n,2);const e=Math.min(t+n,i-1);const a=o>2;const c=e<i-1;if(!a&&c)return[...r(1,n*2+3),"ellipsis",i];if(a&&!c)return[1,"ellipsis",...r(i-(n*2+2),i)];return[1,"ellipsis",...r(o,e),"ellipsis",i]}const l=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsPageChange=n(this,"dsPageChange");this.page=1;this.totalPages=1;this.siblingCount=1;this.isInactive=false}go(t){if(this.isInactive)return;this.page=t;this.dsPageChange.emit(t)}render(){if(this.totalPages<=1)return s(o,{style:{display:"none"}});const t=c(this.page,this.totalPages,this.siblingCount);return s(o,null,s("nav",{class:{pagination:true,"ds-control-inactive":this.isInactive},"aria-label":"Pagination"},s("button",{type:"button",class:"button button--nav",disabled:this.page<=1||this.isInactive,onClick:()=>this.go(this.page-1),"aria-label":"Previous page"},"‹"),t.map(((t,i)=>t==="ellipsis"?s("span",{key:`e${i}`,class:"ellipsis"},s("span",{class:"text-body-small",style:{color:"var(--color-foreground-tertiary)"}},"…")):s("button",{key:t,type:"button",class:{button:true,"button--active":t===this.page},onClick:()=>this.go(t),"aria-current":t===this.page?"page":undefined,disabled:this.isInactive},s("span",{class:t===this.page?"text-body-small-emphasis":"text-body-small"},t)))),s("button",{type:"button",class:"button button--nav",disabled:this.page>=this.totalPages||this.isInactive,onClick:()=>this.go(this.page+1),"aria-label":"Next page"},"›")))}static get style(){return a()}},[2,"ds-pagination",{page:[1026],totalPages:[2,"total-pages"],siblingCount:[2,"sibling-count"],isInactive:[4,"is-inactive"]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-pagination"];t.forEach((t=>{switch(t){case"ds-pagination":if(!customElements.get(e(t))){customElements.define(e(t),l)}break}}))}d();const u=l;const p=d;export{u as DsPagination,p as defineCustomElement};
 //# sourceMappingURL=ds-pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["paginationCss","buildRange","start","end","items","i","push","buildPages","page","totalPages","siblings","totalSlots","leftSibling","Math","max","rightSibling","min","showLeft","showRight","Pagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","siblingCount","inactive","go","p","dsPageChange","emit","render","h","Host","style","display","pages","class","pagination","type","disabled","onClick","map","item","key","color","button","undefined"],"sources":["src/wc/components/Pagination/Pagination.css?tag=ds-pagination&encapsulation=scoped","src/wc/components/Pagination/Pagination.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n.pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.pagination--inactive {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0 var(--dimension-space-050);\n  background: none;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);\n}\n\n.button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button:active:not(:disabled) {\n  background-color: var(--color-interaction-pressed);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.35;\n}\n\n.button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n.button--active {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button--nav {\n  font-size: 18px;\n}\n\n.ellipsis {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nfunction buildRange(start: number, end: number): (number | 'ellipsis')[] {\n  const items: (number | 'ellipsis')[] = [];\n  for (let i = start; i <= end; i++) items.push(i);\n  return items;\n}\n\nfunction buildPages(page: number, totalPages: number, siblings: number): (number | 'ellipsis')[] {\n  const totalSlots = siblings * 2 + 5;\n  if (totalPages <= totalSlots) return buildRange(1, totalPages);\n\n  const leftSibling = Math.max(page - siblings, 2);\n  const rightSibling = Math.min(page + siblings, totalPages - 1);\n  const showLeft = leftSibling > 2;\n  const showRight = rightSibling < totalPages - 1;\n\n  if (!showLeft && showRight) return [...buildRange(1, siblings * 2 + 3), 'ellipsis', totalPages];\n  if (showLeft && !showRight) return [1, 'ellipsis', ...buildRange(totalPages - (siblings * 2 + 2), totalPages)];\n  return [1, 'ellipsis', ...buildRange(leftSibling, rightSibling), 'ellipsis', totalPages];\n}\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  @Prop({ mutable: true }) page: number = 1;\n  @Prop() totalPages: number = 1;\n  @Prop() siblingCount: number = 1;\n  @Prop() inactive: boolean = false;\n\n  @Event() dsPageChange!: EventEmitter<number>;\n\n  private go(p: number) {\n    if (this.inactive) return;\n    this.page = p;\n    this.dsPageChange.emit(p);\n  }\n\n  render() {\n    if (this.totalPages <= 1) return <Host style={{ display: 'none' }} />;\n\n    const pages = buildPages(this.page, this.totalPages, this.siblingCount);\n\n    return (\n      <Host>\n        <nav\n          class={{ pagination: true, 'pagination--inactive': this.inactive }}\n          aria-label=\"Pagination\"\n        >\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page <= 1 || this.inactive}\n            onClick={() => this.go(this.page - 1)}\n            aria-label=\"Previous page\"\n          >\n            &#x2039;\n          </button>\n\n          {pages.map((item, i) =>\n            item === 'ellipsis' ? (\n              <span key={`e${i}`} class=\"ellipsis\">\n                <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-tertiary)' }}>…</span>\n              </span>\n            ) : (\n              <button\n                key={item}\n                type=\"button\"\n                class={{ button: true, 'button--active': item === this.page }}\n                onClick={() => this.go(item)}\n                aria-current={item === this.page ? 'page' : undefined}\n                disabled={this.inactive}\n              >\n                <span class={item === this.page ? 'text-body-small-emphasis' : 'text-body-small'}>\n                  {item}\n                </span>\n              </button>\n            )\n          )}\n\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page >= this.totalPages || this.inactive}\n            onClick={() => this.go(this.page + 1)}\n            aria-label=\"Next page\"\n          >\n            &#x203A;\n          </button>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,s5CCE5B,SAASC,EAAWC,EAAeC,GACjC,MAAMC,EAAiC,GACvC,IAAK,IAAIC,EAAIH,EAAOG,GAAKF,EAAKE,IAAKD,EAAME,KAAKD,GAC9C,OAAOD,CACT,CAEA,SAASG,EAAWC,EAAcC,EAAoBC,GACpD,MAAMC,EAAaD,EAAW,EAAI,EAClC,GAAID,GAAcE,EAAY,OAAOV,EAAW,EAAGQ,GAEnD,MAAMG,EAAcC,KAAKC,IAAIN,EAAOE,EAAU,GAC9C,MAAMK,EAAeF,KAAKG,IAAIR,EAAOE,EAAUD,EAAa,GAC5D,MAAMQ,EAAWL,EAAc,EAC/B,MAAMM,EAAYH,EAAeN,EAAa,EAE9C,IAAKQ,GAAYC,EAAW,MAAO,IAAIjB,EAAW,EAAGS,EAAW,EAAI,GAAI,WAAYD,GACpF,GAAIQ,IAAaC,EAAW,MAAO,CAAC,EAAG,cAAejB,EAAWQ,GAAcC,EAAW,EAAI,GAAID,IAClG,MAAO,CAAC,EAAG,cAAeR,EAAWW,EAAaG,GAAe,WAAYN,EAC/E,C,MAOaU,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,qFAM2BC,KAAAhB,KAAe,EAChCgB,KAAAf,WAAqB,EACrBe,KAAAC,aAAuB,EACvBD,KAAAE,SAAoB,KAiE7B,CA7DS,EAAAC,CAAGC,GACT,GAAIJ,KAAKE,SAAU,OACnBF,KAAKhB,KAAOoB,EACZJ,KAAKK,aAAaC,KAAKF,E,CAGzB,MAAAG,GACE,GAAIP,KAAKf,YAAc,EAAG,OAAOuB,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAEzD,MAAMC,EAAQ7B,EAAWiB,KAAKhB,KAAMgB,KAAKf,WAAYe,KAAKC,cAE1D,OACEO,EAACC,EAAI,KACHD,EAAA,OACEK,MAAO,CAAEC,WAAY,KAAM,uBAAwBd,KAAKE,UAAU,aACvD,cAEXM,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQ,GAAKgB,KAAKE,SACjCe,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,iBAAe,KAK3B4B,EAAMM,KAAI,CAACC,EAAMtC,IAChBsC,IAAS,WACPX,EAAA,QAAMY,IAAK,IAAIvC,IAAKgC,MAAM,YACxBL,EAAA,QAAMK,MAAM,kBAAkBH,MAAO,CAAEW,MAAO,qCAAoC,MAGpFb,EAAA,UACEY,IAAKD,EACLJ,KAAK,SACLF,MAAO,CAAES,OAAQ,KAAM,iBAAkBH,IAASnB,KAAKhB,MACvDiC,QAAS,IAAMjB,KAAKG,GAAGgB,GAAK,eACdA,IAASnB,KAAKhB,KAAO,OAASuC,UAC5CP,SAAUhB,KAAKE,UAEfM,EAAA,QAAMK,MAAOM,IAASnB,KAAKhB,KAAO,2BAA6B,mBAC5DmC,MAMTX,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQgB,KAAKf,YAAce,KAAKE,SAC/Ce,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,aAAW,M","ignoreList":[]}
+{"version":3,"names":["paginationCss","buildRange","start","end","items","i","push","buildPages","page","totalPages","siblings","totalSlots","leftSibling","Math","max","rightSibling","min","showLeft","showRight","Pagination","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","siblingCount","isInactive","go","p","dsPageChange","emit","render","h","Host","style","display","pages","class","pagination","type","disabled","onClick","map","item","key","color","button","undefined"],"sources":["src/wc/components/Pagination/Pagination.css?tag=ds-pagination&encapsulation=scoped","src/wc/components/Pagination/Pagination.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n\n:host {\n  display: inline-block;\n}\n\n.pagination {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-025);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0 var(--dimension-space-050);\n  background: none;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  color: var(--color-foreground-secondary);\n  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);\n}\n\n.button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button:active:not(:disabled) {\n  background-color: var(--color-interaction-pressed);\n}\n\n.button:disabled {\n  cursor: not-allowed;\n  opacity: 0.35;\n}\n\n.button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n.button--active {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.button--nav {\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n}\n\n.ellipsis {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nfunction buildRange(start: number, end: number): (number | 'ellipsis')[] {\n  const items: (number | 'ellipsis')[] = [];\n  for (let i = start; i <= end; i++) items.push(i);\n  return items;\n}\n\nfunction buildPages(page: number, totalPages: number, siblings: number): (number | 'ellipsis')[] {\n  const totalSlots = siblings * 2 + 5;\n  if (totalPages <= totalSlots) return buildRange(1, totalPages);\n\n  const leftSibling = Math.max(page - siblings, 2);\n  const rightSibling = Math.min(page + siblings, totalPages - 1);\n  const showLeft = leftSibling > 2;\n  const showRight = rightSibling < totalPages - 1;\n\n  if (!showLeft && showRight) return [...buildRange(1, siblings * 2 + 3), 'ellipsis', totalPages];\n  if (showLeft && !showRight) return [1, 'ellipsis', ...buildRange(totalPages - (siblings * 2 + 2), totalPages)];\n  return [1, 'ellipsis', ...buildRange(leftSibling, rightSibling), 'ellipsis', totalPages];\n}\n\n@Component({\n  tag: 'ds-pagination',\n  styleUrl: 'Pagination.css',\n  scoped: true,\n})\nexport class Pagination {\n  @Prop({ mutable: true }) page: number = 1;\n  @Prop() totalPages: number = 1;\n  @Prop() siblingCount: number = 1;\n  @Prop() isInactive: boolean = false;\n\n  @Event() dsPageChange!: EventEmitter<number>;\n\n  private go(p: number) {\n    if (this.isInactive) return;\n    this.page = p;\n    this.dsPageChange.emit(p);\n  }\n\n  render() {\n    if (this.totalPages <= 1) return <Host style={{ display: 'none' }} />;\n\n    const pages = buildPages(this.page, this.totalPages, this.siblingCount);\n\n    return (\n      <Host>\n        <nav\n          class={{ pagination: true, 'ds-control-inactive': this.isInactive }}\n          aria-label=\"Pagination\"\n        >\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page <= 1 || this.isInactive}\n            onClick={() => this.go(this.page - 1)}\n            aria-label=\"Previous page\"\n          >\n            &#x2039;\n          </button>\n\n          {pages.map((item, i) =>\n            item === 'ellipsis' ? (\n              <span key={`e${i}`} class=\"ellipsis\">\n                <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-tertiary)' }}>…</span>\n              </span>\n            ) : (\n              <button\n                key={item}\n                type=\"button\"\n                class={{ button: true, 'button--active': item === this.page }}\n                onClick={() => this.go(item)}\n                aria-current={item === this.page ? 'page' : undefined}\n                disabled={this.isInactive}\n              >\n                <span class={item === this.page ? 'text-body-small-emphasis' : 'text-body-small'}>\n                  {item}\n                </span>\n              </button>\n            )\n          )}\n\n          <button\n            type=\"button\"\n            class=\"button button--nav\"\n            disabled={this.page >= this.totalPages || this.isInactive}\n            onClick={() => this.go(this.page + 1)}\n            aria-label=\"Next page\"\n          >\n            &#x203A;\n          </button>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,shDCE5B,SAASC,EAAWC,EAAeC,GACjC,MAAMC,EAAiC,GACvC,IAAK,IAAIC,EAAIH,EAAOG,GAAKF,EAAKE,IAAKD,EAAME,KAAKD,GAC9C,OAAOD,CACT,CAEA,SAASG,EAAWC,EAAcC,EAAoBC,GACpD,MAAMC,EAAaD,EAAW,EAAI,EAClC,GAAID,GAAcE,EAAY,OAAOV,EAAW,EAAGQ,GAEnD,MAAMG,EAAcC,KAAKC,IAAIN,EAAOE,EAAU,GAC9C,MAAMK,EAAeF,KAAKG,IAAIR,EAAOE,EAAUD,EAAa,GAC5D,MAAMQ,EAAWL,EAAc,EAC/B,MAAMM,EAAYH,EAAeN,EAAa,EAE9C,IAAKQ,GAAYC,EAAW,MAAO,IAAIjB,EAAW,EAAGS,EAAW,EAAI,GAAI,WAAYD,GACpF,GAAIQ,IAAaC,EAAW,MAAO,CAAC,EAAG,cAAejB,EAAWQ,GAAcC,EAAW,EAAI,GAAID,IAClG,MAAO,CAAC,EAAG,cAAeR,EAAWW,EAAaG,GAAe,WAAYN,EAC/E,C,MAOaU,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,qFAM2BC,KAAAhB,KAAe,EAChCgB,KAAAf,WAAqB,EACrBe,KAAAC,aAAuB,EACvBD,KAAAE,WAAsB,KAiE/B,CA7DS,EAAAC,CAAGC,GACT,GAAIJ,KAAKE,WAAY,OACrBF,KAAKhB,KAAOoB,EACZJ,KAAKK,aAAaC,KAAKF,E,CAGzB,MAAAG,GACE,GAAIP,KAAKf,YAAc,EAAG,OAAOuB,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAEzD,MAAMC,EAAQ7B,EAAWiB,KAAKhB,KAAMgB,KAAKf,WAAYe,KAAKC,cAE1D,OACEO,EAACC,EAAI,KACHD,EAAA,OACEK,MAAO,CAAEC,WAAY,KAAM,sBAAuBd,KAAKE,YAAY,aACxD,cAEXM,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQ,GAAKgB,KAAKE,WACjCe,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,iBAAe,KAK3B4B,EAAMM,KAAI,CAACC,EAAMtC,IAChBsC,IAAS,WACPX,EAAA,QAAMY,IAAK,IAAIvC,IAAKgC,MAAM,YACxBL,EAAA,QAAMK,MAAM,kBAAkBH,MAAO,CAAEW,MAAO,qCAAoC,MAGpFb,EAAA,UACEY,IAAKD,EACLJ,KAAK,SACLF,MAAO,CAAES,OAAQ,KAAM,iBAAkBH,IAASnB,KAAKhB,MACvDiC,QAAS,IAAMjB,KAAKG,GAAGgB,GAAK,eACdA,IAASnB,KAAKhB,KAAO,OAASuC,UAC5CP,SAAUhB,KAAKE,YAEfM,EAAA,QAAMK,MAAOM,IAASnB,KAAKhB,KAAO,2BAA6B,mBAC5DmC,MAMTX,EAAA,UACEO,KAAK,SACLF,MAAM,qBACNG,SAAUhB,KAAKhB,MAAQgB,KAAKf,YAAce,KAAKE,WAC/Ce,QAAS,IAAMjB,KAAKG,GAAGH,KAAKhB,KAAO,GAAE,aAC1B,aAAW,M","ignoreList":[]}