@ds-mo/ui 12.8.0 → 13.0.0

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

@@ -1 +0,0 @@
-{"version":3,"names":["breadcrumbCss","Breadcrumb","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","ariaLabel","labelWidths","collapsedLabels","measurementElements","separatorElements","componentDidLoad","observeContainer","scheduleMeasurement","document","fonts","ready","then","componentDidRender","disconnectedCallback","resizeObserver","disconnect","observedElement","undefined","measurementFrame","cancelAnimationFrame","handleItemsChange","navElement","ResizeObserver","observe","requestAnimationFrame","measureLabels","listElement","ellipsisMeasurement","length","naturalWidths","map","_","index","getBoundingClientRect","width","ellipsisWidth","some","separatorWidth","reduce","total","separator","styles","getComputedStyle","Number","parseFloat","marginInlineStart","marginInlineEnd","availableWidth","Math","max","clientWidth","minimumWidths","min","nextWidths","remainingWidth","extraWidth","widthsChanged","abs","nextCollapsedLabels","collapsedLabelsChanged","isCollapsed","handleSelect","item","originalEvent","event","dsSelect","emit","defaultPrevented","preventDefault","renderItem","allocatedWidth","label","h","class","as","variant","color","lineTruncation","style","isCurrent","href","onClick","type","render","Host","ref","element","key","id"],"sources":["src/wc/components/Breadcrumb/Breadcrumb.css?tag=ds-breadcrumb&encapsulation=scoped","src/wc/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/visually-hidden.css';\n\n:host {\n  position: relative;\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n.breadcrumb {\n  inline-size: 100%;\n  min-width: 0;\n}\n\n.breadcrumb__list {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  inline-size: 100%;\n  min-width: 0;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  list-style: none;\n}\n\n.breadcrumb__item {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.breadcrumb__separator {\n  flex: 0 0 auto;\n  margin-inline: var(--dimension-space-050);\n  user-select: none;\n}\n\n.breadcrumb__link,\n.breadcrumb__current {\n  display: inline-flex;\n  flex: 0 0 auto;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  font: inherit;\n  text-decoration: none;\n}\n\n.breadcrumb__link {\n  cursor: default;\n}\n\na.breadcrumb__link {\n  cursor: pointer;\n}\n\n.breadcrumb__link:hover .breadcrumb__label {\n  text-decoration: underline;\n  text-decoration-color: var(--color-foreground-quaternary);\n  text-underline-offset: var(--dimension-space-025);\n  text-decoration-thickness: var(--dimension-stroke-width-012);\n}\n\n.breadcrumb__label {\n  display: inline-block;\n  inline-size: var(--breadcrumb-label-width, auto);\n  min-width: 0;\n}\n\n.breadcrumb__measurements {\n  position: absolute;\n  inset: 0 auto auto 0;\n  visibility: hidden;\n  pointer-events: none;\n  white-space: nowrap;\n}\n\n.breadcrumb__measurement {\n  display: inline-block;\n  inline-size: max-content;\n  max-inline-size: none;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from './breadcrumb-types';\n\n@Component({\n  tag: 'ds-breadcrumb',\n  styleUrl: 'Breadcrumb.css',\n  scoped: true,\n})\nexport class Breadcrumb {\n  /** Ordered path from the broadest ancestor to the nearest page. */\n  @Prop() items: BreadcrumbItem[] = [];\n\n  /** Accessible name for the breadcrumb navigation landmark. */\n  @Prop() ariaLabel: string = 'Breadcrumb';\n\n  /** Emitted when an interactive breadcrumb item is activated. Prevent to cancel native navigation. */\n  @Event({ cancelable: true }) dsSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  @State() private labelWidths: number[] = [];\n  @State() private collapsedLabels: boolean[] = [];\n\n  private navElement?: HTMLElement;\n  private listElement?: HTMLOListElement;\n  private measurementElements: HTMLElement[] = [];\n  private separatorElements: HTMLElement[] = [];\n  private ellipsisMeasurement?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private observedElement?: HTMLElement;\n  private measurementFrame?: number;\n\n  componentDidLoad() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n    void document.fonts?.ready.then(() => this.scheduleMeasurement());\n  }\n\n  componentDidRender() {\n    this.observeContainer();\n    this.scheduleMeasurement();\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.observedElement = undefined;\n    if (this.measurementFrame !== undefined) cancelAnimationFrame(this.measurementFrame);\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.labelWidths = [];\n    this.collapsedLabels = [];\n    this.scheduleMeasurement();\n  }\n\n  private observeContainer() {\n    if (!this.navElement || this.observedElement === this.navElement) return;\n    this.resizeObserver ??= new ResizeObserver(() => this.scheduleMeasurement());\n    this.resizeObserver.disconnect();\n    this.resizeObserver.observe(this.navElement);\n    this.observedElement = this.navElement;\n  }\n\n  private scheduleMeasurement() {\n    if (this.measurementFrame !== undefined) return;\n    this.measurementFrame = requestAnimationFrame(() => {\n      this.measurementFrame = undefined;\n      this.measureLabels();\n    });\n  }\n\n  private measureLabels() {\n    if (\n      !this.navElement ||\n      !this.listElement ||\n      !this.ellipsisMeasurement ||\n      this.items.length === 0\n    ) return;\n\n    const naturalWidths = this.items.map(\n      (_, index) => this.measurementElements[index]?.getBoundingClientRect().width ?? 0\n    );\n    const ellipsisWidth = this.ellipsisMeasurement.getBoundingClientRect().width;\n    if (naturalWidths.some(width => width === 0) || ellipsisWidth === 0) return;\n\n    const separatorWidth = this.separatorElements.reduce((total, separator) => {\n      const styles = getComputedStyle(separator);\n      return (\n        total +\n        separator.getBoundingClientRect().width +\n        Number.parseFloat(styles.marginInlineStart) +\n        Number.parseFloat(styles.marginInlineEnd)\n      );\n    }, 0);\n    const availableWidth = Math.max(0, this.navElement.clientWidth - separatorWidth);\n    const minimumWidths = naturalWidths.map(width => Math.min(width, ellipsisWidth));\n    const nextWidths = [...minimumWidths];\n    let remainingWidth = Math.max(\n      0,\n      availableWidth - minimumWidths.reduce((total, width) => total + width, 0)\n    );\n\n    // Protect the current/newest location. Extra width is granted newest-to-oldest,\n    // so ancestors collapse in path order as the available space decreases.\n    for (let index = naturalWidths.length - 1; index >= 0 && remainingWidth > 0; index -= 1) {\n      const extraWidth = Math.min(\n        remainingWidth,\n        naturalWidths[index] - minimumWidths[index]\n      );\n      nextWidths[index] += extraWidth;\n      remainingWidth -= extraWidth;\n    }\n\n    const widthsChanged =\n      nextWidths.length !== this.labelWidths.length ||\n      nextWidths.some(\n        (width, index) => Math.abs(width - (this.labelWidths[index] ?? 0)) > 0.25\n      );\n    const nextCollapsedLabels = nextWidths.map(\n      (width, index) =>\n        naturalWidths[index] > minimumWidths[index] &&\n        Math.abs(width - minimumWidths[index]) <= 0.25\n    );\n    const collapsedLabelsChanged =\n      nextCollapsedLabels.length !== this.collapsedLabels.length ||\n      nextCollapsedLabels.some(\n        (isCollapsed, index) => isCollapsed !== this.collapsedLabels[index]\n      );\n    if (widthsChanged) this.labelWidths = nextWidths;\n    if (collapsedLabelsChanged) this.collapsedLabels = nextCollapsedLabels;\n  }\n\n  private handleSelect(item: BreadcrumbItem, originalEvent: MouseEvent) {\n    const event = this.dsSelect.emit({ item, originalEvent });\n    if (event.defaultPrevented) originalEvent.preventDefault();\n  }\n\n  private renderItem(item: BreadcrumbItem, index: number) {\n    const allocatedWidth = this.labelWidths[index];\n    const isCollapsed = this.collapsedLabels[index] ?? false;\n    const label = (\n      [\n        <ds-text\n          class=\"breadcrumb__label\"\n          as=\"span\"\n          variant=\"text-caption\"\n          color=\"inherit\"\n          lineTruncation={isCollapsed ? 'none' : 1}\n          aria-hidden={isCollapsed ? 'true' : undefined}\n          style={\n            allocatedWidth === undefined\n              ? undefined\n              : { '--breadcrumb-label-width': `${allocatedWidth}px` }\n          }\n        >\n          {isCollapsed ? '…' : item.label}\n        </ds-text>,\n        isCollapsed ? <span class=\"breadcrumb__accessible-label ds-visually-hidden\">{item.label}</span> : null,\n      ]\n    );\n\n    if (item.isCurrent) {\n      return (\n        <span class=\"breadcrumb__current\" aria-current=\"page\" aria-label={item.ariaLabel}>\n          {label}\n        </span>\n      );\n    }\n\n    if (item.href) {\n      return (\n        <a\n          class=\"breadcrumb__link ds-focus-ring\"\n          href={item.href}\n          aria-label={item.ariaLabel}\n          onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n        >\n          {label}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        class=\"breadcrumb__link ds-focus-ring\"\n        type=\"button\"\n        aria-label={item.ariaLabel}\n        onClick={(event: MouseEvent) => this.handleSelect(item, event)}\n      >\n        {label}\n      </button>\n    );\n  }\n\n  render() {\n    if (this.items.length === 0) return null;\n\n    this.measurementElements = [];\n    this.separatorElements = [];\n\n    return (\n      <Host>\n        <nav\n          class=\"breadcrumb\"\n          aria-label={this.ariaLabel}\n          ref={element => {\n            this.navElement = element;\n          }}\n        >\n          <div class=\"breadcrumb__measurements\" aria-hidden=\"true\">\n            {this.items.map((item, index) => (\n              <ds-text\n                class=\"breadcrumb__measurement\"\n                as=\"span\"\n                variant=\"text-caption\"\n                color=\"inherit\"\n                ref={element => {\n                  if (element) this.measurementElements[index] = element;\n                }}\n              >\n                {item.label}\n              </ds-text>\n            ))}\n            <ds-text\n              class=\"breadcrumb__measurement\"\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n              ref={element => {\n                this.ellipsisMeasurement = element;\n              }}\n            >\n              …\n            </ds-text>\n          </div>\n          <ol\n            class=\"breadcrumb__list\"\n            ref={element => {\n              this.listElement = element;\n            }}\n          >\n            {this.items.map((item, index) => (\n              <li class=\"breadcrumb__item\" key={item.id}>\n                {index > 0 ? (\n                  <ds-text\n                    class=\"breadcrumb__separator\"\n                    as=\"span\"\n                    variant=\"text-caption\"\n                    color=\"tertiary\"\n                    aria-hidden=\"true\"\n                    ref={element => {\n                      if (element) this.separatorElements[index - 1] = element;\n                    }}\n                  >\n                    /\n                  </ds-text>\n                ) : null}\n                {this.renderItem(item, index)}\n              </li>\n            ))}\n          </ol>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-Re2kPrXm.js

@@ -1,2 +0,0 @@
-import{p as s,H as i,c as t,h as e,a as n,t as o}from"./index.js";import{D as r,s as a}from"./p-BgGP65Nn.js";const d=()=>`:host{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}:host(.ds-focus-ring),.ds-focus-ring,:host(.ds-focus-ring-inset),.ds-focus-ring-inset{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:host(.ds-focus-ring:focus-visible),.ds-focus-ring:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring.ds-focus-ring--visible),.ds-focus-ring.ds-focus-ring--visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}:host(.ds-focus-ring-inset:focus-visible),.ds-focus-ring-inset:focus-visible{outline:none}:host(.ds-focus-ring-inset:focus-visible)::after,.ds-focus-ring-inset:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-focus-ring-inset.ds-focus-ring--visible),.ds-focus-ring-inset.ds-focus-ring--visible{outline:none}:host(.ds-focus-ring-inset.ds-focus-ring--visible)::after,.ds-focus-ring-inset.ds-focus-ring--visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}:host(.ds-control-inactive),.ds-control-inactive{opacity:0.5;pointer-events:none;cursor:not-allowed}:host{--ds-switch-width:var(--dimension-size-400);--ds-switch-height:var(--dimension-size-250);--ds-switch-thumb-size:var(--dimension-size-150);--ds-switch-gap:var(--dimension-space-050);--ds-switch-stroke:var(--dimension-stroke-width-012);--ds-switch-inset:var(--ds-switch-gap);--ds-switch-thumb-hover:var(--color-interaction-hover);--ds-switch-thumb-pressed:var(--color-interaction-pressed);--ds-switch-travel:calc(     var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -       var(--ds-switch-inset)   );position:relative;display:inline-flex;width:var(--ds-switch-width);height:var(--ds-switch-height);padding:0;border:none;border-radius:var(--dimension-radius-half);box-sizing:border-box;flex-shrink:0;overflow:visible;cursor:default;user-select:none;outline:none;background-color:transparent;box-shadow:inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);transition:background-color var(--effect-motion-short-3),     box-shadow var(--effect-motion-short-3)}:host(.switch--lg){--ds-switch-width:var(--dimension-size-500);--ds-switch-height:var(--dimension-size-300);--ds-switch-thumb-size:var(--dimension-iconography-sm);--ds-switch-gap:var(--dimension-space-050)}:host(.switch--sm){--ds-switch-width:var(--dimension-size-300);--ds-switch-height:var(--dimension-size-200);--ds-switch-thumb-size:calc(var(--dimension-size-base) * 5 / 4);--ds-switch-gap:calc(var(--dimension-space-025) + var(--dimension-space-012))}:host(.switch--xs){--ds-switch-width:var(--dimension-size-250);--ds-switch-height:var(--dimension-size-150);--ds-switch-thumb-size:var(--dimension-size-100);--ds-switch-gap:var(--dimension-space-025)}:host(.checked){background-color:var(--color-background-bold-brand);box-shadow:none}:host(.switch--readonly),:host(.switch--presentation){cursor:default}:host(.switch--presentation){pointer-events:none}.thumb{position:absolute;top:50%;left:var(--ds-switch-inset);width:var(--ds-switch-thumb-size);height:var(--ds-switch-thumb-size);border-radius:var(--dimension-radius-half);background-color:var(--color-foreground-tertiary);box-shadow:none;transform:translateY(-50%);transition:background-color var(--effect-motion-short-3),     transform var(--effect-motion-short-3);pointer-events:none}.thumb::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none}:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-hover)}:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation)) .thumb::after{background:var(--ds-switch-thumb-pressed)}:host(.checked) .thumb{background-color:var(--color-background-primary);box-shadow:none;transform:translate3d(var(--ds-switch-travel), -50%, 0)}@media (prefers-reduced-motion: reduce){:host{transition:none}.thumb{transition:none}}`;let h=0;const c=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.__attachShadow();this.dsChange=t(this,"dsChange");this.internals=this.attachInternals();this.checked=false;this.value="on";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=r;this.isInactive=false;this.size="md";this.presentation=false;this.initialChecked=false;this.formDisabled=false;this.focused=false;this.touched=false;this.handleClick=()=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=s=>{if(this.presentation||this.readOnly||this.isInactive||this.disabled||this.formDisabled)return;if(s.key===" "||s.key==="Enter"){s.preventDefault();this.handleClick()}};this.handleFocus=()=>{if(!this.presentation)this.focused=true};this.handleBlur=()=>{if(this.presentation)return;this.focused=false;this.touched=true}}componentWillLoad(){this.initialChecked=this.checked;this.syncFormValue()}componentDidLoad(){this.syncNativeLabels()}syncFormValue(){const s=this.presentation||this.isInactive||this.disabled||this.formDisabled;const i=this.checked?this.value:this.uncheckedValue??null;const t=this.checked?"checked":"unchecked";this.internals.setFormValue(s?null:i,t);const e=this.required&&!s&&!this.checked;a(this.internals,e,this.requiredMessage)}formDisabledCallback(s){this.formDisabled=s;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.focused=false;this.touched=false}formStateRestoreCallback(s){this.checked=s==="checked"}syncNativeLabels(){if(this.presentation)return;if(this.el.hasAttribute("aria-label")||this.el.hasAttribute("aria-labelledby"))return;const s=Array.from(this.internals.labels).map((s=>{if(!s.id)s.id=`ds-switch-label-${++h}`;return s.id}));if(s.length)this.el.setAttribute("aria-labelledby",s.join(" "))}render(){const s=this.isInactive||this.disabled||this.formDisabled;const i=this.required&&!s&&!this.checked;const t=this.checked!==this.initialChecked;return e(n,{key:"b12eac4dd6fa727dd2f509e5e45c671fc0c32b67",role:this.presentation?undefined:"switch","aria-checked":this.presentation?undefined:String(this.checked),"aria-disabled":!this.presentation&&s?"true":undefined,"aria-readonly":!this.presentation&&this.readOnly?"true":undefined,"aria-required":!this.presentation&&this.required?"true":undefined,"aria-invalid":!this.presentation&&i?"true":undefined,"aria-hidden":this.presentation?"true":undefined,"data-checked":this.checked?"":undefined,"data-unchecked":!this.checked?"":undefined,"data-disabled":s?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-focused":!this.presentation&&this.focused?"":undefined,"data-filled":!this.presentation&&this.checked?"":undefined,"data-dirty":!this.presentation&&t?"":undefined,"data-touched":!this.presentation&&this.touched?"":undefined,"data-valid":!this.presentation&&!s&&!i?"":undefined,"data-invalid":!this.presentation&&i?"":undefined,tabIndex:this.presentation||s?-1:0,class:{switch:true,checked:this.checked,"switch--lg":this.size==="lg","switch--md":this.size==="md","switch--sm":this.size==="sm","switch--xs":this.size==="xs","switch--readonly":this.readOnly,"switch--presentation":this.presentation,"ds-focus-ring":true,"ds-control-inactive":s},onClick:this.handleClick,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur},e("span",{key:"270b291feb10174969aee3b092a0365444e63fb8",class:"thumb"}))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return d()}},[65,"ds-switch",{checked:[1028],name:[513],value:[1],uncheckedValue:[1,"unchecked-value"],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],isInactive:[4,"is-inactive"],size:[1],presentation:[4],formDisabled:[32],focused:[32],touched:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],uncheckedValue:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],presentation:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const s=["ds-switch"];s.forEach((s=>{switch(s){case"ds-switch":if(!customElements.get(o(s))){customElements.define(o(s),c)}break}}))}u();export{c as S,u as d};
-//# sourceMappingURL=p-Re2kPrXm.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["switchCss","generatedLabelId","Switch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","value","disabled","readOnly","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","isInactive","size","presentation","initialChecked","formDisabled","focused","touched","handleClick","dsChange","emit","handleKeyDown","event","key","preventDefault","handleFocus","handleBlur","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","inactive","submissionValue","uncheckedValue","state","internals","setFormValue","missing","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","el","hasAttribute","labelIds","Array","from","labels","map","label","id","length","setAttribute","join","render","invalid","dirty","h","Host","role","undefined","String","tabIndex","class","switch","onClick","onKeyDown","onFocus","onBlur"],"sources":["src/wc/components/Switch/Switch.css?tag=ds-switch&encapsulation=shadow","src/wc/components/Switch/Switch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: var(--dimension-size-400);\n  --ds-switch-height: var(--dimension-size-250);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: default;\n  user-select: none;\n  outline: none;\n  background-color: transparent;\n  box-shadow: inset 0 0 0 var(--ds-switch-stroke) var(--color-border-secondary);\n  transition:\n    background-color var(--effect-motion-short-3),\n    box-shadow var(--effect-motion-short-3);\n}\n\n:host(.switch--lg) {\n  --ds-switch-width: var(--dimension-size-500);\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-iconography-sm);\n  --ds-switch-gap: var(--dimension-space-050);\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: calc(var(--dimension-size-base) * 5 / 4);\n  --ds-switch-gap: calc(var(--dimension-space-025) + var(--dimension-space-012));\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-250);\n  --ds-switch-height: var(--dimension-size-150);\n  --ds-switch-thumb-size: var(--dimension-size-100);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-foreground-tertiary);\n  box-shadow: none;\n  transform: translateY(-50%);\n  transition:\n    background-color var(--effect-motion-short-3),\n    transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  background-color: var(--color-background-primary);\n  box-shadow: none;\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host {\n    transition: none;\n  }\n\n  .thumb {\n    transition: none;\n  }\n}\n","import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\nimport { DEFAULT_REQUIRED_MESSAGE, setRequiredValidity } from '../../utils';\n\nexport type SwitchSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.checked = this.initialChecked;\n    this.focused = false;\n    this.touched = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleFocus = () => {\n    if (!this.presentation) this.focused = true;\n  };\n\n  private handleBlur = () => {\n    if (this.presentation) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const invalid = this.required && !inactive && !this.checked;\n    const dirty = this.checked !== this.initialChecked;\n    // Switch owns its structural track and thumb strokes so nested interaction layers cannot cover them.\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-focused={!this.presentation && this.focused ? '' : undefined}\n        data-filled={!this.presentation && this.checked ? '' : undefined}\n        data-dirty={!this.presentation && dirty ? '' : undefined}\n        data-touched={!this.presentation && this.touched ? '' : undefined}\n        data-valid={!this.presentation && !inactive && !invalid ? '' : undefined}\n        data-invalid={!this.presentation && invalid ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--lg': this.size === 'lg',\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n      >\n        <span class=\"thumb\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"6GAAA,MAAMA,EAAY,IAAM,ixICKxB,IAAIC,EAAmB,E,MAQVC,EAAMC,EAAA,MAAAD,UAAAE,EANnB,WAAAC,CAAAC,G,yIAW2BC,KAAAC,QAAmB,MAGpCD,KAAAE,MAAgB,KAQCF,KAAAG,SAAoB,MACpBH,KAAAI,SAAoB,MACpBJ,KAAAK,SAAoB,MACrCL,KAAAM,gBAA0BC,EAC1BP,KAAAQ,WAAsB,MAGtBR,KAAAS,KAAmB,KAMnBT,KAAAU,aAAwB,MAIxBV,KAAAW,eAAiB,MACRX,KAAAY,aAAe,MACfZ,KAAAa,QAAU,MACVb,KAAAc,QAAU,MAsDnBd,KAAAe,YAAc,KACpB,GAAIf,KAAKU,cAAgBV,KAAKI,UAAYJ,KAAKQ,YAAcR,KAAKG,UAAYH,KAAKY,aAAc,OACjGZ,KAAKC,SAAWD,KAAKC,QACrBD,KAAKgB,SAASC,KAAKjB,KAAKC,QAAQ,EAG1BD,KAAAkB,cAAiBC,IACvB,GAAInB,KAAKU,cAAgBV,KAAKI,UAAYJ,KAAKQ,YAAcR,KAAKG,UAAYH,KAAKY,aAAc,OACjG,GAAIO,EAAMC,MAAQ,KAAOD,EAAMC,MAAQ,QAAS,CAC9CD,EAAME,iBACNrB,KAAKe,a,GAIDf,KAAAsB,YAAc,KACpB,IAAKtB,KAAKU,aAAcV,KAAKa,QAAU,IAAI,EAGrCb,KAAAuB,WAAa,KACnB,GAAIvB,KAAKU,aAAc,OACvBV,KAAKa,QAAU,MACfb,KAAKc,QAAU,IAAI,CAkDtB,CA3HC,iBAAAU,GACExB,KAAKW,eAAiBX,KAAKC,QAC3BD,KAAKyB,e,CAGP,gBAAAC,GACE1B,KAAK2B,kB,CAUP,aAAAF,GACE,MAAMG,EAAW5B,KAAKU,cAAgBV,KAAKQ,YAAcR,KAAKG,UAAYH,KAAKY,aAC/E,MAAMiB,EAAkB7B,KAAKC,QAAUD,KAAKE,MAAQF,KAAK8B,gBAAkB,KAC3E,MAAMC,EAAQ/B,KAAKC,QAAU,UAAY,YACzCD,KAAKgC,UAAUC,aAAaL,EAAW,KAAOC,EAAiBE,GAE/D,MAAMG,EAAUlC,KAAKK,WAAauB,IAAa5B,KAAKC,QACpDkC,EAAoBnC,KAAKgC,UAAWE,EAASlC,KAAKM,gB,CAGpD,oBAAA8B,CAAqBjC,GACnBH,KAAKY,aAAeT,EACpBH,KAAKyB,e,CAGP,iBAAAY,GACErC,KAAKC,QAAUD,KAAKW,eACpBX,KAAKa,QAAU,MACfb,KAAKc,QAAU,K,CAGjB,wBAAAwB,CAAyBP,GACvB/B,KAAKC,QAAU8B,IAAU,S,CAGnB,gBAAAJ,GACN,GAAI3B,KAAKU,aAAc,OACvB,GAAIV,KAAKuC,GAAGC,aAAa,eAAiBxC,KAAKuC,GAAGC,aAAa,mBAAoB,OAEnF,MAAMC,EAAYC,MAAMC,KAAK3C,KAAKgC,UAAUY,QAA+BC,KAAIC,IAC7E,IAAKA,EAAMC,GAAID,EAAMC,GAAK,qBAAqBrD,IAC/C,OAAOoD,EAAMC,EAAE,IAEjB,GAAIN,EAASO,OAAQhD,KAAKuC,GAAGU,aAAa,kBAAmBR,EAASS,KAAK,K,CA2B7E,MAAAC,GACE,MAAMvB,EAAW5B,KAAKQ,YAAcR,KAAKG,UAAYH,KAAKY,aAC1D,MAAMwC,EAAUpD,KAAKK,WAAauB,IAAa5B,KAAKC,QACpD,MAAMoD,EAAQrD,KAAKC,UAAYD,KAAKW,eAEpC,OACE2C,EAACC,EAAI,CAAAnC,IAAA,2CACHoC,KAAMxD,KAAKU,aAAe+C,UAAY,SAAQ,eAChCzD,KAAKU,aAAe+C,UAAYC,OAAO1D,KAAKC,SAAQ,iBAClDD,KAAKU,cAAgBkB,EAAW,OAAS6B,UAAS,iBAClDzD,KAAKU,cAAgBV,KAAKI,SAAW,OAASqD,UAAS,iBACvDzD,KAAKU,cAAgBV,KAAKK,SAAW,OAASoD,UAAS,gBACxDzD,KAAKU,cAAgB0C,EAAU,OAASK,UAAS,cACnDzD,KAAKU,aAAe,OAAS+C,UAAS,eACrCzD,KAAKC,QAAU,GAAKwD,UAAS,kBAC1BzD,KAAKC,QAAU,GAAKwD,UAAS,gBAC/B7B,EAAW,GAAK6B,UAAS,gBACzBzD,KAAKI,SAAW,GAAKqD,UAAS,gBAC9BzD,KAAKK,SAAW,GAAKoD,UAAS,gBAC9BzD,KAAKU,cAAgBV,KAAKa,QAAU,GAAK4C,UAAS,eACnDzD,KAAKU,cAAgBV,KAAKC,QAAU,GAAKwD,UAAS,cACnDzD,KAAKU,cAAgB2C,EAAQ,GAAKI,UAAS,gBACzCzD,KAAKU,cAAgBV,KAAKc,QAAU,GAAK2C,UAAS,cACpDzD,KAAKU,eAAiBkB,IAAawB,EAAU,GAAKK,UAAS,gBACzDzD,KAAKU,cAAgB0C,EAAU,GAAKK,UACnDE,SAAU3D,KAAKU,cAAgBkB,GAAW,EAAK,EAC/CgC,MAAO,CACLC,OAAQ,KACR5D,QAASD,KAAKC,QACd,aAAcD,KAAKS,OAAS,KAC5B,aAAcT,KAAKS,OAAS,KAC5B,aAAcT,KAAKS,OAAS,KAC5B,aAAcT,KAAKS,OAAS,KAC5B,mBAAoBT,KAAKI,SACzB,uBAAwBJ,KAAKU,aAC7B,gBAAiB,KACjB,sBAAuBkB,GAEzBkC,QAAS9D,KAAKe,YACdgD,UAAW/D,KAAKkB,cAChB8C,QAAShE,KAAKsB,YACd2C,OAAQjE,KAAKuB,YAEb+B,EAAA,QAAAlC,IAAA,2CAAMwC,MAAM,U","ignoreList":[]}

package/dist/components/p-huw1oRbt.js

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

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

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

package/dist/framework/select-multi-value-accessor.d.ts

@@ -1,9 +0,0 @@
-import { ElementRef } from '@angular/core';
-import { ValueAccessor } from '../angular/value-accessor';
-import * as i0 from "@angular/core";
-export declare class SelectMultiValueAccessor extends ValueAccessor {
-    constructor(el: ElementRef<HTMLDsSelectMultiElement>);
-    writeValue(value: unknown): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SelectMultiValueAccessor, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectMultiValueAccessor, "ds-select-multi", never, {}, {}, never, never, true, never>;
-}

package/dist/framework/select-multi-value-accessor.js

@@ -1,40 +0,0 @@
-import { Directive, forwardRef } from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ValueAccessor } from '../angular/value-accessor.js';
-import * as i0 from "@angular/core";
-export class SelectMultiValueAccessor extends ValueAccessor {
-    constructor(el) {
-        super(el);
-    }
-    writeValue(value) {
-        const values = Array.isArray(value)
-            ? value.filter((item) => typeof item === 'string')
-            : [];
-        this.el.nativeElement.values = values;
-        this.lastValue = values;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectMultiValueAccessor, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: SelectMultiValueAccessor, isStandalone: true, selector: "ds-select-multi", host: { listeners: { "dsChange": "handleChangeEvent($event.target?.[\"values\"])" } }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => SelectMultiValueAccessor),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: SelectMultiValueAccessor, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ds-select-multi',
-                    host: {
-                        '(dsChange)': 'handleChangeEvent($event.target?.["values"])',
-                    },
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => SelectMultiValueAccessor),
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }] });

