@ds-mo/ui 14.31.3 → 14.32.0

package/dist/components/p-D3sJXjcg.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,h as o,a as r,t as n}from"./index.js";const t=()=>`.ds-control--lg,:host(.ds-control--lg),:host(.ds-control--md),.ds-control--md,:host(.ds-control--sm),.ds-control--sm,:host(.ds-control--xs),.ds-control--xs{--ds-control-radius:var(--dimension-radius-025)}:host(.ds-control--lg),.ds-control--lg{--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)}:host(.ds-control--md),.ds-control--md{--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)}:host(.ds-control--sm),.ds-control--sm{--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)}:host(.ds-control--xs),.ds-control--xs{--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}@media (forced-colors: active){:root,:host,.ds-forced-colors-scope{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@keyframes ds-shimmer-text-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}@keyframes ds-shimmer-surface-motion{0%{background-position:100% 0}76.923%{background-position:0 0}100%{background-position:0 0}}.ds-shimmer-text{--ds-shimmer-base:currentColor;--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc(var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay));--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc(     var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200)   );background-color:var(--ds-shimmer-base);background-image:linear-gradient(     330deg,     transparent calc(50% - var(--ds-shimmer-spread)),     var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%,     transparent calc(50% + var(--ds-shimmer-spread))   );background-repeat:no-repeat;background-position:100% 0;background-size:calc(200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2) 100%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:ds-shimmer-text-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing)     infinite}.ds-shimmer-surface{--ds-shimmer-surface-base:var(--color-foreground-quaternary);--ds-shimmer-duration:var(--effect-animation-duration-long-2);--ds-shimmer-repeat-delay:var(--effect-animation-delay-short-3);--ds-shimmer-cycle-duration:calc(var(--ds-shimmer-duration) + var(--ds-shimmer-repeat-delay));--ds-shimmer-easing:var(--effect-animation-easing-linear);--ds-shimmer-spread:var(--dimension-size-500);--ds-shimmer-travel:calc(     var(--dimension-size-800) + var(--dimension-size-500) + var(--dimension-size-200)   );position:relative;overflow:hidden;background-color:var(--ds-shimmer-surface-base)}.ds-shimmer-surface::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(     330deg,     transparent calc(50% - var(--ds-shimmer-spread)),     var(--ds-shimmer, var(--color-shimmer-shimmer)) 50%,     transparent calc(50% + var(--ds-shimmer-spread))   );background-repeat:no-repeat;background-position:100% 0;background-size:calc(200% + var(--ds-shimmer-spread) * 2 + var(--ds-shimmer-travel) * 2) 100%;animation:ds-shimmer-surface-motion var(--ds-shimmer-cycle-duration) var(--ds-shimmer-easing)     infinite}@media (prefers-reduced-motion: reduce){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface::after{display:none;animation:none}}@media (forced-colors: active){.ds-shimmer-text{animation:none;background-image:none;-webkit-text-fill-color:currentColor}.ds-shimmer-surface{background-color:var(--ds-forced-color-disabled)}.ds-shimmer-surface::after{display:none;animation:none}}:host{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;vertical-align:middle;--ds-skeleton-base:var(--color-foreground-quaternary);--ds-shimmer:var(--color-shimmer-shimmer)}.skeleton__shape{--ds-shimmer-surface-base:var(--ds-skeleton-base);display:block;width:100%;height:100%;flex:0 0 auto;background-color:var(--ds-skeleton-base);border-radius:var(--dimension-radius-025)}:host(.skeleton--background-medium){--ds-skeleton-base:var(--color-foreground-on-medium-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-medium-background)}:host(.skeleton--background-bold){--ds-skeleton-base:var(--color-foreground-on-bold-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-bold-background)}:host(.skeleton--background-strong){--ds-skeleton-base:var(--color-foreground-on-strong-background-quaternary);--ds-shimmer:var(--color-shimmer-shimmer-on-strong-background)}:host(.skeleton--background-translucent){--ds-skeleton-base:var(--color-translucent-foreground-quaternary);--ds-shimmer:var(--color-translucent-shimmer)}:host(.skeleton--background-inverted){--ds-skeleton-base:var(--color-inverted-foreground-quaternary);--ds-shimmer:var(--color-inverted-shimmer)}:host(.skeleton--background-media){--ds-skeleton-base:var(--color-media-foreground-quaternary);--ds-shimmer:var(--color-media-shimmer)}:host(.skeleton--background-always-dark){--ds-skeleton-base:var(--color-always-dark-foreground-quaternary);--ds-shimmer:var(--color-always-dark-shimmer)}:host(.skeleton--background-navigation){--ds-skeleton-base:var(--color-navigation-foreground-quaternary);--ds-shimmer:var(--color-navigation-shimmer)}:host(.skeleton--text){width:100%;height:var(--ds-skeleton-canvas-size);padding-block:0}:host(.skeleton--text) .skeleton__shape{height:75%}:host(.skeleton--text-text-display-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-3xl)}:host(.skeleton--text-text-display-small){--ds-skeleton-canvas-size:var(--typography-lineheight-2xl)}:host(.skeleton--text-text-title-large){--ds-skeleton-canvas-size:var(--typography-lineheight-xl)}:host(.skeleton--text-text-title-medium),:host(.skeleton--text-text-body-large){--ds-skeleton-canvas-size:var(--typography-lineheight-lg)}:host(.skeleton--text-text-title-small),:host(.skeleton--text-text-body-medium){--ds-skeleton-canvas-size:var(--typography-lineheight-md)}:host(.skeleton--text-text-body-small){--ds-skeleton-canvas-size:var(--typography-lineheight-sm)}:host(.skeleton--text-text-caption){--ds-skeleton-canvas-size:var(--typography-lineheight-xs)}:host(.skeleton--icon){width:var(--ds-skeleton-canvas-size);height:var(--ds-skeleton-canvas-size);padding:0}:host(.skeleton--icon) .skeleton__shape{width:75%;height:75%}:host(.skeleton--icon.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}:host(.skeleton--icon-xs){--ds-skeleton-canvas-size:var(--dimension-iconography-xs)}:host(.skeleton--icon-sm){--ds-skeleton-canvas-size:var(--dimension-iconography-sm)}:host(.skeleton--icon-md){--ds-skeleton-canvas-size:var(--dimension-iconography-md)}:host(.skeleton--icon-lg){--ds-skeleton-canvas-size:var(--dimension-iconography-lg)}:host(.skeleton--icon-xl){--ds-skeleton-canvas-size:var(--dimension-iconography-xl)}:host(.skeleton--icon-2xl){--ds-skeleton-canvas-size:var(--dimension-iconography-2xl)}:host(.skeleton--icon-3xl){--ds-skeleton-canvas-size:var(--dimension-iconography-3xl)}:host(.skeleton--control){width:100%;height:var(--ds-control-height)}:host(.skeleton--control) .skeleton__shape{border-radius:var(--ds-control-radius, var(--dimension-radius-025))}:host(.skeleton--control.skeleton--rounded) .skeleton__shape{border-radius:var(--dimension-radius-half)}@media (forced-colors: active){.skeleton__shape{background-color:var(--ds-forced-color-disabled)}}`;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.variant="text";this.textVariant="text-body-medium";this.iconSize="md";this.controlSize="md";this.rounded=false;this.shimmer=true}get widthCss(){const e=this.width;if(e==null)return undefined;return typeof e==="number"?`${e}px`:e}render(){return o(r,{key:"02ae7a7cb856eb34a2d5e4357f2b98814e77b3eb","aria-hidden":"true",class:{skeleton:true,[`skeleton--${this.variant}`]:true,[`skeleton--text-${this.textVariant}`]:this.variant==="text",[`skeleton--icon-${this.iconSize}`]:this.variant==="icon",[`ds-control--${this.controlSize}`]:this.variant==="control",[`skeleton--background-${this.background}`]:!!this.background,"skeleton--rounded":this.variant!=="text"&&this.rounded},style:this.variant==="icon"?undefined:{width:this.widthCss}},o("span",{key:"a1aa9ba7a9b2752a57eba1c9a835f5f80f61278c",class:{skeleton__shape:true,"ds-shimmer-surface":this.shimmer}}))}static get style(){return t()}},[1,"ds-skeleton",{variant:[1],textVariant:[1,"text-variant"],iconSize:[1,"icon-size"],controlSize:[1,"control-size"],width:[8],rounded:[4],shimmer:[4],background:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-skeleton"];e.forEach((e=>{switch(e){case"ds-skeleton":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}i();export{a as S,i as d};
-//# sourceMappingURL=p-D3sJXjcg.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["skeletonCss","Skeleton","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","textVariant","iconSize","controlSize","rounded","shimmer","widthCss","v","width","undefined","render","h","Host","key","class","skeleton","background","style","skeleton__shape"],"sources":["src/wc/components/Skeleton/Skeleton.css?tag=ds-skeleton&encapsulation=shadow","src/wc/components/Skeleton/Skeleton.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/shimmer.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 0;\n  vertical-align: middle;\n  --ds-skeleton-base: var(--color-foreground-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer);\n}\n\n.skeleton__shape {\n  --ds-shimmer-surface-base: var(--ds-skeleton-base);\n\n  display: block;\n  width: 100%;\n  height: 100%;\n  flex: 0 0 auto;\n  background-color: var(--ds-skeleton-base);\n  border-radius: var(--dimension-radius-025);\n}\n\n/* ── Background context ────────────────────────────────────────────────── */\n\n:host(.skeleton--background-medium) {\n  --ds-skeleton-base: var(--color-foreground-on-medium-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-medium-background);\n}\n\n:host(.skeleton--background-bold) {\n  --ds-skeleton-base: var(--color-foreground-on-bold-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-bold-background);\n}\n\n:host(.skeleton--background-strong) {\n  --ds-skeleton-base: var(--color-foreground-on-strong-background-quaternary);\n  --ds-shimmer: var(--color-shimmer-shimmer-on-strong-background);\n}\n\n:host(.skeleton--background-translucent) {\n  --ds-skeleton-base: var(--color-translucent-foreground-quaternary);\n  --ds-shimmer: var(--color-translucent-shimmer);\n}\n\n:host(.skeleton--background-inverted) {\n  --ds-skeleton-base: var(--color-inverted-foreground-quaternary);\n  --ds-shimmer: var(--color-inverted-shimmer);\n}\n\n:host(.skeleton--background-media) {\n  --ds-skeleton-base: var(--color-media-foreground-quaternary);\n  --ds-shimmer: var(--color-media-shimmer);\n}\n\n:host(.skeleton--background-always-dark) {\n  --ds-skeleton-base: var(--color-always-dark-foreground-quaternary);\n  --ds-shimmer: var(--color-always-dark-shimmer);\n}\n\n:host(.skeleton--background-navigation) {\n  --ds-skeleton-base: var(--color-navigation-foreground-quaternary);\n  --ds-shimmer: var(--color-navigation-shimmer);\n}\n\n/* ── Text ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--text) {\n  width: 100%;\n  height: var(--ds-skeleton-canvas-size);\n  padding-block: 0;\n}\n\n:host(.skeleton--text) .skeleton__shape {\n  height: 75%;\n}\n\n:host(.skeleton--text-text-display-medium) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-3xl);\n}\n:host(.skeleton--text-text-display-small) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-2xl);\n}\n:host(.skeleton--text-text-title-large) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-xl);\n}\n:host(.skeleton--text-text-title-medium),\n:host(.skeleton--text-text-body-large) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-lg);\n}\n:host(.skeleton--text-text-title-small),\n:host(.skeleton--text-text-body-medium) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-md);\n}\n:host(.skeleton--text-text-body-small) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-sm);\n}\n:host(.skeleton--text-text-caption) {\n  --ds-skeleton-canvas-size: var(--typography-lineheight-xs);\n}\n\n/* ── Icon ──────────────────────────────────────────────────────────────── */\n\n:host(.skeleton--icon) {\n  width: var(--ds-skeleton-canvas-size);\n  height: var(--ds-skeleton-canvas-size);\n  padding: 0;\n}\n\n:host(.skeleton--icon) .skeleton__shape {\n  width: 75%;\n  height: 75%;\n}\n\n:host(.skeleton--icon.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.skeleton--icon-xs) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-xs);\n}\n:host(.skeleton--icon-sm) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-sm);\n}\n:host(.skeleton--icon-md) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-md);\n}\n:host(.skeleton--icon-lg) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-lg);\n}\n:host(.skeleton--icon-xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-xl);\n}\n:host(.skeleton--icon-2xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-2xl);\n}\n:host(.skeleton--icon-3xl) {\n  --ds-skeleton-canvas-size: var(--dimension-iconography-3xl);\n}\n\n/* ── Control ───────────────────────────────────────────────────────────── */\n\n:host(.skeleton--control) {\n  width: 100%;\n  height: var(--ds-control-height);\n}\n\n:host(.skeleton--control) .skeleton__shape {\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n}\n\n:host(.skeleton--control.skeleton--rounded) .skeleton__shape {\n  border-radius: var(--dimension-radius-half);\n}\n\n@media (forced-colors: active) {\n  .skeleton__shape {\n    background-color: var(--ds-forced-color-disabled);\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { IconSize } from '../Icon/Icon';\nimport type { TextVariant } from '../Text/text-types';\nimport type { ControlSize } from '../../utils/control-text';\n\nexport type SkeletonVariant = 'text' | 'icon' | 'control';\nexport type SkeletonBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\n@Component({\n  tag: 'ds-skeleton',\n  styleUrl: 'Skeleton.css',\n  shadow: true,\n})\nexport class Skeleton {\n  @Prop() variant: SkeletonVariant = 'text';\n  /** Text metric recipe whose line-height defines the text canvas. */\n  @Prop() textVariant: TextVariant = 'text-body-medium';\n  /** Iconography token whose square canvas defines the icon canvas. */\n  @Prop() iconSize: IconSize = 'md';\n  /** Shared control-density size whose height defines the control canvas. */\n  @Prop() controlSize: ControlSize = 'md';\n  /** Width of text and control skeleton canvases. Numbers resolve to px. Ignored for icons. */\n  @Prop() width: string | number | undefined;\n  /** Round icon skeletons into circles and control skeletons into pills. Ignored for text. */\n  @Prop() rounded: boolean = false;\n  /** Whether to show the shimmer animation. */\n  @Prop() shimmer: boolean = true;\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: SkeletonBackground | undefined;\n\n  private get widthCss() {\n    const v = this.width;\n    if (v == null) return undefined;\n    return typeof v === 'number' ? `${v}px` : v;\n  }\n\n  render() {\n    return (\n      <Host\n        aria-hidden=\"true\"\n        class={{\n          skeleton: true,\n          [`skeleton--${this.variant}`]: true,\n          [`skeleton--text-${this.textVariant}`]: this.variant === 'text',\n          [`skeleton--icon-${this.iconSize}`]: this.variant === 'icon',\n          [`ds-control--${this.controlSize}`]: this.variant === 'control',\n          [`skeleton--background-${this.background}`]: !!this.background,\n          'skeleton--rounded': this.variant !== 'text' && this.rounded,\n        }}\n        style={this.variant === 'icon' ? undefined : { width: this.widthCss }}\n      >\n        <span\n          class={{\n            skeleton__shape: true,\n            'ds-shimmer-surface': this.shimmer,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAc,IAAM,mrQ,MCsBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,kEAMUC,KAAAC,QAA2B,OAE3BD,KAAAE,YAA2B,mBAE3BF,KAAAG,SAAqB,KAErBH,KAAAI,YAA2B,KAI3BJ,KAAAK,QAAmB,MAEnBL,KAAAM,QAAmB,IAkC5B,CA9BC,YAAYC,GACV,MAAMC,EAAIR,KAAKS,MACf,GAAID,GAAK,KAAM,OAAOE,UACtB,cAAcF,IAAM,SAAW,GAAGA,MAAQA,C,CAG5C,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,yDACS,OACZC,MAAO,CACLC,SAAU,KACV,CAAC,aAAahB,KAAKC,WAAY,KAC/B,CAAC,kBAAkBD,KAAKE,eAAgBF,KAAKC,UAAY,OACzD,CAAC,kBAAkBD,KAAKG,YAAaH,KAAKC,UAAY,OACtD,CAAC,eAAeD,KAAKI,eAAgBJ,KAAKC,UAAY,UACtD,CAAC,wBAAwBD,KAAKiB,gBAAiBjB,KAAKiB,WACpD,oBAAqBjB,KAAKC,UAAY,QAAUD,KAAKK,SAEvDa,MAAOlB,KAAKC,UAAY,OAASS,UAAY,CAAED,MAAOT,KAAKO,WAE3DK,EAAA,QAAAE,IAAA,2CACEC,MAAO,CACLI,gBAAiB,KACjB,qBAAsBnB,KAAKM,W","ignoreList":[]}

package/dist/components/p-DFOhxUQP.js

@@ -1,2 +0,0 @@
-import{p as o,H as e,c as i,h as c,a as s,t as n}from"./index.js";import{d as r}from"./p-B9oadFSC.js";import{D as t,s as d}from"./p-DOUk4KoT.js";import{s as a}from"./p-C0qN3PSb.js";import{C as l,a as h}from"./p-CuwopElg.js";const b=()=>`@media (forced-colors: active){.sc-ds-checkbox:root,.sc-ds-checkbox-h,.ds-forced-colors-scope.sc-ds-checkbox{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-checkbox-h,.ds-control-inactive.sc-ds-checkbox{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-checkbox,.ds-control--lg.sc-ds-checkbox-h,.ds-control--md.sc-ds-checkbox-h,.ds-control--md.sc-ds-checkbox,.ds-control--sm.sc-ds-checkbox-h,.ds-control--sm.sc-ds-checkbox,.ds-control--xs.sc-ds-checkbox-h,.ds-control--xs.sc-ds-checkbox{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-checkbox-h,.ds-control--lg.sc-ds-checkbox{--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-checkbox-h,.ds-control--md.sc-ds-checkbox{--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-checkbox-h,.ds-control--sm.sc-ds-checkbox{--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-checkbox-h,.ds-control--xs.sc-ds-checkbox{--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}@media (forced-colors: active){.sc-ds-checkbox:root,.sc-ds-checkbox-h,.ds-forced-colors-scope.sc-ds-checkbox{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-checkbox-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-checkbox-h,.ds-focus-ring.sc-ds-checkbox,.ds-focus-ring-inset.sc-ds-checkbox-h,.ds-focus-ring-inset.sc-ds-checkbox{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-checkbox-h:focus-visible,.ds-focus-ring.sc-ds-checkbox: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-checkbox-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-checkbox{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-checkbox-h:focus-visible,.ds-focus-ring-inset.sc-ds-checkbox:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-checkbox-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-checkbox: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-checkbox-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-checkbox::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-checkbox-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-checkbox:root,.sc-ds-checkbox-h,.ds-forced-colors-scope.sc-ds-checkbox{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-checkbox-h,.ds-interaction-fill.sc-ds-checkbox{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-checkbox-h::before,.ds-interaction-fill.sc-ds-checkbox::before,.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-checkbox-h::before,.ds-interaction-fill.sc-ds-checkbox::before{z-index:1}.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-checkbox-h,.ds-interaction-fill--bordered.sc-ds-checkbox{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-checkbox-h::before,.ds-interaction-fill--selected.sc-ds-checkbox::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-checkbox-h,.ds-interaction-fill--selected.sc-ds-checkbox{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-checkbox-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-checkbox:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-checkbox-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-checkbox:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-checkbox-h::after,.ds-interaction-fill--grouped.sc-ds-checkbox::after,.ds-interaction-fill--grouped.sc-ds-checkbox-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-checkbox:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-checkbox-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-checkbox:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-checkbox-h,.ds-interaction-fill--grouped.sc-ds-checkbox{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-checkbox-h>.ds-interaction-fill__content.sc-ds-checkbox,.ds-interaction-fill.sc-ds-checkbox>.ds-interaction-fill__content.sc-ds-checkbox,.ds-interaction-fill__content.sc-ds-checkbox{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-checkbox-h,.ds-interaction-fill--on-faint.sc-ds-checkbox{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-checkbox-h,.ds-interaction-fill--on-medium.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-bold.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-strong.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-translucent.sc-ds-checkbox{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-checkbox-h,.ds-interaction-fill--on-inverted.sc-ds-checkbox{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-checkbox-h,.ds-interaction-fill--on-media.sc-ds-checkbox{--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-checkbox-h,.ds-interaction-fill--on-always-dark.sc-ds-checkbox{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-checkbox-h,.ds-interaction-fill--on-navigation.sc-ds-checkbox{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-checkbox-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-checkbox:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-checkbox-h::after,.ds-interaction-fill.sc-ds-checkbox::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-checkbox-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-checkbox:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-checkbox-h::before,.ds-interaction-fill--selected.sc-ds-checkbox::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-checkbox-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-checkbox:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-checkbox:root,.sc-ds-checkbox-h,.ds-forced-colors-scope.sc-ds-checkbox{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-checkbox-h{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap);height:var(--ds-control-height);padding:0 var(--ds-control-padding-inline);border-radius:var(--ds-control-radius);cursor:default;user-select:none}.checkbox--described.sc-ds-checkbox-h{height:auto;min-height:var(--ds-control-height);padding-block:var(--dimension-space-075)}.checkbox--presentation.sc-ds-checkbox-h{width:var(--ds-control-icon);height:var(--ds-control-icon);padding:0;gap:0;pointer-events:none}.checkbox--lg.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-md);--_checkbox-stroke:var(--dimension-stroke-width-018)}.checkbox--md.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-sm);--_checkbox-stroke:var(--dimension-stroke-width-015)}.checkbox--sm.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-iconography-xs);--_checkbox-stroke:var(--dimension-stroke-width-012)}.checkbox--xs.sc-ds-checkbox-h{--_checkbox-box:var(--dimension-size-100);--_checkbox-stroke:calc(var(--dimension-stroke-width-base) * 3 / 32)}.checkbox__placement.sc-ds-checkbox{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon);height:var(--ds-control-icon)}.box.sc-ds-checkbox{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--_checkbox-box);height:var(--_checkbox-box);border:0;border-radius:var(--dimension-radius-025);box-shadow:inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);transition:background-color var(--effect-motion-short-2),     box-shadow var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);background-color:var(--color-background-bold-brand);box-shadow:none}.checkbox__mark.sc-ds-checkbox{width:100%;height:100%;flex-shrink:0;fill:currentColor}.checkbox__copy.sc-ds-checkbox{display:grid;flex:1;gap:var(--dimension-space-025);min-width:0;padding:0 var(--ds-control-label-inset)}@media (forced-colors: active){.box.sc-ds-checkbox{border:var(--_checkbox-stroke) solid var(--ds-forced-color-content);box-shadow:none}.box--marked.sc-ds-checkbox{color:var(--ds-forced-color-on-selected);background-color:var(--ds-forced-color-selected);border-color:var(--ds-forced-color-selected)}}`;let f=0;const v=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=i(this,"dsChange",7);this.internals=this.attachInternals();this.labelId=`ds-checkbox-label-${++f}`;this.descriptionId=`${this.labelId}-description`;this.checked=false;this.size="md";this.value="on";this.disabled=false;this.required=false;this.requiredMessage=t;this.indeterminate=false;this.isInactive=false;this.presentation=false;this.initialChecked=false;this.initialIndeterminate=false;this.formDisabled=false;this.handleActivate=()=>{if(this.isInactive||this.disabled||this.formDisabled||this.presentation)return;if(this.indeterminate)this.indeterminate=false;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=o=>{if(o.key==="Enter"||o.key===" "){o.preventDefault();this.handleActivate()}}}componentWillLoad(){this.initialChecked=this.checked;this.initialIndeterminate=this.indeterminate;this.syncFormValue()}syncFormValue(){const o=this.isInactive||this.disabled||this.formDisabled||this.presentation;a(this.internals,this.checked?this.value:null,{inactive:o});const e=this.required&&!o&&!this.checked;d(this.internals,e,this.requiredMessage)}formDisabledCallback(o){this.formDisabled=o;this.syncFormValue()}formResetCallback(){this.checked=this.initialChecked;this.indeterminate=this.initialIndeterminate}render(){const o=this.isInactive||this.disabled||this.formDisabled;const e=this.checked||this.indeterminate;const i=this.required&&!o&&!this.checked;return c(s,{key:"e95e9a7a8a2ad5ec40576cb817ade83228fe50ce",role:this.presentation?undefined:"checkbox","aria-checked":this.presentation?undefined:this.indeterminate?"mixed":String(this.checked),"aria-disabled":!this.presentation&&o?"true":undefined,"aria-required":!this.presentation&&this.required?"true":undefined,"aria-invalid":!this.presentation&&i?"true":undefined,"aria-labelledby":this.presentation?undefined:this.labelId,"aria-describedby":!this.presentation&&this.description?this.descriptionId:undefined,"aria-hidden":this.presentation?"true":undefined,tabIndex:this.presentation||o?-1:0,class:{checkbox:true,"checkbox--presentation":this.presentation,"checkbox--described":Boolean(this.description),[`checkbox--${this.size}`]:true,[`ds-control--${this.size}`]:true,"ds-control-inactive":o&&!this.presentation,"ds-focus-ring-inset":!this.presentation,"ds-interaction-fill":!o&&!this.presentation},onClick:this.presentation?undefined:this.handleActivate,onKeyDown:this.presentation?undefined:this.handleKeyDown},c("span",{key:"ed09a2a8f825758739deb551cea4aad14798511f",class:"checkbox__placement ds-interaction-fill__content","aria-hidden":"true"},c("span",{key:"3781e295531878c40fba6d50debbe1e0100eeb58",class:{box:true,"box--marked":e}},e&&c("svg",{key:"cf10abaf34903974a34c693893a8047442e10476",class:"checkbox__mark",viewBox:"0 0 16 16",fill:"currentColor",focusable:"false"},c("path",{key:"6c7bfe5255691f685ac971a8c7ce9d9c994c7718",d:this.indeterminate?"M12 7.375V8.625H4V7.375H12Z":"M12.9756 4.65527L7.22559 11.4053C7.11258 11.5379 6.94946 11.6169 6.77539 11.624C6.60111 11.631 6.43095 11.5657 6.30762 11.4424L3.05762 8.19238L3.94238 7.30762L6.71289 10.0781L12.0244 3.84473L12.9756 4.65527Z"})))),!this.presentation&&c("span",{key:"6defdcbfcc019cedd2faec53cb7247d1e40c0b8d",class:"checkbox__copy ds-interaction-fill__content"},c("ds-text",{key:"f0ae2c905e58c6000d56d445e4b11f132ce27be4",class:"checkbox__label",as:"span",variant:l[this.size],textId:this.labelId},this.label),this.description?c("ds-text",{as:"span",variant:h[this.size],color:"secondary",textId:this.descriptionId},this.description):null))}static get formAssociated(){return true}static get watchers(){return{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],presentation:[{syncFormValue:0}]}}static get style(){return b()}},[66,"ds-checkbox",{label:[1],description:[1],checked:[1028],size:[1],name:[513],value:[1],disabled:[516],required:[516],requiredMessage:[1,"required-message"],indeterminate:[1028],isInactive:[4,"is-inactive"],presentation:[4],formDisabled:[32]},undefined,{checked:[{syncFormValue:0}],value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],presentation:[{syncFormValue:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-checkbox","ds-text"];o.forEach((o=>{switch(o){case"ds-checkbox":if(!customElements.get(n(o))){customElements.define(n(o),v)}break;case"ds-text":if(!customElements.get(n(o))){r()}break}}))}u();export{v as C,u as d};
-//# sourceMappingURL=p-DFOhxUQP.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","idCounter","Checkbox","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","labelId","descriptionId","checked","size","value","disabled","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","indeterminate","isInactive","presentation","initialChecked","initialIndeterminate","formDisabled","handleActivate","dsChange","emit","handleKeyDown","e","key","preventDefault","componentWillLoad","syncFormValue","inactive","setFormControlValue","internals","missing","setRequiredValidity","formDisabledCallback","formResetCallback","render","isMarked","invalid","h","Host","role","undefined","String","description","tabIndex","class","checkbox","Boolean","onClick","onKeyDown","box","viewBox","fill","focusable","d","as","variant","CONTROL_TEXT_VARIANT","textId","label","CONTROL_SUPPORTING_TEXT_VARIANT","color"],"sources":["src/wc/components/Checkbox/Checkbox.css?tag=ds-checkbox&encapsulation=scoped","src/wc/components/Checkbox/Checkbox.tsx"],"sourcesContent":["@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  padding: 0 var(--ds-control-padding-inline);\n  border-radius: var(--ds-control-radius);\n  cursor: default;\n  user-select: none;\n}\n\n:host(.checkbox--described) {\n  height: auto;\n  min-height: var(--ds-control-height);\n  padding-block: var(--dimension-space-075);\n}\n\n:host(.checkbox--presentation) {\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n  padding: 0;\n  gap: 0;\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n:host(.checkbox--lg) {\n  --_checkbox-box: var(--dimension-iconography-md);\n  --_checkbox-stroke: var(--dimension-stroke-width-018);\n}\n\n:host(.checkbox--md) {\n  --_checkbox-box: var(--dimension-iconography-sm);\n  --_checkbox-stroke: var(--dimension-stroke-width-015);\n}\n\n:host(.checkbox--sm) {\n  --_checkbox-box: var(--dimension-iconography-xs);\n  --_checkbox-stroke: var(--dimension-stroke-width-012);\n}\n\n:host(.checkbox--xs) {\n  --_checkbox-box: var(--dimension-size-100);\n  --_checkbox-stroke: calc(var(--dimension-stroke-width-base) * 3 / 32);\n}\n\n.checkbox__placement {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon);\n  height: var(--ds-control-icon);\n}\n\n.box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--_checkbox-box);\n  height: var(--_checkbox-box);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: inset 0 0 0 var(--_checkbox-stroke) var(--color-foreground-tertiary);\n  transition:\n    background-color var(--effect-motion-short-2),\n    box-shadow var(--effect-motion-short-2);\n}\n\n.box--marked {\n  color: var(--color-foreground-on-bold-background-primary);\n  background-color: var(--color-background-bold-brand);\n  box-shadow: none;\n}\n\n.checkbox__mark {\n  width: 100%;\n  height: 100%;\n  flex-shrink: 0;\n  fill: currentColor;\n}\n\n.checkbox__copy {\n  display: grid;\n  flex: 1;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n  padding: 0 var(--ds-control-label-inset);\n}\n\n@media (forced-colors: active) {\n  .box {\n    border: var(--_checkbox-stroke) solid var(--ds-forced-color-content);\n    box-shadow: none;\n  }\n\n  .box--marked {\n    color: var(--ds-forced-color-on-selected);\n    background-color: var(--ds-forced-color-selected);\n    border-color: var(--ds-forced-color-selected);\n  }\n}\n","import {\n  AttachInternals,\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport {\n  CONTROL_SUPPORTING_TEXT_VARIANT,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  setFormControlValue,\n  setRequiredValidity,\n} from '../../utils';\n\nexport type CheckboxSize = 'lg' | 'md' | 'sm' | 'xs';\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-checkbox',\n  styleUrl: 'Checkbox.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Checkbox {\n  @AttachInternals() internals!: ElementInternals;\n  private labelId = `ds-checkbox-label-${++idCounter}`;\n  private descriptionId = `${this.labelId}-description`;\n\n  /** Visible label and accessible name. Omitted only in presentation mode. */\n  @Prop() label!: string;\n  /** Optional supporting description associated with the checkbox. */\n  @Prop() description?: string;\n  /** Current checked state. */\n  @Prop({ mutable: true }) checked: boolean = false;\n  /** Visual and placement density. */\n  @Prop() size: CheckboxSize = 'md';\n  /** Native form field name. */\n  @Prop({ reflect: true }) name: string | undefined;\n  /** Submitted value when checked. */\n  @Prop() value: string = 'on';\n  /** Native disabled state. */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Require the checkbox to be checked for form validity. */\n  @Prop({ reflect: true }) required: boolean = false;\n  /** Validation message used when a required checkbox is unchecked. */\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  /** Mixed visual state. Activation clears it before toggling checked. */\n  @Prop({ mutable: true }) indeterminate: boolean = false;\n  /** Design-system inactive state. */\n  @Prop() isInactive: boolean = false;\n  /** Visual-only indicator for a composite control that owns selection semantics. */\n  @Prop() presentation: boolean = false;\n\n  /** Emitted after user activation with the new checked state. */\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  private initialIndeterminate = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.initialIndeterminate = this.indeterminate;\n    this.syncFormValue();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  @Watch('presentation')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled || this.presentation;\n    setFormControlValue(this.internals, this.checked ? this.value : null, { inactive });\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.indeterminate = this.initialIndeterminate;\n  }\n\n  private handleActivate = () => {\n    if (this.isInactive || this.disabled || this.formDisabled || this.presentation) return;\n    if (this.indeterminate) this.indeterminate = false;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this.handleActivate();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const isMarked = this.checked || this.indeterminate;\n    const invalid = this.required && !inactive && !this.checked;\n\n    return (\n      <Host\n        role={this.presentation ? undefined : 'checkbox'}\n        aria-checked={\n          this.presentation ? undefined : this.indeterminate ? 'mixed' : String(this.checked)\n        }\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-required={!this.presentation && this.required ? 'true' : undefined}\n        aria-invalid={!this.presentation && invalid ? 'true' : undefined}\n        aria-labelledby={this.presentation ? undefined : this.labelId}\n        aria-describedby={!this.presentation && this.description ? this.descriptionId : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          checkbox: true,\n          'checkbox--presentation': this.presentation,\n          'checkbox--described': Boolean(this.description),\n          [`checkbox--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'ds-control-inactive': inactive && !this.presentation,\n          'ds-focus-ring-inset': !this.presentation,\n          'ds-interaction-fill': !inactive && !this.presentation,\n        }}\n        onClick={this.presentation ? undefined : this.handleActivate}\n        onKeyDown={this.presentation ? undefined : this.handleKeyDown}\n      >\n        <span class=\"checkbox__placement ds-interaction-fill__content\" aria-hidden=\"true\">\n          <span class={{ box: true, 'box--marked': isMarked }}>\n            {isMarked && (\n              // eslint-disable-next-line local/prefer-ds-icon -- Checkbox owns this fixed state-mark geometry.\n              <svg class=\"checkbox__mark\" viewBox=\"0 0 16 16\" fill=\"currentColor\" focusable=\"false\">\n                <path\n                  d={\n                    this.indeterminate\n                      ? 'M12 7.375V8.625H4V7.375H12Z'\n                      : 'M12.9756 4.65527L7.22559 11.4053C7.11258 11.5379 6.94946 11.6169 6.77539 11.624C6.60111 11.631 6.43095 11.5657 6.30762 11.4424L3.05762 8.19238L3.94238 7.30762L6.71289 10.0781L12.0244 3.84473L12.9756 4.65527Z'\n                  }\n                />\n              </svg>\n            )}\n          </span>\n        </span>\n        {!this.presentation && (\n          <span class=\"checkbox__copy ds-interaction-fill__content\">\n            <ds-text\n              class=\"checkbox__label\"\n              as=\"span\"\n              variant={CONTROL_TEXT_VARIANT[this.size]}\n              textId={this.labelId}\n            >\n              {this.label}\n            </ds-text>\n            {this.description ? (\n              <ds-text\n                as=\"span\"\n                variant={CONTROL_SUPPORTING_TEXT_VARIANT[this.size]}\n                color=\"secondary\"\n                textId={this.descriptionId}\n              >\n                {this.description}\n              </ds-text>\n            ) : null}\n          </span>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DI7qbahC.js

@@ -1,2 +0,0 @@
-import{p as e,H as o,c as s,h as n,a,t as d}from"./index.js";import{d as i}from"./p-DQpw21HO.js";import{d as r}from"./p-CG4Fp3SY.js";import{d as l}from"./p-Cea7rROU.js";import{d as t}from"./p-0XTyQNRG.js";import{d as c}from"./p-B9oadFSC.js";import{d as h}from"./p-JuKGR7Ay.js";const p=()=>`.ds-control--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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--lg.sc-ds-panel-tool-header,.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header,.ds-control--sm.sc-ds-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header,.ds-control--xs.sc-ds-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-panel-tool-header-h,.ds-control--lg.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--md.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--sm.sc-ds-panel-tool-header{--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-panel-tool-header-h,.ds-control--xs.sc-ds-panel-tool-header{--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-chrome-header.sc-ds-panel-tool-header{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-panel-tool-header{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-panel-tool-header{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-panel-tool-header,.ds-chrome-header__trailing.sc-ds-panel-tool-header{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-panel-tool-header{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-panel-tool-header{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-panel-tool-header{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-panel-tool-header{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-panel-tool-header,.ds-chrome-header__description.sc-ds-panel-tool-header{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-panel-tool-header{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-panel-tool-header .ds-chrome-header__description.sc-ds-panel-tool-header{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-panel-tool-header-h{display:block;flex:0 0 auto;box-sizing:border-box}.panel-tool-header.sc-ds-panel-tool-header{height:var(--dimension-size-600);color:var(--color-foreground-primary);-webkit-user-select:none;user-select:none}.panel-tool-header__leading.sc-ds-panel-tool-header:empty,.panel-tool-header__trailing.sc-ds-panel-tool-header:empty{display:none}.panel-tool-header__trailing.sc-ds-panel-tool-header{gap:var(--dimension-space-050);justify-content:flex-end}ds-text.panel-tool-header__heading.sc-ds-panel-tool-header{display:inline-flex;flex:1 1 0;align-items:center;width:auto;min-width:0;height:var(--ds-control-height);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;text-align:left;-webkit-user-select:none;user-select:none}`;const m=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.dsBack=s(this,"dsBack",7);this.dsMenuToggle=s(this,"dsMenuToggle",7);this.dsAction=s(this,"dsAction",7);this.heading="";this.showBack=false;this.backIcon="ChevronLeft";this.backAriaLabel="Back";this.showMenu=true;this.menuAriaLabel="More options";this.menuTriggerId="";this.menuExpanded=false;this.actions=[]}async focusMenuTrigger(){const e=this.el.querySelector('ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id="menu"]');await(e?.setFocus?.())}render(){const e=this.actions.length>0;const o=e?this.actions:this.showMenu?[{id:"menu",icon:"Ellipses",ariaLabel:this.menuAriaLabel,triggerId:this.menuTriggerId,controls:this.menuControls,expanded:this.menuExpanded,surfaceOpen:this.menuSurfaceOpen,haspopup:"menu"}]:[];return n(a,{key:"a322e48e4ae2dd47347df60dc61c2b0a738ecf4b"},n("header",{key:"a4bb14a5554d64a03dfdfb8367a343a91afc7ca5",class:"panel-tool-header ds-chrome-header ds-chrome-header--bounded"},n("div",{key:"1f9043713859ce0110b21260432e873f084e6b59",class:"panel-tool-header__leading ds-chrome-header__leading"},this.showBack?n("ds-tooltip",{label:this.backAriaLabel,side:"bottom",size:"sm"},n("ds-button-unfilled",{class:"panel-tool-header__back",variant:"icon",icon:this.backIcon,size:"md","aria-label":this.backAriaLabel,activeFill:false,hasBorder:false,onDsClick:e=>this.dsBack.emit(e.detail)})):null),n("ds-text",{key:"7ec9df6d216e7825ef80ed0ef41f79fe8c7b1501",class:"panel-tool-header__heading ds-chrome-header__heading ds-control--md",as:"h2",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.heading),n("div",{key:"772d0b9ea90994678cfa1e1a41c0fcc060a88160",class:"panel-tool-header__trailing ds-chrome-header__trailing"},o.map((o=>n("ds-tooltip",{key:o.id,label:o.ariaLabel,side:"bottom",size:"sm"},n("ds-button-unfilled",{id:o.triggerId||undefined,"data-header-action-id":o.id,class:{"panel-tool-header__action":true,"panel-tool-header__menu":o.id==="menu"},variant:"icon",icon:o.icon,size:"md","aria-label":o.ariaLabel,haspopup:o.haspopup,controls:o.controls,expanded:o.expanded,surfaceOpen:o.surfaceOpen,pressed:o.pressed,isInactive:o.isInactive,activeFill:false,hasBorder:false,onDsClick:s=>{if(!e&&o.id==="menu")this.dsMenuToggle.emit(s.detail);this.dsAction.emit({id:o.id,originalEvent:s.detail,anchor:s.currentTarget})}})))))))}get el(){return this}static get style(){return p()}},[2,"ds-panel-tool-header",{heading:[1],showBack:[4,"show-back"],backIcon:[1,"back-icon"],backAriaLabel:[1,"back-aria-label"],showMenu:[4,"show-menu"],menuAriaLabel:[1,"menu-aria-label"],menuTriggerId:[1,"menu-trigger-id"],menuControls:[1,"menu-controls"],menuExpanded:[4,"menu-expanded"],menuSurfaceOpen:[4,"menu-surface-open"],actions:[16],focusMenuTrigger:[64]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-panel-tool-header","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-panel-tool-header":if(!customElements.get(d(e))){customElements.define(d(e),m)}break;case"ds-badge":if(!customElements.get(d(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){r()}break;case"ds-icon":if(!customElements.get(d(e))){l()}break;case"ds-loader":if(!customElements.get(d(e))){t()}break;case"ds-text":if(!customElements.get(d(e))){c()}break;case"ds-tooltip":if(!customElements.get(d(e))){h()}break}}))}g();export{m as P,g as d};
-//# sourceMappingURL=p-DI7qbahC.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["panelToolHeaderCss","PanelToolHeader","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","showBack","backIcon","backAriaLabel","showMenu","menuAriaLabel","menuTriggerId","menuExpanded","actions","focusMenuTrigger","trigger","el","querySelector","setFocus","render","authoredActions","length","id","icon","ariaLabel","triggerId","controls","menuControls","expanded","surfaceOpen","menuSurfaceOpen","haspopup","h","Host","key","class","label","side","size","variant","activeFill","hasBorder","onDsClick","event","dsBack","emit","detail","as","emphasis","color","lineTruncation","map","action","undefined","pressed","isInactive","dsMenuToggle","dsAction","originalEvent","anchor","currentTarget"],"sources":["src/wc/components/PanelToolHeader/PanelToolHeader.css?tag=ds-panel-tool-header&encapsulation=scoped","src/wc/components/PanelToolHeader/PanelToolHeader.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: block;\n  flex: 0 0 auto;\n  box-sizing: border-box;\n}\n\n.panel-tool-header {\n  height: var(--dimension-size-600);\n  color: var(--color-foreground-primary);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.panel-tool-header__leading:empty,\n.panel-tool-header__trailing:empty {\n  display: none;\n}\n\n.panel-tool-header__trailing {\n  gap: var(--dimension-space-050);\n  justify-content: flex-end;\n}\n\nds-text.panel-tool-header__heading {\n  display: inline-flex;\n  flex: 1 1 0;\n  align-items: center;\n  width: auto;\n  min-width: 0;\n  height: var(--ds-control-height);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport type {\n  PanelToolHeaderActionDetail,\n  PanelToolsHeaderAction,\n} from '../PanelTools/panel-tools-types';\n\n@Component({\n  tag: 'ds-panel-tool-header',\n  styleUrl: 'PanelToolHeader.css',\n  scoped: true,\n})\nexport class PanelToolHeader {\n  @Element() el!: HTMLElement;\n\n  /** Visible heading for the active tool view. */\n  @Prop() heading: string = '';\n  /** Show the leading Back action. */\n  @Prop() showBack: boolean = false;\n  /** Canonical icon for the leading navigation or dismiss action. */\n  @Prop() backIcon: string = 'ChevronLeft';\n  /** Accessible name for the leading navigation or dismiss action. */\n  @Prop() backAriaLabel: string = 'Back';\n  /** Show the trailing options-menu trigger. */\n  @Prop() showMenu: boolean = true;\n  /** Accessible name for the options-menu trigger. */\n  @Prop() menuAriaLabel: string = 'More options';\n  /** Stable id placed on the menu trigger host for ds-menu anchoring. */\n  @Prop() menuTriggerId: string = '';\n  /** Id of the menu controlled by the trigger. */\n  @Prop() menuControls: string | undefined;\n  /** Whether the controlled menu is open. */\n  @Prop() menuExpanded: boolean = false;\n  /** Associated menu surface is visible, including exit motion. */\n  @Prop() menuSurfaceOpen: boolean | undefined;\n  /** Trailing application-owned icon actions. When present, these replace the legacy menu action. */\n  @Prop() actions: PanelToolsHeaderAction[] = [];\n\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n  @Event() dsMenuToggle!: EventEmitter<MouseEvent>;\n  @Event() dsAction!: EventEmitter<PanelToolHeaderActionDetail>;\n\n  @Method()\n  async focusMenuTrigger() {\n    const trigger = this.el.querySelector(\n      'ds-button-unfilled.panel-tool-header__menu, ds-button-unfilled[data-header-action-id=\"menu\"]'\n    ) as (HTMLElement & { setFocus?: () => Promise<void> }) | null;\n    await trigger?.setFocus?.();\n  }\n\n  render() {\n    const authoredActions = this.actions.length > 0;\n    const actions: PanelToolsHeaderAction[] = authoredActions\n      ? this.actions\n      : this.showMenu\n        ? [\n            {\n              id: 'menu',\n              icon: 'Ellipses',\n              ariaLabel: this.menuAriaLabel,\n              triggerId: this.menuTriggerId,\n              controls: this.menuControls,\n              expanded: this.menuExpanded,\n              surfaceOpen: this.menuSurfaceOpen,\n              haspopup: 'menu',\n            },\n          ]\n        : [];\n\n    return (\n      <Host>\n        <header class=\"panel-tool-header ds-chrome-header ds-chrome-header--bounded\">\n          <div class=\"panel-tool-header__leading ds-chrome-header__leading\">\n            {this.showBack ? (\n              <ds-tooltip label={this.backAriaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  class=\"panel-tool-header__back\"\n                  variant=\"icon\"\n                  icon={this.backIcon}\n                  size=\"md\"\n                  aria-label={this.backAriaLabel}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n                />\n              </ds-tooltip>\n            ) : null}\n          </div>\n          <ds-text\n            class=\"panel-tool-header__heading ds-chrome-header__heading ds-control--md\"\n            as=\"h2\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n            lineTruncation={1}\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"panel-tool-header__trailing ds-chrome-header__trailing\">\n            {actions.map(action => (\n              <ds-tooltip key={action.id} label={action.ariaLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  id={action.triggerId || undefined}\n                  data-header-action-id={action.id}\n                  class={{\n                    'panel-tool-header__action': true,\n                    'panel-tool-header__menu': action.id === 'menu',\n                  }}\n                  variant=\"icon\"\n                  icon={action.icon}\n                  size=\"md\"\n                  aria-label={action.ariaLabel}\n                  haspopup={action.haspopup}\n                  controls={action.controls}\n                  expanded={action.expanded}\n                  surfaceOpen={action.surfaceOpen}\n                  pressed={action.pressed}\n                  isInactive={action.isInactive}\n                  activeFill={false}\n                  hasBorder={false}\n                  onDsClick={(event: CustomEvent<MouseEvent>) => {\n                    if (!authoredActions && action.id === 'menu')\n                      this.dsMenuToggle.emit(event.detail);\n                    this.dsAction.emit({\n                      id: action.id,\n                      originalEvent: event.detail,\n                      anchor: event.currentTarget as HTMLElement,\n                    });\n                  }}\n                />\n              </ds-tooltip>\n            ))}\n          </div>\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qRAAA,MAAMA,EAAqB,IAAM,6mL,MCWpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,yJASUC,KAAAC,QAAkB,GAElBD,KAAAE,SAAoB,MAEpBF,KAAAG,SAAmB,cAEnBH,KAAAI,cAAwB,OAExBJ,KAAAK,SAAoB,KAEpBL,KAAAM,cAAwB,eAExBN,KAAAO,cAAwB,GAIxBP,KAAAQ,aAAwB,MAIxBR,KAAAS,QAAoC,EAqG7C,CA9FC,sBAAMC,GACJ,MAAMC,EAAUX,KAAKY,GAAGC,cACtB,sGAEIF,GAASG,a,CAGjB,MAAAC,GACE,MAAMC,EAAkBhB,KAAKS,QAAQQ,OAAS,EAC9C,MAAMR,EAAoCO,EACtChB,KAAKS,QACLT,KAAKK,SACH,CACE,CACEa,GAAI,OACJC,KAAM,WACNC,UAAWpB,KAAKM,cAChBe,UAAWrB,KAAKO,cAChBe,SAAUtB,KAAKuB,aACfC,SAAUxB,KAAKQ,aACfiB,YAAazB,KAAK0B,gBAClBC,SAAU,SAGd,GAEN,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,gEACZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wDACR/B,KAAKE,SACJ0B,EAAA,cAAYI,MAAOhC,KAAKI,cAAe6B,KAAK,SAASC,KAAK,MACxDN,EAAA,sBACEG,MAAM,0BACNI,QAAQ,OACRhB,KAAMnB,KAAKG,SACX+B,KAAK,KAAI,aACGlC,KAAKI,cACjBgC,WAAY,MACZC,UAAW,MACXC,UAAYC,GAAmCvC,KAAKwC,OAAOC,KAAKF,EAAMG,WAGxE,MAENd,EAAA,WAAAE,IAAA,2CACEC,MAAM,sEACNY,GAAG,KACHR,QAAQ,mBACRS,SAAQ,KACRC,MAAM,UACNC,eAAgB,GAEf9C,KAAKC,SAER2B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0DACRtB,EAAQsC,KAAIC,GACXpB,EAAA,cAAYE,IAAKkB,EAAO9B,GAAIc,MAAOgB,EAAO5B,UAAWa,KAAK,SAASC,KAAK,MACtEN,EAAA,sBACEV,GAAI8B,EAAO3B,WAAa4B,UAAS,wBACVD,EAAO9B,GAC9Ba,MAAO,CACL,4BAA6B,KAC7B,0BAA2BiB,EAAO9B,KAAO,QAE3CiB,QAAQ,OACRhB,KAAM6B,EAAO7B,KACbe,KAAK,KAAI,aACGc,EAAO5B,UACnBO,SAAUqB,EAAOrB,SACjBL,SAAU0B,EAAO1B,SACjBE,SAAUwB,EAAOxB,SACjBC,YAAauB,EAAOvB,YACpByB,QAASF,EAAOE,QAChBC,WAAYH,EAAOG,WACnBf,WAAY,MACZC,UAAW,MACXC,UAAYC,IACV,IAAKvB,GAAmBgC,EAAO9B,KAAO,OACpClB,KAAKoD,aAAaX,KAAKF,EAAMG,QAC/B1C,KAAKqD,SAASZ,KAAK,CACjBvB,GAAI8B,EAAO9B,GACXoC,cAAef,EAAMG,OACrBa,OAAQhB,EAAMiB,eACd,S","ignoreList":[]}

package/dist/components/p-DP75OhfU.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,c as n,h as i,t as d,a as s}from"./index.js";import{r as e,b as r}from"./p-DZ58Sg5a.js";import{d as l}from"./p-DQpw21HO.js";import{d as a}from"./p-Cea7rROU.js";import{d as c}from"./p-0XTyQNRG.js";import{d as u}from"./p-B9oadFSC.js";import{c as b}from"./p-DuFm-ieS.js";const f=()=>`@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-button-filled-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-filled-h,.ds-focus-ring.sc-ds-button-filled,.ds-focus-ring-inset.sc-ds-button-filled-h,.ds-focus-ring-inset.sc-ds-button-filled{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-button-filled-h:focus-visible,.ds-focus-ring.sc-ds-button-filled: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-filled-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{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-filled-h:focus-visible,.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-button-filled: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-filled-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-button-filled-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-button-filled-h::after,.ds-interaction-fill--grouped.sc-ds-button-filled::after,.ds-interaction-fill--grouped.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-button-filled-h,.ds-interaction-fill--grouped.sc-ds-button-filled{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-button-filled-h,.ds-interaction-fill--on-faint.sc-ds-button-filled{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-translucent.sc-ds-button-filled{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-button-filled-h,.ds-interaction-fill--on-inverted.sc-ds-button-filled{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-button-filled-h,.ds-interaction-fill--on-media.sc-ds-button-filled{--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-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-filled-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-button-filled:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-button-filled-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-button-filled:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}.ds-control-press-scale.sc-ds-button-filled{transition:scale var(--effect-motion-short-2)}.ds-control-press-scale.sc-ds-button-filled: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-filled,.ds-control-press-scale.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive):not([aria-busy='true']){scale:none;transition:none}}@media (forced-colors: active){.sc-ds-button-filled:root,.sc-ds-button-filled-h,.ds-forced-colors-scope.sc-ds-button-filled{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-button-filled,.ds-control--lg.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled,.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled,.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-button-filled-h,.ds-control--lg.sc-ds-button-filled{--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-filled-h,.ds-control--md.sc-ds-button-filled{--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-filled-h,.ds-control--sm.sc-ds-button-filled{--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-filled-h,.ds-control--xs.sc-ds-button-filled{--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--lg.ds-control--inset.sc-ds-button-filled-h,.ds-control--lg.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-button-filled-h,.ds-control--md.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-button-filled-h,.ds-control--sm.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-button-filled-h,.ds-control--xs.ds-control--inset.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-button-filled-h,.ds-control--lg.ds-control--inset-double.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-button-filled-h,.ds-control--md.ds-control--inset-double.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-button-filled-h,.ds-control--sm.ds-control--inset-double.sc-ds-button-filled{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.ds-control-frame.sc-ds-button-filled{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-section-heading.sc-ds-button-filled{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-button-filled{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-filled{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-button-filled{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-button-filled{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none}.ds-button-host--icon.ds-control-width--hug.sc-ds-button-filled-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))}.ds-button-host--icon.ds-control-width--fill.sc-ds-button-filled-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-filled-h .ds-button.sc-ds-button-filled{width:100%}.ds-button.sc-ds-button-filled{justify-content:center;overflow:hidden;min-inline-size:var(--ds-control-height);border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));border-start-start-radius:var(     --ds-button-radius-start-start,     var(--ds-control-radius, var(--dimension-radius-025))   );border-start-end-radius:var(     --ds-button-radius-start-end,     var(--ds-control-radius, var(--dimension-radius-025))   );border-end-start-radius:var(     --ds-button-radius-end-start,     var(--ds-control-radius, var(--dimension-radius-025))   );border-end-end-radius:var(     --ds-button-radius-end-end,     var(--ds-control-radius, var(--dimension-radius-025))   );cursor:default;-webkit-user-select:none;user-select:none}.ds-button--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.ds-button--rounded.sc-ds-button-filled{--ds-control-radius:var(--dimension-radius-half)}.ds-button--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012)}.ds-button--bordered.sc-ds-button-filled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-button__icon-wrap.sc-ds-button-filled,.ds-button__label.sc-ds-button-filled,.ds-button__chevron.sc-ds-button-filled{position:relative;z-index:2}.ds-button__label.sc-ds-button-filled{flex-shrink:0;min-width:0;white-space:nowrap}.ds-button__label--loading.sc-ds-button-filled,.ds-button__chevron--loading.sc-ds-button-filled{visibility:hidden}.ds-button.sc-ds-button-filled>.ds-button__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.ds-button__dot.sc-ds-button-filled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}@media (forced-colors: active){.ds-button.sc-ds-button-filled{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}.ds-button-split.sc-ds-button-filled{position:relative;display:inline-flex;align-items:stretch;min-width:0;overflow:hidden;gap:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent}.ds-control-width--fill.sc-ds-button-filled-h .ds-button-split.sc-ds-button-filled{width:100%}.ds-button-split.sc-ds-button-filled>.ds-button-split__primary.sc-ds-button-filled{flex:1 1 auto;width:auto;min-width:0;border-start-end-radius:var(--dimension-radius-000);border-end-end-radius:var(--dimension-radius-000)}.ds-button-split.sc-ds-button-filled>.ds-button-split__menu.sc-ds-button-filled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);border-start-start-radius:var(--dimension-radius-000);border-end-start-radius:var(--dimension-radius-000)}.ds-button-split__divider.sc-ds-button-filled{position:relative;z-index:3;align-self:stretch;flex:0 0 0;margin-inline-start:calc(-1 * var(--dimension-stroke-width-012));border-inline-start:var(--dimension-stroke-width-012) solid var(--ds-button-split-divider);pointer-events:none}.ds-button-split__divider--content-height.sc-ds-button-filled{align-self:center;block-size:var(--ds-button-split-divider-content-height)}.ds-button-split__outline.sc-ds-button-filled{position:absolute;z-index:3;inset:0;border:var(--dimension-stroke-width-012) solid var(--ds-button-split-border);border-radius:inherit;pointer-events:none}.ds-control--lg.sc-ds-button-filled-h{--ds-button-split-divider-content-height:var(--dimension-size-300)}.ds-control--md.sc-ds-button-filled-h{--ds-button-split-divider-content-height:var(--dimension-size-250)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled-h{--ds-button-split-divider-content-height:var(--dimension-size-200)}.ds-button-split-host--primary-icon.ds-control-width--hug.sc-ds-button-filled-h .ds-button-split.sc-ds-button-filled>.ds-button-split__primary.sc-ds-button-filled{flex:0 0 var(--ds-control-height);width:var(--ds-control-height);min-width:var(--ds-control-height);height:var(--ds-control-height)}.ds-button-split--rounded.sc-ds-button-filled{border-radius:var(--dimension-radius-half)}.sc-ds-button-filled-h{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand);--ds-button-filled-border:var(--color-border-secondary);--ds-button-split-border:var(--color-border-secondary);--ds-button-split-divider:var(--color-border-on-bold-background-tertiary)}.button-filled-host--contrast-strong.sc-ds-button-filled-h{--ds-button-split-divider:var(--color-border-on-strong-background-tertiary)}.button-filled-host--contrast-medium.sc-ds-button-filled-h{--ds-button-split-divider:var(--color-border-on-medium-background-tertiary)}.button-filled-host--contrast-faint.sc-ds-button-filled-h{--ds-button-split-divider:var(--color-border-tertiary)}.button-filled-host--background-medium.sc-ds-button-filled-h{--ds-button-split-border:var(--color-border-on-medium-background-secondary)}.button-filled-host--background-bold.sc-ds-button-filled-h{--ds-button-split-border:var(--color-border-on-bold-background-secondary)}.button-filled-host--background-strong.sc-ds-button-filled-h{--ds-button-split-border:var(--color-border-on-strong-background-secondary)}.button-filled-host--background-translucent.sc-ds-button-filled-h{--ds-button-split-border:var(--color-translucent-border-secondary)}.button-filled-host--background-inverted.sc-ds-button-filled-h{--ds-button-split-border:var(--color-inverted-border-secondary)}.button-filled-host--background-media.sc-ds-button-filled-h{--ds-button-split-border:var(--color-media-border-secondary)}.button-filled-host--background-always-dark.sc-ds-button-filled-h{--ds-button-split-border:var(--color-always-dark-border-secondary)}.button-filled.sc-ds-button-filled{background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2)}.button-filled--bordered.sc-ds-button-filled{--ds-interaction-border-color:var(--ds-button-filled-border)}.button-filled--background-medium.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-medium-background-secondary)}.button-filled--background-bold.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-bold-background-secondary)}.button-filled--background-strong.sc-ds-button-filled{--ds-button-filled-border:var(--color-border-on-strong-background-secondary)}.button-filled--background-translucent.sc-ds-button-filled{--ds-button-filled-border:var(--color-translucent-border-secondary)}.button-filled--background-inverted.sc-ds-button-filled{--ds-button-filled-border:var(--color-inverted-border-secondary)}.button-filled--background-media.sc-ds-button-filled{--ds-button-filled-border:var(--color-media-border-secondary)}.button-filled--background-always-dark.sc-ds-button-filled{--ds-button-filled-border:var(--color-always-dark-border-secondary)}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}.button-filled--contrast-bold.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-bold-background-primary)}.button-filled--contrast-strong.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-strong-background-primary)}.button-filled--contrast-medium.button-filled.sc-ds-button-filled{--ds-button-filled-fg:var(--color-foreground-on-medium-background-primary)}`;const v=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick",7);this.dsMenuClick=n(this,"dsMenuClick",7);this.variant="label";this.size="md";this.isInset=false;this.insetDepth="single";this.width="hug";this.label="";this.labelEmphasis=true;this.icon="";this.intent="brand";this.contrast="bold";this.hasBorder=false;this.rounded=false;this.pressScale=true;this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.split=false;this.menuAriaLabel="More options";this.hasMenu=false;this.buttonEl=null;this.menuButtonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsClick.emit(t)};this.handleMenuClick=t=>{if(this.isInactive||this.isLoading){t.preventDefault();t.stopPropagation();return}this.dsMenuClick.emit(t)}}async setFocus(t="primary"){(t==="menu"?this.menuButtonEl:this.buttonEl)?.focus()}get resolvedHaspopup(){return this.haspopup??(this.hasMenu?"menu":undefined)}get resolvedSurfaceOpen(){return(this.surfaceOpen??this.expanded===true)&&!this.isInactive}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}get doubleInset(){return this.isInset&&this.insetDepth==="double"&&this.size!=="xs"}buttonClass(t,o,n){const i={"button-filled":true,"ds-button":true,"ds-focus-ring-inset":true,"ds-control-press-scale":this.pressScale&&!this.split,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","button-filled--bordered":n,"ds-button--bordered":n,"button-filled--expanded":o&&!this.isInactive,"ds-interaction-fill--surface-open":o,"ds-button--expanded":o&&!this.isInactive,"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--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,"ds-control-frame":true,"button-filled--icon":t==="icon","ds-button--icon":t==="icon","button-filled--label":t==="label","button-filled--icon-label":t==="icon-label","button-filled--rounded":this.rounded,"ds-button--rounded":this.rounded,[`button-filled--background-${this.background}`]:this.background!==undefined,[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:true};return i}render(){const t=i("button",{key:"e64dbe8351034366a0cc5a657748b2ff8eeb9d2d",ref:t=>{this.buttonEl=t??null},type:this.type,class:{...this.buttonClass(this.variant,!this.split&&this.resolvedSurfaceOpen,this.hasBorder&&!this.split),"ds-button-split__primary":this.split},disabled:this.isInactive,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,"aria-disabled":this.isLoading?"true":undefined,"aria-controls":this.split?undefined:this.controls,"aria-expanded":this.split||this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.split?undefined:this.resolvedHaspopup,onPointerDown:t=>r(t,this.pressScale&&!this.split&&!this.isInactive&&!this.isLoading),onClick:this.handleClick},e({namespace:"button-filled",variant:this.variant,size:this.size,label:this.label,labelEmphasis:this.labelEmphasis,icon:this.icon,hasMenu:!this.split&&this.hasMenu,isLoading:this.isLoading}));const o=this.split?i("div",{class:{"ds-button-split":true,"ds-button-split--rounded":this.rounded}},t,i("span",{class:"ds-button-split__divider","aria-hidden":"true"}),i("button",{ref:t=>{this.menuButtonEl=t??null},class:{...this.buttonClass("icon",this.resolvedSurfaceOpen,false),"ds-button-split__menu":true},type:"button",disabled:this.isInactive||this.isLoading,"aria-label":this.menuAriaLabel,"aria-controls":this.controls,"aria-expanded":String(this.expanded===true),"aria-haspopup":"menu",onClick:this.handleMenuClick},e({namespace:"button-filled",variant:"icon",size:this.size,label:"",labelEmphasis:true,icon:"ChevronDown",hasMenu:false,isLoading:false})),this.hasBorder?i("span",{class:"ds-button-split__outline","aria-hidden":"true"}):null):t;return i(s,{key:"41a8d5cad2cd6e0ae639357559c71e3310e1eb94",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon"&&!this.split,"ds-button-host--icon":this.variant==="icon"&&!this.split,"ds-button-split-host":this.split,"ds-button-split-host--primary-icon":this.split&&this.variant==="icon",[`button-filled-host--contrast-${this.contrast}`]:this.split,[`button-filled-host--background-${this.background}`]:this.split&&this.background!==undefined,"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--inset":this.isInset&&!this.doubleInset,"ds-control--inset-double":this.doubleInset,...b(this.width)},tabIndex:-1},o)}get el(){return this}static get style(){return f()}},[2,"ds-button-filled",{variant:[1],size:[1],isInset:[4,"is-inset"],insetDepth:[1,"inset-depth"],width:[1],label:[1],labelEmphasis:[4,"label-emphasis"],icon:[1],intent:[1],contrast:[1],hasBorder:[4,"has-border"],background:[1],rounded:[4],pressScale:[4,"press-scale"],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],surfaceOpen:[4,"surface-open"],haspopup:[1],split:[4],menuAriaLabel:[1,"menu-aria-label"],hasMenu:[4,"has-menu"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-badge","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(d(t))){customElements.define(d(t),v)}break;case"ds-badge":if(!customElements.get(d(t))){l()}break;case"ds-icon":if(!customElements.get(d(t))){a()}break;case"ds-loader":if(!customElements.get(d(t))){c()}break;case"ds-text":if(!customElements.get(d(t))){u()}break}}))}h();export{v as B,h as d};
-//# sourceMappingURL=p-DP75OhfU.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonFilledCss","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","isInset","insetDepth","width","label","labelEmphasis","icon","intent","contrast","hasBorder","rounded","pressScale","isInactive","isLoading","type","ariaLabel","split","menuAriaLabel","hasMenu","buttonEl","menuButtonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","handleMenuClick","dsMenuClick","setFocus","segment","focus","resolvedHaspopup","haspopup","undefined","resolvedSurfaceOpen","surfaceOpen","expanded","accessibleName","doubleInset","buttonClass","bordered","cls","background","render","primaryButton","h","key","ref","el","class","disabled","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","control","Host","controlWidthClass","tabIndex"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/button-base.css';\n@import '../../utils/button-split.css';\n\n:host {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n  --ds-button-filled-border: var(--color-border-secondary);\n  --ds-button-split-border: var(--color-border-secondary);\n  --ds-button-split-divider: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.button-filled-host--contrast-strong) {\n  --ds-button-split-divider: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.button-filled-host--contrast-medium) {\n  --ds-button-split-divider: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.button-filled-host--contrast-faint) {\n  --ds-button-split-divider: var(--color-border-tertiary);\n}\n\n:host(.button-filled-host--background-medium) {\n  --ds-button-split-border: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.button-filled-host--background-bold) {\n  --ds-button-split-border: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.button-filled-host--background-strong) {\n  --ds-button-split-border: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.button-filled-host--background-translucent) {\n  --ds-button-split-border: var(--color-translucent-border-secondary);\n}\n\n:host(.button-filled-host--background-inverted) {\n  --ds-button-split-border: var(--color-inverted-border-secondary);\n}\n\n:host(.button-filled-host--background-media) {\n  --ds-button-split-border: var(--color-media-border-secondary);\n}\n\n:host(.button-filled-host--background-always-dark) {\n  --ds-button-split-border: var(--color-always-dark-border-secondary);\n}\n\n.button-filled {\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. ButtonFilled\n * deliberately has no active state, so hold the pressed wash for the popup's\n * complete rendered lifecycle instead of promoting any selected treatment.\n */\n/* Inset stroke via interaction-fill ::after (above hover and pressed washes). */\n.button-filled--bordered {\n  --ds-interaction-border-color: var(--ds-button-filled-border);\n}\n\n/*\n * Parent-surface context affects only the optional inset border.\n * Intent + contrast continue to own fill, foreground, and interaction overlays.\n */\n.button-filled--background-medium {\n  --ds-button-filled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-filled--background-bold {\n  --ds-button-filled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-filled--background-strong {\n  --ds-button-filled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-filled--background-translucent {\n  --ds-button-filled-border: var(--color-translucent-border-secondary);\n}\n\n.button-filled--background-inverted {\n  --ds-button-filled-border: var(--color-inverted-border-secondary);\n}\n\n.button-filled--background-media {\n  --ds-button-filled-border: var(--color-media-border-secondary);\n}\n\n.button-filled--background-always-dark {\n  --ds-button-filled-border: var(--color-always-dark-border-secondary);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* ── Intent + contrast (bold default) ─────────────────────────────────────── */\n\n.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-bold-neutral);\n  --ds-button-filled-fg: var(--color-foreground-faint-neutral);\n}\n\n.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-bold-ai);\n  --ds-button-filled-fg: var(--color-foreground-faint-ai);\n}\n\n.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-bold-negative);\n  --ds-button-filled-fg: var(--color-foreground-faint-negative);\n}\n\n.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-bold-warning);\n  --ds-button-filled-fg: var(--color-foreground-faint-warning);\n}\n\n.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-bold-caution);\n  --ds-button-filled-fg: var(--color-foreground-faint-caution);\n}\n\n.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-bold-positive);\n  --ds-button-filled-fg: var(--color-foreground-faint-positive);\n}\n\n.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-bold-guide);\n  --ds-button-filled-fg: var(--color-foreground-faint-guide);\n}\n\n.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-bold-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-faint-walkthrough);\n}\n\n/* strong → medium fg */\n.button-filled--contrast-strong.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-strong-neutral);\n  --ds-button-filled-fg: var(--color-foreground-medium-neutral);\n}\n\n.button-filled--contrast-strong.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-strong-brand);\n  --ds-button-filled-fg: var(--color-foreground-medium-brand);\n}\n\n.button-filled--contrast-strong.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-strong-ai);\n  --ds-button-filled-fg: var(--color-foreground-medium-ai);\n}\n\n.button-filled--contrast-strong.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-strong-negative);\n  --ds-button-filled-fg: var(--color-foreground-medium-negative);\n}\n\n.button-filled--contrast-strong.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-strong-warning);\n  --ds-button-filled-fg: var(--color-foreground-medium-warning);\n}\n\n.button-filled--contrast-strong.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-strong-caution);\n  --ds-button-filled-fg: var(--color-foreground-medium-caution);\n}\n\n.button-filled--contrast-strong.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-strong-positive);\n  --ds-button-filled-fg: var(--color-foreground-medium-positive);\n}\n\n.button-filled--contrast-strong.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-strong-guide);\n  --ds-button-filled-fg: var(--color-foreground-medium-guide);\n}\n\n.button-filled--contrast-strong.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-strong-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-medium-walkthrough);\n}\n\n/* medium → strong fg */\n.button-filled--contrast-medium.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-medium-neutral);\n  --ds-button-filled-fg: var(--color-foreground-strong-neutral);\n}\n\n.button-filled--contrast-medium.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-medium-brand);\n  --ds-button-filled-fg: var(--color-foreground-strong-brand);\n}\n\n.button-filled--contrast-medium.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-medium-ai);\n  --ds-button-filled-fg: var(--color-foreground-strong-ai);\n}\n\n.button-filled--contrast-medium.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-medium-negative);\n  --ds-button-filled-fg: var(--color-foreground-strong-negative);\n}\n\n.button-filled--contrast-medium.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-medium-warning);\n  --ds-button-filled-fg: var(--color-foreground-strong-warning);\n}\n\n.button-filled--contrast-medium.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-medium-caution);\n  --ds-button-filled-fg: var(--color-foreground-strong-caution);\n}\n\n.button-filled--contrast-medium.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-medium-positive);\n  --ds-button-filled-fg: var(--color-foreground-strong-positive);\n}\n\n.button-filled--contrast-medium.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-medium-guide);\n  --ds-button-filled-fg: var(--color-foreground-strong-guide);\n}\n\n.button-filled--contrast-medium.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-medium-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-strong-walkthrough);\n}\n\n/* faint → bold fg */\n.button-filled--contrast-faint.button-filled--intent-neutral {\n  --ds-button-filled-bg: var(--color-background-faint-neutral);\n  --ds-button-filled-fg: var(--color-foreground-bold-neutral);\n}\n\n.button-filled--contrast-faint.button-filled--intent-brand {\n  --ds-button-filled-bg: var(--color-background-faint-brand);\n  --ds-button-filled-fg: var(--color-foreground-bold-brand);\n}\n\n.button-filled--contrast-faint.button-filled--intent-ai {\n  --ds-button-filled-bg: var(--color-background-faint-ai);\n  --ds-button-filled-fg: var(--color-foreground-bold-ai);\n}\n\n.button-filled--contrast-faint.button-filled--intent-negative {\n  --ds-button-filled-bg: var(--color-background-faint-negative);\n  --ds-button-filled-fg: var(--color-foreground-bold-negative);\n}\n\n.button-filled--contrast-faint.button-filled--intent-warning {\n  --ds-button-filled-bg: var(--color-background-faint-warning);\n  --ds-button-filled-fg: var(--color-foreground-bold-warning);\n}\n\n.button-filled--contrast-faint.button-filled--intent-caution {\n  --ds-button-filled-bg: var(--color-background-faint-caution);\n  --ds-button-filled-fg: var(--color-foreground-bold-caution);\n}\n\n.button-filled--contrast-faint.button-filled--intent-positive {\n  --ds-button-filled-bg: var(--color-background-faint-positive);\n  --ds-button-filled-fg: var(--color-foreground-bold-positive);\n}\n\n.button-filled--contrast-faint.button-filled--intent-guide {\n  --ds-button-filled-bg: var(--color-background-faint-guide);\n  --ds-button-filled-fg: var(--color-foreground-bold-guide);\n}\n\n.button-filled--contrast-faint.button-filled--intent-walkthrough {\n  --ds-button-filled-bg: var(--color-background-faint-walkthrough);\n  --ds-button-filled-fg: var(--color-foreground-bold-walkthrough);\n}\n\n/*\n * Bold, strong, and medium fills already communicate semantic intent. Their\n * on-background foreground tokens preserve AA text contrast across themes,\n * including brand pairs whose chromatic counterparts sit on the 4.5:1 edge.\n */\n.button-filled--contrast-bold.button-filled {\n  --ds-button-filled-fg: var(--color-foreground-on-bold-background-primary);\n}\n\n.button-filled--contrast-strong.button-filled {\n  --ds-button-filled-fg: var(--color-foreground-on-strong-background-primary);\n}\n\n.button-filled--contrast-medium.button-filled {\n  --ds-button-filled-fg: var(--color-foreground-on-medium-background-primary);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport type { ChoiceBackground } from '../../utils/choice-list';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type { ControlInsetDepth } from '../../utils/control-text';\nimport type { ButtonPopup, ButtonSize, ButtonVariant, ButtonWidth } from '../../utils/button-types';\n\nexport type ButtonFilledIntent =\n  | 'neutral'\n  | 'brand'\n  | 'ai'\n  | 'negative'\n  | 'warning'\n  | 'caution'\n  | 'positive'\n  | 'guide'\n  | 'walkthrough';\n\nexport type ButtonFilledContrast = 'bold' | 'strong' | 'medium' | 'faint';\n\nexport type ButtonFilledBackground = ChoiceBackground;\n\nexport type ButtonFilledVariant = ButtonVariant;\nexport type ButtonFilledSize = ButtonSize;\nexport type ButtonFilledWidth = ButtonWidth;\nexport type ButtonFilledPopup = ButtonPopup;\n\n@Component({\n  tag: 'ds-button-filled',\n  styleUrl: 'ButtonFilled.css',\n  scoped: true,\n})\nexport class ButtonFilled {\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: ButtonFilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonFilledSize = 'md';\n\n  /** Use reduced outer geometry when nested inside a control of the same size. */\n  @Prop() isInset: boolean = false;\n\n  /** Single removes 4px overall; double removes 8px overall (xs stays single). */\n  @Prop() insetDepth: ControlInsetDepth = 'single';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonFilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Whether the visible label uses the emphasized weight. */\n  @Prop() labelEmphasis: boolean = true;\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /** Semantic colour intent. */\n  @Prop() intent: ButtonFilledIntent = 'brand';\n\n  /**\n   * Background fill weight. Foreground uses the paired contrast token:\n   * bold → faint, strong → medium, medium → strong, faint → bold.\n   */\n  @Prop() contrast: ButtonFilledContrast = 'bold';\n\n  /** Show a 1px secondary inset border. */\n  @Prop() hasBorder: boolean = false;\n\n  /**\n   * Actual parent surface context for the optional inset border color only.\n   * Omit on primary and secondary surfaces.\n   */\n  @Prop() background: ButtonFilledBackground | undefined;\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  /** 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  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  /** ID of the popup this button controls. */\n  @Prop() controls: string | undefined;\n\n  /**\n   * Controlled disclosure state forwarded to aria-expanded.\n   * Using expanded alone for surface-open styling is deprecated; set surfaceOpen\n   * explicitly to separate the rendered surface lifecycle from disclosure state.\n   */\n  @Prop() expanded: boolean | undefined;\n\n  /**\n   * The associated menu, picker, or panel is visible, including its exit motion.\n   * Holds only the pressed wash; does not set ARIA, selection, or press scaling.\n   * In split mode this applies only to the menu segment. Explicit false disables\n   * the legacy expanded-derived wash; omission preserves that compatibility path.\n   */\n  @Prop() surfaceOpen: boolean | undefined;\n\n  /** Popup type exposed to assistive technology. */\n  @Prop() haspopup: ButtonFilledPopup | undefined;\n\n  /**\n   * Append a separate ChevronDown menu segment while preserving this button's\n   * variant, size, intent, contrast, loading, inactive, and width treatment.\n   */\n  @Prop() split: boolean = false;\n\n  /** Accessible name for the appended menu segment in split mode. */\n  @Prop() menuAriaLabel: string = 'More options';\n\n  /**\n   * This action *has* a menu: implies `aria-haspopup=\"menu\"` and adds the trailing\n   * chevron that carries the affordance.\n   *\n   * Only `label` and `icon-label` are supported. A filled button is never the\n   * overflow / more-options control — that role belongs to ButtonUnfilled with an\n   * `Ellipses` glyph, which conveys the menu without a chevron.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsMenuClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n  private menuButtonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus(segment: 'primary' | 'menu' = 'primary') {\n    (segment === 'menu' ? this.menuButtonEl : 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  };\n\n  private handleMenuClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsMenuClick.emit(event);\n  };\n\n  private get resolvedHaspopup(): ButtonFilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  private get resolvedSurfaceOpen(): boolean {\n    return (this.surfaceOpen ?? this.expanded === true) && !this.isInactive;\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  private get doubleInset(): boolean {\n    return this.isInset && this.insetDepth === 'double' && this.size !== 'xs';\n  }\n\n  private buttonClass(\n    variant: ButtonFilledVariant,\n    expanded: boolean,\n    bordered: boolean\n  ): Record<string, boolean> {\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale && !this.split,\n      'ds-interaction-fill': !this.isInactive,\n      /* Bold is the default filled contrast — on-bold interaction tokens. */\n      'ds-interaction-fill--on-bold': this.contrast === 'bold',\n      'ds-interaction-fill--on-strong': this.contrast === 'strong',\n      'ds-interaction-fill--on-medium': this.contrast === 'medium',\n      /* faint → default app interaction tokens (no --on-*). */\n      'button-filled--bordered': bordered,\n      'ds-button--bordered': bordered,\n      'button-filled--expanded': expanded && !this.isInactive,\n      'ds-interaction-fill--surface-open': expanded,\n      'ds-button--expanded': expanded && !this.isInactive,\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--inset': this.isInset && !this.doubleInset,\n      'ds-control--inset-double': this.doubleInset,\n      'ds-control-frame': true,\n      'button-filled--icon': variant === 'icon',\n      'ds-button--icon': variant === 'icon',\n      'button-filled--label': variant === 'label',\n      'button-filled--icon-label': variant === 'icon-label',\n      'button-filled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      [`button-filled--background-${this.background}`]: this.background !== undefined,\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: true,\n    };\n    return cls;\n  }\n\n  render() {\n    const primaryButton = (\n      <button\n        ref={el => {\n          this.buttonEl = el ?? null;\n        }}\n        type={this.type}\n        class={{\n          ...this.buttonClass(\n            this.variant,\n            !this.split && this.resolvedSurfaceOpen,\n            this.hasBorder && !this.split\n          ),\n          'ds-button-split__primary': this.split,\n        }}\n        disabled={this.isInactive}\n        aria-label={this.accessibleName}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        aria-disabled={this.isLoading ? 'true' : undefined}\n        aria-controls={this.split ? undefined : this.controls}\n        aria-expanded={\n          this.split || this.expanded === undefined ? undefined : String(this.expanded)\n        }\n        aria-haspopup={this.split ? undefined : this.resolvedHaspopup}\n        onPointerDown={event =>\n          beginElevatedControlPress(\n            event,\n            this.pressScale && !this.split && !this.isInactive && !this.isLoading\n          )\n        }\n        onClick={this.handleClick}\n      >\n        {renderButtonContent({\n          namespace: 'button-filled',\n          variant: this.variant,\n          size: this.size,\n          label: this.label,\n          labelEmphasis: this.labelEmphasis,\n          icon: this.icon,\n          hasMenu: !this.split && this.hasMenu,\n          isLoading: this.isLoading,\n        })}\n      </button>\n    );\n\n    const control = this.split ? (\n      <div\n        class={{\n          'ds-button-split': true,\n          'ds-button-split--rounded': this.rounded,\n        }}\n      >\n        {primaryButton}\n        <span class=\"ds-button-split__divider\" aria-hidden=\"true\" />\n        <button\n          ref={el => {\n            this.menuButtonEl = el ?? null;\n          }}\n          class={{\n            ...this.buttonClass('icon', this.resolvedSurfaceOpen, false),\n            'ds-button-split__menu': true,\n          }}\n          type=\"button\"\n          disabled={this.isInactive || this.isLoading}\n          aria-label={this.menuAriaLabel}\n          aria-controls={this.controls}\n          aria-expanded={String(this.expanded === true)}\n          aria-haspopup=\"menu\"\n          onClick={this.handleMenuClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-filled',\n            variant: 'icon',\n            size: this.size,\n            label: '',\n            labelEmphasis: true,\n            icon: 'ChevronDown',\n            hasMenu: false,\n            isLoading: false,\n          })}\n        </button>\n        {this.hasBorder ? <span class=\"ds-button-split__outline\" aria-hidden=\"true\" /> : null}\n      </div>\n    ) : (\n      primaryButton\n    );\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon' && !this.split,\n          'ds-button-host--icon': this.variant === 'icon' && !this.split,\n          'ds-button-split-host': this.split,\n          'ds-button-split-host--primary-icon': this.split && this.variant === 'icon',\n          [`button-filled-host--contrast-${this.contrast}`]: this.split,\n          [`button-filled-host--background-${this.background}`]:\n            this.split && this.background !== undefined,\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--inset': this.isInset && !this.doubleInset,\n          'ds-control--inset-double': this.doubleInset,\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        {control}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DR1jV6Q5.js

