@ds-mo/ui 0.2.4 → 0.4.0

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

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

package/dist/components/ds-accordion.js

@@ -0,0 +1,2 @@
+import{p as e,t as s,H as o,c as t,h as i,a as n}from"./index.js";const r=()=>`.sc-ds-accordion-h{display:flex;flex-direction:column}.item.sc-ds-accordion{border-bottom:1px solid var(--color-border-secondary)}.item.sc-ds-accordion:first-child{border-top:1px solid var(--color-border-secondary)}.item--inactive.sc-ds-accordion{opacity:0.5;pointer-events:none}.trigger.sc-ds-accordion{display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--dimension-space-100) var(--dimension-space-050);background:none;border:none;cursor:pointer;color:var(--color-foreground-primary);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2);-webkit-user-select:none;user-select:none;box-sizing:border-box;text-align:left}.trigger.sc-ds-accordion:hover{background-color:var(--color-interaction-hover)}.trigger.sc-ds-accordion:active{background-color:var(--color-interaction-pressed)}.trigger.sc-ds-accordion:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.chevron.sc-ds-accordion{font-size:18px;line-height:1;transform:rotate(0deg);transition:transform var(--effect-motion-short-3);color:var(--color-foreground-secondary);flex-shrink:0}.chevron--open.sc-ds-accordion{transform:rotate(90deg)}.body.sc-ds-accordion{overflow:hidden;transition:height var(--effect-motion-short-3)}.body-inner.sc-ds-accordion{padding:var(--dimension-space-050) var(--dimension-space-050) var(--dimension-space-100);color:var(--color-foreground-secondary)}`;let c=0;const a=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.dsExpandedChange=t(this,"dsExpandedChange");this.items=[];this.multiple=false;this.expandedIds="";this.internalIds=[];this.heights={};this.instanceId=++c;this.resizeObservers=new Map}get activeIds(){if(this.expandedIds)return this.expandedIds.split(",").map((e=>e.trim())).filter(Boolean);return this.internalIds}componentDidLoad(){this.bindResizeObservers()}disconnectedCallback(){this.resizeObservers.forEach((e=>e.disconnect()));this.resizeObservers.clear()}onItemsChange(){requestAnimationFrame((()=>{this.bindResizeObservers();this.measureAll()}))}bindResizeObservers(){this.resizeObservers.forEach((e=>e.disconnect()));this.resizeObservers.clear();this.items.forEach((e=>{const s=this.el.querySelector(`[data-inner="${e.id}"]`);if(!s)return;const o=new ResizeObserver((()=>{this.heights={...this.heights,[e.id]:s.scrollHeight}}));o.observe(s);this.resizeObservers.set(e.id,o)}))}measureAll(){const e={...this.heights};this.items.forEach((s=>{const o=this.el.querySelector(`[data-inner="${s.id}"]`);if(o)e[s.id]=o.scrollHeight}));this.heights=e}toggle(e){const s=this.activeIds;let o;if(s.includes(e)){o=s.filter((s=>s!==e))}else{o=this.multiple?[...s,e]:[e]}this.internalIds=o;this.dsExpandedChange.emit(o)}render(){const e=this.activeIds;return i(n,{key:"e34b49b748fd0a561c616d4ef5b2069d2e809831",class:"accordion"},this.items.map((s=>{const o=e.includes(s.id);const t=`ds-accordion-${this.instanceId}-trigger-${s.id}`;const n=`ds-accordion-${this.instanceId}-panel-${s.id}`;const r=this.heights[s.id]??0;return i("div",{key:s.id,class:{item:true,"item--inactive":!!s.inactive}},i("button",{type:"button",id:t,class:"trigger",onClick:()=>!s.inactive&&this.toggle(s.id),"aria-expanded":o,"aria-controls":n,"aria-disabled":s.inactive||undefined,tabIndex:s.inactive?-1:0},i("span",{class:"text-body-medium-emphasis"},s.label),i("span",{class:{chevron:true,"chevron--open":o},"aria-hidden":"true"},"›")),i("div",{id:n,role:"region","aria-labelledby":t,class:"body",style:{height:o?`${r}px`:"0"},"aria-hidden":!o},i("div",{class:"body-inner","data-inner":s.id},s.content?i("span",{class:"text-body-medium"},s.content):i("slot",{name:s.id}))))})))}get el(){return this}static get watchers(){return{items:[{onItemsChange:0}]}}static get style(){return r()}},[262,"ds-accordion",{items:[16],multiple:[4],expandedIds:[1025,"expanded-ids"],internalIds:[32],heights:[32]},undefined,{items:[{onItemsChange:0}]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-accordion"];e.forEach((e=>{switch(e){case"ds-accordion":if(!customElements.get(s(e))){customElements.define(s(e),a)}break}}))}d();const l=a;const h=d;export{l as DsAccordion,h as defineCustomElement};
+//# sourceMappingURL=ds-accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["accordionCss","idCounter","Accordion","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","multiple","expandedIds","internalIds","heights","instanceId","resizeObservers","Map","activeIds","split","map","s","trim","filter","Boolean","componentDidLoad","bindResizeObservers","disconnectedCallback","forEach","ro","disconnect","clear","onItemsChange","requestAnimationFrame","measureAll","item","inner","el","querySelector","id","ResizeObserver","scrollHeight","observe","set","next","toggle","current","includes","x","dsExpandedChange","emit","render","h","Host","key","class","isExpanded","triggerId","panelId","bodyHeight","inactive","type","onClick","undefined","tabIndex","label","chevron","role","style","height","content","name"],"sources":["src/wc/components/Accordion/Accordion.css?tag=ds-accordion&encapsulation=scoped","src/wc/components/Accordion/Accordion.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n}\n\n.item {\n  border-bottom: 1px solid var(--color-border-secondary);\n}\n\n.item:first-child {\n  border-top: 1px solid var(--color-border-secondary);\n}\n\n.item--inactive {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  padding: var(--dimension-space-100) var(--dimension-space-050);\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--color-foreground-primary);\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2);\n  -webkit-user-select: none;\n  user-select: none;\n  box-sizing: border-box;\n  text-align: left;\n}\n\n.trigger:hover  { background-color: var(--color-interaction-hover); }\n.trigger:active { background-color: var(--color-interaction-pressed); }\n\n.trigger:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.chevron {\n  font-size: 18px;\n  line-height: 1;\n  transform: rotate(0deg);\n  transition: transform var(--effect-motion-short-3);\n  color: var(--color-foreground-secondary);\n  flex-shrink: 0;\n}\n\n.chevron--open { transform: rotate(90deg); }\n\n.body {\n  overflow: hidden;\n  transition: height var(--effect-motion-short-3);\n}\n\n.body-inner {\n  padding: var(--dimension-space-050) var(--dimension-space-050) var(--dimension-space-100);\n  color: var(--color-foreground-secondary);\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport interface AccordionItemData {\n  id: string;\n  label: string;\n  content?: string;\n  inactive?: boolean;\n}\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-accordion',\n  styleUrl: 'Accordion.css',\n  scoped: true,\n})\nexport class Accordion {\n  @Element() el!: HTMLElement;\n\n  @Prop() items: AccordionItemData[] = [];\n  @Prop() multiple: boolean = false;\n  /** Comma-separated list of expanded item IDs for controlled mode. */\n  @Prop({ mutable: true }) expandedIds: string = '';\n\n  @State() private internalIds: string[] = [];\n  @State() private heights: Record<string, number> = {};\n\n  @Event() dsExpandedChange!: EventEmitter<string[]>;\n\n  private instanceId = ++idCounter;\n  private resizeObservers: Map<string, ResizeObserver> = new Map();\n\n  private get activeIds(): string[] {\n    if (this.expandedIds) return this.expandedIds.split(',').map(s => s.trim()).filter(Boolean);\n    return this.internalIds;\n  }\n\n  componentDidLoad() {\n    this.bindResizeObservers();\n  }\n\n  disconnectedCallback() {\n    this.resizeObservers.forEach(ro => ro.disconnect());\n    this.resizeObservers.clear();\n  }\n\n  @Watch('items')\n  onItemsChange() {\n    requestAnimationFrame(() => {\n      this.bindResizeObservers();\n      this.measureAll();\n    });\n  }\n\n  private bindResizeObservers() {\n    this.resizeObservers.forEach(ro => ro.disconnect());\n    this.resizeObservers.clear();\n\n    this.items.forEach(item => {\n      const inner = this.el.querySelector(`[data-inner=\"${item.id}\"]`) as HTMLElement | null;\n      if (!inner) return;\n      const ro = new ResizeObserver(() => {\n        this.heights = { ...this.heights, [item.id]: inner.scrollHeight };\n      });\n      ro.observe(inner);\n      this.resizeObservers.set(item.id, ro);\n    });\n  }\n\n  private measureAll() {\n    const next: Record<string, number> = { ...this.heights };\n    this.items.forEach(item => {\n      const inner = this.el.querySelector(`[data-inner=\"${item.id}\"]`) as HTMLElement | null;\n      if (inner) next[item.id] = inner.scrollHeight;\n    });\n    this.heights = next;\n  }\n\n  private toggle(id: string) {\n    const current = this.activeIds;\n    let next: string[];\n    if (current.includes(id)) {\n      next = current.filter(x => x !== id);\n    } else {\n      next = this.multiple ? [...current, id] : [id];\n    }\n    this.internalIds = next;\n    this.dsExpandedChange.emit(next);\n  }\n\n  render() {\n    const activeIds = this.activeIds;\n\n    return (\n      <Host class=\"accordion\">\n        {this.items.map(item => {\n          const isExpanded = activeIds.includes(item.id);\n          const triggerId = `ds-accordion-${this.instanceId}-trigger-${item.id}`;\n          const panelId = `ds-accordion-${this.instanceId}-panel-${item.id}`;\n          const bodyHeight = this.heights[item.id] ?? 0;\n\n          return (\n            <div\n              key={item.id}\n              class={{ item: true, 'item--inactive': !!item.inactive }}\n            >\n              <button\n                type=\"button\"\n                id={triggerId}\n                class=\"trigger\"\n                onClick={() => !item.inactive && this.toggle(item.id)}\n                aria-expanded={isExpanded}\n                aria-controls={panelId}\n                aria-disabled={item.inactive || undefined}\n                tabIndex={item.inactive ? -1 : 0}\n              >\n                <span class=\"text-body-medium-emphasis\">{item.label}</span>\n                <span\n                  class={{ chevron: true, 'chevron--open': isExpanded }}\n                  aria-hidden=\"true\"\n                >&#x203A;</span>\n              </button>\n              <div\n                id={panelId}\n                role=\"region\"\n                aria-labelledby={triggerId}\n                class=\"body\"\n                style={{ height: isExpanded ? `${bodyHeight}px` : '0' }}\n                aria-hidden={!isExpanded}\n              >\n                <div class=\"body-inner\" data-inner={item.id}>\n                  {item.content\n                    ? <span class=\"text-body-medium\">{item.content}</span>\n                    : <slot name={item.id} />\n                  }\n                </div>\n              </div>\n            </div>\n          );\n        })}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAe,IAAM,69CCS3B,IAAIC,EAAY,E,MAOHC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,6FAQUC,KAAAC,MAA6B,GAC7BD,KAAAE,SAAoB,MAEHF,KAAAG,YAAsB,GAE9BH,KAAAI,YAAwB,GACxBJ,KAAAK,QAAkC,GAI3CL,KAAAM,aAAeZ,EACfM,KAAAO,gBAA+C,IAAIC,GAiH5D,CA/GC,aAAYC,GACV,GAAIT,KAAKG,YAAa,OAAOH,KAAKG,YAAYO,MAAM,KAAKC,KAAIC,GAAKA,EAAEC,SAAQC,OAAOC,SACnF,OAAOf,KAAKI,W,CAGd,gBAAAY,GACEhB,KAAKiB,qB,CAGP,oBAAAC,GACElB,KAAKO,gBAAgBY,SAAQC,GAAMA,EAAGC,eACtCrB,KAAKO,gBAAgBe,O,CAIvB,aAAAC,GACEC,uBAAsB,KACpBxB,KAAKiB,sBACLjB,KAAKyB,YAAY,G,CAIb,mBAAAR,GACNjB,KAAKO,gBAAgBY,SAAQC,GAAMA,EAAGC,eACtCrB,KAAKO,gBAAgBe,QAErBtB,KAAKC,MAAMkB,SAAQO,IACjB,MAAMC,EAAQ3B,KAAK4B,GAAGC,cAAc,gBAAgBH,EAAKI,QACzD,IAAKH,EAAO,OACZ,MAAMP,EAAK,IAAIW,gBAAe,KAC5B/B,KAAKK,QAAU,IAAKL,KAAKK,QAAS,CAACqB,EAAKI,IAAKH,EAAMK,aAAc,IAEnEZ,EAAGa,QAAQN,GACX3B,KAAKO,gBAAgB2B,IAAIR,EAAKI,GAAIV,EAAG,G,CAIjC,UAAAK,GACN,MAAMU,EAA+B,IAAKnC,KAAKK,SAC/CL,KAAKC,MAAMkB,SAAQO,IACjB,MAAMC,EAAQ3B,KAAK4B,GAAGC,cAAc,gBAAgBH,EAAKI,QACzD,GAAIH,EAAOQ,EAAKT,EAAKI,IAAMH,EAAMK,YAAY,IAE/ChC,KAAKK,QAAU8B,C,CAGT,MAAAC,CAAON,GACb,MAAMO,EAAUrC,KAAKS,UACrB,IAAI0B,EACJ,GAAIE,EAAQC,SAASR,GAAK,CACxBK,EAAOE,EAAQvB,QAAOyB,GAAKA,IAAMT,G,KAC5B,CACLK,EAAOnC,KAAKE,SAAW,IAAImC,EAASP,GAAM,CAACA,E,CAE7C9B,KAAKI,YAAc+B,EACnBnC,KAAKwC,iBAAiBC,KAAKN,E,CAG7B,MAAAO,GACE,MAAMjC,EAAYT,KAAKS,UAEvB,OACEkC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACT9C,KAAKC,MAAMU,KAAIe,IACd,MAAMqB,EAAatC,EAAU6B,SAASZ,EAAKI,IAC3C,MAAMkB,EAAY,gBAAgBhD,KAAKM,sBAAsBoB,EAAKI,KAClE,MAAMmB,EAAU,gBAAgBjD,KAAKM,oBAAoBoB,EAAKI,KAC9D,MAAMoB,EAAalD,KAAKK,QAAQqB,EAAKI,KAAO,EAE5C,OACEa,EAAA,OACEE,IAAKnB,EAAKI,GACVgB,MAAO,CAAEpB,KAAM,KAAM,mBAAoBA,EAAKyB,WAE9CR,EAAA,UACES,KAAK,SACLtB,GAAIkB,EACJF,MAAM,UACNO,QAAS,KAAO3B,EAAKyB,UAAYnD,KAAKoC,OAAOV,EAAKI,IAAG,gBACtCiB,EAAU,gBACVE,EAAO,gBACPvB,EAAKyB,UAAYG,UAChCC,SAAU7B,EAAKyB,UAAW,EAAK,GAE/BR,EAAA,QAAMG,MAAM,6BAA6BpB,EAAK8B,OAC9Cb,EAAA,QACEG,MAAO,CAAEW,QAAS,KAAM,gBAAiBV,GAAY,cACzC,QAAM,MAGtBJ,EAAA,OACEb,GAAImB,EACJS,KAAK,SAAQ,kBACIV,EACjBF,MAAM,OACNa,MAAO,CAAEC,OAAQb,EAAa,GAAGG,MAAiB,KAAK,eACzCH,GAEdJ,EAAA,OAAKG,MAAM,aAAY,aAAapB,EAAKI,IACtCJ,EAAKmC,QACFlB,EAAA,QAAMG,MAAM,oBAAoBpB,EAAKmC,SACrClB,EAAA,QAAMmB,KAAMpC,EAAKI,OAIrB,I","ignoreList":[]}

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

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

package/dist/components/ds-badge.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,h as s,a as n,t as r}from"./index.js";const a=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.badge__text.sc-ds-badge{color:var(--color-foreground-secondary)}.badge__text--selected.sc-ds-badge{color:var(--color-foreground-primary)}`;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.count=0;this.isSelected=false}render(){if(this.count===0)return s(n,{style:{display:"none"}});const e=this.count>9?"+":String(this.count);const t=this.label??String(this.count);return s(n,{class:"badge","aria-label":t},s("span",{class:{"text-caption-emphasis":true,badge__text:true,"badge__text--selected":this.isSelected}},e))}static get style(){return a()}},[2,"ds-badge",{count:[2],isSelected:[4,"is-selected"],label:[1]}]);function o(){if(typeof customElements==="undefined"){return}const e=["ds-badge"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break}}))}o();const i=c;const d=o;export{i as DsBadge,d as defineCustomElement};
+//# sourceMappingURL=ds-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["badgeCss","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","count","isSelected","render","h","Host","style","display","String","ariaLabel","label","class","badge__text"],"sources":["src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.badge__text {\n  color: var(--color-foreground-secondary);\n}\n\n.badge__text--selected {\n  color: var(--color-foreground-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Prop() count: number = 0;\n  @Prop() isSelected: boolean = false;\n  /** Accessible label. Defaults to the count as a string. */\n  @Prop() label: string | undefined;\n\n  render() {\n    if (this.count === 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > 9 ? '+' : String(this.count);\n    const ariaLabel = this.label ?? String(this.count);\n\n    return (\n      <Host class=\"badge\" aria-label={ariaLabel}>\n        <span\n          class={{\n            'text-caption-emphasis': true,\n            'badge__text': true,\n            'badge__text--selected': this.isSelected,\n          }}\n        >\n          {display}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAW,IAAM,8O,MCOVC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAMUC,KAAAC,MAAgB,EAChBD,KAAAE,WAAsB,KAwB/B,CApBC,MAAAC,GACE,GAAIH,KAAKC,QAAU,EAAG,OAAOG,EAACC,EAAI,CAACC,MAAO,CAAEC,QAAS,UAErD,MAAMA,EAAUP,KAAKC,MAAQ,EAAI,IAAMO,OAAOR,KAAKC,OACnD,MAAMQ,EAAYT,KAAKU,OAASF,OAAOR,KAAKC,OAE5C,OACEG,EAACC,EAAI,CAACM,MAAM,QAAO,aAAaF,GAC9BL,EAAA,QACEO,MAAO,CACL,wBAAyB,KACzBC,YAAe,KACf,wBAAyBZ,KAAKE,aAG/BK,G","ignoreList":[]}

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

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

package/dist/components/ds-banner.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as n,h as t,a as i,t as a}from"./index.js";const r=()=>`.banner-surface.sc-ds-banner{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--dimension-radius-075)}.banner-header-surface.sc-ds-banner{width:100%;height:var(--dimension-space-100);flex-shrink:0;overflow:hidden;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.banner-header.sc-ds-banner{width:100%;height:100%;background:repeating-linear-gradient(     -45deg,     var(--banner-content),     var(--banner-content) var(--dimension-size-100),     transparent var(--dimension-size-100),     transparent var(--dimension-size-200)   )}.banner-body.sc-ds-banner{padding:var(--dimension-space-075);min-height:var(--dimension-size-400);display:flex;align-items:flex-start;gap:var(--dimension-space-075)}.banner-message.sc-ds-banner{color:var(--banner-content);line-height:var(--typography-lineheight-md);display:block;flex:1;min-width:0}.banner-dismiss.sc-ds-banner{background:none;border:none;margin:0;padding:var(--dimension-space-025);color:var(--banner-content);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--dimension-radius-050);position:relative;font-size:18px;line-height:1}.banner-dismiss.sc-ds-banner::before{content:'';position:absolute;inset:0;border-radius:inherit;background-color:transparent;transition:var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));pointer-events:none}.banner-dismiss.sc-ds-banner:hover::before{background-color:var(--color-interaction-hover)}.banner-dismiss.sc-ds-banner:active::before{background-color:var(--color-interaction-pressed)}.banner-dismiss.sc-ds-banner:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-stroke-width-015)}.floating-position.sc-ds-banner{position:fixed;top:var(--dimension-space-200);left:50%;transform:translateX(-50%);pointer-events:none}.floating-toast.sc-ds-banner{pointer-events:auto;animation:bannerFadeIn var(--effect-motion-short-2, 150ms) forwards}.floating-toast--closing.sc-ds-banner{animation:bannerFadeOut var(--effect-motion-short-3, 200ms) forwards}@keyframes bannerFadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes bannerFadeOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}`;const o=200;const d=4e3;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsDismiss=n(this,"dsDismiss");this.intent="neutral";this.contrast="medium";this.message="";this.header=false;this.floating=false;this.showDismiss=false;this.dismissLabel="Dismiss";this.closing=false;this.dismissTimer=null;this.closeTimer=null}componentDidLoad(){if(this.floating&&this.message)this.scheduleDismiss()}onMessageChange(e){if(this.floating&&e){this.closing=false;this.scheduleDismiss()}}disconnectedCallback(){this.clearTimers()}clearTimers(){if(this.dismissTimer){clearTimeout(this.dismissTimer);this.dismissTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}scheduleDismiss(){this.clearTimers();this.dismissTimer=setTimeout((()=>{this.dismissTimer=null;this.beginClose()}),d)}beginClose(){this.clearTimers();if(this.floating){this.closing=true;this.closeTimer=setTimeout((()=>{this.closing=false;this.closeTimer=null;this.dsDismiss.emit()}),o)}else{this.dsDismiss.emit()}}getContentColor(){if(this.contrast==="bold")return"var(--color-foreground-on-bold-background-primary)";const e=this.contrast==="faint"?"bold":this.contrast==="medium"?"strong":"medium";return`var(--color-foreground-${e}-${this.intent})`}getBg(){return`var(--color-background-${this.contrast}-${this.intent})`}getElevation(){return this.floating?"var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))":"var(--effect-elevation-elevated)"}render(){const e=this.getContentColor();const s=this.intent==="negative";const n=t("div",{class:{"banner-wrapper":true},style:{"--banner-content":e},role:s?"alert":"status","aria-live":s?undefined:"polite"},t("div",{class:"banner-surface",style:{backgroundColor:this.getBg(),boxShadow:this.getElevation()}},this.header&&t("div",{class:"banner-header-surface"},t("div",{class:"banner-header"})),t("div",{class:"banner-body"},t("span",{class:"text-body-medium banner-message"},this.message),this.showDismiss&&t("button",{type:"button",class:"banner-dismiss",onClick:()=>this.beginClose(),"aria-label":this.dismissLabel},"×"))));if(this.floating){return t(i,{style:{display:"contents"}},t("div",{class:"floating-position",style:{zIndex:"9998"}},t("div",{class:{"floating-toast":true,"floating-toast--closing":this.closing}},n)))}return t(i,{style:{display:"contents"}},n)}static get watchers(){return{message:[{onMessageChange:0}]}}static get style(){return r()}},[2,"ds-banner",{intent:[1],contrast:[1],message:[1],header:[4],floating:[4],showDismiss:[4,"show-dismiss"],dismissLabel:[1,"dismiss-label"],closing:[32]},undefined,{message:[{onMessageChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-banner"];e.forEach((e=>{switch(e){case"ds-banner":if(!customElements.get(a(e))){customElements.define(a(e),l)}break}}))}c();const h=l;const f=c;export{h as DsBanner,f as defineCustomElement};
+//# sourceMappingURL=ds-banner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["bannerCss","FADE_OUT_MS","AUTO_DISMISS_MS","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n  width: 100%;\n  height: var(--dimension-space-100);\n  flex-shrink: 0;\n  overflow: hidden;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n  width: 100%;\n  height: 100%;\n  background: repeating-linear-gradient(\n    -45deg,\n    var(--banner-content),\n    var(--banner-content) var(--dimension-size-100),\n    transparent var(--dimension-size-100),\n    transparent var(--dimension-size-200)\n  );\n}\n\n.banner-body {\n  padding: var(--dimension-space-075);\n  min-height: var(--dimension-size-400);\n  display: flex;\n  align-items: flex-start;\n  gap: var(--dimension-space-075);\n}\n\n.banner-message {\n  color: var(--banner-content);\n  line-height: var(--typography-lineheight-md);\n  display: block;\n  flex: 1;\n  min-width: 0;\n}\n\n.banner-dismiss {\n  background: none;\n  border: none;\n  margin: 0;\n  padding: var(--dimension-space-025);\n  color: var(--banner-content);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.banner-dismiss::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n  pointer-events: none;\n}\n\n.banner-dismiss:hover::before  { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n  position: fixed;\n  top: var(--dimension-space-200);\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n\n.floating-toast {\n  pointer-events: auto;\n  animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n  animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n  from { opacity: 1; transform: translateY(0); }\n  to   { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type BannerIntent =\n  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n  | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\nconst FADE_OUT_MS = 200;\nconst AUTO_DISMISS_MS = 4000;\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Prop() intent: BannerIntent = 'neutral';\n  @Prop() contrast: BannerContrast = 'medium';\n  @Prop() message: string = '';\n  /** Renders the diagonal-stripe accent bar above the body. */\n  @Prop() header: boolean = false;\n  /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n  @Prop() floating: boolean = false;\n  @Prop() showDismiss: boolean = false;\n  @Prop() dismissLabel: string = 'Dismiss';\n\n  @State() private closing: boolean = false;\n\n  @Event() dsDismiss!: EventEmitter<void>;\n\n  private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.floating && this.message) this.scheduleDismiss();\n  }\n\n  @Watch('message')\n  onMessageChange(newVal: string) {\n    if (this.floating && newVal) {\n      this.closing = false;\n      this.scheduleDismiss();\n    }\n  }\n\n  disconnectedCallback() {\n    this.clearTimers();\n  }\n\n  private clearTimers() {\n    if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n    if (this.closeTimer)   { clearTimeout(this.closeTimer);   this.closeTimer = null; }\n  }\n\n  private scheduleDismiss() {\n    this.clearTimers();\n    this.dismissTimer = setTimeout(() => {\n      this.dismissTimer = null;\n      this.beginClose();\n    }, AUTO_DISMISS_MS);\n  }\n\n  private beginClose() {\n    this.clearTimers();\n    if (this.floating) {\n      this.closing = true;\n      this.closeTimer = setTimeout(() => {\n        this.closing = false;\n        this.closeTimer = null;\n        this.dsDismiss.emit();\n      }, FADE_OUT_MS);\n    } else {\n      this.dsDismiss.emit();\n    }\n  }\n\n  private getContentColor(): string {\n    if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n    const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n    return `var(--color-foreground-${c}-${this.intent})`;\n  }\n\n  private getBg(): string {\n    return `var(--color-background-${this.contrast}-${this.intent})`;\n  }\n\n  private getElevation(): string {\n    return this.floating\n      ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'\n      : 'var(--effect-elevation-elevated)';\n  }\n\n  render() {\n    const contentColor = this.getContentColor();\n    const isAssertive = this.intent === 'negative';\n\n    const bannerEl = (\n      <div\n        class={{ 'banner-wrapper': true }}\n        style={{ '--banner-content': contentColor } as any}\n        role={isAssertive ? 'alert' : 'status'}\n        aria-live={isAssertive ? undefined : 'polite'}\n      >\n        <div\n          class=\"banner-surface\"\n          style={{\n            backgroundColor: this.getBg(),\n            boxShadow: this.getElevation(),\n          }}\n        >\n          {this.header && (\n            <div class=\"banner-header-surface\">\n              <div class=\"banner-header\" />\n            </div>\n          )}\n          <div class=\"banner-body\">\n            <span class=\"text-body-medium banner-message\">{this.message}</span>\n            {this.showDismiss && (\n              <button\n                type=\"button\"\n                class=\"banner-dismiss\"\n                onClick={() => this.beginClose()}\n                aria-label={this.dismissLabel}\n              >\n                &times;\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n    );\n\n    if (this.floating) {\n      return (\n        <Host style={{ display: 'contents' }}>\n          <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n            <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n              {bannerEl}\n            </div>\n          </div>\n        </Host>\n      );\n    }\n\n    return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,41ECQxB,MAAMC,EAAc,IACpB,MAAMC,EAAkB,I,MAOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,+EAMUC,KAAAC,OAAuB,UACvBD,KAAAE,SAA2B,SAC3BF,KAAAG,QAAkB,GAElBH,KAAAI,OAAkB,MAElBJ,KAAAK,SAAoB,MACpBL,KAAAM,YAAuB,MACvBN,KAAAO,aAAuB,UAEdP,KAAAQ,QAAmB,MAI5BR,KAAAS,aAAqD,KACrDT,KAAAU,WAAmD,IAmH5D,CAjHC,gBAAAC,GACE,GAAIX,KAAKK,UAAYL,KAAKG,QAASH,KAAKY,iB,CAI1C,eAAAC,CAAgBC,GACd,GAAId,KAAKK,UAAYS,EAAQ,CAC3Bd,KAAKQ,QAAU,MACfR,KAAKY,iB,EAIT,oBAAAG,GACEf,KAAKgB,a,CAGC,WAAAA,GACN,GAAIhB,KAAKS,aAAc,CAAEQ,aAAajB,KAAKS,cAAeT,KAAKS,aAAe,I,CAC9E,GAAIT,KAAKU,WAAc,CAAEO,aAAajB,KAAKU,YAAeV,KAAKU,WAAa,I,EAGtE,eAAAE,GACNZ,KAAKgB,cACLhB,KAAKS,aAAeS,YAAW,KAC7BlB,KAAKS,aAAe,KACpBT,KAAKmB,YAAY,GAChBzB,E,CAGG,UAAAyB,GACNnB,KAAKgB,cACL,GAAIhB,KAAKK,SAAU,CACjBL,KAAKQ,QAAU,KACfR,KAAKU,WAAaQ,YAAW,KAC3BlB,KAAKQ,QAAU,MACfR,KAAKU,WAAa,KAClBV,KAAKoB,UAAUC,MAAM,GACpB5B,E,KACE,CACLO,KAAKoB,UAAUC,M,EAIX,eAAAC,GACN,GAAItB,KAAKE,WAAa,OAAQ,MAAO,qDACrC,MAAMqB,EAAIvB,KAAKE,WAAa,QAAU,OAASF,KAAKE,WAAa,SAAW,SAAW,SACvF,MAAO,0BAA0BqB,KAAKvB,KAAKC,S,CAGrC,KAAAuB,GACN,MAAO,0BAA0BxB,KAAKE,YAAYF,KAAKC,S,CAGjD,YAAAwB,GACN,OAAOzB,KAAKK,SACR,8EACA,kC,CAGN,MAAAqB,GACE,MAAMC,EAAe3B,KAAKsB,kBAC1B,MAAMM,EAAc5B,KAAKC,SAAW,WAEpC,MAAM4B,EACJC,EAAA,OACEC,MAAO,CAAE,iBAAkB,MAC3BC,MAAO,CAAE,mBAAoBL,GAC7BM,KAAML,EAAc,QAAU,SAAQ,YAC3BA,EAAcM,UAAY,UAErCJ,EAAA,OACEC,MAAM,iBACNC,MAAO,CACLG,gBAAiBnC,KAAKwB,QACtBY,UAAWpC,KAAKyB,iBAGjBzB,KAAKI,QACJ0B,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAM,mBAGfD,EAAA,OAAKC,MAAM,eACTD,EAAA,QAAMC,MAAM,mCAAmC/B,KAAKG,SACnDH,KAAKM,aACJwB,EAAA,UACEO,KAAK,SACLN,MAAM,iBACNO,QAAS,IAAMtC,KAAKmB,aAAY,aACpBnB,KAAKO,cAAY,QAUzC,GAAIP,KAAKK,SAAU,CACjB,OACEyB,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aACtBV,EAAA,OAAKC,MAAM,oBAAoBC,MAAO,CAAES,OAAQ,SAC9CX,EAAA,OAAKC,MAAO,CAAE,iBAAkB,KAAM,0BAA2B/B,KAAKQ,UACnEqB,I,CAOX,OAAOC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aAAeX,E","ignoreList":[]}

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

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

package/dist/components/ds-breadcrumb.js

@@ -0,0 +1,2 @@
+import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"18a93bad46568264a308c3aa3067dca124a42aac"},a("nav",{key:"a19a1a8233e23ea548544f09658cbc49211b9a75","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"1edb429d1686e8285bf707da5f0b46f410283d79",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
+//# sourceMappingURL=ds-breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbCss","Breadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","separator","handleClick","item","index","e","href","preventDefault","dsNavigate","emit","render","h","Host","key","class","map","i","isLast","length","label","onClick"],"sources":["src/wc/components/Breadcrumb/Breadcrumb.css?tag=ds-breadcrumb&encapsulation=scoped","src/wc/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":[".breadcrumb {\n  display: flex;\n  align-items: center;\n}\n\n.list {\n  display: flex;\n  align-items: center;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  gap: var(--dimension-space-050);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.item-inner {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.link {\n  color: var(--color-foreground-secondary);\n  text-decoration: none;\n  padding: var(--dimension-space-025) var(--dimension-space-050);\n  border-radius: var(--dimension-radius-050);\n  transition: background-color var(--effect-motion-short-2), color var(--effect-motion-short-2);\n}\n\n.link:hover {\n  background-color: var(--color-interaction-hover);\n  color: var(--color-foreground-primary);\n}\n\n.link:active { background-color: var(--color-interaction-pressed); }\n\n.link:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.separator {\n  color: var(--color-foreground-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.current {\n  color: var(--color-foreground-primary);\n  padding: var(--dimension-space-025) var(--dimension-space-050);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  @Prop() items: BreadcrumbItem[] = [];\n  @Prop() separator: string = '/';\n\n  @Event() dsNavigate!: EventEmitter<{ item: BreadcrumbItem; index: number }>;\n\n  private handleClick(item: BreadcrumbItem, index: number, e: MouseEvent) {\n    if (!item.href) {\n      e.preventDefault();\n    }\n    this.dsNavigate.emit({ item, index });\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\n          <ol class=\"list\">\n            {this.items.map((item, i) => {\n              const isLast = i === this.items.length - 1;\n              return (\n                <li class=\"item\" key={i}>\n                  {isLast ? (\n                    <span class=\"text-body-medium-emphasis current\" aria-current=\"page\">\n                      {item.label}\n                    </span>\n                  ) : (\n                    <span class=\"item-inner\">\n                      <a\n                        href={item.href ?? '#'}\n                        class=\"link text-body-medium\"\n                        onClick={e => this.handleClick(item, i, e)}\n                      >\n                        {item.label}\n                      </a>\n                      <span class=\"separator text-body-small\" aria-hidden=\"true\">\n                        {this.separator}\n                      </span>\n                    </span>\n                  )}\n                </li>\n              );\n            })}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAgB,IAAM,gtC,MCYfC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,iFAMUC,KAAAC,MAA0B,GAC1BD,KAAAE,UAAoB,GA8C7B,CA1CS,WAAAC,CAAYC,EAAsBC,EAAeC,GACvD,IAAKF,EAAKG,KAAM,CACdD,EAAEE,gB,CAEJR,KAAKS,WAAWC,KAAK,CAAEN,OAAMC,S,CAG/B,MAAAM,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDAAgB,aAAaC,MAAM,cACjCH,EAAA,MAAAE,IAAA,2CAAIC,MAAM,QACPf,KAAKC,MAAMe,KAAI,CAACZ,EAAMa,KACrB,MAAMC,EAASD,IAAMjB,KAAKC,MAAMkB,OAAS,EACzC,OACEP,EAAA,MAAIG,MAAM,OAAOD,IAAKG,GACnBC,EACCN,EAAA,QAAMG,MAAM,oCAAmC,eAAc,QAC1DX,EAAKgB,OAGRR,EAAA,QAAMG,MAAM,cACVH,EAAA,KACEL,KAAMH,EAAKG,MAAQ,IACnBQ,MAAM,wBACNM,QAASf,GAAKN,KAAKG,YAAYC,EAAMa,EAAGX,IAEvCF,EAAKgB,OAERR,EAAA,QAAMG,MAAM,4BAA2B,cAAa,QACjDf,KAAKE,YAIT,M","ignoreList":[]}

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

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

package/dist/components/ds-button.js

@@ -0,0 +1,2 @@
+import{p as o,H as r,c as n,h as t,a,t as e}from"./index.js";import{d as i}from"./p-BcuUR5Ao.js";const s=()=>`.btn-host.sc-ds-button{display:inline-block}.btn-host--full.sc-ds-button{display:block;width:100%}.btn.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;color:var(--color-foreground-primary);background:transparent;box-sizing:border-box;text-decoration:none;user-select:none;outline:none;width:100%;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.btn.sc-ds-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.btn.sc-ds-button:hover:not(.inactive){background-color:var(--_hover-bg)}.btn.sc-ds-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.primary.sc-ds-button{color:var(--color-foreground-on-bold-background-primary)}.primary.intentNone.sc-ds-button{background-color:var(--color-inverted-background);color:var(--color-inverted-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));--_border:var(--color-inverted-border-tertiary)}.primary.sc-ds-button:not(.intentNone){background-color:var(--_bg);--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary))}.primary.intentBrand.sc-ds-button{--_bg:var(--color-background-bold-brand);color:var(--color-foreground-faint-brand)}.primary.intentNeutral.sc-ds-button{--_bg:var(--color-background-bold-neutral);color:var(--color-foreground-faint-neutral)}.primary.intentPositive.sc-ds-button{--_bg:var(--color-background-bold-positive);color:var(--color-foreground-faint-positive)}.primary.intentNegative.sc-ds-button{--_bg:var(--color-background-bold-negative);color:var(--color-foreground-faint-negative)}.primary.intentWarning.sc-ds-button{--_bg:var(--color-background-bold-warning);color:var(--color-foreground-faint-warning)}.primary.intentCaution.sc-ds-button{--_bg:var(--color-background-bold-caution);color:var(--color-foreground-faint-caution)}.primary.intentAi.sc-ds-button{--_bg:var(--color-background-bold-ai);color:var(--color-foreground-faint-ai)}.primary.contrastMedium.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary))}.primary.contrastMedium.intentBrand.sc-ds-button{--_bg:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.primary.contrastMedium.intentNeutral.sc-ds-button{--_bg:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.primary.contrastMedium.intentPositive.sc-ds-button{--_bg:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.primary.contrastMedium.intentNegative.sc-ds-button{--_bg:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.primary.contrastMedium.intentWarning.sc-ds-button{--_bg:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.primary.contrastMedium.intentCaution.sc-ds-button{--_bg:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.primary.contrastMedium.intentAi.sc-ds-button{--_bg:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.primary.contrastStrong.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary))}.primary.contrastStrong.intentBrand.sc-ds-button{--_bg:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.primary.contrastStrong.intentNeutral.sc-ds-button{--_bg:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.primary.contrastStrong.intentPositive.sc-ds-button{--_bg:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.primary.contrastStrong.intentNegative.sc-ds-button{--_bg:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.primary.contrastStrong.intentWarning.sc-ds-button{--_bg:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.primary.contrastStrong.intentCaution.sc-ds-button{--_bg:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.primary.contrastStrong.intentAi.sc-ds-button{--_bg:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.primary.contrastFaint.sc-ds-button{--_hover-bg:color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary))}.primary.contrastFaint.intentBrand.sc-ds-button{--_bg:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.primary.contrastFaint.intentNeutral.sc-ds-button{--_bg:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.primary.contrastFaint.intentPositive.sc-ds-button{--_bg:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.primary.contrastFaint.intentNegative.sc-ds-button{--_bg:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.primary.contrastFaint.intentWarning.sc-ds-button{--_bg:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.primary.contrastFaint.intentCaution.sc-ds-button{--_bg:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.primary.contrastFaint.intentAi.sc-ds-button{--_bg:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.primary.intentNone.onStrong.sc-ds-button,.primary.intentNone.onAlwaysDark.sc-ds-button{background-color:var(--color-background-primary);color:var(--color-foreground-primary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));--_border:var(--color-border-tertiary)}.secondary.sc-ds-button{background-color:transparent;color:var(--color-foreground-secondary)}.secondary.intentBrand.sc-ds-button{color:var(--color-foreground-bold-brand)}.secondary.intentNeutral.sc-ds-button{color:var(--color-foreground-bold-neutral)}.secondary.intentPositive.sc-ds-button{color:var(--color-foreground-bold-positive)}.secondary.intentNegative.sc-ds-button{color:var(--color-foreground-bold-negative)}.secondary.intentWarning.sc-ds-button{color:var(--color-foreground-bold-warning)}.secondary.intentCaution.sc-ds-button{color:var(--color-foreground-bold-caution)}.secondary.intentAi.sc-ds-button{color:var(--color-foreground-bold-ai)}.secondary.onMedium.sc-ds-button{color:var(--color-foreground-primary)}.secondary.onMedium.intentBrand.sc-ds-button{color:var(--color-foreground-strong-brand)}.secondary.onMedium.intentNeutral.sc-ds-button{color:var(--color-foreground-strong-neutral)}.secondary.onMedium.intentPositive.sc-ds-button{color:var(--color-foreground-strong-positive)}.secondary.onMedium.intentNegative.sc-ds-button{color:var(--color-foreground-strong-negative)}.secondary.onMedium.intentWarning.sc-ds-button{color:var(--color-foreground-strong-warning)}.secondary.onMedium.intentCaution.sc-ds-button{color:var(--color-foreground-strong-caution)}.secondary.onMedium.intentAi.sc-ds-button{color:var(--color-foreground-strong-ai)}.secondary.onBold.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onBold.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onBold.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onBold.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onBold.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onBold.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onBold.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onBold.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.onAlwaysDark.sc-ds-button{color:var(--color-always-dark-foreground-secondary)}.secondary.onAlwaysDark.intentBrand.sc-ds-button{color:var(--color-always-dark-foreground-brand)}.secondary.onAlwaysDark.intentNeutral.sc-ds-button{color:var(--color-always-dark-foreground-neutral)}.secondary.onAlwaysDark.intentPositive.sc-ds-button{color:var(--color-always-dark-foreground-positive)}.secondary.onAlwaysDark.intentNegative.sc-ds-button{color:var(--color-always-dark-foreground-negative)}.secondary.onAlwaysDark.intentWarning.sc-ds-button{color:var(--color-always-dark-foreground-warning)}.secondary.onAlwaysDark.intentCaution.sc-ds-button{color:var(--color-always-dark-foreground-caution)}.secondary.onAlwaysDark.intentAi.sc-ds-button{color:var(--color-always-dark-foreground-ai)}.secondary.onStrong.sc-ds-button{color:var(--color-foreground-on-bold-background-secondary)}.secondary.onStrong.intentBrand.sc-ds-button{color:var(--color-foreground-faint-brand)}.secondary.onStrong.intentNeutral.sc-ds-button{color:var(--color-foreground-faint-neutral)}.secondary.onStrong.intentPositive.sc-ds-button{color:var(--color-foreground-faint-positive)}.secondary.onStrong.intentNegative.sc-ds-button{color:var(--color-foreground-faint-negative)}.secondary.onStrong.intentWarning.sc-ds-button{color:var(--color-foreground-faint-warning)}.secondary.onStrong.intentCaution.sc-ds-button{color:var(--color-foreground-faint-caution)}.secondary.onStrong.intentAi.sc-ds-button{color:var(--color-foreground-faint-ai)}.secondary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.secondary.elevationElevated.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.secondary.elevationFloating.sc-ds-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.primary.elevationElevated.sc-ds-button{box-shadow:var(--effect-elevation-elevated-sm)}.primary.elevationNone.sc-ds-button{box-shadow:none}.primary.elevationFlat.sc-ds-button{box-shadow:inset 0 0 0 1px var(--_border)}.primary.intentNone.elevationFlat.sc-ds-button{--_border:var(--color-border-tertiary)}.primary.elevationFloating.sc-ds-button{box-shadow:var(--effect-elevation-elevated-floating) !important}.iconOnly.sc-ds-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.dropdown.sc-ds-button{gap:var(--dimension-space-050)}.sizeSM.sc-ds-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:1px}.sizeXS.sc-ds-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-button,.sizeXS.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-025);gap:0}.sizeLG.sc-ds-button{height:var(--dimension-size-500)}.sizeLG.iconOnly.sc-ds-button{width:var(--dimension-size-500);min-width:var(--dimension-size-500)}.sizeLG.labelOnly.sc-ds-button{padding:0 var(--dimension-space-150)}.sizeLG.iconAndLabel.sc-ds-button{padding:0 var(--dimension-space-150) 0 var(--dimension-space-100);gap:var(--dimension-space-075)}.rounded.sc-ds-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeLG.labelOnly.sc-ds-button{padding-left:calc(var(--dimension-space-150) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.rounded.sizeLG.iconAndLabel.sc-ds-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-150) + var(--dimension-space-050))}.inactive.sc-ds-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.fullWidth.sc-ds-button{display:flex;width:100%}.btn__icon.sc-ds-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.btn__label.sc-ds-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn__chevron.sc-ds-button{flex-shrink:0}.btn__badge.sc-ds-button{position:absolute;top:var(--dimension-space-025);right:var(--dimension-space-025);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-semibold);line-height:var(--typography-lineheight-xs);color:var(--color-foreground-secondary);pointer-events:none;z-index:10}`;const d={xs:12,sm:16,md:20,lg:24};const c={xs:"text-caption-emphasis",sm:"text-body-small-emphasis",md:"text-body-medium-emphasis",lg:"text-body-large-emphasis"};const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.dsMouseEnter=n(this,"dsMouseEnter");this.dsMouseLeave=n(this,"dsMouseLeave");this.variant="primary";this.intent="brand";this.size="md";this.rounded=false;this.fullWidth=false;this.contrast="bold";this.dropdown=false;this.loading=false;this.inactive=false;this.type="button";this.hasIcon=false;this.handleClick=o=>{if(this.inactive||this.loading)return;this.dsClick.emit(o)}}componentWillLoad(){this.hasIcon=!!this.el.querySelector('[slot="icon"]')}get effectiveElevation(){return this.elevation??(this.variant==="primary"?"none":"flat")}render(){const o=this.href?"a":"button";const r=this.size;const n=d[r];const e=c[r];const i=this.effectiveElevation;const s=!!this.label;const l=this.hasIcon||this.loading;const b=l&&!s;const g=s&&!l;const v=l&&s;const m=this.background;const p={btn:true,[this.variant]:true,[`intent${u(this.intent)}`]:true,[`size${r.toUpperCase()}`]:r!=="md",rounded:this.rounded,inactive:this.inactive||this.loading,iconOnly:b,labelOnly:g,iconAndLabel:v,dropdown:this.dropdown,[`contrast${u(this.contrast)}`]:this.variant==="primary"&&this.intent!=="none"&&this.contrast!=="bold",[`elevation${u(i)}`]:true,onMedium:m==="medium",onBold:m==="bold",onStrong:m==="strong",onAlwaysDark:m==="always-dark",fullWidth:this.fullWidth};const f={};if(o==="button"){f.type=this.type;f.disabled=this.inactive||this.loading}if(this.href)f.href=this.href;if(this.target)f.target=this.target;return t(a,{key:"53bffbeb6ad785dd542e220a0479abce151b53bf",class:{"btn-host":true,"btn-host--full":this.fullWidth}},t(o,{key:"bc22e851706ab643a4ba3d19c0b9300cce1bb863",class:p,style:this.width?{width:this.width}:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-disabled":this.inactive||this.loading||undefined,"aria-busy":this.loading||undefined,onClick:this.handleClick,onMouseEnter:o=>!this.inactive&&!this.loading&&this.dsMouseEnter.emit(o),onMouseLeave:o=>!this.inactive&&!this.loading&&this.dsMouseLeave.emit(o),...f},t("span",{key:"38a68e4945a8e7517f67bbc3677d4d85878f767d",class:"btn__icon",style:{fontSize:`${n}px`,display:l?undefined:"none"}},this.loading?t("ds-loader",{size:n}):t("slot",{name:"icon"})),s&&t("span",{key:"9fdb9b30dbc61863f05960301f3c867a25634203",class:`btn__label ${e}`},this.label),this.dropdown&&t("svg",{key:"2687d9a0465f28cfc1f8927a2431ae1fd5acc540",class:"btn__chevron",width:n,height:n,viewBox:"0 0 20 20",fill:"none","aria-hidden":"true"},t("path",{key:"03253b27426d2805522167c9f32be8345b80eb1c",d:"M5 7.5L10 12.5L15 7.5",stroke:"currentColor","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round"})),this.badgeCount!=null&&this.badgeCount>0&&t("span",{key:"57824101f159d9b75bfefd999d1e3c9234072372",class:"btn__badge"},this.badgeCount>9?"+":this.badgeCount)))}get el(){return this}static get style(){return s()}},[262,"ds-button",{variant:[1],intent:[1],size:[1],label:[1],rounded:[4],fullWidth:[4,"full-width"],width:[1],contrast:[1],background:[1],dropdown:[4],badgeCount:[2,"badge-count"],elevation:[1],loading:[4],inactive:[4],href:[1],target:[1],type:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],hasIcon:[32]}]);function u(o){return o.charAt(0).toUpperCase()+o.slice(1)}function b(){if(typeof customElements==="undefined"){return}const o=["ds-button","ds-loader"];o.forEach((o=>{switch(o){case"ds-button":if(!customElements.get(e(o))){customElements.define(e(o),l)}break;case"ds-loader":if(!customElements.get(e(o))){i()}break}}))}b();const g=l;const v=b;export{g as DsButton,v as defineCustomElement};
+//# sourceMappingURL=ds-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","ICON_SIZE","xs","sm","md","lg","TEXT_CLASS","Button","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","intent","size","rounded","fullWidth","contrast","dropdown","loading","inactive","type","hasIcon","handleClick","e","dsClick","emit","componentWillLoad","el","querySelector","effectiveElevation","elevation","render","Tag","href","iconSize","textClass","elev","hasLabel","label","showLeading","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","btnCls","btn","cap","toUpperCase","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","extraProps","disabled","target","h","Host","key","class","style","width","undefined","ariaLabel","ariaLabelledby","onClick","onMouseEnter","dsMouseEnter","onMouseLeave","dsMouseLeave","fontSize","display","name","height","viewBox","fill","d","stroke","badgeCount","s","charAt","slice"],"sources":["src/wc/components/Button/Button.css?tag=ds-button&encapsulation=scoped","src/wc/components/Button/Button.tsx"],"sourcesContent":["/* ── Host wrapper ─────────────────────────────────────────────────────────── */\n\n.btn-host {\n  display: inline-block;\n}\n\n.btn-host--full {\n  display: block;\n  width: 100%;\n}\n\n/* ── Base button ──────────────────────────────────────────────────────────── */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  cursor: pointer;\n  position: relative;\n  transition: transform var(--effect-motion-short-2);\n  height: var(--dimension-size-400);\n  font-family: inherit;\n  color: var(--color-foreground-primary);\n  background: transparent;\n  box-sizing: border-box;\n  text-decoration: none;\n  user-select: none;\n  outline: none;\n  width: 100%;\n\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_border: var(--color-border-tertiary);\n}\n\n.btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.btn:hover:not(.inactive) {\n  background-color: var(--_hover-bg);\n}\n\n.btn:active:not(.inactive) {\n  background-color: var(--_pressed-bg);\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ── Background context ───────────────────────────────────────────────────── */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_border: var(--color-border-on-medium-background-tertiary);\n}\n\n.onBold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_border: var(--color-border-on-bold-background-tertiary);\n}\n\n.onStrong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_border: var(--color-border-on-strong-background-tertiary);\n}\n\n.onAlwaysDark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_border: var(--color-always-dark-border-tertiary);\n}\n\n/* ── Primary variant ──────────────────────────────────────────────────────── */\n\n.primary {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.primary.intentNone {\n  background-color: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  --_hover-bg: color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));\n  --_border: var(--color-inverted-border-tertiary);\n}\n\n.primary:not(.intentNone) {\n  background-color: var(--_bg);\n  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary));\n}\n\n/* Bold contrast (default) */\n.primary.intentBrand    { --_bg: var(--color-background-bold-brand);    color: var(--color-foreground-faint-brand); }\n.primary.intentNeutral  { --_bg: var(--color-background-bold-neutral);  color: var(--color-foreground-faint-neutral); }\n.primary.intentPositive { --_bg: var(--color-background-bold-positive); color: var(--color-foreground-faint-positive); }\n.primary.intentNegative { --_bg: var(--color-background-bold-negative); color: var(--color-foreground-faint-negative); }\n.primary.intentWarning  { --_bg: var(--color-background-bold-warning);  color: var(--color-foreground-faint-warning); }\n.primary.intentCaution  { --_bg: var(--color-background-bold-caution);  color: var(--color-foreground-faint-caution); }\n.primary.intentAi       { --_bg: var(--color-background-bold-ai);       color: var(--color-foreground-faint-ai); }\n\n/* Medium contrast */\n.primary.contrastMedium {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary));\n}\n.primary.contrastMedium.intentBrand    { --_bg: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand); }\n.primary.contrastMedium.intentNeutral  { --_bg: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral); }\n.primary.contrastMedium.intentPositive { --_bg: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n.primary.contrastMedium.intentNegative { --_bg: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n.primary.contrastMedium.intentWarning  { --_bg: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning); }\n.primary.contrastMedium.intentCaution  { --_bg: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution); }\n.primary.contrastMedium.intentAi       { --_bg: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai); }\n\n/* Strong contrast */\n.primary.contrastStrong {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n}\n.primary.contrastStrong.intentBrand    { --_bg: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand); }\n.primary.contrastStrong.intentNeutral  { --_bg: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral); }\n.primary.contrastStrong.intentPositive { --_bg: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n.primary.contrastStrong.intentNegative { --_bg: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n.primary.contrastStrong.intentWarning  { --_bg: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning); }\n.primary.contrastStrong.intentCaution  { --_bg: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution); }\n.primary.contrastStrong.intentAi       { --_bg: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai); }\n\n/* Faint contrast */\n.primary.contrastFaint {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n}\n.primary.contrastFaint.intentBrand    { --_bg: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand); }\n.primary.contrastFaint.intentNeutral  { --_bg: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral); }\n.primary.contrastFaint.intentPositive { --_bg: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n.primary.contrastFaint.intentNegative { --_bg: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n.primary.contrastFaint.intentWarning  { --_bg: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning); }\n.primary.contrastFaint.intentCaution  { --_bg: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution); }\n.primary.contrastFaint.intentAi       { --_bg: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai); }\n\n/* intentNone on strong/always-dark */\n.primary.intentNone.onStrong,\n.primary.intentNone.onAlwaysDark {\n  background-color: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n  --_border: var(--color-border-tertiary);\n}\n\n/* ── Secondary variant ────────────────────────────────────────────────────── */\n\n.secondary {\n  background-color: transparent;\n  color: var(--color-foreground-secondary);\n}\n\n.secondary.intentBrand    { color: var(--color-foreground-bold-brand); }\n.secondary.intentNeutral  { color: var(--color-foreground-bold-neutral); }\n.secondary.intentPositive { color: var(--color-foreground-bold-positive); }\n.secondary.intentNegative { color: var(--color-foreground-bold-negative); }\n.secondary.intentWarning  { color: var(--color-foreground-bold-warning); }\n.secondary.intentCaution  { color: var(--color-foreground-bold-caution); }\n.secondary.intentAi       { color: var(--color-foreground-bold-ai); }\n\n.secondary.onMedium { color: var(--color-foreground-primary); }\n.secondary.onMedium.intentBrand    { color: var(--color-foreground-strong-brand); }\n.secondary.onMedium.intentNeutral  { color: var(--color-foreground-strong-neutral); }\n.secondary.onMedium.intentPositive { color: var(--color-foreground-strong-positive); }\n.secondary.onMedium.intentNegative { color: var(--color-foreground-strong-negative); }\n.secondary.onMedium.intentWarning  { color: var(--color-foreground-strong-warning); }\n.secondary.onMedium.intentCaution  { color: var(--color-foreground-strong-caution); }\n.secondary.onMedium.intentAi       { color: var(--color-foreground-strong-ai); }\n\n.secondary.onBold { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onBold.intentBrand    { color: var(--color-foreground-faint-brand); }\n.secondary.onBold.intentNeutral  { color: var(--color-foreground-faint-neutral); }\n.secondary.onBold.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onBold.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onBold.intentWarning  { color: var(--color-foreground-faint-warning); }\n.secondary.onBold.intentCaution  { color: var(--color-foreground-faint-caution); }\n.secondary.onBold.intentAi       { color: var(--color-foreground-faint-ai); }\n\n.secondary.onAlwaysDark { color: var(--color-always-dark-foreground-secondary); }\n.secondary.onAlwaysDark.intentBrand    { color: var(--color-always-dark-foreground-brand); }\n.secondary.onAlwaysDark.intentNeutral  { color: var(--color-always-dark-foreground-neutral); }\n.secondary.onAlwaysDark.intentPositive { color: var(--color-always-dark-foreground-positive); }\n.secondary.onAlwaysDark.intentNegative { color: var(--color-always-dark-foreground-negative); }\n.secondary.onAlwaysDark.intentWarning  { color: var(--color-always-dark-foreground-warning); }\n.secondary.onAlwaysDark.intentCaution  { color: var(--color-always-dark-foreground-caution); }\n.secondary.onAlwaysDark.intentAi       { color: var(--color-always-dark-foreground-ai); }\n\n.secondary.onStrong { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onStrong.intentBrand    { color: var(--color-foreground-faint-brand); }\n.secondary.onStrong.intentNeutral  { color: var(--color-foreground-faint-neutral); }\n.secondary.onStrong.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onStrong.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onStrong.intentWarning  { color: var(--color-foreground-faint-warning); }\n.secondary.onStrong.intentCaution  { color: var(--color-foreground-faint-caution); }\n.secondary.onStrong.intentAi       { color: var(--color-foreground-faint-ai); }\n\n/* ── Elevation ────────────────────────────────────────────────────────────── */\n\n.secondary.elevationFlat {\n  box-shadow: inset 0 0 0 1px var(--_border);\n}\n\n.secondary.elevationElevated {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.secondary.elevationFloating {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.primary.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }\n.primary.elevationNone     { box-shadow: none; }\n.primary.elevationFlat     { box-shadow: inset 0 0 0 1px var(--_border); }\n.primary.intentNone.elevationFlat { --_border: var(--color-border-tertiary); }\n.primary.elevationFloating { box-shadow: var(--effect-elevation-elevated-floating) !important; }\n\n/* ── Layout modes ─────────────────────────────────────────────────────────── */\n\n.iconOnly    { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }\n.labelOnly   { padding: 0 var(--dimension-space-100); }\n.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }\n.dropdown    { gap: var(--dimension-space-050); }\n\n/* ── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sizeSM { height: var(--dimension-size-300); }\n.sizeSM.iconOnly   { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.sizeSM.labelOnly  { padding: 0 var(--dimension-space-075); }\n.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 1px; }\n\n.sizeXS { height: var(--dimension-size-200); }\n.sizeXS.iconOnly   { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }\n\n.sizeLG { height: var(--dimension-size-500); }\n.sizeLG.iconOnly   { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }\n.sizeLG.labelOnly  { padding: 0 var(--dimension-space-150); }\n.sizeLG.iconAndLabel { padding: 0 var(--dimension-space-150) 0 var(--dimension-space-100); gap: var(--dimension-space-075); }\n\n/* ── Rounded ──────────────────────────────────────────────────────────────── */\n\n.rounded { border-radius: var(--dimension-radius-half); }\n.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeLG.labelOnly   { padding-left: calc(var(--dimension-space-150) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n.rounded.sizeLG.iconAndLabel { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n\n/* ── Disabled ─────────────────────────────────────────────────────────────── */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ── Full width ───────────────────────────────────────────────────────────── */\n\n.fullWidth { display: flex; width: 100%; }\n\n/* ── Inner slots ──────────────────────────────────────────────────────────── */\n\n.btn__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n.btn__label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.btn__chevron {\n  flex-shrink: 0;\n}\n\n.btn__badge {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: var(--dimension-space-025);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-semibold);\n  line-height: var(--typography-lineheight-xs);\n  color: var(--color-foreground-secondary);\n  pointer-events: none;\n  z-index: 10;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';\n\nexport type ButtonVariant   = 'primary' | 'secondary';\nexport type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonIntent    = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type ButtonSize      = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonContrast  = 'strong' | 'bold' | 'medium' | 'faint';\nexport type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };\nconst TEXT_CLASS: Record<ButtonSize, string> = {\n  xs: 'text-caption-emphasis',\n  sm: 'text-body-small-emphasis',\n  md: 'text-body-medium-emphasis',\n  lg: 'text-body-large-emphasis',\n};\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'Button.css',\n  scoped: true,\n})\nexport class Button {\n  @Element() el!: HTMLElement;\n\n  @Prop() variant: ButtonVariant = 'primary';\n  @Prop() intent: ButtonIntent = 'brand';\n  @Prop() size: ButtonSize = 'md';\n  @Prop() label: string | undefined;\n  @Prop() rounded: boolean = false;\n  @Prop() fullWidth: boolean = false;\n  @Prop() width: string | undefined;\n  @Prop() contrast: ButtonContrast = 'bold';\n  @Prop() background: ButtonBackground | undefined;\n  @Prop() dropdown: boolean = false;\n  @Prop() badgeCount: number | undefined;\n  @Prop() elevation: ButtonElevation | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() inactive: boolean = false;\n  @Prop() href: string | undefined;\n  @Prop() target: string | undefined;\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @State() private hasIcon: boolean = false;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsMouseEnter!: EventEmitter<MouseEvent>;\n  @Event() dsMouseLeave!: EventEmitter<MouseEvent>;\n\n  componentWillLoad() {\n    this.hasIcon = !!this.el.querySelector('[slot=\"icon\"]');\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.inactive || this.loading) return;\n    this.dsClick.emit(e);\n  };\n\n  private get effectiveElevation(): ButtonElevation {\n    return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');\n  }\n\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n    const size = this.size;\n    const iconSize = ICON_SIZE[size];\n    const textClass = TEXT_CLASS[size];\n    const elev = this.effectiveElevation;\n    const hasLabel = !!this.label;\n    const showLeading = this.hasIcon || this.loading;\n    const isIconOnly = showLeading && !hasLabel;\n    const isLabelOnly = hasLabel && !showLeading;\n    const isIconAndLabel = showLeading && hasLabel;\n    const bg = this.background;\n\n    const btnCls: Record<string, boolean> = {\n      btn: true,\n      [this.variant]: true,\n      [`intent${cap(this.intent)}`]: true,\n      [`size${size.toUpperCase()}`]: size !== 'md',\n      rounded: this.rounded,\n      inactive: this.inactive || this.loading,\n      iconOnly: isIconOnly,\n      labelOnly: isLabelOnly,\n      iconAndLabel: isIconAndLabel,\n      dropdown: this.dropdown,\n      [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',\n      [`elevation${cap(elev)}`]: true,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n      fullWidth: this.fullWidth,\n    };\n\n    const extraProps: Record<string, unknown> = {};\n    if (Tag === 'button') {\n      extraProps.type = this.type;\n      extraProps.disabled = this.inactive || this.loading;\n    }\n    if (this.href) extraProps.href = this.href;\n    if (this.target) extraProps.target = this.target;\n\n    return (\n      <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>\n        <Tag\n          class={btnCls}\n          style={this.width ? { width: this.width } : undefined}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.inactive || this.loading || undefined}\n          aria-busy={this.loading || undefined}\n          onClick={this.handleClick}\n          onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}\n          onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}\n          {...extraProps}\n        >\n          {/* Leading icon / loader */}\n          <span class=\"btn__icon\" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>\n            {this.loading\n              ? <ds-loader size={iconSize} />\n              : <slot name=\"icon\" />\n            }\n          </span>\n          {/* Label */}\n          {hasLabel && (\n            <span class={`btn__label ${textClass}`}>{this.label}</span>\n          )}\n          {/* Trailing chevron */}\n          {this.dropdown && (\n            <svg\n              class=\"btn__chevron\"\n              width={iconSize}\n              height={iconSize}\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          )}\n          {/* Badge */}\n          {this.badgeCount != null && this.badgeCount > 0 && (\n            <span class=\"btn__badge\">\n              {this.badgeCount > 9 ? '+' : this.badgeCount}\n            </span>\n          )}\n        </Tag>\n      </Host>\n    );\n  }\n}\n\nfunction cap(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n"],"mappings":"iGAAA,MAAMA,EAAY,IAAM,45dCSxB,MAAMC,EAAwC,CAAEC,GAAI,GAAIC,GAAI,GAAIC,GAAI,GAAIC,GAAI,IAC5E,MAAMC,EAAyC,CAC7CJ,GAAI,wBACJC,GAAI,2BACJC,GAAI,4BACJC,GAAI,4B,MAQOE,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6JAQUC,KAAAC,QAAyB,UACzBD,KAAAE,OAAuB,QACvBF,KAAAG,KAAmB,KAEnBH,KAAAI,QAAmB,MACnBJ,KAAAK,UAAqB,MAErBL,KAAAM,SAA2B,OAE3BN,KAAAO,SAAoB,MAGpBP,KAAAQ,QAAmB,MACnBR,KAAAS,SAAoB,MAGpBT,KAAAU,KAAsC,SAI7BV,KAAAW,QAAmB,MAU5BX,KAAAY,YAAeC,IACrB,GAAIb,KAAKS,UAAYT,KAAKQ,QAAS,OACnCR,KAAKc,QAAQC,KAAKF,EAAE,CAgGvB,CAtGC,iBAAAG,GACEhB,KAAKW,UAAYX,KAAKiB,GAAGC,cAAc,gB,CAQzC,sBAAYC,GACV,OAAOnB,KAAKoB,YAAcpB,KAAKC,UAAY,UAAY,OAAS,O,CAGlE,MAAAoB,GACE,MAAMC,EAAMtB,KAAKuB,KAAO,IAAM,SAC9B,MAAMpB,EAAOH,KAAKG,KAClB,MAAMqB,EAAWnC,EAAUc,GAC3B,MAAMsB,EAAY/B,EAAWS,GAC7B,MAAMuB,EAAO1B,KAAKmB,mBAClB,MAAMQ,IAAa3B,KAAK4B,MACxB,MAAMC,EAAc7B,KAAKW,SAAWX,KAAKQ,QACzC,MAAMsB,EAAaD,IAAgBF,EACnC,MAAMI,EAAcJ,IAAaE,EACjC,MAAMG,EAAiBH,GAAeF,EACtC,MAAMM,EAAKjC,KAAKkC,WAEhB,MAAMC,EAAkC,CACtCC,IAAK,KACL,CAACpC,KAAKC,SAAU,KAChB,CAAC,SAASoC,EAAIrC,KAAKE,WAAY,KAC/B,CAAC,OAAOC,EAAKmC,iBAAkBnC,IAAS,KACxCC,QAASJ,KAAKI,QACdK,SAAUT,KAAKS,UAAYT,KAAKQ,QAChC+B,SAAUT,EACVU,UAAWT,EACXU,aAAcT,EACdzB,SAAUP,KAAKO,SACf,CAAC,WAAW8B,EAAIrC,KAAKM,aAAcN,KAAKC,UAAY,WAAaD,KAAKE,SAAW,QAAUF,KAAKM,WAAa,OAC7G,CAAC,YAAY+B,EAAIX,MAAU,KAC3BgB,SAAUT,IAAO,SACjBU,OAAQV,IAAO,OACfW,SAAUX,IAAO,SACjBY,aAAcZ,IAAO,cACrB5B,UAAWL,KAAKK,WAGlB,MAAMyC,EAAsC,GAC5C,GAAIxB,IAAQ,SAAU,CACpBwB,EAAWpC,KAAOV,KAAKU,KACvBoC,EAAWC,SAAW/C,KAAKS,UAAYT,KAAKQ,O,CAE9C,GAAIR,KAAKuB,KAAMuB,EAAWvB,KAAOvB,KAAKuB,KACtC,GAAIvB,KAAKgD,OAAQF,EAAWE,OAAShD,KAAKgD,OAE1C,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAE,WAAY,KAAM,iBAAkBpD,KAAKK,YACtD4C,EAAC3B,EAAG,CAAA6B,IAAA,2CACFC,MAAOjB,EACPkB,MAAOrD,KAAKsD,MAAQ,CAAEA,MAAOtD,KAAKsD,OAAUC,UAAS,aACzCvD,KAAKwD,UAAS,kBACTxD,KAAKyD,eAAc,gBACrBzD,KAAKS,UAAYT,KAAKQ,SAAW+C,UAAS,YAC9CvD,KAAKQ,SAAW+C,UAC3BG,QAAS1D,KAAKY,YACd+C,aAAe9C,IAAmBb,KAAKS,WAAaT,KAAKQ,SAAWR,KAAK4D,aAAa7C,KAAKF,GAC3FgD,aAAehD,IAAmBb,KAAKS,WAAaT,KAAKQ,SAAWR,KAAK8D,aAAa/C,KAAKF,MACvFiC,GAGJG,EAAA,QAAAE,IAAA,2CAAMC,MAAM,YAAYC,MAAO,CAAEU,SAAU,GAAGvC,MAAcwC,QAASnC,EAAc0B,UAAY,SAC5FvD,KAAKQ,QACFyC,EAAA,aAAW9C,KAAMqB,IACjByB,EAAA,QAAMgB,KAAK,UAIhBtC,GACCsB,EAAA,QAAAE,IAAA,2CAAMC,MAAO,cAAc3B,KAAczB,KAAK4B,OAG/C5B,KAAKO,UACJ0C,EAAA,OAAAE,IAAA,2CACEC,MAAM,eACNE,MAAO9B,EACP0C,OAAQ1C,EACR2C,QAAQ,YACRC,KAAK,OAAM,cACC,QAEZnB,EAAA,QAAAE,IAAA,2CAAMkB,EAAE,wBAAwBC,OAAO,eAAc,eAAc,MAAK,iBAAgB,QAAO,kBAAiB,WAInHtE,KAAKuE,YAAc,MAAQvE,KAAKuE,WAAa,GAC5CtB,EAAA,QAAAE,IAAA,2CAAMC,MAAM,cACTpD,KAAKuE,WAAa,EAAI,IAAMvE,KAAKuE,a,6XAShD,SAASlC,EAAImC,GACX,OAAOA,EAAEC,OAAO,GAAGnC,cAAgBkC,EAAEE,MAAM,EAC7C,C","ignoreList":[]}

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

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

package/dist/components/ds-card.js

@@ -0,0 +1,2 @@
+import{p as e,H as d,h as s,a,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return s(a,{key:"b0be91f86575fc25e2e2f09dca3b7f7858a67ac3",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},s("slot",{key:"e4d1c84e2838339a37a5ef8e7d6fcb4d0dc27347",name:"header"}),s("div",{key:"4588dce7edba94810f4f04eab3d8e131fbee5bb6",class:"body"},s("slot",{key:"77fc9d8ec0444a60893db21be05c79618fa865c9"})),s("slot",{key:"9be325a4cfe592bcefc00c758efb70ba7bb6115f",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
+//# sourceMappingURL=ds-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}

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

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

package/dist/components/ds-checkbox.js

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

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

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

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

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

package/dist/components/ds-divider.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"48787795f21e3353cc4678d5288169971923ccf8",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}c();const a=n;const d=c;export{a as DsDivider,d as defineCustomElement};
+//# sourceMappingURL=ds-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dividerCss","Divider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","orientation","render","h","Host","key","role","class","vertical"],"sources":["src/wc/components/Divider/Divider.css?tag=ds-divider&encapsulation=shadow","src/wc/components/Divider/Divider.tsx"],"sourcesContent":[":host {\n  display: block;\n  border: none;\n  margin: 0;\n  flex-shrink: 0;\n  background-color: var(--color-border-secondary);\n}\n\n/* Horizontal (default) */\n:host(:not(.vertical)) {\n  width: 100%;\n  height: 1px;\n}\n\n/* Vertical */\n:host(.vertical) {\n  width: 1px;\n  height: 100%;\n  align-self: stretch;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type DividerOrientation = 'horizontal' | 'vertical';\n\n@Component({\n  tag: 'ds-divider',\n  styleUrl: 'Divider.css',\n  shadow: true,\n})\nexport class Divider {\n  /** Direction of the divider line. Defaults to 'horizontal'. */\n  @Prop() orientation: DividerOrientation = 'horizontal';\n\n  render() {\n    return (\n      <Host\n        role=\"separator\"\n        aria-orientation={this.orientation}\n        class={{ vertical: this.orientation === 'vertical' }}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAa,IAAM,gN,MCSZC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,kEAOUC,KAAAC,YAAkC,YAW3C,CATC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,YAAW,mBACEN,KAAKC,YACvBM,MAAO,CAAEC,SAAUR,KAAKC,cAAgB,a","ignoreList":[]}

package/dist/components/ds-empty-state.d.ts

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

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

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

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

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

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

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

package/dist/components/ds-fade.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"9085f9670de219028e88599d7a8ee07672a82ab2","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
+//# sourceMappingURL=ds-fade.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["fadeCss","Fade","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","fade","side","style","height"],"sources":["src/wc/components/Fade/Fade.css?tag=ds-fade&encapsulation=shadow","src/wc/components/Fade/Fade.tsx"],"sourcesContent":[":host {\n  position: absolute;\n  pointer-events: none;\n  z-index: 10;\n  transform: translateZ(0);\n  backface-visibility: hidden;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host { transition: none; }\n}\n\n:host(.fade--top) {\n  top: 0; left: 0; right: 0;\n  background: linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%);\n}\n\n:host(.fade--bottom) {\n  bottom: 0; left: 0; right: 0;\n  background: linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--left) {\n  top: 0; bottom: 0; left: 0;\n  background: linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%);\n}\n\n:host(.fade--right) {\n  top: 0; bottom: 0; right: 0;\n  background: linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type FadeSide = 'top' | 'bottom' | 'left' | 'right';\n\n@Component({\n  tag: 'ds-fade',\n  styleUrl: 'Fade.css',\n  shadow: true,\n})\nexport class Fade {\n  @Prop() side!: FadeSide;\n  /** Height (or width for left/right) of the fade overlay — any CSS value. */\n  @Prop() height: string | undefined;\n  /** Background color to fade from. Defaults to var(--color-background-secondary). */\n  @Prop() background: string = 'var(--color-background-secondary)';\n\n  render() {\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          fade: true,\n          [`fade--${this.side}`]: true,\n        }}\n        style={{\n          height: this.height,\n          '--ds-fade-bg': this.background,\n        } as Record<string, string>}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,6pB,MCSTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,kEAUUC,KAAAC,WAAqB,mCAiB9B,CAfC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,KAAM,KACN,CAAC,SAASP,KAAKQ,QAAS,MAE1BC,MAAO,CACLC,OAAQV,KAAKU,OACb,eAAgBV,KAAKC,a","ignoreList":[]}

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

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

package/dist/components/ds-field.js

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

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

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

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

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

package/dist/components/ds-header.js

@@ -0,0 +1,2 @@
+import{p as e,H as r,h as a,a as s,t}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return a(s,{key:"604735dcf8aa199919e3962e0286b2d568cb0965",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},a("div",{key:"595b2a0e988e6a6121cf329d5552cebb8423c0ec",class:"left"},a("slot",{key:"23cae3bd48fa4364178318e6a7a73b482afbd617",name:"left"}),this.heading&&a("span",{key:"ef928d31f285176cce062b94f1b96da276d0527e",class:"title text-title-small"},this.heading)),a("div",{key:"2feb74bc29e3d51270c45890c073a23215e3b47f",class:"center"},a("slot",{key:"bce03c60784c0ca303eb30d02b1e975248296923",name:"center"})),a("div",{key:"ecc9fbba97d5bd78137da5815f1a8129f59936e4",class:"right"},a("slot",{key:"4ec9767b4402018bf94e8cba7e74d954849d9b99",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(t(e))){customElements.define(t(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
+//# sourceMappingURL=ds-header.js.map

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

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

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

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

package/dist/components/ds-input.js

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

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

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

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

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

package/dist/components/ds-loader.js

@@ -0,0 +1,2 @@
+import{L as o,d as s}from"./p-BcuUR5Ao.js";const t=o;const c=s;export{t as DsLoader,c as defineCustomElement};
+//# sourceMappingURL=ds-loader.js.map

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

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