@ds-mo/ui 0.3.0 → 0.4.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","indicatorLeft","indicatorWidth","resizeObserver","componentDidLoad","ResizeObserver","updateIndicator","list","el","querySelector","observe","disconnectedCallback","disconnect","onValueChange","onTabsChange","requestAnimationFrame","selected","closest","listRect","getBoundingClientRect","tabRect","left","width","selectTab","id","dsChange","emit","handleKeyDown","e","active","filter","t","disabled","length","currentIdx","findIndex","nextIdx","key","preventDefault","next","btn","focus","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","map","tab","isSelected","type","undefined","tabIndex","onClick","label","style"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  position: relative;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-secondary);\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  transition: color var(--effect-motion-short-2), background-color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n}\n\n.tab:hover { background-color: var(--_hover-bg); }\n.tab:active { background-color: var(--_pressed-bg); }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n/* Sliding indicator */\n.indicator {\n  position: absolute;\n  bottom: 0;\n  height: 2px;\n  background-color: var(--color-foreground-brand);\n  border-radius: var(--dimension-radius-full, 9999px);\n  transition: left var(--effect-motion-short-3), width var(--effect-motion-short-3);\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nexport interface TabItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n}\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @State() private indicatorLeft: number = 0;\n  @State() private indicatorWidth: number = 0;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private resizeObserver: ResizeObserver | null = null;\n\n  componentDidLoad() {\n    this.resizeObserver = new ResizeObserver(() => this.updateIndicator());\n    const list = this.el.querySelector('[role=\"tablist\"]') as HTMLElement;\n    if (list) this.resizeObserver.observe(list);\n    this.updateIndicator();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.updateIndicator();\n  }\n\n  @Watch('tabs')\n  onTabsChange() {\n    // Allow a render cycle before measuring\n    requestAnimationFrame(() => this.updateIndicator());\n  }\n\n  private updateIndicator() {\n    const selected = this.el.querySelector(`[data-tab-id=\"${this.value}\"]`) as HTMLElement | null;\n    if (!selected) return;\n    const list = selected.closest('.tab-list') as HTMLElement | null;\n    if (!list) return;\n    const listRect = list.getBoundingClientRect();\n    const tabRect = selected.getBoundingClientRect();\n    this.indicatorLeft = tabRect.left - listRect.left;\n    this.indicatorWidth = tabRect.width;\n  }\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsChange.emit(id);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const active = this.tabs.filter(t => !t.disabled);\n    if (!active.length) return;\n\n    const currentIdx = active.findIndex(t => t.id === this.value);\n\n    let nextIdx: number | null = null;\n    if (e.key === 'ArrowRight') {\n      nextIdx = (currentIdx + 1) % active.length;\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = (currentIdx - 1 + active.length) % active.length;\n    } else if (e.key === 'Home') {\n      nextIdx = 0;\n    } else if (e.key === 'End') {\n      nextIdx = active.length - 1;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = active[nextIdx];\n      this.selectTab(next.id);\n      const btn = this.el.querySelector(`[data-tab-id=\"${next.id}\"]`) as HTMLElement | null;\n      btn?.focus();\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n\n    return (\n      <Host class=\"tab-group-host\">\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map(tab => {\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                disabled={tab.disabled}\n                tabIndex={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'}>\n                  {tab.label}\n                </span>\n              </button>\n            );\n          })}\n          <div\n            class=\"indicator\"\n            style={{ left: `${this.indicatorLeft}px`, width: `${this.indicatorWidth}px` }}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/ds-table.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["tableCss","getCellValue","col","row","accessorKey","accessor","undefined","compareValues","a","b","dir","m","String","localeCompare","Table","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","columns","data","loading","emptyMessage","selectedRows","pageSize","activeSort","sortState","internalSort","visibleCols","filter","c","hide","gridTemplate","map","width","join","sortedData","sort","find","id","columnId","direction","pagedData","pageIndex","start","slice","totalPages","Math","ceil","length","selectedSet","Set","split","Number","n","isNaN","handleSort","dsSort","emit","cur","render","isEmpty","hasPagination","h","Host","key","class","style","gridTemplateColumns","role","isSorted","ariaSort","sortable","align","tabIndex","onClick","onKeyDown","e","preventDefault","minWidth","color","header","Array","from","_","i","gridColumn","margin","rowIndex","isSelected","has","dsRowClick","cell","type","disabled","dsPageChange"],"sources":["src/wc/components/Table/Table.css?tag=ds-table&encapsulation=scoped","src/wc/components/Table/Table.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.table-wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-075);\n}\n\n.table-scroll {\n  overflow-x: auto;\n  width: 100%;\n}\n\n.table {\n  display: grid;\n  width: 100%;\n  min-width: max-content;\n}\n\n/* ─── Header ────────────────────────────────────────────────────────────────── */\n\n.header-row {\n  display: contents;\n}\n\n.header-cell {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  -webkit-user-select: none;\n  user-select: none;\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.header-cell--sortable {\n  cursor: pointer;\n}\n\n.header-cell--sortable:hover {\n  background-color: var(--color-background-translucent);\n}\n\n.header-cell--sortable:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: calc(var(--dimension-space-025) * -1);\n}\n\n.sort-indicator {\n  font-size: 12px;\n  color: var(--color-foreground-secondary);\n}\n\n/* ─── Rows ──────────────────────────────────────────────────────────────────── */\n\n.row {\n  display: contents;\n}\n\n.row--clickable {\n  cursor: pointer;\n}\n\n.row:hover .cell {\n  background-color: var(--color-interaction-hover);\n}\n\n.row--selected .cell {\n  background-color: var(--color-background-faint-brand);\n}\n\n.row--clickable:focus-visible .cell {\n  background-color: var(--color-interaction-hover);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);\n}\n\n/* ─── Cells ─────────────────────────────────────────────────────────────────── */\n\n.cell {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-075) var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  min-height: var(--dimension-size-500);\n  background-color: var(--color-background-primary);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.align-right {\n  justify-content: flex-end;\n  text-align: right;\n}\n\n.align-center {\n  justify-content: center;\n  text-align: center;\n}\n\n.cell-value {\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n/* ─── Empty state ───────────────────────────────────────────────────────────── */\n\n.empty-row {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--dimension-space-400);\n  background-color: var(--color-background-primary);\n}\n\n/* ─── Loading skeleton ──────────────────────────────────────────────────────── */\n\n.skeleton {\n  height: 14px;\n  width: 60%;\n  background-color: var(--color-background-translucent);\n  border-radius: var(--dimension-radius-050);\n  animation: shimmer 1.5s infinite;\n}\n\n@keyframes shimmer {\n  0%   { opacity: 0.5; }\n  50%  { opacity: 1; }\n  100% { opacity: 0.5; }\n}\n\n/* ─── Pagination ────────────────────────────────────────────────────────────── */\n\n.table-pagination {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  background-color: var(--color-background-primary);\n}\n\n.page-button {\n  display: flex;\n  align-items: center;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.page-button:hover:not(:disabled) {\n  background-color: var(--color-interaction-hover);\n}\n\n.page-button:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.page-button:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-stroke-width-015);\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type SortDirection = 'asc' | 'desc';\n\nexport interface SortState {\n  columnId: string;\n  direction: SortDirection;\n}\n\nexport interface TableColumn<T = unknown> {\n  id: string;\n  header: string;\n  accessorKey?: string;\n  accessor?: (row: T) => unknown;\n  sortable?: boolean;\n  align?: 'left' | 'right' | 'center';\n  width?: string | number;\n  minWidth?: string | number;\n  hide?: boolean;\n}\n\nfunction getCellValue<T>(col: TableColumn<T>, row: T): unknown {\n  if (col.accessorKey) return (row as Record<string, unknown>)[col.accessorKey];\n  if (col.accessor) return col.accessor(row);\n  return undefined;\n}\n\nfunction compareValues(a: unknown, b: unknown, dir: SortDirection): number {\n  const m = dir === 'asc' ? 1 : -1;\n  if (a == null && b == null) return 0;\n  if (a == null) return m;\n  if (b == null) return -m;\n  if (typeof a === 'number' && typeof b === 'number') return (a - b) * m;\n  return String(a).localeCompare(String(b)) * m;\n}\n\n@Component({\n  tag: 'ds-table',\n  styleUrl: 'Table.css',\n  scoped: true,\n})\nexport class Table {\n  @Prop() columns: TableColumn[] = [];\n  @Prop() data: unknown[] = [];\n  @Prop() sortState: SortState | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() emptyMessage: string = 'No results found.';\n  /** Comma-separated zero-based row indices that are selected. */\n  @Prop() selectedRows: string = '';\n  /** Page index (0-based). Enables built-in pagination when set alongside pageSize. */\n  @Prop({ mutable: true }) pageIndex: number | undefined;\n  @Prop() pageSize: number = 20;\n\n  @State() private internalSort: SortState | undefined;\n\n  @Event() dsSort!: EventEmitter<{ columnId: string }>;\n  @Event() dsRowClick!: EventEmitter<{ row: unknown; rowIndex: number }>;\n  @Event() dsPageChange!: EventEmitter<{ pageIndex: number }>;\n\n  private get activeSort(): SortState | undefined {\n    return this.sortState ?? this.internalSort;\n  }\n\n  private get visibleCols(): TableColumn[] {\n    return this.columns.filter(c => !c.hide);\n  }\n\n  private get gridTemplate(): string {\n    return this.visibleCols.map(col => {\n      if (col.width) return typeof col.width === 'number' ? `${col.width}px` : col.width;\n      return 'minmax(120px, 1fr)';\n    }).join(' ');\n  }\n\n  private get sortedData(): unknown[] {\n    const sort = this.activeSort;\n    if (!sort) return this.data;\n    const col = this.columns.find(c => c.id === sort.columnId);\n    if (!col) return this.data;\n    return [...this.data].sort((a, b) =>\n      compareValues(getCellValue(col, a), getCellValue(col, b), sort.direction)\n    );\n  }\n\n  private get pagedData(): unknown[] {\n    if (this.pageIndex === undefined) return this.sortedData;\n    const start = this.pageIndex * this.pageSize;\n    return this.sortedData.slice(start, start + this.pageSize);\n  }\n\n  private get totalPages(): number {\n    if (this.pageIndex === undefined) return 1;\n    return Math.ceil(this.sortedData.length / this.pageSize);\n  }\n\n  private get selectedSet(): Set<number> {\n    if (!this.selectedRows) return new Set();\n    return new Set(this.selectedRows.split(',').map(Number).filter(n => !isNaN(n)));\n  }\n\n  private handleSort(columnId: string) {\n    this.dsSort.emit({ columnId });\n    // Toggle internal sort if consumer hasn't provided sortState\n    if (!this.sortState) {\n      const cur = this.internalSort;\n      this.internalSort = cur?.columnId === columnId\n        ? { columnId, direction: cur.direction === 'asc' ? 'desc' : 'asc' }\n        : { columnId, direction: 'asc' };\n    }\n  }\n\n  render() {\n    const { visibleCols, pagedData, totalPages, loading } = this;\n    const isEmpty = !loading && pagedData.length === 0;\n    const selectedSet = this.selectedSet;\n    const sort = this.activeSort;\n    const hasPagination = this.pageIndex !== undefined && totalPages > 1;\n\n    return (\n      <Host>\n        <div class=\"table-wrapper\" aria-busy={loading || undefined}>\n          <div class=\"table-scroll\">\n            <div class=\"table\" style={{ gridTemplateColumns: this.gridTemplate }} role=\"table\">\n\n              {/* Header row */}\n              <div class=\"header-row\" role=\"row\">\n                {visibleCols.map(col => {\n                  const isSorted = sort?.columnId === col.id;\n                  const ariaSort = col.sortable\n                    ? (isSorted ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none')\n                    : undefined;\n                  return (\n                    <div\n                      key={col.id}\n                      class={{\n                        'header-cell': true,\n                        'header-cell--sortable': !!col.sortable,\n                        'align-right': col.align === 'right',\n                        'align-center': col.align === 'center',\n                      }}\n                      role=\"columnheader\"\n                      aria-sort={ariaSort}\n                      tabIndex={col.sortable ? 0 : undefined}\n                      onClick={() => col.sortable && this.handleSort(col.id)}\n                      onKeyDown={(e: KeyboardEvent) => {\n                        if (col.sortable && (e.key === 'Enter' || e.key === ' ')) {\n                          e.preventDefault();\n                          this.handleSort(col.id);\n                        }\n                      }}\n                      style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth as string } : undefined}\n                    >\n                      <span class=\"text-body-small-emphasis\" style={{ color: 'var(--color-foreground-secondary)' }}>\n                        {col.header}\n                      </span>\n                      {isSorted && (\n                        <span class=\"sort-indicator\" aria-hidden=\"true\">\n                          {sort.direction === 'asc' ? '↑' : '↓'}\n                        </span>\n                      )}\n                    </div>\n                  );\n                })}\n              </div>\n\n              {/* Loading skeleton */}\n              {loading && Array.from({ length: 5 }).map((_, i) => (\n                <div\n                  key={`sk-${i}`}\n                  class=\"row\"\n                  role={i === 0 ? 'status' : 'row'}\n                  aria-label={i === 0 ? 'Loading' : undefined}\n                >\n                  {visibleCols.map(col => (\n                    <div key={col.id} class=\"cell\" role=\"cell\">\n                      <div class=\"skeleton\" />\n                    </div>\n                  ))}\n                </div>\n              ))}\n\n              {/* Empty state */}\n              {isEmpty && (\n                <div class=\"empty-row\" style={{ gridColumn: '1 / -1' }}>\n                  <p class=\"text-body-medium\" style={{ margin: '0', color: 'var(--color-foreground-secondary)' }}>\n                    {this.emptyMessage}\n                  </p>\n                </div>\n              )}\n\n              {/* Data rows */}\n              {!loading && pagedData.map((row, rowIndex) => {\n                const isSelected = selectedSet.has(rowIndex);\n                return (\n                  <div\n                    key={rowIndex}\n                    class={{\n                      'row': true,\n                      'row--selected': isSelected,\n                      'row--clickable': true,\n                    }}\n                    role=\"row\"\n                    tabIndex={0}\n                    aria-selected={this.selectedRows ? isSelected : undefined}\n                    onClick={() => this.dsRowClick.emit({ row, rowIndex })}\n                    onKeyDown={(e: KeyboardEvent) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault();\n                        this.dsRowClick.emit({ row, rowIndex });\n                      }\n                    }}\n                  >\n                    {visibleCols.map(col => (\n                      <div\n                        key={col.id}\n                        class={{\n                          'cell': true,\n                          'align-right': col.align === 'right',\n                          'align-center': col.align === 'center',\n                        }}\n                        role=\"cell\"\n                      >\n                        <span class=\"text-body-medium cell-value\">\n                          {String(getCellValue(col, row) ?? '')}\n                        </span>\n                      </div>\n                    ))}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Built-in pagination */}\n          {hasPagination && (\n            <div class=\"table-pagination\">\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex === 0}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! - 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <span class=\"text-body-small\">Previous</span>\n              </button>\n              <span class=\"text-body-small\" style={{ color: 'var(--color-foreground-secondary)' }}>\n                Page {this.pageIndex! + 1} of {totalPages}\n              </span>\n              <button\n                type=\"button\"\n                class=\"page-button\"\n                disabled={this.pageIndex! >= totalPages - 1}\n                onClick={() => {\n                  this.pageIndex = this.pageIndex! + 1;\n                  this.dsPageChange.emit({ pageIndex: this.pageIndex });\n                }}\n              >\n                <span class=\"text-body-small\">Next</span>\n              </button>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/ds-tag.js

@@ -0,0 +1,2 @@
+import{p as o,H as t,c as a,h as r,a as n,t as e}from"./index.js";const s=()=>`.sc-ds-tag-h{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-050);box-sizing:border-box;color:var(--color-foreground-primary);position:relative;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.tag--size-md.sc-ds-tag-h{height:calc(var(--dimension-size-base) * 7 / 2);padding:0 var(--dimension-space-075);gap:0}.tag--size-sm.sc-ds-tag-h{height:var(--dimension-size-250);padding:0 var(--dimension-space-050);gap:0}.tag--size-xs.sc-ds-tag-h{height:var(--dimension-size-150);padding:0 var(--dimension-space-012);gap:0}.tag--rounded.sc-ds-tag-h{border-radius:var(--dimension-radius-half)}.tag--rounded.tag--size-md.sc-ds-tag-h{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.tag--rounded.tag--size-sm.sc-ds-tag-h{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-050) + var(--dimension-space-050))}.tag--rounded.tag--size-xs.sc-ds-tag-h{padding-left:calc(var(--dimension-space-012) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-012) + var(--dimension-space-050))}.tag--on-medium.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.tag--on-bold.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed)}.tag--on-strong.sc-ds-tag-h{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed)}.tag--on-always-dark.sc-ds-tag-h{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed)}.tag--elevation-flat.sc-ds-tag-h{background-color:transparent !important;box-shadow:inset 0 0 0 var(--dimension-stroke-width-015) currentColor}.tag--elevation-elevated.sc-ds-tag-h{box-shadow:var(--effect-elevation-elevated-sm)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{color:var(--color-foreground-bold-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{color:var(--color-foreground-strong-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{color:var(--color-foreground-medium-positive)}.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-neutral)}.tag--elevation-flat.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-brand)}.tag--elevation-flat.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-ai)}.tag--elevation-flat.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-negative)}.tag--elevation-flat.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-warning)}.tag--elevation-flat.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-caution)}.tag--elevation-flat.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{color:var(--color-foreground-faint-positive)}.tag--intent-neutral.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-neutral);color:var(--color-foreground-medium-neutral)}.tag--intent-brand.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-brand);color:var(--color-foreground-medium-brand)}.tag--intent-ai.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-ai);color:var(--color-foreground-medium-ai)}.tag--intent-negative.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-negative);color:var(--color-foreground-medium-negative)}.tag--intent-warning.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-warning);color:var(--color-foreground-medium-warning)}.tag--intent-caution.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-caution);color:var(--color-foreground-medium-caution)}.tag--intent-positive.tag--contrast-strong.sc-ds-tag-h{background-color:var(--color-background-strong-positive);color:var(--color-foreground-medium-positive)}.tag--intent-neutral.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-neutral);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-brand.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-ai.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-ai);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-negative.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-negative);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-warning.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-warning);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-caution.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-caution);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-positive.tag--contrast-bold.sc-ds-tag-h{background-color:var(--color-background-bold-positive);color:var(--color-foreground-on-bold-background-primary)}.tag--intent-neutral.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-neutral);color:var(--color-foreground-strong-neutral)}.tag--intent-brand.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-brand);color:var(--color-foreground-strong-brand)}.tag--intent-ai.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-ai);color:var(--color-foreground-strong-ai)}.tag--intent-negative.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-negative);color:var(--color-foreground-strong-negative)}.tag--intent-warning.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-warning);color:var(--color-foreground-strong-warning)}.tag--intent-caution.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-caution);color:var(--color-foreground-strong-caution)}.tag--intent-positive.tag--contrast-medium.sc-ds-tag-h{background-color:var(--color-background-medium-positive);color:var(--color-foreground-strong-positive)}.tag--intent-neutral.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-neutral);color:var(--color-foreground-bold-neutral)}.tag--intent-brand.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.tag--intent-ai.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-ai);color:var(--color-foreground-bold-ai)}.tag--intent-negative.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-negative);color:var(--color-foreground-bold-negative)}.tag--intent-warning.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-warning);color:var(--color-foreground-bold-warning)}.tag--intent-caution.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-caution);color:var(--color-foreground-bold-caution)}.tag--intent-positive.tag--contrast-faint.sc-ds-tag-h{background-color:var(--color-background-faint-positive);color:var(--color-foreground-bold-positive)}.tag--interactive.sc-ds-tag-h{cursor:pointer;user-select:none;outline:none}.tag--interactive.sc-ds-tag-h:hover{background-color:var(--_hover-bg)}.tag--interactive.sc-ds-tag-h:active{background-color:var(--_pressed-bg)}.tag--interactive.sc-ds-tag-h:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tag--pressed.sc-ds-tag-h{background-color:var(--color-background-faint-brand) !important;color:var(--color-foreground-bold-brand) !important}.tag__label.sc-ds-tag{line-height:0;padding:0 var(--dimension-space-050);white-space:nowrap;flex-shrink:0}.tag--size-sm.sc-ds-tag-h .tag__label.sc-ds-tag,.tag--size-xs.sc-ds-tag-h .tag__label.sc-ds-tag{padding:0 var(--dimension-space-025)}.tag__icon-slot.sc-ds-tag{display:contents}.tag--removable.sc-ds-tag-h{gap:var(--dimension-space-025)}.tag--size-xs.tag--removable.sc-ds-tag-h{gap:0}.tag__remove.sc-ds-tag{padding:0;margin:0;border:none;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:inherit;flex-shrink:0;position:relative;border-radius:var(--dimension-radius-050)}.tag__remove.sc-ds-tag::before{content:'';position:absolute;inset:-2px;border-radius:var(--dimension-radius-025);background-color:transparent;transition:var(--effect-transition-interaction-background-short-2);pointer-events:none}.tag__remove.sc-ds-tag:hover::before{background-color:var(--color-interaction-hover)}.tag__remove.sc-ds-tag:active::before{background-color:var(--color-interaction-pressed)}.tag--size-sm.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:-1px;border-radius:3px}.tag--size-xs.sc-ds-tag-h .tag__remove.sc-ds-tag::before{inset:0;border-radius:var(--dimension-radius-050)}.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag,.tag--rounded.sc-ds-tag-h .tag__remove.sc-ds-tag::before{border-radius:var(--dimension-radius-half)}.tag__remove-x.sc-ds-tag{display:inline-flex;line-height:0;font-size:inherit}.tag--inactive.sc-ds-tag-h{opacity:0.5;pointer-events:none;cursor:not-allowed}`;const i={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:20,sm:16,xs:12};const g=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsRemove=a(this,"dsRemove");this.dsClick=a(this,"dsClick");this.dsPressedChange=a(this,"dsPressedChange");this.intent="neutral";this.contrast="faint";this.elevation="none";this.size="md";this.rounded=false;this.removable=false;this.inactive=false;this.pressed=false;this.interactive=false;this.handleClick=()=>{if(this.inactive)return;this.pressed=!this.pressed;this.dsPressedChange.emit(this.pressed);this.dsClick.emit()};this.handleKeyDown=o=>{if(this.inactive)return;if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleClick()}};this.handleRemove=o=>{o.stopPropagation();this.dsRemove.emit()}}render(){const o=this.size.toUpperCase();const t=i[this.size];const a=c[this.size];const e=this.maxWidth!=null?{maxWidth:typeof this.maxWidth==="number"?`${this.maxWidth}px`:this.maxWidth}:undefined;const s={tag:true,[`tag--intent-${this.intent}`]:true,[`tag--contrast-${this.contrast}`]:true,[`tag--elevation-${this.elevation}`]:true,[`tag--size-${this.size}`]:true,"tag--rounded":this.rounded,"tag--rounded-no-icon-left":this.rounded,"tag--rounded-no-remove-right":this.rounded&&!this.removable,[`tag--icon-left-${o}`]:false,[`tag--icon-right-${o}`]:this.removable,"tag--removable":this.removable,"tag--interactive":this.interactive,"tag--inactive":this.inactive,"tag--pressed":this.pressed,"tag--on-medium":this.background==="medium","tag--on-bold":this.background==="bold","tag--on-strong":this.background==="strong","tag--on-always-dark":this.background==="always-dark"};return r(n,{key:"64f39194e898baa3bb228c395d849ae3d874d800",class:s,style:e,onClick:this.interactive?this.handleClick:undefined,onKeyDown:this.interactive?this.handleKeyDown:undefined,role:this.interactive?"button":undefined,tabIndex:this.interactive?this.inactive?-1:0:undefined,"aria-pressed":this.interactive&&this.pressed!==undefined?String(this.pressed):undefined,"aria-disabled":this.inactive||undefined},r("span",{key:"ed216b04f9dd7055094697ea9cd426dd209bed00",class:"tag__icon-slot",style:{fontSize:`${a}px`,lineHeight:"0"}},r("slot",{key:"0ce5b94bdd8bf3d9afdb2944f9d38e5ae0eeed48",name:"icon"})),r("span",{key:"b36e36b559637e8b913c4b69f378e76c253334f7",class:{tag__label:true,[t]:true}},this.label),this.removable&&r("button",{key:"3c4f2b997163c832891fd09458fa6a72e5f09a43",type:"button",class:"tag__remove",onClick:this.handleRemove,"aria-label":`Remove ${this.label}`,tabIndex:-1},r("slot",{key:"fb2c30368d699d94bc22a27a6cd31e0f7f2a3865",name:"remove-icon"},r("span",{key:"f8c7926dfd1e7856e4825342d9d591a137280c19",class:"tag__remove-x",style:{fontSize:`${a}px`,lineHeight:"0"}},"✕"))))}static get style(){return s()}},[262,"ds-tag",{label:[1],intent:[1],contrast:[1],elevation:[1],size:[1],rounded:[4],removable:[4],maxWidth:[8,"max-width"],inactive:[4],background:[1],pressed:[1028],interactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-tag"];o.forEach((o=>{switch(o){case"ds-tag":if(!customElements.get(e(o))){customElements.define(e(o),g)}break}}))}d();const l=g;const u=d;export{l as DsTag,u as defineCustomElement};
+//# sourceMappingURL=ds-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tagCss","TEXT_VARIANT","md","sm","xs","ICON_SIZE","Tag","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","elevation","size","rounded","removable","inactive","pressed","interactive","handleClick","dsPressedChange","emit","dsClick","handleKeyDown","e","key","preventDefault","handleRemove","stopPropagation","dsRemove","render","sz","toUpperCase","textVariant","iconSize","maxWidthStyle","maxWidth","undefined","hostCls","tag","background","h","Host","class","style","onClick","onKeyDown","role","tabIndex","String","fontSize","lineHeight","name","tag__label","label","type"],"sources":["src/wc/components/Tag/Tag.css?tag=ds-tag&encapsulation=scoped","src/wc/components/Tag/Tag.tsx"],"sourcesContent":["/* ==========================================================================\n   ds-tag\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-050);\n  box-sizing: border-box;\n  color: var(--color-foreground-primary);\n  position: relative;\n\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n}\n\n/* ── Sizes ──────────────────────────────────────────────────────────────── */\n\n:host(.tag--size-md) { height: calc(var(--dimension-size-base) * 7 / 2); padding: 0 var(--dimension-space-075); gap: 0; }\n:host(.tag--size-sm) { height: var(--dimension-size-250);                 padding: 0 var(--dimension-space-050); gap: 0; }\n:host(.tag--size-xs) { height: var(--dimension-size-150);                 padding: 0 var(--dimension-space-012); gap: 0; }\n\n/* ── Rounded ────────────────────────────────────────────────────────────── */\n\n:host(.tag--rounded) { border-radius: var(--dimension-radius-half); }\n\n/* Pill padding correction — add space-050 on bare sides */\n:host(.tag--rounded.tag--size-md) { padding-left:  calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n:host(.tag--rounded.tag--size-sm) { padding-left:  calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-050) + var(--dimension-space-050)); }\n:host(.tag--rounded.tag--size-xs) { padding-left:  calc(var(--dimension-space-012) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-012) + var(--dimension-space-050)); }\n\n/* ── Background context ─────────────────────────────────────────────────── */\n\n:host(.tag--on-medium)      { --_hover-bg: var(--color-interaction-on-medium-background-hover);      --_pressed-bg: var(--color-interaction-on-medium-background-pressed); }\n:host(.tag--on-bold)        { --_hover-bg: var(--color-interaction-on-bold-background-hover);        --_pressed-bg: var(--color-interaction-on-bold-background-pressed); }\n:host(.tag--on-strong)      { --_hover-bg: var(--color-interaction-on-strong-background-hover);      --_pressed-bg: var(--color-interaction-on-strong-background-pressed); }\n:host(.tag--on-always-dark) { --_hover-bg: var(--color-always-dark-interaction-hover);               --_pressed-bg: var(--color-always-dark-interaction-pressed); }\n\n/* ── Elevation ──────────────────────────────────────────────────────────── */\n\n:host(.tag--elevation-flat) {\n  background-color: transparent !important;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-015) currentColor;\n}\n\n:host(.tag--elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n\n/* Flat foreground — bold */\n:host(.tag--elevation-flat.tag--intent-neutral.tag--contrast-bold)   { color: var(--color-foreground-bold-neutral);   }\n:host(.tag--elevation-flat.tag--intent-brand.tag--contrast-bold)     { color: var(--color-foreground-bold-brand);     }\n:host(.tag--elevation-flat.tag--intent-ai.tag--contrast-bold)        { color: var(--color-foreground-bold-ai);        }\n:host(.tag--elevation-flat.tag--intent-negative.tag--contrast-bold)  { color: var(--color-foreground-bold-negative);  }\n:host(.tag--elevation-flat.tag--intent-warning.tag--contrast-bold)   { color: var(--color-foreground-bold-warning);   }\n:host(.tag--elevation-flat.tag--intent-caution.tag--contrast-bold)   { color: var(--color-foreground-bold-caution);   }\n:host(.tag--elevation-flat.tag--intent-positive.tag--contrast-bold)  { color: var(--color-foreground-bold-positive);  }\n\n/* Flat foreground — strong */\n:host(.tag--elevation-flat.tag--intent-neutral.tag--contrast-strong)   { color: var(--color-foreground-strong-neutral);   }\n:host(.tag--elevation-flat.tag--intent-brand.tag--contrast-strong)     { color: var(--color-foreground-strong-brand);     }\n:host(.tag--elevation-flat.tag--intent-ai.tag--contrast-strong)        { color: var(--color-foreground-strong-ai);        }\n:host(.tag--elevation-flat.tag--intent-negative.tag--contrast-strong)  { color: var(--color-foreground-strong-negative);  }\n:host(.tag--elevation-flat.tag--intent-warning.tag--contrast-strong)   { color: var(--color-foreground-strong-warning);   }\n:host(.tag--elevation-flat.tag--intent-caution.tag--contrast-strong)   { color: var(--color-foreground-strong-caution);   }\n:host(.tag--elevation-flat.tag--intent-positive.tag--contrast-strong)  { color: var(--color-foreground-strong-positive);  }\n\n/* Flat foreground — medium */\n:host(.tag--elevation-flat.tag--intent-neutral.tag--contrast-medium)   { color: var(--color-foreground-medium-neutral);   }\n:host(.tag--elevation-flat.tag--intent-brand.tag--contrast-medium)     { color: var(--color-foreground-medium-brand);     }\n:host(.tag--elevation-flat.tag--intent-ai.tag--contrast-medium)        { color: var(--color-foreground-medium-ai);        }\n:host(.tag--elevation-flat.tag--intent-negative.tag--contrast-medium)  { color: var(--color-foreground-medium-negative);  }\n:host(.tag--elevation-flat.tag--intent-warning.tag--contrast-medium)   { color: var(--color-foreground-medium-warning);   }\n:host(.tag--elevation-flat.tag--intent-caution.tag--contrast-medium)   { color: var(--color-foreground-medium-caution);   }\n:host(.tag--elevation-flat.tag--intent-positive.tag--contrast-medium)  { color: var(--color-foreground-medium-positive);  }\n\n/* Flat foreground — faint */\n:host(.tag--elevation-flat.tag--intent-neutral.tag--contrast-faint)   { color: var(--color-foreground-faint-neutral);   }\n:host(.tag--elevation-flat.tag--intent-brand.tag--contrast-faint)     { color: var(--color-foreground-faint-brand);     }\n:host(.tag--elevation-flat.tag--intent-ai.tag--contrast-faint)        { color: var(--color-foreground-faint-ai);        }\n:host(.tag--elevation-flat.tag--intent-negative.tag--contrast-faint)  { color: var(--color-foreground-faint-negative);  }\n:host(.tag--elevation-flat.tag--intent-warning.tag--contrast-faint)   { color: var(--color-foreground-faint-warning);   }\n:host(.tag--elevation-flat.tag--intent-caution.tag--contrast-faint)   { color: var(--color-foreground-faint-caution);   }\n:host(.tag--elevation-flat.tag--intent-positive.tag--contrast-faint)  { color: var(--color-foreground-faint-positive);  }\n\n/* ── Intent × Contrast — strong ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-strong)  { background-color: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral);  }\n:host(.tag--intent-brand.tag--contrast-strong)    { background-color: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand);    }\n:host(.tag--intent-ai.tag--contrast-strong)       { background-color: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai);       }\n:host(.tag--intent-negative.tag--contrast-strong) { background-color: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n:host(.tag--intent-warning.tag--contrast-strong)  { background-color: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning);  }\n:host(.tag--intent-caution.tag--contrast-strong)  { background-color: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution);  }\n:host(.tag--intent-positive.tag--contrast-strong) { background-color: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n\n/* ── Intent × Contrast — bold ───────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-bold)  { background-color: var(--color-background-bold-neutral);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-brand.tag--contrast-bold)    { background-color: var(--color-background-bold-brand);    color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-ai.tag--contrast-bold)       { background-color: var(--color-background-bold-ai);       color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-negative.tag--contrast-bold) { background-color: var(--color-background-bold-negative); color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-warning.tag--contrast-bold)  { background-color: var(--color-background-bold-warning);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-caution.tag--contrast-bold)  { background-color: var(--color-background-bold-caution);  color: var(--color-foreground-on-bold-background-primary); }\n:host(.tag--intent-positive.tag--contrast-bold) { background-color: var(--color-background-bold-positive); color: var(--color-foreground-on-bold-background-primary); }\n\n/* ── Intent × Contrast — medium ─────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-medium)  { background-color: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral);  }\n:host(.tag--intent-brand.tag--contrast-medium)    { background-color: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand);    }\n:host(.tag--intent-ai.tag--contrast-medium)       { background-color: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai);       }\n:host(.tag--intent-negative.tag--contrast-medium) { background-color: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n:host(.tag--intent-warning.tag--contrast-medium)  { background-color: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning);  }\n:host(.tag--intent-caution.tag--contrast-medium)  { background-color: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution);  }\n:host(.tag--intent-positive.tag--contrast-medium) { background-color: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n\n/* ── Intent × Contrast — faint ──────────────────────────────────────────── */\n\n:host(.tag--intent-neutral.tag--contrast-faint)  { background-color: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral);  }\n:host(.tag--intent-brand.tag--contrast-faint)    { background-color: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand);    }\n:host(.tag--intent-ai.tag--contrast-faint)       { background-color: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai);       }\n:host(.tag--intent-negative.tag--contrast-faint) { background-color: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n:host(.tag--intent-warning.tag--contrast-faint)  { background-color: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning);  }\n:host(.tag--intent-caution.tag--contrast-faint)  { background-color: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution);  }\n:host(.tag--intent-positive.tag--contrast-faint) { background-color: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n\n/* ── Interactive ────────────────────────────────────────────────────────── */\n\n:host(.tag--interactive) {\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n}\n\n:host(.tag--interactive:hover)  { background-color: var(--_hover-bg); }\n:host(.tag--interactive:active) { background-color: var(--_pressed-bg); }\n\n:host(.tag--interactive:focus-visible) {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n/* ── Pressed ────────────────────────────────────────────────────────────── */\n\n:host(.tag--pressed) {\n  background-color: var(--color-background-faint-brand) !important;\n  color: var(--color-foreground-bold-brand) !important;\n}\n\n/* ── Label ──────────────────────────────────────────────────────────────── */\n\n.tag__label {\n  line-height: 0;\n  padding: 0 var(--dimension-space-050);\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n:host(.tag--size-sm) .tag__label,\n:host(.tag--size-xs) .tag__label {\n  padding: 0 var(--dimension-space-025);\n}\n\n/* ── Icon slot ──────────────────────────────────────────────────────────── */\n\n.tag__icon-slot {\n  display: contents;\n}\n\n/* ── Remove button ──────────────────────────────────────────────────────── */\n\n:host(.tag--removable) { gap: var(--dimension-space-025); }\n:host(.tag--size-xs.tag--removable) { gap: 0; }\n\n.tag__remove {\n  padding: 0;\n  margin: 0;\n  border: none;\n  background: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  color: inherit;\n  flex-shrink: 0;\n  position: relative;\n  border-radius: var(--dimension-radius-050);\n}\n\n.tag__remove::before {\n  content: '';\n  position: absolute;\n  inset: -2px;\n  border-radius: var(--dimension-radius-025);\n  background-color: transparent;\n  transition: var(--effect-transition-interaction-background-short-2);\n  pointer-events: none;\n}\n\n.tag__remove:hover::before  { background-color: var(--color-interaction-hover); }\n.tag__remove:active::before { background-color: var(--color-interaction-pressed); }\n\n:host(.tag--size-sm) .tag__remove::before { inset: -1px; border-radius: 3px; }\n:host(.tag--size-xs) .tag__remove::before { inset: 0; border-radius: var(--dimension-radius-050); }\n\n:host(.tag--rounded) .tag__remove,\n:host(.tag--rounded) .tag__remove::before { border-radius: var(--dimension-radius-half); }\n\n.tag__remove-x {\n  display: inline-flex;\n  line-height: 0;\n  font-size: inherit;\n}\n\n/* ── Inactive ───────────────────────────────────────────────────────────── */\n\n:host(.tag--inactive) { opacity: 0.5; pointer-events: none; cursor: not-allowed; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type TagIntent     = 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type TagContrast   = 'strong' | 'bold' | 'medium' | 'faint';\nexport type TagElevation  = 'none' | 'flat' | 'elevated';\nexport type TagSize       = 'md' | 'sm' | 'xs';\nexport type TagBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst TEXT_VARIANT: Record<TagSize, string> = {\n  md: 'text-body-medium',\n  sm: 'text-body-small',\n  xs: 'text-caption',\n};\n\nconst ICON_SIZE: Record<TagSize, number> = { md: 20, sm: 16, xs: 12 };\n\n@Component({\n  tag: 'ds-tag',\n  styleUrl: 'Tag.css',\n  scoped: true,\n})\nexport class Tag {\n  @Prop() label!: string;\n  @Prop() intent: TagIntent = 'neutral';\n  @Prop() contrast: TagContrast = 'faint';\n  @Prop() elevation: TagElevation = 'none';\n  @Prop() size: TagSize = 'md';\n  @Prop() rounded: boolean = false;\n  @Prop() removable: boolean = false;\n  @Prop() maxWidth: string | number | undefined;\n  @Prop() inactive: boolean = false;\n  @Prop() background: TagBackground | undefined;\n  @Prop({ mutable: true }) pressed: boolean = false;\n  /** Whether the tag has a click/toggle behavior. */\n  @Prop() interactive: boolean = false;\n\n  /** Fired when the remove button is clicked. */\n  @Event() dsRemove!: EventEmitter<void>;\n  /** Fired when an interactive tag is clicked. */\n  @Event() dsClick!: EventEmitter<void>;\n  /** Fired when the pressed state toggles. */\n  @Event() dsPressedChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.pressed = !this.pressed;\n    this.dsPressedChange.emit(this.pressed);\n    this.dsClick.emit();\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (this.inactive) return;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleRemove = (e: MouseEvent) => {\n    e.stopPropagation();\n    this.dsRemove.emit();\n  };\n\n  render() {\n    const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);\n    const sz = this.size.toUpperCase() as 'MD' | 'SM' | 'XS';\n    const hasIconSlot = true; // always render slot, consumer decides whether to fill it\n    const textVariant = TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const maxWidthStyle = this.maxWidth != null\n      ? { maxWidth: typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth }\n      : undefined;\n\n    const hostCls: Record<string, boolean> = {\n      'tag': true,\n      [`tag--intent-${this.intent}`]: true,\n      [`tag--contrast-${this.contrast}`]: true,\n      [`tag--elevation-${this.elevation}`]: true,\n      [`tag--size-${this.size}`]: true,\n      'tag--rounded': this.rounded,\n      'tag--rounded-no-icon-left': this.rounded, // consumer overrides via slot presence hack\n      'tag--rounded-no-remove-right': this.rounded && !this.removable,\n      [`tag--icon-left-${sz}`]: false, // toggled by slotchange\n      [`tag--icon-right-${sz}`]: this.removable,\n      'tag--removable': this.removable,\n      'tag--interactive': this.interactive,\n      'tag--inactive': this.inactive,\n      'tag--pressed': this.pressed,\n      'tag--on-medium':      this.background === 'medium',\n      'tag--on-bold':        this.background === 'bold',\n      'tag--on-strong':      this.background === 'strong',\n      'tag--on-always-dark': this.background === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={hostCls}\n        style={maxWidthStyle}\n        onClick={this.interactive ? this.handleClick : undefined}\n        onKeyDown={this.interactive ? this.handleKeyDown : undefined}\n        role={this.interactive ? 'button' : undefined}\n        tabIndex={this.interactive ? (this.inactive ? -1 : 0) : undefined}\n        aria-pressed={this.interactive && this.pressed !== undefined ? String(this.pressed) : undefined}\n        aria-disabled={this.inactive || undefined}\n      >\n        {/* Leading icon slot — consumer provides an icon element */}\n        <span class=\"tag__icon-slot\" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>\n          <slot name=\"icon\" />\n        </span>\n        {/* Label */}\n        <span class={{ 'tag__label': true, [textVariant]: true }}>\n          {this.label}\n        </span>\n        {/* Remove button */}\n        {this.removable && (\n          <button\n            type=\"button\"\n            class=\"tag__remove\"\n            onClick={this.handleRemove}\n            aria-label={`Remove ${this.label}`}\n            tabIndex={-1}\n          >\n            {/* Remove icon slot — defaults to × glyph */}\n            <slot name=\"remove-icon\">\n              <span class=\"tag__remove-x\" style={{ fontSize: `${iconSize}px`, lineHeight: '0' }}>\n                ✕\n              </span>\n            </slot>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAS,IAAM,m7WCQrB,MAAMC,EAAwC,CAC5CC,GAAI,mBACJC,GAAI,kBACJC,GAAI,gBAGN,MAAMC,EAAqC,CAAEH,GAAI,GAAIC,GAAI,GAAIC,GAAI,I,MAOpDE,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,2JAOUC,KAAAC,OAAoB,UACpBD,KAAAE,SAAwB,QACxBF,KAAAG,UAA0B,OAC1BH,KAAAI,KAAgB,KAChBJ,KAAAK,QAAmB,MACnBL,KAAAM,UAAqB,MAErBN,KAAAO,SAAoB,MAEHP,KAAAQ,QAAmB,MAEpCR,KAAAS,YAAuB,MASvBT,KAAAU,YAAc,KACpB,GAAIV,KAAKO,SAAU,OACnBP,KAAKQ,SAAWR,KAAKQ,QACrBR,KAAKW,gBAAgBC,KAAKZ,KAAKQ,SAC/BR,KAAKa,QAAQD,MAAM,EAGbZ,KAAAc,cAAiBC,IACvB,GAAIf,KAAKO,SAAU,OACnB,GAAIQ,EAAEC,MAAQ,SAAWD,EAAEC,MAAQ,IAAK,CACtCD,EAAEE,iBACFjB,KAAKU,a,GAIDV,KAAAkB,aAAgBH,IACtBA,EAAEI,kBACFnB,KAAKoB,SAASR,MAAM,CA0EvB,CAvEC,MAAAS,GAEE,MAAMC,EAAKtB,KAAKI,KAAKmB,cAErB,MAAMC,EAAclC,EAAaU,KAAKI,MACtC,MAAMqB,EAAW/B,EAAUM,KAAKI,MAEhC,MAAMsB,EAAgB1B,KAAK2B,UAAY,KACnC,CAAEA,gBAAiB3B,KAAK2B,WAAa,SAAW,GAAG3B,KAAK2B,aAAe3B,KAAK2B,UAC5EC,UAEJ,MAAMC,EAAmC,CACvCC,IAAO,KACP,CAAC,eAAe9B,KAAKC,UAAW,KAChC,CAAC,iBAAiBD,KAAKE,YAAa,KACpC,CAAC,kBAAkBF,KAAKG,aAAc,KACtC,CAAC,aAAaH,KAAKI,QAAS,KAC5B,eAAgBJ,KAAKK,QACrB,4BAA6BL,KAAKK,QAClC,+BAAgCL,KAAKK,UAAYL,KAAKM,UACtD,CAAC,kBAAkBgB,KAAO,MAC1B,CAAC,mBAAmBA,KAAOtB,KAAKM,UAChC,iBAAkBN,KAAKM,UACvB,mBAAoBN,KAAKS,YACzB,gBAAiBT,KAAKO,SACtB,eAAgBP,KAAKQ,QACrB,iBAAuBR,KAAK+B,aAAe,SAC3C,eAAuB/B,KAAK+B,aAAe,OAC3C,iBAAuB/B,KAAK+B,aAAe,SAC3C,sBAAuB/B,KAAK+B,aAAe,eAG7C,OACEC,EAACC,EAAI,CAAAjB,IAAA,2CACHkB,MAAOL,EACPM,MAAOT,EACPU,QAASpC,KAAKS,YAAcT,KAAKU,YAAckB,UAC/CS,UAAWrC,KAAKS,YAAcT,KAAKc,cAAgBc,UACnDU,KAAMtC,KAAKS,YAAc,SAAWmB,UACpCW,SAAUvC,KAAKS,YAAeT,KAAKO,UAAW,EAAK,EAAKqB,UAAS,eACnD5B,KAAKS,aAAeT,KAAKQ,UAAYoB,UAAYY,OAAOxC,KAAKQ,SAAWoB,UAAS,gBAChF5B,KAAKO,UAAYqB,WAGhCI,EAAA,QAAAhB,IAAA,2CAAMkB,MAAM,iBAAiBC,MAAO,CAAEM,SAAU,GAAGhB,MAAciB,WAAY,MAC3EV,EAAA,QAAAhB,IAAA,2CAAM2B,KAAK,UAGbX,EAAA,QAAAhB,IAAA,2CAAMkB,MAAO,CAAEU,WAAc,KAAMpB,CAACA,GAAc,OAC/CxB,KAAK6C,OAGP7C,KAAKM,WACJ0B,EAAA,UAAAhB,IAAA,2CACE8B,KAAK,SACLZ,MAAM,cACNE,QAASpC,KAAKkB,aAAY,aACd,UAAUlB,KAAK6C,QAC3BN,UAAU,GAGVP,EAAA,QAAAhB,IAAA,2CAAM2B,KAAK,eACTX,EAAA,QAAAhB,IAAA,2CAAMkB,MAAM,gBAAgBC,MAAO,CAAEM,SAAU,GAAGhB,MAAciB,WAAY,MAAK,O","ignoreList":[]}

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

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

package/dist/components/ds-text.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const n=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const i=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const n=this.color&&e(this.color)?{color:this.color}:undefined;const i={};if(this.as==="label"&&this.for)i["for"]=this.for;return o(r,{key:"4d0cea128d370edd9b7bee43b96f458a78f1d5c5",style:{display:"contents"}},o(t,{key:"c37493563d175999b6e9648ded0a7ac4ed10fc30",class:s,style:n,...i},o("slot",{key:"ee23813da6b2d08de59dc97730cf14a843e2573d"})))}static get style(){return n()}},[262,"ds-text",{variant:[1],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],as:[1],for:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(s(t))){customElements.define(s(t),i)}break}}))}c();const a=i;const l=c;export{a as DsText,l as defineCustomElement};
+//# sourceMappingURL=ds-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","italic","lineTruncation","as","render","Tag","isCustomColor","c","startsWith","cls","text","wrap","color","decoration","align","style","undefined","extraProps","for","h","Host","key","display","class"],"sources":["src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":[".text {\n  margin: 0;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n.text--truncate-1 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.text--truncate-2,\n.text--truncate-3,\n.text--truncate-4,\n.text--truncate-5 {\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  word-break: break-word;\n}\n\n.text--truncate-2 { -webkit-line-clamp: 2; }\n.text--truncate-3 { -webkit-line-clamp: 3; }\n.text--truncate-4 { -webkit-line-clamp: 4; }\n.text--truncate-5 { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n.text--nowrap {\n  white-space: nowrap;\n  word-break: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  min-width: 0;\n}\n\n.text--balance { text-wrap: balance; }\n.text--pretty  { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n.text--color-primary   { color: var(--color-foreground-primary); }\n.text--color-secondary { color: var(--color-foreground-secondary); }\n.text--color-tertiary  { color: var(--color-foreground-tertiary); }\n.text--color-brand     { color: var(--color-foreground-bold-brand); }\n.text--color-negative  { color: var(--color-foreground-bold-negative); }\n.text--color-positive  { color: var(--color-foreground-bold-positive); }\n.text--color-warning   { color: var(--color-foreground-bold-warning); }\n.text--color-caution   { color: var(--color-foreground-bold-caution); }\n.text--color-ai        { color: var(--color-foreground-bold-ai); }\n.text--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.text--color-on-bold   { color: var(--color-foreground-on-bold-background-primary); }\n.text--color-inherit   { color: inherit; }\n\n/* ── Decoration ─────────────────────────────────────────────────────────── */\n\n.text--decoration-underline {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n.text--decoration-dotted-underline {\n  text-decoration: underline dotted;\n  text-underline-offset: 2px;\n  text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n.text--italic { font-style: italic; }\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n.text--align-left   { text-align: left; }\n.text--align-center { text-align: center; }\n.text--align-right  { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TextVariant =\n  | 'text-display-medium'\n  | 'text-display-small'\n  | 'text-title-large'\n  | 'text-title-medium'\n  | 'text-title-small'\n  | 'text-body-large'\n  | 'text-body-large-emphasis'\n  | 'text-body-medium'\n  | 'text-body-medium-emphasis'\n  | 'text-body-small'\n  | 'text-body-small-emphasis'\n  | 'text-caption'\n  | 'text-caption-emphasis';\n\nexport type TextColorToken =\n  | 'primary' | 'secondary' | 'tertiary'\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n  | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n@Component({\n  tag: 'ds-text',\n  styleUrl: 'Text.css',\n  scoped: true,\n})\nexport class Text {\n  @Prop() variant: TextVariant = 'text-body-medium';\n  @Prop() color: TextColor | undefined;\n  @Prop() decoration: TextDecoration | undefined;\n  @Prop() italic: boolean = false;\n  @Prop() align: TextAlign | undefined;\n  @Prop() lineTruncation: LineTruncation = 'none';\n  @Prop() wrap: TextWrap | undefined;\n  @Prop() as: TextElement = 'p';\n  /** Maps to `for` attribute on <label> elements. */\n  @Prop() for: string | undefined;\n\n  render() {\n    const Tag = this.as as any;\n    const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n    const cls: Record<string, boolean> = {\n      [this.variant]: true,\n      'text': true,\n      'text--nowrap': this.wrap === 'nowrap',\n      'text--balance': this.wrap === 'balance',\n      'text--pretty': this.wrap === 'pretty',\n      'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n      'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n      'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n      'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n      'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n      'text--color-primary':   this.color === 'primary',\n      'text--color-secondary': this.color === 'secondary',\n      'text--color-tertiary':  this.color === 'tertiary',\n      'text--color-brand':     this.color === 'brand',\n      'text--color-negative':  this.color === 'negative',\n      'text--color-positive':  this.color === 'positive',\n      'text--color-warning':   this.color === 'warning',\n      'text--color-caution':   this.color === 'caution',\n      'text--color-ai':        this.color === 'ai',\n      'text--color-on-strong': this.color === 'on-strong',\n      'text--color-on-bold':   this.color === 'on-bold',\n      'text--color-inherit':   this.color === 'inherit',\n      'text--decoration-underline':        this.decoration === 'underline',\n      'text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n      'text--italic': this.italic,\n      'text--align-left':   this.align === 'left',\n      'text--align-center': this.align === 'center',\n      'text--align-right':  this.align === 'right',\n    };\n\n    const style = this.color && isCustomColor(this.color)\n      ? { color: this.color as string }\n      : undefined;\n\n    const extraProps: Record<string, string> = {};\n    if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <Tag class={cls} style={style} {...extraProps}>\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,ghE,MCkCTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAuB,mBAGvBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,GAAkB,GAsD3B,CAlDC,MAAAC,GACE,MAAMC,EAAMN,KAAKI,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,CAACV,KAAKC,SAAU,KAChBU,KAAQ,KACR,eAAgBX,KAAKY,OAAS,SAC9B,gBAAiBZ,KAAKY,OAAS,UAC/B,eAAgBZ,KAAKY,OAAS,SAC9B,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,sBAAyBZ,KAAKa,QAAU,UACxC,wBAAyBb,KAAKa,QAAU,YACxC,uBAAyBb,KAAKa,QAAU,WACxC,oBAAyBb,KAAKa,QAAU,QACxC,uBAAyBb,KAAKa,QAAU,WACxC,uBAAyBb,KAAKa,QAAU,WACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,iBAAyBb,KAAKa,QAAU,KACxC,wBAAyBb,KAAKa,QAAU,YACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,6BAAqCb,KAAKc,aAAe,YACzD,oCAAqCd,KAAKc,aAAe,mBACzD,eAAgBd,KAAKE,OACrB,mBAAsBF,KAAKe,QAAU,OACrC,qBAAsBf,KAAKe,QAAU,SACrC,oBAAsBf,KAAKe,QAAU,SAGvC,MAAMC,EAAQhB,KAAKa,OAASN,EAAcP,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKI,KAAO,SAAWJ,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAE9D,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACN,MAAO,CAAEO,QAAS,aACtBH,EAACd,EAAG,CAAAgB,IAAA,2CAACE,MAAOd,EAAKM,MAAOA,KAAWE,GACjCE,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ds-toast-provider.d.ts

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

