@ds-mo/ui 2.2.1 → 2.4.0

package/dist/components/{p-Bl-GTn9s.js → p-BTndnbR_.js}

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonUnfilledIconCss","ButtonUnfilledIcon","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","icon","isActive","activeFill","hasBorder","dot","inactive","type","ariaLabel","buttonEl","handleClick","event","dsClick","emit","dsChange","setFocus","focus","render","bg","background","cls","h","Host","key","tabIndex","ref","el","class","disabled","focusTabIndex","controls","expanded","undefined","String","haspopup","pressed","onClick","name","size","color","variant","label"],"sources":["src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.css?tag=ds-button-unfilled-icon&encapsulation=scoped","src/wc/components/ButtonUnfilledIcon/ButtonUnfilledIcon.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n\n:host {\n  display: inline-flex;\n  flex: 0 0 auto;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  outline: none;\n  --ds-button-unfilled-icon-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-icon-border: var(--color-border-tertiary);\n}\n\n.button-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-size-400);\n  height: var(--dimension-size-400);\n  padding: var(--dimension-space-075);\n  background: transparent;\n  border: var(--dimension-stroke-width-012, 1px) solid transparent;\n  border-radius: var(--dimension-radius-025);\n  color: var(--ds-button-unfilled-icon-fg);\n  cursor: pointer;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  overflow: hidden;\n  transition: color var(--effect-motion-short-2);\n}\n\n.button-icon::before,\n.button-icon::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  background: transparent;\n  pointer-events: none;\n  transition: none;\n  z-index: 1;\n}\n\n.button-icon::before {\n  z-index: 0;\n}\n\n.button-icon--active-fill::before {\n  background: var(--ds-button-unfilled-icon-active-bg);\n}\n\n.button-icon:hover:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-hover-bg);\n  transition: none;\n}\n\n.button-icon:active:not(.button-icon--inactive)::after {\n  background: var(--ds-button-unfilled-icon-pressed-bg);\n  transition: none;\n}\n\n.button-icon--active {\n  color: var(--ds-button-unfilled-icon-fg-active);\n}\n\n.button-icon--bordered {\n  border-color: var(--ds-button-unfilled-icon-border);\n}\n\n.button-icon--bordered::after {\n  inset: var(--dimension-stroke-width-012, 1px);\n}\n\n.button-icon--bordered::before {\n  inset: var(--dimension-stroke-width-012, 1px);\n}\n\n.button-icon--inactive {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.button-icon--on-medium {\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-medium-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-medium-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-medium-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-medium-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-medium-background-focus);\n}\n\n.button-icon--on-bold {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-bold-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-bold-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-bold-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-bold-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n}\n\n.button-icon--on-strong {\n  --ds-button-unfilled-icon-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-interaction-on-strong-background-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-interaction-on-strong-background-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-interaction-on-strong-background-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-background-strong-neutral);\n  --ds-focus-ring-color: var(--color-interaction-on-strong-background-focus);\n}\n\n.button-icon--on-always-dark {\n  --ds-button-unfilled-icon-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-always-dark-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-always-dark-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-always-dark-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-always-dark-background);\n  --ds-focus-ring-color: var(--color-always-dark-interaction-focus);\n}\n\n.button-icon--on-navigation {\n  --ds-button-unfilled-icon-fg: var(--color-navigation-foreground-secondary);\n  --ds-button-unfilled-icon-fg-active: var(--color-navigation-foreground-primary);\n  --ds-button-unfilled-icon-active-bg: var(--color-navigation-interaction-active);\n  --ds-button-unfilled-icon-hover-bg: var(--color-navigation-interaction-hover);\n  --ds-button-unfilled-icon-pressed-bg: var(--color-navigation-interaction-pressed);\n  --ds-button-unfilled-icon-dot-ring: var(--color-navigation-background);\n  --ds-focus-ring-color: var(--color-navigation-interaction-focus);\n}\n\n.button-icon__icon-wrap {\n  position: relative;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  z-index: 2;\n}\n\n.button-icon__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  pointer-events: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\nexport type ButtonUnfilledIconBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'always-dark'\n  | 'navigation';\n\n@Component({\n  tag: 'ds-button-unfilled-icon',\n  styleUrl: 'ButtonUnfilledIcon.css',\n  scoped: true,\n})\nexport class ButtonUnfilledIcon {\n  @Element() el!: HTMLElement;\n\n  /** Icon name passed to <ds-icon>. */\n  @Prop() icon: string = '';\n\n  /** Active/selected visual state. */\n  @Prop() isActive: boolean = false;\n\n  /** When active, render the active interaction fill. Shell chrome can disable this while keeping active icon colour. */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px tertiary border without changing the interaction model. */\n  @Prop() hasBorder: boolean = false;\n\n  /** Show a notification dot at the top-right of the icon zone. */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() inactive: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Parent surface context — adjusts hover/press/focus colours for coloured backgrounds. */\n  @Prop() background: ButtonUnfilledIconBackground | undefined;\n\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string = 'action';\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: string | undefined;\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.inactive) return;\n    this.dsClick.emit(event);\n    this.dsChange.emit(!this.isActive);\n  };\n\n  render() {\n    const bg = this.background;\n\n    const cls: Record<string, boolean> = {\n      'button-icon': true,\n      'ds-focus-ring-inset': true,\n      'button-icon--active': this.isActive,\n      'button-icon--active-fill': this.isActive && this.activeFill,\n      'button-icon--bordered': this.hasBorder,\n      'button-icon--inactive': this.inactive,\n      'button-icon--on-medium': bg === 'medium',\n      'button-icon--on-bold': bg === 'bold',\n      'button-icon--on-strong': bg === 'strong',\n      'button-icon--on-always-dark': bg === 'always-dark',\n      'button-icon--on-navigation': bg === 'navigation',\n    };\n\n    return (\n      <Host tabIndex={-1}>\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.inactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.ariaLabel}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.haspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onClick={this.handleClick}\n        >\n          <span class=\"button-icon__icon-wrap\">\n            <ds-icon name={this.icon} size=\"md\" color=\"inherit\" />\n            {this.dot && (\n              <ds-badge\n                class=\"button-icon__dot\"\n                variant=\"dot\"\n                background=\"var(--ds-button-unfilled-icon-dot-ring)\"\n                label=\"\"\n                aria-hidden=\"true\"\n              />\n            )}\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qIAAA,MAAMA,EAAwB,IAAM,q/M,MCevBC,EAAkBC,EAAA,MAAAD,UAAAE,EAL/B,WAAAC,CAAAC,G,4GASUC,KAAAC,KAAe,GAGfD,KAAAE,SAAoB,MAGpBF,KAAAG,WAAsB,KAGtBH,KAAAI,UAAqB,MAGrBJ,KAAAK,IAAe,MAGfL,KAAAM,SAAoB,MAGpBN,KAAAO,KAAsC,SAKXP,KAAAQ,UAAoB,SAe/CR,KAAAS,SAAqC,KAOrCT,KAAAU,YAAeC,IACrB,GAAIX,KAAKM,SAAU,OACnBN,KAAKY,QAAQC,KAAKF,GAClBX,KAAKc,SAASD,MAAMb,KAAKE,SAAS,CAqDrC,CA5DC,cAAMa,GACJf,KAAKS,UAAUO,O,CASjB,MAAAC,GACE,MAAMC,EAAKlB,KAAKmB,WAEhB,MAAMC,EAA+B,CACnC,cAAe,KACf,sBAAuB,KACvB,sBAAuBpB,KAAKE,SAC5B,2BAA4BF,KAAKE,UAAYF,KAAKG,WAClD,wBAAyBH,KAAKI,UAC9B,wBAAyBJ,KAAKM,SAC9B,yBAA0BY,IAAO,SACjC,uBAAwBA,IAAO,OAC/B,yBAA0BA,IAAO,SACjC,8BAA+BA,IAAO,cACtC,6BAA8BA,IAAO,cAGvC,OACEG,EAACC,EAAI,CAAAC,IAAA,2CAACC,UAAU,GACdH,EAAA,UAAAE,IAAA,2CACEE,IAAKC,IACH1B,KAAKS,SAAWiB,GAAM,IAAI,EAE5BnB,KAAMP,KAAKO,KACXoB,MAAOP,EACPQ,SAAU5B,KAAKM,SACfkB,SAAUxB,KAAK6B,eAAiB,EAAC,aACrB7B,KAAKQ,UAAS,gBACXR,KAAK8B,SAAQ,gBACb9B,KAAK+B,WAAaC,UAAYA,UAAYC,OAAOjC,KAAK+B,UAAS,gBAC/D/B,KAAKkC,SAAQ,eACdlC,KAAKmC,UAAYH,UAAYA,UAAYC,OAAOjC,KAAKmC,SACnEC,QAASpC,KAAKU,aAEdW,EAAA,QAAAE,IAAA,2CAAMI,MAAM,0BACVN,EAAA,WAAAE,IAAA,2CAASc,KAAMrC,KAAKC,KAAMqC,KAAK,KAAKC,MAAM,YACzCvC,KAAKK,KACJgB,EAAA,YAAAE,IAAA,2CACEI,MAAM,mBACNa,QAAQ,MACRrB,WAAW,0CACXsB,MAAM,GAAE,cACI,W","ignoreList":[]}

