@ds-mo/ui 0.8.7 → 0.9.0

package/dist/components/p-CrfnBySX.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();export{d as M,u as d};
+//# sourceMappingURL=p-CrfnBySX.js.map

package/dist/components/p-CrfnBySX.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/p-DRuXu8Ql.js

@@ -0,0 +1,2 @@
+import{p as o,H as e,c as n,h as s,a as t,t as r}from"./index.js";import{d as i}from"./p-CGuwZUFk.js";const a=()=>`.toggle-btn.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--dimension-radius-050);cursor:pointer;position:relative;transition:transform var(--effect-motion-short-2);height:var(--dimension-size-400);font-family:inherit;background:transparent;box-sizing:border-box;-webkit-user-select:none;user-select:none;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_border:var(--color-border-tertiary)}.toggle-btn.sc-ds-toggle-button:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.toggle-btn.sc-ds-toggle-button:hover:not(.inactive){background-color:var(--_hover-bg)}.toggle-btn.sc-ds-toggle-button:active:not(.inactive){background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.onMedium.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_border:var(--color-border-on-medium-background-tertiary)}.onBold.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_border:var(--color-border-on-bold-background-tertiary)}.onStrong.sc-ds-toggle-button{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_border:var(--color-border-on-strong-background-tertiary)}.onAlwaysDark.sc-ds-toggle-button{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_border:var(--color-always-dark-border-tertiary)}.elevationElevated.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);color:var(--color-foreground-secondary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.elevationFlat.sc-ds-toggle-button{box-shadow:inset 0 0 0 1px var(--_border);color:var(--color-foreground-secondary)}.elevationNone.sc-ds-toggle-button{color:var(--color-foreground-secondary)}.elevationFloating.sc-ds-toggle-button{background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-floating);color:var(--color-foreground-secondary);--_hover-bg:color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));--_pressed-bg:color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary))}.onBold.elevationNone.sc-ds-toggle-button,.onBold.elevationFlat.sc-ds-toggle-button,.onStrong.elevationNone.sc-ds-toggle-button,.onStrong.elevationFlat.sc-ds-toggle-button{color:var(--color-foreground-on-bold-background-secondary)}.onAlwaysDark.elevationNone.sc-ds-toggle-button,.onAlwaysDark.elevationFlat.sc-ds-toggle-button{color:var(--color-always-dark-foreground-secondary)}.pressed.sc-ds-toggle-button{background-color:var(--color-background-faint-brand);color:var(--color-foreground-bold-brand)}.iconOnly.sc-ds-toggle-button{padding:0;width:var(--dimension-size-400);min-width:var(--dimension-size-400)}.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-100)}.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-100) 0 var(--dimension-space-075);gap:var(--dimension-space-025)}.sizeSM.sc-ds-toggle-button{height:var(--dimension-size-300)}.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.sizeSM.labelOnly.sc-ds-toggle-button{padding:0 var(--dimension-space-075)}.sizeSM.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-075) 0 var(--dimension-space-050);gap:0}.sizeXS.sc-ds-toggle-button{height:var(--dimension-size-200)}.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.sizeXS.labelOnly.sc-ds-toggle-button,.sizeXS.iconAndLabel.sc-ds-toggle-button{padding:0 var(--dimension-space-025);gap:0}.rounded.sc-ds-toggle-button{border-radius:var(--dimension-radius-half)}.rounded.labelOnly.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-100) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.iconAndLabel.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-100) + var(--dimension-space-050))}.rounded.sizeSM.labelOnly.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-075) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.sizeSM.iconAndLabel.sc-ds-toggle-button{padding-left:calc(var(--dimension-space-050) + var(--dimension-space-050));padding-right:calc(var(--dimension-space-075) + var(--dimension-space-050))}.rounded.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-400);min-width:var(--dimension-size-400);padding:0}.rounded.sizeSM.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-300);min-width:var(--dimension-size-300)}.rounded.sizeXS.iconOnly.sc-ds-toggle-button{width:var(--dimension-size-200);min-width:var(--dimension-size-200)}.inactive.sc-ds-toggle-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.toggle-btn__icon.sc-ds-toggle-button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}.toggle-btn__label.sc-ds-toggle-button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}`;const d={md:"md",sm:"sm",xs:"xs"};const c={md:20,sm:16,xs:12};const l={md:"text-body-medium-emphasis",sm:"text-body-small-emphasis",xs:"text-caption-emphasis"};const g=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=n(this,"dsChange");this.elevation="elevated";this.size="md";this.rounded=false;this.pressed=false;this.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.pressed)}}render(){const o=this.size;const e=d[o];const n=c[o];const r=l[o];const i=!!this.icon;const a=!!this.label;const g=i&&!a;const b=a&&!i;const u=i&&a;const v=this.background;const m=this.elevation.charAt(0).toUpperCase()+this.elevation.slice(1);const p={"toggle-btn":true,[`elevation${m}`]:true,sizeSM:o==="sm",sizeXS:o==="xs",rounded:this.rounded,inactive:this.inactive,pressed:this.pressed,iconOnly:g,labelOnly:b,iconAndLabel:u,onMedium:v==="medium",onBold:v==="bold",onStrong:v==="strong",onAlwaysDark:v==="always-dark"};return s(t,{key:"11e12dc0b911922a917b33fe9cbdf78d4d270a52"},s("button",{key:"85e3201280671eb8e3b87235f17a126f914f9f50",type:"button",class:p,disabled:this.inactive,"aria-label":this.ariaLabel??this.label??"toggle","aria-pressed":this.pressed,onClick:this.handleClick},i&&s("span",{key:"fe52df526735c840f9206bb1b7cf3b4eef6c76ed",class:"toggle-btn__icon",style:{fontSize:`${n}px`}},s("ds-icon",{key:"55d1ed578a297ff164fea3ed5dad7e3e9db83bc1",name:this.icon,size:e})),a&&s("span",{key:"a15a139ef10a91e35a1702e8f9e6a5ac8a762566",class:`toggle-btn__label ${r}`},this.label)))}static get style(){return a()}},[2,"ds-toggle-button",{elevation:[1],label:[1],icon:[1],size:[1],rounded:[4],background:[1],pressed:[1028],inactive:[4],ariaLabel:[1,"aria-label"]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-toggle-button","ds-icon"];o.forEach((o=>{switch(o){case"ds-toggle-button":if(!customElements.get(r(o))){customElements.define(r(o),g)}break;case"ds-icon":if(!customElements.get(r(o))){i()}break}}))}b();export{g as T,b as d};
+//# sourceMappingURL=p-DRuXu8Ql.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["toggleButtonCss","ICON_SIZE","md","sm","xs","ICON_PX","TEXT_CLASS","ToggleButton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","size","rounded","pressed","inactive","handleClick","dsChange","emit","render","iconSize","iconPx","textClass","hasIcon","icon","hasLabel","label","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","elevKey","charAt","toUpperCase","slice","cls","sizeSM","sizeXS","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","h","Host","key","type","class","disabled","ariaLabel","onClick","style","fontSize","name"],"sources":["src/wc/components/ToggleButton/ToggleButton.css?tag=ds-toggle-button&encapsulation=scoped","src/wc/components/ToggleButton/ToggleButton.tsx"],"sourcesContent":["/* ==========================================================================\n   ToggleButton — hover/pressed via direct background-color + color-mix().\n   Elevation controls the chrome level:\n     elevated — bg-primary + shadow  (default)\n     flat     — border only\n     none     — ghost (transparent, no border, no shadow)\n     floating — bg-primary + FAB-strength shadow\n   ========================================================================== */\n\n.toggle-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  cursor: pointer;\n  position: relative;\n  transition: transform var(--effect-motion-short-2);\n  height: var(--dimension-size-400);\n  font-family: inherit;\n  background: transparent;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n\n  /* Interaction — ghost defaults */\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_border: var(--color-border-tertiary);\n}\n\n.toggle-btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.toggle-btn:hover:not(.inactive) {\n  background-color: var(--_hover-bg);\n}\n\n.toggle-btn:active:not(.inactive) {\n  background-color: var(--_pressed-bg);\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ==========================================================================\n   Background context — parent surface awareness\n   ========================================================================== */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_border: var(--color-border-on-medium-background-tertiary);\n}\n\n.onBold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_border: var(--color-border-on-bold-background-tertiary);\n}\n\n.onStrong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_border: var(--color-border-on-strong-background-tertiary);\n}\n\n.onAlwaysDark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_border: var(--color-always-dark-border-tertiary);\n}\n\n/* ==========================================================================\n   Elevation levels\n   ========================================================================== */\n\n/* ── Elevated (default): bg-primary + shadow ───────────────────────────── */\n\n.elevationElevated {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  color: var(--color-foreground-secondary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n/* ── Flat: border only, transparent bg ─────────────────────────────────── */\n\n.elevationFlat {\n  box-shadow: inset 0 0 0 1px var(--_border);\n  color: var(--color-foreground-secondary);\n}\n\n/* ── None: ghost — transparent, no border, no shadow ───────────────────── */\n\n.elevationNone {\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Floating: bg-primary + FAB-strength shadow ─────────────────────────── */\n\n.elevationFloating {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  color: var(--color-foreground-secondary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n/* ── Fg on bold / strong surface ────────────────────────────────────────── */\n\n.onBold.elevationNone, .onBold.elevationFlat,\n.onStrong.elevationNone, .onStrong.elevationFlat {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n/* ── Fg on always-dark surface ─────────────────────────────────────────── */\n\n.onAlwaysDark.elevationNone, .onAlwaysDark.elevationFlat {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* ==========================================================================\n   Pressed state — shared across all elevation levels\n   ========================================================================== */\n\n.pressed {\n  background-color: var(--color-background-faint-brand);\n  color: var(--color-foreground-bold-brand);\n}\n\n/* ==========================================================================\n   Layout\n   ========================================================================== */\n\n.iconOnly    { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }\n.labelOnly   { padding: 0 var(--dimension-space-100); }\n.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }\n\n/* ==========================================================================\n   Sizes\n   ========================================================================== */\n\n.sizeSM { height: var(--dimension-size-300); }\n.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.sizeSM.labelOnly   { padding: 0 var(--dimension-space-075); }\n.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 0; }\n\n.sizeXS { height: var(--dimension-size-200); }\n.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }\n\n/* ==========================================================================\n   Rounded (pill shape)\n   ========================================================================== */\n\n.rounded { border-radius: var(--dimension-radius-half); }\n.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.iconOnly { width: var(--dimension-size-400); min-width: var(--dimension-size-400); padding: 0; }\n.rounded.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.rounded.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n\n/* ==========================================================================\n   Disabled\n   ========================================================================== */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ==========================================================================\n   Inner slots\n   ========================================================================== */\n\n.toggle-btn__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n.toggle-btn__label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\n\nexport type ToggleButtonElevation  = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ToggleButtonSize       = 'md' | 'sm' | 'xs';\nexport type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ToggleButtonSize, IconSize> = { md: 'md', sm: 'sm', xs: 'xs' };\n\n// Pixel size reference for internal layout (icon span font-size)\nconst ICON_PX: Record<ToggleButtonSize, number> = { md: 20, sm: 16, xs: 12 };\n\nconst TEXT_CLASS: Record<ToggleButtonSize, string> = {\n  md: 'text-body-medium-emphasis',\n  sm: 'text-body-small-emphasis',\n  xs: 'text-caption-emphasis',\n};\n\n@Component({\n  tag: 'ds-toggle-button',\n  styleUrl: 'ToggleButton.css',\n  scoped: true,\n})\nexport class ToggleButton {\n  /**\n   * Chrome level.\n   *   none     — ghost (transparent, no border, no shadow)\n   *   flat     — border only, transparent bg\n   *   elevated — bg-primary + shadow  [default]\n   *   floating — bg-primary + FAB-strength shadow\n   */\n  @Prop() elevation: ToggleButtonElevation = 'elevated';\n\n  /** Label text. */\n  @Prop() label: string | undefined;\n\n  /**\n   * Icon name for <ds-icon>. Set via JS property.\n   * @example el.icon = 'GridView';\n   */\n  @Prop() icon: string | undefined;\n\n  /** Size: md (32px), sm (24px), xs (16px). */\n  @Prop() size: ToggleButtonSize = 'md';\n\n  /** Pill shape. */\n  @Prop() rounded: boolean = false;\n\n  /** Parent surface context — adjusts hover tokens for colored backgrounds. */\n  @Prop() background: ToggleButtonBackground | undefined;\n\n  /** Controlled pressed state. */\n  @Prop({ mutable: true }) pressed: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  /** Emits the new pressed value (!pressed) on click. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private handleClick = () => {\n    if (this.inactive) return;\n    this.dsChange.emit(!this.pressed);\n  };\n\n  render() {\n    const size = this.size;\n    const iconSize = ICON_SIZE[size];\n    const iconPx = ICON_PX[size];\n    const textClass = TEXT_CLASS[size];\n    const hasIcon = !!this.icon;\n    const hasLabel = !!this.label;\n    const isIconOnly = hasIcon && !hasLabel;\n    const isLabelOnly = hasLabel && !hasIcon;\n    const isIconAndLabel = hasIcon && hasLabel;\n    const bg = this.background;\n    const elevKey = this.elevation.charAt(0).toUpperCase() + this.elevation.slice(1);\n\n    const cls: Record<string, boolean> = {\n      'toggle-btn': true,\n      [`elevation${elevKey}`]: true,\n      sizeSM: size === 'sm',\n      sizeXS: size === 'xs',\n      rounded: this.rounded,\n      inactive: this.inactive,\n      pressed: this.pressed,\n      iconOnly: isIconOnly,\n      labelOnly: isLabelOnly,\n      iconAndLabel: isIconAndLabel,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n    };\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={cls}\n          disabled={this.inactive}\n          aria-label={this.ariaLabel ?? this.label ?? 'toggle'}\n          aria-pressed={this.pressed}\n          onClick={this.handleClick}\n        >\n          {hasIcon && (\n            <span class=\"toggle-btn__icon\" style={{ fontSize: `${iconPx}px` }}>\n              <ds-icon name={this.icon} size={iconSize} />\n            </span>\n          )}\n          {hasLabel && (\n            <span class={`toggle-btn__label ${textClass}`}>{this.label}</span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAkB,IAAM,8hLCO9B,MAAMC,EAAgD,CAAEC,GAAI,KAAMC,GAAI,KAAMC,GAAI,MAGhF,MAAMC,EAA4C,CAAEH,GAAI,GAAIC,GAAI,GAAIC,GAAI,IAExE,MAAME,EAA+C,CACnDJ,GAAI,4BACJC,GAAI,2BACJC,GAAI,yB,MAQOG,EAAYC,EAAA,MAAAD,UAAAE,EALzB,WAAAC,CAAAC,G,6EAaUC,KAAAC,UAAmC,WAYnCD,KAAAE,KAAyB,KAGzBF,KAAAG,QAAmB,MAMFH,KAAAI,QAAmB,MAGpCJ,KAAAK,SAAoB,MAOpBL,KAAAM,YAAc,KACpB,GAAIN,KAAKK,SAAU,OACnBL,KAAKO,SAASC,MAAMR,KAAKI,QAAQ,CAuDpC,CApDC,MAAAK,GACE,MAAMP,EAAOF,KAAKE,KAClB,MAAMQ,EAAWrB,EAAUa,GAC3B,MAAMS,EAASlB,EAAQS,GACvB,MAAMU,EAAYlB,EAAWQ,GAC7B,MAAMW,IAAYb,KAAKc,KACvB,MAAMC,IAAaf,KAAKgB,MACxB,MAAMC,EAAaJ,IAAYE,EAC/B,MAAMG,EAAcH,IAAaF,EACjC,MAAMM,EAAiBN,GAAWE,EAClC,MAAMK,EAAKpB,KAAKqB,WAChB,MAAMC,EAAUtB,KAAKC,UAAUsB,OAAO,GAAGC,cAAgBxB,KAAKC,UAAUwB,MAAM,GAE9E,MAAMC,EAA+B,CACnC,aAAc,KACd,CAAC,YAAYJ,KAAY,KACzBK,OAAQzB,IAAS,KACjB0B,OAAQ1B,IAAS,KACjBC,QAASH,KAAKG,QACdE,SAAUL,KAAKK,SACfD,QAASJ,KAAKI,QACdyB,SAAUZ,EACVa,UAAWZ,EACXa,aAAcZ,EACda,SAAUZ,IAAO,SACjBa,OAAQb,IAAO,OACfc,SAAUd,IAAO,SACjBe,aAAcf,IAAO,eAGvB,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAOd,EACPe,SAAUzC,KAAKK,SAAQ,aACXL,KAAK0C,WAAa1C,KAAKgB,OAAS,SAAQ,eACtChB,KAAKI,QACnBuC,QAAS3C,KAAKM,aAEbO,GACCuB,EAAA,QAAAE,IAAA,2CAAME,MAAM,mBAAmBI,MAAO,CAAEC,SAAU,GAAGlC,QACnDyB,EAAA,WAAAE,IAAA,2CAASQ,KAAM9C,KAAKc,KAAMZ,KAAMQ,KAGnCK,GACCqB,EAAA,QAAAE,IAAA,2CAAME,MAAO,qBAAqB5B,KAAcZ,KAAKgB,Q","ignoreList":[]}

package/dist/components/{p-CIMd6yG3.js → p-DZN5IIgI.js}

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

package/dist/components/p-DdN6WnFs.js

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","ICON_SIZE","xs","sm","md","lg","TEXT_CLASS","Button","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","intent","size","rounded","fullWidth","contrast","dropdown","loading","inactive","type","hasIcon","handleClick","e","dsClick","emit","componentWillLoad","el","querySelector","effectiveElevation","elevation","render","Tag","href","iconSize","textClass","elev","hasLabel","label","showLeading","isIconOnly","isLabelOnly","isIconAndLabel","bg","background","btnCls","btn","cap","toUpperCase","iconOnly","labelOnly","iconAndLabel","onMedium","onBold","onStrong","onAlwaysDark","extraProps","disabled","target","h","Host","key","class","style","width","undefined","ariaLabel","ariaLabelledby","onClick","onMouseEnter","dsMouseEnter","onMouseLeave","dsMouseLeave","fontSize","display","name","height","viewBox","fill","d","stroke","badgeCount","s","charAt","slice"],"sources":["src/wc/components/Button/Button.css?tag=ds-button&encapsulation=scoped","src/wc/components/Button/Button.tsx"],"sourcesContent":["/* ── Host wrapper ─────────────────────────────────────────────────────────── */\n\n.btn-host {\n  display: inline-block;\n}\n\n.btn-host--full {\n  display: block;\n  width: 100%;\n}\n\n/* ── Base button ──────────────────────────────────────────────────────────── */\n\n.btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  border-radius: var(--dimension-radius-050);\n  cursor: pointer;\n  position: relative;\n  transition: transform var(--effect-motion-short-2);\n  height: var(--dimension-size-400);\n  font-family: inherit;\n  color: var(--color-foreground-primary);\n  background: transparent;\n  box-sizing: border-box;\n  text-decoration: none;\n  user-select: none;\n  outline: none;\n  width: 100%;\n\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_border: var(--color-border-tertiary);\n}\n\n.btn:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\n\n.btn:hover:not(.inactive) {\n  background-color: var(--_hover-bg);\n}\n\n.btn:active:not(.inactive) {\n  background-color: var(--_pressed-bg);\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n/* ── Background context ───────────────────────────────────────────────────── */\n\n.onMedium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_border: var(--color-border-on-medium-background-tertiary);\n}\n\n.onBold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_border: var(--color-border-on-bold-background-tertiary);\n}\n\n.onStrong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_border: var(--color-border-on-strong-background-tertiary);\n}\n\n.onAlwaysDark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_border: var(--color-always-dark-border-tertiary);\n}\n\n/* ── Primary variant ──────────────────────────────────────────────────────── */\n\n.primary {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.primary.intentNone {\n  background-color: var(--color-inverted-background);\n  color: var(--color-inverted-foreground-primary);\n  --_hover-bg: color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));\n  --_border: var(--color-inverted-border-tertiary);\n}\n\n.primary:not(.intentNone) {\n  background-color: var(--_bg);\n  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary));\n}\n\n/* Bold contrast (default) */\n.primary.intentBrand    { --_bg: var(--color-background-bold-brand);    color: var(--color-foreground-faint-brand); }\n.primary.intentNeutral  { --_bg: var(--color-background-bold-neutral);  color: var(--color-foreground-faint-neutral); }\n.primary.intentPositive { --_bg: var(--color-background-bold-positive); color: var(--color-foreground-faint-positive); }\n.primary.intentNegative { --_bg: var(--color-background-bold-negative); color: var(--color-foreground-faint-negative); }\n.primary.intentWarning  { --_bg: var(--color-background-bold-warning);  color: var(--color-foreground-faint-warning); }\n.primary.intentCaution  { --_bg: var(--color-background-bold-caution);  color: var(--color-foreground-faint-caution); }\n.primary.intentAi       { --_bg: var(--color-background-bold-ai);       color: var(--color-foreground-faint-ai); }\n\n/* Medium contrast */\n.primary.contrastMedium {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary));\n}\n.primary.contrastMedium.intentBrand    { --_bg: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand); }\n.primary.contrastMedium.intentNeutral  { --_bg: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral); }\n.primary.contrastMedium.intentPositive { --_bg: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }\n.primary.contrastMedium.intentNegative { --_bg: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }\n.primary.contrastMedium.intentWarning  { --_bg: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning); }\n.primary.contrastMedium.intentCaution  { --_bg: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution); }\n.primary.contrastMedium.intentAi       { --_bg: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai); }\n\n/* Strong contrast */\n.primary.contrastStrong {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));\n}\n.primary.contrastStrong.intentBrand    { --_bg: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand); }\n.primary.contrastStrong.intentNeutral  { --_bg: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral); }\n.primary.contrastStrong.intentPositive { --_bg: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }\n.primary.contrastStrong.intentNegative { --_bg: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }\n.primary.contrastStrong.intentWarning  { --_bg: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning); }\n.primary.contrastStrong.intentCaution  { --_bg: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution); }\n.primary.contrastStrong.intentAi       { --_bg: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai); }\n\n/* Faint contrast */\n.primary.contrastFaint {\n  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));\n}\n.primary.contrastFaint.intentBrand    { --_bg: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand); }\n.primary.contrastFaint.intentNeutral  { --_bg: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral); }\n.primary.contrastFaint.intentPositive { --_bg: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }\n.primary.contrastFaint.intentNegative { --_bg: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }\n.primary.contrastFaint.intentWarning  { --_bg: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning); }\n.primary.contrastFaint.intentCaution  { --_bg: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution); }\n.primary.contrastFaint.intentAi       { --_bg: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai); }\n\n/* intentNone on strong/always-dark */\n.primary.intentNone.onStrong,\n.primary.intentNone.onAlwaysDark {\n  background-color: var(--color-background-primary);\n  color: var(--color-foreground-primary);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n  --_border: var(--color-border-tertiary);\n}\n\n/* ── Secondary variant ────────────────────────────────────────────────────── */\n\n.secondary {\n  background-color: transparent;\n  color: var(--color-foreground-secondary);\n}\n\n.secondary.intentBrand    { color: var(--color-foreground-bold-brand); }\n.secondary.intentNeutral  { color: var(--color-foreground-bold-neutral); }\n.secondary.intentPositive { color: var(--color-foreground-bold-positive); }\n.secondary.intentNegative { color: var(--color-foreground-bold-negative); }\n.secondary.intentWarning  { color: var(--color-foreground-bold-warning); }\n.secondary.intentCaution  { color: var(--color-foreground-bold-caution); }\n.secondary.intentAi       { color: var(--color-foreground-bold-ai); }\n\n.secondary.onMedium { color: var(--color-foreground-primary); }\n.secondary.onMedium.intentBrand    { color: var(--color-foreground-strong-brand); }\n.secondary.onMedium.intentNeutral  { color: var(--color-foreground-strong-neutral); }\n.secondary.onMedium.intentPositive { color: var(--color-foreground-strong-positive); }\n.secondary.onMedium.intentNegative { color: var(--color-foreground-strong-negative); }\n.secondary.onMedium.intentWarning  { color: var(--color-foreground-strong-warning); }\n.secondary.onMedium.intentCaution  { color: var(--color-foreground-strong-caution); }\n.secondary.onMedium.intentAi       { color: var(--color-foreground-strong-ai); }\n\n.secondary.onBold { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onBold.intentBrand    { color: var(--color-foreground-faint-brand); }\n.secondary.onBold.intentNeutral  { color: var(--color-foreground-faint-neutral); }\n.secondary.onBold.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onBold.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onBold.intentWarning  { color: var(--color-foreground-faint-warning); }\n.secondary.onBold.intentCaution  { color: var(--color-foreground-faint-caution); }\n.secondary.onBold.intentAi       { color: var(--color-foreground-faint-ai); }\n\n.secondary.onAlwaysDark { color: var(--color-always-dark-foreground-secondary); }\n.secondary.onAlwaysDark.intentBrand    { color: var(--color-always-dark-foreground-brand); }\n.secondary.onAlwaysDark.intentNeutral  { color: var(--color-always-dark-foreground-neutral); }\n.secondary.onAlwaysDark.intentPositive { color: var(--color-always-dark-foreground-positive); }\n.secondary.onAlwaysDark.intentNegative { color: var(--color-always-dark-foreground-negative); }\n.secondary.onAlwaysDark.intentWarning  { color: var(--color-always-dark-foreground-warning); }\n.secondary.onAlwaysDark.intentCaution  { color: var(--color-always-dark-foreground-caution); }\n.secondary.onAlwaysDark.intentAi       { color: var(--color-always-dark-foreground-ai); }\n\n.secondary.onStrong { color: var(--color-foreground-on-bold-background-secondary); }\n.secondary.onStrong.intentBrand    { color: var(--color-foreground-faint-brand); }\n.secondary.onStrong.intentNeutral  { color: var(--color-foreground-faint-neutral); }\n.secondary.onStrong.intentPositive { color: var(--color-foreground-faint-positive); }\n.secondary.onStrong.intentNegative { color: var(--color-foreground-faint-negative); }\n.secondary.onStrong.intentWarning  { color: var(--color-foreground-faint-warning); }\n.secondary.onStrong.intentCaution  { color: var(--color-foreground-faint-caution); }\n.secondary.onStrong.intentAi       { color: var(--color-foreground-faint-ai); }\n\n/* ── Elevation ────────────────────────────────────────────────────────────── */\n\n.secondary.elevationFlat {\n  box-shadow: inset 0 0 0 1px var(--_border);\n}\n\n.secondary.elevationElevated {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.secondary.elevationFloating {\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));\n  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));\n}\n\n.primary.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }\n.primary.elevationNone     { box-shadow: none; }\n.primary.elevationFlat     { box-shadow: inset 0 0 0 1px var(--_border); }\n.primary.intentNone.elevationFlat { --_border: var(--color-border-tertiary); }\n.primary.elevationFloating { box-shadow: var(--effect-elevation-elevated-floating) !important; }\n\n/* ── Layout modes ─────────────────────────────────────────────────────────── */\n\n.iconOnly    { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }\n.labelOnly   { padding: 0 var(--dimension-space-100); }\n.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }\n.dropdown    { gap: var(--dimension-space-050); }\n\n/* ── Sizes ────────────────────────────────────────────────────────────────── */\n\n.sizeSM { height: var(--dimension-size-300); }\n.sizeSM.iconOnly   { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }\n.sizeSM.labelOnly  { padding: 0 var(--dimension-space-075); }\n.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 1px; }\n\n.sizeXS { height: var(--dimension-size-200); }\n.sizeXS.iconOnly   { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }\n.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }\n\n.sizeLG { height: var(--dimension-size-500); }\n.sizeLG.iconOnly   { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }\n.sizeLG.labelOnly  { padding: 0 var(--dimension-space-150); }\n.sizeLG.iconAndLabel { padding: 0 var(--dimension-space-150) 0 var(--dimension-space-100); gap: var(--dimension-space-075); }\n\n/* ── Rounded ──────────────────────────────────────────────────────────────── */\n\n.rounded { border-radius: var(--dimension-radius-half); }\n.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }\n.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }\n.rounded.sizeLG.labelOnly   { padding-left: calc(var(--dimension-space-150) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n.rounded.sizeLG.iconAndLabel { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }\n\n/* ── Disabled ─────────────────────────────────────────────────────────────── */\n\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n\n/* ── Full width ───────────────────────────────────────────────────────────── */\n\n.fullWidth { display: flex; width: 100%; }\n\n/* ── Inner slots ──────────────────────────────────────────────────────────── */\n\n.btn__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n}\n\n.btn__label {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.btn__chevron {\n  flex-shrink: 0;\n}\n\n.btn__badge {\n  position: absolute;\n  top: var(--dimension-space-025);\n  right: var(--dimension-space-025);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-semibold);\n  line-height: var(--typography-lineheight-xs);\n  color: var(--color-foreground-secondary);\n  pointer-events: none;\n  z-index: 10;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, h, Host } from '@stencil/core';\n\nexport type ButtonVariant   = 'primary' | 'secondary';\nexport type ButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonIntent    = 'none' | 'neutral' | 'brand' | 'ai' | 'negative' | 'warning' | 'caution' | 'positive';\nexport type ButtonSize      = 'xs' | 'sm' | 'md' | 'lg';\nexport type ButtonContrast  = 'strong' | 'bold' | 'medium' | 'faint';\nexport type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nconst ICON_SIZE: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };\nconst TEXT_CLASS: Record<ButtonSize, string> = {\n  xs: 'text-caption-emphasis',\n  sm: 'text-body-small-emphasis',\n  md: 'text-body-medium-emphasis',\n  lg: 'text-body-large-emphasis',\n};\n\n@Component({\n  tag: 'ds-button',\n  styleUrl: 'Button.css',\n  scoped: true,\n})\nexport class Button {\n  @Element() el!: HTMLElement;\n\n  @Prop() variant: ButtonVariant = 'primary';\n  @Prop() intent: ButtonIntent = 'brand';\n  @Prop() size: ButtonSize = 'md';\n  @Prop() label: string | undefined;\n  @Prop() rounded: boolean = false;\n  @Prop() fullWidth: boolean = false;\n  @Prop() width: string | undefined;\n  @Prop() contrast: ButtonContrast = 'bold';\n  @Prop() background: ButtonBackground | undefined;\n  @Prop() dropdown: boolean = false;\n  @Prop() badgeCount: number | undefined;\n  @Prop() elevation: ButtonElevation | undefined;\n  @Prop() loading: boolean = false;\n  @Prop() inactive: boolean = false;\n  @Prop() href: string | undefined;\n  @Prop() target: string | undefined;\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @State() private hasIcon: boolean = false;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsMouseEnter!: EventEmitter<MouseEvent>;\n  @Event() dsMouseLeave!: EventEmitter<MouseEvent>;\n\n  componentWillLoad() {\n    this.hasIcon = !!this.el.querySelector('[slot=\"icon\"]');\n  }\n\n  private handleClick = (e: MouseEvent) => {\n    if (this.inactive || this.loading) return;\n    this.dsClick.emit(e);\n  };\n\n  private get effectiveElevation(): ButtonElevation {\n    return this.elevation ?? (this.variant === 'primary' ? 'none' : 'flat');\n  }\n\n  render() {\n    const Tag = this.href ? 'a' : 'button';\n    const size = this.size;\n    const iconSize = ICON_SIZE[size];\n    const textClass = TEXT_CLASS[size];\n    const elev = this.effectiveElevation;\n    const hasLabel = !!this.label;\n    const showLeading = this.hasIcon || this.loading;\n    const isIconOnly = showLeading && !hasLabel;\n    const isLabelOnly = hasLabel && !showLeading;\n    const isIconAndLabel = showLeading && hasLabel;\n    const bg = this.background;\n\n    const btnCls: Record<string, boolean> = {\n      btn: true,\n      [this.variant]: true,\n      [`intent${cap(this.intent)}`]: true,\n      [`size${size.toUpperCase()}`]: size !== 'md',\n      rounded: this.rounded,\n      inactive: this.inactive || this.loading,\n      iconOnly: isIconOnly,\n      labelOnly: isLabelOnly,\n      iconAndLabel: isIconAndLabel,\n      dropdown: this.dropdown,\n      [`contrast${cap(this.contrast)}`]: this.variant === 'primary' && this.intent !== 'none' && this.contrast !== 'bold',\n      [`elevation${cap(elev)}`]: true,\n      onMedium: bg === 'medium',\n      onBold: bg === 'bold',\n      onStrong: bg === 'strong',\n      onAlwaysDark: bg === 'always-dark',\n      fullWidth: this.fullWidth,\n    };\n\n    const extraProps: Record<string, unknown> = {};\n    if (Tag === 'button') {\n      extraProps.type = this.type;\n      extraProps.disabled = this.inactive || this.loading;\n    }\n    if (this.href) extraProps.href = this.href;\n    if (this.target) extraProps.target = this.target;\n\n    return (\n      <Host class={{ 'btn-host': true, 'btn-host--full': this.fullWidth }}>\n        <Tag\n          class={btnCls}\n          style={this.width ? { width: this.width } : undefined}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-disabled={this.inactive || this.loading || undefined}\n          aria-busy={this.loading || undefined}\n          onClick={this.handleClick}\n          onMouseEnter={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseEnter.emit(e)}\n          onMouseLeave={(e: MouseEvent) => !this.inactive && !this.loading && this.dsMouseLeave.emit(e)}\n          {...extraProps}\n        >\n          {/* Leading icon / loader */}\n          <span class=\"btn__icon\" style={{ fontSize: `${iconSize}px`, display: showLeading ? undefined : 'none' }}>\n            {this.loading\n              ? <ds-loader size={iconSize} />\n              : <slot name=\"icon\" />\n            }\n          </span>\n          {/* Label */}\n          {hasLabel && (\n            <span class={`btn__label ${textClass}`}>{this.label}</span>\n          )}\n          {/* Trailing chevron */}\n          {this.dropdown && (\n            <svg\n              class=\"btn__chevron\"\n              width={iconSize}\n              height={iconSize}\n              viewBox=\"0 0 20 20\"\n              fill=\"none\"\n              aria-hidden=\"true\"\n            >\n              <path d=\"M5 7.5L10 12.5L15 7.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n            </svg>\n          )}\n          {/* Badge */}\n          {this.badgeCount != null && this.badgeCount > 0 && (\n            <span class=\"btn__badge\">\n              {this.badgeCount > 9 ? '+' : this.badgeCount}\n            </span>\n          )}\n        </Tag>\n      </Host>\n    );\n  }\n}\n\nfunction cap(s: string) {\n  return s.charAt(0).toUpperCase() + s.slice(1);\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/.stencil/ButtonGroup/ButtonGroup.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
+export type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg';
+export interface ButtonGroupItem {
+    label?: string;
+    /** Icon name for <ds-icon>. Set via JS property. */
+    icon?: string;
+    variant?: 'primary' | 'secondary';
+    intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';
+    inactive?: boolean;
+    href?: string;
+}
+export declare class ButtonGroup {
+    /**
+     * Array of button descriptors. Set via JS property.
+     * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];
+     */
+    items: ButtonGroupItem[];
+    /** Chrome level for the group container. */
+    elevation: ButtonGroupElevation;
+    /** Size passed to each ds-button. */
+    size: ButtonGroupSize;
+    /** Pill shape for group + buttons. */
+    rounded: boolean;
+    /** Emits the index of the clicked item. */
+    dsClick: EventEmitter<number>;
+    render(): any;
+}
+//# sourceMappingURL=ButtonGroup.d.ts.map

package/dist/types/.stencil/LabelWrap/LabelWrap.d.ts

@@ -0,0 +1,15 @@
+export type LabelWrapSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Internal utility wrapper that kills line-height struts and adds optical
+ * horizontal padding. Used inside interactive components (Button, Tag, etc.)
+ *
+ * Not intended as a standalone consumer-facing component — internal use only.
+ */
+export declare class LabelWrap {
+    /** Typography size — controls optical horizontal padding. */
+    size: LabelWrapSize;
+    /** Enable truncation with ellipsis — use inside full-width containers. */
+    truncate: boolean;
+    render(): any;
+}
+//# sourceMappingURL=LabelWrap.d.ts.map

package/dist/types/.stencil/PanelNav/PanelNav.d.ts

@@ -20,6 +20,11 @@ export interface PanelNavGroup {
 export declare class PanelNav {
     /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */
     variant: PanelNavVariant;
+    /** When `true`, the component does not run its own View Transition on variant
+     *  change — it just updates the rendered surface synchronously. Use this when
+     *  the host app orchestrates the page transition itself (e.g. Angular Router's
+     *  `withViewTransitions`), so the two don't fight or nest. */
+    disableViewTransition: boolean;
     /** JSON string of `PanelNavGroup[]` */
     groups: string;
     /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */
@@ -60,9 +65,6 @@ export declare class PanelNav {
     private urlDerivedActiveId;
     private transitionEndHandler?;
     private resizeObserver?;
-    private activeViewTransition?;
-    /** Resolves the VT callback promise as soon as Stencil finishes its render. */
-    private vtRenderResolve?;
     private isDragging;
     private dragStartX;
     private didSnap;

package/dist/types/.stencil/Select/Select.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export declare class Select {
+    el: HTMLElement;
+    /**
+     * Array of options. Set via JS property.
+     * @example el.options = [{ label: 'Apple', value: 'apple' }];
+     */
+    options: SelectOption[];
+    /** Currently selected value. */
+    value: string;
+    /** Placeholder shown when no value is selected. */
+    placeholder: string;
+    /** Disables interaction. */
+    inactive: boolean;
+    ariaLabel: string | undefined;
+    ariaLabelledby: string | undefined;
+    /** Emits the selected value string. */
+    dsChange: EventEmitter<string>;
+    private isOpen;
+    private triggerEl;
+    private menuEl;
+    componentDidLoad(): void;
+    onIsOpenChange(open: boolean): void;
+    onOptionsChange(): void;
+    onValueChange(): void;
+    private syncMenuItems;
+    private open;
+    private close;
+    private toggle;
+    handleKeyDown(e: KeyboardEvent): void;
+    private get selectedLabel();
+    private get hasSelection();
+    render(): any;
+}
+//# sourceMappingURL=Select.d.ts.map

package/dist/types/.stencil/TabGroup/TabGroup.d.ts

@@ -4,6 +4,10 @@ export interface TabItem {
     id: string;
     label: string;
     disabled?: boolean;
+    /** id of the tabpanel this tab controls */
+    panelId?: string;
+    /** optional badge count shown as a pill next to label */
+    count?: number;
 }
 export declare class TabGroup {
     el: HTMLElement;
@@ -12,16 +16,23 @@ export declare class TabGroup {
     background: TabBackground | undefined;
     ariaLabel: string | undefined;
     ariaLabelledby: string | undefined;
-    private indicatorLeft;
-    private indicatorWidth;
+    orientation: 'horizontal' | 'vertical';
+    private indicatorOffset;
+    private indicatorSize;
     dsChange: EventEmitter<string>;
     private resizeObserver;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     onValueChange(): void;
     onTabsChange(): void;
+    onOrientationChange(): void;
     private updateIndicator;
     private selectTab;
+    /**
+     * Find the next non-disabled tab index relative to `from`, stepping by `step`.
+     * Returns `from` unchanged if no other enabled tab exists.
+     */
+    private findEnabled;
     handleKeyDown(e: KeyboardEvent): void;
     private getBgClass;
     render(): any;

package/dist/types/.stencil/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ToggleButtonElevation = 'none' | 'flat' | 'elevated' | 'floating';
+export type ToggleButtonSize = 'md' | 'sm' | 'xs';
+export type ToggleButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export declare class ToggleButton {
+    /**
+     * Chrome level.
+     *   none     — ghost (transparent, no border, no shadow)
+     *   flat     — border only, transparent bg
+     *   elevated — bg-primary + shadow  [default]
+     *   floating — bg-primary + FAB-strength shadow
+     */
+    elevation: ToggleButtonElevation;
+    /** Label text. */
+    label: string | undefined;
+    /**
+     * Icon name for <ds-icon>. Set via JS property.
+     * @example el.icon = 'GridView';
+     */
+    icon: string | undefined;
+    /** Size: md (32px), sm (24px), xs (16px). */
+    size: ToggleButtonSize;
+    /** Pill shape. */
+    rounded: boolean;
+    /** Parent surface context — adjusts hover tokens for colored backgrounds. */
+    background: ToggleButtonBackground | undefined;
+    /** Controlled pressed state. */
+    pressed: boolean;
+    /** Disables interaction. */
+    inactive: boolean;
+    ariaLabel: string | undefined;
+    /** Emits the new pressed value (!pressed) on click. */
+    dsChange: EventEmitter<boolean>;
+    private handleClick;
+    render(): any;
+}
+//# sourceMappingURL=ToggleButton.d.ts.map

package/dist/types/.stencil/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ToggleGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';
+export type ToggleGroupSize = 'md' | 'sm' | 'xs';
+export type ToggleGroupBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export interface ToggleGroupItem {
+    id: string;
+    label?: string;
+    /** Icon name for <ds-icon>. */
+    icon?: string;
+    inactive?: boolean;
+}
+export declare class ToggleButtonGroup {
+    /**
+     * Array of item descriptors. Set via JS property.
+     * @example el.items = [{ id: 'list', label: 'List' }, { id: 'grid', icon: 'GridView' }];
+     */
+    items: ToggleGroupItem[];
+    /** ID of the currently selected / pressed item. */
+    value: string;
+    /** Chrome level for the group container. */
+    elevation: ToggleGroupElevation;
+    /** Size passed to each ds-toggle-button. */
+    size: ToggleGroupSize;
+    /** Pill shape for group + buttons. */
+    rounded: boolean;
+    /** Parent surface context. */
+    background: ToggleGroupBackground | undefined;
+    /** Emits the id of the newly selected item. */
+    dsChange: EventEmitter<string>;
+    private handleItemChange;
+    render(): any;
+}
+//# sourceMappingURL=ToggleButtonGroup.d.ts.map