package/dist/components/ds-toast-provider.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"f627e76035d8c68b4be91492637d2d24f802c419",style:{display:"contents"}},s("div",{key:"f64102bf0fa39604961b7878f35dda6459090c4a",class:"toast-container",role:"region","aria-label":"Notifications","aria-live":"polite",style:this.getPositionStyle()},this.items.map((t=>s("div",{key:t.data.id,class:{toast:true,"toast--exit":t.exiting},role:t.data.intent==="negative"?"alert":"status",style:{backgroundColor:p[t.data.intent],borderRadius:"var(--dimension-radius-125)",boxShadow:"var(--effect-elevation-elevated-floating)",display:"flex",alignItems:"center",gap:"var(--dimension-space-075)",padding:"var(--dimension-space-075) var(--dimension-space-100)",minHeight:"var(--dimension-size-400)",pointerEvents:"auto",color:"var(--color-foreground-on-bold-background-primary)",boxSizing:"border-box"},onMouseEnter:()=>this.pauseItem(t.data.id),onMouseLeave:()=>this.resumeItem(t.data.id)},s("span",{class:"text-body-medium",style:{flex:"1"}},t.data.message),s("button",{type:"button",class:"toast-dismiss",onClick:()=>this.dismissItem(t.data.id),"aria-label":"Dismiss"},"×"))))))}static get style(){return m()}},[2,"ds-toast-provider",{position:[1],items:[32]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-toast-provider"];t.forEach((t=>{switch(t){case"ds-toast-provider":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}g();const h=f;const b=g;export{h as DsToastProvider,b as defineCustomElement};
+//# sourceMappingURL=ds-toast-provider.js.map

package/dist/components/ds-toast-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","toast","show","options","id","intent","duration","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n  id: string;\n  message: string;\n  intent: ToastIntent;\n  duration: number;\n}\n\nexport interface ToastOptions {\n  message: string;\n  intent?: ToastIntent;\n  duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n  listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n  listeners.add(fn);\n  return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n  return toasts;\n}\n\nexport const toast = {\n  show(options: ToastOptions): string {\n    const id = `ds-toast-${++idCounter}`;\n    toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];\n    emit();\n    return id;\n  },\n  success(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'positive', ...options });\n  },\n  error(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'negative', ...options });\n  },\n  warning(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'warning', ...options });\n  },\n  info(message: string, options?: Partial<ToastOptions>): string {\n    return toast.show({ message, intent: 'neutral', ...options });\n  },\n  dismiss(id: string) {\n    toasts = toasts.filter(t => t.id !== id);\n    emit();\n  },\n  dismissAll() {\n    toasts = [];\n    emit();\n  },\n};\n",".toast {\n  animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n  width: 100%;\n  max-width: 420px;\n}\n\n.toast--exit {\n  animation: toastFadeOut 200ms ease-in forwards;\n}\n\n.toast-dismiss {\n  background: none;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  padding: var(--dimension-space-025);\n  margin-left: auto;\n  font-size: 16px;\n  line-height: 1;\n  opacity: 0.7;\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n  from { opacity: 0; transform: translateY(-8px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n  neutral:  'var(--color-background-bold-neutral)',\n  brand:    'var(--color-background-bold-brand)',\n  positive: 'var(--color-background-bold-positive)',\n  negative: 'var(--color-background-bold-negative)',\n  warning:  'var(--color-background-bold-warning)',\n  caution:  'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n  data: ToastData;\n  exiting: boolean;\n  timer: ReturnType<typeof setTimeout> | null;\n  remaining: number;\n  startedAt: number;\n  paused: boolean;\n}\n\n@Component({\n  tag: 'ds-toast-provider',\n  styleUrl: 'Toast.css',\n  scoped: true,\n})\nexport class ToastProvider {\n  @Prop() position: ToastPosition = 'top-center';\n\n  @State() private items: ToastItemState[] = [];\n\n  private unsubscribe: (() => void) | null = null;\n\n  connectedCallback() {\n    this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n    this.syncFromStore();\n  }\n\n  disconnectedCallback() {\n    this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n    this.unsubscribe?.();\n  }\n\n  private syncFromStore() {\n    const storeToasts = getToasts();\n    const existingIds = new Set(this.items.map(i => i.data.id));\n    const storeIds = new Set(storeToasts.map(t => t.id));\n\n    // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n    const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n    // Add new items\n    const newItems: ToastItemState[] = storeToasts\n      .filter(t => !existingIds.has(t.id))\n      .map(data => {\n        const state: ToastItemState = {\n          data,\n          exiting: false,\n          timer: null,\n          remaining: data.duration,\n          startedAt: 0,\n          paused: false,\n        };\n        if (data.duration > 0) {\n          state.startedAt = Date.now();\n          state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n        }\n        return state;\n      });\n\n    this.items = [...kept, ...newItems];\n  }\n\n  private dismissItem(id: string) {\n    this.items = this.items.map(i =>\n      i.data.id === id ? { ...i, exiting: true, timer: null } : i\n    );\n    setTimeout(() => {\n      this.items = this.items.filter(i => i.data.id !== id);\n      toastService.dismiss(id);\n    }, 200);\n  }\n\n  private pauseItem(id: string) {\n    this.items = this.items.map(i => {\n      if (i.data.id !== id || i.paused || !i.timer) return i;\n      clearTimeout(i.timer);\n      const elapsed = Date.now() - i.startedAt;\n      return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n    });\n  }\n\n  private resumeItem(id: string) {\n    this.items = this.items.map(i => {\n      if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n      const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n      return { ...i, paused: false, timer, startedAt: Date.now() };\n    });\n  }\n\n  private getPositionStyle(): Record<string, string> {\n    const base: Record<string, string> = {\n      position: 'fixed',\n      zIndex: '9999',\n      display: 'flex',\n      flexDirection: 'column',\n      gap: 'var(--dimension-space-075)',\n      pointerEvents: 'none',\n      padding: 'var(--dimension-space-100)',\n      maxWidth: '480px',\n      width: '100%',\n      boxSizing: 'border-box',\n    };\n    switch (this.position) {\n      case 'top-center':\n        return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n      case 'top-right':\n        return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n      case 'bottom-center':\n        return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n      case 'bottom-right':\n        return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n    }\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class=\"toast-container\"\n          role=\"region\"\n          aria-label=\"Notifications\"\n          aria-live=\"polite\"\n          style={this.getPositionStyle() as any}\n        >\n          {this.items.map(item => (\n            <div\n              key={item.data.id}\n              class={{ toast: true, 'toast--exit': item.exiting }}\n              role={item.data.intent === 'negative' ? 'alert' : 'status'}\n              style={{\n                backgroundColor: INTENT_BG[item.data.intent],\n                borderRadius: 'var(--dimension-radius-125)',\n                boxShadow: 'var(--effect-elevation-elevated-floating)',\n                display: 'flex',\n                alignItems: 'center',\n                gap: 'var(--dimension-space-075)',\n                padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n                minHeight: 'var(--dimension-size-400)',\n                pointerEvents: 'auto',\n                color: 'var(--color-foreground-on-bold-background-primary)',\n                boxSizing: 'border-box',\n              }}\n              onMouseEnter={() => this.pauseItem(item.data.id)}\n              onMouseLeave={() => this.resumeItem(item.data.id)}\n            >\n              <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n              <button\n                type=\"button\"\n                class=\"toast-dismiss\"\n                onClick={() => this.dismissItem(item.data.id)}\n                aria-label=\"Dismiss\"\n              >\n                &times;\n              </button>\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAeA,IAAIA,EAAsB,GAC1B,MAAMC,EAAY,IAAIC,IACtB,IAAIC,EAAY,EAEhB,SAASC,IACPH,EAAUI,SAAQC,GAAMA,KAC1B,CAEM,SAAUC,EAAkBD,GAChCL,EAAUO,IAAIF,GACd,MAAO,IAAML,EAAUQ,OAAOH,EAChC,C,SAEgBI,IACd,OAAOV,CACT,CAEO,MAAMW,EAAQ,CACnB,IAAAC,CAAKC,GACH,MAAMC,EAAK,cAAcX,IACzBH,EAAS,IAAIA,EAAQ,CAAEc,KAAIC,OAAQ,UAAWC,SAAU,OAASH,IACjET,IACA,OAAOU,C,EAET,OAAAG,CAAQC,EAAiBL,GACvB,OAAOF,EAAMC,KAAK,CAAEM,UAASH,OAAQ,cAAeF,G,EAEtD,KAAAM,CAAMD,EAAiBL,GACrB,OAAOF,EAAMC,KAAK,CAAEM,UAASH,OAAQ,cAAeF,G,EAEtD,OAAAO,CAAQF,EAAiBL,GACvB,OAAOF,EAAMC,KAAK,CAAEM,UAASH,OAAQ,aAAcF,G,EAErD,IAAAQ,CAAKH,EAAiBL,GACpB,OAAOF,EAAMC,KAAK,CAAEM,UAASH,OAAQ,aAAcF,G,EAErD,OAAAS,CAAQR,GACNd,EAASA,EAAOuB,QAAOC,GAAKA,EAAEV,KAAOA,IACrCV,G,EAEF,UAAAqB,GACEzB,EAAS,GACTI,G,GCzDJ,MAAMsB,EAAW,IAAM,0rBCKvB,MAAMC,EAAyC,CAC7CC,QAAU,uCACVC,MAAU,qCACVC,SAAU,wCACVC,SAAU,wCACVX,QAAU,uCACVY,QAAU,wC,MAiBCC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,4CAMUC,KAAAC,SAA0B,aAEjBD,KAAAE,MAA0B,GAEnCF,KAAAG,YAAmC,IA4I5C,CA1IC,iBAAAC,GACEJ,KAAKG,YAAclC,GAAkB,IAAM+B,KAAKK,kBAChDL,KAAKK,e,CAGP,oBAAAC,GACEN,KAAKE,MAAMnC,SAAQwC,IAAU,GAAIA,EAAKC,MAAOC,aAAaF,EAAKC,MAAM,IACrER,KAAKG,e,CAGC,aAAAE,GACN,MAAMK,EAActC,IACpB,MAAMuC,EAAc,IAAI/C,IAAIoC,KAAKE,MAAMU,KAAIC,GAAKA,EAAEC,KAAKtC,MACvD,MAAMuC,EAAW,IAAInD,IAAI8C,EAAYE,KAAI1B,GAAKA,EAAEV,MAGhD,MAAMwC,EAAOhB,KAAKE,MAAMjB,QAAO4B,GAAKE,EAASE,IAAIJ,EAAEC,KAAKtC,MAGxD,MAAM0C,EAA6BR,EAChCzB,QAAOC,IAAMyB,EAAYM,IAAI/B,EAAEV,MAC/BoC,KAAIE,IACH,MAAMK,EAAwB,CAC5BL,OACAM,QAAS,MACTZ,MAAO,KACPa,UAAWP,EAAKpC,SAChB4C,UAAW,EACXC,OAAQ,OAEV,GAAIT,EAAKpC,SAAW,EAAG,CACrByC,EAAMG,UAAYE,KAAKC,MACvBN,EAAMX,MAAQkB,YAAW,IAAM1B,KAAK2B,YAAYb,EAAKtC,KAAKsC,EAAKpC,S,CAEjE,OAAOyC,CAAK,IAGhBnB,KAAKE,MAAQ,IAAIc,KAASE,E,CAGpB,WAAAS,CAAYnD,GAClBwB,KAAKE,MAAQF,KAAKE,MAAMU,KAAIC,GAC1BA,EAAEC,KAAKtC,KAAOA,EAAK,IAAKqC,EAAGO,QAAS,KAAMZ,MAAO,MAASK,IAE5Da,YAAW,KACT1B,KAAKE,MAAQF,KAAKE,MAAMjB,QAAO4B,GAAKA,EAAEC,KAAKtC,KAAOA,IAClDoD,EAAa5C,QAAQR,EAAG,GACvB,I,CAGG,SAAAqD,CAAUrD,GAChBwB,KAAKE,MAAQF,KAAKE,MAAMU,KAAIC,IAC1B,GAAIA,EAAEC,KAAKtC,KAAOA,GAAMqC,EAAEU,SAAWV,EAAEL,MAAO,OAAOK,EACrDJ,aAAaI,EAAEL,OACf,MAAMsB,EAAUN,KAAKC,MAAQZ,EAAES,UAC/B,MAAO,IAAKT,EAAGU,OAAQ,KAAMf,MAAO,KAAMa,UAAWU,KAAKC,IAAI,EAAGnB,EAAEQ,UAAYS,GAAU,G,CAIrF,UAAAG,CAAWzD,GACjBwB,KAAKE,MAAQF,KAAKE,MAAMU,KAAIC,IAC1B,GAAIA,EAAEC,KAAKtC,KAAOA,IAAOqC,EAAEU,QAAUV,EAAEQ,WAAa,EAAG,OAAOR,EAC9D,MAAML,EAAQkB,YAAW,IAAM1B,KAAK2B,YAAYnD,IAAKqC,EAAEQ,WACvD,MAAO,IAAKR,EAAGU,OAAQ,MAAOf,QAAOc,UAAWE,KAAKC,MAAO,G,CAIxD,gBAAAS,GACN,MAAMC,EAA+B,CACnClC,SAAU,QACVmC,OAAQ,OACRC,QAAS,OACTC,cAAe,SACfC,IAAK,6BACLC,cAAe,OACfC,QAAS,6BACTC,SAAU,QACVC,MAAO,OACPC,UAAW,cAEb,OAAQ5C,KAAKC,UACX,IAAK,aACH,MAAO,IAAKkC,EAAMU,IAAK,IAAKC,KAAM,MAAOC,UAAW,mBAAoBC,WAAY,UACtF,IAAK,YACH,MAAO,IAAKb,EAAMU,IAAK,IAAKI,MAAO,IAAKD,WAAY,YACtD,IAAK,gBACH,MAAO,IAAKb,EAAMe,OAAQ,IAAKJ,KAAM,MAAOC,UAAW,mBAAoBC,WAAY,UACzF,IAAK,eACH,MAAO,IAAKb,EAAMe,OAAQ,IAAKD,MAAO,IAAKD,WAAY,Y,CAI7D,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAElB,QAAS,aACtBe,EAAA,OAAAE,IAAA,2CACEE,MAAM,kBACNC,KAAK,SAAQ,aACF,gBAAe,YAChB,SACVF,MAAOvD,KAAKkC,oBAEXlC,KAAKE,MAAMU,KAAIL,GACd6C,EAAA,OACEE,IAAK/C,EAAKO,KAAKtC,GACfgF,MAAO,CAAEnF,MAAO,KAAM,cAAekC,EAAKa,SAC1CqC,KAAMlD,EAAKO,KAAKrC,SAAW,WAAa,QAAU,SAClD8E,MAAO,CACLG,gBAAiBrE,EAAUkB,EAAKO,KAAKrC,QACrCkF,aAAc,8BACdC,UAAW,4CACXvB,QAAS,OACTW,WAAY,SACZT,IAAK,6BACLE,QAAS,wDACToB,UAAW,4BACXrB,cAAe,OACfsB,MAAO,qDACPlB,UAAW,cAEbmB,aAAc,IAAM/D,KAAK6B,UAAUtB,EAAKO,KAAKtC,IAC7CwF,aAAc,IAAMhE,KAAKiC,WAAW1B,EAAKO,KAAKtC,KAE9C4E,EAAA,QAAMI,MAAM,mBAAmBD,MAAO,CAAEU,KAAM,MAAQ1D,EAAKO,KAAKlC,SAChEwE,EAAA,UACEc,KAAK,SACLV,MAAM,gBACNW,QAAS,IAAMnE,KAAK2B,YAAYpB,EAAKO,KAAKtC,IAAG,aAClC,WAAS,S","ignoreList":[]}

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

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

package/dist/components/ds-toggle.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as o,h as i,a as s,t as n}from"./index.js";const r=()=>`:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}:host(.inactive){cursor:not-allowed;opacity:0.5}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.inactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return i(s,{key:"30f9cb4ce03df996ee1152bac348bda8293db1f1",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.inactive||undefined,tabIndex:this.inactive?-1:0,class:{toggle:true,checked:this.checked,inactive:this.inactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("span",{key:"c543834f4f590796d7bef0c413516887dac1c5cd",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],inactive:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(n(t))){customElements.define(n(t),a)}break}}))}c();const d=a;const h=c;export{d as DsToggle,h as defineCustomElement};
+//# sourceMappingURL=ds-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toggleCss","Toggle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","inactive","handleClick","dsChange","emit","handleKeyDown","e","key","preventDefault","render","h","Host","role","String","undefined","tabIndex","class","toggle","onClick","onKeyDown"],"sources":["src/wc/components/Toggle/Toggle.css?tag=ds-toggle&encapsulation=shadow","src/wc/components/Toggle/Toggle.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-250);\n  padding: 0 var(--dimension-space-025);\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  flex-shrink: 0;\n  background-color: var(--color-background-medium-neutral);\n  box-shadow: var(--effect-highlight-depressed-sm);\n  transition: background-color var(--effect-motion-short-2);\n  box-sizing: border-box;\n}\n\n:host::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  box-shadow: var(--effect-shadow-depressed-sm);\n  pointer-events: none;\n}\n\n:host(:focus-visible) {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-foreground-bold-brand);\n}\n\n:host(.inactive) {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: relative;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-half);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  transition: transform var(--effect-motion-short-2);\n  transform: translateX(0);\n  z-index: 1;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-color: transparent;\n  border-radius: inherit;\n  transition: background-color var(--effect-motion-instant, 100ms);\n  pointer-events: none;\n}\n\n:host(:hover:not(.inactive)) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n:host(:active:not(.inactive)) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n:host(.checked) .thumb {\n  transform: translateX(var(--dimension-offset-150));\n}\n\n:host(:active:not(.inactive)) .thumb {\n  transform: translateX(0) scale(var(--dimension-scale-subtle)) !important;\n  transition: transform var(--effect-motion-instant);\n}\n\n:host(.checked:active:not(.inactive)) .thumb {\n  transform: translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;\n  transition: transform var(--effect-motion-instant);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-toggle',\n  styleUrl: 'Toggle.css',\n  shadow: true,\n})\nexport class Toggle {\n  @Prop({ mutable: true }) checked: boolean = false;\n  @Prop() inactive: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\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 (this.inactive) return;\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"switch\"\n        aria-checked={String(this.checked)}\n        aria-disabled={this.inactive || undefined}\n        tabIndex={this.inactive ? -1 : 0}\n        class={{ toggle: true, checked: this.checked, inactive: this.inactive }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,49D,MCOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,mGAM2BC,KAAAC,QAAmB,MACpCD,KAAAE,SAAoB,MAIpBF,KAAAG,YAAc,KACpB,GAAIH,KAAKE,SAAU,OACnBF,KAAKC,SAAWD,KAAKC,QACrBD,KAAKI,SAASC,KAAKL,KAAKC,QAAQ,EAG1BD,KAAAM,cAAiBC,IACvB,GAAIP,KAAKE,SAAU,OACnB,GAAIK,EAAEC,MAAQ,KAAOD,EAAEC,MAAQ,QAAS,CACtCD,EAAEE,iBACFT,KAAKG,a,EAmBV,CAfC,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAJ,IAAA,2CACHK,KAAK,SAAQ,eACCC,OAAOd,KAAKC,SAAQ,gBACnBD,KAAKE,UAAYa,UAChCC,SAAUhB,KAAKE,UAAW,EAAK,EAC/Be,MAAO,CAAEC,OAAQ,KAAMjB,QAASD,KAAKC,QAASC,SAAUF,KAAKE,UAC7DiB,QAASnB,KAAKG,YACdiB,UAAWpB,KAAKM,eAEhBK,EAAA,QAAAH,IAAA,2CAAMS,MAAM,U","ignoreList":[]}

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

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

package/dist/components/ds-tooltip.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,h as i,a as e,t as o}from"./index.js";const n=()=>`.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);padding:var(--dimension-space-050);white-space:nowrap;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{display:flex;flex-direction:row;align-items:center;gap:var(--dimension-space-050)}.key-hint.sc-ds-tooltip{width:var(--dimension-size-200);height:var(--dimension-size-200);flex-shrink:0;display:flex;align-items:center;justify-content:center;border:var(--dimension-stroke-width-015) solid var(--color-foreground-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const a=600;const h=300;const r=200;const c=4;let l=0;let d=0;const f=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.side="top";this.align="center";this.sideOffset=4;this.alignOffset=0;this.delay=a;this.shortcutKeyPosition="end";this.visible=false;this.closing=false;this.pos={x:0,y:0};this.tooltipId=`ds-tooltip-${++d}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.tooltipEl=null;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=()=>this.hide()}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){this.unbindAnchor();this.clearTimers()}onPositionPropsChange(){if(this.visible)this.calculatePosition()}bindAnchor(){const t=this.el.querySelector("slot");const s=t?.assignedElements?.()??[];const i=s[0]??this.el.firstElementChild;if(!i)return;this.anchor=i;i.setAttribute("aria-describedby",this.tooltipId);i.addEventListener("mouseenter",this.mouseEnterHandler);i.addEventListener("mouseleave",this.mouseLeaveHandler);i.addEventListener("focus",this.focusHandler);i.addEventListener("blur",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focus",this.focusHandler);this.anchor.removeEventListener("blur",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}show(){this.clearTimers();const t=Date.now()-l<h;if(t){this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()));return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;this.closing=false;this.visible=true;requestAnimationFrame((()=>this.calculatePosition()))}),this.delay)}hide(){this.clearTimers();if(!this.visible)return;l=Date.now();this.closing=true;this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.visible=false;this.closing=false}),r)}calculatePosition(){if(!this.anchor)return;const t=this.el.querySelector(".tooltip-popup");if(!t)return;const s=this.anchor.getBoundingClientRect();const i=t.offsetWidth||80;const e=t.offsetHeight||24;let o=0,n=0;switch(this.side){case"top":n=s.top-e-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":n=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;n=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-e+this.alignOffset:s.top+s.height/2-e/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;n=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-e+this.alignOffset:s.top+s.height/2-e/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,c),window.innerWidth-i-c),y:Math.min(Math.max(n,c),window.innerHeight-e-c)}}render(){return i(e,{key:"cf3b159f2b69b71a5ccc0c995c8e719b991a138a",style:{display:"contents"}},i("slot",{key:"c90e39a8a3e9ce4459fb42347616993b72295db4"}),(this.visible||this.closing)&&i("div",{key:"825c6582a9fa9ea09001fd7713e251ef746b8ea7",id:this.tooltipId,class:{"tooltip-popup":true,"tooltip-popup--closing":this.closing},role:"tooltip",style:{position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"10000",pointerEvents:"none"}},i("div",{key:"4561d82bd488fc845897906de9fbed41f4ab3c03",class:"tooltip-inner"},this.shortcutKey&&this.shortcutKeyPosition==="start"&&i("div",{key:"e9a4ff703158f6d17c62b90b476b43069a1b2ec8",class:"key-hint","aria-hidden":"true"},i("span",{key:"0ad6e08c0e264192cafb79cd6a6c7f5bf155d0bc",class:"text-caption-emphasis"},this.shortcutKey)),i("span",{key:"336a960ba8ad68f82d46712cd5080f1c70997825",class:"text-body-small"},this.label),this.shortcutKey&&this.shortcutKeyPosition==="end"&&i("div",{key:"480832eff197186ee5030b7fbd3cc0764c4ccc87",class:"key-hint","aria-hidden":"true"},i("span",{key:"4d674b714e50969a3bd086e21779eeff57e53be2",class:"text-caption-emphasis"},this.shortcutKey)))))}get el(){return this}static get watchers(){return{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}]}}static get style(){return n()}},[262,"ds-tooltip",{label:[1],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],delay:[2],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"],visible:[32],closing:[32],pos:[32]},undefined,{label:[{onPositionPropsChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}p();const u=f;const b=p;export{u as DsTooltip,b as defineCustomElement};
+//# sourceMappingURL=ds-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tooltipCss","HOVER_DELAY_MS","INSTANT_REOPEN_MS","FADE_OUT_MS","VP_PAD","lastDismissedAt","tooltipIdCounter","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","side","align","sideOffset","alignOffset","delay","shortcutKeyPosition","visible","closing","pos","x","y","tooltipId","delayTimer","closeTimer","anchor","tooltipEl","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","onPositionPropsChange","calculatePosition","slot","el","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","instant","Date","now","requestAnimationFrame","setTimeout","tip","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","top","left","right","width","bottom","height","Math","min","max","window","innerWidth","innerHeight","render","h","Host","key","style","display","id","class","role","position","transform","round","zIndex","pointerEvents","shortcutKey","label"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  padding: var(--dimension-space-050);\n  white-space: nowrap;\n  animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n  will-change: transform;\n  backface-visibility: hidden;\n}\n\n.tooltip-popup--closing {\n  animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n.tooltip-inner {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n}\n\n.key-hint {\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--dimension-stroke-width-015) solid var(--color-foreground-tertiary);\n  border-bottom-width: var(--dimension-stroke-width-025);\n  border-radius: var(--dimension-radius-025);\n}\n\n@keyframes tooltipFadeIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n","import { Component, Prop, State, Element, Watch, h, Host } from '@stencil/core';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\n\nconst HOVER_DELAY_MS = 600;\nconst INSTANT_REOPEN_MS = 300;\nconst FADE_OUT_MS = 200;\nconst VP_PAD = 4;\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n\n@Component({\n  tag: 'ds-tooltip',\n  styleUrl: 'Tooltip.css',\n  scoped: true,\n})\nexport class Tooltip {\n  @Element() el!: HTMLElement;\n\n  @Prop() label!: string;\n  @Prop() side: TooltipSide = 'top';\n  @Prop() align: TooltipAlign = 'center';\n  @Prop() sideOffset: number = 4;\n  @Prop() alignOffset: number = 0;\n  @Prop() delay: number = HOVER_DELAY_MS;\n  @Prop() shortcutKey: string | undefined;\n  @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n  @State() private visible: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n\n  private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n  private delayTimer: ReturnType<typeof setTimeout> | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private anchor: HTMLElement | null = null;\n  private tooltipEl: HTMLElement | null = null;\n  private mouseEnterHandler: () => void = () => this.show();\n  private mouseLeaveHandler: () => void = () => this.hide();\n  private focusHandler: () => void = () => this.show();\n  private blurHandler: () => void = () => this.hide();\n\n  componentDidLoad() {\n    this.bindAnchor();\n  }\n\n  disconnectedCallback() {\n    this.unbindAnchor();\n    this.clearTimers();\n  }\n\n  @Watch('label')\n  @Watch('side')\n  @Watch('align')\n  onPositionPropsChange() {\n    if (this.visible) this.calculatePosition();\n  }\n\n  private bindAnchor() {\n    const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n    const slotted = slot?.assignedElements?.() ?? [];\n    const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n    if (!child) return;\n    this.anchor = child;\n    child.setAttribute('aria-describedby', this.tooltipId);\n    child.addEventListener('mouseenter', this.mouseEnterHandler);\n    child.addEventListener('mouseleave', this.mouseLeaveHandler);\n    child.addEventListener('focus', this.focusHandler);\n    child.addEventListener('blur', this.blurHandler);\n  }\n\n  private unbindAnchor() {\n    if (!this.anchor) return;\n    this.anchor.removeAttribute('aria-describedby');\n    this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n    this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n    this.anchor.removeEventListener('focus', this.focusHandler);\n    this.anchor.removeEventListener('blur', this.blurHandler);\n    this.anchor = null;\n  }\n\n  private clearTimers() {\n    if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n    if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n  }\n\n  private show() {\n    this.clearTimers();\n    const instant = Date.now() - lastDismissedAt < INSTANT_REOPEN_MS;\n    if (instant) {\n      this.closing = false;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePosition());\n      return;\n    }\n    this.delayTimer = setTimeout(() => {\n      this.delayTimer = null;\n      this.closing = false;\n      this.visible = true;\n      requestAnimationFrame(() => this.calculatePosition());\n    }, this.delay);\n  }\n\n  private hide() {\n    this.clearTimers();\n    if (!this.visible) return;\n    lastDismissedAt = Date.now();\n    this.closing = true;\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.visible = false;\n      this.closing = false;\n    }, FADE_OUT_MS);\n  }\n\n  private calculatePosition() {\n    if (!this.anchor) return;\n    const tip = this.el.querySelector('.tooltip-popup') as HTMLElement | null;\n    if (!tip) return;\n    const a = this.anchor.getBoundingClientRect();\n    const tw = tip.offsetWidth || 80;\n    const th = tip.offsetHeight || 24;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - th - this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - tw + this.alignOffset\n          : a.left + a.width / 2 - tw / 2 + this.alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - tw + this.alignOffset\n          : a.left + a.width / 2 - tw / 2 + this.alignOffset;\n        break;\n      case 'left':\n        x = a.left - tw - this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - th + this.alignOffset\n          : a.top + a.height / 2 - th / 2 + this.alignOffset;\n        break;\n      case 'right':\n        x = a.right + this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - th + this.alignOffset\n          : a.top + a.height / 2 - th / 2 + this.alignOffset;\n        break;\n    }\n\n    this.pos = {\n      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - tw - VP_PAD),\n      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - th - VP_PAD),\n    };\n  }\n\n  render() {\n    return (\n      <Host style={{ display: 'contents' }}>\n        <slot />\n        {(this.visible || this.closing) && (\n          <div\n            id={this.tooltipId}\n            class={{ 'tooltip-popup': true, 'tooltip-popup--closing': this.closing }}\n            role=\"tooltip\"\n            style={{\n              position: 'fixed',\n              left: '0',\n              top: '0',\n              transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n              zIndex: '10000',\n              pointerEvents: 'none',\n            }}\n          >\n            <div class=\"tooltip-inner\">\n              {this.shortcutKey && this.shortcutKeyPosition === 'start' && (\n                <div class=\"key-hint\" aria-hidden=\"true\">\n                  <span class=\"text-caption-emphasis\">{this.shortcutKey}</span>\n                </div>\n              )}\n              <span class=\"text-body-small\">{this.label}</span>\n              {this.shortcutKey && this.shortcutKeyPosition === 'end' && (\n                <div class=\"key-hint\" aria-hidden=\"true\">\n                  <span class=\"text-caption-emphasis\">{this.shortcutKey}</span>\n                </div>\n              )}\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;

package/dist/components/index.js

@@ -0,0 +1,2 @@
+const e="ds-mo";const t={hotModuleReplacement:false,hydratedSelectorName:"hydrated",lazyLoad:false,slotRelocation:true,state:true,updatable:true};var n="http://www.w3.org/2000/svg";var l="http://www.w3.org/1999/xhtml";function r(e,t,n){const l=typeof HTMLElement!=="undefined"?HTMLElement.prototype:null;while(e&&e!==l){const l=Object.getOwnPropertyDescriptor(e,t);if(l&&(!n||l.get))return l;e=Object.getPrototypeOf(e)}return void 0}var i=(e,t)=>{var n;const l=t.t;const i=Object.entries((n=l.l)!=null?n:{});i.map((([n,[l]])=>{if(l&31||l&32){const l=e[n];const i=r(Object.getPrototypeOf(e),n,true)||Object.getOwnPropertyDescriptor(e,n);if(i){Object.defineProperty(e,n,{get(){return i.get.call(this)},set(e){i.set.call(this,e)},configurable:true,enumerable:true})}if(t.i.has(n)){e[n]=t.i.get(n)}else if(l!==void 0){e[n]=l}}}))};var s=e=>{if(e.__stencil__getHostRef){return e.__stencil__getHostRef()}return void 0};var o=(e,n)=>{const l={o:0,$hostElement$:e,t:n,i:new Map,u:new Map};{l.v=new Promise((e=>l.p=e));e["s-p"]=[];e["s-rc"]=[]}const r=l;e.__stencil__getHostRef=()=>r;if(n.o&512&&t.state){i(e,l)}return r};var f=(e,t)=>t in e;var a=(e,t)=>(0,console.error)(e,t);var c=new Map;var u="slot-fb{display:contents}slot-fb[hidden]{display:none}";var v="http://www.w3.org/1999/xlink";var d=typeof window!=="undefined"?window:{};var p=d.HTMLElement||class{};var h={o:0,h:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,l)=>e.addEventListener(t,n,l),rel:(e,t,n,l)=>e.removeEventListener(t,n,l),ce:(e,t)=>new CustomEvent(e,t)};var y=(()=>{var e;let t=false;try{(e=d.document)==null?void 0:e.addEventListener("e",null,Object.defineProperty({},"passive",{get(){t=true}}))}catch(e){}return t})();var b=e=>Promise.resolve(e);var m=(()=>{try{if(!d.document.adoptedStyleSheets){return false}new CSSStyleSheet;return typeof(new CSSStyleSheet).replaceSync==="function"}catch(e){}return false})();var w=m?(()=>!!d.document&&Object.getOwnPropertyDescriptor(d.document.adoptedStyleSheets,"length").writable)():false;var g=false;var $=[];var j=[];var O=(e,t)=>n=>{e.push(n);if(!g){g=true;if(t&&h.o&4){N(k)}else{h.raf(k)}}};var S=e=>{for(let t=0;t<e.length;t++){try{e[t](performance.now())}catch(e){a(e)}}e.length=0};var k=()=>{S($);{S(j);if(g=$.length>0){h.raf(k)}}};var N=e=>b().then(e);var M=O(j,true);var E=e=>{const t=new URL(e,h.h);return t.origin!==d.location.origin?t.href:t.pathname};var x=e=>h.h=e;function C(e){return void 0}var L;function R(e){var t;const n={mode:"open"};const l=this.attachShadow(n);if(L===void 0)L=(t=C())!=null?t:null;if(L){if(w){l.adoptedStyleSheets.push(L)}else{l.adoptedStyleSheets=[...l.adoptedStyleSheets,L]}}}var _=e=>{const t=z(e,"childNodes");if(e.tagName&&e.tagName.includes("-")&&e["s-cr"]&&e.tagName!=="SLOT-FB"){F(t,e.tagName).forEach((e=>{if(e.nodeType===1&&e.tagName==="SLOT-FB"){if(T(e,D(e),false).length){e.hidden=true}else{e.hidden=false}}}))}let n=0;for(n=0;n<t.length;n++){const e=t[n];if(e.nodeType===1&&z(e,"childNodes").length){_(e)}}};var A=e=>{const t=[];for(let n=0;n<e.length;n++){const l=e[n]["s-nr"]||void 0;if(l&&l.isConnected){t.push(l)}}return t};function F(e,t,n){let l=0;let r=[];let i;for(;l<e.length;l++){i=e[l];if(i["s-sr"]&&(!t||i["s-hn"]===t)&&(n===void 0||D(i)===n)){r.push(i);if(typeof n!=="undefined")return r}r=[...r,...F(i.childNodes,t,n)]}return r}var T=(e,t,n=true)=>{const l=[];if(n&&e["s-sr"]||!e["s-sr"])l.push(e);let r=e;while(r=r.nextSibling){if(D(r)===t&&(n||!r["s-sr"]))l.push(r)}return l};var U=(e,t)=>{if(e.nodeType===1){if(e.getAttribute("slot")===null&&t===""){return true}if(e.getAttribute("slot")===t){return true}return false}if(e["s-sn"]===t){return true}return t===""};var D=e=>typeof e["s-sn"]==="string"?e["s-sn"]:e.nodeType===1&&e.getAttribute("slot")||void 0;function H(e){if(e.assignedElements||e.assignedNodes||!e["s-sr"])return;const t=t=>function(e){const n=[];const l=this["s-sn"];if(e==null?void 0:e.flatten){console.error(`\n          Flattening is not supported for Stencil non-shadow slots.\n          You can use \`.childNodes\` to nested slot fallback content.\n          If you have a particular use case, please open an issue on the Stencil repo.\n        `)}const r=this["s-cr"].parentElement;const i=r.__childNodes?r.childNodes:A(r.childNodes);i.forEach((e=>{if(l===D(e)){n.push(e)}}));if(t){return n.filter((e=>e.nodeType===1))}return n}.bind(e);e.assignedElements=t(true);e.assignedNodes=t(false)}function P(e){e.dispatchEvent(new CustomEvent("slotchange",{bubbles:false,cancelable:false,composed:false}))}function W(e,t){var n;t=t||((n=e["s-ol"])==null?void 0:n.parentElement);if(!t)return{slotNode:null,slotName:""};const l=e["s-sn"]=D(e)||"";const r=z(t,"childNodes");const i=F(r,t.tagName,l)[0];return{slotNode:i,slotName:l}}function z(e,t){if("__"+t in e){const n=e["__"+t];if(typeof n!=="function")return n;return n.bind(e)}else{if(typeof e[t]!=="function")return e[t];return e[t].bind(e)}}var B=(e,t="")=>{{return()=>{}}};function V(e){var t,n,l;return(l=(n=(t=e.head)==null?void 0:t.querySelector('meta[name="csp-nonce"]'))==null?void 0:n.getAttribute("content"))!=null?l:void 0}var q=new WeakMap;var Y=(e,t,n)=>{let l=c.get(e);if(m&&n){l=l||new CSSStyleSheet;if(typeof l==="string"){l=t}else{l.replaceSync(t)}}else{l=t}c.set(e,l)};var I=(e,t,n)=>{var l,r,i;const s=G(t);const o=c.get(s);if(!d.document){return s}e=e.nodeType===11?e:d.document;if(o){if(typeof o==="string"){e=e.head||e;let n=q.get(e);let i;if(!n){q.set(e,n=new Set)}if(!n.has(s)){i=d.document.createElement("style");i.textContent=o;const f=(l=h.m)!=null?l:V(d.document);if(f!=null){i.setAttribute("nonce",f)}if(!(t.o&1)){if(e.nodeName==="HEAD"){const t=e.querySelectorAll("link[rel=preconnect]");const n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(i,(n==null?void 0:n.parentNode)===e?n:null)}else if("host"in e){if(m){const t=(r=e.defaultView)!=null?r:e.ownerDocument.defaultView;const n=new t.CSSStyleSheet;n.replaceSync(o);if(w){e.adoptedStyleSheets.unshift(n)}else{e.adoptedStyleSheets=[n,...e.adoptedStyleSheets]}}else{const t=e.querySelector("style");if(t&&true){t.textContent=o+t.textContent}else{e.prepend(i)}}}else{e.append(i)}}if(t.o&1){e.insertBefore(i,null)}if(t.o&4){i.textContent+=u}if(n){n.add(s)}}}else{let t=q.get(e);if(!t){q.set(e,t=new Set)}if(!t.has(s)){const n=(i=e.defaultView)!=null?i:e.ownerDocument.defaultView;let l;if(o.constructor===n.CSSStyleSheet){l=o}else{l=new n.CSSStyleSheet;for(let e=0;e<o.cssRules.length;e++){l.insertRule(o.cssRules[e].cssText,e)}}if(w){e.adoptedStyleSheets.push(l)}else{e.adoptedStyleSheets=[...e.adoptedStyleSheets,l]}t.add(s)}}}return s};var Z=e=>{const t=e.t;const n=e.$hostElement$;const l=t.o;const r=B("attachStyles",t.$);const i=I(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);if(l&10){n["s-sc"]=i;n.classList.add(i+"-h")}r()};var G=(e,t)=>"sc-"+e.$;var J=e=>e!=null&&e!==void 0;var K=e=>{e=typeof e;return e==="object"||e==="function"};var Q=(e,t,...n)=>{if(typeof e==="string"){e=yt(e)}let l=null;let r=null;let i=null;let s=false;let o=false;const f=[];const a=t=>{for(let n=0;n<t.length;n++){l=t[n];if(Array.isArray(l)){a(l)}else if(l!=null&&typeof l!=="boolean"){if(s=typeof e!=="function"&&!K(l)){l=String(l)}if(s&&o){f[f.length-1].j+=l}else{f.push(s?X(null,l):l)}o=s}}};a(n);if(t){if(t.key){r=t.key}if(t.name){i=t.name}{const e=t.className||t.class;if(e){t.class=typeof e!=="object"?e:Object.keys(e).filter((t=>e[t])).join(" ")}}}if(typeof e==="function"){return e(t===null?{}:t,f,ne)}const c=X(e,null);c.O=t;if(f.length>0){c.S=f}{c.k=r}{c.N=i}return c};var X=(e,t)=>{const n={o:0,M:e,j:t!=null?t:null,C:null,S:null};{n.O=null}{n.k=null}{n.N=null}return n};var ee={};var te=e=>e&&e.M===ee;var ne={forEach:(e,t)=>e.map(le).forEach(t),map:(e,t)=>e.map(le).map(t).map(re)};var le=e=>({vattrs:e.O,vchildren:e.S,vkey:e.k,vname:e.N,vtag:e.M,vtext:e.j});var re=e=>{if(typeof e.vtag==="function"){const t={...e.vattrs};if(e.vkey){t.key=e.vkey}if(e.vname){t.name=e.vname}return Q(e.vtag,t,...e.vchildren||[])}const t=X(e.vtag,e.vtext);t.O=e.vattrs;t.S=e.vchildren;t.k=e.vkey;t.N=e.vname;return t};var ie=e=>{if(!e)return void 0;const t=Object.keys(e);if(t.length===0)return void 0;let n=false;for(const l of t){if(n)break;for(const t of e[l]){if(typeof t==="string"){n=true;break}}}if(!n)return e;const l={};for(const n of t){l[n]=e[n].map((e=>typeof e==="string"?{[e]:0}:e))}return l};var se=(e,t,n)=>{if(e!=null&&!K(e)){if(t&4){{return e==="false"?false:e===""||!!e}}if(t&2){return typeof e==="string"?parseFloat(e):typeof e==="number"?e:NaN}if(t&1){return String(e)}return e}return e};var oe=e=>e;var fe=(e,t,n)=>{const l=oe(e);return{emit:e=>ae(l,t,{bubbles:true,composed:true,cancelable:true,detail:e})}};var ae=(e,t,n)=>{const l=h.ce(t,n);e.dispatchEvent(l);return l};var ce=(e,t,n,l,r,i,o)=>{if(n===l){return}let a=f(e,t);let c=t.toLowerCase();if(t==="class"){const t=e.classList;const r=ve(n);let i=ve(l);{t.remove(...r.filter((e=>e&&!i.includes(e))));t.add(...i.filter((e=>e&&!r.includes(e))))}}else if(t==="style"){{for(const t in n){if(!l||l[t]==null){if(t.includes("-")){e.style.removeProperty(t)}else{e.style[t]=""}}}}for(const t in l){if(!n||l[t]!==n[t]){if(t.includes("-")){e.style.setProperty(t,l[t])}else{e.style[t]=l[t]}}}}else if(t==="key");else if(t==="ref"){if(l){De(l,e)}}else if(!e.__lookupSetter__(t)&&t[0]==="o"&&t[1]==="n"){if(t[2]==="-"){t=t.slice(3)}else if(f(d,c)){t=c.slice(2)}else{t=c[2]+t.slice(3)}if(n||l){const r=t.endsWith(de);t=t.replace(pe,"");if(n){h.rel(e,t,n,r)}if(l){h.ael(e,t,l,r)}}}else if(t[0]==="a"&&t.startsWith("attr:")){const n=t.slice(5);let r;{const t=s(e);if(t&&t.t&&t.t.l){const e=t.t.l[n];if(e&&e[1]){r=e[1]}}}if(!r){r=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}if(l==null||l===false){if(l!==false||e.getAttribute(r)===""){e.removeAttribute(r)}}else{e.setAttribute(r,l===true?"":l)}return}else if(t[0]==="p"&&t.startsWith("prop:")){const n=t.slice(5);try{e[n]=l}catch(e){}return}else{const s=K(l);if((a||s&&l!==null)&&!r){try{if(!e.tagName.includes("-")){const r=l==null?"":l;if(t==="list"){a=false}else if(n==null||e[t]!==r){if(typeof e.__lookupSetter__(t)==="function"){e[t]=r}else{e.setAttribute(t,r)}}}else if(e[t]!==l){e[t]=l}}catch(e){}}let o=false;{if(c!==(c=c.replace(/^xlink\:?/,""))){t=c;o=true}}if(l==null||l===false){if(l!==false||e.getAttribute(t)===""){if(o){e.removeAttributeNS(v,t)}else{e.removeAttribute(t)}}}else if((!a||i&4||r)&&!s&&e.nodeType===1){l=l===true?"":l;if(o){e.setAttributeNS(v,t,l)}else{e.setAttribute(t,l)}}}};var ue=/\s/;var ve=e=>{if(typeof e==="object"&&e&&"baseVal"in e){e=e.baseVal}if(!e||typeof e!=="string"){return[]}return e.split(ue)};var de="Capture";var pe=new RegExp(de+"$");var he=(e,t,n,l)=>{const r=t.C.nodeType===11&&t.C.host?t.C.host:t.C;const i=e&&e.O||{};const s=t.O||{};{for(const e of ye(Object.keys(i))){if(!(e in s)){ce(r,e,i[e],void 0,n,t.o)}}}for(const e of ye(Object.keys(s))){ce(r,e,i[e],s[e],n,t.o)}};function ye(e){return e.includes("ref")?[...e.filter((e=>e!=="ref")),"ref"]:e}var be;var me;var we;var ge=false;var $e=false;var je=false;var Oe=false;var Se=[];var ke=[];var Ne=(e,r,i)=>{var s;const o=r.S[i];let f=0;let a;let c;let u;if(!ge){je=true;if(o.M==="slot"){o.o|=o.S?2:1}}if(o.j!=null){a=o.C=d.document.createTextNode(o.j)}else if(o.o&1){a=o.C=d.document.createTextNode("");{he(null,o,Oe)}}else{if(!Oe){Oe=o.M==="svg"}if(!d.document){throw new Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.")}a=o.C=d.document.createElementNS(Oe?n:l,!ge&&t.slotRelocation&&o.o&2?"slot-fb":o.M);if(Oe&&o.M==="foreignObject"){Oe=false}{he(null,o,Oe)}if(J(be)&&a["s-si"]!==be){a.classList.add(a["s-si"]=be)}if(o.S){const t=o.M==="template"?a.content:a;for(f=0;f<o.S.length;++f){c=Ne(e,o,f);if(c){t.appendChild(c)}}}{if(o.M==="svg"){Oe=false}else if(a.tagName==="foreignObject"){Oe=true}}}a["s-hn"]=we;{if(o.o&(2|1)){a["s-sr"]=true;a["s-cr"]=me;a["s-sn"]=o.N||"";a["s-rf"]=(s=o.O)==null?void 0:s.ref;H(a);u=e&&e.S&&e.S[i];if(u&&u.M===o.M&&e.C){Me(e.C)}{We(me,a,r.C,e==null?void 0:e.C)}}}return a};var Me=e=>{h.o|=1;const t=e.closest(we.toLowerCase());if(t!=null){const n=Array.from(t.__childNodes||t.childNodes).find((e=>e["s-cr"]));const l=Array.from(e.__childNodes||e.childNodes);for(const e of n?l.reverse():l){if(e["s-sh"]!=null){Pe(t,e,n!=null?n:null);e["s-sh"]=void 0;je=true}}}h.o&=-2};var Ee=(e,t)=>{h.o|=1;const n=Array.from(e.__childNodes||e.childNodes);if(e["s-sr"]){let t=e;while(t=t.nextSibling){if(t&&t["s-sn"]===e["s-sn"]&&t["s-sh"]===we){n.push(t)}}}for(let e=n.length-1;e>=0;e--){const l=n[e];if(l["s-hn"]!==we&&l["s-ol"]){Pe(_e(l).parentNode,l,_e(l));l["s-ol"].remove();l["s-ol"]=void 0;l["s-sh"]=void 0;je=true}if(t){Ee(l,t)}}h.o&=-2};var xe=(e,t,n,l,r,i)=>{let s=e["s-cr"]&&e["s-cr"].parentNode||e;let o;if(s.shadowRoot&&s.tagName===we){s=s.shadowRoot}if(n.M==="template"){s=s.content}for(;r<=i;++r){if(l[r]){o=Ne(null,n,r);if(o){l[r].C=o;Pe(s,o,_e(t))}}}};var Ce=(e,t,n)=>{for(let l=t;l<=n;++l){const t=e[l];if(t){const e=t.C;Ue(t);if(e){{$e=true;if(e["s-ol"]){e["s-ol"].remove()}else{Ee(e,true)}}e.remove()}}}};var Le=(e,t,n,l,r=false)=>{let i=0;let s=0;let o=0;let f=0;let a=t.length-1;let c=t[0];let u=t[a];let v=l.length-1;let d=l[0];let p=l[v];let h;let y;const b=n.M==="template"?e.content:e;while(i<=a&&s<=v){if(c==null){c=t[++i]}else if(u==null){u=t[--a]}else if(d==null){d=l[++s]}else if(p==null){p=l[--v]}else if(Re(c,d,r)){Ae(c,d,r);c=t[++i];d=l[++s]}else if(Re(u,p,r)){Ae(u,p,r);u=t[--a];p=l[--v]}else if(Re(c,p,r)){if(c.M==="slot"||p.M==="slot"){Ee(c.C.parentNode,false)}Ae(c,p,r);Pe(b,c.C,u.C.nextSibling);c=t[++i];p=l[--v]}else if(Re(u,d,r)){if(c.M==="slot"||p.M==="slot"){Ee(u.C.parentNode,false)}Ae(u,d,r);Pe(b,u.C,c.C);u=t[--a];d=l[++s]}else{o=-1;{for(f=i;f<=a;++f){if(t[f]&&t[f].k!==null&&t[f].k===d.k){o=f;break}}}if(o>=0){y=t[o];if(y.M!==d.M){h=Ne(t&&t[s],n,o)}else{Ae(y,d,r);t[o]=void 0;h=y.C}d=l[++s]}else{h=Ne(t&&t[s],n,s);d=l[++s]}if(h){{Pe(_e(c.C).parentNode,h,_e(c.C))}}}}if(i>a){xe(e,l[v+1]==null?null:l[v+1].C,n,l,s,v)}else if(s>v){Ce(t,i,a)}};var Re=(e,t,n=false)=>{if(e.M===t.M){if(e.M==="slot"){return e.N===t.N}if(!n){return e.k===t.k}if(n&&!e.k&&t.k){e.k=t.k}return true}return false};var _e=e=>e&&e["s-ol"]||e;var Ae=(e,n,l=false)=>{const r=n.C=e.C;const i=e.S;const s=n.S;const o=n.M;const f=n.j;let a;if(f==null){{Oe=o==="svg"?true:o==="foreignObject"?false:Oe}{if(o==="slot"&&!ge){if(e.N!==n.N){n.C["s-sn"]=n.N||"";Me(n.C.parentElement)}}he(e,n,Oe)}if(i!==null&&s!==null){Le(r,i,n,s,l)}else if(s!==null){if(e.j!==null){r.textContent=""}xe(r,null,n,s,0,s.length-1)}else if(!l&&t.updatable&&i!==null){Ce(i,0,i.length-1)}else;if(Oe&&o==="svg"){Oe=false}}else if(a=r["s-cr"]){a.parentNode.textContent=f}else if(e.j!==f){r.data=f}};var Fe=[];var Te=e=>{let t;let n;let l;const r=e.__childNodes||e.childNodes;for(const e of r){if(e["s-sr"]&&(t=e["s-cr"])&&t.parentNode){n=t.parentNode.__childNodes||t.parentNode.childNodes;const r=e["s-sn"];for(l=n.length-1;l>=0;l--){t=n[l];if(!t["s-cn"]&&!t["s-nr"]&&t["s-hn"]!==e["s-hn"]&&(!t["s-sh"]||t["s-sh"]!==e["s-hn"])){if(U(t,r)){let n=Fe.find((e=>e.L===t));$e=true;t["s-sn"]=t["s-sn"]||r;if(n){n.L["s-sh"]=e["s-hn"];n.R=e}else{t["s-sh"]=e["s-hn"];Fe.push({R:e,L:t})}if(t["s-sr"]){Fe.map((e=>{if(U(e.L,t["s-sn"])){n=Fe.find((e=>e.L===t));if(n&&!e.R){e.R=n.R}}}))}}else if(!Fe.some((e=>e.L===t))){Fe.push({L:t})}}}}if(e.nodeType===1){Te(e)}}};var Ue=e=>{{if(e.O&&e.O.ref){Se.push((()=>e.O.ref(null)))}e.S&&e.S.map(Ue)}};var De=(e,t)=>{{ke.push((()=>e(t)))}};var He=()=>{{Se.forEach((e=>e()));Se.length=0;ke.forEach((e=>e()));ke.length=0}};var Pe=(e,t,n,l)=>{{if(typeof t["s-sn"]==="string"&&!!t["s-sr"]&&!!t["s-cr"]){We(t["s-cr"],t,e,t.parentElement)}else if(typeof t["s-sn"]==="string"){e.insertBefore(t,n);const{slotNode:r}=W(t);if(r&&!l)P(r);return t}}if(e.__insertBefore){return e.__insertBefore(t,n)}else{return e==null?void 0:e.insertBefore(t,n)}};function We(e,t,n,l){var r,i;let s;if(e&&typeof t["s-sn"]==="string"&&!!t["s-sr"]&&e.parentNode&&e.parentNode["s-sc"]&&(s=t["s-si"]||e.parentNode["s-sc"])){const e=t["s-sn"];const o=t["s-hn"];(r=n.classList)==null?void 0:r.add(s+"-s");if(l&&((i=l.classList)==null?void 0:i.contains(s+"-s"))){let t=(l.__childNodes||l.childNodes)[0];let n=false;while(t){if(t["s-sn"]!==e&&t["s-hn"]===o&&!!t["s-sr"]){n=true;break}t=t.nextSibling}if(!n)l.classList.remove(s+"-s")}}}var ze=(e,t,n=false)=>{var l,r,i,s,o;const f=e.$hostElement$;const a=e.t;const c=e._||X(null,null);const u=te(t);const v=u?t:Q(null,null,t);we=f.tagName;if(n&&v.O){for(const e of Object.keys(v.O)){if(f.hasAttribute(e)&&!["key","ref","style","class"].includes(e)){v.O[e]=f[e]}}}v.M=null;v.o|=4;e._=v;v.C=c.C=f.shadowRoot||f;{be=f["s-sc"]}ge=!!(a.o&1)&&!(a.o&128);{me=f["s-cr"];$e=false}Ae(c,v,n);{h.o|=1;if(je){Te(v.C);for(const e of Fe){const t=e.L;if(!t["s-ol"]&&d.document){const e=d.document.createTextNode("");e["s-nr"]=t;Pe(t.parentNode,t["s-ol"]=e,t,n)}}for(const e of Fe){const t=e.L;const o=e.R;if(t.nodeType===1&&n){t["s-ih"]=(l=t.hidden)!=null?l:false}if(o){const e=o.parentNode;let l=o.nextSibling;if(l&&l.nodeType===1){let n=(r=t["s-ol"])==null?void 0:r.previousSibling;while(n){let r=(i=n["s-nr"])!=null?i:null;if(r&&r["s-sn"]===t["s-sn"]&&e===(r.__parentNode||r.parentNode)){r=r.nextSibling;while(r===t||(r==null?void 0:r["s-sr"])){r=r==null?void 0:r.nextSibling}if(!r||!r["s-nr"]){l=r;break}}n=n.previousSibling}}const f=t.__parentNode||t.parentNode;const a=t.__nextSibling||t.nextSibling;if(!l&&e!==f||a!==l){if(t!==l){Pe(e,t,l,n);if(t.nodeType===8&&t.nodeValue.startsWith("s-nt-")){const e=d.document.createTextNode(t.nodeValue.replace(/^s-nt-/,""));e["s-hn"]=t["s-hn"];e["s-sn"]=t["s-sn"];e["s-sh"]=t["s-sh"];e["s-sr"]=t["s-sr"];e["s-ol"]=t["s-ol"];e["s-ol"]["s-nr"]=e;Pe(t.parentNode,e,t,n);t.parentNode.removeChild(t)}if(t.nodeType===1&&t.tagName!=="SLOT-FB"){t.hidden=(s=t["s-ih"])!=null?s:false}}}t&&typeof o["s-rf"]==="function"&&o["s-rf"](o)}else if(t.nodeType===1){t.hidden=true}}}if($e){_(v.C)}h.o&=-2;Fe.length=0}if(!ge&&!(a.o&1)&&f["s-cr"]){const e=v.C.__childNodes||v.C.childNodes;for(const t of e){if(t["s-hn"]!==we&&!t["s-sh"]){if(n&&t["s-ih"]==null){t["s-ih"]=(o=t.hidden)!=null?o:false}if(t.nodeType===1){t.hidden=true}else if(t.nodeType===3&&!!t.nodeValue.trim()){const e=d.document.createComment("s-nt-"+t.nodeValue);e["s-sn"]=t["s-sn"];Pe(t.parentNode,e,t,n);t.parentNode.removeChild(t)}}}}me=void 0;He()};var Be=(e,t)=>{if(t&&!e.A&&t["s-p"]){const n=t["s-p"].push(new Promise((l=>e.A=()=>{t["s-p"].splice(n-1,1);l()})))}};var Ve=(e,t)=>{{e.o|=16}if(e.o&4){e.o|=512;return}Be(e,e.F);const n=()=>qe(e,t);if(t){queueMicrotask((()=>{n()}));return}return M(n)};var qe=(e,t)=>{const n=e.$hostElement$;const l=B("scheduleUpdate",e.t.$);const r=n;if(!r){throw new Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`)}let i;if(t){i=Qe(r,"componentWillLoad",void 0,n)}else{i=Qe(r,"componentWillUpdate",void 0,n)}i=Ye(i,(()=>Qe(r,"componentWillRender",void 0,n)));l();return Ye(i,(()=>Ze(e,r,t)))};var Ye=(e,t)=>Ie(e)?e.then(t).catch((e=>{console.error(e);t()})):t();var Ie=e=>e instanceof Promise||e&&e.then&&typeof e.then==="function";var Ze=async(e,t,n)=>{var l;const r=e.$hostElement$;const i=B("update",e.t.$);const s=r["s-rc"];if(n){Z(e)}const o=B("render",e.t.$);{Ge(e,t,r,n)}if(s){s.map((e=>e()));r["s-rc"]=void 0}o();i();{const t=(l=r["s-p"])!=null?l:[];const n=()=>Je(e);if(t.length===0){n()}else{Promise.all(t).then(n).catch(n);e.o|=4;t.length=0}}};var Ge=(e,t,n,l)=>{try{t=t.render();{e.o&=-17}{e.o|=2}{{{ze(e,t,l)}}}}catch(t){a(t,e.$hostElement$)}return null};var Je=e=>{const t=e.t.$;const n=e.$hostElement$;const l=B("postUpdate",t);const r=n;const i=e.F;Qe(r,"componentDidRender",void 0,n);if(!(e.o&64)){e.o|=64;{Xe(n)}Qe(r,"componentDidLoad",void 0,n);l();{e.p(n);if(!i){Ke()}}}else{Qe(r,"componentDidUpdate",void 0,n);l()}{if(e.A){e.A();e.A=void 0}if(e.o&512){N((()=>Ve(e,false)))}e.o&=-517}};var Ke=t=>{N((()=>ae(d,"appload",{detail:{namespace:e}})))};var Qe=(e,t,n,l)=>{if(e&&e[t]){try{return e[t](n)}catch(e){a(e,l)}}return void 0};var Xe=e=>{var n;return e.classList.add((n=t.hydratedSelectorName)!=null?n:"hydrated")};var et=(e,t)=>s(e).i.get(t);var tt=(e,t,n,l)=>{const r=s(e);if(!r){return}const i=e;const o=r.i.get(t);const f=r.o;const c=i;n=se(n,l.l[t][0]);const u=Number.isNaN(o)&&Number.isNaN(n);const v=n!==o&&!u;if(v){r.i.set(t,n);if(l.T){const e=l.T[t];if(e){e.map((e=>{try{const[[l,i]]=Object.entries(e);if(f&128||i&1){if(!c){r.U.push((()=>{r.D[l](n,o,t)}))}else{c[l](n,o,t)}}}catch(e){a(e,i)}}))}}if(f&2){if(c.componentShouldUpdate){const e=c.componentShouldUpdate(n,o,t);if(e===false&&!(f&16)){return}}if(!(f&16)){Ve(r,false)}}}};var nt=(e,n,l)=>{var i,o;const f=e.prototype;{{if(e.watchers&&!n.T){n.T=ie(e.watchers)}if(e.deserializers&&!n.H){n.H=e.deserializers}if(e.serializers&&!n.P){n.P=e.serializers}}const l=Object.entries((i=n.l)!=null?i:{});l.map((([e,[t]])=>{if(t&31||t&32){const{get:l,set:i}=r(f,e)||{};if(l)n.l[e][0]|=2048;if(i)n.l[e][0]|=4096;{Object.defineProperty(f,e,{get(){{return l?l.apply(this):et(this,e)}},configurable:true,enumerable:true})}Object.defineProperty(f,e,{set(l){const r=s(this);if(!r){return}if(i){const s=t&32?this[e]:r.$hostElement$[e];if(typeof s==="undefined"&&r.i.get(e)){l=r.i.get(e)}i.apply(this,[se(l,t)]);l=t&32?this[e]:r.$hostElement$[e];tt(this,e,l,n);return}{tt(this,e,l,n);return}}})}}));{const r=new Map;f.attributeChangedCallback=function(e,i,o){h.jmp((()=>{var a;const c=r.get(e);const u=s(this);if(this.hasOwnProperty(c)&&t.lazyLoad);if(f.hasOwnProperty(c)&&typeof this[c]==="number"&&this[c]==o){return}else if(c==null){const t=u==null?void 0:u.o;if(u&&t&&!(t&8)&&o!==i){const l=this;const r=l;const s=(a=n.T)==null?void 0:a[e];s==null?void 0:s.forEach((n=>{const[[l,s]]=Object.entries(n);if(r[l]!=null&&(t&128||s&1)){r[l].call(r,o,i,e)}}))}return}const v=l.find((([e])=>e===c));const d=v&&v[1][0]&4;const p=d&&o===null&&this[c]===void 0;if(d){o=o===null||o==="false"?false:true}const h=Object.getOwnPropertyDescriptor(f,c);if(!p&&o!=this[c]&&(!h.get||!!h.set)){this[c]=o}}))};e.observedAttributes=Array.from(new Set([...Object.keys((o=n.T)!=null?o:{}),...l.filter((([e,t])=>t[0]&31)).map((([e,t])=>{const n=t[1]||e;r.set(n,e);return n}))]))}}return e};var lt=async(e,n,l,r)=>{let i;try{if((n.o&32)===0){n.o|=32;{i=e.constructor;const t=e.localName;customElements.whenDefined(t).then((()=>n.o|=128))}if(i&&i.style){let e;if(typeof i.style==="string"){e=i.style}const n=G(l);if(!c.has(n)||t.hotModuleReplacement){const t=B("registerStyles",l.$);Y(n,e,!!(l.o&1));t()}}}const r=n.F;const s=()=>Ve(n,true);if(r&&r["s-rc"]){r["s-rc"].push(s)}else{s()}}catch(t){a(t,e);if(n.A){n.A();n.A=void 0}if(n.p){n.p(e)}}};var rt=(e,t)=>{};var it=e=>{if((h.o&1)===0){const t=s(e);if(!t){return}const n=t.t;const l=B("connectedCallback",n.$);if(!(t.o&1)){t.o|=1;{if(n.o&(4|8)){st(e)}}{let n=e;while(n=n.parentNode||n.host){if(n["s-p"]){Be(t,t.F=n);break}}}if(n.l){Object.entries(n.l).map((([t,[n]])=>{if(n&31&&Object.prototype.hasOwnProperty.call(e,t)){const n=e[t];delete e[t];e[t]=n}}))}{lt(e,t,n)}}else{at(e,t,n.W);if(t==null?void 0:t.D);else if(t==null?void 0:t.v){t.v.then((()=>rt()))}}l()}};var st=e=>{if(!d.document){return}const t=e["s-cr"]=d.document.createComment("");t["s-cn"]=true;Pe(e,t,e.firstChild)};var ot=async e=>{if((h.o&1)===0){const t=s(e);{if(t==null?void 0:t.B){t.B.map((e=>e()));t.B=void 0}}}if(q.has(e)){q.delete(e)}if(e.shadowRoot&&q.has(e.shadowRoot)){q.delete(e.shadowRoot)}};var ft=(e,t)=>{const n={o:t[0],$:t[1]};try{{n.l=t[2]}{n.W=t[3]}{n.T=ie(e.T);n.H=e.H;n.P=e.P}const l=e.prototype.connectedCallback;const r=e.prototype.disconnectedCallback;Object.assign(e.prototype,{__hasHostListenerAttached:false,__registerHost(){o(this,n)},connectedCallback(){if(!this.__hasHostListenerAttached){const e=s(this);if(!e){return}at(this,e,n.W);this.__hasHostListenerAttached=true}it(this);if(l){l.call(this)}},disconnectedCallback(){ot(this);if(r){r.call(this)}},__attachShadow(){{if(!this.shadowRoot){R.call(this,n)}else{if(this.shadowRoot.mode!=="open"){throw new Error(`Unable to re-use existing shadow root for ${n.$}! Mode is set to ${this.shadowRoot.mode} but Stencil only supports open shadow roots.`)}}}}});Object.defineProperty(e,"is",{value:n.$,configurable:true});return nt(e,n)}catch(t){a(t);return e}};var at=(e,t,n,l)=>{if(n&&d.document){n.map((([n,l,r])=>{const i=e;const s=ct(t,r);const o=ut(n);h.ael(i,l,s,o);(t.B=t.B||[]).push((()=>h.rel(i,l,s,o)))}))}};var ct=(e,t)=>n=>{try{{e.$hostElement$[t](n)}}catch(t){a(t,e.$hostElement$)}};var ut=e=>y?{passive:(e&1)!==0,capture:(e&2)!==0}:(e&2)!==0;var vt=e=>h.m=e;var dt=e=>Object.assign(h,e);var pt=new WeakMap;function ht(e,t){let n=pt.get(t);if(!n){const e={o:0,$:t.tagName};n={o:0,t:e,$hostElement$:t};pt.set(t,n)}ze(n,e)}function yt(e){return e}export{p as H,ee as a,fe as c,E as getAssetPath,Q as h,ft as p,ht as render,x as setAssetPath,vt as setNonce,dt as setPlatformOptions,yt as t};
+//# sourceMappingURL=index.js.map