@ds-mo/ui 6.0.1 → 8.0.0

package/dist/components/{p-DhgDNluD.js.map → p-B8ERbwc9.js.map}

@@ -1 +1 @@
-{"version":3,"names":["switchCss","generatedLabelId","Switch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","value","disabled","readOnly","required","requiredMessage","isInactive","size","presentation","initialChecked","formDisabled","handleClick","dsChange","emit","handleKeyDown","event","key","preventDefault","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","inactive","submissionValue","uncheckedValue","state","internals","setFormValue","missing","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","el","hasAttribute","labelIds","Array","from","labels","map","label","id","length","setAttribute","join","render","h","Host","role","undefined","String","tabIndex","class","switch","onClick","onKeyDown"],"sources":["src/wc/components/Switch/Switch.css?tag=ds-switch&encapsulation=shadow","src/wc/components/Switch/Switch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-size-200);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-thumb-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-border-color: var(--color-border-tertiary);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  --ds-interaction-border-color: var(--color-border-secondary);\n\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  background-color: var(--color-background-medium-neutral);\n  transition: background-color var(--effect-motion-short-3);\n}\n\n:host(.switch.ds-interaction-fill) {\n  /* The host owns the hit target; interaction washes paint on the thumb. */\n  --ds-interaction-hover: transparent;\n  --ds-interaction-pressed: transparent;\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-150);\n  --ds-switch-height: var(--dimension-size-100);\n  --ds-switch-thumb-size: var(--dimension-size-075);\n  --ds-switch-gap: var(--dimension-space-012);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  --ds-interaction-hover: transparent;\n  --ds-interaction-pressed: transparent;\n}\n\n:host(.switch--readonly) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-background-primary);\n  /* Outset stroke: does not consume the thumb's declared diameter. */\n  box-shadow:\n    0 0 0 var(--ds-switch-thumb-stroke)\n    var(--ds-switch-thumb-border-color);\n  transform: translateY(-50%);\n  transition: transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n:host(:dir(rtl)) .thumb {\n  right: var(--ds-switch-inset);\n  left: auto;\n}\n\n:host(:dir(rtl).checked) .thumb {\n  transform: translate3d(calc(-1 * var(--ds-switch-travel)), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n","import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type SwitchSize = 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, 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  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--bordered': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"thumb ds-interaction-fill__content\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["switchCss","generatedLabelId","Switch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","checked","value","disabled","readOnly","required","requiredMessage","isInactive","size","presentation","initialChecked","formDisabled","handleClick","dsChange","emit","handleKeyDown","event","key","preventDefault","componentWillLoad","syncFormValue","componentDidLoad","syncNativeLabels","inactive","submissionValue","uncheckedValue","state","internals","setFormValue","missing","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","el","hasAttribute","labelIds","Array","from","labels","map","label","id","length","setAttribute","join","render","h","Host","role","undefined","String","tabIndex","class","switch","onClick","onKeyDown"],"sources":["src/wc/components/Switch/Switch.css?tag=ds-switch&encapsulation=shadow","src/wc/components/Switch/Switch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  --ds-switch-width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  --ds-switch-height: var(--dimension-size-300);\n  --ds-switch-thumb-size: var(--dimension-size-200);\n  --ds-switch-gap: var(--dimension-space-050);\n  --ds-switch-thumb-stroke: var(--dimension-stroke-width-012);\n  --ds-switch-inset: var(--ds-switch-gap);\n  --ds-switch-thumb-border-color: var(--color-border-tertiary);\n  --ds-switch-thumb-hover: var(--color-interaction-hover);\n  --ds-switch-thumb-pressed: var(--color-interaction-pressed);\n  --ds-switch-travel: calc(\n    var(--ds-switch-width) - var(--ds-switch-thumb-size) - var(--ds-switch-inset) -\n      var(--ds-switch-inset)\n  );\n  --ds-interaction-border-color: var(--color-border-secondary);\n\n  position: relative;\n  display: inline-flex;\n  width: var(--ds-switch-width);\n  height: var(--ds-switch-height);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  overflow: visible;\n  cursor: pointer;\n  user-select: none;\n  outline: none;\n  background-color: var(--color-background-medium-neutral);\n  transition: background-color var(--effect-motion-short-3);\n}\n\n:host(.switch.ds-interaction-fill) {\n  /* The host owns the hit target; interaction washes paint on the thumb. */\n  --ds-interaction-hover: transparent;\n  --ds-interaction-pressed: transparent;\n}\n\n:host(.switch--sm) {\n  --ds-switch-width: var(--dimension-size-300);\n  --ds-switch-height: var(--dimension-size-200);\n  --ds-switch-thumb-size: var(--dimension-size-150);\n  --ds-switch-gap: var(--dimension-space-025);\n}\n\n:host(.switch--xs) {\n  --ds-switch-width: var(--dimension-size-150);\n  --ds-switch-height: var(--dimension-size-100);\n  --ds-switch-thumb-size: var(--dimension-size-075);\n  --ds-switch-gap: var(--dimension-space-012);\n}\n\n:host(.checked) {\n  background-color: var(--color-background-bold-brand);\n}\n\n:host(.switch--readonly),\n:host(.switch--presentation) {\n  --ds-interaction-hover: transparent;\n  --ds-interaction-pressed: transparent;\n}\n\n:host(.switch--readonly) {\n  cursor: default;\n}\n\n:host(.switch--presentation) {\n  pointer-events: none;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.thumb {\n  position: absolute;\n  top: 50%;\n  left: var(--ds-switch-inset);\n  width: var(--ds-switch-thumb-size);\n  height: var(--ds-switch-thumb-size);\n  border-radius: var(--dimension-radius-half);\n  background-color: var(--color-background-primary);\n  /* Outset stroke: does not consume the thumb's declared diameter. */\n  box-shadow:\n    0 0 0 var(--ds-switch-thumb-stroke)\n    var(--ds-switch-thumb-border-color);\n  transform: translateY(-50%);\n  transition: transform var(--effect-motion-short-3);\n  pointer-events: none;\n}\n\n.thumb::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n}\n\n:host(:hover:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-hover);\n}\n\n:host(:active:not(:disabled):not(.ds-control-inactive):not(.switch--readonly):not(.switch--presentation))\n  .thumb::after {\n  background: var(--ds-switch-thumb-pressed);\n}\n\n:host(.checked) .thumb {\n  transform: translate3d(var(--ds-switch-travel), -50%, 0);\n}\n\n:host(:dir(rtl)) .thumb {\n  right: var(--ds-switch-inset);\n  left: auto;\n}\n\n:host(:dir(rtl).checked) .thumb {\n  transform: translate3d(calc(-1 * var(--ds-switch-travel)), -50%, 0);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .thumb {\n    transition: none;\n  }\n}\n","import { AttachInternals, Component, Element, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type SwitchSize = 'md' | 'sm' | 'xs';\n\nlet generatedLabelId = 0;\n\n@Component({\n  tag: 'ds-switch',\n  styleUrl: 'Switch.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Switch {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  /** Current on/off state. The initial value is restored when the owning form resets. */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop() value: string = 'on';\n\n  /** Optional value submitted when unchecked; omitted by default like a native checkbox. */\n  @Prop() uncheckedValue: string | undefined;\n\n  /** Associates the switch with a form by id when it is rendered outside that form. */\n  @Prop({ reflect: true }) form: string | undefined;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() isInactive: boolean = false;\n\n  /** Compact track size for placement inside controls, menus, and form rows. */\n  @Prop() size: SwitchSize = 'md';\n\n  /**\n   * Removes standalone control semantics so a composite owner such as a\n   * `menuitemcheckbox` can use the switch as an aria-hidden visual indicator.\n   */\n  @Prop() presentation: boolean = false;\n\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private initialChecked = false;\n  @State() private formDisabled = false;\n\n  componentWillLoad() {\n    this.initialChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  componentDidLoad() {\n    this.syncNativeLabels();\n  }\n\n  @Watch('checked')\n  @Watch('value')\n  @Watch('uncheckedValue')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('presentation')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.presentation || this.isInactive || this.disabled || this.formDisabled;\n    const submissionValue = this.checked ? this.value : this.uncheckedValue ?? null;\n    const state = this.checked ? 'checked' : 'unchecked';\n    this.internals.setFormValue(inactive ? null : submissionValue, state);\n\n    const missing = this.required && !inactive && !this.checked;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, 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  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.checked = state === 'checked';\n  }\n\n  private syncNativeLabels() {\n    if (this.presentation) return;\n    if (this.el.hasAttribute('aria-label') || this.el.hasAttribute('aria-labelledby')) return;\n\n    const labelIds = (Array.from(this.internals.labels) as HTMLLabelElement[]).map(label => {\n      if (!label.id) label.id = `ds-switch-label-${++generatedLabelId}`;\n      return label.id;\n    });\n    if (labelIds.length) this.el.setAttribute('aria-labelledby', labelIds.join(' '));\n  }\n\n  private handleClick = () => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    this.checked = !this.checked;\n    this.dsChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.presentation || this.readOnly || this.isInactive || this.disabled || this.formDisabled) return;\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  render() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    return (\n      <Host\n        role={this.presentation ? undefined : 'switch'}\n        aria-checked={this.presentation ? undefined : String(this.checked)}\n        aria-disabled={!this.presentation && inactive ? 'true' : undefined}\n        aria-readonly={!this.presentation && this.readOnly ? 'true' : undefined}\n        aria-hidden={this.presentation ? 'true' : undefined}\n        data-checked={this.checked ? '' : undefined}\n        data-unchecked={!this.checked ? '' : undefined}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        tabIndex={this.presentation || inactive ? -1 : 0}\n        class={{\n          switch: true,\n          checked: this.checked,\n          'switch--md': this.size === 'md',\n          'switch--sm': this.size === 'sm',\n          'switch--xs': this.size === 'xs',\n          'switch--readonly': this.readOnly,\n          'switch--presentation': this.presentation,\n          'ds-focus-ring': true,\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--bordered': true,\n          'ds-control-inactive': inactive,\n        }}\n        onClick={this.handleClick}\n        onKeyDown={this.handleKeyDown}\n      >\n        <span class=\"thumb ds-interaction-fill__content\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,8uRCIxB,IAAIC,EAAmB,E,MAQVC,EAAMC,EAAA,MAAAD,UAAAE,EANnB,WAAAC,CAAAC,G,yIAW2BC,KAAAC,QAAmB,MAGpCD,KAAAE,MAAgB,KAQCF,KAAAG,SAAoB,MACpBH,KAAAI,SAAoB,MACpBJ,KAAAK,SAAoB,MACrCL,KAAAM,gBAA0B,0BAC1BN,KAAAO,WAAsB,MAGtBP,KAAAQ,KAAmB,KAMnBR,KAAAS,aAAwB,MAIxBT,KAAAU,eAAiB,MACRV,KAAAW,aAAe,MAoDxBX,KAAAY,YAAc,KACpB,GAAIZ,KAAKS,cAAgBT,KAAKI,UAAYJ,KAAKO,YAAcP,KAAKG,UAAYH,KAAKW,aAAc,OACjGX,KAAKC,SAAWD,KAAKC,QACrBD,KAAKa,SAASC,KAAKd,KAAKC,QAAQ,EAG1BD,KAAAe,cAAiBC,IACvB,GAAIhB,KAAKS,cAAgBT,KAAKI,UAAYJ,KAAKO,YAAcP,KAAKG,UAAYH,KAAKW,aAAc,OACjG,GAAIK,EAAMC,MAAQ,KAAOD,EAAMC,MAAQ,QAAS,CAC9CD,EAAME,iBACNlB,KAAKY,a,EAuCV,CAnGC,iBAAAO,GACEnB,KAAKU,eAAiBV,KAAKC,QAC3BD,KAAKoB,e,CAGP,gBAAAC,GACErB,KAAKsB,kB,CAUP,aAAAF,GACE,MAAMG,EAAWvB,KAAKS,cAAgBT,KAAKO,YAAcP,KAAKG,UAAYH,KAAKW,aAC/E,MAAMa,EAAkBxB,KAAKC,QAAUD,KAAKE,MAAQF,KAAKyB,gBAAkB,KAC3E,MAAMC,EAAQ1B,KAAKC,QAAU,UAAY,YACzCD,KAAK2B,UAAUC,aAAaL,EAAW,KAAOC,EAAiBE,GAE/D,MAAMG,EAAU7B,KAAKK,WAAakB,IAAavB,KAAKC,QACpDD,KAAK2B,UAAUG,YAAYD,EAAU,CAAEE,aAAc,MAAS,GAAIF,EAAU7B,KAAKM,gBAAkB,G,CAGrG,oBAAA0B,CAAqB7B,GACnBH,KAAKW,aAAeR,EACpBH,KAAKoB,e,CAGP,iBAAAa,GACEjC,KAAKC,QAAUD,KAAKU,c,CAGtB,wBAAAwB,CAAyBR,GACvB1B,KAAKC,QAAUyB,IAAU,S,CAGnB,gBAAAJ,GACN,GAAItB,KAAKS,aAAc,OACvB,GAAIT,KAAKmC,GAAGC,aAAa,eAAiBpC,KAAKmC,GAAGC,aAAa,mBAAoB,OAEnF,MAAMC,EAAYC,MAAMC,KAAKvC,KAAK2B,UAAUa,QAA+BC,KAAIC,IAC7E,IAAKA,EAAMC,GAAID,EAAMC,GAAK,qBAAqBjD,IAC/C,OAAOgD,EAAMC,EAAE,IAEjB,GAAIN,EAASO,OAAQ5C,KAAKmC,GAAGU,aAAa,kBAAmBR,EAASS,KAAK,K,CAiB7E,MAAAC,GACE,MAAMxB,EAAWvB,KAAKO,YAAcP,KAAKG,UAAYH,KAAKW,aAC1D,OACEqC,EAACC,EAAI,CAAAhC,IAAA,2CACHiC,KAAMlD,KAAKS,aAAe0C,UAAY,SAAQ,eAChCnD,KAAKS,aAAe0C,UAAYC,OAAOpD,KAAKC,SAAQ,iBAClDD,KAAKS,cAAgBc,EAAW,OAAS4B,UAAS,iBAClDnD,KAAKS,cAAgBT,KAAKI,SAAW,OAAS+C,UAAS,cAC1DnD,KAAKS,aAAe,OAAS0C,UAAS,eACrCnD,KAAKC,QAAU,GAAKkD,UAAS,kBAC1BnD,KAAKC,QAAU,GAAKkD,UAAS,gBAC/B5B,EAAW,GAAK4B,UAAS,gBACzBnD,KAAKI,SAAW,GAAK+C,UAAS,gBAC9BnD,KAAKK,SAAW,GAAK8C,UACpCE,SAAUrD,KAAKS,cAAgBc,GAAW,EAAK,EAC/C+B,MAAO,CACLC,OAAQ,KACRtD,QAASD,KAAKC,QACd,aAAcD,KAAKQ,OAAS,KAC5B,aAAcR,KAAKQ,OAAS,KAC5B,aAAcR,KAAKQ,OAAS,KAC5B,mBAAoBR,KAAKI,SACzB,uBAAwBJ,KAAKS,aAC7B,gBAAiB,KACjB,sBAAuB,KACvB,gCAAiC,KACjC,sBAAuBc,GAEzBiC,QAASxD,KAAKY,YACd6C,UAAWzD,KAAKe,eAEhBiC,EAAA,QAAA/B,IAAA,2CAAMqC,MAAM,uC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["CHROME_TRANSITION_START","CHROME_TRANSITION_END","ChromeTransitionDepth","constructor","this","depth","enter","exit","Math","max","isActive","ChromeTransitionGate","active","createRafCoalescer","onFrame","rafId","schedule","requestAnimationFrame","cancel","cancelAnimationFrame","readChromeTransitionSource","event","detail","source","readChromeTransitionPhase","phase"],"sources":["src/wc/nav/chrome-transition.ts"],"sourcesContent":["/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate — used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n  private depth = 0;\n\n  enter(): void {\n    this.depth += 1;\n  }\n\n  exit(): void {\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  get isActive(): boolean {\n    return this.depth > 0;\n  }\n}\n\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n  private active = false;\n\n  enter(): void {\n    this.active = true;\n  }\n\n  exit(): void {\n    this.active = false;\n  }\n\n  get isActive(): boolean {\n    return this.active;\n  }\n}\n\nexport interface RafCoalescer {\n  schedule(): void;\n  cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n  let rafId = 0;\n  return {\n    schedule() {\n      if (rafId !== 0) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = 0;\n        onFrame();\n      });\n    },\n    cancel() {\n      if (rafId !== 0) {\n        cancelAnimationFrame(rafId);\n        rafId = 0;\n      }\n    },\n  };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n"],"mappings":"AAEO,MAAMA,EAA0B,0BAChC,MAAMC,EAAwB,wB,MAWxBC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,C,CAEhB,KAAAC,GACEF,KAAKC,OAAS,C,CAGhB,IAAAE,GACEH,KAAKC,MAAQG,KAAKC,IAAI,EAAGL,KAAKC,MAAQ,E,CAGxC,YAAIK,GACF,OAAON,KAAKC,MAAQ,C,QAMXM,EAAb,WAAAR,GACUC,KAAAQ,OAAS,K,CAEjB,KAAAN,GACEF,KAAKQ,OAAS,I,CAGhB,IAAAL,GACEH,KAAKQ,OAAS,K,CAGhB,YAAIF,GACF,OAAON,KAAKQ,M,EAUV,SAAUC,EAAmBC,GACjC,IAAIC,EAAQ,EACZ,MAAO,CACL,QAAAC,GACE,GAAID,IAAU,EAAG,OACjBA,EAAQE,uBAAsB,KAC5BF,EAAQ,EACRD,GAAS,G,EAGb,MAAAI,GACE,GAAIH,IAAU,EAAG,CACfI,qBAAqBJ,GACrBA,EAAQ,C,GAIhB,CAEM,SAAUK,EAA2BC,GACzC,OAAQA,EAA8CC,QAAQC,MAChE,CAEM,SAAUC,EAA0BH,GACxC,OAAQA,EAA8CC,QAAQG,KAChE,Q","ignoreList":[]}
+{"version":3,"names":["CHROME_TRANSITION_START","CHROME_TRANSITION_END","ChromeTransitionDepth","constructor","this","depth","enter","exit","Math","max","isActive","ChromeTransitionGate","active","createRafCoalescer","onFrame","rafId","schedule","requestAnimationFrame","cancel","cancelAnimationFrame","readChromeTransitionSource","event","detail","source","readChromeTransitionPhase","phase"],"sources":["src/wc/shell/chrome-transition.ts"],"sourcesContent":["/** Bubbling/composed events — `ds-app-shell` and `ds-bar-nav` coordinate during width motion. */\n\nexport const CHROME_TRANSITION_START = 'dsChromeTransitionStart';\nexport const CHROME_TRANSITION_END = 'dsChromeTransitionEnd';\n\nexport type ChromeTransitionSource = 'panel-nav' | 'panel-tools';\n\nexport interface ChromeTransitionDetail {\n  source: ChromeTransitionSource;\n  /** Panel-tools drawer motion direction; omitted for panel-nav. */\n  phase?: 'opening' | 'closing';\n}\n\n/** Reference-counted gate — used while panel-nav width is transitioning. */\nexport class ChromeTransitionDepth {\n  private depth = 0;\n\n  enter(): void {\n    this.depth += 1;\n  }\n\n  exit(): void {\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  get isActive(): boolean {\n    return this.depth > 0;\n  }\n}\n\n/** Idempotent gate for one physical chrome surface.\n * Duplicate start notifications still require only one matching end. */\nexport class ChromeTransitionGate {\n  private active = false;\n\n  enter(): void {\n    this.active = true;\n  }\n\n  exit(): void {\n    this.active = false;\n  }\n\n  get isActive(): boolean {\n    return this.active;\n  }\n}\n\nexport interface RafCoalescer {\n  schedule(): void;\n  cancel(): void;\n}\n\n/** Coalesce bursty layout work (ResizeObserver, prop churn) to one callback per frame. */\nexport function createRafCoalescer(onFrame: () => void): RafCoalescer {\n  let rafId = 0;\n  return {\n    schedule() {\n      if (rafId !== 0) return;\n      rafId = requestAnimationFrame(() => {\n        rafId = 0;\n        onFrame();\n      });\n    },\n    cancel() {\n      if (rafId !== 0) {\n        cancelAnimationFrame(rafId);\n        rafId = 0;\n      }\n    },\n  };\n}\n\nexport function readChromeTransitionSource(event: Event): ChromeTransitionSource | undefined {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.source;\n}\n\nexport function readChromeTransitionPhase(event: Event): ChromeTransitionDetail['phase'] {\n  return (event as CustomEvent<ChromeTransitionDetail>).detail?.phase;\n}\n"],"mappings":"AAEO,MAAMA,EAA0B,0BAChC,MAAMC,EAAwB,wB,MAWxBC,EAAb,WAAAC,GACUC,KAAAC,MAAQ,C,CAEhB,KAAAC,GACEF,KAAKC,OAAS,C,CAGhB,IAAAE,GACEH,KAAKC,MAAQG,KAAKC,IAAI,EAAGL,KAAKC,MAAQ,E,CAGxC,YAAIK,GACF,OAAON,KAAKC,MAAQ,C,QAMXM,EAAb,WAAAR,GACUC,KAAAQ,OAAS,K,CAEjB,KAAAN,GACEF,KAAKQ,OAAS,I,CAGhB,IAAAL,GACEH,KAAKQ,OAAS,K,CAGhB,YAAIF,GACF,OAAON,KAAKQ,M,EAUV,SAAUC,EAAmBC,GACjC,IAAIC,EAAQ,EACZ,MAAO,CACL,QAAAC,GACE,GAAID,IAAU,EAAG,OACjBA,EAAQE,uBAAsB,KAC5BF,EAAQ,EACRD,GAAS,G,EAGb,MAAAI,GACE,GAAIH,IAAU,EAAG,CACfI,qBAAqBJ,GACrBA,EAAQ,C,GAIhB,CAEM,SAAUK,EAA2BC,GACzC,OAAQA,EAA8CC,QAAQC,MAChE,CAEM,SAAUC,EAA0BH,GACxC,OAAQA,EAA8CC,QAAQG,KAChE,Q","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["isTabDivider","item","type","getSelectableTabs","tabs","filter","t"],"sources":["src/wc/components/TabGroup/tab-item-utils.ts"],"sourcesContent":["export interface TabItemDivider {\n  type: 'divider';\n}\n\nexport interface TabItemTab {\n  id: string;\n  label: string;\n  /** Disables the tab (same meaning as control `isInactive`). */\n  isInactive?: boolean;\n  /** id of the tabpanel this tab controls */\n  panelId?: string;\n  /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */\n  dot?: boolean;\n}\n\nexport type TabItem = TabItemTab | TabItemDivider;\n\nexport function isTabDivider(item: TabItem): item is TabItemDivider {\n  return 'type' in item && item.type === 'divider';\n}\n\n/** Tab entries that participate in selection, keyboard nav, and URL matching. */\nexport function getSelectableTabs(tabs: TabItem[]): TabItemTab[] {\n  return tabs.filter((t): t is TabItemTab => !isTabDivider(t));\n}\n"],"mappings":"AAiBM,SAAUA,EAAaC,GAC3B,MAAO,SAAUA,GAAQA,EAAKC,OAAS,SACzC,CAGM,SAAUC,EAAkBC,GAChC,OAAOA,EAAKC,QAAQC,IAAwBN,EAAaM,IAC3D,Q","ignoreList":[]}
+{"version":3,"names":["isTabDivider","item","type","getSelectableTabs","tabs","filter","t"],"sources":["src/wc/components/TabGroup/tab-item-utils.ts"],"sourcesContent":["export interface TabItemDivider {\n  type: 'divider';\n}\n\nexport interface TabItemTab {\n  id: string;\n  label: string;\n  /** Disables the tab (same meaning as control `isInactive`). */\n  isInactive?: boolean;\n  /** id of the tabpanel this tab controls */\n  panelId?: string;\n  /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */\n  dot?: boolean;\n}\n\nexport type TabItem = TabItemTab | TabItemDivider;\n\nexport type TabGroupItemVariant = 'label' | 'icon' | 'icon-label';\n\nexport interface TabGroupItemLabel extends TabItemTab {\n  variant?: 'label';\n  icon?: never;\n}\n\nexport interface TabGroupItemIcon extends TabItemTab {\n  variant: 'icon';\n  icon: string;\n}\n\nexport interface TabGroupItemIconLabel extends TabItemTab {\n  variant: 'icon-label';\n  icon: string;\n}\n\nexport type TabGroupItem =\n  | TabGroupItemLabel\n  | TabGroupItemIcon\n  | TabGroupItemIconLabel\n  | TabItemDivider;\n\nexport function isTabDivider(item: TabItem): item is TabItemDivider {\n  return 'type' in item && item.type === 'divider';\n}\n\n/** Tab entries that participate in selection, keyboard nav, and URL matching. */\nexport function getSelectableTabs(tabs: TabItem[]): TabItemTab[] {\n  return tabs.filter((t): t is TabItemTab => !isTabDivider(t));\n}\n"],"mappings":"AAwCM,SAAUA,EAAaC,GAC3B,MAAO,SAAUA,GAAQA,EAAKC,OAAS,SACzC,CAGM,SAAUC,EAAkBC,GAChC,OAAOA,EAAKC,QAAQC,IAAwBN,EAAaM,IAC3D,Q","ignoreList":[]}

package/dist/components/{p-bl7d1jB2.js → p-CPD_mML6.js}

@@ -1,2 +1,2 @@
-import{p as d,H as r,h as a,a as e,t as s}from"./index.js";import{d as i}from"./p-CWd8L7Fk.js";const c=()=>`.sc-ds-card-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-width);min-height:var(--_card-min-height);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card--editing.sc-ds-card-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card__header.sc-ds-card{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);flex-shrink:0;padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__header.sc-ds-card{background-color:transparent;border-bottom-color:transparent}ds-text.card__title.sc-ds-card{flex:1 1 auto;min-width:0;display:flex;align-items:center;box-sizing:border-box;padding:calc(     var(--dimension-space-075) + var(--dimension-space-025)   );-webkit-user-select:none;user-select:none}.card__actions.sc-ds-card{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card__actions.sc-ds-card:empty{display:none}.card__body.sc-ds-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__body.sc-ds-card{border-radius:var(--dimension-radius-025)}`;const o={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const t="var(--color-foreground-faint-brand)";const l=d(class d extends r{constructor(d){super();if(d!==false){this.__registerHost()}this.cardWidth="md";this.appearance="default"}render(){const d=this.appearance==="editing";return a(e,{key:"c0a1a2eed24f2fae229f75d8b27527ae0c5b832f",class:{card:true,"card--editing":d},style:{"--_card-width":o[this.cardWidth],"--_card-min-height":n[this.cardWidth]}},a("header",{key:"120832c3d2391a079bbe2cd034c339d7778ef98f",class:"card__header"},a("ds-text",{key:"7bea07c6e8b2675bc48dd62756c90b580360d684",class:"card__title",variant:"text-title-small",emphasis:true,color:d?t:"primary",as:"h2"},this.heading),a("div",{key:"ed6b94b17f4be4ffc615f91c86c49218290ac2aa",class:"card__actions"},a("slot",{key:"8365b8b90d5177b842d294797187a81d1aae919c",name:"actions"}))),a("div",{key:"39b32de0a85b985ead190767d07c33b1b4a8c605",class:"card__body"},a("slot",{key:"045c2c3c09dfd2a7707b1f1cfde831d884a25314"})))}static get style(){return c()}},[262,"ds-card",{heading:[1],cardWidth:[1,"card-width"],appearance:[1]}]);function b(){if(typeof customElements==="undefined"){return}const d=["ds-card","ds-text"];d.forEach((d=>{switch(d){case"ds-card":if(!customElements.get(s(d))){customElements.define(s(d),l)}break;case"ds-text":if(!customElements.get(s(d))){i()}break}}))}b();export{l as C,b as d};
-//# sourceMappingURL=p-bl7d1jB2.js.map
+import{p as d,H as r,h as a,a as e,t as s}from"./index.js";import{d as i}from"./p-Dt0XnMxc.js";const c=()=>`.sc-ds-card-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-width);min-height:var(--_card-min-height);max-width:100%;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);overflow:hidden}.card--editing.sc-ds-card-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card__header.sc-ds-card{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);flex-shrink:0;padding:var(--dimension-space-100);background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__header.sc-ds-card{background-color:transparent;border-bottom-color:transparent}ds-text.card__title.sc-ds-card{flex:1 1 auto;min-width:0;display:flex;align-items:center;box-sizing:border-box;padding:calc(     var(--dimension-space-075) + var(--dimension-space-025)   );-webkit-user-select:none;user-select:none}.card__actions.sc-ds-card{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card__actions.sc-ds-card:empty{display:none}.card__body.sc-ds-card{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary);box-sizing:border-box}.card--editing.sc-ds-card-h .card__body.sc-ds-card{border-radius:var(--dimension-radius-025)}`;const o={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const n={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const t="var(--color-foreground-faint-brand)";const b=d(class d extends r{constructor(d){super();if(d!==false){this.__registerHost()}this.cardWidth="md";this.appearance="default"}render(){const d=this.appearance==="editing";return a(e,{key:"9aa61d42e716d0f272c9789e216ec8716ead2bb8",class:{card:true,"card--editing":d},style:{"--_card-width":o[this.cardWidth],"--_card-min-height":n[this.cardWidth]}},a("header",{key:"d41b866be284957d8be5b030ca3c38f8bbe7edf5",class:"card__header"},a("ds-text",{key:"da32d2c64a179c3b1a48f10c315e13ed5400b08a",class:"card__title",variant:"text-title-small",emphasis:true,color:d?t:"primary",as:"h2"},this.heading),a("div",{key:"ae8d2a34bf18c99fb629b6de66c7c403926d7376",class:"card__actions"},a("slot",{key:"bd5b416ff71d54644e26b62f1e57e3069ff6f739",name:"actions"}))),a("div",{key:"5fa5b262b175afac339fba3f9af23749d23b3e4b",class:"card__body"},a("slot",{key:"71bce7292ecdf0aba3830aac1790c5e097ba30a8"})))}static get style(){return c()}},[262,"ds-card",{heading:[1],cardWidth:[1,"card-width"],appearance:[1]}]);function l(){if(typeof customElements==="undefined"){return}const d=["ds-card","ds-text"];d.forEach((d=>{switch(d){case"ds-card":if(!customElements.get(s(d))){customElements.define(s(d),b)}break;case"ds-text":if(!customElements.get(s(d))){i()}break}}))}l();export{b as C,l as d};
+//# sourceMappingURL=p-CPD_mML6.js.map

package/dist/components/p-Ca1H1HPf.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,h as n,a as i,t as r}from"./index.js";import{d as t}from"./p-Dt0XnMxc.js";const d="--_badge-gradient-position";function s(e){const a=e.closest("ds-app-shell");return a!==null&&a.getAttribute("gradient-preset")!=="none"}const o=()=>`.sc-ds-badge-h{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;vertical-align:middle;--_badge-bg:var(--color-background-bold-brand);--_badge-fg:var(--color-foreground-on-bold-background-primary);--_badge-ring:var(--color-background-secondary);--_badge-ring-width:var(--dimension-stroke-width-018)}.badge__mark.sc-ds-badge{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;color:var(--_badge-fg);background:var(--_badge-bg);box-shadow:0 0 0 var(--_badge-ring-width) var(--_badge-ring);white-space:nowrap}.badge__a11y.sc-ds-badge{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.badge--dot.sc-ds-badge-h .badge__mark.sc-ds-badge{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half)}.badge--counter.sc-ds-badge-h .badge__mark.sc-ds-badge{width:auto;min-width:var(--dimension-size-150);height:var(--dimension-size-150);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-half)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge{position:relative;z-index:0;box-shadow:none;isolation:isolate}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before,.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{content:'';position:absolute;inset:calc(-1 * var(--_badge-ring-width));border-radius:inherit;box-sizing:border-box;padding:var(--_badge-ring-width);pointer-events:none;-webkit-mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,     linear-gradient(#fff 0 0);mask-composite:exclude}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::before{z-index:-2;background-color:var(--_badge-ring)}.badge--on-gradient-background.sc-ds-badge-h .badge__mark.sc-ds-badge::after{z-index:-1;background-image:var(--ds-shell-gradient-image, none);background-size:var(--ds-shell-gradient-size, auto);background-position:0 0;background-repeat:no-repeat;background-attachment:fixed;opacity:var(--ds-shell-gradient-opacity, 1)}`;const g={primary:"var(--color-background-primary)",secondary:"var(--color-background-secondary)",faint:"var(--color-background-faint-neutral)",medium:"var(--color-background-medium-neutral)",bold:"var(--color-background-bold-neutral)",strong:"var(--color-background-strong-neutral)",translucent:"var(--color-translucent-translucent)",inverted:"var(--color-inverted-background)",media:"var(--color-media-background)",navigation:"var(--color-navigation-background)","always-dark":"var(--color-always-dark-background)"};const c=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="counter";this.count=0;this.max=9;this.surface="primary";this.gradientBackground=false;this.gradientLayoutVersion=0;this.gradientObserver=null;this.gradientWindowListener=null}componentDidLoad(){this.enableShellGradientRingIfNeeded()}disconnectedCallback(){this.unbindGradientRingSync()}gradientBackgroundChanged(){this.bindGradientRingSync()}enableShellGradientRingIfNeeded(){if(!this.gradientBackground&&s(this.el)){this.gradientBackground=true}if(this.gradientBackground){this.bindGradientRingSync()}}bindGradientRingSync(){this.unbindGradientRingSync();if(!this.gradientBackground)return;const e=()=>{this.gradientLayoutVersion+=1};e();this.gradientWindowListener=e;window.addEventListener("resize",e);if(typeof ResizeObserver!=="undefined"){this.gradientObserver=new ResizeObserver(e);this.gradientObserver.observe(this.el);const a=this.el.closest("ds-app-shell");if(a)this.gradientObserver.observe(a);const n=this.el.closest("ds-bar-nav");if(n)this.gradientObserver.observe(n);const i=this.el.closest("ds-panel-nav");if(i)this.gradientObserver.observe(i)}}unbindGradientRingSync(){if(this.gradientWindowListener){window.removeEventListener("resize",this.gradientWindowListener);this.gradientWindowListener=null}this.gradientObserver?.disconnect();this.gradientObserver=null}ringHostStyle(e){const a={"--_badge-ring":e};if(!this.gradientBackground||!s(this.el))return a;a[d]="0 0";return a}render(){const e=this.variant==="dot";if(!e&&this.count<=0)return n(i,{style:{display:"none"}});const a=this.count>this.max?`${this.max}+`:String(this.count);const r=this.background??g[this.surface];return n(i,{class:{badge:true,"badge--counter":!e,"badge--dot":e,"badge--on-gradient-background":this.gradientBackground},style:this.ringHostStyle(r)},n("span",{class:"badge__mark","aria-hidden":"true"},!e&&n("ds-text",{as:"span",variant:"text-caption",emphasis:true,color:"inherit"},a)),this.label&&n("span",{class:"badge__a11y"},this.label))}get el(){return this}static get watchers(){return{gradientBackground:[{gradientBackgroundChanged:0}]}}static get style(){return o()}},[2,"ds-badge",{variant:[1],count:[2],max:[2],surface:[1],background:[1],gradientBackground:[516,"gradient-background"],label:[1],gradientLayoutVersion:[32]},undefined,{gradientBackground:[{gradientBackgroundChanged:0}]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-badge","ds-text"];e.forEach((e=>{switch(e){case"ds-badge":if(!customElements.get(r(e))){customElements.define(r(e),c)}break;case"ds-text":if(!customElements.get(r(e))){t()}break}}))}b();export{c as B,b as d};
+//# sourceMappingURL=p-Ca1H1HPf.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","getAttribute","badgeCss","SURFACE_RING","primary","secondary","faint","medium","bold","strong","translucent","inverted","media","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","background","class","badge","as","emphasis","color","label"],"sources":["src/wc/shell/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n  element: HTMLElement;\n  chromeHost: HTMLElement;\n  positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n  // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n  // resolves where @stencil/core types are installed — consumers importing\n  // `@ds-mo/ui/shell` (raw TS) compile this without them.\n  const shell = from.closest<HTMLElement>('ds-app-shell');\n  return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n  const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n  if (barHost) {\n    const root = barHost.shadowRoot ?? barHost;\n    const element = root.querySelector('.bar-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: barHost,\n        positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n      };\n    }\n  }\n\n  const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n  if (panelHost) {\n    const root = panelHost.shadowRoot ?? panelHost;\n    const element = root.querySelector('.panel-nav');\n    if (element) {\n      return {\n        element: element as HTMLElement,\n        chromeHost: panelHost,\n        positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n      };\n    }\n  }\n\n  return null;\n}\n\ninterface ParsedPosition {\n  x: number;\n  y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n  const trimmed = value.trim();\n  if (!trimmed) return { x: 0, y: 0 };\n\n  const parts = trimmed.split(/\\s+/);\n  const x = parseLength(parts[0] ?? '0');\n  const y = parseLength(parts[1] ?? '0');\n  return { x, y };\n}\n\nfunction parseLength(token: string): number {\n  const px = token.match(/^(-?[\\d.]+)px$/);\n  if (px) return Number(px[1]);\n  return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n  badgeHost: HTMLElement,\n  surface: GradientSurface,\n  shellPosition: string,\n): string {\n  const badgeRect = badgeHost.getBoundingClientRect();\n  const surfaceRect = surface.element.getBoundingClientRect();\n  const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n  const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n  const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n  return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n  const styles = getComputedStyle(surface.chromeHost);\n  return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n  if (!isShellGradientActive(badgeHost)) {\n    badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n    return;\n  }\n\n  badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n  vertical-align: middle;\n\n  --_badge-bg: var(--color-background-bold-brand);\n  --_badge-fg: var(--color-foreground-on-bold-background-primary);\n  --_badge-ring: var(--color-background-secondary);\n  --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  color: var(--_badge-fg);\n  background: var(--_badge-bg);\n  box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n  white-space: nowrap;\n}\n\n.badge__a11y {\n  position: absolute;\n  /* stylelint-disable declaration-property-value-disallowed-list -- classic visually-hidden clip pattern */\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n  /* stylelint-enable declaration-property-value-disallowed-list */\n}\n\n:host(.badge--dot) .badge__mark {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n  width: auto;\n  min-width: var(--dimension-size-150);\n  height: var(--dimension-size-150);\n  padding: 0 var(--dimension-space-025);\n  border-radius: var(--dimension-radius-half);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n  position: relative;\n  z-index: 0;\n  box-shadow: none;\n  isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--_badge-ring-width));\n  border-radius: inherit;\n  box-sizing: border-box;\n  padding: var(--_badge-ring-width);\n  pointer-events: none;\n  /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n  -webkit-mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  -webkit-mask-composite: xor;\n  mask:\n    linear-gradient(#fff 0 0) content-box,\n    linear-gradient(#fff 0 0);\n  /* stylelint-enable color-no-hex */\n  mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n  z-index: -2;\n  background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n  z-index: -1;\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-position: 0 0;\n  background-repeat: no-repeat;\n  background-attachment: fixed;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n  BADGE_GRADIENT_POSITION_VAR,\n  isShellGradientActive,\n} from '../../shell/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n  | 'primary'\n  | 'secondary'\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'navigation'\n  | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n  primary: 'var(--color-background-primary)',\n  secondary: 'var(--color-background-secondary)',\n  faint: 'var(--color-background-faint-neutral)',\n  medium: 'var(--color-background-medium-neutral)',\n  bold: 'var(--color-background-bold-neutral)',\n  strong: 'var(--color-background-strong-neutral)',\n  translucent: 'var(--color-translucent-translucent)',\n  inverted: 'var(--color-inverted-background)',\n  media: 'var(--color-media-background)',\n  navigation: 'var(--color-navigation-background)',\n  'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n  tag: 'ds-badge',\n  styleUrl: 'Badge.css',\n  scoped: true,\n})\nexport class Badge {\n  @Element() el!: HTMLElement;\n\n  /** Render as a compact counter or notification dot. */\n  @Prop() variant: BadgeVariant = 'counter';\n\n  /** Count shown for counter badges. Count 0 hides the badge. */\n  @Prop() count: number = 0;\n\n  /** Highest count shown before compacting to \"{max}+\". */\n  @Prop() max: number = 9;\n\n  /** Immediate backing surface matched by the ring around either variant. */\n  @Prop() surface: BadgeSurface = 'primary';\n\n  /** Direct ring background override for component-local surfaces. */\n  @Prop() background: string | undefined;\n\n  /**\n   * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n   * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\n   * set `gradient-background` to opt in/out explicitly.\n   *\n   * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n   * unknown `on*` member down the event-listener path during attribute\n   * reflection, calling addEventListener with a non-listener and throwing.\n   */\n  @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n  /** Contextual supplemental text. Omit when the owner hides the badge from assistive technology. */\n  @Prop() label: string | undefined;\n\n  /** Bumps on resize/layout so render recomputes gradient ring position. */\n  @State() private gradientLayoutVersion = 0;\n\n  private gradientObserver: ResizeObserver | null = null;\n  private gradientWindowListener: (() => void) | null = null;\n\n  componentDidLoad() {\n    this.enableShellGradientRingIfNeeded();\n  }\n\n  disconnectedCallback() {\n    this.unbindGradientRingSync();\n  }\n\n  @Watch('gradientBackground')\n  gradientBackgroundChanged() {\n    this.bindGradientRingSync();\n  }\n\n  /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n  private enableShellGradientRingIfNeeded() {\n    if (!this.gradientBackground && isShellGradientActive(this.el)) {\n      this.gradientBackground = true;\n    }\n\n    if (this.gradientBackground) {\n      this.bindGradientRingSync();\n    }\n  }\n\n  private bindGradientRingSync() {\n    this.unbindGradientRingSync();\n\n    if (!this.gradientBackground) return;\n\n    const update = () => {\n      this.gradientLayoutVersion += 1;\n    };\n    update();\n\n    this.gradientWindowListener = update;\n    window.addEventListener('resize', update);\n\n    if (typeof ResizeObserver !== 'undefined') {\n      this.gradientObserver = new ResizeObserver(update);\n      this.gradientObserver.observe(this.el);\n\n      const shell = this.el.closest('ds-app-shell');\n      if (shell) this.gradientObserver.observe(shell);\n\n      const bar = this.el.closest('ds-bar-nav');\n      if (bar) this.gradientObserver.observe(bar);\n\n      const panel = this.el.closest('ds-panel-nav');\n      if (panel) this.gradientObserver.observe(panel);\n    }\n  }\n\n  private unbindGradientRingSync() {\n    if (this.gradientWindowListener) {\n      window.removeEventListener('resize', this.gradientWindowListener);\n      this.gradientWindowListener = null;\n    }\n\n    this.gradientObserver?.disconnect();\n    this.gradientObserver = null;\n  }\n\n  private ringHostStyle(ring: string): Record<string, string> {\n    void this.gradientLayoutVersion;\n\n    const style: Record<string, string> = { '--_badge-ring': ring };\n    if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n    /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n    style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n    return style;\n  }\n\n  render() {\n    const isDot = this.variant === 'dot';\n\n    if (!isDot && this.count <= 0) return <Host style={{ display: 'none' }} />;\n\n    const display = this.count > this.max ? `${this.max}+` : String(this.count);\n    const ring = this.background ?? SURFACE_RING[this.surface];\n\n    return (\n      <Host\n        class={{\n          badge: true,\n          'badge--counter': !isDot,\n          'badge--dot': isDot,\n          'badge--on-gradient-background': this.gradientBackground,\n        }}\n        style={this.ringHostStyle(ring)}\n      >\n        <span class=\"badge__mark\" aria-hidden=\"true\">\n          {!isDot && (\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n              {display}\n            </ds-text>\n          )}\n        </span>\n        {this.label && <span class=\"badge__a11y\">{this.label}</span>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,IAAU,MAAQA,EAAME,aAAa,qBAAuB,MACrE,CCrBA,MAAMC,EAAW,IAAM,0qECoBvB,MAAMC,EAA6C,CACjDC,QAAS,kCACTC,UAAW,oCACXC,MAAO,wCACPC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,YAAa,uCACbC,SAAU,mCACVC,MAAO,gCACPC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAMxEL,KAAAM,sBAAwB,EAEjCN,KAAAO,iBAA0C,KAC1CP,KAAAQ,uBAA8C,IAwGvD,CAtGC,gBAAAC,GACET,KAAKU,iC,CAGP,oBAAAC,GACEX,KAAKY,wB,CAIP,yBAAAC,GACEb,KAAKc,sB,CAIC,+BAAAJ,GACN,IAAKV,KAAKK,oBAAsB3B,EAAsBsB,KAAKe,IAAK,CAC9Df,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKc,sB,EAID,oBAAAA,GACNd,KAAKY,yBAEL,IAAKZ,KAAKK,mBAAoB,OAE9B,MAAMW,EAAS,KACbhB,KAAKM,uBAAyB,CAAC,EAEjCU,IAEAhB,KAAKQ,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCnB,KAAKO,iBAAmB,IAAIY,eAAeH,GAC3ChB,KAAKO,iBAAiBa,QAAQpB,KAAKe,IAEnC,MAAMnC,EAAQoB,KAAKe,GAAGlC,QAAQ,gBAC9B,GAAID,EAAOoB,KAAKO,iBAAiBa,QAAQxC,GAEzC,MAAMyC,EAAMrB,KAAKe,GAAGlC,QAAQ,cAC5B,GAAIwC,EAAKrB,KAAKO,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQtB,KAAKe,GAAGlC,QAAQ,gBAC9B,GAAIyC,EAAOtB,KAAKO,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIZ,KAAKQ,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUvB,KAAKQ,wBAC1CR,KAAKQ,uBAAyB,I,CAGhCR,KAAKO,kBAAkBiB,aACvBxB,KAAKO,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK1B,KAAKK,qBAAuB3B,EAAsBsB,KAAKe,IAAK,OAAOY,EAGxEA,EAAMlD,GAA+B,MACrC,OAAOkD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ7B,KAAKC,UAAY,MAE/B,IAAK4B,GAAS7B,KAAKE,OAAS,EAAG,OAAO4B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE9D,MAAMA,EAAUhC,KAAKE,MAAQF,KAAKG,IAAM,GAAGH,KAAKG,OAAS8B,OAAOjC,KAAKE,OACrE,MAAMwB,EAAO1B,KAAKkC,YAAclD,EAAagB,KAAKI,SAElD,OACE0B,EAACC,EAAI,CACHI,MAAO,CACLC,MAAO,KACP,kBAAmBP,EACnB,aAAcA,EACd,gCAAiC7B,KAAKK,oBAExCsB,MAAO3B,KAAKyB,cAAcC,IAE1BI,EAAA,QAAMK,MAAM,cAAa,cAAa,SAClCN,GACAC,EAAA,WAASO,GAAG,OAAOpC,QAAQ,eAAeqC,SAAQ,KAACC,MAAM,WACtDP,IAINhC,KAAKwC,OAASV,EAAA,QAAMK,MAAM,eAAenC,KAAKwC,O","ignoreList":[]}

package/dist/components/p-CpX87AQy.js

@@ -0,0 +1,2 @@
+import{p as t,H as o,c as n,h as i,a as e,t as d}from"./index.js";import{d as l}from"./p-DoZU8RH0.js";import{d as s}from"./p-wxw8arTd.js";import{d as r}from"./p-Dt0XnMxc.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.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: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))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-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;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 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)}.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.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}.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);--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);--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);--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-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-radius:var(--dimension-radius-025)}.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;align-self:flex-start}.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-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-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))}.button-filled-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 .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2),     color var(--effect-motion-short-2),     transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}@media (prefers-reduced-motion: reduce){.button-filled.sc-ds-button-filled{transition:background-color var(--effect-motion-short-2),       color var(--effect-motion-short-2)}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:none}}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled__label--loading.sc-ds-button-filled{visibility:hidden}.button-filled.sc-ds-button-filled>.button-filled__loader-overlay.sc-ds-button-filled{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none}.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)}`;const f={md:"md",sm:"sm",xs:"xs"};const b=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.isLoading=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive||this.isLoading)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.isLoading&&this.variant==="label"&&this.label)return this.label;return undefined}render(){const t=a[this.size];const o=f[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"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","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(e,{key:"c22ed3b2b8d024cba3f9e38477816b11228a2eed",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"092df042a119147b448e5386fded4ba64a248fba",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive||this.isLoading,"aria-label":this.accessibleName,"aria-busy":this.isLoading?"true":undefined,onClick:this.handleClick},this.showIcon&&i("span",{key:"6b0db2adbd3c8f82b311063c3130709741aeef13",class:"button-filled__icon-wrap ds-interaction-fill__content"},this.isLoading?i("ds-loader",{size:o,color:"inherit"}):i("ds-icon",{name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"6e897427c83ef027aee39bb088bdc2fbfd9dd7b3",class:{"button-filled__label":true,"button-filled__label--loading":this.isLoading&&this.variant==="label","ds-interaction-fill__content":true},as:"span",variant:t,emphasis:true,color:"inherit"},this.label),this.isLoading&&this.variant==="label"&&i("span",{key:"a4d313b492c0f63f5de2a18ebd5ec993829d4ead",class:"button-filled__loader-overlay ds-interaction-fill__content"},i("ds-loader",{key:"244f38dc33a323991596d46ef8abd1f374575813",size:o,color:"inherit"}))))}get el(){return this}static get style(){return u()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(d(t))){customElements.define(d(t),b)}break;case"ds-icon":if(!customElements.get(d(t))){l()}break;case"ds-loader":if(!customElements.get(d(t))){s()}break;case"ds-text":if(!customElements.get(d(t))){r()}break}}))}g();export{b as B,g as d};
+//# sourceMappingURL=p-CpX87AQy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonFilledCss","ICON_SIZE","md","sm","xs","ButtonFilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","intent","contrast","isInactive","isLoading","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","setFocus","focus","showIcon","showLabel","accessibleName","undefined","render","textVariant","CONTROL_TEXT_VARIANT","iconSize","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","onClick","color","name","as","emphasis"],"sources":["src/wc/components/ButtonFilled/ButtonFilled.css?tag=ds-button-filled&encapsulation=scoped","src/wc/components/ButtonFilled/ButtonFilled.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n\n:host {\n  display: inline-flex;\n  outline: none;\n  --ds-button-filled-bg: var(--color-background-bold-brand);\n  --ds-button-filled-fg: var(--color-foreground-faint-brand);\n}\n\n/* Icon-only: fixed square from density height (hug). Fill stretches the hit target. */\n:host(.button-filled-host--icon.ds-control-width--hug) {\n  width: var(--ds-control-height, var(--dimension-size-400));\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-width: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.button-filled-host--icon.ds-control-width--fill) {\n  height: var(--ds-control-height, var(--dimension-size-400));\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n}\n\n:host(.ds-control-width--fill) .button-filled {\n  width: 100%;\n}\n\n.button-filled {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background-color: var(--ds-button-filled-bg);\n  color: var(--ds-button-filled-fg);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  overflow: hidden;\n  transition:\n    background-color var(--effect-motion-short-2),\n    color var(--effect-motion-short-2),\n    transform var(--effect-motion-short-2);\n  /* Hover/press: `.ds-interaction-fill` + contrast → `--on-*` (token overlay, not color-mix). */\n}\n\n.button-filled--icon {\n  width: 100%;\n  height: 100%;\n  padding: 0;\n}\n\n.button-filled:active:not(:disabled):not(.ds-control-inactive) {\n  transform: scale(var(--dimension-scale-subtle));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .button-filled {\n    transition:\n      background-color var(--effect-motion-short-2),\n      color var(--effect-motion-short-2);\n  }\n\n  .button-filled:active:not(:disabled):not(.ds-control-inactive) {\n    transform: none;\n  }\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.button-filled__icon-wrap {\n  position: relative;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-filled__label {\n  position: relative;\n  z-index: 2;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  white-space: nowrap;\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.button-filled__label--loading {\n  visibility: hidden;\n}\n\n.button-filled > .button-filled__loader-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* ── 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","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\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 ButtonFilledVariant = 'icon' | 'label' | 'icon-label';\n\nexport type ButtonFilledSize = 'md' | 'sm' | 'xs';\n\nexport type ButtonFilledWidth = ControlWidth;\n\n/**\n * `ds-icon` size prop matching control-density icon metrics\n * (md→20 / sm→16 / xs→12 via `--dimension-iconography-*`).\n */\nconst ICON_SIZE: Record<ButtonFilledSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\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  /** 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  /** 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  /** 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  @Event() dsClick!: EventEmitter<MouseEvent>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) return;\n    this.dsClick.emit(event);\n  };\n\n  private get showIcon(): boolean {\n    return this.variant === 'icon' || this.variant === 'icon-label';\n  }\n\n  private get showLabel(): boolean {\n    return this.variant === 'label' || this.variant === 'icon-label';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const cls: Record<string, boolean> = {\n      'button-filled': true,\n      'ds-focus-ring-inset': true,\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      'ds-control-inactive': this.isInactive,\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'button-filled--icon': this.variant === 'icon',\n      'button-filled--label': this.variant === 'label',\n      'button-filled--icon-label': this.variant === 'icon-label',\n      [`button-filled--intent-${this.intent}`]: true,\n      [`button-filled--contrast-${this.contrast}`]: this.contrast !== 'bold',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-filled-host': true,\n          'button-filled-host--icon': this.variant === 'icon',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive || this.isLoading}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          onClick={this.handleClick}\n        >\n          {this.showIcon && (\n            <span class=\"button-filled__icon-wrap ds-interaction-fill__content\">\n              {this.isLoading\n                ? <ds-loader size={iconSize} color=\"inherit\" />\n                : <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n              }\n            </span>\n          )}\n          {this.showLabel && (\n            <ds-text\n              class={{\n                'button-filled__label': true,\n                'button-filled__label--loading': this.isLoading && this.variant === 'label',\n                'ds-interaction-fill__content': true,\n              }}\n              as=\"span\"\n              variant={textVariant}\n              emphasis\n              color=\"inherit\"\n            >\n              {this.label}\n            </ds-text>\n          )}\n          {this.isLoading && this.variant === 'label' && (\n            <span class=\"button-filled__loader-overlay ds-interaction-fill__content\">\n              <ds-loader size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-CyMmsNCF.js

