@ds-mo/ui 0.14.2 → 1.0.0

package/dist/components/{p-DFxOA7YO.js → p-BoRPJDjX.js}

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

package/dist/components/{p-BHwspdql.js → p-CR5Jrtwp.js}

@@ -1,2 +1,2 @@
-import{p as o,H as n,c as r,h as a,a as e,t as i}from"./index.js";import{d as s}from"./p-CNhBzIIb.js";const t=()=>`.action-btn.sc-ds-bar-nav-action{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;color:var(--color-foreground-secondary);box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;transition:color var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot-ring:var(--color-background-secondary)}.action-btn.sc-ds-bar-nav-action::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none}.action-btn.sc-ds-bar-nav-action:hover:not(.inactive)::after{background:var(--_hover-bg);transition:none}.action-btn.sc-ds-bar-nav-action:active:not(.inactive)::after{background:var(--_pressed-bg);transition:none}.action-btn.sc-ds-bar-nav-action:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.action-btn.selected.sc-ds-bar-nav-action{color:var(--color-foreground-primary)}.action-btn.inactive.sc-ds-bar-nav-action{opacity:0.5;cursor:not-allowed;pointer-events:none}.onMedium.sc-ds-bar-nav-action{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium)}.onBold.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold)}.onBold.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onStrong.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong)}.onStrong.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onAlwaysDark.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-secondary);--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background)}.onAlwaysDark.selected.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-primary)}.action-btn__icon-wrap.sc-ds-bar-nav-action{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-btn__dot.sc-ds-bar-nav-action{position:absolute;top:0;right:0;width:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));height:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));border-radius:var(--dimension-radius-half);background:var(--color-foreground-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);pointer-events:none}`;const c=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.icon="";this.selected=false;this.dot=false;this.inactive=false;this.ariaLabel="action";this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.selected)}}render(){const o=this.background;const n={"action-btn":true,selected:this.selected,inactive:this.inactive,onMedium:o==="medium",onBold:o==="bold",onStrong:o==="strong",onAlwaysDark:o==="always-dark"};return a(e,{key:"5fa334c6d5be3d288028e9294774c25104890d4c"},a("button",{key:"35c3643987bbb67d6549527ff070ba1cf802faf7",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"97b96334a820484281c73f97c84039b40a561daa",class:"action-btn__icon-wrap"},a("ds-icon",{key:"af6d46223aa9d1c56169b5917586ba95d939fd34",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("span",{key:"83a14f19c74aa4f7fcfbd44c1e7deba55b732296",class:"action-btn__dot","aria-hidden":"true"}))))}static get style(){return t()}},[2,"ds-bar-nav-action",{icon:[1],selected:[4],dot:[4],inactive:[4],ariaLabel:[1,"aria-label"],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-bar-nav-action","ds-icon"];o.forEach((o=>{switch(o){case"ds-bar-nav-action":if(!customElements.get(i(o))){customElements.define(i(o),c)}break;case"ds-icon":if(!customElements.get(i(o))){s()}break}}))}d();export{c as B,d};
-//# sourceMappingURL=p-BHwspdql.js.map
+import{p as o,H as n,c as r,h as a,a as e,t as i}from"./index.js";import{d as s}from"./p-DZaHUpch.js";const t=()=>`.action-btn.sc-ds-bar-nav-action{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-400);height:var(--dimension-size-400);padding:var(--dimension-space-075);background:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;color:var(--color-foreground-secondary);box-sizing:border-box;-webkit-user-select:none;user-select:none;position:relative;transition:color var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot-ring:var(--color-background-secondary)}.action-btn.sc-ds-bar-nav-action::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025);background:transparent;pointer-events:none;transition:none}.action-btn.sc-ds-bar-nav-action:hover:not(.inactive)::after{background:var(--_hover-bg);transition:none}.action-btn.sc-ds-bar-nav-action:active:not(.inactive)::after{background:var(--_pressed-bg);transition:none}.action-btn.sc-ds-bar-nav-action:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.action-btn.selected.sc-ds-bar-nav-action{color:var(--color-foreground-primary)}.action-btn.inactive.sc-ds-bar-nav-action{opacity:0.5;cursor:not-allowed;pointer-events:none}.onMedium.sc-ds-bar-nav-action{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium)}.onBold.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold)}.onBold.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onStrong.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-secondary);--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong)}.onStrong.selected.sc-ds-bar-nav-action{color:var(--color-foreground-on-bold-background-primary)}.onAlwaysDark.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-secondary);--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background)}.onAlwaysDark.selected.sc-ds-bar-nav-action{color:var(--color-always-dark-foreground-primary)}.action-btn__icon-wrap.sc-ds-bar-nav-action{position:relative;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.action-btn__dot.sc-ds-bar-nav-action{position:absolute;top:0;right:0;width:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));height:var(--dimension-size-075, calc(var(--dimension-size-base) * 3 / 4));border-radius:var(--dimension-radius-half);background:var(--color-foreground-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-018) var(--_dot-ring);pointer-events:none}`;const c=o(class o extends n{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.icon="";this.selected=false;this.dot=false;this.inactive=false;this.ariaLabel="action";this.handleClick=()=>{if(this.inactive)return;this.dsChange.emit(!this.selected)}}render(){const o=this.background;const n={"action-btn":true,selected:this.selected,inactive:this.inactive,onMedium:o==="medium",onBold:o==="bold",onStrong:o==="strong",onAlwaysDark:o==="always-dark"};return a(e,{key:"5fa334c6d5be3d288028e9294774c25104890d4c"},a("button",{key:"35c3643987bbb67d6549527ff070ba1cf802faf7",type:"button",class:n,disabled:this.inactive,"aria-pressed":this.selected,"aria-label":this.ariaLabel,onClick:this.handleClick},a("span",{key:"97b96334a820484281c73f97c84039b40a561daa",class:"action-btn__icon-wrap"},a("ds-icon",{key:"af6d46223aa9d1c56169b5917586ba95d939fd34",name:this.icon,size:"md",color:"inherit"}),this.dot&&a("span",{key:"83a14f19c74aa4f7fcfbd44c1e7deba55b732296",class:"action-btn__dot","aria-hidden":"true"}))))}static get style(){return t()}},[2,"ds-bar-nav-action",{icon:[1],selected:[4],dot:[4],inactive:[4],ariaLabel:[1,"aria-label"],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-bar-nav-action","ds-icon"];o.forEach((o=>{switch(o){case"ds-bar-nav-action":if(!customElements.get(i(o))){customElements.define(i(o),c)}break;case"ds-icon":if(!customElements.get(i(o))){s()}break}}))}d();export{c as B,d};
+//# sourceMappingURL=p-CR5Jrtwp.js.map

package/dist/components/p-DZaHUpch.js

@@ -0,0 +1,2 @@
+import{p as o,H as r,h as n,a as c,t as i}from"./index.js";import*as s from"@ds-mo/icons/svg";import*as e from"@ds-mo/icons/svg/flags";import l from"@ds-mo/icons/meta";const a={};function d(o){return o.split("-").map((o=>o?o.charAt(0).toUpperCase()+o.slice(1):o)).join("")}function t(o,r,n){o.set(r,n);if(r.includes("-")){o.set(d(r),n)}else if(r.length>0){o.set(r.charAt(0).toUpperCase()+r.slice(1),n)}}function g(o){const r=a[o];if(r)return r;const n=new Map;const c=l.icons;for(const r of c){if(r.category!==o)continue;n.set(r.name,r.name);n.set(r.kebab,r.name);n.set(d(r.kebab),r.name);for(const o of r.aliases){t(n,o,r.name)}}a[o]=n;return n}function u(o,r="system"){if(!o)return"";return g(r).get(o)??o}const f=()=>`.icon.sc-ds-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0;color:var(--color-foreground-primary);width:var(--_icon-sz, var(--dimension-iconography-md));height:var(--_icon-sz, var(--dimension-iconography-md))}.icon__svg.sc-ds-icon{display:contents;line-height:0}.icon--size-xs.sc-ds-icon{--_icon-sz:var(--dimension-iconography-xs)}.icon--size-sm.sc-ds-icon{--_icon-sz:var(--dimension-iconography-sm)}.icon--size-md.sc-ds-icon{--_icon-sz:var(--dimension-iconography-md)}.icon--size-lg.sc-ds-icon{--_icon-sz:var(--dimension-iconography-lg)}.icon--size-xl.sc-ds-icon{--_icon-sz:var(--dimension-iconography-xl)}.icon--size-2xl.sc-ds-icon{--_icon-sz:var(--dimension-iconography-2xl)}.icon--size-3xl.sc-ds-icon{--_icon-sz:var(--dimension-iconography-3xl)}.icon--color-primary.sc-ds-icon{color:var(--color-foreground-primary)}.icon--color-secondary.sc-ds-icon{color:var(--color-foreground-secondary)}.icon--color-tertiary.sc-ds-icon{color:var(--color-foreground-tertiary)}.icon--color-quaternary.sc-ds-icon{color:var(--color-foreground-quaternary)}.icon--color-inherit.sc-ds-icon{color:inherit}.icon--color-brand.sc-ds-icon{color:var(--color-foreground-bold-brand)}.icon--color-negative.sc-ds-icon{color:var(--color-foreground-bold-negative)}.icon--color-positive.sc-ds-icon{color:var(--color-foreground-bold-positive)}.icon--color-warning.sc-ds-icon{color:var(--color-foreground-bold-warning)}.icon--color-caution.sc-ds-icon{color:var(--color-foreground-bold-caution)}.icon--color-ai.sc-ds-icon{color:var(--color-foreground-bold-ai)}.icon--color-guide.sc-ds-icon{color:var(--color-foreground-bold-guide)}.icon--color-neutral.sc-ds-icon{color:var(--color-foreground-bold-neutral)}.icon--color-faint-brand.sc-ds-icon{color:var(--color-foreground-faint-brand)}.icon--color-faint-negative.sc-ds-icon{color:var(--color-foreground-faint-negative)}.icon--color-faint-positive.sc-ds-icon{color:var(--color-foreground-faint-positive)}.icon--color-faint-warning.sc-ds-icon{color:var(--color-foreground-faint-warning)}.icon--color-faint-caution.sc-ds-icon{color:var(--color-foreground-faint-caution)}.icon--color-faint-ai.sc-ds-icon{color:var(--color-foreground-faint-ai)}.icon--color-faint-neutral.sc-ds-icon{color:var(--color-foreground-faint-neutral)}.icon--color-medium-brand.sc-ds-icon{color:var(--color-foreground-medium-brand)}.icon--color-medium-negative.sc-ds-icon{color:var(--color-foreground-medium-negative)}.icon--color-medium-positive.sc-ds-icon{color:var(--color-foreground-medium-positive)}.icon--color-medium-warning.sc-ds-icon{color:var(--color-foreground-medium-warning)}.icon--color-medium-caution.sc-ds-icon{color:var(--color-foreground-medium-caution)}.icon--color-medium-ai.sc-ds-icon{color:var(--color-foreground-medium-ai)}.icon--color-medium-neutral.sc-ds-icon{color:var(--color-foreground-medium-neutral)}.icon--color-bold-brand.sc-ds-icon{color:var(--color-foreground-bold-brand)}.icon--color-bold-negative.sc-ds-icon{color:var(--color-foreground-bold-negative)}.icon--color-bold-positive.sc-ds-icon{color:var(--color-foreground-bold-positive)}.icon--color-bold-warning.sc-ds-icon{color:var(--color-foreground-bold-warning)}.icon--color-bold-caution.sc-ds-icon{color:var(--color-foreground-bold-caution)}.icon--color-bold-ai.sc-ds-icon{color:var(--color-foreground-bold-ai)}.icon--color-bold-neutral.sc-ds-icon{color:var(--color-foreground-bold-neutral)}.icon--color-strong-brand.sc-ds-icon{color:var(--color-foreground-strong-brand)}.icon--color-strong-negative.sc-ds-icon{color:var(--color-foreground-strong-negative)}.icon--color-strong-positive.sc-ds-icon{color:var(--color-foreground-strong-positive)}.icon--color-strong-warning.sc-ds-icon{color:var(--color-foreground-strong-warning)}.icon--color-strong-caution.sc-ds-icon{color:var(--color-foreground-strong-caution)}.icon--color-strong-ai.sc-ds-icon{color:var(--color-foreground-strong-ai)}.icon--color-strong-neutral.sc-ds-icon{color:var(--color-foreground-strong-neutral)}.icon--color-on-strong.sc-ds-icon{color:var(--color-foreground-on-strong-background-primary)}.icon--color-on-bold.sc-ds-icon{color:var(--color-foreground-on-bold-background-primary)}`;const v=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.name="";this.size="md";this.flag=false}get svgString(){const o=this.flag?e:s;const r=this.flag?"flag":"system";const n=u(this.name,r);return o[n]??""}updateSvg(){const o=this.el.querySelector(".icon__svg");if(!o)return;o.innerHTML=this.svgString;const r=o.querySelector("svg");if(r){r.removeAttribute("width");r.removeAttribute("height");r.setAttribute("focusable","false");r.setAttribute("aria-hidden","true");r.style.display="block";r.style.flexShrink="0";r.style.width="100%";r.style.height="100%"}}onIconChange(){this.updateSvg()}componentDidRender(){this.updateSvg()}render(){const o=typeof this.color==="string"&&this.color.startsWith("var(--");const r={icon:true,[`icon--size-${this.size}`]:true,[`icon--color-${this.color}`]:!!this.color&&!o&&this.color!=="inherit","icon--color-inherit":this.color==="inherit"};const i=o?{color:this.color}:undefined;return n(c,{key:"e22a38ffc06f9f3db3d1e7940138d8b5e193c012",style:{display:"inline-flex",alignItems:"center",justifyContent:"center"}},n("span",{key:"a2055f96ade1047cb68cd673685ba7de7b297a17",class:r,style:i,role:this.label?"img":"presentation","aria-label":this.label,"aria-hidden":!this.label?"true":undefined},n("span",{key:"c9df55753eed92606b26363dff76caa6e3c7c034",class:"icon__svg"})))}get el(){return this}static get watchers(){return{name:[{onIconChange:0}],flag:[{onIconChange:0}]}}static get style(){return f()}},[2,"ds-icon",{name:[1],size:[1],color:[1],label:[1],flag:[4]},undefined,{name:[{onIconChange:0}],flag:[{onIconChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const o=["ds-icon"];o.forEach((o=>{switch(o){case"ds-icon":if(!customElements.get(i(o))){customElements.define(i(o),v)}break}}))}m();export{v as I,m as d};
+//# sourceMappingURL=p-DZaHUpch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapsByCategory","kebabToPascal","kebab","split","map","segment","charAt","toUpperCase","slice","join","registerAlias","alias","canonical","set","includes","length","getAliasMap","category","cached","Map","icons","iconMeta","icon","name","aliases","resolveIconName","get","iconCss","Icon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","flag","svgString","source","SvgFlags","SvgIcons","resolved","updateSvg","container","el","querySelector","innerHTML","svg","removeAttribute","setAttribute","style","display","flexShrink","width","height","onIconChange","componentDidRender","render","isCustomColor","color","startsWith","cls","undefined","h","Host","key","alignItems","justifyContent","class","role","label"],"sources":["src/wc/components/Icon/icon-resolve.ts","src/wc/components/Icon/Icon.css?tag=ds-icon&encapsulation=scoped","src/wc/components/Icon/Icon.tsx"],"sourcesContent":["import iconMeta from '@ds-mo/icons/meta';\n\nexport type IconMetaCategory = 'system' | 'flag';\n\ninterface IconMetaEntry {\n  name: string;\n  category: IconMetaCategory;\n  kebab: string;\n  aliases: string[];\n}\n\nconst mapsByCategory: Partial<Record<IconMetaCategory, Map<string, string>>> = {};\n\nfunction kebabToPascal(kebab: string): string {\n  return kebab\n    .split('-')\n    .map(segment => (segment ? segment.charAt(0).toUpperCase() + segment.slice(1) : segment))\n    .join('');\n}\n\nfunction registerAlias(map: Map<string, string>, alias: string, canonical: string): void {\n  map.set(alias, canonical);\n  if (alias.includes('-')) {\n    map.set(kebabToPascal(alias), canonical);\n  } else if (alias.length > 0) {\n    map.set(alias.charAt(0).toUpperCase() + alias.slice(1), canonical);\n  }\n}\n\nfunction getAliasMap(category: IconMetaCategory): Map<string, string> {\n  const cached = mapsByCategory[category];\n  if (cached) return cached;\n\n  const map = new Map<string, string>();\n  const icons = (iconMeta as { icons: IconMetaEntry[] }).icons;\n\n  for (const icon of icons) {\n    if (icon.category !== category) continue;\n\n    map.set(icon.name, icon.name);\n    map.set(icon.kebab, icon.name);\n    map.set(kebabToPascal(icon.kebab), icon.name);\n\n    for (const alias of icon.aliases) {\n      registerAlias(map, alias, icon.name);\n    }\n  }\n\n  mapsByCategory[category] = map;\n  return map;\n}\n\n/** Map a consumer-facing icon name to the canonical IcoMo export key. */\nexport function resolveIconName(name: string, category: IconMetaCategory = 'system'): string {\n  if (!name) return '';\n  return getAliasMap(category).get(name) ?? name;\n}\n","/* ── Base icon ───────────────────────────────────────────────────────────── */\n\n.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  line-height: 0;\n  color: var(--color-foreground-primary);\n  /* Explicit size so the SVG (width/height: 100% via JS) has a defined container */\n  width: var(--_icon-sz, var(--dimension-iconography-md));\n  height: var(--_icon-sz, var(--dimension-iconography-md));\n}\n\n.icon__svg {\n  display: contents;\n  line-height: 0;\n}\n\n/* SVG width/height are set via inline style in updateSvg() because Stencil's\n   scoped CSS cannot reach innerHTML-injected elements (they lack the sc-* class). */\n\n/* ── Sizes ───────────────────────────────────────────────────────────────── */\n\n.icon--size-xs  { --_icon-sz: var(--dimension-iconography-xs);  }\n.icon--size-sm  { --_icon-sz: var(--dimension-iconography-sm);  }\n.icon--size-md  { --_icon-sz: var(--dimension-iconography-md);  }\n.icon--size-lg  { --_icon-sz: var(--dimension-iconography-lg);  }\n.icon--size-xl  { --_icon-sz: var(--dimension-iconography-xl);  }\n.icon--size-2xl { --_icon-sz: var(--dimension-iconography-2xl); }\n.icon--size-3xl { --_icon-sz: var(--dimension-iconography-3xl); }\n\n/* ── Colors — hierarchy ──────────────────────────────────────────────────── */\n\n.icon--color-primary    { color: var(--color-foreground-primary);    }\n.icon--color-secondary  { color: var(--color-foreground-secondary);  }\n.icon--color-tertiary   { color: var(--color-foreground-tertiary);   }\n.icon--color-quaternary { color: var(--color-foreground-quaternary); }\n.icon--color-inherit    { color: inherit; }\n\n/* ── Colors — intent (bold contrast default) ─────────────────────────────── */\n\n.icon--color-brand    { color: var(--color-foreground-bold-brand);    }\n.icon--color-negative { color: var(--color-foreground-bold-negative); }\n.icon--color-positive { color: var(--color-foreground-bold-positive); }\n.icon--color-warning  { color: var(--color-foreground-bold-warning);  }\n.icon--color-caution  { color: var(--color-foreground-bold-caution);  }\n.icon--color-ai       { color: var(--color-foreground-bold-ai);       }\n.icon--color-guide    { color: var(--color-foreground-bold-guide);    }\n.icon--color-neutral  { color: var(--color-foreground-bold-neutral);  }\n\n/* ── Colors — intent faint ───────────────────────────────────────────────── */\n\n.icon--color-faint-brand    { color: var(--color-foreground-faint-brand);    }\n.icon--color-faint-negative { color: var(--color-foreground-faint-negative); }\n.icon--color-faint-positive { color: var(--color-foreground-faint-positive); }\n.icon--color-faint-warning  { color: var(--color-foreground-faint-warning);  }\n.icon--color-faint-caution  { color: var(--color-foreground-faint-caution);  }\n.icon--color-faint-ai       { color: var(--color-foreground-faint-ai);       }\n.icon--color-faint-neutral  { color: var(--color-foreground-faint-neutral);  }\n\n/* ── Colors — intent medium ─────────────────────────────────────────────── */\n\n.icon--color-medium-brand    { color: var(--color-foreground-medium-brand);    }\n.icon--color-medium-negative { color: var(--color-foreground-medium-negative); }\n.icon--color-medium-positive { color: var(--color-foreground-medium-positive); }\n.icon--color-medium-warning  { color: var(--color-foreground-medium-warning);  }\n.icon--color-medium-caution  { color: var(--color-foreground-medium-caution);  }\n.icon--color-medium-ai       { color: var(--color-foreground-medium-ai);       }\n.icon--color-medium-neutral  { color: var(--color-foreground-medium-neutral);  }\n\n/* ── Colors — intent bold (explicit) ────────────────────────────────────── */\n\n.icon--color-bold-brand    { color: var(--color-foreground-bold-brand);    }\n.icon--color-bold-negative { color: var(--color-foreground-bold-negative); }\n.icon--color-bold-positive { color: var(--color-foreground-bold-positive); }\n.icon--color-bold-warning  { color: var(--color-foreground-bold-warning);  }\n.icon--color-bold-caution  { color: var(--color-foreground-bold-caution);  }\n.icon--color-bold-ai       { color: var(--color-foreground-bold-ai);       }\n.icon--color-bold-neutral  { color: var(--color-foreground-bold-neutral);  }\n\n/* ── Colors — intent strong ──────────────────────────────────────────────── */\n\n.icon--color-strong-brand    { color: var(--color-foreground-strong-brand);    }\n.icon--color-strong-negative { color: var(--color-foreground-strong-negative); }\n.icon--color-strong-positive { color: var(--color-foreground-strong-positive); }\n.icon--color-strong-warning  { color: var(--color-foreground-strong-warning);  }\n.icon--color-strong-caution  { color: var(--color-foreground-strong-caution);  }\n.icon--color-strong-ai       { color: var(--color-foreground-strong-ai);       }\n.icon--color-strong-neutral  { color: var(--color-foreground-strong-neutral);  }\n\n/* ── Colors — contextual ────────────────────────────────────────────────── */\n\n.icon--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.icon--color-on-bold   { color: var(--color-foreground-on-bold-background-primary);   }\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport * as SvgIcons from '@ds-mo/icons/svg';\nimport * as SvgFlags from '@ds-mo/icons/svg/flags';\nimport { resolveIconName } from './icon-resolve';\n\ntype SvgRecord = Record<string, string>;\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';\n\nexport type IconColorToken =\n  // Hierarchy\n  | 'primary' | 'secondary' | 'tertiary' | 'quaternary'\n  // Intent — bold contrast (default)\n  | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai' | 'guide' | 'neutral'\n  // Intent — faint\n  | 'faint-brand' | 'faint-negative' | 'faint-positive' | 'faint-warning'\n  | 'faint-caution' | 'faint-ai' | 'faint-neutral'\n  // Intent — medium\n  | 'medium-brand' | 'medium-negative' | 'medium-positive' | 'medium-warning'\n  | 'medium-caution' | 'medium-ai' | 'medium-neutral'\n  // Intent — bold (explicit)\n  | 'bold-brand' | 'bold-negative' | 'bold-positive' | 'bold-warning'\n  | 'bold-caution' | 'bold-ai' | 'bold-neutral'\n  // Intent — strong\n  | 'strong-brand' | 'strong-negative' | 'strong-positive' | 'strong-warning'\n  | 'strong-caution' | 'strong-ai' | 'strong-neutral'\n  // Contextual\n  | 'on-strong' | 'on-bold'\n  // Pass-through\n  | 'inherit';\n\nexport type IconColor = IconColorToken | `var(--${string})`;\n\n@Component({\n  tag: 'ds-icon',\n  styleUrl: 'Icon.css',\n  scoped: true,\n})\nexport class Icon {\n  @Element() el!: HTMLElement;\n\n  /** Name of the system icon (e.g. `\"Gear\"`, `\"ArrowRight\"`) or flag (e.g. `\"US\"`) */\n  @Prop() name: string = '';\n  /** Iconography size token. Maps to `--dimension-iconography-{size}`. Default `md` = 20 px. */\n  @Prop() size: IconSize = 'md';\n  /** Semantic foreground color token, or a raw CSS var reference. */\n  @Prop() color: IconColor | undefined;\n  /** Accessible label. Sets `role=\"img\"` and `aria-label`. Omit for decorative icons. */\n  @Prop() label: string | undefined;\n  /** Set `true` to look up from the flag icon set instead of the system icon set. */\n  @Prop() flag: boolean = false;\n\n  private get svgString(): string {\n    const source = this.flag ? (SvgFlags as SvgRecord) : (SvgIcons as SvgRecord);\n    const category = this.flag ? 'flag' : 'system';\n    const resolved = resolveIconName(this.name, category);\n    return source[resolved] ?? '';\n  }\n\n  private updateSvg() {\n    const container = this.el.querySelector<HTMLElement>('.icon__svg');\n    if (!container) return;\n    container.innerHTML = this.svgString;\n    // Stencil's scoped CSS cannot reach innerHTML-injected elements (no sc-* class).\n    // Apply width/height as inline styles so sizing works regardless of scope class.\n    const svg = container.querySelector<SVGElement>('svg');\n    if (svg) {\n      svg.removeAttribute('width');\n      svg.removeAttribute('height');\n      // Prevent SVG from being natively focusable (Firefox/IE default) while\n      // sitting inside an aria-hidden parent — fixes aria-hidden-focus violation.\n      svg.setAttribute('focusable', 'false');\n      svg.setAttribute('aria-hidden', 'true');\n      svg.style.display = 'block';\n      svg.style.flexShrink = '0';\n      svg.style.width = '100%';\n      svg.style.height = '100%';\n    }\n  }\n\n  @Watch('name')\n  @Watch('flag')\n  onIconChange() {\n    this.updateSvg();\n  }\n\n  componentDidRender() {\n    this.updateSvg();\n  }\n\n  render() {\n    const isCustomColor = typeof this.color === 'string' && this.color.startsWith('var(--');\n\n    const cls: Record<string, boolean> = {\n      icon: true,\n      [`icon--size-${this.size}`]: true,\n      [`icon--color-${this.color}`]: !!this.color && !isCustomColor && this.color !== 'inherit',\n      'icon--color-inherit': this.color === 'inherit',\n    };\n\n    const style = isCustomColor ? { color: this.color as string } : undefined;\n\n    return (\n      <Host style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>\n        <span\n          class={cls}\n          style={style}\n          role={this.label ? 'img' : 'presentation'}\n          aria-label={this.label}\n          aria-hidden={!this.label ? 'true' : undefined}\n        >\n          <span class=\"icon__svg\" />\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-CSIN3IaW.js → p-STnE_bmQ.js}

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as i,a as n,t as o}from"./index.js";const r=()=>`.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:200px;max-width:600px;overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100)}.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{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,.menu-item--focused.sc-ds-menu: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.sc-ds-menu:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.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{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{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 a=220;const d=4;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.positionReady=false;requestAnimationFrame((()=>{this.calculatePosition();this.positionReady=true;this.focusInitialItem();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),a)}}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>e.items))}calculatePosition(){const e=this.resolvedAnchor;if(!e)return;const t=this.el.querySelector(".menu-popup");if(!t)return;const s=e.getBoundingClientRect();const i=t.offsetWidth||200;const n=t.offsetHeight||160;let o=0,r=0;switch(this.side){case"top":r=s.top-n-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":r=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,d),window.innerWidth-i-d),y:Math.min(Math.max(r,d),window.innerHeight-n-d)}}focusInitialItem(){const e=this.flatItems;const t=e.findIndex((e=>e.isSelected&&!e.isInactive));const s=e.findIndex((e=>!e.isInactive));this.focusedIndex=t>=0?t:s>=0?s:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const t=e.target;const s=this.el.querySelector(".menu-popup");const i=this.resolvedAnchor;if(s?.contains(t)||i?.contains(t))return;this.close()};this.scrollResizeHandler=()=>this.calculatePosition();document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false}handleKeyDown(e){if(!this.open)return;const t=this.flatItems;const s=t.map(((e,t)=>({it:e,i:t}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!s.length)return;const i=s.indexOf(this.focusedIndex);const n=i<0?0:i;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const t=this.el.querySelectorAll(".menu-item");t[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}render(){if(!this.shouldRender)return i(n,{style:{display:"contents"}});const e=this.activeSections;let t=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return i(n,{style:{display:"contents"}},i("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((s,n)=>i("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1},role:s.header?"group":undefined,"aria-label":s.header},s.header&&i("div",{class:"section-header","aria-hidden":"true"},i("span",{class:"text-body-small-emphasis section-label"},s.header)),s.items.map((e=>{const s=t++;const n=this.focusedIndex===s;return i("button",{key:s,type:"button",class:{"menu-item":true,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=s}},i("div",{class:"menu-item__content"},i("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&i("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&i("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},i("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return r()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-menu"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),c)}break}}))}m();export{c as M,m as d};
-//# sourceMappingURL=p-CSIN3IaW.js.map
+import{p as e,H as t,c as s,h as i,a as n,t as o}from"./index.js";const r=()=>`.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:200px;max-width:600px;overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-3) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{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{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,.menu-item--focused.sc-ds-menu: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.sc-ds-menu:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.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{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{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 a=220;const d=4;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsSelect=s(this,"dsSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=4;this.alignOffset=0;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.positionReady=false;requestAnimationFrame((()=>{this.calculatePosition();this.positionReady=true;this.focusInitialItem();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),a)}}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>e.items))}calculatePosition(){const e=this.resolvedAnchor;if(!e)return;const t=this.el.querySelector(".menu-popup");if(!t)return;const s=e.getBoundingClientRect();const i=t.offsetWidth||200;const n=t.offsetHeight||160;let o=0,r=0;switch(this.side){case"top":r=s.top-n-this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"bottom":r=s.bottom+this.sideOffset;o=this.align==="start"?s.left+this.alignOffset:this.align==="end"?s.right-i+this.alignOffset:s.left+s.width/2-i/2+this.alignOffset;break;case"left":o=s.left-i-this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break;case"right":o=s.right+this.sideOffset;r=this.align==="start"?s.top+this.alignOffset:this.align==="end"?s.bottom-n+this.alignOffset:s.top+s.height/2-n/2+this.alignOffset;break}this.pos={x:Math.min(Math.max(o,d),window.innerWidth-i-d),y:Math.min(Math.max(r,d),window.innerHeight-n-d)}}focusInitialItem(){const e=this.flatItems;const t=e.findIndex((e=>e.isSelected&&!e.isInactive));const s=e.findIndex((e=>!e.isInactive));this.focusedIndex=t>=0?t:s>=0?s:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const t=e.target;const s=this.el.querySelector(".menu-popup");const i=this.resolvedAnchor;if(s?.contains(t)||i?.contains(t))return;this.close()};this.scrollResizeHandler=()=>this.calculatePosition();document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false}handleKeyDown(e){if(!this.open)return;const t=this.flatItems;const s=t.map(((e,t)=>({it:e,i:t}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!s.length)return;const i=s.indexOf(this.focusedIndex);const n=i<0?0:i;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n+1)%s.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusedIndex=s[(n-1+s.length)%s.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusedIndex=s[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusedIndex=s[s.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const t=this.el.querySelectorAll(".menu-item");t[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e);this.close()}render(){if(!this.shouldRender)return i(n,{style:{display:"contents"}});const e=this.activeSections;let t=0;const s={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)s["width"]=this.menuWidth;if(this.minWidth)s["min-width"]=this.minWidth;return i(n,{style:{display:"contents"}},i("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:s,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((s,n)=>i("div",{key:n,class:{"menu-section":true,"menu-section--divided":n<e.length-1},role:s.header?"group":undefined,"aria-label":s.header},s.header&&i("div",{class:"section-header","aria-hidden":"true"},i("span",{class:"text-body-small-emphasis section-label"},s.header)),s.items.map((e=>{const s=t++;const n=this.focusedIndex===s;return i("button",{key:s,type:"button",class:{"menu-item":true,"menu-item--selected":!!e.isSelected,"menu-item--inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":n},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:n?0:-1,onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=s}},i("div",{class:"menu-item__content"},i("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&i("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&i("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue},"aria-hidden":"true"},i("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return r()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[2,"side-offset"],alignOffset:[2,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-menu"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),c)}break}}))}m();export{c as M,m as d};
+//# sourceMappingURL=p-STnE_bmQ.js.map

package/dist/components/{p-CSIN3IaW.js.map → p-STnE_bmQ.js.map}

@@ -1 +1 @@
-{"version":3,"names":["menuCss","CLOSE_ANIMATION_MS","VP_PAD","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","sideOffset","alignOffset","shouldRender","closing","pos","x","y","focusedIndex","positionReady","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","requestAnimationFrame","calculatePosition","focusInitialItem","setupListeners","setTimeout","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","s","anchorEl","popup","el","querySelector","a","getBoundingClientRect","pw","offsetWidth","ph","offsetHeight","top","left","right","width","bottom","height","Math","min","max","window","innerWidth","innerHeight","flat","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","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","section","si","header","undefined","isFocused","type","isDestructive","disabled","tabIndex","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 200px;\n  max-width: 600px;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\n.menu-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\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  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.menu-item--focused: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:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\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  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  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';\n\nexport type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  showToggle?: boolean;\n  toggleValue?: boolean;\n}\n\nexport interface MenuSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nconst CLOSE_ANIMATION_MS = 220;\nconst VP_PAD = 4;\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  @Prop() sideOffset: number = 4;\n  @Prop() alignOffset: number = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      requestAnimationFrame(() => {\n        this.calculatePosition();\n        this.positionReady = true;\n        this.focusInitialItem();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, CLOSE_ANIMATION_MS);\n    }\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(s => s.items);\n  }\n\n  private calculatePosition() {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return;\n\n    const a = anchorEl.getBoundingClientRect();\n    const pw = popup.offsetWidth || 200;\n    const ph = popup.offsetHeight || 160;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - ph - this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'left':\n        x = a.left - pw - this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n      case 'right':\n        x = a.right + this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n    }\n\n    this.pos = {\n      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),\n      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),\n    };\n  }\n\n  /** 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 = () => this.calculatePosition();\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.open) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n    this.close();\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label=\"Menu\"\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\n              )}\n              {section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    aria-current={item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["menuCss","CLOSE_ANIMATION_MS","VP_PAD","Menu","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","items","sections","side","align","sideOffset","alignOffset","shouldRender","closing","pos","x","y","focusedIndex","positionReady","clickOutsideHandler","scrollResizeHandler","closeTimer","itemEls","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","isOpen","requestAnimationFrame","calculatePosition","focusInitialItem","setupListeners","setTimeout","resolvedAnchor","anchor","anchorId","document","getElementById","activeSections","length","flatItems","flatMap","s","anchorEl","popup","el","querySelector","a","getBoundingClientRect","pw","offsetWidth","ph","offsetHeight","top","left","right","width","bottom","height","Math","min","max","window","innerWidth","innerHeight","flat","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","render","h","Host","style","display","flatIdx","popupStyle","position","transform","round","zIndex","visibility","menuWidth","minWidth","class","role","section","si","header","undefined","isFocused","type","isDestructive","disabled","tabIndex","onClick","onFocus","label","subtext","showToggle","toggleValue"],"sources":["src/wc/components/Menu/Menu.css?tag=ds-menu&encapsulation=scoped","src/wc/components/Menu/Menu.tsx"],"sourcesContent":["/* ── Popup shell ─────────────────────────────────────────────────────────── */\n\n.menu-popup {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-width: 200px;\n  max-width: 600px;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-075);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: menuFadeIn var(--effect-motion-short-2) forwards;\n  backface-visibility: hidden;\n  will-change: transform;\n}\n\n.menu-popup--closing {\n  animation: menuFadeOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes menuFadeIn {\n  from { opacity: 0; transform: inherit scale(0.97); }\n  to   { opacity: 1; }\n}\n\n@keyframes menuFadeOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n/* ── Sections ────────────────────────────────────────────────────────────── */\n\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  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.menu-item--focused: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:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\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  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  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';\n\nexport type MenuSide = 'top' | 'right' | 'bottom' | 'left';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport interface MenuItemData {\n  label: string;\n  value?: string;\n  subtext?: string;\n  isSelected?: boolean;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n  showToggle?: boolean;\n  toggleValue?: boolean;\n}\n\nexport interface MenuSection {\n  header?: string;\n  items: MenuItemData[];\n}\n\nconst CLOSE_ANIMATION_MS = 220;\nconst VP_PAD = 4;\n\n@Component({\n  tag: 'ds-menu',\n  styleUrl: 'Menu.css',\n  scoped: true,\n})\nexport class Menu {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() items: MenuItemData[] = [];\n  @Prop() sections: MenuSection[] = [];\n  @Prop() side: MenuSide = 'bottom';\n  @Prop() align: MenuAlign = 'start';\n  @Prop() sideOffset: number = 4;\n  @Prop() alignOffset: number = 0;\n  @Prop() menuWidth: string | undefined;\n  @Prop() minWidth: string | undefined;\n  /** External trigger element to position against. Set via JS: menuEl.anchor = buttonEl */\n  @Prop() anchor: HTMLElement | undefined;\n  /** ID of the external trigger element for positioning */\n  @Prop() anchorId: string | undefined;\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n  @State() private pos: { x: number; y: number } = { x: 0, y: 0 };\n  @State() private focusedIndex: number = 0;\n  @State() private positionReady: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n  @Event() dsSelect!: EventEmitter<MenuItemData>;\n\n  private clickOutsideHandler: ((e: MouseEvent) => void) | null = null;\n  private scrollResizeHandler: (() => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private itemEls: HTMLElement[] = [];\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.shouldRender = true;\n      this.closing = false;\n      this.positionReady = false;\n      requestAnimationFrame(() => {\n        this.calculatePosition();\n        this.positionReady = true;\n        this.focusInitialItem();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      this.teardownListeners();\n      this.closeTimer = setTimeout(() => {\n        this.shouldRender = false;\n        this.closing = false;\n        this.closeTimer = null;\n      }, CLOSE_ANIMATION_MS);\n    }\n  }\n\n  private get resolvedAnchor(): HTMLElement | null {\n    if (this.anchor) return this.anchor;\n    if (this.anchorId) return document.getElementById(this.anchorId);\n    return null;\n  }\n\n  private get activeSections(): MenuSection[] {\n    if (this.sections.length > 0) return this.sections;\n    if (this.items.length > 0) return [{ items: this.items }];\n    return [];\n  }\n\n  private get flatItems(): MenuItemData[] {\n    return this.activeSections.flatMap(s => s.items);\n  }\n\n  private calculatePosition() {\n    const anchorEl = this.resolvedAnchor;\n    if (!anchorEl) return;\n    const popup = this.el.querySelector('.menu-popup') as HTMLElement | null;\n    if (!popup) return;\n\n    const a = anchorEl.getBoundingClientRect();\n    const pw = popup.offsetWidth || 200;\n    const ph = popup.offsetHeight || 160;\n    let x = 0, y = 0;\n\n    switch (this.side) {\n      case 'top':\n        y = a.top - ph - this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'bottom':\n        y = a.bottom + this.sideOffset;\n        x = this.align === 'start' ? a.left + this.alignOffset\n          : this.align === 'end' ? a.right - pw + this.alignOffset\n          : a.left + a.width / 2 - pw / 2 + this.alignOffset;\n        break;\n      case 'left':\n        x = a.left - pw - this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n      case 'right':\n        x = a.right + this.sideOffset;\n        y = this.align === 'start' ? a.top + this.alignOffset\n          : this.align === 'end' ? a.bottom - ph + this.alignOffset\n          : a.top + a.height / 2 - ph / 2 + this.alignOffset;\n        break;\n    }\n\n    this.pos = {\n      x: Math.min(Math.max(x, VP_PAD), window.innerWidth - pw - VP_PAD),\n      y: Math.min(Math.max(y, VP_PAD), window.innerHeight - ph - VP_PAD),\n    };\n  }\n\n  /** 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 = () => this.calculatePosition();\n\n    document.addEventListener('mousedown', this.clickOutsideHandler, true);\n    window.addEventListener('scroll', this.scrollResizeHandler, true);\n    window.addEventListener('resize', this.scrollResizeHandler);\n  }\n\n  private teardownListeners() {\n    if (this.clickOutsideHandler) {\n      document.removeEventListener('mousedown', this.clickOutsideHandler, true);\n      this.clickOutsideHandler = null;\n    }\n    if (this.scrollResizeHandler) {\n      window.removeEventListener('scroll', this.scrollResizeHandler, true);\n      window.removeEventListener('resize', this.scrollResizeHandler);\n      this.scrollResizeHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    this.resolvedAnchor?.focus();\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.open) return;\n    const flat = this.flatItems;\n    const enabled = flat.map((it, i) => ({ it, i })).filter(({ it }) => !it.isInactive).map(({ i }) => i);\n    if (!enabled.length) return;\n\n    const cur = enabled.indexOf(this.focusedIndex);\n    const safe = cur < 0 ? 0 : cur;\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe + 1) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'ArrowUp':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[(safe - 1 + enabled.length) % enabled.length];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Home':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[0];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'End':\n        e.preventDefault(); e.stopPropagation();\n        this.focusedIndex = enabled[enabled.length - 1];\n        this.focusItem(this.focusedIndex);\n        break;\n      case 'Escape':\n        e.preventDefault();\n        this.close();\n        break;\n      case 'Tab':\n        e.preventDefault();\n        this.close();\n        break;\n    }\n  }\n\n  private focusItem(idx: number) {\n    const btns = this.el.querySelectorAll<HTMLElement>('.menu-item');\n    btns[idx]?.focus();\n  }\n\n  private handleItemClick(item: MenuItemData) {\n    if (item.isInactive) return;\n    this.dsSelect.emit(item);\n    this.close();\n  }\n\n  render() {\n    if (!this.shouldRender) return <Host style={{ display: 'contents' }} />;\n\n    const sections = this.activeSections;\n    let flatIdx = 0;\n\n    const popupStyle: Record<string, string> = {\n      position: 'fixed',\n      left: '0',\n      top: '0',\n      transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n      zIndex: '9998',\n      visibility: this.positionReady ? 'visible' : 'hidden',\n    };\n\n    if (this.menuWidth) popupStyle['width'] = this.menuWidth;\n    if (this.minWidth) popupStyle['min-width'] = this.minWidth;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'menu-popup': true, 'menu-popup--closing': this.closing }}\n          style={popupStyle}\n          role=\"menu\"\n          aria-label=\"Menu\"\n          aria-orientation=\"vertical\"\n        >\n          {sections.map((section, si) => (\n            <div\n              key={si}\n              class={{ 'menu-section': true, 'menu-section--divided': si < sections.length - 1 }}\n              role={section.header ? 'group' : undefined}\n              aria-label={section.header}\n            >\n              {section.header && (\n                <div class=\"section-header\" aria-hidden=\"true\">\n                  <span class=\"text-body-small-emphasis section-label\">{section.header}</span>\n                </div>\n              )}\n              {section.items.map(item => {\n                const idx = flatIdx++;\n                const isFocused = this.focusedIndex === idx;\n                return (\n                  <button\n                    key={idx}\n                    type=\"button\"\n                    class={{\n                      'menu-item': true,\n                      'menu-item--selected': !!item.isSelected,\n                      'menu-item--inactive': !!item.isInactive,\n                      'menu-item--destructive': !!item.isDestructive,\n                      'menu-item--focused': isFocused,\n                    }}\n                    role=\"menuitem\"\n                    aria-current={item.isSelected ? 'true' : undefined}\n                    disabled={item.isInactive}\n                    tabIndex={isFocused ? 0 : -1}\n                    onClick={() => this.handleItemClick(item)}\n                    onFocus={() => { this.focusedIndex = idx; }}\n                  >\n                    <div class=\"menu-item__content\">\n                      <span class={item.isSelected ? 'text-body-medium-emphasis menu-item__label' : 'text-body-medium menu-item__label'}>\n                        {item.label}\n                      </span>\n                      {item.subtext && (\n                        <span class=\"text-body-small menu-item__subtext\">{item.subtext}</span>\n                      )}\n                    </div>\n                    {item.showToggle && (\n                      <div class={{ 'menu-item__toggle': true, 'menu-item__toggle--on': !!item.toggleValue }} aria-hidden=\"true\">\n                        <div class=\"menu-item__toggle-thumb\" />\n                      </div>\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ))}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/types/.stencil/Icon/icon-resolve.d.ts

@@ -0,0 +1,4 @@
+export type IconMetaCategory = 'system' | 'flag';
+/** Map a consumer-facing icon name to the canonical IcoMo export key. */
+export declare function resolveIconName(name: string, category?: IconMetaCategory): string;
+//# sourceMappingURL=icon-resolve.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "0.14.2",
+  "version": "1.0.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -39,8 +39,8 @@
     "src/angular"
   ],
   "scripts": {
-    "build": "stencil build && node scripts/patch-index-types.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts",
+    "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts tests/icon-resolve.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",
@@ -54,19 +54,15 @@
     "mcp": "node scripts/mcp-server.mjs"
   },
   "peerDependencies": {
+    "@ds-mo/icons": "^5.0.1",
     "@ds-mo/tokens": ">=2.9.0"
   },
-  "peerDependenciesMeta": {
-    "@ds-mo/icons": {
-      "optional": true
-    }
-  },
   "devDependencies": {
-    "@ds-mo/icons": "^4.3.1",
+    "@ds-mo/icons": "^5.0.1",
     "@ds-mo/tokens": "^2.9.0",
-    "@playwright/test": "^1.55.0",
     "@eslint/js": "^10.0.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
+    "@playwright/test": "^1.55.0",
     "@stencil/angular-output-target": "^1.3.1",
     "@stencil/core": "^4.43.4",
     "@storybook/addon-docs": "^10.4.2",