package/dist/lib/shell/badge-gradient-ring.d.ts

@@ -1,27 +0,0 @@
-/** Per-badge background-position for shell gradient ring sampling. */
-export declare const BADGE_GRADIENT_POSITION_VAR = "--_badge-gradient-position";
-export interface GradientSurface {
-    element: HTMLElement;
-    chromeHost: HTMLElement;
-    positionVar: string;
-}
-/** Whether the badge sits under a shell with an active wash preset. */
-export declare function isShellGradientActive(from: HTMLElement): boolean;
-/** Bar or panel chrome surface that owns the shell gradient stack. */
-export declare function findGradientSurface(from: HTMLElement): GradientSurface | null;
-interface ParsedPosition {
-    x: number;
-    y: number;
-}
-/** Parse a two-value CSS background-position (e.g. `-200px 0`). */
-export declare function parseCssBackgroundPosition(value: string): ParsedPosition;
-/**
- * Background position for a badge ring so the shell gradient aligns with nav chrome.
- * Uses badge center relative to the painted chrome surface.
- */
-export declare function badgeGradientPosition(badgeHost: HTMLElement, surface: GradientSurface, shellPosition: string): string;
-/** Resolve shell gradient position from chrome host custom properties. */
-export declare function readShellGradientPosition(surface: GradientSurface): string;
-/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */
-export declare function syncBadgeGradientPosition(badgeHost: HTMLElement): void;
-export {};