@@ -0,0 +1,2 @@
+import{p as i,H as e,c as s,h as n,a as t,t as o}from"./index.js";import{d as r}from"./p-Ca1H1HPf.js";import{d as a}from"./p-clDpFcdU.js";import{d as c}from"./p-DavEAOUa.js";import{d}from"./p-B8ERbwc9.js";import{d as l}from"./p-Dt0XnMxc.js";import{a as u,T as h}from"./p-drBA73M_.js";import{r as m}from"./p-BWUTr_XN.js";import{r as f}from"./p-BHtg1fh3.js";function v(i){const{anchorRect:e,popupWidth:s,popupHeight:n,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:c,viewportWidth:d,viewportHeight:l}=i;let u=0;let h=0;switch(t){case"top":h=e.top-n-r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"bottom":h=e.bottom+r;u=o==="start"?e.left+a:o==="end"?e.right-s+a:e.left+e.width/2-s/2+a;break;case"left":u=e.left-s-r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break;case"right":u=e.right+r;h=o==="start"?e.top+a:o==="end"?e.bottom-n+a:e.top+e.height/2-n/2+a;break}return{x:Math.min(Math.max(u,c),d-s-c),y:Math.min(Math.max(h,c),l-n-c)}}function p(i){return"variant"in i&&i.variant==="gradient-picker"}const g=()=>`.sc-ds-menu-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-menu-h:focus-visible,.ds-focus-ring.sc-ds-menu: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-menu-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-menu{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-menu-h:focus-visible,.ds-focus-ring-inset.sc-ds-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-menu: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-menu-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-menu-h,.ds-interaction-fill.sc-ds-menu{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-menu-h,.ds-interaction-fill--on-faint.sc-ds-menu{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-translucent.sc-ds-menu{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-menu-h,.ds-interaction-fill--on-inverted.sc-ds-menu{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-menu-h,.ds-interaction-fill--on-media.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--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-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-menu-h,.ds-control--sm.sc-ds-menu{--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-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-menu-h,.ds-control--xs.sc-ds-menu{--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-radius:var(--dimension-radius-025)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.menu-popup.sc-ds-menu{animation:none;opacity:1}.menu-popup--closing.sc-ds-menu{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.section-header.sc-ds-menu{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   );text-align:start;-webkit-user-select:none;user-select:none}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.menu-item__subtext.sc-ds-menu,ds-text.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}.menu-item__dot-box.sc-ds-menu{display: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));pointer-events:none}.menu-item__switch.sc-ds-menu{flex-shrink:0}`;const b=8;const w=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.dsGradientSelect=s(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=u.space050;this.alignOffset=0;this.initialFocusVisible=false;this.menuLabel="Menu";this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;const i=this.closeAnimationMs;if(i<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),i)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return m(h.space050,h.space050)}get sideOffsetPx(){return m(this.sideOffset,h.space050)}get alignOffsetPx(){return m(this.alignOffset,0)}get popupFallbackWidthPx(){return m(h.menuWidthXs,h.menuWidthXs)}get popupFallbackHeightPx(){return m(h.menuFallbackHeight,h.menuFallbackHeight)}get closeAnimationMs(){return f(h.motionShort2,h.animationDurationShort3)}finishClose(){this.shouldRender=false;this.closing=false}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>p(i)?[]:i.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=b;const s=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(s)}};this.positionRetryRaf=requestAnimationFrame(s)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;this.pos=v({anchorRect:i.getBoundingClientRect(),popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const s=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:s>=0?s:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const s=this.el.querySelector(".menu-popup");const n=this.resolvedAnchor;if(s?.contains(e)||n?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;const e=this.flatItems;const s=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!s.length)return;const n=s.indexOf(this.focusedIndex);const t=n<0?0:n;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[(t-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":i.preventDefault();this.close();break;case"Tab":i.preventDefault();this.close();break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}render(){if(!this.shouldRender)return n(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return n(t,{style:{display:"contents"}},n("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":this.menuLabel,"aria-orientation":"vertical"},i.map(((s,t)=>n("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":p(s)},role:s.header?"group":undefined,"aria-label":s.header},s.header&&n("ds-text",{class:"section-header ds-control--md",as:"span",variant:"text-body-small",emphasis:true,color:"primary","aria-hidden":"true"},s.header),p(s)?n("ds-shell-gradient-picker",{value:s.value,onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):s.items.map((i=>{const s=e++;const t=this.focusedIndex===s;return n("button",{key:s,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:i.showSwitch?"menuitemcheckbox":"menuitem","aria-checked":i.showSwitch?String(!!i.switchValue):undefined,"aria-current":!i.showSwitch&&i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=s}},n("div",{class:"menu-item__content ds-interaction-fill__content"},n("ds-text",{class:"menu-item__label",as:"span",variant:"text-body-medium",color:i.isSelected?"primary":"secondary"},i.label),i.subtext&&n("ds-text",{class:"menu-item__subtext",as:"span",variant:"text-body-small",color:"secondary"},i.subtext)),i.dot&&n("span",{class:"menu-item__dot-box ds-interaction-fill__content","aria-hidden":"true"},n("ds-badge",{class:"menu-item__dot",variant:"dot",background:i.isSelected&&!i.isInactive?"var(--ds-interaction-active)":"var(--color-background-primary)",label:""})),i.showSwitch&&n("ds-switch",{class:"menu-item__switch ds-interaction-fill__content",size:"sm",checked:!!i.switchValue,presentation:true}))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return g()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],menuLabel:[1,"menu-label"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-badge","ds-shell-gradient-picker","ds-shell-gradient-swatch","ds-switch","ds-text"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),w)}break;case"ds-badge":if(!customElements.get(o(i))){r()}break;case"ds-shell-gradient-picker":if(!customElements.get(o(i))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(i))){c()}break;case"ds-switch":if(!customElements.get(o(i))){d()}break;case"ds-text":if(!customElements.get(o(i))){l()}break}}))}x();export{w as M,x as d};
+//# sourceMappingURL=p-CyMmsNCF.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["computeMenuPosition","input","anchorRect","a","popupWidth","pw","popupHeight","ph","side","align","sideOffsetPx","alignOffsetPx","viewportPadPx","vpPad","viewportWidth","viewportHeight","x","y","top","left","right","width","bottom","height","Math","min","max","isMenuGradientPickerSection","section","variant","menuCss","POSITION_RETRY_BUDGET","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","initialFocusVisible","menuLabel","shouldRender","closing","pos","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","closeAnimationMs","finishClose","setTimeout","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveMotionTimeMs","motionShort2","animationDurationShort3","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","cancelAnimationFrame","onReady","remaining","attempt","calculatePosition","requestAnimationFrame","anchorEl","popup","el","querySelector","getBoundingClientRect","offsetWidth","offsetHeight","window","innerWidth","innerHeight","flat","selectedIdx","findIndex","it","isSelected","isInactive","firstEnabledIdx","btns","querySelectorAll","focus","e","t","target","contains","close","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleKeyDown","enabled","map","i","filter","cur","indexOf","safe","key","preventDefault","stopPropagation","focusItem","idx","handleItemClick","item","dsSelect","handleGradientSelect","preset","dsGradientSelect","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","si","header","undefined","as","emphasis","color","value","onDsChange","detail","isFocused","type","isDestructive","showSwitch","String","switchValue","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","dot","background","size","checked","presentation"],"sources":["src/wc/components/Menu/menu-position.ts","src/wc/components/Menu/menu-types.ts","src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["export type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuPositionInput {\n  anchorRect: Pick<DOMRectReadOnly, 'top' | 'left' | 'right' | 'bottom' | 'width' | 'height'>;\n  popupWidth: number;\n  popupHeight: number;\n  side: MenuSide;\n  align: MenuAlign;\n  sideOffsetPx: number;\n  alignOffsetPx: number;\n  viewportPadPx: number;\n  viewportWidth: number;\n  viewportHeight: number;\n}\n\n/** Pure layout math for ds-menu — anchor rect + placement props → viewport-fixed x/y. */\nexport function computeMenuPosition(input: MenuPositionInput): { x: number; y: number } {\n  const {\n    anchorRect: a,\n    popupWidth: pw,\n    popupHeight: ph,\n    side,\n    align,\n    sideOffsetPx,\n    alignOffsetPx,\n    viewportPadPx: vpPad,\n    viewportWidth,\n    viewportHeight,\n  } = input;\n\n  let x = 0;\n  let y = 0;\n\n  switch (side) {\n    case 'top':\n      y = a.top - ph - sideOffsetPx;\n      x =\n        align === 'start'\n          ? a.left + alignOffsetPx\n          : align === 'end'\n            ? a.right - pw + alignOffsetPx\n            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n      break;\n    case 'bottom':\n      y = a.bottom + sideOffsetPx;\n      x =\n        align === 'start'\n          ? a.left + alignOffsetPx\n          : align === 'end'\n            ? a.right - pw + alignOffsetPx\n            : a.left + a.width / 2 - pw / 2 + alignOffsetPx;\n      break;\n    case 'left':\n      x = a.left - pw - sideOffsetPx;\n      y =\n        align === 'start'\n          ? a.top + alignOffsetPx\n          : align === 'end'\n            ? a.bottom - ph + alignOffsetPx\n            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n      break;\n    case 'right':\n      x = a.right + sideOffsetPx;\n      y =\n        align === 'start'\n          ? a.top + alignOffsetPx\n          : align === 'end'\n            ? a.bottom - ph + alignOffsetPx\n            : a.top + a.height / 2 - ph / 2 + alignOffsetPx;\n      break;\n  }\n\n  return {\n    x: Math.min(Math.max(x, vpPad), viewportWidth - pw - vpPad),\n    y: Math.min(Math.max(y, vpPad), viewportHeight - ph - vpPad),\n  };\n}\n","import type { ShellGradientPreset } from '../../shell/shell-gradient-presets';\n\nexport type { MenuAlign, MenuSide } from './menu-position';\nexport {\n  PANEL_NAV_USER_MENU_PLACEMENT,\n  type MenuPlacement,\n} from './menu-placement';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  /** Show a supplemental brand notification dot. */\n  dot?: boolean;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  /** Render a compact switch indicator; the menu row owns interaction. */\n  showSwitch?: boolean;\n  switchValue?: boolean;\n}\n\nexport interface MenuItemsSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nexport interface MenuGradientPickerSection {\n  header?: string;\n  variant: 'gradient-picker';\n  value: ShellGradientPreset;\n}\n\nexport type MenuSection = MenuItemsSection | MenuGradientPickerSection;\n\nexport function isMenuGradientPickerSection(\n  section: MenuSection,\n): section is MenuGradientPickerSection {\n  return 'variant' in section && section.variant === 'gradient-picker';\n}\n\nexport type { ShellGradientPreset };\n","@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n\n/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: var(--dimension-menu-width-xs);\n  max-width: var(--dimension-panel-width-lg);\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  /* Split elevation: shadow on shell, inset highlight on ::after (combined token clips with overflow:hidden). */\n  box-shadow: var(--effect-shadow-elevated-floating);\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n  /*\n   * Neutralize the host `align` prop. Stencil reflects it as the legacy HTML\n   * `align` attribute, which browsers map to `text-align` on ds-menu. Menu\n   * items already force left; section headers / other content must not inherit\n   * `end` once ds-text is the full-width layout box.\n   */\n  text-align: start;\n}\n\n.menu-popup::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  box-shadow: var(--effect-highlight-elevated-floating);\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-2) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .menu-popup {\n    animation: none;\n    opacity: 1;\n  }\n\n  .menu-popup--closing {\n    opacity: 0;\n  }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-050);\n}\n\n.menu-section--divided {\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\nds-text.section-header {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  /* Same inset as menu-item padding-inline + menu-item__label inset. */\n  padding: 0 calc(\n    var(--ds-control-padding-inline, var(--dimension-space-075)) +\n      var(--ds-control-label-inset, var(--dimension-space-025))\n  );\n  text-align: start;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n/* ── Items (md control-density + interaction-fill + inset focus) ─────────── */\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  width: 100%;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  box-sizing: border-box;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  background: transparent;\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  text-align: left;\n  color: inherit;\n  /* Hover/press/selected: `.ds-interaction-fill` (+ `--selected`). */\n}\n\n/* Subtext rows grow past the density height. */\n.menu-item:has(.menu-item__subtext) {\n  height: auto;\n  min-height: var(--ds-control-height, var(--dimension-size-400));\n  padding-block: var(--ds-control-padding-inline, var(--dimension-space-075));\n  align-items: flex-start;\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n.menu-item--destructive .menu-item__label {\n  /* Beat ds-text color-* host classes for destructive rows. */\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n/* Colors come from ds-text color prop; keep padding on the metric box. */\nds-text.menu-item__label {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n.menu-item__subtext,\nds-text.menu-item__subtext {\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n}\n\n/* Standard md icon zone keeps the dot aligned with other control suffixes. */\n.menu-item__dot-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  pointer-events: none;\n}\n\n/* ── Switch suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__switch {\n  flex-shrink: 0;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveMotionTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\nimport { computeMenuPosition, type MenuAlign, type MenuSide } from './menu-position';\nimport type { MenuItemData, MenuSection } from './menu-types';\nimport { isMenuGradientPickerSection } from './menu-types';\nimport type { ShellGradientPreset } from '../../shell/shell-gradient-presets';\n\n/** rAF retries while the popup mounts or the anchor resolves. */\nconst POSITION_RETRY_BUDGET = 8;\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  /** Gap between anchor and menu — number (px) or TokoMo length (`var(--dimension-space-050)`, etc.). */\n  @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n  /** Cross-axis offset — number (px) or TokoMo length. */\n  @Prop() alignOffset: number | string = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n  /** Show a visible ring on the initially focused menu item. Use only when the opener was keyboard-driven. */\n  @Prop() initialFocusVisible: boolean = false;\n  /** Accessible name for the popup menu. */\n  @Prop() menuLabel: string = 'Menu';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n  @State() private focusRingVisible: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n  /** Emitted when a `gradient-picker` section swatch is chosen. */\n  @Event() dsGradientSelect!: EventEmitter<ShellGradientPreset>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n  private positionRetryRaf: number | null = null;\n  private listenersReady = false;\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.cancelPositionRetry();\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      this.listenersReady = false;\n      this.focusRingVisible = this.initialFocusVisible;\n      this.listenersReady = true;\n      this.setupListeners();\n      this.schedulePositionUpdate(() => {\n        this.focusInitialItem();\n      });\n    } else if (this.shouldRender) {\n      this.cancelPositionRetry();\n      this.closing = true;\n      this.teardownListeners();\n      this.listenersReady = false;\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\n  @Watch('anchor')\n  @Watch('anchorId')\n  onAnchorChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  @Watch('side')\n  @Watch('align')\n  @Watch('sideOffset')\n  @Watch('alignOffset')\n  onPositionPropsChange() {\n    if (this.open) this.schedulePositionUpdate();\n  }\n\n  private get viewportPadPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n  }\n\n  private get sideOffsetPx(): number {\n    return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n  }\n\n  private get alignOffsetPx(): number {\n    return resolveCssLengthPx(this.alignOffset, 0);\n  }\n\n  private get popupFallbackWidthPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n  }\n\n  private get popupFallbackHeightPx(): number {\n    return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    this.shouldRender = false;\n    this.closing = false;\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(section =>\n      isMenuGradientPickerSection(section) ? [] : section.items,\n    );\n  }\n\n  private cancelPositionRetry() {\n    if (this.positionRetryRaf !== null) {\n      cancelAnimationFrame(this.positionRetryRaf);\n      this.positionRetryRaf = null;\n    }\n  }\n\n  /** Retry until anchor + popup exist — do not reveal at 0,0 on a failed first pass. */\n  private schedulePositionUpdate(onReady?: () => void) {\n    if (!this.open) return;\n\n    this.cancelPositionRetry();\n    this.positionReady = false;\n\n    let remaining = POSITION_RETRY_BUDGET;\n\n    const attempt = () => {\n      this.positionRetryRaf = null;\n      if (!this.open) return;\n\n      if (this.calculatePosition()) {\n        this.positionReady = true;\n        onReady?.();\n        return;\n      }\n\n      if (remaining > 0) {\n        remaining -= 1;\n        this.positionRetryRaf = requestAnimationFrame(attempt);\n      }\n    };\n\n    this.positionRetryRaf = requestAnimationFrame(attempt);\n  }\n\n  /** @returns `true` when anchor and popup were found and `pos` was updated. */\n  private calculatePosition(): boolean {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return false;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return false;\n\n    this.pos = computeMenuPosition({\n      anchorRect: anchorEl.getBoundingClientRect(),\n      popupWidth: popup.offsetWidth || this.popupFallbackWidthPx,\n      popupHeight: popup.offsetHeight || this.popupFallbackHeightPx,\n      side: this.side,\n      align: this.align,\n      sideOffsetPx: this.sideOffsetPx,\n      alignOffsetPx: this.alignOffsetPx,\n      viewportPadPx: this.viewportPadPx,\n      viewportWidth: window.innerWidth,\n      viewportHeight: window.innerHeight,\n    });\n    return true;\n  }\n\n  /** Focus the selected item when present, otherwise the first enabled item. */\n  private focusInitialItem() {\n    const flat = this.flatItems;\n    const selectedIdx = flat.findIndex(it => it.isSelected && !it.isInactive);\n    const firstEnabledIdx = flat.findIndex(it => !it.isInactive);\n    this.focusedIndex = selectedIdx >= 0\n      ? selectedIdx\n      : (firstEnabledIdx >= 0 ? firstEnabledIdx : 0);\n\n    requestAnimationFrame(() => {\n      const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n      btns[this.focusedIndex]?.focus();\n    });\n  }\n\n  private setupListeners() {\n    this.clickOutsideHandler = (e: MouseEvent) => {\n      const t = e.target as Node;\n      const popup = this.el.querySelector('.menu-popup');\n      const anchorEl = this.resolvedAnchor;\n      if (popup?.contains(t) || anchorEl?.contains(t)) return;\n      this.close();\n    };\n\n    this.scrollResizeHandler = () => {\n      if (this.shouldRender && !this.closing) this.calculatePosition();\n    };\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n    this.onOpenChange(false);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.shouldRender || this.closing) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusRingVisible = true;\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n  }\n\n  private handleGradientSelect(preset: ShellGradientPreset) {\n    this.dsGradientSelect.emit(preset);\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label={this.menuLabel}\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{\n                'menu-section': true,\n                'menu-section--divided': si < sections.length - 1,\n                'menu-section--gradient-picker': isMenuGradientPickerSection(section),\n              }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <ds-text\n                  class=\"section-header ds-control--md\"\n                  as=\"span\"\n                  variant=\"text-body-small\"\n                  emphasis\n                  color=\"primary\"\n                  aria-hidden=\"true\"\n                >\n                  {section.header}\n                </ds-text>\n              )}\n              {isMenuGradientPickerSection(section) ? (\n                <ds-shell-gradient-picker\n                  value={section.value}\n                  onDsChange={(e: CustomEvent<ShellGradientPreset>) => {\n                    e.stopPropagation();\n                    this.handleGradientSelect(e.detail);\n                  }}\n                />\n              ) : (\n                section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'ds-control--md': true,\n                      'ds-focus-ring-inset': true,\n                      'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                      'ds-interaction-fill': !item.isInactive,\n                      'ds-interaction-fill--selected': !!item.isSelected && !item.isInactive,\n                      'menu-item--selected': !!item.isSelected,\n                      'ds-control-inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role={item.showSwitch ? 'menuitemcheckbox' : 'menuitem'}\n                    aria-checked={item.showSwitch ? String(!!item.switchValue) : undefined}\n                    aria-current={!item.showSwitch && item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onMouseDown={() => { this.focusRingVisible = false; }}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content ds-interaction-fill__content\">\n                      <ds-text\n                        class=\"menu-item__label\"\n                        as=\"span\"\n                        variant=\"text-body-medium\"\n                        color={item.isSelected ? 'primary' : 'secondary'}\n                      >\n                        {item.label}\n                      </ds-text>\n                      {item.subtext && (\n                        <ds-text class=\"menu-item__subtext\" as=\"span\" variant=\"text-body-small\" color=\"secondary\">\n                          {item.subtext}\n                        </ds-text>\n                      )}\n                    </div>\n                    {item.dot && (\n                      <span class=\"menu-item__dot-box ds-interaction-fill__content\" aria-hidden=\"true\">\n                        <ds-badge\n                          class=\"menu-item__dot\"\n                          variant=\"dot\"\n                          background={item.isSelected && !item.isInactive\n                            ? 'var(--ds-interaction-active)'\n                            : 'var(--color-background-primary)'}\n                          label=\"\"\n                        />\n                      </span>\n                    )}\n                    {item.showSwitch && (\n                      <ds-switch\n                        class=\"menu-item__switch ds-interaction-fill__content\"\n                        size=\"sm\"\n                        checked={!!item.switchValue}\n                        presentation\n                      />\n                    )}\n                  </button>\n                );\n              }))}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"names":["SHELL_GRADIENT_PRESETS","SHELL_GRADIENT_WASH_PRESETS","DEFAULT_SHELL_GRADIENT_PRESET","SHELL_GRADIENT_PRESET_LABELS","none","cool","neutral","warm","fresh","SHELL_GRADIENT_RECIPES","opacity","stops","color","position","GRADIENT_GEOMETRY","shellGradientPresetRecipe","preset","normalized","normalizeShellGradientPreset","shellGradientPresetOpacity","String","isShellGradientPreset","value","includes","buildShellRadialGradientForPreset","buildShellRadialGradientFromStops","serialized","map","stop","join"],"sources":["src/wc/nav/shell-gradient-presets.ts"],"sourcesContent":["/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default — without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n"],"mappings":"AAGO,MAAMA,EAAgD,CAC3D,OACA,OACA,UACA,OACA,SAIK,MAAMC,EAAsE,CACjF,OACA,UACA,OACA,SAIK,MAAMC,EAAqD,UAE3D,MAAMC,EAAoE,CAC/EC,KAAM,OACNC,KAAM,OACNC,QAAS,UACTC,KAAM,OACNC,MAAO,SAaT,MAAMC,EAA4F,CAChGJ,KAAM,CACJK,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,mDAAoDC,SAAU,OAG3EP,QAAS,CACPI,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,mDAAoDC,SAAU,OAG3EN,KAAM,CACJG,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,qDAAsDC,SAAU,OAG7EL,MAAO,CACLE,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,kDAAmDC,SAAU,GACtE,CAAED,MAAO,sCAAuCC,SAAU,IAC1D,CAAED,MAAO,sCAAuCC,SAAU,IAC1D,CAAED,MAAO,iDAAkDC,SAAU,IACrE,CAAED,MAAO,kDAAmDC,SAAU,QAK5E,MAAMC,EAAoB,qBAQpB,SAAUC,EAA0BC,GACxC,MAAMC,EAAaC,EAA6BF,GAChD,OAAOC,IAAe,OAAS,KAAOR,EAAuBQ,EAC/D,CAEM,SAAUE,EAA2BH,GACzC,OAAOI,OAAOL,EAA0BC,IAASN,SAAW,EAC9D,CAEM,SAAUW,EAAsBC,GACpC,OAAQtB,EAAoCuB,SAASD,EACvD,CASM,SAAUJ,EACdI,GAEA,OAAOA,GAAS,MAAQD,EAAsBC,GAASA,EAAQpB,CACjE,CAGM,SAAUsB,EAAkCR,GAChD,MAAMC,EAAaC,EAA6BF,GAChD,GAAIC,IAAe,OAAQ,MAAO,OAElC,OAAOQ,EAAkChB,EAAuBQ,GAAYN,MAC9E,CAGM,SAAUc,EAAkCd,GAChD,MAAMe,EAAaf,EAAMgB,KAAIC,GAAQ,GAAGA,EAAKhB,SAASgB,EAAKf,cAAagB,KAAK,MAC7E,MAAO,mBAAmBf,MAAsBY,IAClD,Q","ignoreList":[]}
+{"version":3,"names":["SHELL_GRADIENT_PRESETS","SHELL_GRADIENT_WASH_PRESETS","DEFAULT_SHELL_GRADIENT_PRESET","SHELL_GRADIENT_PRESET_LABELS","none","cool","neutral","warm","fresh","SHELL_GRADIENT_RECIPES","opacity","stops","color","position","GRADIENT_GEOMETRY","shellGradientPresetRecipe","preset","normalized","normalizeShellGradientPreset","shellGradientPresetOpacity","String","isShellGradientPreset","value","includes","buildShellRadialGradientForPreset","buildShellRadialGradientFromStops","serialized","map","stop","join"],"sources":["src/wc/shell/shell-gradient-presets.ts"],"sourcesContent":["/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n  'none',\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n  'cool',\n  'neutral',\n  'warm',\n  'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n  none: 'None',\n  cool: 'Cool',\n  neutral: 'Neutral',\n  warm: 'Warm',\n  fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n  color: string;\n  position: number;\n}\n\nexport interface ShellGradientRecipe {\n  opacity: number;\n  stops: readonly ShellGradientStop[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n  cool: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n    ],\n  },\n  neutral: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n    ],\n  },\n  warm: {\n    opacity: 0.1,\n    stops: [\n      { color: 'var(--color-background-transparent)', position: 0 },\n      { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n    ],\n  },\n  fresh: {\n    opacity: 0.4,\n    stops: [\n      { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n      { color: 'var(--color-background-transparent)', position: 47 },\n      { color: 'var(--color-background-transparent)', position: 58 },\n      { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n      { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n    ],\n  },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n  if (preset === 'none') return null;\n  const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n  return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n  const normalized = normalizeShellGradientPreset(preset);\n  return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n  return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n  return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default — without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n  value: string | null | undefined,\n): ShellGradientPreset {\n  return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n  const normalized = normalizeShellGradientPreset(preset);\n  if (normalized === 'none') return 'none';\n\n  return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n  const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n  return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n"],"mappings":"AAGO,MAAMA,EAAgD,CAC3D,OACA,OACA,UACA,OACA,SAIK,MAAMC,EAAsE,CACjF,OACA,UACA,OACA,SAIK,MAAMC,EAAqD,UAE3D,MAAMC,EAAoE,CAC/EC,KAAM,OACNC,KAAM,OACNC,QAAS,UACTC,KAAM,OACNC,MAAO,SAaT,MAAMC,EAA4F,CAChGJ,KAAM,CACJK,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,mDAAoDC,SAAU,OAG3EP,QAAS,CACPI,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,mDAAoDC,SAAU,OAG3EN,KAAM,CACJG,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,qDAAsDC,SAAU,OAG7EL,MAAO,CACLE,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,kDAAmDC,SAAU,GACtE,CAAED,MAAO,sCAAuCC,SAAU,IAC1D,CAAED,MAAO,sCAAuCC,SAAU,IAC1D,CAAED,MAAO,iDAAkDC,SAAU,IACrE,CAAED,MAAO,kDAAmDC,SAAU,QAK5E,MAAMC,EAAoB,qBAQpB,SAAUC,EAA0BC,GACxC,MAAMC,EAAaC,EAA6BF,GAChD,OAAOC,IAAe,OAAS,KAAOR,EAAuBQ,EAC/D,CAEM,SAAUE,EAA2BH,GACzC,OAAOI,OAAOL,EAA0BC,IAASN,SAAW,EAC9D,CAEM,SAAUW,EAAsBC,GACpC,OAAQtB,EAAoCuB,SAASD,EACvD,CASM,SAAUJ,EACdI,GAEA,OAAOA,GAAS,MAAQD,EAAsBC,GAASA,EAAQpB,CACjE,CAGM,SAAUsB,EAAkCR,GAChD,MAAMC,EAAaC,EAA6BF,GAChD,GAAIC,IAAe,OAAQ,MAAO,OAElC,OAAOQ,EAAkChB,EAAuBQ,GAAYN,MAC9E,CAGM,SAAUc,EAAkCd,GAChD,MAAMe,EAAaf,EAAMgB,KAAIC,GAAQ,GAAGA,EAAKhB,SAASgB,EAAKf,cAAagB,KAAK,MAC7E,MAAO,mBAAmBf,MAAsBY,IAClD,Q","ignoreList":[]}

