@ds-mo/ui 12.5.0 → 12.6.1

package/dist/components/p-CLzlL3G4.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["agentActivityCss","AgentActivity","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","heading","open","expanded","handleToggle","event","currentTarget","componentWillLoad","handleOpenChange","currentItem","find","item","state","reverse","stateLabel","render","h","Host","key","class","onToggle","name","size","color","variant","shimmer","label","map","detail"],"sources":["src/wc/components/AgentActivity/AgentActivity.css?tag=ds-agent-activity&encapsulation=scoped","src/wc/components/AgentActivity/AgentActivity.tsx"],"sourcesContent":["@import '../../utils/visually-hidden.css';\n\n:host {\n  display: block;\n}\n.agent-activity {\n  margin: 0;\n}\nsummary {\n  align-items: center;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  display: flex;\n  gap: var(--dimension-space-050);\n  list-style: none;\n  padding: var(--dimension-space-025) 0;\n}\nsummary::-webkit-details-marker {\n  display: none;\n}\ndetails[open] summary ds-icon {\n  transform: rotate(90deg);\n}\nds-text.agent-activity__summary-label {\n  min-width: 0;\n}\nol {\n  display: grid;\n  gap: var(--dimension-space-075);\n  list-style: none;\n  margin: 0;\n  padding: var(--dimension-space-100) 0 0 var(--dimension-space-200);\n}\n.agent-activity__item {\n  align-items: start;\n  display: grid;\n  gap: var(--dimension-space-050);\n  grid-template-columns: auto minmax(0, 1fr);\n}\n.agent-activity__marker {\n  align-items: center;\n  color: var(--color-foreground-faint-neutral);\n  display: flex;\n  padding-block-start: var(--dimension-space-025);\n}\n.agent-activity__item--active .agent-activity__marker {\n  color: var(--color-foreground-faint-brand);\n}\n.agent-activity__item--error .agent-activity__marker {\n  color: var(--color-foreground-bold-negative);\n}\n.agent-activity__item span:last-child {\n  display: grid;\n  gap: var(--dimension-space-025);\n}\n.agent-activity__pending-dot {\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  border-radius: var(--dimension-radius-half);\n  background: currentColor;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  summary ds-icon {\n    transition: transform var(--effect-motion-short-2);\n  }\n}\n","import { Component, Prop, State, Watch, h, Host } from '@stencil/core';\nimport type { AgentActivityItem } from '../conversation-types';\n\n@Component({\n  tag: 'ds-agent-activity',\n  styleUrl: 'AgentActivity.css',\n  scoped: true,\n})\nexport class AgentActivity {\n  @Prop() items: AgentActivityItem[] = [];\n  @Prop() heading: string = 'Activity';\n  @Prop() open: boolean = false;\n\n  @State() private expanded: boolean = false;\n\n  componentWillLoad() {\n    this.expanded = this.open;\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    this.expanded = open;\n  }\n\n  private get currentItem(): AgentActivityItem | undefined {\n    return (\n      this.items.find(item => item.state === 'active') ??\n      this.items.find(item => item.state === 'error') ??\n      [...this.items].reverse().find(item => item.state === 'complete') ??\n      this.items.find(item => item.state === 'pending')\n    );\n  }\n\n  private handleToggle = (event: Event) => {\n    this.expanded = (event.currentTarget as HTMLDetailsElement).open;\n  };\n\n  private stateLabel(item: AgentActivityItem): string {\n    if (item.state === 'active') return 'In progress';\n    if (item.state === 'complete') return 'Complete';\n    if (item.state === 'error') return 'Error';\n    return 'Pending';\n  }\n\n  render() {\n    return (\n      <Host>\n        <details class=\"agent-activity\" open={this.open} onToggle={this.handleToggle}>\n          <summary>\n            <ds-icon name=\"ChevronRight\" size=\"xs\" color=\"inherit\" />\n            <ds-text\n              class=\"agent-activity__summary-label\"\n              variant=\"text-body-small\"\n              shimmer={!this.expanded && this.currentItem?.state === 'active'}\n            >\n              {this.expanded ? this.heading : this.currentItem?.label ?? this.heading}\n            </ds-text>\n          </summary>\n          <ol>\n            {this.items.map(item => (\n              <li class={`agent-activity__item agent-activity__item--${item.state}`}>\n                <span class=\"agent-activity__marker\" aria-hidden=\"true\">\n                  {item.state === 'active' ? (\n                    <ds-loader size=\"xs\" color=\"inherit\" />\n                  ) : item.state === 'pending' ? (\n                    <span class=\"agent-activity__pending-dot\" />\n                  ) : (\n                    <ds-icon\n                      name={item.state === 'error' ? 'ErrorTriangle' : 'Check'}\n                      size=\"xs\"\n                      color=\"inherit\"\n                    />\n                  )}\n                </span>\n                <span>\n                  <ds-text variant=\"text-body-small\" shimmer={item.state === 'active'}>\n                    {item.label}\n                  </ds-text>\n                  {item.detail ? (\n                    <ds-text variant=\"text-caption\" color=\"secondary\">\n                      {item.detail}\n                    </ds-text>\n                  ) : null}\n                  <span class=\"agent-activity__state ds-visually-hidden\">{this.stateLabel(item)}</span>\n                </span>\n              </li>\n            ))}\n          </ol>\n        </details>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAmB,IAAM,66D,MCQlBC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,4CAMUC,KAAAC,MAA6B,GAC7BD,KAAAE,QAAkB,WAClBF,KAAAG,KAAgB,MAEPH,KAAAI,SAAoB,MAoB7BJ,KAAAK,aAAgBC,IACtBN,KAAKI,SAAYE,EAAMC,cAAqCJ,IAAI,CA0DnE,CA7EC,iBAAAK,GACER,KAAKI,SAAWJ,KAAKG,I,CAIvB,gBAAAM,CAAiBN,GACfH,KAAKI,SAAWD,C,CAGlB,eAAYO,GACV,OACEV,KAAKC,MAAMU,MAAKC,GAAQA,EAAKC,QAAU,YACvCb,KAAKC,MAAMU,MAAKC,GAAQA,EAAKC,QAAU,WACvC,IAAIb,KAAKC,OAAOa,UAAUH,MAAKC,GAAQA,EAAKC,QAAU,cACtDb,KAAKC,MAAMU,MAAKC,GAAQA,EAAKC,QAAU,W,CAQnC,UAAAE,CAAWH,GACjB,GAAIA,EAAKC,QAAU,SAAU,MAAO,cACpC,GAAID,EAAKC,QAAU,WAAY,MAAO,WACtC,GAAID,EAAKC,QAAU,QAAS,MAAO,QACnC,MAAO,S,CAGT,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WAAAE,IAAA,2CAASC,MAAM,iBAAiBjB,KAAMH,KAAKG,KAAMkB,SAAUrB,KAAKK,cAC9DY,EAAA,WAAAE,IAAA,4CACEF,EAAA,WAAAE,IAAA,2CAASG,KAAK,eAAeC,KAAK,KAAKC,MAAM,YAC7CP,EAAA,WAAAE,IAAA,2CACEC,MAAM,gCACNK,QAAQ,kBACRC,SAAU1B,KAAKI,UAAYJ,KAAKU,aAAaG,QAAU,UAEtDb,KAAKI,SAAWJ,KAAKE,QAAUF,KAAKU,aAAaiB,OAAS3B,KAAKE,UAGpEe,EAAA,MAAAE,IAAA,4CACGnB,KAAKC,MAAM2B,KAAIhB,GACdK,EAAA,MAAIG,MAAO,8CAA8CR,EAAKC,SAC5DI,EAAA,QAAMG,MAAM,yBAAwB,cAAa,QAC9CR,EAAKC,QAAU,SACdI,EAAA,aAAWM,KAAK,KAAKC,MAAM,YACzBZ,EAAKC,QAAU,UACjBI,EAAA,QAAMG,MAAM,gCAEZH,EAAA,WACEK,KAAMV,EAAKC,QAAU,QAAU,gBAAkB,QACjDU,KAAK,KACLC,MAAM,aAIZP,EAAA,YACEA,EAAA,WAASQ,QAAQ,kBAAkBC,QAASd,EAAKC,QAAU,UACxDD,EAAKe,OAEPf,EAAKiB,OACJZ,EAAA,WAASQ,QAAQ,eAAeD,MAAM,aACnCZ,EAAKiB,QAEN,KACJZ,EAAA,QAAMG,MAAM,4CAA4CpB,KAAKe,WAAWH,U","ignoreList":[]}

package/dist/components/p-CPK5Tgae.js

