@ds-mo/ui 2.11.2 → 2.12.0

package/dist/components/p-BSFgy5r6.js

@@ -1,2 +0,0 @@
-import{p as o,H as n,c as i,h as t,a as r,t as e}from"./index.js";import{d as s}from"./p-EK1hOP19.js";import{d as c}from"./p-8Nt92j1-.js";const d=()=>`.sc-ds-button-unfilled-icon-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled-icon:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled-icon{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled-icon:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled-icon:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled-icon::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-button-unfilled-icon-h{display:inline-flex;flex:0 0 auto;width:var(--dimension-size-400);height:var(--dimension-size-400);min-width:var(--dimension-size-400);min-height:var(--dimension-size-400);outline:none;--ds-button-unfilled-icon-fg:var(--color-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-secondary);--ds-button-unfilled-icon-border:var(--color-border-tertiary)}.button-icon.sc-ds-button-unfilled-icon{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);color:var(--ds-button-unfilled-icon-fg);cursor:pointer;box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-icon.sc-ds-button-unfilled-icon::before,.button-icon.sc-ds-button-unfilled-icon::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.button-icon.sc-ds-button-unfilled-icon::before{z-index:1}.button-icon.sc-ds-button-unfilled-icon::after{z-index:2}.button-icon--active-fill.sc-ds-button-unfilled-icon::before{background:var(--ds-button-unfilled-icon-active-bg)}.button-icon.sc-ds-button-unfilled-icon:hover:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-hover-bg);transition:none}.button-icon.sc-ds-button-unfilled-icon:active:not(.button-icon--inactive)::after{background:var(--ds-button-unfilled-icon-pressed-bg);transition:none}.button-icon--active.sc-ds-button-unfilled-icon{color:var(--ds-button-unfilled-icon-fg-active)}.button-icon--bordered.sc-ds-button-unfilled-icon{box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--ds-button-unfilled-icon-border)}.button-icon--inactive.sc-ds-button-unfilled-icon{opacity:0.5;cursor:not-allowed;pointer-events:none}.button-icon--contrast-medium.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-medium-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-medium-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-medium-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-icon-border:var(--color-border-on-medium-background-tertiary);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.button-icon--contrast-bold.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-bold-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-bold-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-bold-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-icon-border:var(--color-border-on-bold-background-tertiary);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.button-icon--contrast-strong.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-icon-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-icon-active-bg:var(--color-interaction-on-strong-background-active);--ds-button-unfilled-icon-hover-bg:var(--color-interaction-on-strong-background-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-interaction-on-strong-background-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-icon-border:var(--color-border-on-strong-background-tertiary);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.button-icon--on-always-dark.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-always-dark-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-always-dark-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-always-dark-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.button-icon--on-navigation.sc-ds-button-unfilled-icon{--ds-button-unfilled-icon-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-icon-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-icon-active-bg:var(--color-navigation-interaction-active);--ds-button-unfilled-icon-hover-bg:var(--color-navigation-interaction-hover);--ds-button-unfilled-icon-pressed-bg:var(--color-navigation-interaction-pressed);--ds-button-unfilled-icon-dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.button-icon__icon-wrap.sc-ds-button-unfilled-icon{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-icon__dot.sc-ds-button-unfilled-icon{position:absolute;top:0;right:0;pointer-events:none}`;const a=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClick=i(this,"dsClick");this.dsChange=i(this,"dsChange");this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=false;this.dot=false;this.inactive=false;this.type="button";this.ariaLabel="action";this.buttonEl=null;this.handleClick=o=>{if(this.inactive)return;this.dsClick.emit(o);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}render(){const o=this.background;const n=this.effectiveContrast();const i={"button-icon":true,"ds-focus-ring-inset":true,"button-icon--active":this.isActive,"button-icon--active-fill":this.isActive&&this.activeFill,"button-icon--bordered":this.hasBorder,"button-icon--inactive":this.inactive,"button-icon--contrast-medium":n==="medium","button-icon--contrast-bold":n==="bold","button-icon--contrast-strong":n==="strong","button-icon--on-always-dark":o==="always-dark","button-icon--on-navigation":o==="navigation"};return t(r,{key:"ec89ac359f7d3e446e6c9e7590e7ebdd749853d2",tabIndex:-1},t("button",{key:"ba0e4c4a841917fd82e05b15f2a29c35e4261c19",ref:o=>{this.buttonEl=o??null},type:this.type,class:i,disabled:this.inactive,tabIndex:this.focusTabIndex??0,"aria-label":this.ariaLabel,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},t("span",{key:"4ae9fef28410d70600d1d4f1716977da2580ff44",class:"button-icon__icon-wrap"},t("ds-icon",{key:"71669e8aec551277ce8ef3b5c4513b0735114133",name:this.icon,size:"md",color:"inherit"}),this.dot&&t("ds-badge",{key:"35e245c613bb8f32519a351624860b757b8eb863",class:"button-icon__dot",variant:"dot",background:"var(--ds-button-unfilled-icon-dot-ring)",label:"","aria-hidden":"true"}))))}get el(){return this}static get style(){return d()}},[2,"ds-button-unfilled-icon",{icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],inactive:[4],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-button-unfilled-icon","ds-badge","ds-icon"];o.forEach((o=>{switch(o){case"ds-button-unfilled-icon":if(!customElements.get(e(o))){customElements.define(e(o),a)}break;case"ds-badge":if(!customElements.get(e(o))){s()}break;case"ds-icon":if(!customElements.get(e(o))){c()}break}}))}u();export{a as B,u as d};
-//# sourceMappingURL=p-BSFgy5r6.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["buttonUnfilledIconCss","ButtonUnfilledIcon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","isActive","activeFill","hasBorder","dot","inactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","effectiveContrast","backgroundContrast","render","bg","background","contrast","cls","h","Host","key","tabIndex","ref","el","class","disabled","focusTabIndex","controls","expanded","undefined","String","haspopup","pressed","onClick","name","size","color","variant","label"],"sources":["src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.css?tag=ds-button-unfilled-icon&encapsulation=scoped","src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  min-height: var(--dimension-size-400);\n  outline: none;\n  --ds-button-unfilled-icon-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-icon-border: var(--color-border-tertiary);\n}\n\n.button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  color: var(--ds-button-unfilled-icon-fg);\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.button-icon::before,\n.button-icon::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n/* Layer stack (bottom → top): active fill → hover/press (over border). */\n.button-icon::before {\n  z-index: 1;\n}\n\n.button-icon::after {\n  z-index: 2;\n}\n\n.button-icon--active-fill::before {\n  background: var(--ds-button-unfilled-icon-active-bg);\n}\n\n.button-icon:hover:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-hover-bg);\n  transition: none;\n}\n\n.button-icon:active:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-pressed-bg);\n  transition: none;\n}\n\n.button-icon--active {\n  color: var(--ds-button-unfilled-icon-fg-active);\n}\n\n.button-icon--bordered {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--ds-button-unfilled-icon-border);\n}\n\n.button-icon--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-icon--contrast-medium {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-medium-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-medium-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-icon-border: var(--color-border-on-medium-background-tertiary);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.button-icon--contrast-bold {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-bold-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-bold-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-icon-border: var(--color-border-on-bold-background-tertiary);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n}\n\n.button-icon--contrast-strong {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-strong-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-strong-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-icon-border: var(--color-border-on-strong-background-tertiary);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n}\n\n.button-icon--on-always-dark {\n  --ds-button-unfilled-icon-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-always-dark-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-always-dark-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-always-dark-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n}\n\n.button-icon--on-navigation {\n  --ds-button-unfilled-icon-fg: var(--color-navigation-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-navigation-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-navigation-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-navigation-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-navigation-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.button-icon__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: 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-icon__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type ButtonUnfilledIconOnBackgroundContrast = 'default' | 'medium' | 'bold' | 'strong';\n\nexport type ButtonUnfilledIconBackground = 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-button-unfilled-icon',\n  styleUrl: 'ButtonUnfilledIcon.css',\n  scoped: true,\n})\nexport class ButtonUnfilledIcon {\n  @Element() el!: HTMLElement;\n\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. */\n  @Prop() isActive: boolean = false;\n\n  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px tertiary border without changing the interaction model. */\n  @Prop() hasBorder: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Foreground and interaction tokens when the button sits on a contrasting parent\n   * background (default, medium, bold, or strong).\n   */\n  @Prop({ attribute: 'on-background-contrast' })\n  backgroundContrast?: ButtonUnfilledIconOnBackgroundContrast;\n\n  /** Parent surface context for navigation and always-dark chrome. */\n  @Prop() background: ButtonUnfilledIconBackground | undefined;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: string | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.inactive) return;\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  private effectiveContrast(): ButtonUnfilledIconOnBackgroundContrast {\n    return this.backgroundContrast ?? 'default';\n  }\n\n  render() {\n    const bg = this.background;\n    const contrast = this.effectiveContrast();\n\n    const cls: Record<string, boolean> = {\n      'button-icon': true,\n      'ds-focus-ring-inset': true,\n      'button-icon--active': this.isActive,\n      'button-icon--active-fill': this.isActive && this.activeFill,\n      'button-icon--bordered': this.hasBorder,\n      'button-icon--inactive': this.inactive,\n      'button-icon--contrast-medium': contrast === 'medium',\n      'button-icon--contrast-bold': contrast === 'bold',\n      'button-icon--contrast-strong': contrast === 'strong',\n      'button-icon--on-always-dark': bg === 'always-dark',\n      'button-icon--on-navigation': bg === 'navigation',\n    };\n\n    return (\n      <Host tabIndex={-1}>\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.inactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.ariaLabel}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          <span class=\"button-icon__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"button-icon__dot\"\n                variant=\"dot\"\n                background=\"var(--ds-button-unfilled-icon-dot-ring)\"\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAwB,IAAM,wyN,MCWvBC,EAAkBC,EAAA,MAAAD,UAAAE,EAL/B,WAAAC,CAAAC,G,4GASUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,WAAsB,KAGtBH,KAAAI,UAAqB,MAGrBJ,KAAAK,IAAe,MAGfL,KAAAM,SAAoB,MAGpBN,KAAAO,KAAsC,SAYXP,KAAAQ,UAAoB,SAe/CR,KAAAS,SAAqC,KAOrCT,KAAAU,YAAeC,IACrB,GAAIX,KAAKM,SAAU,OACnBN,KAAKY,QAAQC,KAAKF,GAClBX,KAAKc,SAASD,MAAMb,KAAKE,SAAS,CA0DrC,CAjEC,cAAMa,GACJf,KAAKS,UAAUO,O,CAST,iBAAAC,GACN,OAAOjB,KAAKkB,oBAAsB,S,CAGpC,MAAAC,GACE,MAAMC,EAAKpB,KAAKqB,WAChB,MAAMC,EAAWtB,KAAKiB,oBAEtB,MAAMM,EAA+B,CACnC,cAAe,KACf,sBAAuB,KACvB,sBAAuBvB,KAAKE,SAC5B,2BAA4BF,KAAKE,UAAYF,KAAKG,WAClD,wBAAyBH,KAAKI,UAC9B,wBAAyBJ,KAAKM,SAC9B,+BAAgCgB,IAAa,SAC7C,6BAA8BA,IAAa,OAC3C,+BAAgCA,IAAa,SAC7C,8BAA+BF,IAAO,cACtC,6BAA8BA,IAAO,cAGvC,OACEI,EAACC,EAAI,CAAAC,IAAA,2CAACC,UAAU,GACdH,EAAA,UAAAE,IAAA,2CACEE,IAAKC,IACH7B,KAAKS,SAAWoB,GAAM,IAAI,EAE5BtB,KAAMP,KAAKO,KACXuB,MAAOP,EACPQ,SAAU/B,KAAKM,SACfqB,SAAU3B,KAAKgC,eAAiB,EAAC,aACrBhC,KAAKQ,UAAS,gBACXR,KAAKiC,SAAQ,gBACbjC,KAAKkC,WAAaC,UAAYA,UAAYC,OAAOpC,KAAKkC,UAAS,gBAC/DlC,KAAKqC,SAAQ,eACdrC,KAAKsC,UAAYH,UAAYA,UAAYC,OAAOpC,KAAKsC,SACnEC,QAASvC,KAAKU,aAEdc,EAAA,QAAAE,IAAA,2CAAMI,MAAM,0BACVN,EAAA,WAAAE,IAAA,2CAASc,KAAMxC,KAAKC,KAAMwC,KAAK,KAAKC,MAAM,YACzC1C,KAAKK,KACJmB,EAAA,YAAAE,IAAA,2CACEI,MAAM,mBACNa,QAAQ,MACRtB,WAAW,0CACXuB,MAAM,GAAE,cACI,W","ignoreList":[]}

package/dist/components/p-CBUIn8dk.js

@@ -1,2 +0,0 @@
-const e="--ds-scroll-edge-fade-size";const i={"size-000":"var(--dimension-size-000)","size-050":"var(--dimension-size-050)","size-075":"var(--dimension-size-075)","size-100":"var(--dimension-size-100)","size-150":"var(--dimension-size-150)","size-200":"var(--dimension-size-200)","size-250":"var(--dimension-size-250)","size-300":"var(--dimension-size-300)","size-400":"var(--dimension-size-400)","size-500":"var(--dimension-size-500)","size-600":"var(--dimension-size-600)","size-800":"var(--dimension-size-800)"};function s(e="size-600",s){if(s)return s;return Object.prototype.hasOwnProperty.call(i,e)?i[e]:e}function n(i="size-600",n){return{[e]:s(i,n)}}function r(e){const i=Array.isArray(e.edges)?e.edges:[e.edges];const s={"scroll-edge-fade":true,"scroll-edge-fade--hidden":e.hidden===true};for(const e of i){s[`scroll-edge-fade--${e}`]=true}const{atEnd:n}=e;if(n===true){s["scroll-edge-fade--at-end"]=true}else if(n&&typeof n==="object"){const e=i.every((e=>n[e]));if(e){s["scroll-edge-fade--at-end"]=true}}return s}export{r as a,n as s};
-//# sourceMappingURL=p-CBUIn8dk.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["SCROLL_EDGE_FADE_SIZE_VAR","SIZE_VALUE","resolveScrollEdgeFadeSize","size","height","Object","prototype","hasOwnProperty","call","scrollEdgeFadeSizeStyle","scrollEdgeFadeClassMap","opts","edges","Array","isArray","classes","hidden","edge","atEnd","allAtEnd","every"],"sources":["src/wc/utils/scroll-edge-fade.ts"],"sourcesContent":["/** CSS custom property for scroll-edge fade depth (dimension token or length). */\nexport const SCROLL_EDGE_FADE_SIZE_VAR = '--ds-scroll-edge-fade-size';\n\nexport const SCROLL_EDGE_FADE_DEFAULT_SIZE = 'var(--dimension-size-600)';\n\nexport type ScrollEdgeFadeEdge = 'top' | 'bottom' | 'left' | 'right';\n\nexport type ScrollEdgeFadeSizeToken =\n  | 'size-000'\n  | 'size-050'\n  | 'size-075'\n  | 'size-100'\n  | 'size-150'\n  | 'size-200'\n  | 'size-250'\n  | 'size-300'\n  | 'size-400'\n  | 'size-500'\n  | 'size-600'\n  | 'size-800';\n\nexport type ScrollEdgeFadeSize = ScrollEdgeFadeSizeToken | (string & {});\n\nconst SIZE_VALUE: Record<ScrollEdgeFadeSizeToken, string> = {\n  'size-000': 'var(--dimension-size-000)',\n  'size-050': 'var(--dimension-size-050)',\n  'size-075': 'var(--dimension-size-075)',\n  'size-100': 'var(--dimension-size-100)',\n  'size-150': 'var(--dimension-size-150)',\n  'size-200': 'var(--dimension-size-200)',\n  'size-250': 'var(--dimension-size-250)',\n  'size-300': 'var(--dimension-size-300)',\n  'size-400': 'var(--dimension-size-400)',\n  'size-500': 'var(--dimension-size-500)',\n  'size-600': 'var(--dimension-size-600)',\n  'size-800': 'var(--dimension-size-800)',\n};\n\nconst SIZE_REF = `var(${SCROLL_EDGE_FADE_SIZE_VAR}, ${SCROLL_EDGE_FADE_DEFAULT_SIZE})`;\n\nexport interface ScrollEdgeFadeOptions {\n  /** One or more edges to fade. */\n  edges: ScrollEdgeFadeEdge | ScrollEdgeFadeEdge[];\n  /**\n   * When true, or when every listed edge is at its scroll limit, removes the mask.\n   * Pass a per-edge map to hide only the edges that are flush (panel-nav bottom fade).\n   */\n  atEnd?: boolean | Partial<Record<ScrollEdgeFadeEdge, boolean>>;\n  /** Force the mask off regardless of scroll position (`ds-fade` `visible={false}`). */\n  hidden?: boolean;\n}\n\n/** Resolve a dimension size token name or raw CSS length for `--ds-scroll-edge-fade-size`. */\nexport function resolveScrollEdgeFadeSize(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): string {\n  if (height) return height;\n  return Object.prototype.hasOwnProperty.call(SIZE_VALUE, size)\n    ? SIZE_VALUE[size as ScrollEdgeFadeSizeToken]\n    : size;\n}\n\n/** Inline style map setting fade depth on a scroll container. */\nexport function scrollEdgeFadeSizeStyle(\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): Record<string, string> {\n  return {\n    [SCROLL_EDGE_FADE_SIZE_VAR]: resolveScrollEdgeFadeSize(size, height),\n  };\n}\n\n/**\n * Alpha mask for a scroll container edge — content fades to transparent so\n * textured backgrounds (shell gradients, images) show through.\n */\nexport function scrollEdgeFadeMaskImage(edge: ScrollEdgeFadeEdge): string {\n  switch (edge) {\n    case 'top':\n      return `linear-gradient(to bottom, #000 0, #000 50%, transparent 100%)`;\n    case 'bottom':\n      return `linear-gradient(to bottom, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'left':\n      return `linear-gradient(to right, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n    case 'right':\n      return `linear-gradient(to left, #000 0, #000 calc(100% - ${SIZE_REF}), transparent 100%)`;\n  }\n}\n\n/** Inline style map for a masked scroll region (single edge). */\nexport function scrollEdgeFadeMaskStyle(\n  edge: ScrollEdgeFadeEdge,\n  size: ScrollEdgeFadeSize = 'size-600',\n  height?: string,\n): Record<string, string> {\n  const mask = scrollEdgeFadeMaskImage(edge);\n  return {\n    ...scrollEdgeFadeSizeStyle(size, height),\n    WebkitMaskImage: mask,\n    maskImage: mask,\n    WebkitMaskSize: '100% 100%',\n    maskSize: '100% 100%',\n  };\n}\n\n/** Class map for `scroll-edge-fade` modifiers — pair with `scroll-edge-fade.css`. */\nexport function scrollEdgeFadeClassMap(opts: ScrollEdgeFadeOptions): Record<string, boolean> {\n  const edges = Array.isArray(opts.edges) ? opts.edges : [opts.edges];\n  const classes: Record<string, boolean> = {\n    'scroll-edge-fade': true,\n    'scroll-edge-fade--hidden': opts.hidden === true,\n  };\n\n  for (const edge of edges) {\n    classes[`scroll-edge-fade--${edge}`] = true;\n  }\n\n  const { atEnd } = opts;\n  if (atEnd === true) {\n    classes['scroll-edge-fade--at-end'] = true;\n  } else if (atEnd && typeof atEnd === 'object') {\n    const allAtEnd = edges.every(edge => atEnd[edge]);\n    if (allAtEnd) {\n      classes['scroll-edge-fade--at-end'] = true;\n    }\n  }\n\n  return classes;\n}\n\n/** Whether a scroll container is flush with the given edge (within `threshold` px). */\nexport function isScrollAtEdge(\n  el: HTMLElement,\n  edge: ScrollEdgeFadeEdge,\n  threshold = 2,\n): boolean {\n  switch (edge) {\n    case 'top':\n      return el.scrollTop <= threshold;\n    case 'bottom':\n      return el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n    case 'left':\n      return el.scrollLeft <= threshold;\n    case 'right':\n      return el.scrollWidth - el.scrollLeft - el.clientWidth <= threshold;\n  }\n}\n"],"mappings":"AACO,MAAMA,EAA4B,6BAsBzC,MAAMC,EAAsD,CAC1D,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,4BACZ,WAAY,6B,SAkBEC,EACdC,EAA2B,WAC3BC,GAEA,GAAIA,EAAQ,OAAOA,EACnB,OAAOC,OAAOC,UAAUC,eAAeC,KAAKP,EAAYE,GACpDF,EAAWE,GACXA,CACN,C,SAGgBM,EACdN,EAA2B,WAC3BC,GAEA,MAAO,CACLJ,CAACA,GAA4BE,EAA0BC,EAAMC,GAEjE,CAoCM,SAAUM,EAAuBC,GACrC,MAAMC,EAAQC,MAAMC,QAAQH,EAAKC,OAASD,EAAKC,MAAQ,CAACD,EAAKC,OAC7D,MAAMG,EAAmC,CACvC,mBAAoB,KACpB,2BAA4BJ,EAAKK,SAAW,MAG9C,IAAK,MAAMC,KAAQL,EAAO,CACxBG,EAAQ,qBAAqBE,KAAU,I,CAGzC,MAAMC,MAAEA,GAAUP,EAClB,GAAIO,IAAU,KAAM,CAClBH,EAAQ,4BAA8B,I,MACjC,GAAIG,UAAgBA,IAAU,SAAU,CAC7C,MAAMC,EAAWP,EAAMQ,OAAMH,GAAQC,EAAMD,KAC3C,GAAIE,EAAU,CACZJ,EAAQ,4BAA8B,I,EAI1C,OAAOA,CACT,Q","ignoreList":[]}

package/dist/components/p-ChVwCVHy.js

@@ -1,2 +0,0 @@
-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,a as c,b as l,c as d}from"./p-Bz3jyrDV.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: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{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:focus-visible{outline:none}.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{outline:none}.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))}.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-tertiary);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)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:disabled{opacity:0.5;cursor:not-allowed}@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.inactive=false;this.handleClick=()=>{if(this.inactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"451155ab631ab5bb27d26fb35c84f6a6736052da"},a("button",{key:"75cba8c39e4c87e32279a84daee179b7267bb8bf",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"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},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.inactive,onClick:this.handleClick},a("span",{key:"67ed3063a6c9f8907b99015141e64f018e91c165",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"9a57337e8080e3794aa47beb23d2e570d32e4313",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"dcbdeedef9f40890783ac91d7095741e1a09ba7b",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"9c9ff577d8d2d3adbfe512816d1205433c5bffca",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"b8bf4a75b38eab7013879efe42eb2c7929e34a3a",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],inactive:[4],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-ChVwCVHy.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["shellGradientSwatchCss","ShellGradientSwatch","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","preset","DEFAULT_SHELL_GRADIENT_PRESET","selected","inactive","handleClick","dsSelect","emit","render","label","ariaLabel","SHELL_GRADIENT_PRESET_LABELS","h","Host","key","type","class","style","undefined","buildShellRadialGradientForPreset","SHELL_GRADIENT_OPACITY","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\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 — tertiary border */\n.shell-gradient-swatch__border {\n  z-index: 2;\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\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.shell-gradient-swatch:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\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 { SHELL_GRADIENT_OPACITY } from '../../nav/shell-gradient';\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() inactive = false;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n\n  @Event() dsSelect!: EventEmitter<ShellGradientPreset>;\n\n  private handleClick = () => {\n    if (this.inactive) 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            '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': SHELL_GRADIENT_OPACITY,\n                }\n          }\n          aria-label={label}\n          aria-pressed={this.selected ? 'true' : 'false'}\n          disabled={this.inactive}\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,i/K,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO2BC,KAAAC,OAA8BC,EAG9BF,KAAAG,SAAW,MAE5BH,KAAAI,SAAW,MAMXJ,KAAAK,YAAc,KACpB,GAAIL,KAAKI,SAAU,OACnBJ,KAAKM,SAASC,KAAKP,KAAKC,OAAO,CAsClC,CAnCC,MAAAO,GACE,MAAMC,EAAQT,KAAKU,WAAaC,EAA6BX,KAAKC,QAElE,OACEW,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CACEC,KAAK,SACLC,MAAO,CACL,wBAAyB,KACzB,sBAAuB,KACvB,kCAAmChB,KAAKG,SACxC,8BAA+BH,KAAKC,SAAW,QAEjDgB,MACEjB,KAAKC,SAAW,OACZiB,UACA,CACE,2BAA4BC,EAAkCnB,KAAKC,QACnE,8BAA+BmB,GAChC,aAEKX,EAAK,eACHT,KAAKG,SAAW,OAAS,QACvCkB,SAAUrB,KAAKI,SACfkB,QAAStB,KAAKK,aAEdO,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":[]}

package/dist/components/p-CpNIQXz6.js

@@ -1,2 +0,0 @@
-import{p as e,H as s,c as i,h as t,a as n,t as o}from"./index.js";import{d as r}from"./p-DdFUTZ3y.js";import{d as a}from"./p-ChVwCVHy.js";import{a as d,T as c}from"./p-bDf6yBQd.js";import{r as u}from"./p-BWUTr_XN.js";import{r as l}from"./p-C1cBr-Ri.js";function h(e){const{anchorRect:s,popupWidth:i,popupHeight:t,side:n,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:u}=e;let l=0;let h=0;switch(n){case"top":h=s.top-t-r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"bottom":h=s.bottom+r;l=o==="start"?s.left+a:o==="end"?s.right-i+a:s.left+s.width/2-i/2+a;break;case"left":l=s.left-i-r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break;case"right":l=s.right+r;h=o==="start"?s.top+a:o==="end"?s.bottom-t+a:s.top+s.height/2-t/2+a;break}return{x:Math.min(Math.max(l,d),c-i-d),y:Math.min(Math.max(h,d),u-t-d)}}function m(e){return"variant"in e&&e.variant==="gradient-picker"}const f=()=>`.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: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{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:focus-visible{outline:none}.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{outline:none}.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))}.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}.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}}.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)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-075);-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative;width:100%;min-height:var(--dimension-size-400);padding:var(--dimension-space-075);box-sizing:border-box;border:none;border-radius:var(--dimension-radius-025);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_selected-bg:var(--color-interaction-active)}.menu-item.sc-ds-menu:has(.menu-item__subtext){align-items:flex-start}.menu-item.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.menu-item--selected.sc-ds-menu::after{background:var(--_selected-bg);transition:none}.menu-item.sc-ds-menu:hover:not(:disabled):not(.menu-item--selected)::after{background:var(--_hover-bg);transition:none}.menu-item.sc-ds-menu:active:not(:disabled)::after{background:var(--_pressed-bg);transition:none}.menu-item--inactive.sc-ds-menu{opacity:0.5;cursor:not-allowed;pointer-events:none}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{position:relative;z-index:1;display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--dimension-space-025);color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;z-index:1;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const p=8;const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=i(this,"dsClose");this.dsSelect=i(this,"dsSelect");this.dsGradientSelect=i(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;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(e){if(e){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;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return u(c.space050,c.space050)}get sideOffsetPx(){return u(this.sideOffset,c.space050)}get alignOffsetPx(){return u(this.alignOffset,0)}get popupFallbackWidthPx(){return u(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return u(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return l(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>m(e)?[]:e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let s=p;const i=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(s>0){s-=1;this.positionRetryRaf=requestAnimationFrame(i)}};this.positionRetryRaf=requestAnimationFrame(i)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const s=this.el.querySelector(".menu-popup");if(!s)return false;this.pos=h({anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth||this.popupFallbackWidthPx,popupHeight:s.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 e=this.flatItems;const s=e.findIndex((e=>e.isSelected&&!e.isInactive));const i=e.findIndex((e=>!e.isInactive));this.focusedIndex=s>=0?s:i>=0?i:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const s=e.target;const i=this.el.querySelector(".menu-popup");const t=this.resolvedAnchor;if(i?.contains(s)||t?.contains(s))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(e){if(!this.shouldRender||this.closing)return;const s=this.flatItems;const i=s.map(((e,s)=>({it:e,i:s}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!i.length)return;const t=i.indexOf(this.focusedIndex);const n=t<0?0:t;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n+1)%i.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[(n-1+i.length)%i.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=i[i.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const s=this.el.querySelectorAll(".menu-item");s[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e)}handleGradientSelect(e){this.dsGradientSelect.emit(e)}render(){if(!this.shouldRender)return t(n,{style:{display:"contents"}});const e=this.activeSections;let s=0;const i={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)i["width"]=this.menuWidth;if(this.minWidth)i["min-width"]=this.minWidth;return t(n,{style:{display:"contents"}},t("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:i,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((i,n)=>t("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1,"menu-section--gradient-picker":m(i)},role:i.header?"group":undefined,"aria-label":i.header},i.header&&t("div",{class:"section-header","aria-hidden":"true"},t("span",{class:"text-body-small-emphasis section-label"},i.header)),m(i)?t("ds-shell-gradient-picker",{value:i.value,onDsChange:e=>{e.stopPropagation();this.handleGradientSelect(e.detail)}}):i.items.map((e=>{const i=s++;const n=this.focusedIndex===i;return t("button",{key:i,type:"button",class:{"menu-item":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":n&&this.focusRingVisible,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=i}},t("div",{class:"menu-item__content"},t("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&t("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&t("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},t("div",{class:"menu-item__toggle-thumb"})))})))))))}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 f()}},[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"],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 v(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),g)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){a()}break}}))}v();export{g as M,v as d};
-//# sourceMappingURL=p-CpNIQXz6.js.map

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

@@ -1 +0,0 @@
-{"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","shouldRender","closing","pos","focusedIndex","positionReady","focusRingVisible","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","positionRetryRaf","listenersReady","componentDidLoad","onOpenChange","disconnectedCallback","cancelPositionRetry","teardownListeners","isOpen","setupListeners","schedulePositionUpdate","focusInitialItem","setTimeout","closeAnimationMs","onAnchorChange","onPositionPropsChange","resolveCssLengthPx","TOKEN_DEFAULTS","popupFallbackWidthPx","menuWidthXs","popupFallbackHeightPx","menuFallbackHeight","resolveCssTimeMs","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","value","onDsChange","detail","isFocused","type","isDestructive","disabled","tabIndex","onMouseDown","onClick","onFocus","label","subtext","showToggle","toggleValue"],"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 '../../nav/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  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  showToggle?: boolean;\n  toggleValue?: 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\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\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/* ── 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\n.section-header {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-075);\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.section-label {\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  color: var(--color-foreground-secondary);\n}\n\n/* ── Items ───────────────────────────────────────────────────────────────── */\n\n.menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n  width: 100%;\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  box-sizing: border-box;\n  border: none;\n  border-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-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_selected-bg: var(--color-interaction-active);\n}\n\n.menu-item:has(.menu-item__subtext) {\n  align-items: flex-start;\n}\n\n/* Interaction layer — same ::after pattern as tabs / BarNav trigger */\n.menu-item::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.menu-item--selected::after {\n  background: var(--_selected-bg);\n  transition: none;\n}\n\n.menu-item:hover:not(:disabled):not(.menu-item--selected)::after {\n  background: var(--_hover-bg);\n  transition: none;\n}\n\n.menu-item:active:not(:disabled)::after {\n  background: var(--_pressed-bg);\n  transition: none;\n}\n\n.menu-item--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.menu-item--destructive .menu-item__label {\n  color: var(--color-foreground-bold-negative) !important;\n}\n\n.menu-item__content {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  min-width: 0;\n}\n\n.menu-item__label {\n  padding: 0 var(--dimension-space-025);\n  color: var(--color-foreground-secondary);\n}\n\n.menu-item:has(.menu-item__subtext) .menu-item__label,\n.menu-item--selected .menu-item__label {\n  color: var(--color-foreground-primary);\n}\n\n.menu-item__subtext {\n  padding: 0 var(--dimension-space-025);\n  color: var(--color-foreground-secondary);\n  line-height: 1.4;\n}\n\n/* ── Toggle suffix ───────────────────────────────────────────────────────── */\n\n.menu-item__toggle {\n  position: relative;\n  z-index: 1;\n  flex-shrink: 0;\n  width: calc(var(--dimension-size-400) + var(--dimension-size-050));\n  height: var(--dimension-size-250);\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-translucent);\n  transition: background-color var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on {\n  background-color: var(--color-background-medium-brand);\n}\n\n.menu-item__toggle-thumb {\n  position: absolute;\n  top: var(--dimension-space-025);\n  left: var(--dimension-space-025);\n  width: var(--dimension-size-200);\n  height: var(--dimension-size-200);\n  border-radius: 50%;\n  background-color: var(--color-foreground-on-bold-background-primary);\n  transition: transform var(--effect-motion-short-2);\n}\n\n.menu-item__toggle--on .menu-item__toggle-thumb {\n  transform: translateX(var(--dimension-offset-200, 16px));\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, Listen, h, Host } from '@stencil/core';\nimport { resolveCssLengthPx, resolveCssTimeMs, 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 '../../nav/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\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      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, this.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 resolveCssTimeMs(TOKEN_DEFAULTS.motionShort2, TOKEN_DEFAULTS.animationDurationShort3);\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=\"Menu\"\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                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\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-focus-ring-inset': true,\n                      'ds-focus-ring--visible': isFocused && this.focusRingVisible,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    aria-current={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\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              }))}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-CvgHQfvT.js

@@ -1,2 +0,0 @@
-import{p as o,H as r,c as t,h as s,a,t as n}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-EK1hOP19.js";const c=()=>`.sc-ds-tab-group-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group-nav:disabled,.tab[aria-disabled="true"].sc-ds-tab-group-nav{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const l=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsRovingExit=t(this,"dsRovingExit");this.value="";this.tabs=[];this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,r){if(!this.selectionFollowsFocus){if(r===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{r.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const r=[...o].reverse().find((o=>!o.disabled));if(r)await this.focusTab(r.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.disabled));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const r=this.selectableTabs;if(r.some((r=>r.id===o&&!r.disabled))){this.focusedTabId=o;return}const t=r.find((o=>!o.disabled));this.focusedTabId=t?.id??""}selectTab(o,r){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(r?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,r){const t=this.selectableTabs;for(let s=o+r;s>=0&&s<t.length;s+=r){if(!t[s]?.disabled)return s}return null}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let a=0;a<s;a++){const n=(o+r*(a+1)+s*(a+1))%s;if(!t[n]?.disabled)return n}return o}moveFocusToIndex(o){const r=this.selectableTabs[o];if(!r)return;this.focusedTabId=r.id;void this.focusTab(r.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const r=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!r||r.disabled)return;o.preventDefault();this.selectTab(r.id,{focus:true})}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const t=this.selectionFollowsFocus?r.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(t<0)return;const s=this.orientation==="vertical";let a=null;let n=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){a=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){a=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)n="start";else a=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){a=this.findEnabled(t,1)}else{const o=this.findEnabledLinear(t,1);if(o===null)n="end";else a=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){a=this.findEnabled(t,-1)}else{const o=this.findEnabledLinear(t,-1);if(o===null)n="start";else a=o}}}if(o.key==="Home"){const o=r.findIndex((o=>!o.disabled));a=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.disabled));a=o===-1?null:r.length-1-o}if(n){o.preventDefault();this.dsRovingExit.emit(n);return}if(a!==null&&a!==t){o.preventDefault();const t=r[a];if(this.selectionFollowsFocus){this.selectTab(t.id)}else{this.moveFocusToIndex(a)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const r=this.orientation==="vertical";const t=this.background==="navigation";return s(a,{key:"6c30feb4a9d7de49c3c7fbd7aaa1e00dc82fc510",class:"tab-group-nav-host"},s("div",{key:"ec7f4cedfe830b8ac8d32a9d699c93395f6569cd",role:"tablist",class:{"tab-list":true,"tab-list--vertical":r,"tab-list--on-navigation":t},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":r?"vertical":undefined},this.tabs.map(((t,a)=>{if(e(t)){return s("div",{key:`divider-${a}`,class:{"tab-divider":true,"tab-divider--vertical":r},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=t.id===this.value;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,"ds-focus-ring-inset":true,[o]:!!o},"aria-selected":n,"aria-disabled":t.disabled||undefined,"aria-controls":t.panelId??undefined,disabled:t.disabled,tabIndex:this.tabIndexForTab(t),onClick:()=>!t.disabled&&this.selectTab(t.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=t.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!t.dot,[n?"text-body-medium-emphasis":"text-body-medium"]:true}},t.label,t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return c()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(n(o))){customElements.define(n(o),l)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break}}))}u();export{l as T,u as d};
-//# sourceMappingURL=p-CvgHQfvT.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["tabGroupNavCss","TabGroupNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectionFollowsFocus","rovingEnabled","focusedTabId","selectableTabs","getSelectableTabs","componentWillLoad","syncFocusedTabId","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","el","contains","activeId","getAttribute","nextTab","querySelector","focus","preventScroll","blur","onTabsChange","some","tab","id","focusTab","btn","focusLastTab","last","reverse","find","disabled","focusFirstTab","first","preferred","selectTab","options","dsChange","emit","getFocusedIndex","findIndex","findEnabledLinear","from","step","i","length","findEnabled","len","n","moveFocusToIndex","nextIdx","activateFocusedTab","e","key","item","preventDefault","handleKeyDown","currentIdx","t","isVertical","exit","candidate","lastEnabled","dsRovingExit","getBgClass","background","tabIndexForTab","render","bgClass","isNavigation","h","Host","class","role","ariaLabel","ariaLabelledby","map","index","isTabDivider","isSelected","type","panelId","tabIndex","onClick","onFocus","tab__label","dot","label","variant"],"sources":["src/wc/components/TabGroupNav/TabGroupNav.css?tag=ds-tab-group-nav&encapsulation=scoped","src/wc/components/TabGroupNav/TabGroupNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: block;\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  position: relative;\n}\n\n/* Vertical orientation */\n.tab-list--vertical {\n  flex-direction: column;\n  align-items: stretch;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-075);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  cursor: pointer;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  position: relative;\n  /* Only transition color — hover bg is instant (see ::after below) */\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--dimension-size-400);\n  min-width: var(--dimension-size-400);\n  box-sizing: border-box;\n  --_hover-bg: var(--color-interaction-hover);\n  --_pressed-bg: var(--color-interaction-pressed);\n  --_dot: var(--color-foreground-bold-brand);\n  --_dot-ring: var(--color-background-secondary);\n}\n\n/* Interaction layer — same pattern as PanelNav */\n.tab::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: var(--dimension-radius-025, 2px);\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n}\n\n.tab:hover::after  { background: var(--_hover-bg);   transition: none; }\n.tab:active::after { background: var(--_pressed-bg);  transition: none; }\n\n.tab--selected { color: var(--color-foreground-primary); }\n\n.tab:disabled,\n.tab[aria-disabled=\"true\"] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* Vertical tabs read as a list — left-align the label */\n.tab-list--vertical .tab { justify-content: flex-start; }\n\n/* Label — dot anchors top-right like BarNav action icon zone */\n.tab__label {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Clearance for top-right dot — slightly less than space-025 + space-075 */\n.tab__label--dot {\n  padding-right: calc(var(--dimension-space-025) + var(--dimension-space-050));\n}\n\n/* Notification dot — top-right corner of the label zone */\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n/* Background context */\n.on-medium {\n  --_hover-bg: var(--color-interaction-on-medium-background-hover);\n  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --_dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.on-bold {\n  --_hover-bg: var(--color-interaction-on-bold-background-hover);\n  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --_dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  --_hover-bg: var(--color-interaction-on-strong-background-hover);\n  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --_dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-always-dark {\n  --_hover-bg: var(--color-always-dark-interaction-hover);\n  --_pressed-bg: var(--color-always-dark-interaction-pressed);\n  --_dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.on-navigation {\n  color: var(--color-navigation-foreground-secondary);\n  --_hover-bg: var(--color-navigation-interaction-hover);\n  --_pressed-bg: var(--color-navigation-interaction-pressed);\n  --_dot: var(--color-navigation-foreground-brand);\n  --_dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.on-navigation.tab--selected { color: var(--color-navigation-foreground-primary); }\n\n.tab-list--on-navigation .tab-divider__line {\n  background-color: var(--color-navigation-border-tertiary);\n}\n\n/* In-tablist visual group separator — not focusable, skipped by keyboard nav */\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-space-100);\n  height: var(--dimension-size-400);\n  padding-block: var(--dimension-space-075);\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  align-self: stretch;\n  background-color: var(--color-border-secondary);\n}\n\n.tab-divider--vertical {\n  width: auto;\n  height: var(--dimension-space-100);\n  align-self: stretch;\n  padding-block: 0;\n  padding-inline: var(--dimension-space-075);\n}\n\n.tab-divider--vertical .tab-divider__line {\n  width: auto;\n  height: var(--dimension-stroke-width-012);\n  align-self: stretch;\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, Method, State, h, Host } from '@stencil/core';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabItem,\n  type TabItemTab,\n} from '../TabGroup/tab-item-utils';\n\nexport type TabGroupNavBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark' | 'navigation';\n\n@Component({\n  tag: 'ds-tab-group-nav',\n  styleUrl: 'TabGroupNav.css',\n  scoped: true,\n})\nexport class TabGroupNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabGroupNavBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | undefined;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection.\n   * Used by bar nav where each tab is a full page transition.\n   */\n  @Prop() selectionFollowsFocus: boolean = true;\n\n  /** When `false`, every tab uses `tabindex=\"-1\"` (another chrome control owns the tab stop). */\n  @Prop() rovingEnabled: boolean = true;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  /** Fired when arrow navigation reaches the first/last tab in manual selection mode. */\n  @Event() dsRovingExit!: EventEmitter<'start' | 'end'>;\n\n  @State() private focusedTabId: string = '';\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  componentWillLoad() {\n    this.syncFocusedTabId(this.value);\n  }\n\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (!this.selectionFollowsFocus) {\n      if (prev === undefined || next !== this.focusedTabId) {\n        this.syncFocusedTabId(next);\n      }\n      return;\n    }\n\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${next}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  @Watch('tabs')\n  onTabsChange() {\n    if (!this.selectableTabs.some(tab => tab.id === this.focusedTabId)) {\n      this.syncFocusedTabId(this.value);\n    }\n  }\n\n  @Method()\n  async focusTab(id: string) {\n    this.focusedTabId = id;\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  @Method()\n  async focusLastTab() {\n    const tabs = this.selectableTabs;\n    const last = [...tabs].reverse().find(tab => !tab.disabled);\n    if (last) await this.focusTab(last.id);\n  }\n\n  @Method()\n  async focusFirstTab() {\n    const first = this.selectableTabs.find(tab => !tab.disabled);\n    if (first) await this.focusTab(first.id);\n  }\n\n  private syncFocusedTabId(preferred: string) {\n    const tabs = this.selectableTabs;\n    if (tabs.some(tab => tab.id === preferred && !tab.disabled)) {\n      this.focusedTabId = preferred;\n      return;\n    }\n    const first = tabs.find(tab => !tab.disabled);\n    this.focusedTabId = first?.id ?? '';\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.focusedTabId = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      void this.focusTab(id);\n    }\n  }\n\n  private getFocusedIndex(): number {\n    return this.selectableTabs.findIndex(tab => tab.id === this.focusedTabId);\n  }\n\n  private findEnabledLinear(from: number, step: 1 | -1): number | null {\n    const tabs = this.selectableTabs;\n    for (let i = from + step; i >= 0 && i < tabs.length; i += step) {\n      if (!tabs[i]?.disabled) return i;\n    }\n    return null;\n  }\n\n  /**\n   * Find the next non-disabled tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  private moveFocusToIndex(nextIdx: number) {\n    const next = this.selectableTabs[nextIdx];\n    if (!next) return;\n    this.focusedTabId = next.id;\n    void this.focusTab(next.id);\n  }\n\n  private activateFocusedTab(e: KeyboardEvent) {\n    if (e.key !== 'Enter' && e.key !== ' ') return;\n    const tab = this.selectableTabs.find(item => item.id === this.focusedTabId);\n    if (!tab || tab.disabled) return;\n    e.preventDefault();\n    this.selectTab(tab.id, { focus: true });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    if (!this.selectionFollowsFocus) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        this.activateFocusedTab(e);\n        return;\n      }\n    }\n\n    const currentIdx = this.selectionFollowsFocus\n      ? tabs.findIndex(t => t.id === this.value)\n      : this.getFocusedIndex();\n    if (currentIdx < 0) return;\n\n    const isVertical = this.orientation === 'vertical';\n    let nextIdx: number | null = null;\n    let exit: 'start' | 'end' | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, 1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, 1);\n          if (candidate === null) exit = 'end';\n          else nextIdx = candidate;\n        }\n      } else if (e.key === 'ArrowLeft') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, -1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, -1);\n          if (candidate === null) exit = 'start';\n          else nextIdx = candidate;\n        }\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, 1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, 1);\n          if (candidate === null) exit = 'end';\n          else nextIdx = candidate;\n        }\n      } else if (e.key === 'ArrowUp') {\n        if (this.selectionFollowsFocus) {\n          nextIdx = this.findEnabled(currentIdx, -1);\n        } else {\n          const candidate = this.findEnabledLinear(currentIdx, -1);\n          if (candidate === null) exit = 'start';\n          else nextIdx = candidate;\n        }\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (exit) {\n      e.preventDefault();\n      this.dsRovingExit.emit(exit);\n      return;\n    }\n\n    if (nextIdx !== null && nextIdx !== currentIdx) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      if (this.selectionFollowsFocus) {\n        this.selectTab(next.id);\n      } else {\n        this.moveFocusToIndex(nextIdx);\n      }\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background || this.background === 'faint') return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    if (this.background === 'navigation') return 'on-navigation';\n    return `on-${this.background}`;\n  }\n\n  private tabIndexForTab(tab: TabItemTab): number {\n    if (!this.rovingEnabled) return -1;\n    if (this.selectionFollowsFocus) {\n      return tab.id === this.value ? 0 : -1;\n    }\n    return tab.id === this.focusedTabId ? 0 : -1;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n    const isNavigation = this.background === 'navigation';\n\n    return (\n      <Host class=\"tab-group-nav-host\">\n        <div\n          role=\"tablist\"\n          class={{\n            'tab-list': true,\n            'tab-list--vertical': isVertical,\n            'tab-list--on-navigation': isNavigation,\n          }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class={{\n                    'tab-divider': true,\n                    'tab-divider--vertical': isVertical,\n                  }}\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  'ds-focus-ring-inset': true,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-selected={isSelected}\n                aria-disabled={tab.disabled || undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.disabled}\n                tabIndex={this.tabIndexForTab(tab)}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n                onFocus={() => {\n                  if (!this.selectionFollowsFocus) {\n                    this.focusedTabId = tab.id;\n                  }\n                }}\n              >\n                <span class={{\n                  tab__label: true,\n                  'tab__label--dot': !!tab.dot,\n                  [isSelected ? 'text-body-medium-emphasis' : 'text-body-medium']: true,\n                }}>\n                  {tab.label}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      background=\"var(--_dot-ring)\"\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-bDf6yBQd.js

@@ -1,2 +0,0 @@
-const i="--dimension-iconography-md";const n="--dimension-menu-width-xs";const o="--dimension-panel-width-md";const t="--dimension-radius-025";const e="--dimension-size-200";const a="--dimension-size-300";const s="--dimension-space-050";const c="--effect-animation-delay-long-2";const m="--effect-animation-delay-medium-1";const d="--effect-animation-duration-medium-1";const h="--effect-animation-duration-short-3";const r="--effect-motion-short-2";const l="--effect-motion-short-3";const p="--typography-lineheight-md";const u="--typography-lineheight-xl";const f={space050:s,radius025:t,size200:e,size300:a,iconographyMd:i,panelWidthMd:o,menuWidthXs:n,lineheightMd:p,lineheightXl:u,motionShort2:r,motionShort3:l,animationDurationShort3:h,animationDurationMedium1:d,animationDelayMedium1:m,animationDelayLong2:c,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))"};const g={space050:`var(${s})`};export{f as T,g as a};
-//# sourceMappingURL=p-bDf6yBQd.js.map