package/dist/components/{p-DHwtgzjP.js → p-DavEAOUa.js}

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,b as c,s as l,c as d}from"./p-D0B9uDTP.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch-h:focus-visible,.ds-focus-ring.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{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-shell-gradient-swatch-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"23a09d37972b8a65c10e54ee5be2fc64fff45a98"},a("button",{key:"e871793e74533dd57cd93de749ebe0aac7873923",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l(this.preset)},"aria-label":s,role:"radio","aria-checked":this.selected?"true":"false",tabIndex:this.selected?0:-1,disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"764b9625100a398baf399f655951a96e5bb75dcd",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"f95ea1592f476f1c3e3296b17006310ac86efd44",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"2a970706a40f7db3974dce81e0b187b832f7a1eb",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"eef51f150987ce1cd8f2061aebdb253abf72e2fe",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"6f177cb04807f1a540f916c9a88de3433c29775f",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
-//# sourceMappingURL=p-DHwtgzjP.js.map
+import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,b as c,s as l,c as d}from"./p-D0B9uDTP.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch-h:focus-visible,.ds-focus-ring.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{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-shell-gradient-swatch-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"4481a12401f2424ec63047993a2c2e4219a5b86b"},a("button",{key:"bbcbab2a4e9887ba2e18244a69bcc53440a597c5",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l(this.preset)},"aria-label":s,role:"radio","aria-checked":this.selected?"true":"false",tabIndex:this.selected?0:-1,disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"34321837c745a910147e450f20730a9e39f38a68",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"89f1d733e4e0d89eec8b33d1eff26ad885a1ecb1",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"56d769c7925c601657c8c74cb9d00918f5c62531",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"5bb34a8d880ed6fcdaa750f91d6c0bc65ea02604",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"e708ad51c75d8af1279d1897f4e4801228910773",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
+//# sourceMappingURL=p-DavEAOUa.js.map