@@ -0,0 +1,2 @@
+import{p as o,H as s,c as e,h as i,a as c,t as n}from"./index.js";import{d as t}from"./p-BwGnhInj.js";import{D as r,s as d}from"./p-BgGP65Nn.js";const a=()=>`.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-checkbox,.ds-control--lg.sc-ds-checkbox-h,.ds-control--md.sc-ds-checkbox-h,.ds-control--md.sc-ds-checkbox,.ds-control--sm.sc-ds-checkbox-h,.ds-control--sm.sc-ds-checkbox,.ds-control--xs.sc-ds-checkbox-h,.ds-control--xs.sc-ds-checkbox{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-checkbox-h,.ds-control--lg.sc-ds-checkbox{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-checkbox-h,.ds-control--md.sc-ds-checkbox{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-checkbox-h,.ds-control--sm.sc-ds-checkbox{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-checkbox-h,.ds-control--xs.sc-ds-checkbox{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-checkbox-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-checkbox-h,.ds-focus-ring.sc-ds-checkbox,.ds-focus-ring-inset.sc-ds-checkbox-h,.ds-focus-ring-inset.sc-ds-checkbox{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-checkbox-h:focus-visible,.ds-focus-ring.sc-ds-checkbox: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-checkbox-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-checkbox{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-checkbox-h:focus-visible,.ds-focus-ring-inset.sc-ds-checkbox:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-checkbox-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-checkbox: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-checkbox-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-checkbox-h,.ds-interaction-fill.sc-ds-checkbox{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-checkbox-h::before,.ds-interaction-fill.sc-ds-checkbox::before,.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-checkbox-h::before,.ds-interaction-fill.sc-ds-checkbox::before{z-index:1}.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::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-checkbox-h,.ds-interaction-fill--bordered.sc-ds-checkbox{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-checkbox-h::before,.ds-interaction-fill--selected.sc-ds-checkbox::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-checkbox-h,.ds-interaction-fill--selected.sc-ds-checkbox{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-checkbox-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-checkbox:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-checkbox-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-checkbox:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-checkbox-h>.ds-interaction-fill__content.sc-ds-checkbox,.ds-interaction-fill.sc-ds-checkbox>.ds-interaction-fill__content.sc-ds-checkbox,.ds-interaction-fill__content.sc-ds-checkbox{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-checkbox-h,.ds-interaction-fill--on-faint.sc-ds-checkbox{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-checkbox-h,.ds-interaction-fill--on-medium.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-bold.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-strong.sc-ds-checkbox{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-checkbox-h,.ds-interaction-fill--on-translucent.sc-ds-checkbox{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-checkbox-h,.ds-interaction-fill--on-inverted.sc-ds-checkbox{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-checkbox-h,.ds-interaction-fill--on-media.sc-ds-checkbox{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-checkbox-h,.ds-interaction-fill--on-always-dark.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-navigation.sc-ds-checkbox{--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-checkbox-h{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:pointer;user-select:none}.checkbox--presentation.sc-ds-checkbox-h{width:var(--ds-control-icon);height:var(--ds-control-icon);padding:0;gap:0;pointer-events:none}.checkbox--md.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-sm);--_checkbox-stroke:var(--dimension-stroke-width-015)}.checkbox--sm.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-xs);--_checkbox-stroke:var(--dimension-stroke-width-012)}.checkbox--xs.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-size-100);--_checkbox-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.checkbox__placement.sc-ds-checkbox{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.box.sc-ds-checkbox{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_checkbox-box);height:var(--_checkbox-box);border:0;border-radius:var(--dimension-radius-025);box-shadow:inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);background-color:var(--color-background-bold-brand);box-shadow:none}.checkbox__mark.sc-ds-checkbox{width:100%;height:100%;flex-shrink:0;stroke:currentColor;stroke-width:var(--_checkbox-stroke);stroke-linecap:butt;stroke-linejoin:round}.checkbox__mark--checked.sc-ds-checkbox{transform:translateY(-0.5px)}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0;padding:0 var(--ds-control-label-inset)}`;const l={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};let h=0;const b=o(class o extends s{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++h}`;this.checked=false;this.size="md";this.value="on";this.disabled=false;this.required=false;this.requiredMessage=r;this.indeterminate=false;this.isInactive=false;this.presentation=false;this.initialChecked=false;this.initialIndeterminate=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled||this.presentation)return;if(this.indeterminate)this.indeterminate=false;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=o=>{if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.initialIndeterminate=this.indeterminate;this.syncFormValue()}syncFormValue(){const o=this.isInactive||this.disabled||this.formDisabled||this.presentation;this.internals.setFormValue(!o&&this.checked?this.value:null);const s=this.required&&!o&&!this.checked;d(this.internals,s,this.requiredMessage)}formDisabledCallback(o){this.formDisabled=o;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.indeterminate=this.initialIndeterminate}render(){const o=this.isInactive||this.disabled||this.formDisabled;const s=this.checked||this.indeterminate;const e=this.required&&!o&&!this.checked;return i(c,{key:"d9ff279647e414e9e2640b67ca878ab5538dfe42",role:this.presentation?undefined:"checkbox","aria-checked":this.presentation?undefined:this.indeterminate?"mixed":String(this.checked),"aria-disabled":!this.presentation&&o?"true":undefined,"aria-required":!this.presentation&&this.required?"true":undefined,"aria-invalid":!this.presentation&&e?"true":undefined,"aria-labelledby":this.presentation?undefined:this.labelId,"aria-hidden":this.presentation?"true":undefined,tabIndex:this.presentation||o?-1:0,class:{checkbox:true,"checkbox--presentation":this.presentation,[`checkbox--${this.size}`]:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":o&&!this.presentation,"ds-focus-ring-inset":!this.presentation,"ds-interaction-fill":!o&&!this.presentation},onClick:this.presentation?undefined:this.handleActivate,onKeyDown:this.presentation?undefined:this.handleKeyDown},i("span",{key:"6d01b9bc268d9182264ee8d1d36f9bc63910a996",class:"checkbox__placement ds-interaction-fill__content","aria-hidden":"true"},i("span",{key:"b91a6bfcec982ef65cf481ee3b8939762ce24bee",class:{box:true,"box--marked":s}},s&&i("svg",{key:"ae36215fddeb72bb9103a1ffbf1c143a3d112ab4",class:{checkbox__mark:true,"checkbox__mark--checked":!this.indeterminate},viewBox:"0 0 16 16",fill:"none",focusable:"false"},i("path",{key:"4423b3f9ae690f7d6111d834146d250dd39bc44d",d:this.indeterminate?"M4 8H12":"M3.5 8.25L6.75 11.5L12.5 4.75","vector-effect":"non-scaling-stroke"})))),!this.presentation&&i("ds-text",{key:"18c42b0d2ae926118730d5100e1ca700109278fc",class:"checkbox__label ds-interaction-fill__content",as:"span",variant:l[this.size],textId:this.labelId},this.label))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],presentation:[{syncFormValue:0}]}}static get style(){return a()}},[66,"ds-checkbox",{label:[1],checked:[1028],size:[1],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[1028],isInactive:[4,"is-inactive"],presentation:[4],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],presentation:[{syncFormValue:0}]}]);function f(){if(typeof customElements==="undefined"){return}const o=["ds-checkbox","ds-text"];o.forEach((o=>{switch(o){case"ds-checkbox":if(!customElements.get(n(o))){customElements.define(n(o),b)}break;case"ds-text":if(!customElements.get(n(o))){t()}break}}))}f();export{b as C,f as d};
+//# sourceMappingURL=p-CPK5Tgae.js.map

package/dist/components/p-CPK5Tgae.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","LABEL_VARIANT","md","sm","xs","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","checked","size","value","disabled","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","indeterminate","isInactive","presentation","initialChecked","initialIndeterminate","formDisabled","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","componentWillLoad","syncFormValue","inactive","internals","setFormValue","missing","setRequiredValidity","formDisabledCallback","formResetCallback","render","isMarked","invalid","h","Host","role","undefined","String","tabIndex","class","checkbox","onClick","onKeyDown","box","checkbox__mark","viewBox","fill","focusable","d","as","variant","textId","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@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: pointer;\n  user-select: none;\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  stroke: currentColor;\n  stroke-width: var(--_checkbox-stroke);\n  stroke-linecap: butt;\n  stroke-linejoin: round;\n}\n\n.checkbox__mark--checked {\n  transform: translateY(-0.5px);\n}\n\n.checkbox__label {\n  flex: 1;\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from '../../utils';\n\nexport type CheckboxSize = 'md' | 'sm' | 'xs';\n\nconst LABEL_VARIANT: Record<CheckboxSize, 'text-body-medium' | 'text-body-small' | 'text-caption'> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    this.internals.setFormValue(!inactive && this.checked ? this.value : null);\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.indeterminate = this.initialIndeterminate;\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line local/prefer-ds-icon -- Checkbox owns this density-specific state mark and its optical stroke.\n              <svg\n                class={{\n                  checkbox__mark: true,\n                  'checkbox__mark--checked': !this.indeterminate,\n                }}\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                focusable=\"false\"\n              >\n                <path\n                  d={this.indeterminate ? 'M4 8H12' : 'M3.5 8.25L6.75 11.5L12.5 4.75'}\n                  vector-effect=\"non-scaling-stroke\"\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <ds-text\n            class=\"checkbox__label ds-interaction-fill__content\"\n            as=\"span\"\n            variant={LABEL_VARIANT[this.size]}\n            textId={this.labelId}\n          >\n            {this.label}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-CUWxI1u0.js

@@ -0,0 +1,2 @@
+import{p as t,H as o,c as n,h as i,a as d,t as e}from"./index.js";import{d as l}from"./p-BAfG3M8z.js";import{d as r}from"./p-Ca-I2UnB.js";import{d as s}from"./p-BwGnhInj.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.sc-ds-button-filled-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-button-filled-h,.ds-focus-ring.sc-ds-button-filled,.ds-focus-ring-inset.sc-ds-button-filled-h,.ds-focus-ring-inset.sc-ds-button-filled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-filled-h:focus-visible,.ds-focus-ring.sc-ds-button-filled: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-button-filled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{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-button-filled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-filled: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-button-filled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::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-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-button-filled-h,.ds-interaction-fill--on-faint.sc-ds-button-filled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-button-filled-h,.ds-interaction-fill--on-translucent.sc-ds-button-filled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-filled-h,.ds-interaction-fill--on-inverted.sc-ds-button-filled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-filled-h,.ds-interaction-fill--on-media.sc-ds-button-filled{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--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-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-button-filled,.ds-control--lg.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled,.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled,.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-filled-h,.ds-control--lg.sc-ds-button-filled{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand);--ds-button-filled-border:var(--color-border-secondary)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2),     transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled--rounded.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-half)}.button-filled--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-filled-border)}.button-filled--bordered.sc-ds-button-filled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-filled--background-medium.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-medium-background-secondary)}.button-filled--background-bold.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-bold-background-secondary)}.button-filled--background-strong.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-strong-background-secondary)}.button-filled--background-translucent.sc-ds-button-filled{--ds-button-filled-border:var(--color-translucent-border-secondary)}.button-filled--background-inverted.sc-ds-button-filled{--ds-button-filled-border:var(--color-inverted-border-secondary)}.button-filled--background-media.sc-ds-button-filled{--ds-button-filled-border:var(--color-media-border-secondary)}.button-filled--background-always-dark.sc-ds-button-filled{--ds-button-filled-border:var(--color-always-dark-border-secondary)}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.button-filled.sc-ds-button-filled{transition:background-color var(--effect-motion-short-2),       color var(--effect-motion-short-2)}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:none}}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled__label--loading.sc-ds-button-filled{visibility:hidden}.button-filled.sc-ds-button-filled>.button-filled__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const f={md:"md",sm:"sm",xs:"xs"};const b=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.hasBorder=false;this.rounded=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const t=a[this.size];const o=f[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","button-filled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label","button-filled--rounded":this.rounded,[`button-filled--background-${this.background}`]:this.background!==undefined,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"6c5ef66ea2c1297960b27de4c7d800dc21a02f37",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"f2437cb5bb65e96a8aaba1ce77c341d081efba3a",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,onClick:this.handleClick},this.showIcon&&i("span",{key:"229d299465213a2fcc5ed84e33f3b74b4e629e0c",class:"button-filled__icon-wrap ds-interaction-fill__content"},this.isLoading?i("ds-loader",{size:o,color:"inherit"}):i("ds-icon",{name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"fd527c19014e7fcdabb283ef8eb77a95dc67673d",class:{"button-filled__label":true,"button-filled__label--loading":this.isLoading&&this.variant==="label","ds-interaction-fill__content":true},as:"span",variant:t,emphasis:true,color:"inherit"},this.label),this.isLoading&&this.variant==="label"&&i("span",{key:"57f59189ee7a5f5b19f33fa92f7881cc82013eb3",class:"button-filled__loader-overlay ds-interaction-fill__content"},i("ds-loader",{key:"cc60149fa7318dafcda71a0fecf78137d33787f1",size:o,color:"inherit"}))))}get el(){return this}static get style(){return u()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],hasBorder:[4,"has-border"],background:[1],rounded:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(e(t))){customElements.define(e(t),b)}break;case"ds-icon":if(!customElements.get(e(t))){l()}break;case"ds-loader":if(!customElements.get(e(t))){r()}break;case"ds-text":if(!customElements.get(e(t))){s()}break}}))}g();export{b as B,g as d};
+//# sourceMappingURL=p-CUWxI1u0.js.map

package/dist/components/{p-BhxwpOH8.js.map → p-CUWxI1u0.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonFilledCss","ICON_SIZE","md","sm","xs","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","hasBorder","rounded","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","undefined","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","background","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","color","name","as","emphasis"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n  --ds-button-filled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/* Preserve the border while inactive, when interaction-fill is intentionally omitted. */\n.button-filled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n  --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n  --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n  --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n  --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n  --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n  --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n  --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button-filled {\n    transition:\n      background-color var(--effect-motion-short-2),\n      color var(--effect-motion-short-2);\n  }\n\n  .button-filled:active:not(:disabled):not(.ds-control-inactive) {\n    transform: none;\n  }\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-filled__label--loading {\n  visibility: hidden;\n}\n\n.button-filled > .button-filled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonFilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Show a 1px secondary inset border. */\n  @Prop() hasBorder: boolean = false;\n\n  /**\n   * Actual parent surface context for the optional inset border color only.\n   * Omit on primary and secondary surfaces.\n   */\n  @Prop() background: ButtonFilledBackground | undefined;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'button-filled--bordered': this.hasBorder,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      'button-filled--rounded': this.rounded,\n      [`button-filled--background-${this.background}`]: this.background !== undefined,\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-filled__label': true,\n                'button-filled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-filled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["buttonFilledCss","ICON_SIZE","md","sm","xs","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","hasBorder","rounded","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","undefined","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","background","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","color","name","as","emphasis"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n  --ds-button-filled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/* Preserve the border while inactive, when interaction-fill is intentionally omitted. */\n.button-filled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n  --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n  --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n  --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n  --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n  --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n  --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n  --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button-filled {\n    transition:\n      background-color var(--effect-motion-short-2),\n      color var(--effect-motion-short-2);\n  }\n\n  .button-filled:active:not(:disabled):not(.ds-control-inactive) {\n    transform: none;\n  }\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-filled__label--loading {\n  visibility: hidden;\n}\n\n.button-filled > .button-filled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonFilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Show a 1px secondary inset border. */\n  @Prop() hasBorder: boolean = false;\n\n  /**\n   * Actual parent surface context for the optional inset border color only.\n   * Omit on primary and secondary surfaces.\n   */\n  @Prop() background: ButtonFilledBackground | undefined;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'button-filled--bordered': this.hasBorder,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      'button-filled--rounded': this.rounded,\n      [`button-filled--background-${this.background}`]: this.background !== undefined,\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-filled__label': true,\n                'button-filled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-filled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Ca-I2UnB.js

@@ -0,0 +1,2 @@
+import{p as o,H as r,h as e,a as l,t as a}from"./index.js";const n=()=>`:host(.ds-visually-hidden),.ds-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;}.loader{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;color:inherit;width:var(--_loader-sz, var(--dimension-iconography-md));height:var(--_loader-sz, var(--dimension-iconography-md));animation:loader-spin var(--effect-animation-duration-long-2) var(--effect-animation-easing-linear) infinite}.loader__svg{display:block;flex-shrink:0;width:100%;height:100%}.status{display:inline-flex;align-items:center}@keyframes loader-spin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}@media (prefers-reduced-motion: reduce){.loader{animation:none;transform:none}}.loader--size-xs{--_loader-sz:var(--dimension-iconography-xs)}.loader--size-sm{--_loader-sz:var(--dimension-iconography-sm)}.loader--size-md{--_loader-sz:var(--dimension-iconography-md)}.loader--size-lg{--_loader-sz:var(--dimension-iconography-lg)}.loader--size-xl{--_loader-sz:var(--dimension-iconography-xl)}.loader--size-2xl{--_loader-sz:var(--dimension-iconography-2xl)}.loader--size-3xl{--_loader-sz:var(--dimension-iconography-3xl)}.loader--color-primary{color:var(--color-foreground-primary)}.loader--color-secondary{color:var(--color-foreground-secondary)}.loader--color-tertiary{color:var(--color-foreground-tertiary)}.loader--color-quaternary{color:var(--color-foreground-quaternary)}.loader--color-inherit{color:inherit}.loader--color-brand{color:var(--color-foreground-bold-brand)}.loader--color-negative{color:var(--color-foreground-bold-negative)}.loader--color-positive{color:var(--color-foreground-bold-positive)}.loader--color-warning{color:var(--color-foreground-bold-warning)}.loader--color-caution{color:var(--color-foreground-bold-caution)}.loader--color-ai{color:var(--color-foreground-bold-ai)}.loader--color-guide{color:var(--color-foreground-bold-guide)}.loader--color-neutral{color:var(--color-foreground-bold-neutral)}.loader--color-faint-brand{color:var(--color-foreground-faint-brand)}.loader--color-faint-negative{color:var(--color-foreground-faint-negative)}.loader--color-faint-positive{color:var(--color-foreground-faint-positive)}.loader--color-faint-warning{color:var(--color-foreground-faint-warning)}.loader--color-faint-caution{color:var(--color-foreground-faint-caution)}.loader--color-faint-ai{color:var(--color-foreground-faint-ai)}.loader--color-faint-neutral{color:var(--color-foreground-faint-neutral)}.loader--color-medium-brand{color:var(--color-foreground-medium-brand)}.loader--color-medium-negative{color:var(--color-foreground-medium-negative)}.loader--color-medium-positive{color:var(--color-foreground-medium-positive)}.loader--color-medium-warning{color:var(--color-foreground-medium-warning)}.loader--color-medium-caution{color:var(--color-foreground-medium-caution)}.loader--color-medium-ai{color:var(--color-foreground-medium-ai)}.loader--color-medium-neutral{color:var(--color-foreground-medium-neutral)}.loader--color-bold-brand{color:var(--color-foreground-bold-brand)}.loader--color-bold-negative{color:var(--color-foreground-bold-negative)}.loader--color-bold-positive{color:var(--color-foreground-bold-positive)}.loader--color-bold-warning{color:var(--color-foreground-bold-warning)}.loader--color-bold-caution{color:var(--color-foreground-bold-caution)}.loader--color-bold-ai{color:var(--color-foreground-bold-ai)}.loader--color-bold-neutral{color:var(--color-foreground-bold-neutral)}.loader--color-strong-brand{color:var(--color-foreground-strong-brand)}.loader--color-strong-negative{color:var(--color-foreground-strong-negative)}.loader--color-strong-positive{color:var(--color-foreground-strong-positive)}.loader--color-strong-warning{color:var(--color-foreground-strong-warning)}.loader--color-strong-caution{color:var(--color-foreground-strong-caution)}.loader--color-strong-ai{color:var(--color-foreground-strong-ai)}.loader--color-strong-neutral{color:var(--color-foreground-strong-neutral)}.loader--color-on-strong{color:var(--color-foreground-on-strong-background-primary)}.loader--color-on-bold{color:var(--color-foreground-on-bold-background-primary)}`;const i=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.__attachShadow();this.size="md";this.color="inherit"}render(){const o=typeof this.color==="string"&&this.color.startsWith("var(--");const r={loader:true,[`loader--size-${this.size}`]:true,[`loader--color-${this.color}`]:!!this.color&&!o&&this.color!=="inherit","loader--color-inherit":this.color==="inherit"};const a=o?{color:this.color}:undefined;const n=e("span",{class:r,style:a,"aria-hidden":"true"},e("svg",{class:"loader__svg",viewBox:"0 0 16 16",fill:"none",focusable:"false"},e("path",{opacity:"0.1",d:"M3 8C3 5.23858 5.23858 3 8 3V2C4.68629 2 2 4.68629 2 8C2 9.99456 2.97323 11.7618 4.47072 12.8528L5.05894 12.044C3.81102 11.1348 3 9.66213 3 8Z",fill:"currentColor"}),e("path",{opacity:"0.2","fill-rule":"evenodd","clip-rule":"evenodd",d:"M5.05892 12.0438C5.88425 12.6451 6.90069 12.9998 7.99998 12.9998C9.66211 12.9998 11.1348 12.1888 12.0439 10.9409L12.8527 11.5291C11.7618 13.0266 9.99454 13.9998 7.99998 13.9998C6.68083 13.9998 5.46111 13.5741 4.4707 12.8526L5.05892 12.0438Z",fill:"currentColor"}),e("path",{opacity:"0.4","fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.0435 10.9408C12.6447 10.1155 12.9995 9.09906 12.9995 7.99976C12.9995 7.45884 12.9136 6.93798 12.7547 6.45007L13.7057 6.14014C13.8964 6.72562 13.9995 7.35065 13.9995 7.99976C13.9995 9.31891 13.5738 10.5386 12.8523 11.529L12.0435 10.9408Z",fill:"currentColor"}),e("path",{opacity:"0.6","fill-rule":"evenodd","clip-rule":"evenodd",d:"M12.7555 6.45152C12.4263 5.43958 11.7831 4.56933 10.9409 3.95577L11.5291 3.14697C12.5398 3.88325 13.3116 4.92755 13.7067 6.14188L12.7555 6.45152Z",fill:"currentColor"}),e("path",{opacity:"0.8","fill-rule":"evenodd","clip-rule":"evenodd",d:"M10.941 3.95583C10.5307 3.65688 10.0731 3.41886 9.58154 3.25509L9.89786 2.30615C10.4877 2.50267 11.0368 2.78829 11.5293 3.14704L10.941 3.95583Z",fill:"currentColor"}),e("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M9.89788 2.30636C9.3014 2.10762 8.66327 2 8 2V3C8.55272 3 9.0845 3.08968 9.58157 3.2553L9.89788 2.30636Z",fill:"currentColor"})));if(!this.label){return e(l,{style:{display:"inline-flex",alignItems:"center",justifyContent:"center"}},n)}return e(l,{style:{display:"inline-flex",alignItems:"center",justifyContent:"center"}},e("span",{role:"status","aria-live":"polite",class:"status"},n,e("span",{class:"visually-hidden ds-visually-hidden"},this.label)))}static get style(){return n()}},[1,"ds-loader",{size:[1],color:[1],label:[1]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-loader"];o.forEach((o=>{switch(o){case"ds-loader":if(!customElements.get(a(o))){customElements.define(a(o),i)}break}}))}d();export{i as L,d};
+//# sourceMappingURL=p-Ca-I2UnB.js.map

package/dist/components/p-Ca-I2UnB.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["loaderCss","Loader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","color","render","isCustomColor","startsWith","cls","loader","style","undefined","spinner","h","class","viewBox","fill","focusable","opacity","d","label","Host","display","alignItems","justifyContent","role"],"sources":["src/wc/components/Loader/Loader.css?tag=ds-loader&encapsulation=shadow","src/wc/components/Loader/Loader.tsx"],"sourcesContent":["@import '../../utils/visually-hidden.css';\n\n/* ── Base loader (mirrors ds-icon box metrics) ───────────────────────────── */\n\n.loader {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n  color: inherit;\n  width: var(--_loader-sz, var(--dimension-iconography-md));\n  height: var(--_loader-sz, var(--dimension-iconography-md));\n  animation: loader-spin var(--effect-animation-duration-long-2) var(--effect-animation-easing-linear) infinite;\n}\n\n.loader__svg {\n  display: block;\n  flex-shrink: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.status {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* Anti-clockwise continuous spin — 1000ms via long-2. */\n@keyframes loader-spin {\n  from { transform: rotate(0deg); }\n  to   { transform: rotate(-360deg); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .loader {\n    animation: none;\n    transform: none;\n  }\n}\n\n/* ── Sizes (same tokens as ds-icon) ──────────────────────────────────────── */\n\n.loader--size-xs  { --_loader-sz: var(--dimension-iconography-xs);  }\n.loader--size-sm  { --_loader-sz: var(--dimension-iconography-sm);  }\n.loader--size-md  { --_loader-sz: var(--dimension-iconography-md);  }\n.loader--size-lg  { --_loader-sz: var(--dimension-iconography-lg);  }\n.loader--size-xl  { --_loader-sz: var(--dimension-iconography-xl);  }\n.loader--size-2xl { --_loader-sz: var(--dimension-iconography-2xl); }\n.loader--size-3xl { --_loader-sz: var(--dimension-iconography-3xl); }\n\n/* ── Colors — hierarchy ──────────────────────────────────────────────────── */\n\n.loader--color-primary    { color: var(--color-foreground-primary);    }\n.loader--color-secondary  { color: var(--color-foreground-secondary);  }\n.loader--color-tertiary   { color: var(--color-foreground-tertiary);   }\n.loader--color-quaternary { color: var(--color-foreground-quaternary); }\n.loader--color-inherit    { color: inherit; }\n\n/* ── Colors — intent (bold contrast default) ─────────────────────────────── */\n\n.loader--color-brand    { color: var(--color-foreground-bold-brand);    }\n.loader--color-negative { color: var(--color-foreground-bold-negative); }\n.loader--color-positive { color: var(--color-foreground-bold-positive); }\n.loader--color-warning  { color: var(--color-foreground-bold-warning);  }\n.loader--color-caution  { color: var(--color-foreground-bold-caution);  }\n.loader--color-ai       { color: var(--color-foreground-bold-ai);       }\n.loader--color-guide    { color: var(--color-foreground-bold-guide);    }\n.loader--color-neutral  { color: var(--color-foreground-bold-neutral);  }\n\n/* ── Colors — intent faint ───────────────────────────────────────────────── */\n\n.loader--color-faint-brand    { color: var(--color-foreground-faint-brand);    }\n.loader--color-faint-negative { color: var(--color-foreground-faint-negative); }\n.loader--color-faint-positive { color: var(--color-foreground-faint-positive); }\n.loader--color-faint-warning  { color: var(--color-foreground-faint-warning);  }\n.loader--color-faint-caution  { color: var(--color-foreground-faint-caution);  }\n.loader--color-faint-ai       { color: var(--color-foreground-faint-ai);       }\n.loader--color-faint-neutral  { color: var(--color-foreground-faint-neutral);  }\n\n/* ── Colors — intent medium ─────────────────────────────────────────────── */\n\n.loader--color-medium-brand    { color: var(--color-foreground-medium-brand);    }\n.loader--color-medium-negative { color: var(--color-foreground-medium-negative); }\n.loader--color-medium-positive { color: var(--color-foreground-medium-positive); }\n.loader--color-medium-warning  { color: var(--color-foreground-medium-warning);  }\n.loader--color-medium-caution  { color: var(--color-foreground-medium-caution);  }\n.loader--color-medium-ai       { color: var(--color-foreground-medium-ai);       }\n.loader--color-medium-neutral  { color: var(--color-foreground-medium-neutral);  }\n\n/* ── Colors — intent bold (explicit) ────────────────────────────────────── */\n\n.loader--color-bold-brand    { color: var(--color-foreground-bold-brand);    }\n.loader--color-bold-negative { color: var(--color-foreground-bold-negative); }\n.loader--color-bold-positive { color: var(--color-foreground-bold-positive); }\n.loader--color-bold-warning  { color: var(--color-foreground-bold-warning);  }\n.loader--color-bold-caution  { color: var(--color-foreground-bold-caution);  }\n.loader--color-bold-ai       { color: var(--color-foreground-bold-ai);       }\n.loader--color-bold-neutral  { color: var(--color-foreground-bold-neutral);  }\n\n/* ── Colors — intent strong ──────────────────────────────────────────────── */\n\n.loader--color-strong-brand    { color: var(--color-foreground-strong-brand);    }\n.loader--color-strong-negative { color: var(--color-foreground-strong-negative); }\n.loader--color-strong-positive { color: var(--color-foreground-strong-positive); }\n.loader--color-strong-warning  { color: var(--color-foreground-strong-warning);  }\n.loader--color-strong-caution  { color: var(--color-foreground-strong-caution);  }\n.loader--color-strong-ai       { color: var(--color-foreground-strong-ai);       }\n.loader--color-strong-neutral  { color: var(--color-foreground-strong-neutral);  }\n\n/* ── Colors — contextual ────────────────────────────────────────────────── */\n\n.loader--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.loader--color-on-bold   { color: var(--color-foreground-on-bold-background-primary);   }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconColor, IconSize } from '../Icon/Icon';\n\nexport type LoaderSize = IconSize;\nexport type LoaderColor = IconColor;\n\n@Component({\n  tag: 'ds-loader',\n  styleUrl: 'Loader.css',\n  shadow: true,\n})\nexport class Loader {\n  /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */\n  @Prop() size: LoaderSize = 'md';\n  /**\n   * Semantic foreground color token, or a raw CSS var reference. Same tokens\n   * as `ds-icon`. Do not use `tertiary` or `quaternary` for a standalone or\n   * informative Loader; inherit a readable color from the owning busy control\n   * or region.\n   */\n  @Prop() color: LoaderColor = 'inherit';\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  render() {\n    const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');\n\n    const cls: Record<string, boolean> = {\n      loader: true,\n      [`loader--size-${this.size}`]: true,\n      [`loader--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',\n      'loader--color-inherit': this.color === 'inherit',\n    };\n\n    const style = isCustomColor ? { color: this.color as string } : undefined;\n\n    const spinner = (\n      <span class={cls} style={style} aria-hidden=\"true\">\n        <svg class=\"loader__svg\" viewBox=\"0 0 16 16\" fill=\"none\" focusable=\"false\">\n          <path\n            opacity=\"0.1\"\n            d=\"M3 8C3 5.23858 5.23858 3 8 3V2C4.68629 2 2 4.68629 2 8C2 9.99456 2.97323 11.7618 4.47072 12.8528L5.05894 12.044C3.81102 11.1348 3 9.66213 3 8Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            opacity=\"0.2\"\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M5.05892 12.0438C5.88425 12.6451 6.90069 12.9998 7.99998 12.9998C9.66211 12.9998 11.1348 12.1888 12.0439 10.9409L12.8527 11.5291C11.7618 13.0266 9.99454 13.9998 7.99998 13.9998C6.68083 13.9998 5.46111 13.5741 4.4707 12.8526L5.05892 12.0438Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            opacity=\"0.4\"\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M12.0435 10.9408C12.6447 10.1155 12.9995 9.09906 12.9995 7.99976C12.9995 7.45884 12.9136 6.93798 12.7547 6.45007L13.7057 6.14014C13.8964 6.72562 13.9995 7.35065 13.9995 7.99976C13.9995 9.31891 13.5738 10.5386 12.8523 11.529L12.0435 10.9408Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            opacity=\"0.6\"\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M12.7555 6.45152C12.4263 5.43958 11.7831 4.56933 10.9409 3.95577L11.5291 3.14697C12.5398 3.88325 13.3116 4.92755 13.7067 6.14188L12.7555 6.45152Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            opacity=\"0.8\"\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M10.941 3.95583C10.5307 3.65688 10.0731 3.41886 9.58154 3.25509L9.89786 2.30615C10.4877 2.50267 11.0368 2.78829 11.5293 3.14704L10.941 3.95583Z\"\n            fill=\"currentColor\"\n          />\n          <path\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            d=\"M9.89788 2.30636C9.3014 2.10762 8.66327 2 8 2V3C8.55272 3 9.0845 3.08968 9.58157 3.2553L9.89788 2.30636Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    );\n\n    if (!this.label) {\n      return (\n        <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\n          {spinner}\n        </Host>\n      );\n    }\n\n    return (\n      <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\n        <span role=\"status\" aria-live=\"polite\" class=\"status\">\n          {spinner}\n          <span class=\"visually-hidden ds-visually-hidden\">{this.label}</span>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAY,IAAM,onI,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAOUC,KAAAC,KAAmB,KAOnBD,KAAAE,MAAqB,SAmF9B,CA3EC,MAAAC,GACE,MAAMC,SAAuBJ,KAAKE,QAAU,UAAYF,KAAKE,MAAMG,WAAW,UAE9E,MAAMC,EAA+B,CACnCC,OAAQ,KACR,CAAC,gBAAgBP,KAAKC,QAAS,KAC/B,CAAC,iBAAiBD,KAAKE,WAAYF,KAAKE,QAAUE,GAAiBJ,KAAKE,QAAU,UAClF,wBAAyBF,KAAKE,QAAU,WAG1C,MAAMM,EAAQJ,EAAgB,CAAEF,MAAOF,KAAKE,OAAoBO,UAEhE,MAAMC,EACJC,EAAA,QAAMC,MAAON,EAAKE,MAAOA,EAAK,cAAc,QAC1CG,EAAA,OAAKC,MAAM,cAAcC,QAAQ,YAAYC,KAAK,OAAOC,UAAU,SACjEJ,EAAA,QACEK,QAAQ,MACRC,EAAE,iJACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,mPACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,mPACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,oJACFH,KAAK,iBAEPH,EAAA,QACEK,QAAQ,MAAK,YACH,UAAS,YACT,UACVC,EAAE,kJACFH,KAAK,iBAEPH,EAAA,oBACY,UAAS,YACT,UACVM,EAAE,2GACFH,KAAK,mBAMb,IAAKd,KAAKkB,MAAO,CACf,OACEP,EAACQ,EAAI,CAACX,MAAO,CAAEY,QAAS,cAAeC,WAAY,SAAUC,eAAgB,WAC1EZ,E,CAKP,OACEC,EAACQ,EAAI,CAACX,MAAO,CAAEY,QAAS,cAAeC,WAAY,SAAUC,eAAgB,WAC3EX,EAAA,QAAMY,KAAK,SAAQ,YAAW,SAASX,MAAM,UAC1CF,EACDC,EAAA,QAAMC,MAAM,sCAAsCZ,KAAKkB,Q","ignoreList":[]}