@@ -1,2 +0,0 @@
-import{p as o,H as r,c as t,h as s,a as i,t as n}from"./index.js";import{g as e,i as a}from"./p-BQq26pt9.js";import{d}from"./p-DQpw21HO.js";import{d as c}from"./p-Cea7rROU.js";import{d as l}from"./p-B9oadFSC.js";import{C as u}from"./p-CuwopElg.js";import{c as b}from"./p-DuFm-ieS.js";const g=()=>`.ds-control--lg.sc-ds-tab-group,.ds-control--lg.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group,.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group,.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tab-group-h,.ds-control--lg.sc-ds-tab-group{--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-tab-group-h,.ds-control--md.sc-ds-tab-group{--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-tab-group-h,.ds-control--sm.sc-ds-tab-group{--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-tab-group-h,.ds-control--xs.sc-ds-tab-group{--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--lg.ds-control--inset.sc-ds-tab-group-h,.ds-control--lg.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-025))}.ds-control--md.ds-control--inset.sc-ds-tab-group-h,.ds-control--md.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-025))}.ds-control--sm.ds-control--inset.sc-ds-tab-group-h,.ds-control--sm.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-025))}.ds-control--xs.ds-control--inset.sc-ds-tab-group-h,.ds-control--xs.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(var(--dimension-space-025) - var(--dimension-space-025))}.ds-control--lg.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--lg.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-100) - var(--dimension-space-050))}.ds-control--md.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--md.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-075) - var(--dimension-space-050))}.ds-control--sm.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--sm.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(var(--dimension-space-050) - var(--dimension-space-050))}.ds-control-width--hug.sc-ds-tab-group-h,.ds-control-width--hug.sc-ds-tab-group{width:fit-content;max-width:100%;flex:0 0 auto}.ds-control-width--fill.sc-ds-tab-group-h,.ds-control-width--fill.sc-ds-tab-group{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-tab-group-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-tab-group-h,.ds-focus-ring.sc-ds-tab-group,.ds-focus-ring-inset.sc-ds-tab-group-h,.ds-focus-ring-inset.sc-ds-tab-group{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tab-group-h:focus-visible,.ds-focus-ring.sc-ds-tab-group: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-tab-group-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group{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-tab-group-h:focus-visible,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tab-group: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-tab-group-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-tab-group-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tab-group-h::after,.ds-interaction-fill--grouped.sc-ds-tab-group::after,.ds-interaction-fill--grouped.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-tab-group-h,.ds-interaction-fill--grouped.sc-ds-tab-group{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tab-group-h,.ds-interaction-fill--on-faint.sc-ds-tab-group{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-translucent.sc-ds-tab-group{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-tab-group-h,.ds-interaction-fill--on-inverted.sc-ds-tab-group{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-tab-group-h,.ds-interaction-fill--on-media.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--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-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--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-interaction-fill.ds-interaction-fill--surface-open.sc-ds-tab-group-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-tab-group:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-tab-group-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-tab-group:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tab-group-h{display:block;--_tab-group-surface-border:var(--color-border-tertiary);--_tab-group-divider:var(--color-border-secondary)}.tab-group-host--on-faint.sc-ds-tab-group-h{--_tab-group-selected-fill:var(--color-interaction-active)}.tab-group-host--on-medium.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-medium-background-tertiary);--_tab-group-divider:var(--color-border-on-medium-background-secondary);--_tab-group-selected-fill:var(--color-interaction-on-medium-background-active)}.tab-group-host--on-bold.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-bold-background-tertiary);--_tab-group-divider:var(--color-border-on-bold-background-secondary);--_tab-group-selected-fill:var(--color-interaction-on-bold-background-active)}.tab-group-host--on-strong.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-strong-background-tertiary);--_tab-group-divider:var(--color-border-on-strong-background-secondary);--_tab-group-selected-fill:var(--color-interaction-on-strong-background-active)}.tab-group-host--on-translucent.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-translucent-border-tertiary);--_tab-group-divider:var(--color-translucent-border-secondary);--_tab-group-selected-fill:var(--color-translucent-interaction-active)}.tab-group-host--on-inverted.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-inverted-border-tertiary);--_tab-group-divider:var(--color-inverted-border-secondary);--_tab-group-selected-fill:var(--color-inverted-interaction-active)}.tab-group-host--on-media.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-media-border-tertiary);--_tab-group-divider:var(--color-media-border-secondary);--_tab-group-selected-fill:var(--color-media-interaction-active)}.tab-group-host--on-always-dark.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-always-dark-border-tertiary);--_tab-group-divider:var(--color-always-dark-border-secondary);--_tab-group-selected-fill:var(--color-always-dark-interaction-active)}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--ds-control-gap);position:relative;width:max-content;max-width:100%;height:var(--ds-control-height);padding:calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);border-radius:var(--dimension-radius-half);box-sizing:border-box}.ds-control-width--fill.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{width:100%}.tab-group-host--surface.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{background-color:transparent}.tab-group-host--containerless.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{padding:0;border:0;background-color:transparent}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);padding:0 var(--ds-control-padding-inline);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:default;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--ds-control-height);min-width:var(--ds-control-height);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand)}.ds-control-width--fill.sc-ds-tab-group-h .tab.sc-ds-tab-group{flex:1 1 0;min-width:0;overflow:hidden}.ds-control-width--fill.sc-ds-tab-group-h .tab__content.sc-ds-tab-group{max-width:100%;overflow:hidden}.ds-control-width--fill.sc-ds-tab-group-h .tab__label.sc-ds-tab-group{overflow:hidden;text-overflow:ellipsis}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--_tab-group-surface-border)}.tab-group-host--surface.sc-ds-tab-group-h .tab--selected.sc-ds-tab-group{background-color:var(--_tab-group-selected-fill)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab__content.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);min-width:0}.tab__content--dot.sc-ds-tab-group{padding-right:var(--dimension-space-050)}.tab__label.sc-ds-tab-group{padding:0 var(--ds-control-label-inset);white-space:nowrap}.tab__icon.sc-ds-tab-group{flex-shrink:0}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-secondary)}.on-medium.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-primary)}.on-bold.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-primary)}.on-translucent.sc-ds-tab-group{color:var(--color-translucent-foreground-secondary)}.on-translucent.tab--selected.sc-ds-tab-group{color:var(--color-translucent-foreground-primary)}.on-inverted.sc-ds-tab-group{color:var(--color-inverted-foreground-secondary)}.on-inverted.tab--selected.sc-ds-tab-group{color:var(--color-inverted-foreground-primary)}.on-media.sc-ds-tab-group{color:var(--color-media-foreground-secondary)}.on-media.tab--selected.sc-ds-tab-group{color:var(--color-media-foreground-primary)}.on-always-dark.sc-ds-tab-group{color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--_tab-group-divider)}`;const p=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange",7);this.value="";this.tabs=[];this.size="md";this.width="hug";this.hasContainer=true;this.ariaLabel=null}get selectableTabs(){return e(this.tabs)}get focusableTabId(){return this.selectableTabs.some((o=>o.id===this.value&&!o.isInactive))?this.value:this.selectableTabs.find((o=>!o.isInactive))?.id??""}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.selectableTabs.some((r=>r.id===o&&!r.isInactive))?o:this.focusableTabId;const i=this.el.querySelector(`[data-tab-id="${s}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let i=0;i<s;i++){const n=(o+r*(i+1)+s*(i+1))%s;if(!t[n]?.isInactive)return n}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=o.target?.closest("[data-tab-id]")?.dataset["tabId"];const s=r.findIndex((o=>o.id===(t??this.focusableTabId)));let i=null;if(o.key==="ArrowRight"){i=this.findEnabled(s,1)}else if(o.key==="ArrowLeft"){i=this.findEnabled(s,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));i=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));i=o===-1?null:r.length-1-o}if(i!==null){o.preventDefault();const t=r[i];this.selectTab(t.id)}}getBgClass(){if(!this.background)return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.focusableTabId;return s(i,{key:"5f402eb27542fd12d38e99deff28626e52fc8cd0",class:{"tab-group-host":true,[`tab-group-host--${this.size}`]:true,[`ds-control--${this.size}`]:true,"tab-group-host--containerless":!this.hasContainer,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o,...b(this.width)}},s("div",{key:"cb00b4281b07d917c52522089b84d62836544738",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,i)=>{if(a(t)){return s("div",{key:`divider-${i}`,class:"tab-divider","aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=t.id===this.value;const e=t.variant??"label";const d=e==="icon"||e==="icon-label";const c=e==="label"||e==="icon-label";const l=n&&!o;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,[`ds-control--${this.size}`]:true,"ds-control--inset":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-faint":o==="on-faint","ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-translucent":o==="on-translucent","ds-interaction-fill--on-inverted":o==="on-inverted","ds-interaction-fill--on-media":o==="on-media","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-label":e==="icon"?t.label:undefined,"aria-selected":String(n),"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:t.id===r?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},s("span",{class:{tab__content:true,[`tab__content--${e}`]:true,"tab__content--dot":!!t.dot}},d&&s("ds-icon",{class:"tab__icon",name:t.icon,size:this.size,color:"inherit"}),c&&s("ds-text",{class:"tab__label",as:"span",variant:u[this.size],emphasis:l,color:"inherit"},t.label),t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return g()}},[2,"ds-tab-group",{value:[1025],tabs:[16],size:[1],width:[1],hasContainer:[4,"has-container"],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(n(o))){customElements.define(n(o),p)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break;case"ds-icon":if(!customElements.get(n(o))){c()}break;case"ds-text":if(!customElements.get(n(o))){l()}break}}))}v();export{p as T,v as d};
-//# sourceMappingURL=p-DR1jV6Q5.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","size","width","hasContainer","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","controlWidthClass","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","String","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","color","as","CONTROL_TEXT_VARIANT","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.css';\n@import '../../utils/control-width.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-faint) {\n  --_tab-group-selected-fill: var(--color-interaction-active);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-medium-background-active);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-bold-background-active);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n  --_tab-group-selected-fill: var(--color-interaction-on-strong-background-active);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n  --_tab-group-selected-fill: var(--color-translucent-interaction-active);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n  --_tab-group-selected-fill: var(--color-inverted-interaction-active);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n  --_tab-group-selected-fill: var(--color-media-interaction-active);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n  --_tab-group-selected-fill: var(--color-always-dark-interaction-active);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.ds-control-width--fill) .tab-list {\n  width: 100%;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n:host(.tab-group-host--containerless) .tab-list {\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n:host(.ds-control-width--fill) .tab {\n  flex: 1 1 0;\n  min-width: 0;\n  overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__content {\n  max-width: 100%;\n  overflow: hidden;\n}\n\n:host(.ds-control-width--fill) .tab__label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--_tab-group-selected-fill);\n}\n\n.tab--selected: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) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected {\n  color: var(--color-foreground-on-medium-background-primary);\n}\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected {\n  color: var(--color-foreground-on-bold-background-primary);\n}\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected {\n  color: var(--color-foreground-on-strong-background-primary);\n}\n\n.on-translucent {\n  color: var(--color-translucent-foreground-secondary);\n}\n\n.on-translucent.tab--selected {\n  color: var(--color-translucent-foreground-primary);\n}\n\n.on-inverted {\n  color: var(--color-inverted-foreground-secondary);\n}\n\n.on-inverted.tab--selected {\n  color: var(--color-inverted-foreground-primary);\n}\n\n.on-media {\n  color: var(--color-media-foreground-secondary);\n}\n\n.on-media.tab--selected {\n  color: var(--color-media-foreground-primary);\n}\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected {\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Listen,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\nexport type TabGroupWidth = ControlWidth;\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabGroupItem[] = [];\n  /** Control density: 24px small, 32px medium, or 40px large track. */\n  @Prop() size: TabGroupSize = 'md';\n  /** Width fit — hug content (default) or fill the parent with equal-width segments. */\n  @Prop() width: TabGroupWidth = 'hug';\n  /** Show the segmented control's outer background, border, and inset. */\n  @Prop() hasContainer: boolean = true;\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private get focusableTabId(): string {\n    return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n      ? this.value\n      : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n        ? next\n        : this.focusableTabId;\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset[\n      'tabId'\n    ];\n    const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n    let nextIdx: number | null = null;\n\n    if (e.key === 'ArrowRight') {\n      nextIdx = this.findEnabled(currentIdx, 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = this.findEnabled(currentIdx, -1);\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background) return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const focusableTabId = this.focusableTabId;\n\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          [`tab-group-host--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'tab-group-host--containerless': !this.hasContainer,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n          ...controlWidthClass(this.width),\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div key={`divider-${index}`} class=\"tab-divider\" aria-hidden=\"true\">\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [`ds-control--${this.size}`]: true,\n                  'ds-control--inset': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={String(isSelected)}\n                aria-disabled={tab.isInactive ? 'true' : undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={tab.id === focusableTabId ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span\n                  class={{\n                    tab__content: true,\n                    [`tab__content--${variant}`]: true,\n                    'tab__content--dot': !!tab.dot,\n                  }}\n                >\n                  {showIcon && (\n                    <ds-icon class=\"tab__icon\" name={tab.icon} size={this.size} color=\"inherit\" />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant={CONTROL_TEXT_VARIANT[this.size]}\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-DuJuqbcg.js

@@ -1,2 +0,0 @@
-import{p as s,H as o,c as e,h as d,a,t as i}from"./index.js";import{d as t}from"./p-DQpw21HO.js";import{d as r}from"./p-CG4Fp3SY.js";import{d as n}from"./p-Cea7rROU.js";import{d as c}from"./p-0XTyQNRG.js";import{d as l}from"./p-B9oadFSC.js";import{d as m}from"./p-JuKGR7Ay.js";import{a as h,T as p}from"./p-CUL5_8JM.js";const f=()=>`.ds-control--lg.sc-ds-modal,.ds-control--lg.sc-ds-modal-h,.ds-control--md.sc-ds-modal-h,.ds-control--md.sc-ds-modal,.ds-control--sm.sc-ds-modal-h,.ds-control--sm.sc-ds-modal,.ds-control--xs.sc-ds-modal-h,.ds-control--xs.sc-ds-modal{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-modal-h,.ds-control--lg.sc-ds-modal{--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-modal-h,.ds-control--md.sc-ds-modal{--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-modal-h,.ds-control--sm.sc-ds-modal{--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-modal-h,.ds-control--xs.sc-ds-modal{--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-chrome-header.sc-ds-modal{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-modal{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-modal{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-modal,.ds-chrome-header__trailing.sc-ds-modal{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-modal{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-modal{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-modal{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-modal{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-modal,.ds-chrome-header__description.sc-ds-modal{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-modal{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-modal .ds-chrome-header__description.sc-ds-modal{flex:1 1 var(--dimension-card-width-xs)}.ds-chrome-space--sm.sc-ds-modal-h,.ds-chrome-space--sm.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-modal-h,.ds-chrome-space--md.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-modal-h,.ds-chrome-space--lg.sc-ds-modal{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal,.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal,.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-modal-h,.ds-chrome-row.sc-ds-modal{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-modal-h,.ds-chrome-column.sc-ds-modal{flex-direction:column}.ds-chrome-grid.sc-ds-modal-h,.ds-chrome-grid.sc-ds-modal{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-modal:root,.sc-ds-modal-h,.ds-forced-colors-scope.sc-ds-modal{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog[open].sc-ds-modal{display:flex}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-2) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{align-items:flex-start;flex:0 0 auto;color:var(--color-foreground-primary)}.modal-copy.sc-ds-modal,ds-text.modal-heading.sc-ds-modal,ds-text.modal-description.sc-ds-modal{width:auto;text-align:left}ds-text.modal-heading.sc-ds-modal{-webkit-user-select:none;user-select:none}.modal-close-tooltip.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{justify-content:flex-start;height:var(--dimension-size-800);flex:0 0 auto;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer__actions.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer__actions.sc-ds-modal slot.sc-ds-modal{display:contents}@media (forced-colors: active){.modal-dialog.sc-ds-modal{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const g={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const b=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let u=0;const v=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsClose=e(this,"dsClose",7);this.dsAfterClose=e(this,"dsAfterClose",7);this.open=false;this.description="";this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++u}`;this.descriptionId=`${this.titleId}-description`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}componentDidRender(){if(!this.closing||!this.dialogEl?.open||this.closeTimer)return;const s=this.closeAnimationMs;if(s<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),s)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(s){if(s){this.clearCloseTimer();const s=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||s)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true}}focusClose(){const s=this.el.querySelector("ds-button-unfilled.modal-close");void s?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(s,o){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:s,originalEvent:o});this.open=false}updateFooterPresence(s){const o=s?.assignedNodes()??[];this.hasFooter=o.some((s=>s.nodeType!==Node.TEXT_NODE||!!s.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(s){s.preventDefault();this.requestClose("escape",s)}handleBackdropPointerDown(s){if(s.target===this.dialogEl)this.requestClose("backdrop",s)}handleKeyDown(s){if(s.key==="Escape"){s.preventDefault();this.requestClose("escape",s);return}if(s.key!=="Tab"||!this.dialogEl)return;const o=Array.from(this.dialogEl.querySelectorAll(b)).filter((s=>!s.hasAttribute("disabled")&&s.getAttribute("aria-hidden")!=="true"));if(!o.length){s.preventDefault();this.dialogEl.focus();return}const e=o[0];const d=o[o.length-1];const a=document.activeElement;if(s.shiftKey&&(a===e||a===this.dialogEl)){s.preventDefault();d.focus()}else if(!s.shiftKey&&a===d){s.preventDefault();e.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return g[this.modalWidth]}return this.modalWidth}get describedBy(){const s=[this.description?this.descriptionId:"",this.ariaDescribedby??""].filter(Boolean);return s.length>0?s.join(" "):undefined}get closeAnimationMs(){return h(p.motionShort2,p.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return d(a,{key:"ba28d6368acd5ea9e14ee4b63868c2cddd90aa52"},d("dialog",{key:"13ca0e3fde5a3ba797ea12ab7db28c96240ec4a8",ref:s=>{this.dialogEl=s??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.describedBy,onCancel:s=>this.handleCancel(s),onPointerDown:s=>this.handleBackdropPointerDown(s),onKeyDown:s=>this.handleKeyDown(s),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},d("div",{key:"a93231cc9bae3a3260499a9fd93b13fd5d553345",class:"modal-header ds-chrome-header ds-chrome-header--bounded"},d("div",{key:"c9ef1e928019514347a9069dd579709f3de6fcae",class:"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md"},d("ds-text",{key:"b7160087be9de28f95eff191a809521ffcbb12c4",class:"modal-heading ds-chrome-header__heading",as:"h2",variant:"text-title-small",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),this.description?d("ds-text",{class:"modal-description ds-chrome-header__description",as:"p",variant:"text-body-medium",color:"secondary",wrap:"wrap",textId:this.descriptionId},this.description):null),d("ds-tooltip",{key:"7eb379139114d18046ae30567e611be077b53966",class:"modal-close-tooltip ds-chrome-header__trailing",label:this.closeAriaLabel,side:"bottom",size:"sm"},d("ds-button-unfilled",{key:"ce2fb50ff9b2555d3795544a34b894f70a24ead1",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:s=>this.requestClose("close-button",s.detail)}))),d("div",{key:"4c36c8ef7b16838b83a57048d7a1f41b691fd485",class:"modal-content"},d("slot",{key:"9aa663efc1c792c6313ea610b767461a803dc5d8"})),d("div",{key:"4f96bf0e9ec463e122154be5d6254d79abb30d14",class:{"modal-footer":true,"ds-chrome-row":true,"ds-chrome-space--lg":true,"modal-footer--empty":!this.hasFooter}},d("div",{key:"830c722f8e9a6979534baa407ebeb6c519660209",class:"modal-footer__actions"},d("slot",{key:"51ffdf44b5d8f21e61b83769415d447b42b9031a",name:"footer",onSlotchange:s=>this.updateFooterPresence(s.currentTarget)})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return f()}},[262,"ds-modal",{open:[1028],heading:[1],description:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const s=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-modal":if(!customElements.get(i(s))){customElements.define(i(s),v)}break;case"ds-badge":if(!customElements.get(i(s))){t()}break;case"ds-button-unfilled":if(!customElements.get(i(s))){r()}break;case"ds-icon":if(!customElements.get(i(s))){n()}break;case"ds-loader":if(!customElements.get(i(s))){c()}break;case"ds-text":if(!customElements.get(i(s))){l()}break;case"ds-tooltip":if(!customElements.get(i(s))){m()}break}}))}y();export{v as M,y as d};
-//# sourceMappingURL=p-DuJuqbcg.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","description","closeAriaLabel","modalWidth","closing","hasFooter","titleId","descriptionId","dialogEl","previousFocus","closeTimer","componentDidLoad","updateFooterPresence","onOpenChange","componentDidRender","closeAnimationMs","finishClose","setTimeout","disconnectedCallback","clearCloseTimer","close","isOpen","alreadyOpen","document","activeElement","showModal","requestAnimationFrame","focusClose","el","querySelector","setFocus","clearTimeout","requestClose","reason","originalEvent","dsClose","emit","slot","assignedNodes","some","node","nodeType","Node","TEXT_NODE","textContent","trim","handleCancel","event","preventDefault","handleBackdropPointerDown","target","handleKeyDown","key","focusables","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","length","focus","first","last","active","shiftKey","resolvedWidth","describedBy","ids","ariaDescribedby","Boolean","undefined","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort2","animationDurationShort3","dsAfterClose","render","h","Host","ref","class","onCancel","onPointerDown","onKeyDown","style","width","as","variant","emphasis","color","lineTruncation","textId","heading","wrap","label","side","size","icon","activeFill","hasBorder","onDsClick","detail","name","onSlotchange","currentTarget"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":["@import '../../utils/chrome-header.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog[open] {\n  display: flex;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes modalBackdropOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes modalDialogIn {\n  from {\n    opacity: 0;\n    transform: scale(0.97) translateY(4px);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n}\n\n@keyframes modalDialogOut {\n  from {\n    opacity: 1;\n    transform: scale(1) translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.97) translateY(4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  align-items: flex-start;\n  flex: 0 0 auto;\n  color: var(--color-foreground-primary);\n}\n\n.modal-copy,\nds-text.modal-heading,\nds-text.modal-description {\n  width: auto;\n  text-align: left;\n}\n\nds-text.modal-heading {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close-tooltip {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  justify-content: flex-start;\n  height: var(--dimension-size-800);\n  flex: 0 0 auto;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer__actions slot {\n  display: contents;\n}\n\n@media (forced-colors: active) {\n  .modal-dialog {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n  Host,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n  reason: ModalCloseReason;\n  originalEvent: Event;\n}\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  /** Optional supporting copy shown below the heading. */\n  @Prop() description: string = '';\n  @Prop() closeAriaLabel: string = 'Close';\n  @Prop() modalWidth: ModalWidth | string = 'md';\n  /** Optional id reference for explanatory content in the default slot. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @State() private closing: boolean = false;\n  @State() private hasFooter: boolean = false;\n\n  /** Emitted when an internal dismissal control requests that the modal close. */\n  @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n  /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private titleId = `ds-modal-title-${++modalIdCounter}`;\n  private descriptionId = `${this.titleId}-description`;\n  private dialogEl: HTMLDialogElement | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.updateFooterPresence();\n    if (this.open) this.onOpenChange(true);\n  }\n\n  componentDidRender() {\n    if (!this.closing || !this.dialogEl?.open || this.closeTimer) return;\n    const closeAnimationMs = this.closeAnimationMs;\n    if (closeAnimationMs <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.closeTimer = setTimeout(() => {\n      this.closeTimer = null;\n      this.finishClose();\n    }, closeAnimationMs);\n  }\n\n  disconnectedCallback() {\n    this.clearCloseTimer();\n    if (this.dialogEl?.open) this.dialogEl.close();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.clearCloseTimer();\n      const alreadyOpen = !!this.dialogEl?.open;\n      this.closing = false;\n      if (!this.dialogEl || alreadyOpen) return;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      this.dialogEl.showModal();\n      requestAnimationFrame(() => {\n        if (this.open && this.dialogEl?.open) this.focusClose();\n      });\n    } else if (this.dialogEl?.open) {\n      this.closing = true;\n    }\n  }\n\n  private focusClose() {\n    const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    void close?.setFocus?.();\n  }\n\n  private clearCloseTimer() {\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n    if (!this.open || this.closing || !this.dialogEl?.open) return;\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private updateFooterPresence(slot?: HTMLSlotElement) {\n    const assignedNodes = slot?.assignedNodes() ?? [];\n    this.hasFooter =\n      assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n      this.el.querySelector('[slot=\"footer\"]') !== null;\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n    this.requestClose('escape', event);\n  }\n\n  private handleBackdropPointerDown(event: PointerEvent) {\n    if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      event.preventDefault();\n      this.requestClose('escape', event);\n      return;\n    }\n    if (event.key !== 'Tab' || !this.dialogEl) return;\n    const focusables = Array.from(\n      this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n    ).filter(\n      element => !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n    );\n    if (!focusables.length) {\n      event.preventDefault();\n      this.dialogEl.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (event.shiftKey && (active === first || active === this.dialogEl)) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get describedBy(): string | undefined {\n    const ids = [this.description ? this.descriptionId : '', this.ariaDescribedby ?? ''].filter(\n      Boolean\n    );\n    return ids.length > 0 ? ids.join(' ') : undefined;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    if (!this.dialogEl?.open) return;\n    this.dialogEl.close();\n    this.closing = false;\n    this.clearCloseTimer();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.dsAfterClose.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          ref={(element?: HTMLDialogElement) => {\n            this.dialogEl = element ?? null;\n          }}\n          class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n          aria-labelledby={this.titleId}\n          aria-describedby={this.describedBy}\n          onCancel={(event: Event) => this.handleCancel(event)}\n          onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          style={{\n            width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n          }}\n        >\n          <div class=\"modal-header ds-chrome-header ds-chrome-header--bounded\">\n            <div class=\"modal-copy ds-chrome-header__copy ds-chrome-header__copy--stacked ds-control--md\">\n              <ds-text\n                class=\"modal-heading ds-chrome-header__heading\"\n                as=\"h2\"\n                variant=\"text-title-small\"\n                emphasis\n                color=\"primary\"\n                lineTruncation={1}\n                textId={this.titleId}\n              >\n                {this.heading}\n              </ds-text>\n              {this.description ? (\n                <ds-text\n                  class=\"modal-description ds-chrome-header__description\"\n                  as=\"p\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  wrap=\"wrap\"\n                  textId={this.descriptionId}\n                >\n                  {this.description}\n                </ds-text>\n              ) : null}\n            </div>\n            <ds-tooltip\n              class=\"modal-close-tooltip ds-chrome-header__trailing\"\n              label={this.closeAriaLabel}\n              side=\"bottom\"\n              size=\"sm\"\n            >\n              <ds-button-unfilled\n                class=\"modal-close\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                size=\"md\"\n                aria-label={this.closeAriaLabel}\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.requestClose('close-button', event.detail)\n                }\n              />\n            </ds-tooltip>\n          </div>\n          <div class=\"modal-content\">\n            <slot />\n          </div>\n          <div\n            class={{\n              'modal-footer': true,\n              'ds-chrome-row': true,\n              'ds-chrome-space--lg': true,\n              'modal-footer--empty': !this.hasFooter,\n            }}\n          >\n            <div class=\"modal-footer__actions\">\n              <slot\n                name=\"footer\"\n                onSlotchange={(event: Event) =>\n                  this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n                }\n              />\n            </div>\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}