package/dist/components/p-D4zKc1RW.js

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

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

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

package/dist/types/components/AppShell/AppShell.d.ts

@@ -11,6 +11,8 @@ export declare class AppShell {
      * When set, overrides the built-in radial wash.
      */
     gradientSrc: string;
+    /** When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer. */
+    shortcutsEnabled: boolean;
     el: HTMLElement;
     private resizeObserver;
     private readonly panelNavTransition;
@@ -40,6 +42,7 @@ export declare class AppShell {
     /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */
     private resolveViewportDimensions;
     private chromeLayerActive;
+    handleWindowKeyDown(e: KeyboardEvent): void;
     private syncChrome;
     render(): any;
 }

package/dist/types/components/BarNav/BarNav.d.ts

@@ -35,6 +35,7 @@ export declare class BarNav {
     private visibleTabs;
     private overflowTabs;
     private menuInitialFocusVisible;
+    private overflowRovingFocused;
     private static readonly HOST_PROP_SYNC_BUDGET;
     private static readonly INTRINSIC_WIDTH_RETRY_MAX;
     private static readonly TAB_LAYOUT_COMMIT_MAX_FRAMES;
@@ -101,6 +102,9 @@ export declare class BarNav {
     private focusVisibleSelectedTab;
     private handleTabChange;
     private toggleTabMenu;
+    private handleTabRovingExit;
+    private handleOverflowFocus;
+    private handleOverflowBlur;
     private handleTriggerKeyDown;
     render(): any;
 }

package/dist/types/components/ButtonUnfilledIcon/ButtonUnfilledIcon.d.ts

@@ -23,6 +23,11 @@ export declare class ButtonUnfilledIcon {
     expanded: boolean | undefined;
     haspopup: string | undefined;
     pressed: boolean | undefined;
+    /**
+     * Native `tabindex` for roving keyboard groups in shell chrome.
+     * Omit for the default button tab stop (`0`).
+     */
+    focusTabIndex?: number;
     dsClick: EventEmitter<MouseEvent>;
     dsChange: EventEmitter<boolean>;
     private buttonEl;

package/dist/types/components/PanelNav/PanelNav.d.ts

@@ -90,12 +90,18 @@ export declare class PanelNav {
     /** Centralised toggle: updates `collapsed`, emits `dsNavToggle`, optionally persists. */
     private applyToggle;
     private getAllItems;
-    private syncRovingIndex;
-    private handleItemKeyDown;
+    private getFooterRovingIndex;
+    private getUserRovingIndex;
+    private getRovingElement;
+    private focusRovingAt;
+    private activateRovingIndex;
+    private handleRovingKeyDown;
     private checkScroll;
     private handleBodyScroll;
     private handleItemClick;
     private handleToggle;
+    /** Toggle expanded/collapsed panel nav — used by shell keyboard shortcuts. */
+    toggleCollapsed(): Promise<void>;
     private handleFooterAction;
     private handleUserAction;
     private clearEdgeOverlayTimer;

package/dist/types/components/PanelTools/PanelTools.d.ts

@@ -26,8 +26,10 @@ export declare class PanelTools {
     private motion;
     /** Suppresses width transition until the host has painted its initial open state. */
     private readyForMotion;
+    private rovingIndex;
     private motionEnableGeneration;
     private get railItems();
+    private get orderedRailItems();
     disconnectedCallback(): void;
     private deferMotionEnable;
     connectedCallback(): void;
@@ -43,6 +45,12 @@ export declare class PanelTools {
     private isViewActive;
     private headerLabel;
     private handleToolChange;
+    /** Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this. */
+    activateTool(id: PanelToolsToolId): Promise<void>;
+    /** Close the tools drawer when open — used by shell keyboard shortcuts. */
+    closeDrawer(): Promise<void>;
+    private focusRailAt;
+    private handleRailKeyDown;
     private renderRailAction;
     render(): any;
 }

package/dist/types/components/PanelTools/panel-tools-utils.d.ts

@@ -1,7 +1,13 @@
-import type { PanelToolsItem } from './panel-tools-types';
+import type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';
 export declare function parsePanelToolsItems(items: PanelToolsItem[], itemsJson: string): PanelToolsItem[];
 export declare function shouldResyncPanelToolsItems(prev: PanelToolsItem[], next: PanelToolsItem[]): boolean;
 export type PanelToolsMotion = 'opening' | 'closing' | 'idle';
 /** True when the drawer clip is fully closed — safe to skip painting slot content. */
 export declare function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean;
+/** Toggle or switch rail tool selection — repeat activation closes the active tool. */
+export declare function resolvePanelToolActivation(open: boolean, activeTool: PanelToolsToolId | '', id: PanelToolsToolId): {
+    open: boolean;
+    activeTool: PanelToolsToolId;
+    selected: boolean;
+};
 //# sourceMappingURL=panel-tools-utils.d.ts.map

package/dist/types/components/TabGroupNav/TabGroupNav.d.ts

@@ -9,19 +9,38 @@ export declare class TabGroupNav {
     ariaLabel: string | undefined;
     ariaLabelledby: string | undefined;
     orientation: 'horizontal' | 'vertical';
+    /**
+     * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection.
+     * Used by bar nav where each tab is a full page transition.
+     */
+    selectionFollowsFocus: boolean;
+    /** When `false`, every tab uses `tabindex="-1"` (another chrome control owns the tab stop). */
+    rovingEnabled: boolean;
     dsChange: EventEmitter<string>;
+    /** Fired when arrow navigation reaches the first/last tab in manual selection mode. */
+    dsRovingExit: EventEmitter<'start' | 'end'>;
+    private focusedTabId;
     private get selectableTabs();
-    private selectTab;
-    private focusTab;
-    /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */
+    componentWillLoad(): void;
     onValueChange(next: string, prev: string | undefined): void;
+    onTabsChange(): void;
+    focusTab(id: string): Promise<void>;
+    focusLastTab(): Promise<void>;
+    focusFirstTab(): Promise<void>;
+    private syncFocusedTabId;
+    private selectTab;
+    private getFocusedIndex;
+    private findEnabledLinear;
     /**
      * Find the next non-disabled tab index relative to `from`, stepping by `step`.
      * Returns `from` unchanged if no other enabled tab exists.
      */
     private findEnabled;
+    private moveFocusToIndex;
+    private activateFocusedTab;
     handleKeyDown(e: KeyboardEvent): void;
     private getBgClass;
+    private tabIndexForTab;
     render(): any;
 }
 //# sourceMappingURL=TabGroupNav.d.ts.map

package/dist/types/components.d.ts

@@ -118,6 +118,11 @@ export namespace Components {
           * @default 'dashboard'
          */
         "navStyle": NavChromeStyle;
+        /**
+          * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
+          * @default true
+         */
+        "shortcutsEnabled": boolean;
     }
     interface DsBadge {
         /**
@@ -332,6 +337,10 @@ export namespace Components {
          */
         "dot": boolean;
         "expanded": boolean | undefined;
+        /**
+          * Native `tabindex` for roving keyboard groups in shell chrome. Omit for the default button tab stop (`0`).
+         */
+        "focusTabIndex"?: number;
         /**
           * Show a 1px tertiary border without changing the interaction model.
           * @default false
@@ -693,6 +702,10 @@ export namespace Components {
           * @default ''
          */
         "storageKey": string;
+        /**
+          * Toggle expanded/collapsed panel nav — used by shell keyboard shortcuts.
+         */
+        "toggleCollapsed": () => Promise<void>;
         /**
           * Single character shown in the collapsed avatar
           * @default ''
@@ -705,11 +718,19 @@ export namespace Components {
         "userName": string;
     }
     interface DsPanelTools {
+        /**
+          * Toggle any rail tool open/closed — shell shortcuts ⌘/Ctrl+K/A/S/M/N call this.
+         */
+        "activateTool": (id: PanelToolsToolId) => Promise<void>;
         /**
           * Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`.
           * @default ''
          */
         "activeTool": PanelToolsToolId | '';
+        /**
+          * Close the tools drawer when open — used by shell keyboard shortcuts.
+         */
+        "closeDrawer": () => Promise<void>;
         /**
           * Rail items rendered in the right column. Set via JS property: `el.items = [...]`. Replace the array reference to update.
           * @default []
@@ -890,10 +911,23 @@ export namespace Components {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
         "background": TabGroupNavBackground | undefined;
+        "focusFirstTab": () => Promise<void>;
+        "focusLastTab": () => Promise<void>;
+        "focusTab": (id: string) => Promise<void>;
         /**
           * @default 'horizontal'
          */
         "orientation": 'horizontal' | 'vertical';
+        /**
+          * When `false`, every tab uses `tabindex="-1"` (another chrome control owns the tab stop).
+          * @default true
+         */
+        "rovingEnabled": boolean;
+        /**
+          * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection. Used by bar nav where each tab is a full page transition.
+          * @default true
+         */
+        "selectionFollowsFocus": boolean;
         /**
           * @default []
          */
@@ -1627,6 +1661,7 @@ declare global {
     };
     interface HTMLDsTabGroupNavElementEventMap {
         "dsChange": string;
+        "dsRovingExit": 'start' | 'end';
     }
     interface HTMLDsTabGroupNavElement extends Components.DsTabGroupNav, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDsTabGroupNavElementEventMap>(type: K, listener: (this: HTMLDsTabGroupNavElement, ev: DsTabGroupNavCustomEvent<HTMLDsTabGroupNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -1820,6 +1855,11 @@ declare namespace LocalJSX {
           * @default 'dashboard'
          */
         "navStyle"?: NavChromeStyle;
+        /**
+          * When `true` (default), registers global shell keyboard shortcuts. Tool chords (⌘/Ctrl+K/A/S/M/N) toggle their drawer open and closed; ⌘/Ctrl+[ toggles panel nav; ⌘/Ctrl+] closes any open tool drawer.
+          * @default true
+         */
+        "shortcutsEnabled"?: boolean;
     }
     interface DsBadge {
         /**
@@ -2047,6 +2087,10 @@ declare namespace LocalJSX {
          */
         "dot"?: boolean;
         "expanded"?: boolean | undefined;
+        /**
+          * Native `tabindex` for roving keyboard groups in shell chrome. Omit for the default button tab stop (`0`).
+         */
+        "focusTabIndex"?: number;
         /**
           * Show a 1px tertiary border without changing the interaction model.
           * @default false
@@ -2665,10 +2709,24 @@ declare namespace LocalJSX {
         "ariaLabelledby"?: string | undefined;
         "background"?: TabGroupNavBackground | undefined;
         "onDsChange"?: (event: DsTabGroupNavCustomEvent<string>) => void;
+        /**
+          * Fired when arrow navigation reaches the first/last tab in manual selection mode.
+         */
+        "onDsRovingExit"?: (event: DsTabGroupNavCustomEvent<'start' | 'end'>) => void;
         /**
           * @default 'horizontal'
          */
         "orientation"?: 'horizontal' | 'vertical';
+        /**
+          * When `false`, every tab uses `tabindex="-1"` (another chrome control owns the tab stop).
+          * @default true
+         */
+        "rovingEnabled"?: boolean;
+        /**
+          * When `false`, arrow keys move focus only — Space/Enter (or click) commits selection. Used by bar nav where each tab is a full page transition.
+          * @default true
+         */
+        "selectionFollowsFocus"?: boolean;
         /**
           * @default []
          */
@@ -2906,6 +2964,7 @@ declare namespace LocalJSX {
         "gradient": boolean;
         "grid": boolean;
         "gradientSrc": string;
+        "shortcutsEnabled": boolean;
     }
     interface DsBadgeAttributes {
         "variant": BadgeVariant;
@@ -2977,6 +3036,7 @@ declare namespace LocalJSX {
         "expanded": boolean | undefined;
         "haspopup": string | undefined;
         "pressed": boolean | undefined;
+        "focusTabIndex": number;
     }
     interface DsCardAttributes {
         "elevation": CardElevation;
@@ -3153,6 +3213,8 @@ declare namespace LocalJSX {
         "ariaLabel": string | undefined;
         "ariaLabelledby": string | undefined;
         "orientation": 'horizontal' | 'vertical';
+        "selectionFollowsFocus": boolean;
+        "rovingEnabled": boolean;
     }
     interface DsTableAttributes {
         "loading": boolean;

package/dist/types/nav/shell-shortcuts.d.ts

@@ -0,0 +1,10 @@
+import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';
+export type ShellShortcutAction = 'toggle-panel-nav' | 'close-panel-tools' | `open-tool:${PanelToolsToolId}`;
+/** Tool shortcut chords (⌘/Ctrl+K/A/S/M/N) toggle open/closed via `ds-panel-tools.activateTool`. */
+/** True when Cmd (macOS) or Ctrl (Windows/Linux) is held without Alt/Shift. */
+export declare function isShellShortcutModifier(e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): boolean;
+/** Skip shell shortcuts while typing in an editable control. */
+export declare function isEditableShortcutTarget(target: EventTarget | null): boolean;
+/** Resolve a shell chrome shortcut, or `null` when the chord is not handled. */
+export declare function resolveShellShortcut(e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>): ShellShortcutAction | null;
+//# sourceMappingURL=shell-shortcuts.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -69,7 +69,7 @@
     "pretest": "node scripts/generate-icon-catalog.mjs",
     "build": "stencil build && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/write-build-stamp.mjs",
     "verify:pack": "node scripts/verify-npm-pack.mjs && node scripts/verify-nav-import.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.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-catalog.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/panel-tools.test.ts tests/shell-shortcuts.test.ts tests/shell-view-transition.test.ts tests/shell-gradient.test.ts tests/shell-chrome-metrics.test.ts tests/shell-chrome-layer.test.ts tests/chrome-transition.test.ts tests/bar-nav-overflow-hysteresis.test.ts tests/badge-gradient-ring.test.ts tests/scroll-edge-fade.test.ts tests/resolve-css-length-px.test.ts tests/resolve-css-time-ms.test.ts tests/overlay-positioning.test.ts tests/menu-position.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-catalog.test.ts",
     "test:e2e": "npm run build && playwright test",
     "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",

package/src/angular/proxies.ts

@@ -36,14 +36,14 @@ export declare interface DsAccordion extends Components.DsAccordion {
 
 
 @ProxyCmp({
-  inputs: ['gradient', 'gradientSrc', 'grid', 'navStyle']
+  inputs: ['gradient', 'gradientSrc', 'grid', 'navStyle', 'shortcutsEnabled']
 })
 @Component({
   selector: 'ds-app-shell',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['gradient', 'gradientSrc', 'grid', 'navStyle'],
+  inputs: ['gradient', 'gradientSrc', 'grid', 'navStyle', 'shortcutsEnabled'],
   standalone: false
 })
 export class DsAppShell {
@@ -234,7 +234,7 @@ export declare interface DsButtonGroup extends Components.DsButtonGroup {
 
 
 @ProxyCmp({
-  inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
   methods: ['setFocus']
 })
 @Component({
@@ -242,7 +242,7 @@ export declare interface DsButtonGroup extends Components.DsButtonGroup {
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
+  inputs: ['activeFill', 'ariaLabel', 'background', 'controls', 'dot', 'expanded', 'focusTabIndex', 'hasBorder', 'haspopup', 'icon', 'inactive', 'isActive', 'pressed', 'type'],
   outputs: ['dsClick', 'dsChange'],
   standalone: false
 })
@@ -639,7 +639,8 @@ export declare interface DsPagination extends Components.DsPagination {
 
 
 @ProxyCmp({
-  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'navStyle', 'routerMode', 'storageKey', 'userInitial', 'userName']
+  inputs: ['activeId', 'breakpoint', 'collapsed', 'currentUrl', 'disableViewTransition', 'groups', 'navStyle', 'routerMode', 'storageKey', 'userInitial', 'userName'],
+  methods: ['toggleCollapsed']
 })
 @Component({
   selector: 'ds-panel-nav',
@@ -695,7 +696,8 @@ export declare interface DsPanelNav extends Components.DsPanelNav {
 
 
 @ProxyCmp({
-  inputs: ['activeTool', 'items', 'itemsJson', 'open']
+  inputs: ['activeTool', 'items', 'itemsJson', 'open'],
+  methods: ['activateTool', 'closeDrawer']
 })
 @Component({
   selector: 'ds-panel-tools',
@@ -919,20 +921,22 @@ export declare interface DsTabGroup extends Components.DsTabGroup {
 
 
 @ProxyCmp({
-  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value']
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'rovingEnabled', 'selectionFollowsFocus', 'tabs', 'value'],
+  methods: ['focusTab', 'focusLastTab', 'focusFirstTab']
 })
 @Component({
   selector: 'ds-tab-group-nav',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'tabs', 'value'],
-  outputs: ['dsChange'],
+  inputs: ['ariaLabel', 'ariaLabelledby', 'background', 'orientation', 'rovingEnabled', 'selectionFollowsFocus', 'tabs', 'value'],
+  outputs: ['dsChange', 'dsRovingExit'],
   standalone: false
 })
 export class DsTabGroupNav {
   protected el: HTMLDsTabGroupNavElement;
   @Output() dsChange = new EventEmitter<CustomEvent<string>>();
+  @Output() dsRovingExit = new EventEmitter<CustomEvent<'start' | 'end'>>();
   constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
     c.detach();
     this.el = r.nativeElement;
@@ -943,6 +947,10 @@ export class DsTabGroupNav {
 export declare interface DsTabGroupNav extends Components.DsTabGroupNav {
 
   dsChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Fired when arrow navigation reaches the first/last tab in manual selection mode.
+   */
+  dsRovingExit: EventEmitter<CustomEvent<'start' | 'end'>>;
 }
 
 

package/src/react/ds-tab-group-nav.ts

@@ -15,13 +15,19 @@ import { type DsTabGroupNavCustomEvent } from "@ds-mo/ui";
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTabGroupNav as DsTabGroupNavElement, defineCustomElement as defineDsTabGroupNav } from "@ds-mo/ui/dist/components/ds-tab-group-nav.js";
 
-export type DsTabGroupNavEvents = { onDsChange: EventName<DsTabGroupNavCustomEvent<string>> };
+export type DsTabGroupNavEvents = {
+    onDsChange: EventName<DsTabGroupNavCustomEvent<string>>,
+    onDsRovingExit: EventName<DsTabGroupNavCustomEvent<'start' | 'end'>>
+};
 
 export const DsTabGroupNav: StencilReactComponent<DsTabGroupNavElement, DsTabGroupNavEvents, Components.DsTabGroupNav> = /*@__PURE__*/ createComponent<DsTabGroupNavElement, DsTabGroupNavEvents, Components.DsTabGroupNav>({
     tagName: 'ds-tab-group-nav',
     elementClass: DsTabGroupNavElement,
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
-    events: { onDsChange: 'dsChange' } as DsTabGroupNavEvents,
+    events: {
+        onDsChange: 'dsChange',
+        onDsRovingExit: 'dsRovingExit'
+    } as DsTabGroupNavEvents,
     defineCustomElement: defineDsTabGroupNav
 });