package/dist/components/p-CaRyxTMz.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-BwGnhInj.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-shell-app");return a!==null&&a.getAttribute("gradient-preset")!=="none"}const o=()=>`.ds-visually-hidden.sc-ds-badge-h,.ds-visually-hidden.sc-ds-badge{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge--no-ring.sc-ds-badge-h{--_badge-ring-width:0}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:auto;min-width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-half)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",faint:"var(--color-background-faint-neutral)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",translucent:"var(--color-translucent-translucent)",inverted:"var(--color-inverted-background)",media:"var(--color-media-background)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="primary";this.hasRing=true;this.gradientBackground=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){if(!this.hasRing){this.unbindGradientRingSync();return}if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true;return}this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.hasRing)return;if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-shell-app");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count<=0)return n(i,{style:{display:"none"}});const a=this.count>this.max?`${this.max}+`:String(this.count);const r=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--no-ring":!this.hasRing,"badge--on-gradient-background":this.hasRing&&this.gradientBackground},style:this.ringHostStyle(r)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)),this.label&&n("span",{class:"badge__a11y ds-visually-hidden"},this.label))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}],hasRing:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],hasRing:[4,"has-ring"],gradientBackground:[516,"gradient-background"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}],hasRing:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
+//# sourceMappingURL=p-CaRyxTMz.js.map

