@ds-mo/ui 0.3.0 → 0.4.0

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

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

package/dist/components/ds-menu.js

@@ -0,0 +1,2 @@
+import{p as e,H as t,c as s,h as i,a as n,t as o}from"./index.js";const r=()=>`.menu-popup.sc-ds-menu{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-125);box-shadow:var(--effect-elevation-elevated-floating);display:flex;flex-direction:column;min-width:200px;max-width:600px;overflow:hidden;animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{padding:var(--dimension-space-050);display:flex;flex-direction:column;gap:var(--dimension-space-025)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{padding:var(--dimension-space-050) var(--dimension-space-075);display:flex;align-items:center;height:var(--dimension-size-400);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);border:none;background:transparent;border-radius:var(--dimension-radius-075);cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;width:100%;min-height:var(--dimension-size-400);box-sizing:border-box;transition:background-color var(--effect-motion-short-2);position:relative;color:inherit}.menu-item.sc-ds-menu:hover:not(:disabled){background-color:var(--color-interaction-hover)}.menu-item.sc-ds-menu:active:not(:disabled){background-color:var(--color-interaction-pressed)}.menu-item--focused.sc-ds-menu:not(:disabled){background-color:var(--color-interaction-hover)}.menu-item.sc-ds-menu:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:-2px}.menu-item--selected.sc-ds-menu{background-color:var(--color-interaction-hover)}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{flex:1;display:flex;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{color:var(--color-foreground-secondary)}.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);background-color:var(--color-background-translucent);border-radius:var(--dimension-radius-125);position:relative;flex-shrink:0;transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-foreground-on-bold-background-primary);border-radius:50%;position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const a=220;const c=4;const d=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.positionReady=false;requestAnimationFrame((()=>{this.calculatePosition();this.positionReady=true;this.focusFirstItem();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),a)}}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>e.items))}calculatePosition(){const e=this.resolvedAnchor;if(!e)return;const t=this.el.querySelector(".menu-popup");if(!t)return;const s=e.getBoundingClientRect();const i=t.offsetWidth||200;const n=t.offsetHeight||160;let o=0,r=0;switch(this.side){case"top":r=s.top-n-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":r=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;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,c),window.innerWidth-i-c),y:Math.min(Math.max(r,c),window.innerHeight-n-c)}}focusFirstItem(){const e=this.flatItems;const t=e.findIndex((e=>!e.isInactive));this.focusedIndex=t>=0?t:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const t=e.target;const s=this.el.querySelector(".menu-popup");const i=this.resolvedAnchor;if(s?.contains(t)||i?.contains(t))return;this.close()};this.scrollResizeHandler=()=>this.calculatePosition();document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false}handleKeyDown(e){if(!this.open)return;const t=this.flatItems;const s=t.map(((e,t)=>({it:e,i:t}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!s.length)return;const i=s.indexOf(this.focusedIndex);const n=i<0?0:i;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const t=this.el.querySelectorAll(".menu-item");t[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}render(){if(!this.shouldRender)return i(n,{style:{display:"contents"}});const e=this.activeSections;let t=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return i(n,{style:{display:"contents"}},i("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((s,n)=>i("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1},role:s.header?"group":undefined,"aria-label":s.header},s.header&&i("div",{class:"section-header","aria-hidden":"true"},i("span",{class:"text-body-small-emphasis section-label"},s.header)),s.items.map((e=>{const s=t++;const n=this.focusedIndex===s;return i("button",{key:s,type:"button",class:{"menu-item":true,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem",disabled:e.isInactive,tabIndex:n?0:-1,onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=s}},i("div",{class:"menu-item__content"},i("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&i("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&i("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},i("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return r()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["ds-menu"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),d)}break}}))}u();const m=d;const h=u;export{m as DsMenu,h as defineCustomElement};
+//# sourceMappingURL=ds-menu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["menuCss","CLOSE_ANIMATION_MS","VP_PAD","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","sideOffset","alignOffset","shouldRender","closing","pos","x","y","focusedIndex","positionReady","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","requestAnimationFrame","calculatePosition","focusFirstItem","setupListeners","setTimeout","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","s","anchorEl","popup","el","querySelector","a","getBoundingClientRect","pw","offsetWidth","ph","offsetHeight","top","left","right","width","bottom","height","Math","min","max","window","innerWidth","innerHeight","flat","idx","findIndex","it","isInactive","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","handleItemClick","item","dsSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","section","si","header","undefined","isFocused","type","isSelected","isDestructive","disabled","tabIndex","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":[".menu-popup {\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-125);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  display: flex;\n  flex-direction: column;\n  min-width: 200px;\n  max-width: 600px;\n  overflow: hidden;\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n/* Sections */\n.menu-section {\n  padding: var(--dimension-space-050);\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n\n.menu-section--divided {\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n.section-header {\n  padding: var(--dimension-space-050) var(--dimension-space-075);\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.section-label { color: var(--color-foreground-secondary); }\n\n/* Items */\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  border: none;\n  background: transparent;\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  box-sizing: border-box;\n  transition: background-color var(--effect-motion-short-2);\n  position: relative;\n  color: inherit;\n}\n\n.menu-item:hover:not(:disabled) { background-color: var(--color-interaction-hover); }\n.menu-item:active:not(:disabled) { background-color: var(--color-interaction-pressed); }\n.menu-item--focused:not(:disabled) { background-color: var(--color-interaction-hover); }\n\n.menu-item:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: -2px;\n}\n\n.menu-item--selected { background-color: var(--color-interaction-hover); }\n.menu-item--inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n.menu-item--destructive .menu-item__label { color: var(--color-foreground-bold-negative) !important; }\n\n.menu-item__content {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.menu-item__label { color: var(--color-foreground-secondary); }\n.menu-item--selected .menu-item__label { color: var(--color-foreground-primary); }\n\n.menu-item__subtext {\n  color: var(--color-foreground-secondary);\n  line-height: 1.4;\n}\n\n/* Toggle */\n.menu-item__toggle {\n  width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  height: var(--dimension-size-250);\n  background-color: var(--color-background-translucent);\n  border-radius: var(--dimension-radius-125);\n  position: relative;\n  flex-shrink: 0;\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on { background-color: var(--color-background-medium-brand); }\n\n.menu-item__toggle-thumb {\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  background-color: var(--color-foreground-on-bold-background-primary);\n  border-radius: 50%;\n  position: absolute;\n  top: var(--dimension-space-025);\n  left: var(--dimension-space-025);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n  transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\n\nexport type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  showToggle?: boolean;\n  toggleValue?: boolean;\n}\n\nexport interface MenuSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nconst CLOSE_ANIMATION_MS = 220;\nconst VP_PAD = 4;\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  @Prop() sideOffset: number = 4;\n  @Prop() alignOffset: number = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      requestAnimationFrame(() => {\n        this.calculatePosition();\n        this.positionReady = true;\n        this.focusFirstItem();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, CLOSE_ANIMATION_MS);\n    }\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(s => s.items);\n  }\n\n  private calculatePosition() {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return;\n\n    const a = anchorEl.getBoundingClientRect();\n    const pw = popup.offsetWidth || 200;\n    const ph = popup.offsetHeight || 160;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - ph - this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 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 - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'left':\n        x = a.left - pw - this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 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 - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n    }\n\n    this.pos = {\n      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),\n      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),\n    };\n  }\n\n  private focusFirstItem() {\n    const flat = this.flatItems;\n    const idx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = idx >= 0 ? idx : 0;\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => this.calculatePosition();\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.open) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n    this.close();\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\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: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label=\"Menu\"\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\n              )}\n              {section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/ds-modal.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","CLOSE_ANIMATION_MS","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","modalWidth","shouldRender","closing","instanceId","titleId","subtitleId","previousFocus","escapeHandler","tabHandler","closeTimer","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","document","activeElement","requestAnimationFrame","focusFirst","setupListeners","setTimeout","focus","dialog","el","querySelector","focusables","getFocusables","root","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","e","key","preventDefault","close","length","first","last","active","shiftKey","contains","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleBackdropMouseDown","target","currentTarget","resolvedWidth","render","hidden","h","Host","style","display","class","onMouseDown","position","inset","zIndex","alignItems","justifyContent","padding","role","subtitle","undefined","tabIndex","width","id","heading","name"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[".modal-backdrop {\n  background-color: var(--color-background-shade);\n  backdrop-filter: blur(var(--effect-blur-sm));\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n.modal-dialog {\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 32px);\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-275, 22px);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n.modal-header {\n  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n  flex-shrink: 0;\n}\n\n.modal-title {\n  margin: 0;\n}\n\n.modal-subtitle {\n  margin-top: var(--dimension-space-100);\n  color: var(--color-foreground-secondary);\n  text-wrap: balance;\n}\n\n.modal-body {\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.modal-footer {\n  padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n  flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm, 400px)',\n  md: 'var(--dimension-modal-width-md, 560px)',\n  lg: 'var(--dimension-modal-width-lg, 720px)',\n};\n\nconst CLOSE_ANIMATION_MS = 220;\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() subtitle: string | undefined;\n  @Prop() modalWidth: ModalWidth | string = 'md';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n\n  private instanceId = ++modalIdCounter;\n  private titleId = `ds-modal-title-${modalIdCounter}`;\n  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n  private previousFocus: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      requestAnimationFrame(() => {\n        this.focusFirst();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n        this.previousFocus?.focus?.();\n        this.previousFocus = null;\n      }, CLOSE_ANIMATION_MS);\n    }\n  }\n\n  private focusFirst() {\n    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n    if (!dialog) return;\n    const focusables = this.getFocusables(dialog);\n    (focusables[0] ?? dialog).focus();\n  }\n\n  private getFocusables(root: HTMLElement): HTMLElement[] {\n    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n    );\n  }\n\n  private setupListeners() {\n    this.escapeHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') { e.preventDefault(); this.close(); }\n    };\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n      if (!dialog) return;\n      const focusables = this.getFocusables(dialog);\n      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (e.shiftKey) {\n        if (active === first || active === dialog || !dialog.contains(active)) {\n          e.preventDefault(); last.focus();\n        }\n      } else {\n        if (active === last || !dialog.contains(active)) {\n          e.preventDefault(); first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', this.escapeHandler);\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownListeners() {\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  private handleBackdropMouseDown(e: MouseEvent) {\n    if (e.target === e.currentTarget) this.close();\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  render() {\n    // Always render slots so scoped-mode slot distribution doesn't leak content.\n    // The backdrop is hidden via CSS when not active.\n    const hidden = !this.shouldRender && !this.closing;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n        >\n          <div\n            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.titleId}\n            aria-describedby={this.subtitle ? this.subtitleId : undefined}\n            tabIndex={-1}\n            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 32px))` }}\n          >\n            <div class=\"modal-header\">\n              <h2 id={this.titleId} class=\"text-title-small modal-title\">{this.heading}</h2>\n              {this.subtitle && (\n                <div id={this.subtitleId} class=\"modal-subtitle text-body-medium\">\n                  {this.subtitle}\n                </div>\n              )}\n            </div>\n            <div class=\"modal-body\">\n              <slot />\n            </div>\n            <div class=\"modal-footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/ds-pagination.js

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

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

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