package/dist/lib/shell/chrome-transition.d.ts

@@ -1,32 +0,0 @@
-/** Bubbling/composed events — `ds-shell-app` and `ds-bar-nav` coordinate during width motion. */
-export declare const CHROME_TRANSITION_START = "dsChromeTransitionStart";
-export declare const CHROME_TRANSITION_END = "dsChromeTransitionEnd";
-export type ChromeTransitionSource = 'panel-nav' | 'panel-tools';
-export interface ChromeTransitionDetail {
-    source: ChromeTransitionSource;
-    /** Panel-tools drawer motion direction; omitted for panel-nav. */
-    phase?: 'opening' | 'closing';
-}
-/** Reference-counted gate — used while panel-nav width is transitioning. */
-export declare class ChromeTransitionDepth {
-    private depth;
-    enter(): void;
-    exit(): void;
-    get isActive(): boolean;
-}
-/** Idempotent gate for one physical chrome surface.
- * Duplicate start notifications still require only one matching end. */
-export declare class ChromeTransitionGate {
-    private active;
-    enter(): void;
-    exit(): void;
-    get isActive(): boolean;
-}
-export interface RafCoalescer {
-    schedule(): void;
-    cancel(): void;
-}
-/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */
-export declare function createRafCoalescer(onFrame: () => void): RafCoalescer;
-export declare function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined;
-export declare function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'];