package/dist/components/p-CaRyxTMz.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","getAttribute","badgeCss","SURFACE_RING","primary","secondary","faint","medium","bold","strong","translucent","inverted","media","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","hasRing","gradientBackground","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","el","bindGradientRingSync","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","background","class","badge","as","emphasis","color","label"],"sources":["src/wc/shell/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsShellAppElement type only\n  // resolves where @stencil/core types are installed — consumers importing\n  // `@ds-mo/ui/shell` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-shell-app');\n  return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n","@import '../../utils/visually-hidden.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n:host(.badge--no-ring) {\n  --_badge-ring-width: 0;\n}\n\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'primary'\n  | 'secondary'\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  faint: 'var(--color-background-faint-neutral)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  translucent: 'var(--color-translucent-translucent)',\n  inverted: 'var(--color-inverted-background)',\n  media: 'var(--color-media-background)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"{max}+\". */\n  @Prop() max: number = 9;\n\n  /** Immediate backing surface matched by the ring around either variant. */\n  @Prop() surface: BadgeSurface = 'primary';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /** Show the separation ring when the badge overlaps an icon or other content. */\n  @Prop() hasRing: boolean = true;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled under an ShellApp with an active gradient preset;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  @Watch('hasRing')\n  gradientBackgroundChanged() {\n    if (!this.hasRing) {\n      this.unbindGradientRingSync();\n      return;\n    }\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n      return;\n    }\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.hasRing) return;\n\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-shell-app');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? `${this.max}+` : String(this.count);\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--no-ring': !this.hasRing,\n          'badge--on-gradient-background': this.hasRing && this.gradientBackground,\n        }}\n        style={this.ringHostStyle(ring)}\n      >\n        <span class=\"badge__mark\" aria-hidden=\"true\">\n          {!isDot && (\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n              {display}\n            </ds-text>\n          )}\n        </span>\n        {this.label && <span class=\"badge__a11y ds-visually-hidden\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-D65itwnc.js