package/dist/components/ds-radio-group.d.ts

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

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

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

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

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

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

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

package/dist/components/ds-scrollbar.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["scrollbarCss","Scrollbar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","showTrackOnHover","thumbHeight","thumbTop","thumbWidth","thumbLeft","isDragging","isDraggingH","isPointerInside","contentEl","resizeObserver","scrollHandler","dragStartY","dragStartScrollTop","dragStartX","dragStartScrollLeft","componentDidLoad","el","querySelector","updateThumb","addEventListener","ResizeObserver","observe","window","disconnectedCallback","removeEventListener","disconnect","container","content","cH","clientHeight","cW","clientWidth","sH","scrollHeight","sW","scrollWidth","st","scrollTop","sl","scrollLeft","h","Math","max","w","handleThumbMouseDown","e","preventDefault","stopPropagation","clientY","onMove","ev","deltaY","scrollable","ratio","min","onUp","document","handleThumbHMouseDown","clientX","deltaX","render","showThumb","showThumbH","isScrollable","showTrack","Host","key","style","display","class","onMouseEnter","onMouseLeave","tabIndex","undefined","height","top","onMouseDown","width","left"],"sources":["src/wc/components/Scrollbar/Scrollbar.css?tag=ds-scrollbar&encapsulation=scoped","src/wc/components/Scrollbar/Scrollbar.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.scrollbar-container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.scrollbar-content {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n\n.scrollbar-content::-webkit-scrollbar {\n  display: none;\n}\n\n.scrollbar-content: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/* ─── Vertical track ────────────────────────────────────────────────────────── */\n\n.scrollbar-track {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: var(--dimension-size-050, 4px);\n  pointer-events: none;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.scrollbar-container[data-show-track='true'] .scrollbar-track {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.scrollbar-thumb {\n  position: absolute;\n  right: 0;\n  width: var(--dimension-size-050, 4px);\n  cursor: grab;\n  border-radius: 0;\n  background-color: var(--color-foreground-quaternary);\n  transition: background-color var(--effect-motion-short-2);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.scrollbar-thumb:active {\n  cursor: grabbing;\n}\n\n/* ─── Horizontal track ──────────────────────────────────────────────────────── */\n\n.scrollbar-track-h {\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  height: var(--dimension-size-050, 4px);\n  pointer-events: none;\n  z-index: 10;\n  opacity: 0;\n  transition: opacity var(--effect-motion-short-2);\n}\n\n.scrollbar-container[data-show-track='true'] .scrollbar-track-h {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.scrollbar-thumb-h {\n  position: absolute;\n  bottom: 0;\n  height: var(--dimension-size-050, 4px);\n  cursor: grab;\n  border-radius: 0;\n  background-color: var(--color-foreground-quaternary);\n  transition: background-color var(--effect-motion-short-2);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.scrollbar-thumb-h:active {\n  cursor: grabbing;\n}\n\n/* ─── Thick variant ─────────────────────────────────────────────────────────── */\n\n.scrollbar-container--thick .scrollbar-track       { width:  var(--dimension-size-100, 8px); }\n.scrollbar-container--thick .scrollbar-thumb       { width:  var(--dimension-size-100, 8px); }\n.scrollbar-container--thick .scrollbar-track-h     { height: var(--dimension-size-100, 8px); }\n.scrollbar-container--thick .scrollbar-thumb-h     { height: var(--dimension-size-100, 8px); }\n","import { Component, Prop, State, Element, h, Host } from '@stencil/core';\n\nexport type ScrollbarVariant = 'default' | 'thick';\n\n@Component({\n  tag: 'ds-scrollbar',\n  styleUrl: 'Scrollbar.css',\n  scoped: true,\n})\nexport class Scrollbar {\n  @Element() el!: HTMLElement;\n\n  @Prop() variant: ScrollbarVariant = 'default';\n  @Prop() showTrackOnHover: boolean = true;\n\n  @State() private thumbHeight: number = 0;\n  @State() private thumbTop: number = 0;\n  @State() private thumbWidth: number = 0;\n  @State() private thumbLeft: number = 0;\n  @State() private isDragging: boolean = false;\n  @State() private isDraggingH: boolean = false;\n  @State() private isPointerInside: boolean = false;\n\n  private contentEl: HTMLElement | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n  private scrollHandler: (() => void) | null = null;\n\n  // Drag state (not reactive — no re-render needed)\n  private dragStartY = 0;\n  private dragStartScrollTop = 0;\n  private dragStartX = 0;\n  private dragStartScrollLeft = 0;\n\n  componentDidLoad() {\n    this.contentEl = this.el.querySelector('.scrollbar-content') as HTMLElement | null;\n    if (!this.contentEl) return;\n\n    this.scrollHandler = () => this.updateThumb();\n    this.contentEl.addEventListener('scroll', this.scrollHandler);\n\n    this.resizeObserver = new ResizeObserver(() => this.updateThumb());\n    this.resizeObserver.observe(this.contentEl);\n    window.addEventListener('resize', this.scrollHandler);\n\n    this.updateThumb();\n  }\n\n  disconnectedCallback() {\n    if (this.contentEl && this.scrollHandler) {\n      this.contentEl.removeEventListener('scroll', this.scrollHandler);\n    }\n    if (this.scrollHandler) {\n      window.removeEventListener('resize', this.scrollHandler);\n    }\n    this.resizeObserver?.disconnect();\n  }\n\n  private updateThumb() {\n    const container = this.el.querySelector('.scrollbar-container') as HTMLElement | null;\n    const content = this.contentEl;\n    if (!container || !content) return;\n\n    const cH = container.clientHeight;\n    const cW = container.clientWidth;\n    const sH = content.scrollHeight;\n    const sW = content.scrollWidth;\n    const st = content.scrollTop;\n    const sl = content.scrollLeft;\n\n    if (sH <= cH) {\n      this.thumbHeight = 0;\n    } else {\n      const h = Math.max(20, cH * (cH / sH));\n      this.thumbHeight = h;\n      this.thumbTop = (st / (sH - cH)) * (cH - h);\n    }\n\n    if (sW <= cW) {\n      this.thumbWidth = 0;\n    } else {\n      const w = Math.max(20, cW * (cW / sW));\n      this.thumbWidth = w;\n      this.thumbLeft = (sl / (sW - cW)) * (cW - w);\n    }\n  }\n\n  private handleThumbMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    const content = this.contentEl;\n    if (!content) return;\n\n    this.isDragging = true;\n    this.dragStartY = e.clientY;\n    this.dragStartScrollTop = content.scrollTop;\n\n    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaY = ev.clientY - this.dragStartY;\n      const scrollable = content.scrollHeight - container.clientHeight;\n      const ratio = scrollable / (container.clientHeight - this.thumbHeight);\n      content.scrollTop = Math.max(0, Math.min(scrollable, this.dragStartScrollTop + deltaY * ratio));\n    };\n    const onUp = () => {\n      this.isDragging = false;\n      document.removeEventListener('mousemove', onMove);\n      document.removeEventListener('mouseup', onUp);\n    };\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onUp);\n  }\n\n  private handleThumbHMouseDown(e: MouseEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    const content = this.contentEl;\n    if (!content) return;\n\n    this.isDraggingH = true;\n    this.dragStartX = e.clientX;\n    this.dragStartScrollLeft = content.scrollLeft;\n\n    const container = this.el.querySelector('.scrollbar-container') as HTMLElement;\n\n    const onMove = (ev: MouseEvent) => {\n      const deltaX = ev.clientX - this.dragStartX;\n      const scrollable = content.scrollWidth - container.clientWidth;\n      const ratio = scrollable / (container.clientWidth - this.thumbWidth);\n      content.scrollLeft = Math.max(0, Math.min(scrollable, this.dragStartScrollLeft + deltaX * ratio));\n    };\n    const onUp = () => {\n      this.isDraggingH = false;\n      document.removeEventListener('mousemove', onMove);\n      document.removeEventListener('mouseup', onUp);\n    };\n    document.addEventListener('mousemove', onMove);\n    document.addEventListener('mouseup', onUp);\n  }\n\n  render() {\n    const showThumb  = this.thumbHeight > 0;\n    const showThumbH = this.thumbWidth > 0;\n    const isScrollable = showThumb || showThumbH;\n    const showTrack = this.showTrackOnHover && (this.isPointerInside || this.isDragging || this.isDraggingH);\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{\n            'scrollbar-container': true,\n            'scrollbar-container--thick': this.variant === 'thick',\n          }}\n          data-show-track={showTrack ? 'true' : 'false'}\n          data-dragging={this.isDragging || this.isDraggingH}\n          onMouseEnter={() => { if (this.showTrackOnHover) this.isPointerInside = true; }}\n          onMouseLeave={() => { this.isPointerInside = false; }}\n        >\n          <div\n            class=\"scrollbar-content\"\n            tabIndex={isScrollable ? 0 : undefined}\n          >\n            <slot />\n          </div>\n\n          {showThumb && (\n            <div class=\"scrollbar-track\" aria-hidden=\"true\">\n              <div\n                class=\"scrollbar-thumb\"\n                style={{ height: `${this.thumbHeight}px`, top: `${this.thumbTop}px` }}\n                onMouseDown={(e: MouseEvent) => this.handleThumbMouseDown(e)}\n              />\n            </div>\n          )}\n\n          {showThumbH && (\n            <div class=\"scrollbar-track-h\" aria-hidden=\"true\">\n              <div\n                class=\"scrollbar-thumb-h\"\n                style={{ width: `${this.thumbWidth}px`, left: `${this.thumbLeft}px` }}\n                onMouseDown={(e: MouseEvent) => this.handleThumbHMouseDown(e)}\n              />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/ds-sidebar.js

@@ -0,0 +1,2 @@
+import{p as s,H as i,c as e,h as t,a as o,t as r}from"./index.js";const a=()=>`.sc-ds-sidebar-h{display:contents}.backdrop.sc-ds-sidebar{position:fixed;inset:0;background-color:var(--color-background-shade);z-index:9996}.sidebar.sc-ds-sidebar{display:flex;flex-direction:column;height:100%;background-color:var(--color-background-secondary);border-right:var(--dimension-stroke-width-015) solid var(--color-border-primary);position:relative;flex-shrink:0;overflow:hidden;transition:width var(--effect-motion-short-2);box-sizing:border-box}.sidebar--resizing.sc-ds-sidebar{transition:none}.sidebar--collapsed.sc-ds-sidebar{width:0 !important;border-right:none}.sidebar--mobile.sc-ds-sidebar{position:fixed;top:0;left:0;bottom:0;z-index:9997}.sidebar--mini.sc-ds-sidebar-s>[data-sidebar-label],.sidebar--mini .sc-ds-sidebar-s>[data-sidebar-label],.sidebar--mini.sc-ds-sidebar-s>[data-sidebar-badge],.sidebar--mini .sc-ds-sidebar-s>[data-sidebar-badge],.sidebar--mini.sc-ds-sidebar-s>[data-sidebar-section-header],.sidebar--mini .sc-ds-sidebar-s>[data-sidebar-section-header]{display:none}.sidebar__content.sc-ds-sidebar{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--dimension-space-050);scrollbar-width:none}.sidebar__content.sc-ds-sidebar::-webkit-scrollbar{display:none}.sidebar__footer.sc-ds-sidebar{flex-shrink:0;padding:var(--dimension-space-050);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.sidebar__footer.sc-ds-sidebar:empty{display:none}.sidebar__resize-handle.sc-ds-sidebar{position:absolute;top:0;right:-3px;bottom:0;width:6px;cursor:col-resize;z-index:10}.sidebar__resize-handle.sc-ds-sidebar:hover{background-color:var(--color-border-brand);opacity:0.5}.sidebar__resize-handle.sc-ds-sidebar:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-brand);outline-offset:var(--dimension-stroke-width-015);background-color:var(--color-border-brand);opacity:0.5}`;const d=56;const n=240;const l=480;const c=180;const h=140;const b=16;const u=["a[href]","button:not([disabled])","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])'].join(",");const m=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToggle=e(this,"dsToggle");this.dsWidthChange=e(this,"dsWidthChange");this.collapsed=false;this.width="default";this.resizable=true;this.mobile=false;this.isResizing=false;this.triggerEl=null;this.escapeHandler=null;this.tabHandler=null;this.mouseMoveHandler=null;this.mouseUpHandler=null}get resolvedWidth(){if(this.width==="mini")return d;if(this.width==="default")return n;return this.width}get isMobileOpen(){return this.mobile&&!this.collapsed}onCollapsedChange(){if(this.isMobileOpen){this.setupMobileFocusTrap()}else{this.teardownMobileFocusTrap()}}componentDidLoad(){if(this.isMobileOpen){this.setupMobileFocusTrap()}if(this.mobile){this.escapeHandler=s=>{if(s.key==="Escape"&&!this.collapsed){this.dsToggle.emit()}};document.addEventListener("keydown",this.escapeHandler)}}disconnectedCallback(){this.teardownMobileFocusTrap();if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}this.cleanupMouseHandlers()}setupMobileFocusTrap(){this.triggerEl=document.activeElement;const s=()=>Array.from(this.el.querySelectorAll(u)).filter((s=>!s.hasAttribute("aria-hidden")&&s.offsetParent!==null));const i=s();(i[0]??this.el).focus();this.tabHandler=i=>{if(i.key!=="Tab")return;const e=s();if(!e.length){i.preventDefault();this.el.focus();return}const t=e[0];const o=e[e.length-1];const r=document.activeElement;if(i.shiftKey&&(r===t||!this.el.contains(r))){i.preventDefault();o.focus()}else if(!i.shiftKey&&(r===o||!this.el.contains(r))){i.preventDefault();t.focus()}};document.addEventListener("keydown",this.tabHandler)}teardownMobileFocusTrap(){if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}this.triggerEl?.focus?.();this.triggerEl=null}cleanupMouseHandlers(){if(this.mouseMoveHandler)document.removeEventListener("mousemove",this.mouseMoveHandler);if(this.mouseUpHandler)document.removeEventListener("mouseup",this.mouseUpHandler);this.mouseMoveHandler=null;this.mouseUpHandler=null;document.body.style.cursor="";document.body.style.userSelect=""}handleResizeMouseDown(s){if(!this.resizable)return;s.preventDefault();this.isResizing=true;this.mouseMoveHandler=s=>{const i=s.clientX;if(i<h){this.dsWidthChange.emit("mini")}else if(i<c){this.dsWidthChange.emit("default")}else{this.dsWidthChange.emit(i)}};this.mouseUpHandler=()=>{this.isResizing=false;this.cleanupMouseHandlers()};document.body.style.cursor="col-resize";document.body.style.userSelect="none";document.addEventListener("mousemove",this.mouseMoveHandler);document.addEventListener("mouseup",this.mouseUpHandler)}handleResizeKeyDown(s){if(!this.resizable)return;const i=this.width;const e=this.resolvedWidth;switch(s.key){case"ArrowLeft":{s.preventDefault();if(i==="mini")return;const t=e-b;this.dsWidthChange.emit(t<c?"mini":t);break}case"ArrowRight":{s.preventDefault();if(i==="mini"){this.dsWidthChange.emit("default");return}this.dsWidthChange.emit(Math.min(e+b,l));break}case"Home":s.preventDefault();this.dsWidthChange.emit("mini");break;case"End":s.preventDefault();this.dsWidthChange.emit(l);break}}render(){if(this.collapsed&&!this.mobile)return null;const s=this.width==="mini";const i=this.isMobileOpen;const e=this.collapsed?0:this.resolvedWidth;const r=i?{role:"dialog","aria-modal":"true",tabIndex:-1}:{role:"navigation"};return t(o,null,this.mobile&&!this.collapsed&&t("div",{class:"backdrop",onClick:()=>this.dsToggle.emit(),"aria-hidden":"true"}),t("aside",{class:{sidebar:true,"sidebar--mini":s,"sidebar--mobile":this.mobile,"sidebar--collapsed":this.collapsed,"sidebar--resizing":this.isResizing},style:{width:`${e}px`},"aria-label":"Sidebar",...r},t("div",{class:"sidebar__content"},t("slot",null)),t("div",{class:"sidebar__footer"},t("slot",{name:"footer"})),this.resizable&&!this.mobile&&t("div",{class:"sidebar__resize-handle",onMouseDown:s=>this.handleResizeMouseDown(s),onKeyDown:s=>this.handleResizeKeyDown(s),role:"separator","aria-orientation":"vertical","aria-label":"Resize sidebar","aria-valuenow":this.resolvedWidth,"aria-valuemin":d,"aria-valuemax":l,tabIndex:0})))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}]}}static get style(){return a()}},[262,"ds-sidebar",{collapsed:[1028],width:[8],resizable:[4],mobile:[4],isResizing:[32]},undefined,{collapsed:[{onCollapsedChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const s=["ds-sidebar"];s.forEach((s=>{switch(s){case"ds-sidebar":if(!customElements.get(r(s))){customElements.define(r(s),m)}break}}))}f();const p=m;const g=f;export{p as DsSidebar,g as defineCustomElement};
+//# sourceMappingURL=ds-sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["sidebarCss","MINI_WIDTH","DEFAULT_WIDTH","MAX_WIDTH","MIN_DRAG_WIDTH","SNAP_THRESHOLD","KEYBOARD_STEP","FOCUSABLE_SEL","join","Sidebar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","collapsed","width","resizable","mobile","isResizing","triggerEl","escapeHandler","tabHandler","mouseMoveHandler","mouseUpHandler","resolvedWidth","isMobileOpen","onCollapsedChange","setupMobileFocusTrap","teardownMobileFocusTrap","componentDidLoad","e","key","dsToggle","emit","document","addEventListener","disconnectedCallback","removeEventListener","cleanupMouseHandlers","activeElement","focusables","Array","from","el","querySelectorAll","filter","hasAttribute","offsetParent","initial","focus","items","length","preventDefault","first","last","active","shiftKey","contains","body","style","cursor","userSelect","handleResizeMouseDown","ev","newW","clientX","dsWidthChange","handleResizeKeyDown","w","resolved","next","Math","min","render","isMini","sidebarWidth","dialogProps","role","tabIndex","h","Host","class","onClick","sidebar","name","onMouseDown","onKeyDown"],"sources":["src/wc/components/Sidebar/Sidebar.css?tag=ds-sidebar&encapsulation=scoped","src/wc/components/Sidebar/Sidebar.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  background-color: var(--color-background-shade);\n  z-index: 9996;\n}\n\n.sidebar {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--color-background-secondary);\n  border-right: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n  position: relative;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: width var(--effect-motion-short-2);\n  box-sizing: border-box;\n}\n\n.sidebar--resizing { transition: none; }\n\n.sidebar--collapsed {\n  width: 0 !important;\n  border-right: none;\n}\n\n.sidebar--mobile {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  z-index: 9997;\n}\n\n/* Hide labels/badges/section headers when mini */\n.sidebar--mini ::slotted([data-sidebar-label]),\n.sidebar--mini ::slotted([data-sidebar-badge]),\n.sidebar--mini ::slotted([data-sidebar-section-header]) {\n  display: none;\n}\n\n.sidebar__content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: var(--dimension-space-050);\n  scrollbar-width: none;\n}\n\n.sidebar__content::-webkit-scrollbar { display: none; }\n\n.sidebar__footer {\n  flex-shrink: 0;\n  padding: var(--dimension-space-050);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.sidebar__footer:empty { display: none; }\n\n.sidebar__resize-handle {\n  position: absolute;\n  top: 0;\n  right: -3px;\n  bottom: 0;\n  width: 6px;\n  cursor: col-resize;\n  z-index: 10;\n}\n\n.sidebar__resize-handle:hover {\n  background-color: var(--color-border-brand);\n  opacity: 0.5;\n}\n\n.sidebar__resize-handle:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-brand);\n  outline-offset: var(--dimension-stroke-width-015);\n  background-color: var(--color-border-brand);\n  opacity: 0.5;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\n\nexport type SidebarWidth = 'mini' | 'default' | number;\n\nconst MINI_WIDTH = 56;\nconst DEFAULT_WIDTH = 240;\nconst MAX_WIDTH = 480;\nconst MIN_DRAG_WIDTH = 180;\nconst SNAP_THRESHOLD = 140;\nconst KEYBOARD_STEP = 16;\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'button:not([disabled])',\n  'input:not([disabled])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\n@Component({\n  tag: 'ds-sidebar',\n  styleUrl: 'Sidebar.css',\n  scoped: true,\n})\nexport class Sidebar {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) collapsed: boolean = false;\n  @Prop() width: SidebarWidth = 'default';\n  @Prop() resizable: boolean = true;\n  @Prop() mobile: boolean = false;\n\n  @State() private isResizing: boolean = false;\n\n  @Event() dsToggle!: EventEmitter<void>;\n  @Event() dsWidthChange!: EventEmitter<SidebarWidth>;\n\n  private triggerEl: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private mouseMoveHandler: ((e: MouseEvent) => void) | null = null;\n  private mouseUpHandler: (() => void) | null = null;\n\n  private get resolvedWidth(): number {\n    if (this.width === 'mini') return MINI_WIDTH;\n    if (this.width === 'default') return DEFAULT_WIDTH;\n    return this.width as number;\n  }\n\n  private get isMobileOpen(): boolean {\n    return this.mobile && !this.collapsed;\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange() {\n    if (this.isMobileOpen) {\n      this.setupMobileFocusTrap();\n    } else {\n      this.teardownMobileFocusTrap();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.isMobileOpen) {\n      this.setupMobileFocusTrap();\n    }\n    if (this.mobile) {\n      this.escapeHandler = (e: KeyboardEvent) => {\n        if (e.key === 'Escape' && !this.collapsed) {\n          this.dsToggle.emit();\n        }\n      };\n      document.addEventListener('keydown', this.escapeHandler);\n    }\n  }\n\n  disconnectedCallback() {\n    this.teardownMobileFocusTrap();\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    this.cleanupMouseHandlers();\n  }\n\n  private setupMobileFocusTrap() {\n    this.triggerEl = document.activeElement as HTMLElement | null;\n\n    const focusables = () =>\n      Array.from(this.el.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n        el => !el.hasAttribute('aria-hidden') && el.offsetParent !== null,\n      );\n\n    const initial = focusables();\n    (initial[0] ?? this.el).focus();\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const items = focusables();\n      if (!items.length) { e.preventDefault(); this.el.focus(); return; }\n      const first = items[0];\n      const last = items[items.length - 1];\n      const active = document.activeElement as HTMLElement | null;\n      if (e.shiftKey && (active === first || !this.el.contains(active))) {\n        e.preventDefault(); last.focus();\n      } else if (!e.shiftKey && (active === last || !this.el.contains(active))) {\n        e.preventDefault(); first.focus();\n      }\n    };\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownMobileFocusTrap() {\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    this.triggerEl?.focus?.();\n    this.triggerEl = null;\n  }\n\n  private cleanupMouseHandlers() {\n    if (this.mouseMoveHandler) document.removeEventListener('mousemove', this.mouseMoveHandler);\n    if (this.mouseUpHandler) document.removeEventListener('mouseup', this.mouseUpHandler);\n    this.mouseMoveHandler = null;\n    this.mouseUpHandler = null;\n    document.body.style.cursor = '';\n    document.body.style.userSelect = '';\n  }\n\n  private handleResizeMouseDown(e: MouseEvent) {\n    if (!this.resizable) return;\n    e.preventDefault();\n    this.isResizing = true;\n\n    this.mouseMoveHandler = (ev: MouseEvent) => {\n      const newW = ev.clientX;\n      if (newW < SNAP_THRESHOLD) {\n        this.dsWidthChange.emit('mini');\n      } else if (newW < MIN_DRAG_WIDTH) {\n        this.dsWidthChange.emit('default');\n      } else {\n        this.dsWidthChange.emit(newW);\n      }\n    };\n\n    this.mouseUpHandler = () => {\n      this.isResizing = false;\n      this.cleanupMouseHandlers();\n    };\n\n    document.body.style.cursor = 'col-resize';\n    document.body.style.userSelect = 'none';\n    document.addEventListener('mousemove', this.mouseMoveHandler);\n    document.addEventListener('mouseup', this.mouseUpHandler);\n  }\n\n  private handleResizeKeyDown(e: KeyboardEvent) {\n    if (!this.resizable) return;\n    const w = this.width;\n    const resolved = this.resolvedWidth;\n\n    switch (e.key) {\n      case 'ArrowLeft': {\n        e.preventDefault();\n        if (w === 'mini') return;\n        const next = resolved - KEYBOARD_STEP;\n        this.dsWidthChange.emit(next < MIN_DRAG_WIDTH ? 'mini' : next);\n        break;\n      }\n      case 'ArrowRight': {\n        e.preventDefault();\n        if (w === 'mini') { this.dsWidthChange.emit('default'); return; }\n        this.dsWidthChange.emit(Math.min(resolved + KEYBOARD_STEP, MAX_WIDTH));\n        break;\n      }\n      case 'Home':\n        e.preventDefault();\n        this.dsWidthChange.emit('mini');\n        break;\n      case 'End':\n        e.preventDefault();\n        this.dsWidthChange.emit(MAX_WIDTH);\n        break;\n    }\n  }\n\n  render() {\n    if (this.collapsed && !this.mobile) return null;\n\n    const isMini = this.width === 'mini';\n    const isMobileOpen = this.isMobileOpen;\n    const sidebarWidth = this.collapsed ? 0 : this.resolvedWidth;\n\n    const dialogProps = isMobileOpen\n      ? { role: 'dialog', 'aria-modal': 'true', tabIndex: -1 }\n      : { role: 'navigation' };\n\n    return (\n      <Host>\n        {this.mobile && !this.collapsed && (\n          <div\n            class=\"backdrop\"\n            onClick={() => this.dsToggle.emit()}\n            aria-hidden=\"true\"\n          />\n        )}\n        <aside\n          class={{\n            sidebar: true,\n            'sidebar--mini': isMini,\n            'sidebar--mobile': this.mobile,\n            'sidebar--collapsed': this.collapsed,\n            'sidebar--resizing': this.isResizing,\n          }}\n          style={{ width: `${sidebarWidth}px` }}\n          aria-label=\"Sidebar\"\n          {...dialogProps}\n        >\n          <div class=\"sidebar__content\">\n            <slot />\n          </div>\n          <div class=\"sidebar__footer\">\n            <slot name=\"footer\" />\n          </div>\n          {this.resizable && !this.mobile && (\n            <div\n              class=\"sidebar__resize-handle\"\n              onMouseDown={(e: MouseEvent) => this.handleResizeMouseDown(e)}\n              onKeyDown={(e: KeyboardEvent) => this.handleResizeKeyDown(e)}\n              role=\"separator\"\n              aria-orientation=\"vertical\"\n              aria-label=\"Resize sidebar\"\n              aria-valuenow={this.resolvedWidth}\n              aria-valuemin={MINI_WIDTH}\n              aria-valuemax={MAX_WIDTH}\n              tabIndex={0}\n            />\n          )}\n        </aside>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/components/ds-skeleton.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,h as s,a as i,t as r}from"./index.js";const n=()=>`:host{display:block}:host(.skeleton),.skeleton{background-color:var(--color-background-secondary);position:relative;overflow:hidden}:host(.text),.text{height:14px;border-radius:var(--dimension-radius-050);width:100%}:host(.circular){width:40px;height:40px;border-radius:var(--dimension-radius-half)}:host(.rectangular),.rectangular{width:100%;height:80px;border-radius:var(--dimension-radius-075)}.text-group{display:flex;flex-direction:column;gap:var(--dimension-space-075)}:host(.animate),.animate{overflow:hidden;position:relative}:host(.animate)::after,.animate::after{content:'';position:absolute;inset:0;background:linear-gradient(     90deg,     transparent 0%,     var(--color-interaction-hover) 50%,     transparent 100%   );animation:shimmer 1.5s ease-in-out infinite}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.lines=1;this.shimmer=true}get widthCss(){const t=this.width;if(t==null)return undefined;return typeof t==="number"?`${t}px`:t}get heightCss(){const t=this.height;if(t==null)return undefined;return typeof t==="number"?`${t}px`:t}render(){if(this.variant==="text"&&this.lines>1){return s(i,{"aria-hidden":"true",style:{width:this.widthCss}},s("div",{class:"text-group"},Array.from({length:this.lines},((t,e)=>s("div",{class:{skeleton:true,text:true,animate:this.shimmer},style:{width:e===this.lines-1?"60%":"100%",height:this.heightCss}})))))}return s(i,{"aria-hidden":"true",class:{skeleton:true,[this.variant]:true,animate:this.shimmer},style:{width:this.widthCss,height:this.heightCss}})}static get style(){return n()}},[1,"ds-skeleton",{variant:[1],width:[8],height:[8],lines:[2],shimmer:[4]}]);function o(){if(typeof customElements==="undefined"){return}const t=["ds-skeleton"];t.forEach((t=>{switch(t){case"ds-skeleton":if(!customElements.get(r(t))){customElements.define(r(t),a)}break}}))}o();const h=a;const d=o;export{h as DsSkeleton,d as defineCustomElement};
+//# sourceMappingURL=ds-skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","lines","shimmer","widthCss","v","width","undefined","heightCss","height","render","h","Host","style","class","Array","from","length","_","lineIdx","skeleton","text","animate"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.skeleton),\n.skeleton {\n  background-color: var(--color-background-secondary);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ── Variants ───────────────────────────────────────────────────────────── */\n\n:host(.text),\n.text {\n  height: 14px;\n  border-radius: var(--dimension-radius-050);\n  width: 100%;\n}\n\n:host(.circular) {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.rectangular),\n.rectangular {\n  width: 100%;\n  height: 80px;\n  border-radius: var(--dimension-radius-075);\n}\n\n/* ── Text group ─────────────────────────────────────────────────────────── */\n\n.text-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-075);\n}\n\n/* ── Shimmer ────────────────────────────────────────────────────────────── */\n\n:host(.animate),\n.animate {\n  overflow: hidden;\n  position: relative;\n}\n\n:host(.animate)::after,\n.animate::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--color-interaction-hover) 50%,\n    transparent 100%\n  );\n  animation: shimmer 1.5s ease-in-out infinite;\n}\n\n@keyframes shimmer {\n  0%   { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SkeletonVariant = 'text' | 'circular' | 'rectangular';\n\n@Component({\n  tag: 'ds-skeleton',\n  styleUrl: 'Skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Width as a CSS value string (e.g. '200px', '100%') or number (px). */\n  @Prop() width: string | number | undefined;\n  /** Height as a CSS value string or number (px). */\n  @Prop() height: string | number | undefined;\n  /** Number of text lines. Only used when variant is 'text'. */\n  @Prop() lines: number = 1;\n  /** Whether to show the shimmer animation. */\n  @Prop() shimmer: boolean = true;\n\n  private get widthCss() {\n    const v = this.width;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  private get heightCss() {\n    const v = this.height;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  render() {\n    if (this.variant === 'text' && this.lines > 1) {\n      return (\n        <Host aria-hidden=\"true\" style={{ width: this.widthCss }}>\n          <div class=\"text-group\">\n            {Array.from({ length: this.lines }, (_, lineIdx) => (\n              <div\n                class={{ skeleton: true, text: true, animate: this.shimmer }}\n                style={{\n                  width: lineIdx === this.lines - 1 ? '60%' : '100%',\n                  height: this.heightCss,\n                }}\n              />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          skeleton: true,\n          [this.variant]: true,\n          animate: this.shimmer,\n        }}\n        style={{ width: this.widthCss, height: this.heightCss }}\n      />\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,g2B,MCSbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAM3BD,KAAAE,MAAgB,EAEhBF,KAAAG,QAAmB,IA6C5B,CA3CC,YAAYC,GACV,MAAMC,EAAIL,KAAKM,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,aAAYG,GACV,MAAMH,EAAIL,KAAKS,OACf,GAAIJ,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAK,GACE,GAAIV,KAAKC,UAAY,QAAUD,KAAKE,MAAQ,EAAG,CAC7C,OACES,EAACC,EAAI,eAAa,OAAOC,MAAO,CAAEP,MAAON,KAAKI,WAC5CO,EAAA,OAAKG,MAAM,cACRC,MAAMC,KAAK,CAAEC,OAAQjB,KAAKE,QAAS,CAACgB,EAAGC,IACtCR,EAAA,OACEG,MAAO,CAAEM,SAAU,KAAMC,KAAM,KAAMC,QAAStB,KAAKG,SACnDU,MAAO,CACLP,MAAOa,IAAYnB,KAAKE,MAAQ,EAAI,MAAQ,OAC5CO,OAAQT,KAAKQ,gB,CAS3B,OACEG,EAACC,EAAI,eACS,OACZE,MAAO,CACLM,SAAU,KACV,CAACpB,KAAKC,SAAU,KAChBqB,QAAStB,KAAKG,SAEhBU,MAAO,CAAEP,MAAON,KAAKI,SAAUK,OAAQT,KAAKQ,Y","ignoreList":[]}

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

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

package/dist/components/ds-slider.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["sliderCss","idCounter","Slider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","value","min","max","step","inactive","handleInput","e","dsChange","emit","Number","target","pct","range","Math","round","render","finalId","inputId","h","Host","key","class","htmlFor","label","track","style","String","type","id","disabled","valueText","onInput"],"sources":["src/wc/components/Slider/Slider.css?tag=ds-slider&encapsulation=scoped","src/wc/components/Slider/Slider.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n}\n\n.label-row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n}\n\n/* ── Track ───────────────────────────────────────────────────────────────── */\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--dimension-size-400);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-075);\n  cursor: pointer;\n  user-select: none;\n  box-sizing: border-box;\n}\n\n.track-inner {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-depressed-sm);\n  pointer-events: none;\n  z-index: 1;\n}\n\n/* ── Fill ────────────────────────────────────────────────────────────────── */\n\n.fill-track {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: 0;\n  bottom: var(--dimension-space-025);\n  left: 0;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.fill {\n  position: absolute;\n  left: var(--dimension-space-025);\n  top: 0;\n  bottom: 0;\n  width: max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));\n  background-color: var(--color-background-bold-brand);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n  transition: opacity var(--effect-motion-short-2);\n  pointer-events: none;\n}\n\n.track--at-min .fill {\n  opacity: 0;\n}\n\n/* ── Thumb ───────────────────────────────────────────────────────────────── */\n\n.thumb {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));\n  width: var(--dimension-size-150);\n  padding: var(--dimension-space-025);\n  box-sizing: border-box;\n  pointer-events: none;\n  z-index: 2;\n}\n\n.thumb::before {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  border-radius: var(--dimension-radius-050);\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: var(--dimension-space-025);\n  background-color: transparent;\n  border-radius: var(--dimension-radius-050);\n  transition: background-color 100ms ease;\n}\n\n.track:hover:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-hover);\n}\n\n.track:active:not(.track--inactive) .thumb::after {\n  background-color: var(--color-interaction-pressed);\n}\n\n/* ── Native range input (invisible overlay) ──────────────────────────────── */\n\n.range-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: pointer;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n  z-index: 3;\n}\n\n.range-input:disabled {\n  cursor: not-allowed;\n}\n\n.range-input:hover {\n  cursor: grab;\n}\n\n.range-input:active {\n  cursor: grabbing;\n}\n\n.track--inactive {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n.track:focus-within .track-inner {\n  box-shadow: var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-slider',\n  styleUrl: 'Slider.css',\n  scoped: true,\n})\nexport class Slider {\n  private generatedId = `ds-slider-${++idCounter}`;\n\n  @Prop() value: number = 0;\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() label!: string;\n  @Prop() inactive: boolean = false;\n  @Prop() valueText: string | undefined;\n  /** Associates with an external <label>. Defaults to an auto-generated ID. */\n  @Prop() inputId: string | undefined;\n\n  @Event() dsChange!: EventEmitter<number>;\n\n  private handleInput = (e: Event) => {\n    this.dsChange.emit(Number((e.target as HTMLInputElement).value));\n  };\n\n  private get pct() {\n    const range = this.max - this.min;\n    return range === 0 ? 0 : Math.round(((this.value - this.min) / range) * 100);\n  }\n\n  render() {\n    const finalId = this.inputId ?? this.generatedId;\n    const pct = this.pct;\n\n    return (\n      <Host class=\"field\">\n        <div class=\"label-row\">\n          <label class=\"text-body-small-emphasis\" htmlFor={finalId}>{this.label}</label>\n          <span class=\"text-body-small-emphasis\">{this.value}</span>\n        </div>\n        <div\n          class={{ track: true, 'track--inactive': this.inactive, 'track--at-min': pct === 0 }}\n          style={{ '--slider-pct': String(pct) } as Record<string, string>}\n        >\n          <div class=\"track-inner\">\n            <div class=\"fill-track\"><div class=\"fill\" /></div>\n            <div class=\"thumb\" />\n          </div>\n          <input\n            type=\"range\"\n            id={finalId}\n            min={this.min}\n            max={this.max}\n            step={this.step}\n            value={this.value}\n            disabled={this.inactive}\n            class=\"range-input\"\n            aria-valuetext={this.valueText}\n            onInput={this.handleInput}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAY,IAAM,wqFCExB,IAAIC,EAAY,E,MAOHC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,6EAMUC,KAAAC,YAAc,eAAeP,IAE7BM,KAAAE,MAAgB,EAChBF,KAAAG,IAAc,EACdH,KAAAI,IAAc,IACdJ,KAAAK,KAAe,EAEfL,KAAAM,SAAoB,MAOpBN,KAAAO,YAAeC,IACrBR,KAAKS,SAASC,KAAKC,OAAQH,EAAEI,OAA4BV,OAAO,CA0CnE,CAvCC,OAAYW,GACV,MAAMC,EAAQd,KAAKI,IAAMJ,KAAKG,IAC9B,OAAOW,IAAU,EAAI,EAAIC,KAAKC,OAAQhB,KAAKE,MAAQF,KAAKG,KAAOW,EAAS,I,CAG1E,MAAAG,GACE,MAAMC,EAAUlB,KAAKmB,SAAWnB,KAAKC,YACrC,MAAMY,EAAMb,KAAKa,IAEjB,OACEO,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,SACVH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,aACTH,EAAA,SAAAE,IAAA,2CAAOC,MAAM,2BAA2BC,QAASN,GAAUlB,KAAKyB,OAChEL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,4BAA4BvB,KAAKE,QAE/CkB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAEG,MAAO,KAAM,kBAAmB1B,KAAKM,SAAU,gBAAiBO,IAAQ,GACjFc,MAAO,CAAE,eAAgBC,OAAOf,KAEhCO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,cAAaH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACnCH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WAEbH,EAAA,SAAAE,IAAA,2CACEO,KAAK,QACLC,GAAIZ,EACJf,IAAKH,KAAKG,IACVC,IAAKJ,KAAKI,IACVC,KAAML,KAAKK,KACXH,MAAOF,KAAKE,MACZ6B,SAAU/B,KAAKM,SACfiB,MAAM,cAAa,iBACHvB,KAAKgC,UACrBC,QAASjC,KAAKO,e","ignoreList":[]}

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

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

package/dist/components/ds-surface.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["surfaceCss","RADIUS_PRESETS","Set","Surface","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","contrast","elevation","interactive","selected","inactive","as","render","Tag","intentClass","intent","elevClass","edgeClasses","edge","trim","split","map","e","radiusClass","radius","has","customRadius","undefined","cls","filter","Boolean","join","h","Host","key","style","display","class","borderRadius"],"sources":["src/wc/components/Surface/Surface.css?tag=ds-surface&encapsulation=scoped","src/wc/components/Surface/Surface.tsx"],"sourcesContent":[".surface {\n  box-sizing: border-box;\n  position: relative;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  background: none;\n  text-decoration: none;\n  text-align: left;\n  cursor: default;\n  appearance: none;\n  -webkit-appearance: none;\n}\n\n/* Backgrounds */\n.bg-primary    { background-color: var(--color-background-primary); }\n.bg-secondary  { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Intent × Contrast */\n.intent-brand-faint      { background-color: var(--color-background-faint-brand); }\n.intent-brand-medium     { background-color: var(--color-background-medium-brand); }\n.intent-brand-bold       { background-color: var(--color-background-bold-brand); }\n.intent-brand-strong     { background-color: var(--color-background-strong-brand); }\n.intent-positive-faint   { background-color: var(--color-background-faint-positive); }\n.intent-positive-medium  { background-color: var(--color-background-medium-positive); }\n.intent-positive-bold    { background-color: var(--color-background-bold-positive); }\n.intent-positive-strong  { background-color: var(--color-background-strong-positive); }\n.intent-negative-faint   { background-color: var(--color-background-faint-negative); }\n.intent-negative-medium  { background-color: var(--color-background-medium-negative); }\n.intent-negative-bold    { background-color: var(--color-background-bold-negative); }\n.intent-negative-strong  { background-color: var(--color-background-strong-negative); }\n.intent-warning-faint    { background-color: var(--color-background-faint-warning); }\n.intent-warning-medium   { background-color: var(--color-background-medium-warning); }\n.intent-warning-bold     { background-color: var(--color-background-bold-warning); }\n.intent-warning-strong   { background-color: var(--color-background-strong-warning); }\n.intent-caution-faint    { background-color: var(--color-background-faint-caution); }\n.intent-caution-medium   { background-color: var(--color-background-medium-caution); }\n.intent-caution-bold     { background-color: var(--color-background-bold-caution); }\n.intent-caution-strong   { background-color: var(--color-background-strong-caution); }\n.intent-ai-faint         { background-color: var(--color-background-faint-ai); }\n.intent-ai-medium        { background-color: var(--color-background-medium-ai); }\n.intent-ai-bold          { background-color: var(--color-background-bold-ai); }\n.intent-ai-strong        { background-color: var(--color-background-strong-ai); }\n.intent-neutral-faint    { background-color: var(--color-background-faint-neutral); }\n.intent-neutral-medium   { background-color: var(--color-background-medium-neutral); }\n.intent-neutral-bold     { background-color: var(--color-background-bold-neutral); }\n.intent-neutral-strong   { background-color: var(--color-background-strong-neutral); }\n.intent-walkthrough-faint  { background-color: var(--color-background-faint-walkthrough); }\n.intent-walkthrough-medium { background-color: var(--color-background-medium-walkthrough); }\n.intent-walkthrough-bold   { background-color: var(--color-background-bold-walkthrough); }\n.intent-walkthrough-strong { background-color: var(--color-background-strong-walkthrough); }\n.intent-guide-faint      { background-color: var(--color-background-faint-guide); }\n.intent-guide-medium     { background-color: var(--color-background-medium-guide); }\n.intent-guide-bold       { background-color: var(--color-background-bold-guide); }\n.intent-guide-strong     { background-color: var(--color-background-strong-guide); }\n\n/* Elevation */\n.elevation-none {}\n.elevation-depressed    { box-shadow: var(--effect-elevation-depressed-sm); }\n.elevation-depressed-md { box-shadow: var(--effect-elevation-depressed-md); }\n.elevation-flat         { box-shadow: var(--effect-elevation-elevated-sm); }\n.elevation-elevated     { box-shadow: var(--effect-elevation-elevated-md); }\n.elevation-floating     { box-shadow: var(--effect-elevation-elevated-floating); }\n.elevation-overlayTop    { box-shadow: var(--effect-elevation-elevated-panel-top); }\n.elevation-overlayRight  { box-shadow: var(--effect-elevation-elevated-panel-right); }\n.elevation-overlayBottom { box-shadow: var(--effect-elevation-elevated-panel-bottom); }\n.elevation-overlayLeft   { box-shadow: var(--effect-elevation-elevated-panel-left); }\n\n/* Edges */\n.edge-top    { border-top:    var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-right  { border-right:  var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-bottom { border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-left   { border-left:   var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n\n/* Radius */\n.radius-none { border-radius: var(--dimension-radius-000); }\n.radius-xs   { border-radius: var(--dimension-radius-050); }\n.radius-sm   { border-radius: var(--dimension-radius-075); }\n.radius-md   { border-radius: var(--dimension-radius-100); }\n.radius-lg   { border-radius: var(--dimension-radius-125); }\n.radius-xl   { border-radius: var(--dimension-radius-175); }\n.radius-2xl  { border-radius: var(--dimension-radius-200); }\n.radius-full { border-radius: var(--dimension-radius-half); }\n\n/* Interactive */\n.interactive {\n  cursor: pointer;\n  transition: transform var(--effect-motion-short-2);\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n}\n.interactive:hover   { background-color: var(--_hover-bg); }\n.interactive:active  { background-color: var(--_pressed-bg); transform: scale(var(--dimension-scale-subtle)); }\n.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/* Selected */\n.selected::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  z-index: 0;\n  background-color: var(--color-interaction-hover);\n}\n.selected > * { position: relative; z-index: 1; }\n\n/* Inactive */\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SurfaceIntent =\n  | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n  | 'ai' | 'neutral' | 'walkthrough' | 'guide';\nexport type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\nexport type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';\nexport type SurfaceElevation =\n  | 'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating'\n  | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft';\nexport type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';\nexport type SurfaceRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});\nexport type SurfaceElement = 'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span';\n\nconst RADIUS_PRESETS = new Set(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']);\n\n@Component({\n  tag: 'ds-surface',\n  styleUrl: 'Surface.css',\n  scoped: true,\n})\nexport class Surface {\n  @Prop() background: SurfaceBackground = 'transparent';\n  @Prop() intent: SurfaceIntent | undefined;\n  @Prop() contrast: SurfaceContrast = 'faint';\n  @Prop() elevation: SurfaceElevation = 'none';\n  /** Space-separated list of edges: \"top bottom\" etc. Only applies when elevation='none'. */\n  @Prop() edge: string | undefined;\n  @Prop() radius: SurfaceRadius | undefined;\n  @Prop() interactive: boolean = false;\n  @Prop() selected: boolean = false;\n  @Prop() inactive: boolean = false;\n  @Prop() as: SurfaceElement = 'div';\n\n  render() {\n    const Tag = this.as as any;\n\n    const intentClass = this.intent\n      ? `intent-${this.intent}-${this.contrast}`\n      : `bg-${this.background}`;\n\n    const elevClass = `elevation-${this.elevation}`;\n\n    const edgeClasses = this.edge && this.elevation === 'none'\n      ? this.edge.trim().split(/\\s+/).map(e => `edge-${e}`)\n      : [];\n\n    const radiusClass = this.radius && RADIUS_PRESETS.has(this.radius)\n      ? `radius-${this.radius}`\n      : '';\n\n    const customRadius = this.radius && !RADIUS_PRESETS.has(this.radius)\n      ? this.radius\n      : undefined;\n\n    const cls = [\n      'surface',\n      intentClass,\n      elevClass,\n      ...edgeClasses,\n      radiusClass,\n      this.interactive ? 'interactive' : '',\n      this.selected ? 'selected' : '',\n      this.inactive ? 'inactive' : '',\n    ].filter(Boolean).join(' ');\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <Tag\n          class={cls}\n          style={customRadius ? { borderRadius: customRadius } : undefined}\n        >\n          <slot />\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAa,IAAM,01MCczB,MAAMC,EAAiB,IAAIC,IAAI,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,S,MAOhEC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAMUC,KAAAC,WAAgC,cAEhCD,KAAAE,SAA4B,QAC5BF,KAAAG,UAA8B,OAI9BH,KAAAI,YAAuB,MACvBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACpBN,KAAAO,GAAqB,KA6C9B,CA3CC,MAAAC,GACE,MAAMC,EAAMT,KAAKO,GAEjB,MAAMG,EAAcV,KAAKW,OACrB,UAAUX,KAAKW,UAAUX,KAAKE,WAC9B,MAAMF,KAAKC,aAEf,MAAMW,EAAY,aAAaZ,KAAKG,YAEpC,MAAMU,EAAcb,KAAKc,MAAQd,KAAKG,YAAc,OAChDH,KAAKc,KAAKC,OAAOC,MAAM,OAAOC,KAAIC,GAAK,QAAQA,MAC/C,GAEJ,MAAMC,EAAcnB,KAAKoB,QAAU3B,EAAe4B,IAAIrB,KAAKoB,QACvD,UAAUpB,KAAKoB,SACf,GAEJ,MAAME,EAAetB,KAAKoB,SAAW3B,EAAe4B,IAAIrB,KAAKoB,QACzDpB,KAAKoB,OACLG,UAEJ,MAAMC,EAAM,CACV,UACAd,EACAE,KACGC,EACHM,EACAnB,KAAKI,YAAc,cAAgB,GACnCJ,KAAKK,SAAW,WAAa,GAC7BL,KAAKM,SAAW,WAAa,IAC7BmB,OAAOC,SAASC,KAAK,KAEvB,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,QAAS,aACtBJ,EAACnB,EAAG,CAAAqB,IAAA,2CACFG,MAAOT,EACPO,MAAOT,EAAe,CAAEY,aAAcZ,GAAiBC,WAEvDK,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ds-tab-group.d.ts

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