package/dist/lib/shell/shell-chrome-metrics.d.ts

@@ -1,11 +0,0 @@
-/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */
-export declare function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number;
-export interface PanelNavWidthTokens {
-    expandedPx: number;
-    collapsedPx: number;
-}
-/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */
-export declare function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens;
-export declare function isPanelNavCollapsed(panelNavHost: HTMLElement | null, navRoot: HTMLElement | null): boolean;
-export declare function panelWidthPxFromTokens(tokens: PanelNavWidthTokens, collapsed: boolean): number;
-export declare function barGradientPositionFromPanelWidth(panelWidthPx: number): string;

package/dist/lib/shell/shell-gradient.d.ts

@@ -1,41 +0,0 @@
-/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */
-import type { ShellGradientPreset } from './shell-gradient-presets';
-export type { ShellGradientPreset } from './shell-gradient-presets';
-export { DEFAULT_SHELL_GRADIENT_PRESET, SHELL_GRADIENT_PRESETS, SHELL_GRADIENT_PRESET_LABELS, buildShellRadialGradientForPreset, buildShellRadialGradientFromStops, isShellGradientPreset, shellGradientPresetOpacity, shellGradientPresetRecipe, shellGradientPresetStopToken, } from './shell-gradient-presets';
-export declare const SHELL_GRADIENT_IMAGE_VAR = "--ds-shell-gradient-image";
-export declare const SHELL_GRADIENT_SIZE_VAR = "--ds-shell-gradient-size";
-export declare const SHELL_GRADIENT_POSITION_PANEL_VAR = "--ds-shell-gradient-position-panel";
-export declare const SHELL_GRADIENT_POSITION_BAR_VAR = "--ds-shell-gradient-position-bar";
-export declare const SHELL_GRADIENT_OPACITY_VAR = "--ds-shell-gradient-opacity";
-/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */
-export declare const SHELL_CHROME_SURFACE_POSITION_VAR = "--ds-shell-chrome-surface-position";
-/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */
-export declare function shellChromeLayerActive(preset: ShellGradientPreset): boolean;
-/**
- * Shell radial wash — same for panel and bar nav.
- * Tokens follow `data-theme` (light/dark intent stops).
- */
-export declare function buildShellRadialGradient(preset?: ShellGradientPreset): string;
-/** Built-in radial image for the selected shell preset. */
-export declare function shellGradientImage(preset?: ShellGradientPreset): string;
-export interface ShellViewportDimensions {
-    width: number;
-    height: number;
-}
-/**
- * Viewport size for shell chrome with `background-attachment: fixed`.
- * Must not use the `ds-shell-app` element box — the shell can be shorter or
- * taller than the viewport when host height chains break or content overflows.
- */
-export declare function readShellViewportDimensions(win?: Window): ShellViewportDimensions;
-export interface ShellGradientLayout {
-    width: number;
-    height: number;
-    panelWidth: number;
-}
-/** Pixel `background-size` for the fixed-attachment radial wash. */
-export declare function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string;
-export declare function shellGradientPositionPanel(): string;
-export declare function shellGradientPositionBar(panelWidth: number): string;
-/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */
-export declare function shellChromeSurfacePosition(leftPx: number, topPx: number): string;