@@ -0,0 +1,2 @@
+import{p as n,H as t,c as o,h as i,a as e,t as s}from"./index.js";import{d}from"./p-CaRyxTMz.js";import{d as r}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as a}from"./p-BwGnhInj.js";import{C as c}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const f=()=>`.sc-ds-button-unfilled-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-button-unfilled-h,.ds-focus-ring.sc-ds-button-unfilled,.ds-focus-ring-inset.sc-ds-button-unfilled-h,.ds-focus-ring-inset.sc-ds-button-unfilled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-unfilled-h:focus-visible,.ds-focus-ring.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{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-button-unfilled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-unfilled: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-button-unfilled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::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-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-button-unfilled-h,.ds-interaction-fill--on-faint.sc-ds-button-unfilled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-button-unfilled-h,.ds-interaction-fill--on-translucent.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-unfilled-h,.ds-interaction-fill--on-inverted.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-unfilled-h,.ds-interaction-fill--on-media.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--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-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--lg.sc-ds-button-unfilled,.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled,.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled,.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-unfilled-h,.ds-control--lg.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--rounded.sc-ds-button-unfilled{--ds-control-radius:var(--dimension-radius-half)}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled.button-unfilled--expanded.sc-ds-button-unfilled::after,.button-unfilled.button-unfilled--expanded.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-pressed)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--background-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--background-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--background-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--background-translucent.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-translucent-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-translucent-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-translucent-translucent);--ds-button-unfilled-border:var(--color-translucent-border-secondary)}.button-unfilled--background-inverted.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-inverted-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-inverted-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-inverted-background);--ds-button-unfilled-border:var(--color-inverted-border-secondary)}.button-unfilled--background-media.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-media-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-media-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-media-background);--ds-button-unfilled-border:var(--color-media-border-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__label--loading.sc-ds-button-unfilled{visibility:hidden}.button-unfilled.sc-ds-button-unfilled>.button-unfilled__loader-overlay.sc-ds-button-unfilled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const b={lg:"lg",md:"md",sm:"sm",xs:"xs"};const h=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.rounded=false;this.dot=false;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive||this.isLoading){n.preventDefault();n.stopPropagation();return}this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot&&!this.isLoading}get visuallyActive(){return this.isActive||this.expanded===true}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const n=this.background;const t=this.size==="lg"?"text-body-large":c[this.size];const o=b[this.size];const s={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-faint":n==="faint","ds-interaction-fill--on-medium":n==="medium","ds-interaction-fill--on-bold":n==="bold","ds-interaction-fill--on-strong":n==="strong","ds-interaction-fill--on-translucent":n==="translucent","ds-interaction-fill--on-inverted":n==="inverted","ds-interaction-fill--on-media":n==="media","ds-interaction-fill--on-always-dark":n==="always-dark","button-unfilled--active":this.visuallyActive,"button-unfilled--expanded":this.expanded===true&&!this.isInactive,"button-unfilled--bordered":this.hasBorder,"button-unfilled--rounded":this.rounded,"ds-control-inactive":this.isInactive,"ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--background-faint":n==="faint","button-unfilled--background-medium":n==="medium","button-unfilled--background-bold":n==="bold","button-unfilled--background-strong":n==="strong","button-unfilled--background-translucent":n==="translucent","button-unfilled--background-inverted":n==="inverted","button-unfilled--background-media":n==="media","button-unfilled--on-always-dark":n==="always-dark"};return i(e,{key:"8716117608a52ed8b0d265eb445437a047c31ae6",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--lg":this.size==="lg","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...u(this.width)},tabIndex:-1},i("button",{key:"8c70b2d3696068392822e6f9ed2c932198e1ce38",ref:n=>{this.buttonEl=n??null},type:this.type,class:s,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"b8a288e9c28c7ec9a6930d99679c661491095124",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},this.isLoading?i("ds-loader",{size:o,color:"inherit"}):i("ds-icon",{name:this.icon,size:o,color:"inherit"}),this.showDot&&i("ds-badge",{key:"2865038744a36b043bde78e646fb11d739e6e0da",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"e1628250f2e6f61c12e6c4c952fd3862d5573811",class:{"button-unfilled__label":true,"button-unfilled__label--loading":this.isLoading&&this.variant==="label","ds-interaction-fill__content":true},as:"span",variant:t,emphasis:true,color:"inherit"},this.label),this.isLoading&&this.variant==="label"&&i("span",{key:"4a9d613b914097d43ae8e38c32347be9f148e776",class:"button-unfilled__loader-overlay ds-interaction-fill__content"},i("ds-loader",{key:"ad55d6ceb80ea5dca7361aeb7a5bbef417918207",size:o,color:"inherit"}))))}get el(){return this}static get style(){return f()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],rounded:[4],dot:[4],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function v(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-loader","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(s(n))){customElements.define(s(n),h)}break;case"ds-badge":if(!customElements.get(s(n))){d()}break;case"ds-icon":if(!customElements.get(s(n))){r()}break;case"ds-loader":if(!customElements.get(s(n))){l()}break;case"ds-text":if(!customElements.get(s(n))){a()}break}}))}v();export{h as B,v as d};
+//# sourceMappingURL=p-D65itwnc.js.map

package/dist/components/p-D65itwnc.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["buttonUnfilledCss","ICON_SIZE","lg","md","sm","xs","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","rounded","dot","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","dsChange","setFocus","focus","showIcon","showLabel","showDot","visuallyActive","expanded","dotRing","accessibleName","undefined","render","bg","background","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","String","haspopup","pressed","onClick","color","name","as","emphasis"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-unfilled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-unfilled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-unfilled {\n  width: 100%;\n}\n\n.button-unfilled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-button-unfilled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active always promotes foreground to primary (toggle mode). */\n}\n\n.button-unfilled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-unfilled--rounded {\n  --ds-control-radius: var(--dimension-radius-half);\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle even when\n * shell chrome opts out of selected fills with `activeFill=false`.\n */\n.button-unfilled.button-unfilled--expanded::after,\n.button-unfilled.button-unfilled--expanded:hover:not(:disabled)::after {\n  background: var(--ds-interaction-pressed);\n}\n\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Fallback if interaction-fill is omitted (should be rare — prefer keep the util class). */\n.button-unfilled--bordered:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n\n.button-unfilled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-unfilled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-unfilled__label--loading {\n  visibility: hidden;\n}\n\n.button-unfilled > .button-unfilled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.button-unfilled__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonUnfilledSize = 'lg' | 'md' | 'sm' | 'xs';\n\nexport type ButtonUnfilledWidth = ControlWidth;\nexport type ButtonUnfilledPopup = 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (lg→24 / md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonUnfilledSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. Always promotes foreground to primary. */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  /** An expanded popup trigger is visually active even when selection is controlled separately. */\n  private get visuallyActive(): boolean {\n    return this.isActive || this.expanded === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if (this.isActive && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const textVariant =\n      this.size === 'lg' ? 'text-body-large' : CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-focus-ring-inset': true,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected': this.isActive && this.activeFill && !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.visuallyActive,\n      'button-unfilled--expanded': this.expanded === true && !this.isInactive,\n      'button-unfilled--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-unfilled--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-unfilled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n              {this.showDot && (\n                <ds-badge\n                  class=\"button-unfilled__dot\"\n                  variant=\"dot\"\n                  background={this.dotRing}\n                  label=\"\"\n                  aria-hidden=\"true\"\n                />\n              )}\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-unfilled__label': true,\n                'button-unfilled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-unfilled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-DjPZxzIG.js → p-DQDpDYyF.js}

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as a,a as t,t as i}from"./index.js";import{d}from"./p-BwGnhInj.js";const n=()=>`.sc-ds-message-h{display:block;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:auto var(--dimension-size-800);-webkit-user-select:none;user-select:none}.message-host--group-middle.sc-ds-message-h,.message-host--group-last.sc-ds-message-h{margin-block-start:calc(var(--dimension-space-050) - var(--dimension-space-300))}.message.sc-ds-message{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:0;width:100%;box-sizing:border-box}.message--outgoing.sc-ds-message{grid-template-columns:minmax(0, 1fr) auto}.message__header.sc-ds-message:empty,.message__footer.sc-ds-message:empty,.message__actions.sc-ds-message:empty{display:none}.message__actions.sc-ds-message:not(:empty){margin-inline-start:var(--dimension-space-075)}.message__body.sc-ds-message{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050)}.message--incoming.sc-ds-message .message__body.sc-ds-message{width:100%}.message--outgoing.sc-ds-message .message__body.sc-ds-message{align-items:flex-end}.message--outgoing.sc-ds-message .message__header.sc-ds-message{display:none}.message--system.sc-ds-message .message__body.sc-ds-message{align-items:center}.message__header.sc-ds-message,.message__footer.sc-ds-message,.message__actions.sc-ds-message{display:flex;align-items:center;gap:var(--dimension-space-050)}.message__content.sc-ds-message{width:100%;min-width:0;-webkit-user-select:text;user-select:text}.message--outgoing.sc-ds-message .message__content.sc-ds-message{display:flex;justify-content:flex-end}.message__footer.sc-ds-message time.sc-ds-message{display:inline-flex}.message--group-middle.sc-ds-message .message__header.sc-ds-message,.message--group-last.sc-ds-message .message__header.sc-ds-message{display:none}.message--group-first.sc-ds-message .message__footer.sc-ds-message,.message--group-middle.sc-ds-message .message__footer.sc-ds-message{display:none}`;const m={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Failed to send"};const o=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.direction="incoming";this.groupPosition="single";this.author="";this.showAuthor=true;this.timestamp="";this.streaming=false;this.scrollAnchor=false}formattedTimestamp(){if(!this.timestamp)return"";const s=Date.parse(this.timestamp);if(Number.isNaN(s))return this.timestamp;return new Intl.DateTimeFormat(undefined,{hour:"numeric",minute:"2-digit"}).format(new Date(s))}render(){const s=this.deliveryState?m[this.deliveryState]:"";const e=this.formattedTimestamp();return a(t,{key:"aa57672120eae54bdb1f6b6abc7d469c9e7aa96b",class:`message-host--group-${this.groupPosition}`,"data-message-id":this.messageId||undefined,"data-scroll-anchor":this.scrollAnchor?"true":undefined,"aria-busy":this.streaming?"true":undefined},a("article",{key:"04a6dbdc60b482717dae639d0ab94719883b7629",class:{message:true,[`message--${this.direction}`]:true,[`message--group-${this.groupPosition}`]:true},"aria-label":this.author?`Message from ${this.author}`:"Message"},a("div",{key:"7e23560ac2daa67855721b20a89a5ca9b1a30056",class:"message__body"},a("div",{key:"89f98029a2d22a4408266354eb954d5ba0cd1613",class:"message__header"},a("slot",{key:"95ed8de438bfa4e0761c3117c60eb1bc15447975",name:"header"}),this.author&&this.showAuthor?a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"primary"},this.author):null),a("div",{key:"e80ed8b19ec45485d3acbf45c43b551a63332a95",class:"message__content"},a("slot",{key:"383b97dc3a0c24a69f7dc4778275f514dece4aeb"})),a("div",{key:"03b993ff81fab359d6ee5a73ce32104e28fb8687",class:"message__footer"},a("slot",{key:"cbdc190a552a24e101e268c784c0ca0cd74b1e09",name:"footer"}),s?a("ds-text",{as:"span",variant:"text-caption",color:this.deliveryState==="failed"?"negative":"secondary"},s):null,this.deliveryState==="failed"&&e?a("ds-text",{as:"span",variant:"text-caption",color:"tertiary","aria-hidden":"true"},"·"):null,e?a("time",{dateTime:this.timestamp},a("ds-text",{as:"span",variant:"text-caption",color:"secondary"},e)):null)),a("div",{key:"75df9d36b51399b0335412cbda42e01fd6dd0f9d",class:"message__actions"},a("slot",{key:"46d90a1a28ec0e6badd645dc044a3be6a1d65b64",name:"actions"}))))}static get style(){return n()}},[262,"ds-message",{messageId:[513,"message-id"],direction:[513],groupPosition:[1,"group-position"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],deliveryState:[1,"delivery-state"],streaming:[4],scrollAnchor:[516,"scroll-anchor"]}]);function c(){if(typeof customElements==="undefined"){return}const s=["ds-message","ds-text"];s.forEach((s=>{switch(s){case"ds-message":if(!customElements.get(i(s))){customElements.define(i(s),o)}break;case"ds-text":if(!customElements.get(i(s))){d()}break}}))}c();export{o as M,c as d};
-//# sourceMappingURL=p-DjPZxzIG.js.map
+import{p as e,H as s,h as a,a as t,t as i}from"./index.js";import{d}from"./p-BwGnhInj.js";const n=()=>`.sc-ds-message-h{display:block;box-sizing:border-box;content-visibility:auto;contain-intrinsic-size:auto var(--dimension-size-800);-webkit-user-select:none;user-select:none}.message-host--group-middle.sc-ds-message-h,.message-host--group-last.sc-ds-message-h{margin-block-start:calc(var(--dimension-space-050) - var(--dimension-space-300))}.message.sc-ds-message{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:0;width:100%;box-sizing:border-box}.message--outgoing.sc-ds-message{grid-template-columns:minmax(0, 1fr) auto}.message__header.sc-ds-message:empty,.message__footer.sc-ds-message:empty,.message__actions.sc-ds-message:empty{display:none}.message__actions.sc-ds-message:not(:empty){margin-inline-start:var(--dimension-space-075)}.message__body.sc-ds-message{display:flex;flex-direction:column;min-width:0;gap:var(--dimension-space-050)}.message--incoming.sc-ds-message .message__body.sc-ds-message{width:100%}.message--outgoing.sc-ds-message .message__body.sc-ds-message{align-items:flex-end}.message--outgoing.sc-ds-message .message__header.sc-ds-message{display:none}.message--system.sc-ds-message .message__body.sc-ds-message{align-items:center}.message__header.sc-ds-message,.message__footer.sc-ds-message,.message__actions.sc-ds-message{display:flex;align-items:center;gap:var(--dimension-space-050)}.message__content.sc-ds-message{width:100%;min-width:0;-webkit-user-select:text;user-select:text}.message--outgoing.sc-ds-message .message__content.sc-ds-message{display:flex;justify-content:flex-end}.message__footer.sc-ds-message time.sc-ds-message{display:inline-flex}.message--group-middle.sc-ds-message .message__header.sc-ds-message,.message--group-last.sc-ds-message .message__header.sc-ds-message{display:none}.message--group-first.sc-ds-message .message__footer.sc-ds-message,.message--group-middle.sc-ds-message .message__footer.sc-ds-message{display:none}`;const m={sending:"Sending",sent:"Sent",delivered:"Delivered",read:"Read",failed:"Failed to send"};const c=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.messageId="";this.direction="incoming";this.groupPosition="single";this.author="";this.showAuthor=true;this.timestamp="";this.streaming=false;this.scrollAnchor=false}formattedTimestamp(){if(!this.timestamp)return"";const e=Date.parse(this.timestamp);if(Number.isNaN(e))return this.timestamp;return new Intl.DateTimeFormat(undefined,{hour:"numeric",minute:"2-digit"}).format(new Date(e))}render(){const e=this.deliveryState?m[this.deliveryState]:"";const s=this.formattedTimestamp();return a(t,{key:"654367954959e5043d3ce1ef302882ee84628fae",class:`message-host--group-${this.groupPosition}`,"data-message-id":this.messageId||undefined,"data-scroll-anchor":this.scrollAnchor?"true":undefined,"aria-busy":this.streaming?"true":undefined},a("article",{key:"afffab2e24d928da3b79f95fc1c61c2d11385824",class:{message:true,[`message--${this.direction}`]:true,[`message--group-${this.groupPosition}`]:true},"aria-label":this.author?`Message from ${this.author}`:"Message"},a("div",{key:"43cc9cd74ee86b4bce36425176f959ba7ed331e4",class:"message__body"},a("div",{key:"f52bf6243cc40fbd390c69655ab8ec181569a053",class:"message__header"},a("slot",{key:"b957ea6001602657ca26954177c7399c6502133b",name:"header"}),this.author&&this.showAuthor?a("ds-text",{as:"span",variant:"text-body-small",emphasis:true,color:"primary"},this.author):null),a("div",{key:"52a0cf91d837e151933fc1155d99377b8aaf5cd7",class:"message__content"},a("slot",{key:"702d41d189f59f23df1d7a17f239e368af45f419"})),a("div",{key:"6685d7bc834bd0573e8ce30b45f90c84cf130452",class:"message__footer"},a("slot",{key:"d189983c1eb8da1c650e4f65ca2c0a6fb1d83e8f",name:"footer"}),e?a("ds-text",{as:"span",variant:"text-caption",color:this.deliveryState==="failed"?"negative":"secondary"},e):null,this.deliveryState==="failed"&&s?a("ds-text",{as:"span",variant:"text-caption",color:"tertiary","aria-hidden":"true"},"·"):null,s?a("time",{dateTime:this.timestamp},a("ds-text",{as:"span",variant:"text-caption",color:"secondary"},s)):null)),a("div",{key:"daf693f534d9ce041ae604a00470986bf7a4f450",class:"message__actions"},a("slot",{key:"90ecdd4dc5939cb1e9cde651440e4f61e394f215",name:"actions"}))))}static get style(){return n()}},[262,"ds-message",{messageId:[513,"message-id"],direction:[513],groupPosition:[1,"group-position"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],deliveryState:[1,"delivery-state"],streaming:[4],scrollAnchor:[516,"scroll-anchor"]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-message","ds-text"];e.forEach((e=>{switch(e){case"ds-message":if(!customElements.get(i(e))){customElements.define(i(e),c)}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}o();export{c as M,o as d};
+//# sourceMappingURL=p-DQDpDYyF.js.map

package/dist/components/p-DWdRSOBV.js

@@ -0,0 +1,2 @@
+import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{c as e}from"./p-B8C_yfLQ.js";import{d as r}from"./p-BwGnhInj.js";import{a as d,T as l,r as a,b as c}from"./p-Dg3xLna0.js";import{r as h}from"./p-BJMRBHKW.js";import{C as p}from"./p-Cx-ywr1e.js";const u=new Set(["⌘","⇧","⌥","⌃"]);const m={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function f(t){return m[t.toLowerCase()]??t}function g(t){const i=t.trim();if(!i)return[];if(i.includes("+")){return i.split("+").map((t=>t.trim())).filter(Boolean).map(f)}if(/\s/.test(i)){return i.split(/\s+/).filter(Boolean).map(f)}const s=Array.from(i);const o=[];while(s.length>1&&u.has(s[0])){o.push(s.shift())}o.push(s.join(""));return o}const v=()=>`.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control--lg.sc-ds-tooltip,.ds-control--lg.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip,.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip,.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tooltip-h,.ds-control--lg.sc-ds-tooltip{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-secondary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-regular);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.tooltip-popup.sc-ds-tooltip,.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:none;opacity:0}}`;const y={md:l.size400,sm:l.size300,xs:l.size200};let b=0;let x=0;let w=null;function C(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function k(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const O=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=d.space050;this.alignOffset=0;this.delay=l.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++x}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.anchorObserver=null;this.positionFrame=null;this.skipEnterAnimation=false;this.isOpen=false;this.lastInteractionWasKeyboard=false;this.pointerEnterHandler=t=>{if(t.pointerType==="touch")return;this.show()};this.pointerLeaveHandler=t=>{if(t.pointerType==="touch")return;this.hide()};this.pointerDownHandler=t=>{this.lastInteractionWasKeyboard=false;if(t.pointerType==="touch"&&(this.isOpen||this.popupEl))this.hideInstant()};this.keyDownHandler=()=>{this.lastInteractionWasKeyboard=true};this.focusHandler=()=>{if(this.lastInteractionWasKeyboard||this.anchor?.matches(":focus-visible"))this.show()};this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()};this.scrollResizeHandler=()=>{if(this.positionFrame!==null)return;this.positionFrame=requestAnimationFrame((()=>{this.positionFrame=null;this.calculatePosition()}))};this.escapeHandler=t=>{if(t.key!=="Escape"||!this.isOpen)return;t.preventDefault();this.hide()};this.handleSlotChange=()=>{const t=this.el.querySelector("slot");const i=t?.assignedElements?.()[0]??this.el.firstElementChild;if(i===this.anchor)return;if(this.isOpen||this.popupEl)this.hideInstant();this.unbindAnchor();this.bindAnchor()}}componentDidLoad(){this.bindAnchor();this.anchorObserver=new MutationObserver((()=>this.handleSlotChange()));this.anchorObserver.observe(this.el,{childList:true})}disconnectedCallback(){if(w===this)w=null;this.anchorObserver?.disconnect();this.anchorObserver=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return h(l.space050,l.space050)}get sideOffsetPx(){return h(this.sideOffset,l.space050)}get alignOffsetPx(){return h(this.alignOffset,0)}get hoverDelayMs(){return a(this.delay,l.animationDelayMedium3)}get instantReopenMs(){return a(l.animationDurationMedium1,l.animationDurationMedium1)}get fadeOutMs(){return c(l.motionShort3,l.animationDurationShort3)}get tooltipFallbackWidthPx(){return h(l.tooltipFallbackWidth,l.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=y[this.size];return h(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s||s===this.anchor)return;this.anchor=s;s.addEventListener("pointerenter",this.pointerEnterHandler);s.addEventListener("pointerleave",this.pointerLeaveHandler);s.addEventListener("pointerdown",this.pointerDownHandler);s.addEventListener("keydown",this.keyDownHandler);s.addEventListener("focusin",this.focusHandler);s.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.unlinkDescribedBy();this.anchor.removeEventListener("pointerenter",this.pointerEnterHandler);this.anchor.removeEventListener("pointerleave",this.pointerLeaveHandler);this.anchor.removeEventListener("pointerdown",this.pointerDownHandler);this.anchor.removeEventListener("keydown",this.keyDownHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}linkDescribedBy(){if(!this.anchor||!this.popupEl)return;const t=new Set((this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter(Boolean));t.add(this.tooltipId);this.anchor.setAttribute("aria-describedby",Array.from(t).join(" "))}unlinkDescribedBy(){if(!this.anchor)return;const t=(this.anchor.getAttribute("aria-describedby")??"").split(/\s+/).filter((t=>t&&t!==this.tooltipId));if(t.length)this.anchor.setAttribute("aria-describedby",t.join(" "));else this.anchor.removeAttribute("aria-describedby")}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}setupOpenListeners(){window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler);document.addEventListener("keydown",this.escapeHandler)}teardownOpenListeners(){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);document.removeEventListener("keydown",this.escapeHandler);if(this.positionFrame!==null){cancelAnimationFrame(this.positionFrame);this.positionFrame=null}}destroyPopup(){this.teardownOpenListeners();this.positionObserver?.disconnect();this.positionObserver=null;this.unlinkDescribedBy();if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)k(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl);if(this.anchor)this.positionObserver.observe(this.anchor)}hideInstant(){this.clearTimers();b=Date.now();if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-b<this.instantReopenMs;if(w&&w!==this){w.hideInstant();t=true}w=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;b=Date.now();if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");if(this.fadeOutMs===0){if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false;return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;if(w===this)w=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.setupOpenListeners();this.linkDescribedBy();this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=p[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const s="sc-ds-tooltip";const o=document.createElement("div");o.className=`tooltip-inner ${i} ${s}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("span");i.className=`key-hint-group ${s}`;i.setAttribute("aria-hidden","true");for(const t of g(this.shortcutKey)){const o=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";o.className=`key-hint${n} ${s}`;const e=document.createElement("span");e.className=`key-hint__label ${s}`;e.textContent=t;o.appendChild(e);i.appendChild(o)}o.appendChild(i)};n("start");const e=C({variant:t,wrap:"nowrap",text:this.label});k(e);o.appendChild(e);n("end");this.popupEl.replaceChildren(o)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth||this.tooltipFallbackWidthPx;const o=t.offsetHeight||this.tooltipFallbackHeightPx;const{x:n,y:r,resolvedSide:d}=e({anchorRect:i,popupWidth:s,popupHeight:o,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});t.dataset.side=d;t.style.transform=`translate(${Math.round(n)}px, ${Math.round(r)}px)`}render(){return s(o,{key:"242a699f2275fe46302623161cd4e0bde7d94fb8",style:{display:"contents"}},s("slot",{key:"802d61fb79aa7dcd10d719adb3ab99b748ba2d70",onSlotchange:this.handleSlotChange}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return v()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function P(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),O)}break;case"ds-text":if(!customElements.get(n(t))){r()}break}}))}P();export{O as T,P as d};
+//# sourceMappingURL=p-DWdRSOBV.js.map