package/dist/components/{p-DHwtgzjP.js.map → p-DavEAOUa.js.map}

@@ -1 +1 @@
-{"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","isInactive","ariaLabel","handleClick","dsSelect","emit","render","label","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","undefined","buildShellRadialGradientForPreset","shellGradientPresetOpacity","role","tabIndex","disabled","onClick"],"sources":["src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css?tag=ds-shell-gradient-swatch&encapsulation=scoped","src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n *   Default:    fill → border → interaction (hover/press)\n *   Selected:   fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  --_swatch-inner-inset: calc(\n    var(--dimension-stroke-width-025) + var(--dimension-space-025)\n  );\n  --_swatch-ring-bg: var(--color-background-primary);\n  --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.shell-gradient-swatch {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  cursor: pointer;\n  flex-shrink: 0;\n  isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n  z-index: 1;\n  background-color: var(--color-background-secondary);\n  background-image: var(--_swatch-gradient-image);\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 0 0;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n  background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n  opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n  z-index: 3;\n  background: transparent;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion),\n    background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n  z-index: 4;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n  z-index: 5;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n  top: var(--_swatch-inner-inset);\n  right: var(--_swatch-inner-inset);\n  bottom: var(--_swatch-inner-inset);\n  left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n  .shell-gradient-swatch__fill,\n  .shell-gradient-swatch__border,\n  .shell-gradient-swatch__interaction,\n  .shell-gradient-swatch__halo,\n  .shell-gradient-swatch__stroke {\n    transition: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  type ShellGradientPreset,\n} from './shell-gradient-swatch-types';\nimport { shellGradientPresetOpacity } from '../../nav/shell-gradient-presets';\n\n@Component({\n  tag: 'ds-shell-gradient-swatch',\n  styleUrl: 'ShellGradientSwatch.css',\n  scoped: true,\n})\nexport class ShellGradientSwatch {\n  /** Wash preset this orb previews. */\n  @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** Selected — brand stroke + halo over inner fill/border/interaction stack. */\n  @Prop({ reflect: true }) selected = false;\n\n  @Prop() isInactive = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n  private handleClick = () => {\n    if (this.isInactive) return;\n    this.dsSelect.emit(this.preset);\n  };\n\n  render() {\n    const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={{\n            'shell-gradient-swatch': true,\n            'ds-focus-ring-inset': true,\n            'ds-control-inactive': this.isInactive,\n            'shell-gradient-swatch--selected': this.selected,\n            'shell-gradient-swatch--none': this.preset === 'none',\n          }}\n          style={\n            this.preset === 'none'\n              ? undefined\n              : {\n                  '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),\n                  '--ds-shell-gradient-opacity': shellGradientPresetOpacity(this.preset),\n                }\n          }\n          aria-label={label}\n          role=\"radio\"\n          aria-checked={this.selected ? 'true' : 'false'}\n          tabIndex={this.selected ? 0 : -1}\n          disabled={this.isInactive}\n          onClick={this.handleClick}\n        >\n          <span class=\"shell-gradient-swatch__fill\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__border\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__interaction\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__halo\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__stroke\" aria-hidden=\"true\" />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2HAAA,MAAMA,EAAyB,IAAM,k9L,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,WAAa,MAEcJ,KAAAK,UAA2B,KAItDL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,WAAY,OACrBJ,KAAKO,SAASC,KAAKR,KAAKC,OAAO,CAyClC,CAtCC,MAAAQ,GACE,MAAMC,EAAQV,KAAKK,WAAaM,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,sBAAuBhB,KAAKI,WAC5B,kCAAmCJ,KAAKG,SACxC,8BAA+BH,KAAKC,SAAW,QAEjDgB,MACEjB,KAAKC,SAAW,OACZiB,UACA,CACE,2BAA4BC,EAAkCnB,KAAKC,QACnE,8BAA+BmB,EAA2BpB,KAAKC,SAChE,aAEKS,EACZW,KAAK,QAAO,eACErB,KAAKG,SAAW,OAAS,QACvCmB,SAAUtB,KAAKG,SAAW,GAAI,EAC9BoB,SAAUvB,KAAKI,WACfoB,QAASxB,KAAKM,aAEdM,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,SACxDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCAAoC,cAAa,SAC7DJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,U","ignoreList":[]}
+{"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","isInactive","ariaLabel","handleClick","dsSelect","emit","render","label","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","undefined","buildShellRadialGradientForPreset","shellGradientPresetOpacity","role","tabIndex","disabled","onClick"],"sources":["src/wc/components/ShellGradientSwatch/ShellGradientSwatch.css?tag=ds-shell-gradient-swatch&encapsulation=scoped","src/wc/components/ShellGradientSwatch/ShellGradientSwatch.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/control-inactive.css';\n\n/**\n * Swatch — 24×24 orb (size-300). Spacing lives on the picker row.\n *\n * Layer stack (bottom → top):\n *   Default:    fill → border → interaction (hover/press)\n *   Selected:   fill → border → interaction → halo → stroke (brand)\n */\n\n:host {\n  box-sizing: border-box;\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  --_swatch-inner-inset: calc(\n    var(--dimension-stroke-width-025) + var(--dimension-space-025)\n  );\n  --_swatch-ring-bg: var(--color-background-primary);\n  --_swatch-select-motion: var(--effect-motion-short-3);\n}\n\n.shell-gradient-swatch {\n  position: relative;\n  box-sizing: border-box;\n  width: var(--dimension-size-300);\n  height: var(--dimension-size-300);\n  padding: 0;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  background: transparent;\n  cursor: pointer;\n  flex-shrink: 0;\n  isolation: isolate;\n}\n\n.shell-gradient-swatch__fill,\n.shell-gradient-swatch__border,\n.shell-gradient-swatch__interaction,\n.shell-gradient-swatch__halo,\n.shell-gradient-swatch__stroke {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* 1 — fill */\n.shell-gradient-swatch__fill {\n  z-index: 1;\n  background-color: var(--color-background-secondary);\n  background-image: var(--_swatch-gradient-image);\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: 0 0;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--none .shell-gradient-swatch__fill {\n  background-image: none;\n}\n\n.shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill {\n  opacity: var(--ds-shell-gradient-opacity, 0.1);\n}\n\n/* 2 — secondary border (matches ds-interaction-fill--bordered) */\n.shell-gradient-swatch__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-secondary);\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion);\n}\n\n/* 3 — hover / press (over border, under selected chrome) */\n.shell-gradient-swatch__interaction {\n  z-index: 3;\n  background: transparent;\n  transition:\n    top var(--_swatch-select-motion),\n    right var(--_swatch-select-motion),\n    bottom var(--_swatch-select-motion),\n    left var(--_swatch-select-motion),\n    background-color 0s;\n}\n\n.shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-hover);\n}\n\n.shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction {\n  background: var(--color-interaction-pressed);\n}\n\n/* 4 — halo gap (selected only) */\n.shell-gradient-swatch__halo {\n  z-index: 4;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n/* 5 — brand stroke (selected only) */\n.shell-gradient-swatch__stroke {\n  z-index: 5;\n  opacity: 0;\n  transform: scale(1.2);\n  transform-origin: center;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n  transition:\n    opacity var(--_swatch-select-motion),\n    transform var(--_swatch-select-motion);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__fill,\n.shell-gradient-swatch--selected .shell-gradient-swatch__border,\n.shell-gradient-swatch--selected .shell-gradient-swatch__interaction {\n  top: var(--_swatch-inner-inset);\n  right: var(--_swatch-inner-inset);\n  bottom: var(--_swatch-inner-inset);\n  left: var(--_swatch-inner-inset);\n}\n\n.shell-gradient-swatch--selected .shell-gradient-swatch__halo,\n.shell-gradient-swatch--selected .shell-gradient-swatch__stroke {\n  opacity: 1;\n  transform: scale(1);\n}\n\n/* Inactive: `.ds-control-inactive` (25% opacity). */\n\n@media (prefers-reduced-motion: reduce) {\n  .shell-gradient-swatch__fill,\n  .shell-gradient-swatch__border,\n  .shell-gradient-swatch__interaction,\n  .shell-gradient-swatch__halo,\n  .shell-gradient-swatch__stroke {\n    transition: none;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  type ShellGradientPreset,\n} from './shell-gradient-swatch-types';\nimport { shellGradientPresetOpacity } from '../../shell/shell-gradient-presets';\n\n@Component({\n  tag: 'ds-shell-gradient-swatch',\n  styleUrl: 'ShellGradientSwatch.css',\n  scoped: true,\n})\nexport class ShellGradientSwatch {\n  /** Wash preset this orb previews. */\n  @Prop({ reflect: true }) preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** Selected — brand stroke + halo over inner fill/border/interaction stack. */\n  @Prop({ reflect: true }) selected = false;\n\n  @Prop() isInactive = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n\n  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n  private handleClick = () => {\n    if (this.isInactive) return;\n    this.dsSelect.emit(this.preset);\n  };\n\n  render() {\n    const label = this.ariaLabel ?? SHELL_GRADIENT_PRESET_LABELS[this.preset];\n\n    return (\n      <Host>\n        <button\n          type=\"button\"\n          class={{\n            'shell-gradient-swatch': true,\n            'ds-focus-ring-inset': true,\n            'ds-control-inactive': this.isInactive,\n            'shell-gradient-swatch--selected': this.selected,\n            'shell-gradient-swatch--none': this.preset === 'none',\n          }}\n          style={\n            this.preset === 'none'\n              ? undefined\n              : {\n                  '--_swatch-gradient-image': buildShellRadialGradientForPreset(this.preset),\n                  '--ds-shell-gradient-opacity': shellGradientPresetOpacity(this.preset),\n                }\n          }\n          aria-label={label}\n          role=\"radio\"\n          aria-checked={this.selected ? 'true' : 'false'}\n          tabIndex={this.selected ? 0 : -1}\n          disabled={this.isInactive}\n          onClick={this.handleClick}\n        >\n          <span class=\"shell-gradient-swatch__fill\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__border\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__interaction\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__halo\" aria-hidden=\"true\" />\n          <span class=\"shell-gradient-swatch__stroke\" aria-hidden=\"true\" />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2HAAA,MAAMA,EAAyB,IAAM,k9L,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,WAAa,MAEcJ,KAAAK,UAA2B,KAItDL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,WAAY,OACrBJ,KAAKO,SAASC,KAAKR,KAAKC,OAAO,CAyClC,CAtCC,MAAAQ,GACE,MAAMC,EAAQV,KAAKK,WAAaM,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,sBAAuBhB,KAAKI,WAC5B,kCAAmCJ,KAAKG,SACxC,8BAA+BH,KAAKC,SAAW,QAEjDgB,MACEjB,KAAKC,SAAW,OACZiB,UACA,CACE,2BAA4BC,EAAkCnB,KAAKC,QACnE,8BAA+BmB,EAA2BpB,KAAKC,SAChE,aAEKS,EACZW,KAAK,QAAO,eACErB,KAAKG,SAAW,OAAS,QACvCmB,SAAUtB,KAAKG,SAAW,GAAI,EAC9BoB,SAAUvB,KAAKI,WACfoB,QAASxB,KAAKM,aAEdM,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,SACxDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCAAoC,cAAa,SAC7DJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,8BAA6B,cAAa,SACtDJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,gCAA+B,cAAa,U","ignoreList":[]}