package/dist/lib/shell/shell-view-transition.d.ts

@@ -1,23 +0,0 @@
-import { parseCssTimeMs } from '../utils/resolve-css-time-ms';
-/** `view-transition-name` on `ds-bar-nav` — pairs with root reveal in shell apps. */
-export declare const SHELL_BAR_NAV_VT_NAME = "ds-shell-bar-nav";
-export { parseCssTimeMs };
-/** TokoMo tokens for the dashboard ↔ settings radial reveal (WAAPI). */
-export declare const SHELL_NAV_REVEAL_DURATION_VAR = "--effect-animation-duration-medium-3";
-export declare const SHELL_NAV_REVEAL_EASING_VAR = "--effect-animation-easing-ease-in-out";
-/** Suppress default cross-fade and pin new snapshots to a 0px circle for WAAPI reveal. */
-export declare function ensureShellNavVtStyle(): void;
-export interface ShellNavRevealOrigin {
-    x: number;
-    y: number;
-    maxRadius: number;
-}
-/** Origin for the radial reveal — defaults to panel-nav footer gear, then viewport center. */
-export declare function resolveShellNavRevealOrigin(originEl?: HTMLElement | null): ShellNavRevealOrigin;
-export declare function setShellNavRevealOriginVars(origin: ShellNavRevealOrigin): void;
-/** Animate root + bar-nav snapshots with the same radial clip-path reveal. */
-export declare function animateShellNavRadialReveal(origin: ShellNavRevealOrigin, durationMs?: number): void;
-/** Run radial reveal when a view transition's `ready` promise settles (app/router driver). */
-export declare function runShellNavStyleRevealOnReady(transition: {
-    ready: Promise<void>;
-}, originEl?: HTMLElement | null): void;