@ds-mo/ui 0.9.4 → 0.10.1

package/dist/components/p-D1cpKdRU.js

@@ -0,0 +1,2 @@
+import{p as r,H as o,c as e,h as t,a,t as s}from"./index.js";const n=()=>`.sc-ds-tab-group-h{display:block}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group{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)}.tab.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.tab.sc-ds-tab-group:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary)}.tab.sc-ds-tab-group:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.tab.sc-ds-tab-group:disabled,.tab[aria-disabled="true"].sc-ds-tab-group{opacity:0.5;cursor:not-allowed;pointer-events:none}.tab-list--vertical.sc-ds-tab-group .tab.sc-ds-tab-group{justify-content:flex-start}.tab__label.sc-ds-tab-group{position:relative;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__dot-wrap.sc-ds-tab-group{position:relative;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}.tab__dot.sc-ds-tab-group{width:var(--dimension-space-075);height:var(--dimension-space-075);border-radius:var(--dimension-radius-full, 9999px);background:var(--_dot)}.on-medium.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed)}.on-bold.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}`;const i=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.value="";this.tabs=[];this.orientation="horizontal"}selectTab(r){this.value=r;this.dsChange.emit(r)}findEnabled(r,o){const e=this.tabs.length;for(let t=0;t<e;t++){const a=(r+o*(t+1)+e*(t+1))%e;if(!this.tabs[a]?.disabled)return a}return r}handleKeyDown(r){if(!this.tabs.length)return;const o=this.tabs.findIndex((r=>r.id===this.value));const e=this.orientation==="vertical";let t=null;if(!e){if(r.key==="ArrowRight"){t=this.findEnabled(o,1)}else if(r.key==="ArrowLeft"){t=this.findEnabled(o,-1)}}else{if(r.key==="ArrowDown"){t=this.findEnabled(o,1)}else if(r.key==="ArrowUp"){t=this.findEnabled(o,-1)}}if(r.key==="Home"){const r=this.tabs.findIndex((r=>!r.disabled));t=r===-1?null:r}else if(r.key==="End"){const r=[...this.tabs].reverse().findIndex((r=>!r.disabled));t=r===-1?null:this.tabs.length-1-r}if(t!==null){r.preventDefault();const o=this.tabs[t];this.selectTab(o.id);const e=this.el.querySelector(`[data-tab-id="${o.id}"]`);e?.focus()}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const r=this.getBgClass();const o=this.orientation==="vertical";return t(a,{key:"eb385dcf5e03e68f92c6d310a13fe754af8258d0",class:"tab-group-host"},t("div",{key:"62cbb809e40f92dbf503a76438666411eabba2df",role:"tablist",class:{"tab-list":true,"tab-list--vertical":o},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":o?"vertical":undefined},this.tabs.map((o=>{const e=o.id===this.value;return t("button",{key:o.id,type:"button",role:"tab","data-tab-id":o.id,class:{tab:true,"tab--selected":e,[r]:!!r},"aria-selected":e,"aria-disabled":o.disabled||undefined,"aria-controls":o.panelId??undefined,disabled:o.disabled,tabIndex:e?0:-1,onClick:()=>!o.disabled&&this.selectTab(o.id)},t("span",{class:`tab__label ${e?"text-body-medium-emphasis":"text-body-medium"}`},o.label),o.dot&&t("span",{class:"tab__dot-wrap","aria-hidden":"true"},t("span",{class:"tab__dot"})))}))))}get el(){return this}static get style(){return n()}},[2,"ds-tab-group",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1]},[[0,"keydown","handleKeyDown"]]]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-tab-group"];r.forEach((r=>{switch(r){case"ds-tab-group":if(!customElements.get(s(r))){customElements.define(s(r),i)}break}}))}d();export{i as T,d};
+//# sourceMappingURL=p-D1cpKdRU.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","orientation","selectTab","id","dsChange","emit","findEnabled","from","step","len","length","n","i","disabled","handleKeyDown","e","currentIdx","findIndex","t","isVertical","nextIdx","key","first","lastEnabled","reverse","preventDefault","next","btn","el","querySelector","focus","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabel","ariaLabelledby","undefined","map","tab","isSelected","type","panelId","tabIndex","onClick","label","dot"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":[":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}\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: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\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:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n  outline-offset: var(--dimension-space-025);\n}\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 — 2px inset matches the Figma text-label frame */\n.tab__label {\n  position: relative;\n  padding: 0 var(--dimension-space-025);\n  white-space: nowrap;\n}\n\n/* Notification dot — 20×20 icon-slot wrapper, dot circle inside */\n.tab__dot-wrap {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  width: var(--dimension-space-075);\n  height: var(--dimension-space-075);\n  border-radius: var(--dimension-radius-full, 9999px);\n  background: var(--_dot);\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}\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  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  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  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n","import { Component, Prop, Event, EventEmitter, Element, Listen, h, Host } from '@stencil/core';\n\nexport type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';\n\nexport interface TabItem {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  /** id of the tabpanel this tab controls */\n  panelId?: string;\n  /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */\n  dot?: boolean;\n}\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabItem[] = [];\n  @Prop() background: TabBackground | 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  @Event() dsChange!: EventEmitter<string>;\n\n  private selectTab(id: string) {\n    this.value = id;\n    this.dsChange.emit(id);\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 len = this.tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!this.tabs[i]?.disabled) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    if (!this.tabs.length) return;\n\n    const currentIdx = this.tabs.findIndex(t => t.id === this.value);\n    const isVertical = this.orientation === 'vertical';\n\n    let nextIdx: number | null = null;\n\n    if (!isVertical) {\n      if (e.key === 'ArrowRight') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowLeft') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    } else {\n      if (e.key === 'ArrowDown') {\n        nextIdx = this.findEnabled(currentIdx, 1);\n      } else if (e.key === 'ArrowUp') {\n        nextIdx = this.findEnabled(currentIdx, -1);\n      }\n    }\n\n    if (e.key === 'Home') {\n      const first = this.tabs.findIndex(t => !t.disabled);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...this.tabs].reverse().findIndex(t => !t.disabled);\n      nextIdx = lastEnabled === -1 ? null : this.tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = this.tabs[nextIdx];\n      this.selectTab(next.id);\n      const btn = this.el.querySelector(`[data-tab-id=\"${next.id}\"]`) as HTMLElement | null;\n      btn?.focus();\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    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const isVertical = this.orientation === 'vertical';\n\n    return (\n      <Host class=\"tab-group-host\">\n        <div\n          role=\"tablist\"\n          class={{ 'tab-list': true, 'tab-list--vertical': isVertical }}\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n          aria-orientation={isVertical ? 'vertical' : undefined}\n        >\n          {this.tabs.map(tab => {\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                  [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={isSelected ? 0 : -1}\n                onClick={() => !tab.disabled && this.selectTab(tab.id)}\n              >\n                <span class={`tab__label ${isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'}`}>\n                  {tab.label}\n                </span>\n                {tab.dot && (\n                  <span class=\"tab__dot-wrap\" aria-hidden=\"true\">\n                    <span class=\"tab__dot\" />\n                  </span>\n                )}\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6DAAA,MAAMA,EAAc,IAAM,ioG,MCmBbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,KAAkB,GAIlBF,KAAAG,YAAyC,YAoHlD,CAhHS,SAAAC,CAAUC,GAChBL,KAAKC,MAAQI,EACbL,KAAKM,SAASC,KAAKF,E,CAOb,WAAAG,CAAYC,EAAcC,GAChC,MAAMC,EAAMX,KAAKE,KAAKU,OACtB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAKE,IAAK,CAC5B,MAAMC,GAAKL,EAAOC,GAAQG,EAAI,GAAKF,GAAOE,EAAI,IAAMF,EACpD,IAAKX,KAAKE,KAAKY,IAAIC,SAAU,OAAOD,C,CAEtC,OAAOL,C,CAIT,aAAAO,CAAcC,GACZ,IAAKjB,KAAKE,KAAKU,OAAQ,OAEvB,MAAMM,EAAalB,KAAKE,KAAKiB,WAAUC,GAAKA,EAAEf,KAAOL,KAAKC,QAC1D,MAAMoB,EAAarB,KAAKG,cAAgB,WAExC,IAAImB,EAAyB,KAE7B,IAAKD,EAAY,CACf,GAAIJ,EAAEM,MAAQ,aAAc,CAC1BD,EAAUtB,KAAKQ,YAAYU,EAAY,E,MAClC,GAAID,EAAEM,MAAQ,YAAa,CAChCD,EAAUtB,KAAKQ,YAAYU,GAAY,E,MAEpC,CACL,GAAID,EAAEM,MAAQ,YAAa,CACzBD,EAAUtB,KAAKQ,YAAYU,EAAY,E,MAClC,GAAID,EAAEM,MAAQ,UAAW,CAC9BD,EAAUtB,KAAKQ,YAAYU,GAAY,E,EAI3C,GAAID,EAAEM,MAAQ,OAAQ,CACpB,MAAMC,EAAQxB,KAAKE,KAAKiB,WAAUC,IAAMA,EAAEL,WAC1CO,EAAUE,KAAU,EAAK,KAAOA,C,MAC3B,GAAIP,EAAEM,MAAQ,MAAO,CAC1B,MAAME,EAAc,IAAIzB,KAAKE,MAAMwB,UAAUP,WAAUC,IAAMA,EAAEL,WAC/DO,EAAUG,KAAgB,EAAK,KAAOzB,KAAKE,KAAKU,OAAS,EAAIa,C,CAG/D,GAAIH,IAAY,KAAM,CACpBL,EAAEU,iBACF,MAAMC,EAAO5B,KAAKE,KAAKoB,GACvBtB,KAAKI,UAAUwB,EAAKvB,IACpB,MAAMwB,EAAM7B,KAAK8B,GAAGC,cAAc,iBAAiBH,EAAKvB,QACxDwB,GAAKG,O,EAID,UAAAC,GACN,IAAKjC,KAAKkC,YAAclC,KAAKkC,aAAe,QAAS,MAAO,GAC5D,GAAIlC,KAAKkC,aAAe,cAAe,MAAO,iBAC9C,MAAO,MAAMlC,KAAKkC,Y,CAGpB,MAAAC,GACE,MAAMC,EAAUpC,KAAKiC,aACrB,MAAMZ,EAAarB,KAAKG,cAAgB,WAExC,OACEkC,EAACC,EAAI,CAAAf,IAAA,2CAACgB,MAAM,kBACVF,EAAA,OAAAd,IAAA,2CACEiB,KAAK,UACLD,MAAO,CAAE,WAAY,KAAM,qBAAsBlB,GAAY,aACjDrB,KAAKyC,UAAS,kBACTzC,KAAK0C,eAAc,mBAClBrB,EAAa,WAAasB,WAE3C3C,KAAKE,KAAK0C,KAAIC,IACb,MAAMC,EAAaD,EAAIxC,KAAOL,KAAKC,MACnC,OACEoC,EAAA,UACEd,IAAKsB,EAAIxC,GACT0C,KAAK,SACLP,KAAK,MAAK,cACGK,EAAIxC,GACjBkC,MAAO,CACLM,IAAK,KACL,gBAAiBC,EACjBV,CAACA,KAAYA,GACd,gBACcU,EAAU,gBACVD,EAAI9B,UAAY4B,UAAS,gBACzBE,EAAIG,SAAWL,UAC9B5B,SAAU8B,EAAI9B,SACdkC,SAAUH,EAAa,GAAI,EAC3BI,QAAS,KAAOL,EAAI9B,UAAYf,KAAKI,UAAUyC,EAAIxC,KAEnDgC,EAAA,QAAME,MAAO,cAAcO,EAAa,4BAA8B,sBACnED,EAAIM,OAENN,EAAIO,KACHf,EAAA,QAAME,MAAM,gBAAe,cAAa,QACtCF,EAAA,QAAME,MAAM,cAGT,K","ignoreList":[]}

package/dist/components/{p-DRuXu8Ql.js → p-M_LSU5Uu.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-CGuwZUFk.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:"11e12dc0b911922a917b33fe9cbdf78d4d270a52"},s("button",{key:"85e3201280671eb8e3b87235f17a126f914f9f50",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:"fe52df526735c840f9206bb1b7cf3b4eef6c76ed",class:"toggle-btn__icon",style:{fontSize:`${n}px`}},s("ds-icon",{key:"55d1ed578a297ff164fea3ed5dad7e3e9db83bc1",name:this.icon,size:e})),a&&s("span",{key:"a15a139ef10a91e35a1702e8f9e6a5ac8a762566",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-DRuXu8Ql.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-CkBXHj0e.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:"f7b99f3dc5230052f69a6381f17b3737f2a6ee54"},s("button",{key:"92b9964ed2828871a6e7c27f36177c2418b01cd6",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:"138b709f8b2d1e77e92a8dd5692804a4f1bc5b46",class:"toggle-btn__icon",style:{fontSize:`${n}px`}},s("ds-icon",{key:"656c9a0892e1cd2c69212657a198ba72a9c06dd3",name:this.icon,size:e})),a&&s("span",{key:"5cc2448462e7d03747723b20d4159f23ede404b0",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-M_LSU5Uu.js.map

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
+export interface BarNavTab {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    /** Notification dot on this tab. */
+    dot?: boolean;
+}
+export interface BarNavActionItem {
+    id: string;
+    /** Icon name for <ds-icon>. */
+    icon: string;
+    /** Whether this action button is currently pressed/active. */
+    selected?: boolean;
+    /** Show a notification dot. */
+    dot?: boolean;
+    inactive?: boolean;
+    ariaLabel?: string;
+}
+export declare class BarNav {
+    /**
+     * Tab items for the left section.
+     * Set via JS property: `el.tabs = [...]`
+     */
+    tabs: BarNavTab[];
+    /** ID of the currently active tab. */
+    value: string;
+    /**
+     * Action items rendered in the right section.
+     * Set via JS property: `el.actions = [...]`
+     */
+    actions: BarNavActionItem[];
+    /**
+     * Fallback heading shown when no tabs are provided.
+     * When tabs are present the heading is hidden.
+     */
+    heading: string | undefined;
+    /** Surface background variant. */
+    background: BarNavBackground;
+    /** Emitted when the active tab changes. Detail = tab id. */
+    dsTabChange: EventEmitter<string>;
+    /** Emitted when an action button is toggled. Detail = { id, selected }. */
+    dsActionChange: EventEmitter<{
+        id: string;
+        selected: boolean;
+    }>;
+    private handleTabChange;
+    private handleActionChange;
+    render(): any;
+}
+//# sourceMappingURL=BarNav.d.ts.map

package/dist/types/.stencil/BarNav/index.d.ts

@@ -0,0 +1,2 @@
+export type { BarNavBackground, BarNavTab, BarNavActionItem } from './BarNav';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/.stencil/BarNavAction/BarNavAction.d.ts

@@ -0,0 +1,20 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type BarNavActionBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
+export declare class BarNavAction {
+    /** Icon name passed to <ds-icon>. */
+    icon: string;
+    /** Controlled toggle/selected state. */
+    selected: boolean;
+    /** Show a notification dot (brand colour) at the top-right of the icon. */
+    dot: boolean;
+    /** Disables interaction. */
+    inactive: boolean;
+    ariaLabel: string;
+    /** Parent surface context — adjusts hover/press colours for coloured backgrounds. */
+    background: BarNavActionBackground | undefined;
+    /** Emits the new selected value (!selected) on click. */
+    dsChange: EventEmitter<boolean>;
+    private handleClick;
+    render(): any;
+}
+//# sourceMappingURL=BarNavAction.d.ts.map

package/dist/types/.stencil/BarNavAction/index.d.ts

@@ -0,0 +1,2 @@
+export type { BarNavActionBackground } from './BarNavAction';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/.stencil/TabGroup/TabGroup.d.ts

@@ -6,8 +6,8 @@ export interface TabItem {
     disabled?: boolean;
     /** id of the tabpanel this tab controls */
     panelId?: string;
-    /** optional badge count shown as a pill next to label */
-    count?: number;
+    /** Show a notification dot (brand) on the tab — no count, matching panel-nav. */
+    dot?: boolean;
 }
 export declare class TabGroup {
     el: HTMLElement;
@@ -17,16 +17,7 @@ export declare class TabGroup {
     ariaLabel: string | undefined;
     ariaLabelledby: string | undefined;
     orientation: 'horizontal' | 'vertical';
-    private indicatorOffset;
-    private indicatorSize;
     dsChange: EventEmitter<string>;
-    private resizeObserver;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    onValueChange(): void;
-    onTabsChange(): void;
-    onOrientationChange(): void;
-    private updateIndicator;
     private selectTab;
     /**
      * Find the next non-disabled tab index relative to `from`, stepping by `step`.

package/dist/types/components.d.ts

@@ -7,6 +7,8 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { AccordionItemData } from "./components/Accordion/Accordion";
 import { BannerContrast, BannerIntent } from "./components/Banner/Banner";
+import { BarNavActionItem, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+import { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 import { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 import { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
 import { ButtonGroupElevation, ButtonGroupItem, ButtonGroupSize } from "./components/ButtonGroup/ButtonGroup";
@@ -37,6 +39,8 @@ import { ToggleGroupBackground, ToggleGroupElevation, ToggleGroupItem, ToggleGro
 import { TooltipAlign, TooltipSide } from "./components/Tooltip/Tooltip";
 export { AccordionItemData } from "./components/Accordion/Accordion";
 export { BannerContrast, BannerIntent } from "./components/Banner/Banner";
+export { BarNavActionItem, BarNavBackground, BarNavTab } from "./components/BarNav/BarNav";
+export { BarNavActionBackground } from "./components/BarNavAction/BarNavAction";
 export { BreadcrumbItem } from "./components/Breadcrumb/Breadcrumb";
 export { ButtonBackground, ButtonContrast, ButtonElevation, ButtonIntent, ButtonSize, ButtonVariant } from "./components/Button/Button";
 export { ButtonGroupElevation, ButtonGroupItem, ButtonGroupSize } from "./components/ButtonGroup/ButtonGroup";
@@ -127,6 +131,62 @@ export namespace Components {
          */
         "showDismiss": boolean;
     }
+    interface DsBarNav {
+        /**
+          * Action items rendered in the right section. Set via JS property: `el.actions = [...]`
+          * @default []
+         */
+        "actions": BarNavActionItem[];
+        /**
+          * Surface background variant.
+          * @default 'secondary'
+         */
+        "background": BarNavBackground;
+        /**
+          * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
+         */
+        "heading": string | undefined;
+        /**
+          * Tab items for the left section. Set via JS property: `el.tabs = [...]`
+          * @default []
+         */
+        "tabs": BarNavTab[];
+        /**
+          * ID of the currently active tab.
+          * @default ''
+         */
+        "value": string;
+    }
+    interface DsBarNavAction {
+        /**
+          * @default 'action'
+         */
+        "ariaLabel": string;
+        /**
+          * Parent surface context — adjusts hover/press colours for coloured backgrounds.
+         */
+        "background": BarNavActionBackground | undefined;
+        /**
+          * Show a notification dot (brand colour) at the top-right of the icon.
+          * @default false
+         */
+        "dot": boolean;
+        /**
+          * Icon name passed to <ds-icon>.
+          * @default ''
+         */
+        "icon": string;
+        /**
+          * Disables interaction.
+          * @default false
+         */
+        "inactive": boolean;
+        /**
+          * Controlled toggle/selected state.
+          * @default false
+         */
+        "selected": boolean;
+    }
     interface DsBreadcrumb {
         /**
           * @default []
@@ -887,6 +947,14 @@ export interface DsBannerCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsBannerElement;
 }
+export interface DsBarNavCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBarNavElement;
+}
+export interface DsBarNavActionCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLDsBarNavActionElement;
+}
 export interface DsBreadcrumbCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLDsBreadcrumbElement;
@@ -1004,6 +1072,41 @@ declare global {
         prototype: HTMLDsBannerElement;
         new (): HTMLDsBannerElement;
     };
+    interface HTMLDsBarNavElementEventMap {
+        "dsTabChange": string;
+        "dsActionChange": { id: string; selected: boolean };
+    }
+    interface HTMLDsBarNavElement extends Components.DsBarNav, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsBarNavElementEventMap>(type: K, listener: (this: HTMLDsBarNavElement, ev: DsBarNavCustomEvent<HTMLDsBarNavElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsBarNavElement: {
+        prototype: HTMLDsBarNavElement;
+        new (): HTMLDsBarNavElement;
+    };
+    interface HTMLDsBarNavActionElementEventMap {
+        "dsChange": boolean;
+    }
+    interface HTMLDsBarNavActionElement extends Components.DsBarNavAction, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLDsBarNavActionElementEventMap>(type: K, listener: (this: HTMLDsBarNavActionElement, ev: DsBarNavActionCustomEvent<HTMLDsBarNavActionElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLDsBarNavActionElementEventMap>(type: K, listener: (this: HTMLDsBarNavActionElement, ev: DsBarNavActionCustomEvent<HTMLDsBarNavActionElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLDsBarNavActionElement: {
+        prototype: HTMLDsBarNavActionElement;
+        new (): HTMLDsBarNavActionElement;
+    };
     interface HTMLDsBreadcrumbElementEventMap {
         "dsNavigate": { item: BreadcrumbItem; index: number };
     }
@@ -1437,6 +1540,8 @@ declare global {
         "ds-accordion": HTMLDsAccordionElement;
         "ds-badge": HTMLDsBadgeElement;
         "ds-banner": HTMLDsBannerElement;
+        "ds-bar-nav": HTMLDsBarNavElement;
+        "ds-bar-nav-action": HTMLDsBarNavActionElement;
         "ds-breadcrumb": HTMLDsBreadcrumbElement;
         "ds-button": HTMLDsButtonElement;
         "ds-button-group": HTMLDsButtonGroupElement;
@@ -1539,6 +1644,74 @@ declare namespace LocalJSX {
          */
         "showDismiss"?: boolean;
     }
+    interface DsBarNav {
+        /**
+          * Action items rendered in the right section. Set via JS property: `el.actions = [...]`
+          * @default []
+         */
+        "actions"?: BarNavActionItem[];
+        /**
+          * Surface background variant.
+          * @default 'secondary'
+         */
+        "background"?: BarNavBackground;
+        /**
+          * Fallback heading shown when no tabs are provided. When tabs are present the heading is hidden.
+         */
+        "heading"?: string | undefined;
+        /**
+          * Emitted when an action button is toggled. Detail = { id, selected }.
+         */
+        "onDsActionChange"?: (event: DsBarNavCustomEvent<{ id: string; selected: boolean }>) => void;
+        /**
+          * Emitted when the active tab changes. Detail = tab id.
+         */
+        "onDsTabChange"?: (event: DsBarNavCustomEvent<string>) => void;
+        /**
+          * Tab items for the left section. Set via JS property: `el.tabs = [...]`
+          * @default []
+         */
+        "tabs"?: BarNavTab[];
+        /**
+          * ID of the currently active tab.
+          * @default ''
+         */
+        "value"?: string;
+    }
+    interface DsBarNavAction {
+        /**
+          * @default 'action'
+         */
+        "ariaLabel"?: string;
+        /**
+          * Parent surface context — adjusts hover/press colours for coloured backgrounds.
+         */
+        "background"?: BarNavActionBackground | undefined;
+        /**
+          * Show a notification dot (brand colour) at the top-right of the icon.
+          * @default false
+         */
+        "dot"?: boolean;
+        /**
+          * Icon name passed to <ds-icon>.
+          * @default ''
+         */
+        "icon"?: string;
+        /**
+          * Disables interaction.
+          * @default false
+         */
+        "inactive"?: boolean;
+        /**
+          * Emits the new selected value (!selected) on click.
+         */
+        "onDsChange"?: (event: DsBarNavActionCustomEvent<boolean>) => void;
+        /**
+          * Controlled toggle/selected state.
+          * @default false
+         */
+        "selected"?: boolean;
+    }
     interface DsBreadcrumb {
         /**
           * @default []
@@ -2368,6 +2541,19 @@ declare namespace LocalJSX {
         "showDismiss": boolean;
         "dismissLabel": string;
     }
+    interface DsBarNavAttributes {
+        "value": string;
+        "heading": string | undefined;
+        "background": BarNavBackground;
+    }
+    interface DsBarNavActionAttributes {
+        "icon": string;
+        "selected": boolean;
+        "dot": boolean;
+        "inactive": boolean;
+        "ariaLabel": string;
+        "background": BarNavActionBackground | undefined;
+    }
     interface DsBreadcrumbAttributes {
         "separator": string;
     }
@@ -2621,6 +2807,8 @@ declare namespace LocalJSX {
         "ds-accordion": Omit<DsAccordion, keyof DsAccordionAttributes> & { [K in keyof DsAccordion & keyof DsAccordionAttributes]?: DsAccordion[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `attr:${K}`]?: DsAccordionAttributes[K] } & { [K in keyof DsAccordion & keyof DsAccordionAttributes as `prop:${K}`]?: DsAccordion[K] };
         "ds-badge": Omit<DsBadge, keyof DsBadgeAttributes> & { [K in keyof DsBadge & keyof DsBadgeAttributes]?: DsBadge[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `attr:${K}`]?: DsBadgeAttributes[K] } & { [K in keyof DsBadge & keyof DsBadgeAttributes as `prop:${K}`]?: DsBadge[K] };
         "ds-banner": Omit<DsBanner, keyof DsBannerAttributes> & { [K in keyof DsBanner & keyof DsBannerAttributes]?: DsBanner[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `attr:${K}`]?: DsBannerAttributes[K] } & { [K in keyof DsBanner & keyof DsBannerAttributes as `prop:${K}`]?: DsBanner[K] };
+        "ds-bar-nav": Omit<DsBarNav, keyof DsBarNavAttributes> & { [K in keyof DsBarNav & keyof DsBarNavAttributes]?: DsBarNav[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `attr:${K}`]?: DsBarNavAttributes[K] } & { [K in keyof DsBarNav & keyof DsBarNavAttributes as `prop:${K}`]?: DsBarNav[K] };
+        "ds-bar-nav-action": Omit<DsBarNavAction, keyof DsBarNavActionAttributes> & { [K in keyof DsBarNavAction & keyof DsBarNavActionAttributes]?: DsBarNavAction[K] } & { [K in keyof DsBarNavAction & keyof DsBarNavActionAttributes as `attr:${K}`]?: DsBarNavActionAttributes[K] } & { [K in keyof DsBarNavAction & keyof DsBarNavActionAttributes as `prop:${K}`]?: DsBarNavAction[K] };
         "ds-breadcrumb": Omit<DsBreadcrumb, keyof DsBreadcrumbAttributes> & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes]?: DsBreadcrumb[K] } & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes as `attr:${K}`]?: DsBreadcrumbAttributes[K] } & { [K in keyof DsBreadcrumb & keyof DsBreadcrumbAttributes as `prop:${K}`]?: DsBreadcrumb[K] };
         "ds-button": Omit<DsButton, keyof DsButtonAttributes> & { [K in keyof DsButton & keyof DsButtonAttributes]?: DsButton[K] } & { [K in keyof DsButton & keyof DsButtonAttributes as `attr:${K}`]?: DsButtonAttributes[K] } & { [K in keyof DsButton & keyof DsButtonAttributes as `prop:${K}`]?: DsButton[K] };
         "ds-button-group": Omit<DsButtonGroup, keyof DsButtonGroupAttributes> & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes]?: DsButtonGroup[K] } & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes as `attr:${K}`]?: DsButtonGroupAttributes[K] } & { [K in keyof DsButtonGroup & keyof DsButtonGroupAttributes as `prop:${K}`]?: DsButtonGroup[K] };
@@ -2664,6 +2852,8 @@ declare module "@stencil/core" {
             "ds-accordion": LocalJSX.IntrinsicElements["ds-accordion"] & JSXBase.HTMLAttributes<HTMLDsAccordionElement>;
             "ds-badge": LocalJSX.IntrinsicElements["ds-badge"] & JSXBase.HTMLAttributes<HTMLDsBadgeElement>;
             "ds-banner": LocalJSX.IntrinsicElements["ds-banner"] & JSXBase.HTMLAttributes<HTMLDsBannerElement>;
+            "ds-bar-nav": LocalJSX.IntrinsicElements["ds-bar-nav"] & JSXBase.HTMLAttributes<HTMLDsBarNavElement>;
+            "ds-bar-nav-action": LocalJSX.IntrinsicElements["ds-bar-nav-action"] & JSXBase.HTMLAttributes<HTMLDsBarNavActionElement>;
             "ds-breadcrumb": LocalJSX.IntrinsicElements["ds-breadcrumb"] & JSXBase.HTMLAttributes<HTMLDsBreadcrumbElement>;
             "ds-button": LocalJSX.IntrinsicElements["ds-button"] & JSXBase.HTMLAttributes<HTMLDsButtonElement>;
             "ds-button-group": LocalJSX.IntrinsicElements["ds-button-group"] & JSXBase.HTMLAttributes<HTMLDsButtonGroupElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "0.9.4",
+  "version": "0.10.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -80,7 +80,7 @@
     "zod": "^4.4.3"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "sideEffects": [
     "**/*.css",

package/src/angular/index.ts

@@ -5,6 +5,8 @@ export const DIRECTIVES = [
   d.DsAccordion,
   d.DsBadge,
   d.DsBanner,
+  d.DsBarNav,
+  d.DsBarNavAction,
   d.DsBreadcrumb,
   d.DsButton,
   d.DsButtonGroup,

package/src/angular/proxies.ts

@@ -86,6 +86,71 @@ export declare interface DsBanner extends Components.DsBanner {
 }
 
 
+@ProxyCmp({
+  inputs: ['actions', 'background', 'heading', 'tabs', 'value']
+})
+@Component({
+  selector: 'ds-bar-nav',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['actions', 'background', 'heading', 'tabs', 'value'],
+  outputs: ['dsTabChange', 'dsActionChange'],
+  standalone: false
+})
+export class DsBarNav {
+  protected el: HTMLDsBarNavElement;
+  @Output() dsTabChange = new EventEmitter<CustomEvent<string>>();
+  @Output() dsActionChange = new EventEmitter<CustomEvent<{ id: string; selected: boolean }>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsBarNav extends Components.DsBarNav {
+  /**
+   * Emitted when the active tab changes. Detail = tab id.
+   */
+  dsTabChange: EventEmitter<CustomEvent<string>>;
+  /**
+   * Emitted when an action button is toggled. Detail = { id, selected }.
+   */
+  dsActionChange: EventEmitter<CustomEvent<{ id: string; selected: boolean }>>;
+}
+
+
+@ProxyCmp({
+  inputs: ['ariaLabel', 'background', 'dot', 'icon', 'inactive', 'selected']
+})
+@Component({
+  selector: 'ds-bar-nav-action',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['ariaLabel', 'background', 'dot', 'icon', 'inactive', 'selected'],
+  outputs: ['dsChange'],
+  standalone: false
+})
+export class DsBarNavAction {
+  protected el: HTMLDsBarNavActionElement;
+  @Output() dsChange = new EventEmitter<CustomEvent<boolean>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface DsBarNavAction extends Components.DsBarNavAction {
+  /**
+   * Emits the new selected value (!selected) on click.
+   */
+  dsChange: EventEmitter<CustomEvent<boolean>>;
+}
+
+
 @ProxyCmp({
   inputs: ['items', 'separator']
 })