@ds-mo/ui 0.9.4 → 0.10.0

package/dist/components/ds-bar-nav-action.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBarNavAction extends Components.DsBarNavAction, HTMLElement {}
+export const DsBarNavAction: {
+    prototype: DsBarNavAction;
+    new (): DsBarNavAction;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-bar-nav-action.js

@@ -0,0 +1,2 @@
+import{B as s,d as o}from"./p-ByTsF1H6.js";const t=s;const p=o;export{t as DsBarNavAction,p as defineCustomElement};
+//# sourceMappingURL=ds-bar-nav-action.js.map

package/dist/components/ds-bar-nav-action.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-bar-nav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsBarNav extends Components.DsBarNav, HTMLElement {}
+export const DsBarNav: {
+    prototype: DsBarNav;
+    new (): DsBarNav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-bar-nav.js

@@ -0,0 +1,2 @@
+import{p as a,H as s,c as e,h as r,a as n,t}from"./index.js";import{d as o}from"./p-ByTsF1H6.js";import{d as i}from"./p-CkBXHj0e.js";import{d as c}from"./p-B7OGjJYj.js";const d=()=>`.sc-ds-bar-nav-h{display:block}.bar-nav.sc-ds-bar-nav{display:flex;align-items:center;height:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100);box-sizing:border-box;border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.bg-primary.sc-ds-bar-nav{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-bar-nav{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-bar-nav{background-color:transparent}.bg-translucent.sc-ds-bar-nav{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.bar-nav__left.sc-ds-bar-nav{flex:1;min-width:0;display:flex;align-items:center}.bar-nav__left.sc-ds-bar-nav ds-tab-group.sc-ds-bar-nav{flex:1;min-width:0}.bar-nav__heading.sc-ds-bar-nav{color:var(--color-foreground-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-nav__actions.sc-ds-bar-nav{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const b=a(class a extends s{constructor(a){super();if(a!==false){this.__registerHost()}this.dsTabChange=e(this,"dsTabChange");this.dsActionChange=e(this,"dsActionChange");this.tabs=[];this.value="";this.actions=[];this.background="secondary"}handleTabChange(a){const s=a.detail;this.value=s;this.dsTabChange.emit(s)}handleActionChange(a,s){const e=s.detail;this.dsActionChange.emit({id:a,selected:e})}render(){const a=this.tabs.length>0;const s={};const e=s[this.background];return r(n,{key:"61eb9ee05c1f6943f110d7e4777da3ca73239830"},r("header",{key:"a8910fc6c153d628f26e4de40aead2952e8f4706",class:{"bar-nav":true,[`bg-${this.background}`]:true}},r("div",{key:"7d7dfffaef40818965ed6fdf9a78aa3674928f95",class:"bar-nav__left"},a?r("ds-tab-group",{tabs:this.tabs,value:this.value,onDsChange:a=>this.handleTabChange(a)}):this.heading&&r("span",{class:"bar-nav__heading text-title-small"},this.heading)),this.actions.length>0&&r("div",{key:"4aa180be79f312a1d4dabdcc41220fcc1888fc98",class:"bar-nav__actions"},this.actions.map((a=>r("ds-bar-nav-action",{key:a.id,icon:a.icon,selected:a.selected??false,dot:a.dot??false,inactive:a.inactive,"aria-label":a.ariaLabel??a.id,background:e,onDsChange:s=>this.handleActionChange(a.id,s)}))))))}static get style(){return d()}},[2,"ds-bar-nav",{tabs:[16],value:[1025],actions:[16],heading:[1],background:[1]}]);function l(){if(typeof customElements==="undefined"){return}const a=["ds-bar-nav","ds-bar-nav-action","ds-icon","ds-tab-group"];a.forEach((a=>{switch(a){case"ds-bar-nav":if(!customElements.get(t(a))){customElements.define(t(a),b)}break;case"ds-bar-nav-action":if(!customElements.get(t(a))){o()}break;case"ds-icon":if(!customElements.get(t(a))){i()}break;case"ds-tab-group":if(!customElements.get(t(a))){c()}break}}))}l();const f=b;const h=l;export{f as DsBarNav,h as defineCustomElement};
+//# sourceMappingURL=ds-bar-nav.js.map

package/dist/components/ds-bar-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["barNavCss","BarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tabs","value","actions","background","handleTabChange","e","id","detail","dsTabChange","emit","handleActionChange","actionId","selected","dsActionChange","render","hasTabs","length","bgToActionBg","actionBg","h","Host","key","class","onDsChange","heading","map","action","icon","dot","inactive","ariaLabel"],"sources":["src/wc/components/BarNav/BarNav.css?tag=ds-bar-nav&encapsulation=scoped","src/wc/components/BarNav/BarNav.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bar-nav {\n  display: flex;\n  align-items: center;\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  gap: var(--dimension-space-100);\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n}\n\n/* Background variants — mirrors ds-header pattern */\n.bg-primary     { background-color: var(--color-background-primary); }\n.bg-secondary   { background-color: var(--color-background-secondary); }\n.bg-transparent { background-color: transparent; }\n.bg-translucent {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n/* Left zone — tabs fill available space */\n.bar-nav__left {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.bar-nav__left ds-tab-group {\n  flex: 1;\n  min-width: 0;\n}\n\n/* Fallback heading when no tabs */\n.bar-nav__heading {\n  color: var(--color-foreground-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Right zone — action buttons, hugging right */\n.bar-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport type { BarNavActionBackground } from '../BarNavAction/BarNavAction';\nimport type { TabItem } from '../TabGroup/TabGroup';\n\nexport type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\nexport interface BarNavTab {\n  id: string;\n  label: string;\n  disabled?: boolean;\n  /** Notification dot on this tab. */\n  dot?: boolean;\n}\n\nexport interface BarNavActionItem {\n  id: string;\n  /** Icon name for <ds-icon>. */\n  icon: string;\n  /** Whether this action button is currently pressed/active. */\n  selected?: boolean;\n  /** Show a notification dot. */\n  dot?: boolean;\n  inactive?: boolean;\n  ariaLabel?: string;\n}\n\n@Component({\n  tag: 'ds-bar-nav',\n  styleUrl: 'BarNav.css',\n  scoped: true,\n})\nexport class BarNav {\n  /**\n   * Tab items for the left section.\n   * Set via JS property: `el.tabs = [...]`\n   */\n  @Prop() tabs: BarNavTab[] = [];\n\n  /** ID of the currently active tab. */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Action items rendered in the right section.\n   * Set via JS property: `el.actions = [...]`\n   */\n  @Prop() actions: BarNavActionItem[] = [];\n\n  /**\n   * Fallback heading shown when no tabs are provided.\n   * When tabs are present the heading is hidden.\n   */\n  @Prop() heading: string | undefined;\n\n  /** Surface background variant. */\n  @Prop() background: BarNavBackground = 'secondary';\n\n  /** Emitted when the active tab changes. Detail = tab id. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  /** Emitted when an action button is toggled. Detail = { id, selected }. */\n  @Event() dsActionChange!: EventEmitter<{ id: string; selected: boolean }>;\n\n  private handleTabChange(e: Event) {\n    const id = (e as CustomEvent<string>).detail;\n    this.value = id;\n    this.dsTabChange.emit(id);\n  }\n\n  private handleActionChange(actionId: string, e: Event) {\n    const selected = (e as CustomEvent<boolean>).detail;\n    this.dsActionChange.emit({ id: actionId, selected });\n  }\n\n  render() {\n    const hasTabs = this.tabs.length > 0;\n\n    // Map BarNavBackground → BarNavActionBackground for context pass-through.\n    // primary/secondary/transparent/translucent are all light — no override needed.\n    const bgToActionBg: Partial<Record<BarNavBackground, BarNavActionBackground>> = {};\n    const actionBg: BarNavActionBackground | undefined = bgToActionBg[this.background];\n\n    return (\n      <Host>\n        <header class={{ 'bar-nav': true, [`bg-${this.background}`]: true }}>\n\n          <div class=\"bar-nav__left\">\n            {hasTabs\n              ? (\n                <ds-tab-group\n                  tabs={this.tabs as TabItem[]}\n                  value={this.value}\n                  onDsChange={(e: Event) => this.handleTabChange(e)}\n                />\n              )\n              : this.heading && (\n                <span class=\"bar-nav__heading text-title-small\">{this.heading}</span>\n              )\n            }\n          </div>\n\n          {this.actions.length > 0 && (\n            <div class=\"bar-nav__actions\">\n              {this.actions.map(action => (\n                <ds-bar-nav-action\n                  key={action.id}\n                  icon={action.icon}\n                  selected={action.selected ?? false}\n                  dot={action.dot ?? false}\n                  inactive={action.inactive}\n                  aria-label={action.ariaLabel ?? action.id}\n                  background={actionBg}\n                  onDsChange={(e: Event) => this.handleActionChange(action.id, e)}\n                />\n              ))}\n            </div>\n          )}\n\n        </header>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAY,IAAM,qjC,MC+BXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,gIAUUC,KAAAC,KAAoB,GAGHD,KAAAE,MAAgB,GAMjCF,KAAAG,QAA8B,GAS9BH,KAAAI,WAA+B,WAmExC,CA3DS,eAAAC,CAAgBC,GACtB,MAAMC,EAAMD,EAA0BE,OACtCR,KAAKE,MAAQK,EACbP,KAAKS,YAAYC,KAAKH,E,CAGhB,kBAAAI,CAAmBC,EAAkBN,GAC3C,MAAMO,EAAYP,EAA2BE,OAC7CR,KAAKc,eAAeJ,KAAK,CAAEH,GAAIK,EAAUC,Y,CAG3C,MAAAE,GACE,MAAMC,EAAUhB,KAAKC,KAAKgB,OAAS,EAInC,MAAMC,EAA0E,GAChF,MAAMC,EAA+CD,EAAalB,KAAKI,YAEvE,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAO,CAAE,UAAW,KAAM,CAAC,MAAMvB,KAAKI,cAAe,OAE3DgB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACRP,EAEGI,EAAA,gBACEnB,KAAMD,KAAKC,KACXC,MAAOF,KAAKE,MACZsB,WAAalB,GAAaN,KAAKK,gBAAgBC,KAGjDN,KAAKyB,SACLL,EAAA,QAAMG,MAAM,qCAAqCvB,KAAKyB,UAK3DzB,KAAKG,QAAQc,OAAS,GACrBG,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRvB,KAAKG,QAAQuB,KAAIC,GAChBP,EAAA,qBACEE,IAAKK,EAAOpB,GACZqB,KAAMD,EAAOC,KACbf,SAAUc,EAAOd,UAAY,MAC7BgB,IAAKF,EAAOE,KAAO,MACnBC,SAAUH,EAAOG,SAAQ,aACbH,EAAOI,WAAaJ,EAAOpB,GACvCH,WAAYe,EACZK,WAAalB,GAAaN,KAAKW,mBAAmBgB,EAAOpB,GAAID,S","ignoreList":[]}

package/dist/components/ds-breadcrumb.js

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"18a93bad46568264a308c3aa3067dca124a42aac"},a("nav",{key:"a19a1a8233e23ea548544f09658cbc49211b9a75","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"1edb429d1686e8285bf707da5f0b46f410283d79",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
+import{p as e,H as r,c as s,h as a,a as i,t as c}from"./index.js";const n=()=>`.breadcrumb.sc-ds-breadcrumb{display:flex;align-items:center}.list.sc-ds-breadcrumb{display:flex;align-items:center;list-style:none;margin:0;padding:0;gap:var(--dimension-space-050)}.item.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.item-inner.sc-ds-breadcrumb{display:flex;align-items:center;gap:var(--dimension-space-050)}.link.sc-ds-breadcrumb{color:var(--color-foreground-secondary);text-decoration:none;padding:var(--dimension-space-025) var(--dimension-space-050);border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2)}.link.sc-ds-breadcrumb:hover{background-color:var(--color-interaction-hover);color:var(--color-foreground-primary)}.link.sc-ds-breadcrumb:active{background-color:var(--color-interaction-pressed)}.link.sc-ds-breadcrumb:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.separator.sc-ds-breadcrumb{color:var(--color-foreground-tertiary);-webkit-user-select:none;user-select:none}.current.sc-ds-breadcrumb{color:var(--color-foreground-primary);padding:var(--dimension-space-025) var(--dimension-space-050)}`;const o=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsNavigate=s(this,"dsNavigate");this.items=[];this.separator="/"}handleClick(e,r,s){if(!e.href){s.preventDefault()}this.dsNavigate.emit({item:e,index:r})}render(){return a(i,{key:"f824901c0dfa5b0f03b74f61e8a2c0d5729c07af"},a("nav",{key:"bbbaae0df39f3f04c7056ac84dcd855291cacd8a","aria-label":"Breadcrumb",class:"breadcrumb"},a("ol",{key:"5b8f02ff90e170795ff240d7769e89f910b249ea",class:"list"},this.items.map(((e,r)=>{const s=r===this.items.length-1;return a("li",{class:"item",key:r},s?a("span",{class:"text-body-medium-emphasis current","aria-current":"page"},e.label):a("span",{class:"item-inner"},a("a",{href:e.href??"#",class:"link text-body-medium",onClick:s=>this.handleClick(e,r,s)},e.label),a("span",{class:"separator text-body-small","aria-hidden":"true"},this.separator)))})))))}static get style(){return n()}},[2,"ds-breadcrumb",{items:[16],separator:[1]}]);function t(){if(typeof customElements==="undefined"){return}const e=["ds-breadcrumb"];e.forEach((e=>{switch(e){case"ds-breadcrumb":if(!customElements.get(c(e))){customElements.define(c(e),o)}break}}))}t();const d=o;const l=t;export{d as DsBreadcrumb,l as defineCustomElement};
 //# sourceMappingURL=ds-breadcrumb.js.map

package/dist/components/ds-button-group.js

@@ -1,2 +1,2 @@
-import{p as t,H as o,c as r,h as s,a as i,t as d}from"./index.js";import{d as e}from"./p-DdN6WnFs.js";import{d as n}from"./p-CGuwZUFk.js";import{d as a}from"./p-BcuUR5Ao.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const d=r.charAt(0).toUpperCase()+r.slice(1);const e=r==="none";const n={group:true,[`group${d}`]:true,groupRounded:this.rounded};return s(i,{key:"c6b74f44497bd0dcb51fbe14a89ecd641988ff74"},s("div",{key:"be1be0faa562c6aa404c222d4562d29e24e10e21",class:n,role:"group"},t.map(((t,i)=>{const d=i===0;const n=i===o-1;const a=!d&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:d,last:n,middle:a,itemShort:e&&u==="secondary",[`roundedFirst${g}`]:!!(c&&d),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:e,dividerGhostXS:e&&this.size==="xs",dividerGhostSM:e&&this.size==="sm",dividerGhostLG:e&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(d(t))){customElements.define(d(t),p)}break;case"ds-button":if(!customElements.get(d(t))){e()}break;case"ds-icon":if(!customElements.get(d(t))){n()}break;case"ds-loader":if(!customElements.get(d(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
+import{p as t,H as o,c as r,h as s,a as i,t as e}from"./index.js";import{d}from"./p-B51N5kiy.js";import{d as n}from"./p-CkBXHj0e.js";import{d as a}from"./p-BcuUR5Ao.js";const u=()=>`.group.sc-ds-button-group{display:inline-flex;align-items:stretch;border-radius:var(--dimension-radius-050);position:relative}.group.sc-ds-button-group::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none}.groupElevated.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-sm)}.groupElevated.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-sm)}.groupFlat.sc-ds-button-group::after{box-shadow:inset 0 0 0 1px var(--color-border-tertiary)}.groupFloating.sc-ds-button-group{box-shadow:var(--effect-shadow-elevated-floating)}.groupFloating.sc-ds-button-group::after{box-shadow:var(--effect-highlight-elevated-floating)}.groupRounded.sc-ds-button-group{border-radius:var(--dimension-radius-half)}.item.sc-ds-button-group{flex-shrink:0;box-shadow:none !important;border:none !important}.item.sc-ds-button-group:active{transform:none !important}.divider.sc-ds-button-group{width:1px;flex-shrink:0;background-color:var(--color-border-tertiary);position:relative;z-index:1;margin:0 -0.5px;pointer-events:none}.dividerGhost.sc-ds-button-group{height:20px;align-self:center}.dividerGhostXS.sc-ds-button-group{height:12px}.dividerGhostSM.sc-ds-button-group{height:16px}.dividerGhostLG.sc-ds-button-group{height:24px}.item.sc-ds-button-group:hover+.dividerGhost.sc-ds-button-group,.dividerGhost.sc-ds-button-group:has(+.item:hover){opacity:0}.group.sc-ds-button-group .itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-050) !important;border-top-right-radius:var(--dimension-radius-050) !important;border-bottom-right-radius:var(--dimension-radius-050) !important;border-bottom-left-radius:var(--dimension-radius-050) !important}.first.sc-ds-button-group{border-top-right-radius:0 !important;border-bottom-right-radius:0 !important}.last.sc-ds-button-group{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.middle.sc-ds-button-group{border-radius:0 !important}.groupRounded.sc-ds-button-group .first.itemShort.sc-ds-button-group::after{border-top-left-radius:var(--dimension-radius-half) !important;border-bottom-left-radius:var(--dimension-radius-half) !important}.groupRounded.sc-ds-button-group .last.itemShort.sc-ds-button-group::after{border-top-right-radius:var(--dimension-radius-half) !important;border-bottom-right-radius:var(--dimension-radius-half) !important}.roundedFirstMD.sc-ds-button-group{padding-right:var(--dimension-space-100) !important}.roundedLastMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important}.roundedMidMD.sc-ds-button-group{padding-left:var(--dimension-space-100) !important;padding-right:var(--dimension-space-100) !important}.roundedFirstSM.sc-ds-button-group{padding-right:var(--dimension-space-075) !important}.roundedLastSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important}.roundedMidSM.sc-ds-button-group{padding-left:var(--dimension-space-075) !important;padding-right:var(--dimension-space-075) !important}.roundedFirstLG.sc-ds-button-group{padding-right:var(--dimension-space-150) !important}.roundedLastLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important}.roundedMidLG.sc-ds-button-group{padding-left:var(--dimension-space-150) !important;padding-right:var(--dimension-space-150) !important}`;const p=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=r(this,"dsClick");this.items=[];this.elevation="flat";this.size="md";this.rounded=false}render(){const t=this.items;const o=t.length;const r=this.elevation;const e=r.charAt(0).toUpperCase()+r.slice(1);const d=r==="none";const n={group:true,[`group${e}`]:true,groupRounded:this.rounded};return s(i,{key:"3cf0f6c5f8aa34f662ba01042600c1d34325d3da"},s("div",{key:"2240504a7ae8f2ee663b54c0b906eeb23c9a2886",class:n,role:"group"},t.map(((t,i)=>{const e=i===0;const n=i===o-1;const a=!e&&!n;const u=t.variant??"secondary";const p=!!t.icon&&!t.label;const c=this.rounded&&!p&&this.size!=="xs";const g=this.size.toUpperCase();const m={item:true,first:e,last:n,middle:a,itemShort:d&&u==="secondary",[`roundedFirst${g}`]:!!(c&&e),[`roundedLast${g}`]:!!(c&&n),[`roundedMid${g}`]:!!(c&&a)};const b={divider:true,dividerGhost:d,dividerGhostXS:d&&this.size==="xs",dividerGhostSM:d&&this.size==="sm",dividerGhostLG:d&&this.size==="lg"};return[i>0&&s("div",{class:b,"aria-hidden":"true"}),s("ds-button",{class:m,variant:u,intent:t.intent??"none",elevation:r,size:this.size,label:t.label,rounded:this.rounded,inactive:t.inactive,href:t.href,onDsClick:()=>this.dsClick.emit(i)},t.icon&&s("ds-icon",{slot:"icon",name:t.icon}))]}))))}static get style(){return u()}},[2,"ds-button-group",{items:[16],elevation:[1],size:[1],rounded:[4]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-button-group","ds-button","ds-icon","ds-loader"];t.forEach((t=>{switch(t){case"ds-button-group":if(!customElements.get(e(t))){customElements.define(e(t),p)}break;case"ds-button":if(!customElements.get(e(t))){d()}break;case"ds-icon":if(!customElements.get(e(t))){n()}break;case"ds-loader":if(!customElements.get(e(t))){a()}break}}))}c();const g=p;const m=c;export{g as DsButtonGroup,m as defineCustomElement};
 //# sourceMappingURL=ds-button-group.js.map

package/dist/components/ds-button-group.js.map

@@ -1 +1 @@
-{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ButtonGroup — flush row of ds-button components.\n   The group container carries the elevation; individual button chrome\n   (shadow/border) is suppressed via .item.\n   ========================================================================== */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n  flex-shrink: 0;\n  /* Suppress individual elevation so the group reads as one unit */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  flex-shrink: 0;\n  background-color: var(--color-border-tertiary);\n  position: relative;\n  z-index: 1;\n  margin: 0 -0.5px;\n  pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost    { height: 20px; align-self: center; }\n.dividerGhostXS  { height: 12px; }\n.dividerGhostSM  { height: 16px; }\n.dividerGhostLG  { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n  border-top-left-radius:     var(--dimension-radius-050) !important;\n  border-top-right-radius:    var(--dimension-radius-050) !important;\n  border-bottom-right-radius: var(--dimension-radius-050) !important;\n  border-bottom-left-radius:  var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n  border-top-right-radius:    0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.last {\n  border-top-left-radius:    0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n  border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n  border-top-left-radius:    var(--dimension-radius-half) !important;\n  border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n  border-top-right-radius:    var(--dimension-radius-half) !important;\n  border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }\n.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }\n.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }\n.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n  label?: string;\n  /** Icon name for <ds-icon>. Set via JS property. */\n  icon?: string;\n  variant?: 'primary' | 'secondary';\n  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n  inactive?: boolean;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-button-group',\n  styleUrl: 'ButtonGroup.css',\n  scoped: true,\n})\nexport class ButtonGroup {\n  /**\n   * Array of button descriptors. Set via JS property.\n   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n   */\n  @Prop() items: ButtonGroupItem[] = [];\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ButtonGroupElevation = 'flat';\n\n  /** Size passed to each ds-button. */\n  @Prop() size: ButtonGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Emits the index of the clicked item. */\n  @Event() dsClick!: EventEmitter<number>;\n\n  render() {\n    const items = this.items;\n    const count = items.length;\n    const elev = this.elevation;\n    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n    const isGhost = elev === 'none';\n\n    const groupCls: Record<string, boolean> = {\n      group: true,\n      [`group${elevKey}`]: true,\n      groupRounded: this.rounded,\n    };\n\n    return (\n      <Host>\n        <div class={groupCls} role=\"group\">\n          {items.map((item, i) => {\n            const isFirst = i === 0;\n            const isLast = i === count - 1;\n            const isMid = !isFirst && !isLast;\n            const variant = item.variant ?? 'secondary';\n            const isIconOnly = !!item.icon && !item.label;\n            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost && variant === 'secondary',\n              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n            };\n\n            const dividerCls: Record<string, boolean> = {\n              divider: true,\n              dividerGhost: isGhost,\n              dividerGhostXS: isGhost && this.size === 'xs',\n              dividerGhostSM: isGhost && this.size === 'sm',\n              dividerGhostLG: isGhost && this.size === 'lg',\n            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-button\n                class={itemCls}\n                variant={variant}\n                intent={item.intent ?? 'none'}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                rounded={this.rounded}\n                inactive={item.inactive}\n                href={item.href}\n                onDsClick={() => this.dsClick.emit(i)}\n              >\n                {item.icon && (\n                  <ds-icon slot=\"icon\" name={item.icon} />\n                )}\n              </ds-button>,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}
+{"version":3,"names":["buttonGroupCss","ButtonGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","items","elevation","size","rounded","render","count","length","elev","elevKey","charAt","toUpperCase","slice","isGhost","groupCls","group","groupRounded","h","Host","key","class","role","map","item","i","isFirst","isLast","isMid","variant","isIconOnly","icon","label","needsRoundedCorrection","sizeKey","itemCls","first","last","middle","itemShort","dividerCls","divider","dividerGhost","dividerGhostXS","dividerGhostSM","dividerGhostLG","intent","inactive","href","onDsClick","dsClick","emit","slot","name"],"sources":["src/wc/components/ButtonGroup/ButtonGroup.css?tag=ds-button-group&encapsulation=scoped","src/wc/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["/* ==========================================================================\n   ButtonGroup — flush row of ds-button components.\n   The group container carries the elevation; individual button chrome\n   (shadow/border) is suppressed via .item.\n   ========================================================================== */\n\n.group {\n  display: inline-flex;\n  align-items: stretch;\n  border-radius: var(--dimension-radius-050);\n  position: relative;\n}\n\n/* Inset ring / highlight overlay — sits above button children */\n.group::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n}\n\n/* ── Group-level elevation ──────────────────────────────────────────────── */\n\n.groupElevated { box-shadow: var(--effect-shadow-elevated-sm); }\n.groupElevated::after { box-shadow: var(--effect-highlight-elevated-sm); }\n\n.groupFlat::after { box-shadow: inset 0 0 0 1px var(--color-border-tertiary); }\n\n.groupFloating { box-shadow: var(--effect-shadow-elevated-floating); }\n.groupFloating::after { box-shadow: var(--effect-highlight-elevated-floating); }\n\n/* groupNone = ghost / primary — no shadow, no border */\n\n.groupRounded { border-radius: var(--dimension-radius-half); }\n\n/* ── Base item ─────────────────────────────────────────────────────────────── */\n\n.item {\n  flex-shrink: 0;\n  /* Suppress individual elevation so the group reads as one unit */\n  box-shadow: none !important;\n  border: none !important;\n}\n\n.item:active {\n  transform: none !important;\n}\n\n/* ── Divider ──────────────────────────────────────────────────────────────── */\n\n.divider {\n  width: 1px;\n  flex-shrink: 0;\n  background-color: var(--color-border-tertiary);\n  position: relative;\n  z-index: 1;\n  margin: 0 -0.5px;\n  pointer-events: none;\n}\n\n/* Ghost: short centred divider at icon height */\n.dividerGhost    { height: 20px; align-self: center; }\n.dividerGhostXS  { height: 12px; }\n.dividerGhostSM  { height: 16px; }\n.dividerGhostLG  { height: 24px; }\n\n/* Ghost hover-fade */\n.item:hover + .dividerGhost,\n.dividerGhost:has(+ .item:hover) { opacity: 0; }\n\n/* ── Ghost interaction states: rounded chips ──────────────────────────────── */\n\n.group .itemShort::after {\n  border-top-left-radius:     var(--dimension-radius-050) !important;\n  border-top-right-radius:    var(--dimension-radius-050) !important;\n  border-bottom-right-radius: var(--dimension-radius-050) !important;\n  border-bottom-left-radius:  var(--dimension-radius-050) !important;\n}\n\n/* ── Border radius: flatten inner-facing corners ──────────────────────────── */\n\n.first {\n  border-top-right-radius:    0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.last {\n  border-top-left-radius:    0 !important;\n  border-bottom-left-radius: 0 !important;\n}\n\n.middle {\n  border-radius: 0 !important;\n}\n\n/* Rounded group: first — left corners become pill */\n.groupRounded .first.itemShort::after {\n  border-top-left-radius:    var(--dimension-radius-half) !important;\n  border-bottom-left-radius: var(--dimension-radius-half) !important;\n}\n\n/* Rounded group: last — right corners become pill */\n.groupRounded .last.itemShort::after {\n  border-top-right-radius:    var(--dimension-radius-half) !important;\n  border-bottom-right-radius: var(--dimension-radius-half) !important;\n}\n\n/* ── Rounded: inner-edge padding correction ──────────────────────────────── */\n\n/* MD — base padding: space-100 */\n.roundedFirstMD { padding-right: var(--dimension-space-100) !important; }\n.roundedLastMD  { padding-left:  var(--dimension-space-100) !important; }\n.roundedMidMD   { padding-left:  var(--dimension-space-100) !important; padding-right: var(--dimension-space-100) !important; }\n\n/* SM — base padding: space-075 */\n.roundedFirstSM { padding-right: var(--dimension-space-075) !important; }\n.roundedLastSM  { padding-left:  var(--dimension-space-075) !important; }\n.roundedMidSM   { padding-left:  var(--dimension-space-075) !important; padding-right: var(--dimension-space-075) !important; }\n\n/* LG — base padding: space-150 */\n.roundedFirstLG { padding-right: var(--dimension-space-150) !important; }\n.roundedLastLG  { padding-left:  var(--dimension-space-150) !important; }\n.roundedMidLG   { padding-left:  var(--dimension-space-150) !important; padding-right: var(--dimension-space-150) !important; }\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ButtonGroupElevation = 'none' | 'flat' | 'elevated' | 'floating';\nexport type ButtonGroupSize      = 'xs' | 'sm' | 'md' | 'lg';\n\nexport interface ButtonGroupItem {\n  label?: string;\n  /** Icon name for <ds-icon>. Set via JS property. */\n  icon?: string;\n  variant?: 'primary' | 'secondary';\n  intent?: 'none' | 'neutral' | 'brand' | 'negative' | 'warning' | 'positive';\n  inactive?: boolean;\n  href?: string;\n}\n\n@Component({\n  tag: 'ds-button-group',\n  styleUrl: 'ButtonGroup.css',\n  scoped: true,\n})\nexport class ButtonGroup {\n  /**\n   * Array of button descriptors. Set via JS property.\n   * @example el.items = [{ label: 'Filter', icon: 'Filter' }, { label: 'Sort' }];\n   */\n  @Prop() items: ButtonGroupItem[] = [];\n\n  /** Chrome level for the group container. */\n  @Prop() elevation: ButtonGroupElevation = 'flat';\n\n  /** Size passed to each ds-button. */\n  @Prop() size: ButtonGroupSize = 'md';\n\n  /** Pill shape for group + buttons. */\n  @Prop() rounded: boolean = false;\n\n  /** Emits the index of the clicked item. */\n  @Event() dsClick!: EventEmitter<number>;\n\n  render() {\n    const items = this.items;\n    const count = items.length;\n    const elev = this.elevation;\n    const elevKey = elev.charAt(0).toUpperCase() + elev.slice(1);\n    const isGhost = elev === 'none';\n\n    const groupCls: Record<string, boolean> = {\n      group: true,\n      [`group${elevKey}`]: true,\n      groupRounded: this.rounded,\n    };\n\n    return (\n      <Host>\n        <div class={groupCls} role=\"group\">\n          {items.map((item, i) => {\n            const isFirst = i === 0;\n            const isLast = i === count - 1;\n            const isMid = !isFirst && !isLast;\n            const variant = item.variant ?? 'secondary';\n            const isIconOnly = !!item.icon && !item.label;\n            const needsRoundedCorrection = this.rounded && !isIconOnly && this.size !== 'xs';\n            const sizeKey = this.size.toUpperCase() as 'MD' | 'SM' | 'LG' | 'XS';\n\n            const itemCls: Record<string, boolean> = {\n              item: true,\n              first: isFirst,\n              last: isLast,\n              middle: isMid,\n              itemShort: isGhost && variant === 'secondary',\n              [`roundedFirst${sizeKey}`]: !!(needsRoundedCorrection && isFirst),\n              [`roundedLast${sizeKey}`]: !!(needsRoundedCorrection && isLast),\n              [`roundedMid${sizeKey}`]: !!(needsRoundedCorrection && isMid),\n            };\n\n            const dividerCls: Record<string, boolean> = {\n              divider: true,\n              dividerGhost: isGhost,\n              dividerGhostXS: isGhost && this.size === 'xs',\n              dividerGhostSM: isGhost && this.size === 'sm',\n              dividerGhostLG: isGhost && this.size === 'lg',\n            };\n\n            return [\n              i > 0 && (\n                <div class={dividerCls} aria-hidden=\"true\" />\n              ),\n              <ds-button\n                class={itemCls}\n                variant={variant}\n                intent={item.intent ?? 'none'}\n                elevation={elev}\n                size={this.size}\n                label={item.label}\n                rounded={this.rounded}\n                inactive={item.inactive}\n                href={item.href}\n                onDsClick={() => this.dsClick.emit(i)}\n              >\n                {item.icon && (\n                  <ds-icon slot=\"icon\" name={item.icon} />\n                )}\n              </ds-button>,\n            ];\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAiB,IAAM,uuG,MCoBhBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,2EAUUC,KAAAC,MAA2B,GAG3BD,KAAAE,UAAkC,OAGlCF,KAAAG,KAAwB,KAGxBH,KAAAI,QAAmB,KA2E5B,CAtEC,MAAAC,GACE,MAAMJ,EAAQD,KAAKC,MACnB,MAAMK,EAAQL,EAAMM,OACpB,MAAMC,EAAOR,KAAKE,UAClB,MAAMO,EAAUD,EAAKE,OAAO,GAAGC,cAAgBH,EAAKI,MAAM,GAC1D,MAAMC,EAAUL,IAAS,OAEzB,MAAMM,EAAoC,CACxCC,MAAO,KACP,CAAC,QAAQN,KAAY,KACrBO,aAAchB,KAAKI,SAGrB,OACEa,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAON,EAAUO,KAAK,SACxBpB,EAAMqB,KAAI,CAACC,EAAMC,KAChB,MAAMC,EAAUD,IAAM,EACtB,MAAME,EAASF,IAAMlB,EAAQ,EAC7B,MAAMqB,GAASF,IAAYC,EAC3B,MAAME,EAAUL,EAAKK,SAAW,YAChC,MAAMC,IAAeN,EAAKO,OAASP,EAAKQ,MACxC,MAAMC,EAAyBhC,KAAKI,UAAYyB,GAAc7B,KAAKG,OAAS,KAC5E,MAAM8B,EAAUjC,KAAKG,KAAKQ,cAE1B,MAAMuB,EAAmC,CACvCX,KAAM,KACNY,MAAOV,EACPW,KAAMV,EACNW,OAAQV,EACRW,UAAWzB,GAAWe,IAAY,YAClC,CAAC,eAAeK,QAAeD,GAA0BP,GACzD,CAAC,cAAcQ,QAAeD,GAA0BN,GACxD,CAAC,aAAaO,QAAeD,GAA0BL,IAGzD,MAAMY,EAAsC,CAC1CC,QAAS,KACTC,aAAc5B,EACd6B,eAAgB7B,GAAWb,KAAKG,OAAS,KACzCwC,eAAgB9B,GAAWb,KAAKG,OAAS,KACzCyC,eAAgB/B,GAAWb,KAAKG,OAAS,MAG3C,MAAO,CACLqB,EAAI,GACFP,EAAA,OAAKG,MAAOmB,EAAU,cAAc,SAEtCtB,EAAA,aACEG,MAAOc,EACPN,QAASA,EACTiB,OAAQtB,EAAKsB,QAAU,OACvB3C,UAAWM,EACXL,KAAMH,KAAKG,KACX4B,MAAOR,EAAKQ,MACZ3B,QAASJ,KAAKI,QACd0C,SAAUvB,EAAKuB,SACfC,KAAMxB,EAAKwB,KACXC,UAAW,IAAMhD,KAAKiD,QAAQC,KAAK1B,IAElCD,EAAKO,MACJb,EAAA,WAASkC,KAAK,OAAOC,KAAM7B,EAAKO,QAGrC,K","ignoreList":[]}

package/dist/components/ds-button.js

@@ -1,2 +1,2 @@
-import{B as s,d as o}from"./p-DdN6WnFs.js";const t=s;const n=o;export{t as DsButton,n as defineCustomElement};
+import{B as o,d as s}from"./p-B51N5kiy.js";const t=o;const p=s;export{t as DsButton,p as defineCustomElement};
 //# sourceMappingURL=ds-button.js.map

package/dist/components/ds-card.js

@@ -1,2 +1,2 @@
-import{p as e,H as d,h as a,a as s,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return a(s,{key:"eab8ba1a4830a0a4981f644ae4ea47d79ab0f736",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},a("slot",{key:"377361a9165d4065d9403638fb176f5dbcb58953",name:"header"}),a("div",{key:"7bf27bcb83ac32810448d5f73132563511f1678d",class:"body"},a("slot",{key:"241a4f2d4d7ca54af83fde5ee173dfe0d2cf0bf4"})),a("slot",{key:"717d51ec4f23c6d02a9beba409f4c05c440f3522",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
+import{p as e,H as d,h as s,a,t as r}from"./index.js";const o=()=>`.sc-ds-card-h{display:block;box-sizing:border-box;background-color:var(--color-background-primary);overflow:hidden}.elevation-flat.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-none)}.elevation-elevated.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-floating.sc-ds-card-h{box-shadow:var(--effect-elevation-elevated-floating)}.radius-sm.sc-ds-card-h{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-card-h{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-card-h{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-card-h{border-radius:var(--dimension-radius-175)}.sc-ds-card-s>[slot="header"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-primary)}.body.sc-ds-card{padding:var(--dimension-space-200)}.sc-ds-card-s>[slot="footer"]{display:block;padding:var(--dimension-space-150) var(--dimension-space-200);border-top:var(--dimension-stroke-width-015) solid var(--color-border-primary)}`;const i=e(class e extends d{constructor(e){super();if(e!==false){this.__registerHost()}this.elevation="elevated";this.radius="lg"}render(){return s(a,{key:"184eea0459960a7bb76a79cea6ef26e43d335fe1",class:{card:true,[`elevation-${this.elevation}`]:true,[`radius-${this.radius}`]:true}},s("slot",{key:"63d904dfc90ed71cc52c72f47d0dc985473006b0",name:"header"}),s("div",{key:"404bfe9b1b6a8e406ba1419508dd987652d88ce4",class:"body"},s("slot",{key:"3b0c047686bc33df4a10f83d54db7cced39bb0e6"})),s("slot",{key:"50f30a0dba2576147aa2de847ec2d3581bdfeb32",name:"footer"}))}static get style(){return o()}},[262,"ds-card",{elevation:[1],radius:[1]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-card"];e.forEach((e=>{switch(e){case"ds-card":if(!customElements.get(r(e))){customElements.define(r(e),i)}break}}))}c();const t=i;const n=c;export{t as DsCard,n as defineCustomElement};
 //# sourceMappingURL=ds-card.js.map

package/dist/components/ds-card.js.map

@@ -1 +1 @@
-{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}
+{"version":3,"names":["cardCss","Card","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","elevation","radius","render","h","Host","key","class","card","name"],"sources":["src/wc/components/Card/Card.css?tag=ds-card&encapsulation=scoped","src/wc/components/Card/Card.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  overflow: hidden;\n}\n\n/* Elevation */\n:host(.elevation-flat)     { box-shadow: var(--effect-elevation-elevated-none); }\n:host(.elevation-elevated) { box-shadow: var(--effect-elevation-elevated-sm); }\n:host(.elevation-floating) { box-shadow: var(--effect-elevation-elevated-floating); }\n\n/* Radius */\n:host(.radius-sm) { border-radius: var(--dimension-radius-075); }\n:host(.radius-md) { border-radius: var(--dimension-radius-100); }\n:host(.radius-lg) { border-radius: var(--dimension-radius-125); }\n:host(.radius-xl) { border-radius: var(--dimension-radius-175); }\n\n/* Sections */\n::slotted([slot=\"header\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.body {\n  padding: var(--dimension-space-200);\n}\n\n::slotted([slot=\"footer\"]) {\n  display: block;\n  padding: var(--dimension-space-150) var(--dimension-space-200);\n  border-top: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardElevation = 'flat' | 'elevated' | 'floating';\nexport type CardRadius = 'sm' | 'md' | 'lg' | 'xl';\n\n@Component({\n  tag: 'ds-card',\n  styleUrl: 'Card.css',\n  scoped: true,\n})\nexport class Card {\n  @Prop() elevation: CardElevation = 'elevated';\n  @Prop() radius: CardRadius = 'lg';\n\n  render() {\n    return (\n      <Host class={{ card: true, [`elevation-${this.elevation}`]: true, [`radius-${this.radius}`]: true }}>\n        <slot name=\"header\" />\n        <div class=\"body\">\n          <slot />\n        </div>\n        <slot name=\"footer\" />\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAU,IAAM,2hC,MCUTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,UAA2B,WAC3BD,KAAAE,OAAqB,IAa9B,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,KAAM,KAAM,CAAC,aAAaR,KAAKC,aAAc,KAAM,CAAC,UAAUD,KAAKE,UAAW,OAC3FE,EAAA,QAAAE,IAAA,2CAAMG,KAAK,WACXL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,QAAAE,IAAA,2CAAMG,KAAK,W","ignoreList":[]}

package/dist/components/ds-checkbox.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"0a52eba5a20efae7cf4214bc5e88be15b0d47b12",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"053c607924ce2940add65fea65135bcf5bd1c50d",class:{box:true,"box--marked":e}},e&&c("span",{key:"ad1aaa0cabad80a93ab78bd1a0ffc71fd3d7a66a",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"07ba3ba551824707a52d67ad94516e89bd664ee1",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
+import{p as e,H as s,c as o,h as c,a as i,t as r}from"./index.js";const t=()=>`.checkbox.sc-ds-checkbox{display:flex;align-items:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);height:var(--dimension-size-400);box-sizing:border-box;cursor:pointer;user-select:none;border-radius:var(--dimension-radius-075);transition:background-color var(--effect-motion-short-2)}.checkbox.sc-ds-checkbox:hover{background-color:var(--color-interaction-hover)}.checkbox.sc-ds-checkbox:active{background-color:var(--color-interaction-pressed)}.inactive.sc-ds-checkbox{cursor:not-allowed;opacity:0.5;pointer-events:none}.box.sc-ds-checkbox{width:20px;height:20px;flex-shrink:0;border:1.5px solid var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;box-sizing:border-box;transition:all var(--effect-motion-short-2)}.box--marked.sc-ds-checkbox{background-color:var(--color-foreground-primary);border-color:var(--color-foreground-primary)}.checkmark.sc-ds-checkbox{color:var(--color-foreground-on-bold-background-primary);font-size:14px;line-height:1;font-weight:700}.checkbox__label.sc-ds-checkbox{flex:1;min-width:0}`;let a=0;const n=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=o(this,"dsChange");this.labelId=`ds-checkbox-label-${++a}`;this.checked=false;this.indeterminate=false;this.inactive=false;this.handleActivate=()=>{if(this.inactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=e=>{if(e.key===" "||e.key==="Enter"){e.preventDefault();this.handleActivate()}}}render(){const e=this.checked||this.indeterminate;return c(i,{key:"cba6fe32eaf9a9d9b504be90e2ddb09ed90a2db6",role:"checkbox","aria-checked":this.indeterminate?"mixed":String(this.checked),"aria-disabled":this.inactive||undefined,"aria-labelledby":this.labelId,tabIndex:this.inactive?-1:0,class:{checkbox:true,inactive:this.inactive},onClick:this.handleActivate,onKeyDown:this.handleKeyDown},c("span",{key:"a163ae1fe07ba57c55e9857e620747b7c0849db5",class:{box:true,"box--marked":e}},e&&c("span",{key:"c19bf6081f3888689f832b15c5acd281a1db4aec",class:"checkmark","aria-hidden":"true"},this.indeterminate?"−":"✓")),c("span",{key:"ee402c31cae501f6c0a56668f1c5d663e8e009a2",id:this.labelId,class:"text-body-medium checkbox__label"},this.label))}static get style(){return t()}},[2,"ds-checkbox",{label:[1],checked:[1028],indeterminate:[4],inactive:[4]}]);function d(){if(typeof customElements==="undefined"){return}const e=["ds-checkbox"];e.forEach((e=>{switch(e){case"ds-checkbox":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}d();const h=n;const b=d;export{h as DsCheckbox,b as defineCustomElement};
 //# sourceMappingURL=ds-checkbox.js.map

package/dist/components/ds-divider.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"05d217d9d0d1330df80ff23120bdd578e29f46b6",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const a=n;const c=d;export{a as DsDivider,c as defineCustomElement};
+import{p as t,H as e,h as s,t as r,a as i}from"./index.js";const o=()=>`:host{display:block;border:none;margin:0;flex-shrink:0;background-color:var(--color-border-secondary)}:host(:not(.vertical)){width:100%;height:1px}:host(.vertical){width:1px;height:100%;align-self:stretch}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.orientation="horizontal"}render(){return s(i,{key:"63fbed2bb0063d1c6a40659cc90a871a346358af",role:"separator","aria-orientation":this.orientation,class:{vertical:this.orientation==="vertical"}})}static get style(){return o()}},[1,"ds-divider",{orientation:[1]}]);function a(){if(typeof customElements==="undefined"){return}const t=["ds-divider"];t.forEach((t=>{switch(t){case"ds-divider":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}a();const c=n;const d=a;export{c as DsDivider,d as defineCustomElement};
 //# sourceMappingURL=ds-divider.js.map

package/dist/components/ds-empty-state.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as s,a as c,t as a}from"./index.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const o={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(c,{key:"386f65dc8fabc2b510cd2769c86109e352f42803"},s("div",{key:"f4ae4a6507773d51f33f17c2d567c310fe2e9c5e",class:"empty-state"},s("p",{key:"65f599fb8782b80da7ae90f7e7d0f20dbd37a070",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||o[this.type])))}static get style(){return n()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(a(t))){customElements.define(a(t),d)}break}}))}i();const r=d;const f=i;export{r as DsEmptyState,f as defineCustomElement};
+import{p as t,H as e,h as s,a,t as c}from"./index.js";const n=()=>`.sc-ds-empty-state-h{display:block;width:100%;height:100%}.empty-state.sc-ds-empty-state{display:flex;align-items:center;justify-content:center;height:100%;min-height:400px;width:100%}.empty-state.sc-ds-empty-state p.sc-ds-empty-state{margin:0}`;const o={"no-content":"No page contents to display.","no-results":"No results found.","no-results-filter":"No results found. Please update search criteria.","no-access":"You don't have access to this page."};const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.type="no-content"}render(){return s(a,{key:"03fb34d944db53973a8ae28554d30f8e7e36b304"},s("div",{key:"42122a912901a33817e669e506f121cd2e3714bb",class:"empty-state"},s("p",{key:"8c3d0560808fcccc68bda617db40283afba0c4a4",class:"text-body-medium",style:{color:"var(--color-foreground-secondary)"}},this.message||o[this.type])))}static get style(){return n()}},[2,"ds-empty-state",{type:[1],message:[1]}]);function i(){if(typeof customElements==="undefined"){return}const t=["ds-empty-state"];t.forEach((t=>{switch(t){case"ds-empty-state":if(!customElements.get(c(t))){customElements.define(c(t),d)}break}}))}i();const r=d;const p=i;export{r as DsEmptyState,p as defineCustomElement};
 //# sourceMappingURL=ds-empty-state.js.map

package/dist/components/ds-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}
+{"version":3,"names":["emptyStateCss","DEFAULT_MESSAGES","EmptyState","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","type","render","h","Host","key","class","style","color","message"],"sources":["src/wc/components/EmptyState/EmptyState.css?tag=ds-empty-state&encapsulation=scoped","src/wc/components/EmptyState/EmptyState.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.empty-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  min-height: 400px;\n  width: 100%;\n}\n\n.empty-state p {\n  margin: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type EmptyStateType = 'no-content' | 'no-results' | 'no-results-filter' | 'no-access';\n\nconst DEFAULT_MESSAGES: Record<EmptyStateType, string> = {\n  'no-content': 'No page contents to display.',\n  'no-results': 'No results found.',\n  'no-results-filter': 'No results found. Please update search criteria.',\n  'no-access': \"You don't have access to this page.\",\n};\n\n@Component({\n  tag: 'ds-empty-state',\n  styleUrl: 'EmptyState.css',\n  scoped: true,\n})\nexport class EmptyState {\n  @Prop() type: EmptyStateType = 'no-content';\n  @Prop() message: string | undefined;\n\n  render() {\n    return (\n      <Host>\n        <div class=\"empty-state\">\n          <p class=\"text-body-medium\" style={{ color: 'var(--color-foreground-secondary)' }}>\n            {this.message || DEFAULT_MESSAGES[this.type]}\n          </p>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAgB,IAAM,uPCI5B,MAAMC,EAAmD,CACvD,aAAc,+BACd,aAAc,oBACd,oBAAqB,mDACrB,YAAa,uC,MAQFC,EAAUC,EAAA,MAAAD,UAAAE,EALvB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAuB,YAchC,CAXC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,eACTH,EAAA,KAAAE,IAAA,2CAAGC,MAAM,mBAAmBC,MAAO,CAAEC,MAAO,sCACzCR,KAAKS,SAAWf,EAAiBM,KAAKC,Q","ignoreList":[]}

package/dist/components/ds-fade.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"8b825987246fa9f643d107322e81e073d76dbd97","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
+import{p as t,H as e,h as a,t as r,a as s}from"./index.js";const o=()=>`:host{position:absolute;pointer-events:none;z-index:10;transform:translateZ(0);backface-visibility:hidden}@media (prefers-reduced-motion: reduce){:host{transition:none}}:host(.fade--top){top:0;left:0;right:0;background:linear-gradient(to bottom, var(--ds-fade-bg) 0%, var(--ds-fade-bg) 50%, transparent 100%)}:host(.fade--bottom){bottom:0;left:0;right:0;background:linear-gradient(to top, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--left){top:0;bottom:0;left:0;background:linear-gradient(to right, var(--ds-fade-bg) 0%, transparent 100%)}:host(.fade--right){top:0;bottom:0;right:0;background:linear-gradient(to left, var(--ds-fade-bg) 0%, transparent 100%)}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.background="var(--color-background-secondary)"}render(){return a(s,{key:"ba1e11b289ecf13ce7b75eb94f1f0849d14a9db4","aria-hidden":"true",class:{fade:true,[`fade--${this.side}`]:true},style:{height:this.height,"--ds-fade-bg":this.background}})}static get style(){return o()}},[1,"ds-fade",{side:[1],height:[1],background:[1]}]);function d(){if(typeof customElements==="undefined"){return}const t=["ds-fade"];t.forEach((t=>{switch(t){case"ds-fade":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}d();const i=n;const f=d;export{i as DsFade,f as defineCustomElement};
 //# sourceMappingURL=ds-fade.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as d,a as l,t}from"./index.js";const c=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let i=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++i}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"8f813ce7af789cf3a16841519e0c6314d9e4b5e8"},d("div",{key:"5c199a001430609dd83dffbb2795e2c7029f40c6",class:"field"},d("label",{key:"85bf00d09fc99527082ee60f5fd630951309a560",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"e0bc9dbcfd770e6ee3d4bd4c41d03ce5bbdd00c4"})))}static get style(){return c()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
+import{p as e,H as s,h as d,a as l,t}from"./index.js";const i=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__label.sc-ds-field{display:block}`;let c=0;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.resolvedId=`ds-field-${++c}`}render(){const e=this.fieldId||this.resolvedId;return d(l,{key:"16bc2e031559311d9d493f7383cde63c6a87980c"},d("div",{key:"9a1b08408027f44a865faf1489c8417b59ddbf40",class:"field"},d("label",{key:"7e48c8ded4a0a48bfdc93e4f158fd528d9c2665f",class:"text-body-small-emphasis field__label",htmlFor:e},this.label),d("slot",{key:"90f608431565c9ff5033173f5ebe80666c45266d"})))}static get style(){return i()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"]}]);function a(){if(typeof customElements==="undefined"){return}const e=["ds-field"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(t(e))){customElements.define(t(e),f)}break}}))}a();const n=f;const o=a;export{n as DsField,o as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-header.js

@@ -1,2 +1,2 @@
-import{p as e,H as a,h as r,a as s,t}from"./index.js";const c=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"da0a5d4df9029fee8563eba64b21ffb149b32652",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"442350df0e24431f7b1230b2875726879175224e",class:"left"},r("slot",{key:"0fbb9cc116b6d56c77eeddc3a0221b62afc4f9e4",name:"left"}),this.heading&&r("span",{key:"7eacaaebb8694bcfe1d31bf66d7843279412d634",class:"title text-title-small"},this.heading)),r("div",{key:"fcea6ce63814b460964f099f1aa7eb0704cb1576",class:"center"},r("slot",{key:"1fe99e1754f117298e71fe7a364f026660a31e73",name:"center"})),r("div",{key:"dc50a094ae6df86f66dbd7e4697b55f441b9d142",class:"right"},r("slot",{key:"93c33b68af8c9ad0ecce38cc0b776ac02568d588",name:"right"})))}static get style(){return c()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(t(e))){customElements.define(t(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
+import{p as e,H as a,h as r,a as s,t as c}from"./index.js";const t=()=>`.sc-ds-header-h{display:flex;align-items:center;justify-content:space-between;height:var(--dimension-size-600, 48px);padding:0 var(--dimension-space-100);flex-shrink:0;gap:var(--dimension-space-100);border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);box-sizing:border-box}.bg-primary.sc-ds-header-h{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-header-h{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-header-h{background-color:transparent}.bg-translucent.sc-ds-header-h{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.left.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-100);flex-shrink:0;min-width:0}.title.sc-ds-header{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center.sc-ds-header{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);flex:1;min-width:0}.right.sc-ds-header{display:flex;align-items:center;gap:var(--dimension-space-050);flex-shrink:0}`;const d=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.background="secondary"}render(){return r(s,{key:"c802d27e10e00e9cfdb74b6364fb2fffede08893",class:{header:true,[`bg-${this.background}`]:true},role:"banner"},r("div",{key:"1b9bcf857ac946d1b588cef94cf2c9f3c26263b0",class:"left"},r("slot",{key:"b400b3f076a107bcaffe4eaaace152423a3904c6",name:"left"}),this.heading&&r("span",{key:"cb64408fe948411cbceb87699352cd0512a1446a",class:"title text-title-small"},this.heading)),r("div",{key:"f94983b3f40ce764d402981000170ca29dead4a0",class:"center"},r("slot",{key:"a71ce0c5fc65725cb9cc82345f87b4d307e8aa7f",name:"center"})),r("div",{key:"869549006da038fbe23de656938a6348dd447d90",class:"right"},r("slot",{key:"4643291690551cdf02c1be67a45b971c5a11354f",name:"right"})))}static get style(){return t()}},[262,"ds-header",{heading:[1],background:[1]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-header"];e.forEach((e=>{switch(e){case"ds-header":if(!customElements.get(c(e))){customElements.define(c(e),d)}break}}))}n();const i=d;const o=n;export{i as DsHeader,o as defineCustomElement};
 //# sourceMappingURL=ds-header.js.map

package/dist/components/ds-header.js.map

@@ -1 +1 @@
-{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sDAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}
+{"version":3,"names":["headerCss","Header","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","render","h","Host","key","class","header","role","name","heading"],"sources":["src/wc/components/Header/Header.css?tag=ds-header&encapsulation=scoped","src/wc/components/Header/Header.tsx"],"sourcesContent":[":host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: var(--dimension-size-600, 48px);\n  padding: 0 var(--dimension-space-100);\n  flex-shrink: 0;\n  gap: var(--dimension-space-100);\n  border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n  box-sizing: border-box;\n}\n\n/* Backgrounds */\n:host(.bg-primary)     { background-color: var(--color-background-primary); }\n:host(.bg-secondary)   { background-color: var(--color-background-secondary); }\n:host(.bg-transparent) { background-color: transparent; }\n:host(.bg-translucent) {\n  background-color: var(--color-background-translucent);\n  backdrop-filter: blur(var(--effect-blur-md));\n  -webkit-backdrop-filter: blur(var(--effect-blur-md));\n}\n\n.left {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex-shrink: 0;\n  min-width: 0;\n}\n\n.title {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.center {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--dimension-space-050);\n  flex: 1;\n  min-width: 0;\n}\n\n.right {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex-shrink: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type HeaderBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\n\n@Component({\n  tag: 'ds-header',\n  styleUrl: 'Header.css',\n  scoped: true,\n})\nexport class Header {\n  @Prop() heading: string | undefined;\n  @Prop() background: HeaderBackground = 'secondary';\n\n  render() {\n    return (\n      <Host\n        class={{ header: true, [`bg-${this.background}`]: true }}\n        role=\"banner\"\n      >\n        <div class=\"left\">\n          <slot name=\"left\" />\n          {this.heading && <span class=\"title text-title-small\">{this.heading}</span>}\n        </div>\n        <div class=\"center\">\n          <slot name=\"center\" />\n        </div>\n        <div class=\"right\">\n          <slot name=\"right\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAY,IAAM,wlC,MCSXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,4CAOUC,KAAAC,WAA+B,WAqBxC,CAnBC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,OAAQ,KAAM,CAAC,MAAMP,KAAKC,cAAe,MAClDO,KAAK,UAELL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,QACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SACVT,KAAKU,SAAWP,EAAA,QAAAE,IAAA,2CAAMC,MAAM,0BAA0BN,KAAKU,UAE9DP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEbN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,SACTH,EAAA,QAAAE,IAAA,2CAAMI,KAAK,W","ignoreList":[]}

package/dist/components/ds-icon.js

@@ -1,2 +1,2 @@
-import{I as o,d as s}from"./p-CGuwZUFk.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
+import{I as o,d as s}from"./p-CkBXHj0e.js";const t=o;const p=s;export{t as DsIcon,p as defineCustomElement};
 //# sourceMappingURL=ds-icon.js.map

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as s,h as t,a as r,t as a}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"98eccc46df56e7925fb27fbab2cb930626e39bb7",class:"input-container"},t("div",{key:"c58204b977cdf3b9db367f86bfeb960e56ebdc5f",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"a01b2908be7a66cb339f53488a151429411b1ed8",class:"row"},t("input",{key:"f0189940d32214e374ef121e9ec6c109377c05c0",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"6d459efce0326c68364a821a0ee069f5ae748265",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"713a237e736c8b93fd9006ee7a9d706d333a9459","aria-hidden":"true"},"×")),t("span",{key:"9b119c034619cdcf719653546fd9cddb1003f723",class:"suffix"},t("slot",{key:"e54cdf9b5ddfaffe66bb209bf1bfe56088f9e32e",name:"suffix"})))),s&&t("div",{key:"9249d849cb8d2e7a5a8a441b4000051e5e95bcce",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
+import{p as e,H as i,c as s,h as t,a as r,t as a}from"./index.js";const n=()=>`.input-container.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.wrapper.sc-ds-input{width:100%;height:var(--dimension-size-400);display:flex;align-items:center;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-elevation-depressed-sm);box-sizing:border-box}.wrapper.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-foreground-bold-brand)}.wrapper--error.sc-ds-input{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.wrapper--error.sc-ds-input:focus-within{box-shadow:inset 0 0 0 1.25px var(--color-border-bold-negative)}.row.sc-ds-input{display:flex;align-items:center;width:100%;height:100%;gap:var(--dimension-space-050)}.native-input.sc-ds-input{flex:1;min-width:0;height:100%;padding:0 var(--dimension-space-100);background:transparent;border:none;outline:none;font-family:inherit;font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);color:var(--color-foreground-primary);border-radius:var(--dimension-radius-075);-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{opacity:0.5;cursor:not-allowed}.native-input.sc-ds-input::placeholder{color:var(--color-foreground-secondary)}.native-input.sc-ds-input:focus::placeholder{color:var(--color-foreground-tertiary)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.clear-btn.sc-ds-input{flex-shrink:0;margin-right:var(--dimension-space-050);padding:var(--dimension-space-050);border:none;background:none;cursor:pointer;color:var(--color-foreground-secondary);border-radius:var(--dimension-radius-050);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}.clear-btn.sc-ds-input:hover{background-color:var(--color-interaction-hover)}.suffix.sc-ds-input{display:flex;align-items:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.suffix.sc-ds-input:empty{display:none}.error-text.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);color:var(--color-foreground-bold-negative)}`;let o=0;const d=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.generatedId=`ds-input-${++o}`;this.errorId=`${this.generatedId}-error`;this.value="";this.type="text";this.inactive=false;this.autoFocus=false;this.error=false;this.handleInput=e=>{this.dsChange.emit(e.target.value)};this.handleClear=()=>{this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}async setFocus(){this.el.querySelector("input")?.focus()}render(){const e=this.inputId??this.generatedId;const i=this.type==="search"&&this.value.length>0&&!this.inactive;const s=this.error&&Boolean(this.errorMessage);const a=[this.ariaDescribedby,s?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return t(r,{key:"3688292a744f440f69fdf3fcb485f19ca8368e2c",class:"input-container"},t("div",{key:"76550a088e5728b6276fc1054ca5b588116b937c",class:{wrapper:true,"wrapper--error":this.error}},t("div",{key:"4d050b983ee3bdc4a265811d506fad50b48c1bab",class:"row"},t("input",{key:"a47d43afb818beebd86d241451ded66959619c35",type:this.type,id:e,value:this.value,placeholder:this.placeholder,disabled:this.inactive,autoFocus:this.autoFocus,class:"native-input","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":a,"aria-invalid":this.error||undefined,onInput:this.handleInput}),i&&t("button",{key:"7da31f14f7833c27f29bb522ddfc43baee6e042b",type:"button",class:"clear-btn",onClick:this.handleClear,"aria-label":"Clear"},t("span",{key:"4c313394bdb233a0c326d1bea3fb8f6b0276904d","aria-hidden":"true"},"×")),t("span",{key:"de66762f1e23a845bb4ecf865b2fcc92dff703e1",class:"suffix"},t("slot",{key:"75b53412cea9dc91be8aa73c73a3a8293147e0b0",name:"suffix"})))),s&&t("div",{key:"72dec8889142e3510d60e0cfec5606d823a47117",id:this.errorId,role:"alert",class:"error-text"},this.errorMessage))}get el(){return this}static get style(){return n()}},[262,"ds-input",{value:[1],placeholder:[1],type:[1],inactive:[4],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],setFocus:[64]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-input"];e.forEach((e=>{switch(e){case"ds-input":if(!customElements.get(a(e))){customElements.define(a(e),d)}break}}))}c();const l=d;const p=c;export{l as DsInput,p as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

package/dist/components/ds-label-wrap.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as a,a as t,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return a(t,{key:"63918580201d398012afad55492d3f8a7701500a",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},a("slot",{key:"b96e4d1644445272646c24aa6b3aecad2016ae1d"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
+import{p as s,H as e,h as a,a as t,t as i}from"./index.js";const l=()=>`.label-wrap.sc-ds-label-wrap-h{display:inline-block;line-height:0;white-space:nowrap;flex-shrink:0;padding:0 var(--dimension-space-050)}.size-xs.sc-ds-label-wrap-h,.size-sm.sc-ds-label-wrap-h{padding:0 var(--dimension-space-025)}.truncate.sc-ds-label-wrap-h{flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}`;const n=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.size="md";this.truncate=false}render(){return a(t,{key:"018dbf5b89ac62c8f94d87c260b3f5aa47af8724",class:{"label-wrap":true,"size-xs":this.size==="xs","size-sm":this.size==="sm","size-lg":this.size==="lg",truncate:this.truncate}},a("slot",{key:"9ff81402c960629e8c7ff7a963025d97dae4e9d3"}))}static get style(){return l()}},[262,"ds-label-wrap",{size:[1],truncate:[4]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-label-wrap"];s.forEach((s=>{switch(s){case"ds-label-wrap":if(!customElements.get(i(s))){customElements.define(i(s),n)}break}}))}r();const c=n;const d=r;export{c as DsLabelWrap,d as defineCustomElement};
 //# sourceMappingURL=ds-label-wrap.js.map

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as a,h as s,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const a=this.getFocusables(t);if(!a.length){e.preventDefault();t.focus();return}const s=a[0];const o=a[a.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();s.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"7a43e148a0bb8395a2f1ef301b6eeca2933da1a3",style:{display:"contents"}},s("div",{key:"07c9e6b8238fa11e4569d994dbecb988490ffba7",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},s("div",{key:"afaf56766355ea95d17edf68d608749383ebde97",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},s("div",{key:"7653fc36a2e4386c5de987f32221002a13d65b35",class:"modal-header"},s("h2",{key:"97f14308a035989d05d0959495f37cf86890c85a",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&s("div",{key:"54752d6ae2f323269eeb7c5c5027b0db6432914b",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),s("div",{key:"4359549b810c27b755293dd8b80224ddf70ed402",class:"modal-body"},s("slot",{key:"9c59d6973b1e1e30ed3296026ac0f4175c1b40a1"})),s("div",{key:"db29f6da90175dc9737525d0889ea4b2df30d2ab",class:"modal-footer"},s("slot",{key:"37d9cf482ab3f689c62195d80c649fa3a0e57c65",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}h();const f=m;const u=h;export{f as DsModal,u as defineCustomElement};
+import{p as e,H as t,c as a,h as s,a as o,t as i}from"./index.js";const d=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 32px);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-275, 22px);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-title.sc-ds-modal{margin:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100);color:var(--color-foreground-secondary);text-wrap:balance}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const n={sm:"var(--dimension-modal-width-sm, 400px)",md:"var(--dimension-modal-width-md, 560px)",lg:"var(--dimension-modal-width-lg, 720px)"};const l=220;const r=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let c=0;const m=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++c;this.titleId=`ds-modal-title-${c}`;this.subtitleId=`ds-modal-subtitle-${c}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners()}onOpenChange(e){if(e){this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;this.teardownListeners();this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null;this.previousFocus?.focus?.();this.previousFocus=null}),l)}}focusFirst(){const e=this.el.querySelector(".modal-dialog");if(!e)return;const t=this.getFocusables(e);(t[0]??e).focus()}getFocusables(e){return Array.from(e.querySelectorAll(r)).filter((e=>!e.hasAttribute("disabled")&&e.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=e=>{if(e.key==="Escape"){e.preventDefault();this.close()}};this.tabHandler=e=>{if(e.key!=="Tab")return;const t=this.el.querySelector(".modal-dialog");if(!t)return;const a=this.getFocusables(t);if(!a.length){e.preventDefault();t.focus();return}const s=a[0];const o=a[a.length-1];const i=document.activeElement;if(e.shiftKey){if(i===s||i===t||!t.contains(i)){e.preventDefault();o.focus()}}else{if(i===o||!t.contains(i)){e.preventDefault();s.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.dsClose.emit();this.open=false}handleBackdropMouseDown(e){if(e.target===e.currentTarget)this.close()}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return n[this.modalWidth]}return this.modalWidth}render(){const e=!this.shouldRender&&!this.closing;return s(o,{key:"9f693fdc7af54b9107c566964034ea0c71042965",style:{display:"contents"}},s("div",{key:"f8a8789874c121481f32ca47e4194ff48e125f87",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":e},onMouseDown:e=>this.handleBackdropMouseDown(e),style:{position:"fixed",inset:"0",zIndex:"9999",display:e?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},s("div",{key:"324c147ee62eb5a2c94abc920ea39bb8c453df75",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 32px))`}},s("div",{key:"750c0e090075a96feb02cccbabbf1537e8c5cc87",class:"modal-header"},s("h2",{key:"18266dc9cb5fb5ada2967dc20dff8f6f05beef9b",id:this.titleId,class:"text-title-small modal-title"},this.heading),this.subtitle&&s("div",{key:"a3a0ecbc294f42a1c55d197239f3136516708ef3",id:this.subtitleId,class:"modal-subtitle text-body-medium"},this.subtitle)),s("div",{key:"0acefd1f93a24a9c2c6809d35e501ece045d0703",class:"modal-body"},s("slot",{key:"cd7f65a4ce4d5b9aca6ef1002127dd79e7d72296"})),s("div",{key:"4c7b4413a54c480108394afac976c02fca43bc54",class:"modal-footer"},s("slot",{key:"07aeff1170220c6227764dba7b585e06e1752bed",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return d()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function f(){if(typeof customElements==="undefined"){return}const e=["ds-modal"];e.forEach((e=>{switch(e){case"ds-modal":if(!customElements.get(i(e))){customElements.define(i(e),m)}break}}))}f();const h=m;const u=f;export{h as DsModal,u as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

package/dist/components/ds-panel-nav.js

@@ -1,2 +1,2 @@
-import{p as a,H as e,c as n,h as t,a as i,t as o}from"./index.js";import{d as s}from"./p-CGuwZUFk.js";import{d as r}from"./p-Leo9RPok.js";const d=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::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)}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;width:var(--dimension-space-075, 6px);height:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-full, 999px);background:var(--_nav-dot);box-shadow:0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     box-shadow var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:6px;top:6px}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer.sc-ds-panel-nav::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:calc(var(--dimension-base, 8px) * 6);background:linear-gradient(to bottom, transparent, var(--_nav-bg));pointer-events:none;opacity:1;transition:opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--at-bottom.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav::before{opacity:0}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half, 9999px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--dashboard.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--settings.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;let l=false;const c=new WeakMap;const v=new WeakMap;function p(){if(l)return;const a="ds-panel-nav-vt-style";if(document.getElementById(a)){l=true;return}const e=document.createElement("style");e.id=a;e.textContent=["::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}","::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}"].join("\n");document.head.appendChild(e);l=true}function h(a,e){const n=a.trim();const t=parseFloat(n);if(Number.isNaN(t))return e;if(/ms\s*$/.test(n))return t;if(/s\s*$/.test(n))return t*1e3;return t}const f=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.variant="dashboard";this.disableViewTransition=false;this.groups="[]";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedVariant="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(a){try{this.parsedGroups=JSON.parse(a)}catch{this.parsedGroups=[]}this.syncRovingIndex()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}async onVariantChange(a){if(this.disableViewTransition){this.renderedVariant=a;return}c.get(this)?.skipTransition();c.delete(this);const e=document;if(typeof e.startViewTransition!=="function"){this.renderedVariant=a;return}p();const n=this.el.querySelector(".panel-nav__footer-btn");const t=n?.getBoundingClientRect();const i=t?Math.round(t.left+t.width/2):Math.round(window.innerWidth/2);const o=t?Math.round(t.top+t.height/2):Math.round(window.innerHeight/2);const s=Math.ceil(Math.hypot(Math.max(i,window.innerWidth-i),Math.max(o,window.innerHeight-o)));document.documentElement.style.setProperty("--vt-x",`${i}px`);document.documentElement.style.setProperty("--vt-y",`${o}px`);const r=e.startViewTransition((()=>new Promise((e=>{v.set(this,e);this.renderedVariant=a}))));c.set(this,r);r.finished.finally((()=>{if(c.get(this)===r)c.delete(this);v.delete(this)}));r.ready.then((()=>{const a=getComputedStyle(document.documentElement).getPropertyValue("--effect-animation-duration-long-1").trim();const e=h(a,750);document.documentElement.animate({clipPath:[`circle(0px at ${i}px ${o}px)`,`circle(${s}px at ${i}px ${o}px)`]},{duration:e,easing:"ease-in-out",fill:"forwards",pseudoElement:"::view-transition-new(root)"})})).catch((()=>{}))}componentWillLoad(){this.renderedVariant=this.variant;if(this.storageKey){try{const a=localStorage.getItem(this.storageKey);if(a!==null)this.collapsed=a==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver();this.onGroupsChange(this.groups)}componentDidRender(){const a=v.get(this);if(a){v.delete(this);a()}}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const a=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){a?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=e=>{if(e.propertyName==="width"){this.isAnimating=false;a?.removeEventListener("transitionend",this.transitionEndHandler)}};a?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}let a;let e=0;for(const n of this.getAllItems()){if(n.href&&this.currentUrl.startsWith(n.href)&&n.href.length>e){a=n;e=n.href.length}}this.urlDerivedActiveId=a?.id??""}applyToggle(a){this.dsNavToggle.emit(a);if(this.storageKey){this.collapsed=a;try{localStorage.setItem(this.storageKey,String(a))}catch{}}}getAllItems(){return this.parsedGroups.flatMap((a=>a.items))}syncRovingIndex(){const a=this.getAllItems().findIndex((a=>a.id===this.effectiveActiveId));this.rovingIndex=a>=0?a:0}handleItemKeyDown(a,e){const n=this.getAllItems().length;let t;switch(a.key){case"ArrowDown":a.preventDefault();t=(e+1)%n;break;case"ArrowUp":a.preventDefault();t=(e-1+n)%n;break;case"Home":a.preventDefault();t=0;break;case"End":a.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const a=this.el.querySelector(".panel-nav__body");if(!a)return;const e=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=e<2}handleBodyScroll(a){const e=a.target;const n=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=n<2}handleItemClick(a){this.dsNavSelect.emit(a)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(a){a.preventDefault();a.stopPropagation();const e=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=a.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=a=>{const n=a.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!e&&n<-8){this.applyToggle(true);this.didSnap=true}else if(e&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!e)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(a,e,n){const i=a.id===this.effectiveActiveId;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:a.icon,size:"md",color:"inherit",flag:a.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},a.label))),a.dot&&t("span",{class:"panel-nav__item-dot","aria-hidden":"true"})];const s={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?a.label:undefined,tabIndex:e===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(a.id),onKeyDown:a=>this.handleItemKeyDown(a,e),onFocus:()=>{this.rovingIndex=e}};return a.href?t("a",{...s,href:a.href},o):t("button",{...s,type:"button"},o)}render(){const a=this.renderedVariant==="dashboard";const e=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:o}=this;const s={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":e,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"c979e62e485a83c826efc785e9668c82d16ead44",style:{display:"block",position:"relative"}},t("nav",{key:"fb40b5b090f4f712a4f7c51eedddfa1752dd06ae",class:s,"aria-label":a?"Main navigation":"Settings navigation"},t("div",{key:"0f8c2a5092061ec105b9c14a3d5ad79f21fa4d01",class:"panel-nav__header"},t("button",{key:"0de848793f4e193a417e57f1e18e3c5421babbff",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":e?"Expand navigation":"Collapse navigation","aria-expanded":e?"false":"true"},t("span",{key:"7eb39b83ee33b0c9c61c5794b97d22d4ccf3fb6c",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"0d30982fb4b084e24732254b96820da5e21f68d5",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"241f5a262813d8e9cc961344ab2324cd0612a892",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"81ed2eca7872c3cfadf0d0f270dfae36b3899d52",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"b92cf142dd06ebb9d40bcbfff58c699a5f615095",name:e?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"8fdc9ad2585708ffd44c2bb0c644c8449f1c7617",class:"panel-nav__body",onScroll:a=>this.handleBodyScroll(a)},(()=>{let a=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,a++,e))))))})()),t("div",{key:"95c3b90e91e72b0de4adcda6aefc09d2691032fa",class:"panel-nav__footer"},t("button",{key:"811adb5326a0eb0acd620b6280d7ede2f012af29",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"78537736b57b99111c815e38505c392430da229b",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"3dd864ccd8791e1d43a237e8366e02acd121c252",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":e?`User: ${n}`:`User menu for ${n}`},t("span",{key:"956f2d48aa3173ff4e529c793fa7350dd9cf249e",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"fc16dc369da8c5b5dd73851977df813043fc3c17",class:"panel-nav__item-label-text"},t("ds-text",{key:"717a10dd0e6ea78730b2624f06a633c838637300",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"473538fbc9bfbdda2e6bcb3a592ea09c3ab8aafe",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"46e7cf75856059f6dd0621393b39bd5b04da8684",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"c3aedd43c499f0392cc2adb3a0a956ee4c59b40f",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"05b90e1e9804c7c033787bb6fef38ea864cc7714",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"cf484f0dd1244010a49b9b6b24c2ed8f010a967c",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"da3cdfc68b0cf132e46912c45728106495ead133",class:"panel-nav__user-initial"},t("ds-text",{key:"22a34801ffb186e79fedbb339242e7d47298f3f1",as:"span",variant:"text-caption-emphasis",color:"inherit"},o))))))),!this.viewportNarrow&&t("div",{key:"adc86b9402808abee8617d7564fa714bb5edac66",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:a=>this.handleResizeHandleMouseDown(a),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],variant:[{onVariantChange:0}]}}static get style(){return d()}},[2,"ds-panel-nav",{variant:[1],disableViewTransition:[4,"disable-view-transition"],groups:[1],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedVariant:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],variant:[{onVariantChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const a=["ds-panel-nav","ds-icon","ds-text"];a.forEach((a=>{switch(a){case"ds-panel-nav":if(!customElements.get(o(a))){customElements.define(o(a),f)}break;case"ds-icon":if(!customElements.get(o(a))){s()}break;case"ds-text":if(!customElements.get(o(a))){r()}break}}))}m();const u=f;const _=m;export{u as DsPanelNav,_ as defineCustomElement};
+import{p as a,H as e,c as n,h as t,a as i,t as o}from"./index.js";import{d as s}from"./p-CkBXHj0e.js";import{d as r}from"./p-C_mk7BoY.js";const l=()=>`.panel-nav.sc-ds-panel-nav{--_nav-width:200px;--_nav-width-collapsed:48px;--_nav-item-height:var(--dimension-size-400, 32px);--_nav-padding-x:var(--dimension-space-100, 8px);--_nav-padding-y:var(--dimension-space-100, 8px);--_nav-footer-btn-w:calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));--_nav-speed:var(--ds-panel-nav-speed, 1);--_nav-expand-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-expand-motion:var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-motion:var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-label-fade-out-dur:calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));--_nav-label-fade-out-motion:var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);--_nav-bg:var(--color-navigation-background);--_nav-border:var(--color-navigation-border-tertiary);--_nav-divider:var(--color-navigation-divider);--_nav-fg-primary:var(--color-navigation-foreground-primary);--_nav-fg-secondary:var(--color-navigation-foreground-secondary);--_nav-fg-tertiary:var(--color-navigation-foreground-tertiary);--_nav-hover:var(--color-navigation-interaction-hover);--_nav-pressed:var(--color-navigation-interaction-pressed);--_nav-focus:var(--color-navigation-interaction-focus);--_nav-dot:var(--color-navigation-foreground-brand)}.panel-nav--settings.sc-ds-panel-nav{--_nav-bg:var(--color-background-secondary);--_nav-border:var(--color-border-tertiary);--_nav-divider:var(--color-border-tertiary);--_nav-fg-primary:var(--color-foreground-primary);--_nav-fg-secondary:var(--color-foreground-secondary);--_nav-fg-tertiary:var(--color-foreground-tertiary);--_nav-hover:var(--color-interaction-hover);--_nav-pressed:var(--color-interaction-pressed);--_nav-focus:var(--color-interaction-focus);--_nav-dot:var(--color-foreground-bold-brand)}.panel-nav.sc-ds-panel-nav{display:flex;flex-direction:column;width:var(--_nav-width);min-width:var(--_nav-width);height:100%;background:var(--_nav-bg);border-right:var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);box-sizing:border-box;overflow:hidden;transition:width var(--_nav-expand-motion),     min-width var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     border-color var(--effect-motion-short-3, 200ms ease);font-family:var(--typography-font-family, system-ui)}.panel-nav--collapsed.sc-ds-panel-nav{width:var(--_nav-width-collapsed);min-width:var(--_nav-width-collapsed)}.panel-nav__header.sc-ds-panel-nav{display:flex;align-items:center;padding:var(--dimension-space-100, 8px);flex-shrink:0;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);transition:border-color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-primary);position:relative;flex-shrink:0;box-sizing:border-box;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__header-btn.sc-ds-panel-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);pointer-events:none}.panel-nav__header-btn.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__header-btn.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__header-logo.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:opacity var(--effect-motion-short-2, 100ms ease)}.panel-nav__m-mark.sc-ds-panel-nav{width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);display:block}.panel-nav__header-toggle.sc-ds-panel-nav{display:none;align-items:center;justify-content:center;position:absolute;inset:0;z-index:1}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-logo.sc-ds-panel-nav{opacity:0}.panel-nav__header-btn.sc-ds-panel-nav:hover .panel-nav__header-toggle.sc-ds-panel-nav{display:flex}.panel-nav__body.sc-ds-panel-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:var(--dimension-space-200, 16px);padding:var(--dimension-space-100, 8px);box-sizing:border-box;scrollbar-width:none}.panel-nav__body.sc-ds-panel-nav::-webkit-scrollbar{display:none}.panel-nav__group.sc-ds-panel-nav{display:flex;flex-direction:column;gap:var(--dimension-space-050, 4px)}.panel-nav__group-label.sc-ds-panel-nav{display:flex;align-items:center;text-transform:uppercase;color:var(--_nav-fg-secondary);user-select:none;height:var(--dimension-size-300, 24px);line-height:var(--typography-lineheight-xs, 12px);padding:0 var(--dimension-space-075, 6px);white-space:nowrap;overflow:hidden;max-height:var(--dimension-size-300, 24px);opacity:1;transition:opacity var(--_nav-label-fade-motion) 0ms,     max-height var(--_nav-label-fade-motion) 0ms,     padding var(--_nav-label-fade-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__item.sc-ds-panel-nav{all:unset;display:flex;align-items:center;gap:var(--dimension-space-050, 4px);padding:0 var(--dimension-space-075, 6px);height:var(--dimension-size-400, 32px);border-radius:var(--dimension-radius-025, 2px);cursor:pointer;color:var(--_nav-fg-secondary);position:relative;box-sizing:border-box;width:100%;user-select:none;transition:color var(--effect-motion-short-1, 50ms ease-in-out)}.panel-nav__item.sc-ds-panel-nav::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)}.panel-nav__item.sc-ds-panel-nav:hover::after{background:var(--_nav-hover);transition:none}.panel-nav__item.sc-ds-panel-nav:active::after{background:var(--_nav-pressed);transition:none}.panel-nav__item.sc-ds-panel-nav:focus-visible{outline:none}.panel-nav__item.sc-ds-panel-nav:focus-visible::after{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav__item--active.sc-ds-panel-nav{color:var(--_nav-fg-primary)}.panel-nav__item-icon.sc-ds-panel-nav{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-iconography-md, 20px);height:var(--dimension-iconography-md, 20px);position:relative}.panel-nav__item-label.sc-ds-panel-nav{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;height:var(--typography-lineheight-md, 20px);line-height:var(--typography-lineheight-md, 20px);opacity:1;mask-image:linear-gradient(to right, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to right, black 50%, transparent 100%);mask-size:200% 100%;-webkit-mask-size:200% 100%;mask-position:0% 0;-webkit-mask-position:0% 0;transition:opacity var(--_nav-label-fade-motion) 0ms,     mask-position var(--_nav-label-fade-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-motion) 0ms}.panel-nav__item-label-text.sc-ds-panel-nav{padding:0 var(--dimension-space-025, 2px)}.panel-nav__item-dot.sc-ds-panel-nav{position:absolute;right:13px;top:13px;width:var(--dimension-space-075, 6px);height:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-full, 999px);background:var(--_nav-dot);box-shadow:0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);pointer-events:none;transition:right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     background var(--effect-motion-short-3, 200ms ease),     box-shadow var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-dot.sc-ds-panel-nav{right:6px;top:6px}.panel-nav--animating.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{text-overflow:clip}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__item-label.sc-ds-panel-nav{opacity:0;pointer-events:none;text-overflow:clip;mask-position:100% 0;-webkit-mask-position:100% 0;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     mask-position var(--_nav-label-fade-out-motion) 0ms,     -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__group-label.sc-ds-panel-nav{opacity:0;max-height:0;padding:0 var(--dimension-space-075, 6px);pointer-events:none;transition:opacity var(--_nav-label-fade-out-motion) 0ms,     max-height var(--_nav-label-fade-out-motion) 0ms,     padding var(--_nav-label-fade-out-motion) 0ms,     color var(--effect-motion-short-3, 200ms ease)}.panel-nav__footer.sc-ds-panel-nav{position:relative;flex-shrink:0;height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));transition:height var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav{height:calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px))}.panel-nav__footer.sc-ds-panel-nav::before{content:'';position:absolute;bottom:100%;left:0;right:0;height:calc(var(--dimension-base, 8px) * 6);background:linear-gradient(to bottom, transparent, var(--_nav-bg));pointer-events:none;opacity:1;transition:opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav--at-bottom.sc-ds-panel-nav .panel-nav__footer.sc-ds-panel-nav::before{opacity:0}.panel-nav__footer-btn.sc-ds-panel-nav{all:unset;display:flex;align-items:center;justify-content:center;position:absolute;left:var(--_nav-padding-x);top:var(--_nav-padding-y);padding:var(--dimension-space-075, 6px);border-radius:var(--dimension-radius-half, 9999px);cursor:pointer;color:var(--_nav-fg-secondary);box-sizing:border-box;background:transparent;transition:background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),     color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease)}.panel-nav__footer-btn.sc-ds-panel-nav:focus-visible{outline:var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);outline-offset:calc(-1 * var(--dimension-stroke-width-025, 2px))}.panel-nav--dashboard.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-background-secondary);color:var(--color-foreground-secondary);transition:none}.panel-nav--settings.sc-ds-panel-nav .panel-nav__footer-btn.sc-ds-panel-nav:hover{background:var(--color-navigation-background);color:var(--color-navigation-foreground-secondary);transition:none}.panel-nav__footer-user.sc-ds-panel-nav{position:absolute;left:calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));right:var(--_nav-padding-x);top:var(--_nav-padding-y);width:auto;min-width:0;transition:left var(--_nav-expand-motion),     right var(--_nav-expand-motion),     top var(--_nav-expand-motion),     color var(--effect-motion-short-3, 200ms ease)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user.sc-ds-panel-nav{left:var(--_nav-padding-x);right:var(--_nav-padding-x);top:calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px))}.panel-nav__footer-user-label.sc-ds-panel-nav{text-align:right;position:absolute;left:var(--dimension-space-075, 6px);right:calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));top:50%;transform:translateY(-50%);flex:none;height:var(--typography-lineheight-md, 20px);mask-image:none;-webkit-mask-image:none;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-label.sc-ds-panel-nav{opacity:0;pointer-events:none;mask-position:0% 0;-webkit-mask-position:0% 0}.panel-nav__footer-user-icon.sc-ds-panel-nav{position:absolute;left:calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));top:0;bottom:0;height:auto;display:flex;align-items:center;justify-content:center;transition:left var(--_nav-expand-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-user-icon.sc-ds-panel-nav{left:var(--dimension-space-075, 6px)}.panel-nav__footer-icon-expanded.sc-ds-panel-nav,.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-motion)}.panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-expanded.sc-ds-panel-nav{opacity:0;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav--collapsed.sc-ds-panel-nav .panel-nav__footer-icon-collapsed.sc-ds-panel-nav{opacity:1;transition:opacity var(--_nav-label-fade-out-motion)}.panel-nav__user-initial.sc-ds-panel-nav{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--_nav-fg-secondary);text-transform:uppercase;line-height:1;pointer-events:none;transition:color var(--effect-motion-short-3, 200ms ease)}.panel-nav__resize-handle.sc-ds-panel-nav{position:absolute;top:0;right:var(--dimension-space-n050, -4px);bottom:0;width:var(--dimension-space-100, 8px);z-index:10;cursor:ew-resize;touch-action:none;background:transparent}.panel-nav__resize-handle.sc-ds-panel-nav::before{content:'';position:absolute;inset:0;background:rgba(0, 0, 0, 0.001)}.panel-nav__resize-handle.sc-ds-panel-nav::after{content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:var(--dimension-stroke-width-025, 2px);background:var(--color-background-bold-brand);opacity:0;pointer-events:none;transition:opacity var(--effect-motion-short-2, 100ms ease-in-out)}.panel-nav__resize-handle--overlay.sc-ds-panel-nav::after{opacity:1}@media (prefers-reduced-motion: reduce){.panel-nav.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::before,.panel-nav.sc-ds-panel-nav *.sc-ds-panel-nav::after,.panel-nav__resize-handle.sc-ds-panel-nav,.panel-nav__resize-handle.sc-ds-panel-nav::before,.panel-nav__resize-handle.sc-ds-panel-nav::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;transition-delay:0.01ms !important}}`;let d=false;const c=new WeakMap;const v=new WeakMap;function p(){if(d)return;const a="ds-panel-nav-vt-style";if(document.getElementById(a)){d=true;return}const e=document.createElement("style");e.id=a;e.textContent=["::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}","::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}"].join("\n");document.head.appendChild(e);d=true}function h(a,e){const n=a.trim();const t=parseFloat(n);if(Number.isNaN(t))return e;if(/ms\s*$/.test(n))return t;if(/s\s*$/.test(n))return t*1e3;return t}const f=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsNavSelect=n(this,"dsNavSelect");this.dsNavToggle=n(this,"dsNavToggle");this.dsNavFooterAction=n(this,"dsNavFooterAction");this.variant="dashboard";this.disableViewTransition=false;this.groups="[]";this.activeId="";this.collapsed=false;this.breakpoint=0;this.storageKey="";this.currentUrl="";this.userName="";this.userInitial="";this.renderedVariant="dashboard";this.parsedGroups=[];this.atBottom=false;this.isAnimating=false;this.rovingIndex=0;this.viewportNarrow=false;this.urlDerivedActiveId="";this.isDragging=false;this.dragStartX=0;this.didSnap=false;this.lastDeltaX=0;this.edgeOverlayTimer=null;this.showEdgeOverlay=false}get effectiveActiveId(){return this.urlDerivedActiveId||this.activeId}onCollapsedChange(){this.startCollapseAnimation()}onBreakpointChange(){this.disconnectResizeObserver();if(this.breakpoint>0)this.connectResizeObserver()}onGroupsChange(a){try{this.parsedGroups=JSON.parse(a)}catch{this.parsedGroups=[]}this.syncRovingIndex()}onActiveIdChange(){this.syncRovingIndex()}onCurrentUrlChange(){this.syncActiveFromUrl()}async onVariantChange(a){if(this.disableViewTransition){this.renderedVariant=a;return}c.get(this)?.skipTransition();c.delete(this);const e=document;if(typeof e.startViewTransition!=="function"){this.renderedVariant=a;return}p();const n=this.el.querySelector(".panel-nav__footer-btn");const t=n?.getBoundingClientRect();const i=t?Math.round(t.left+t.width/2):Math.round(window.innerWidth/2);const o=t?Math.round(t.top+t.height/2):Math.round(window.innerHeight/2);const s=Math.ceil(Math.hypot(Math.max(i,window.innerWidth-i),Math.max(o,window.innerHeight-o)));document.documentElement.style.setProperty("--vt-x",`${i}px`);document.documentElement.style.setProperty("--vt-y",`${o}px`);const r=e.startViewTransition((()=>new Promise((e=>{v.set(this,e);this.renderedVariant=a}))));c.set(this,r);r.finished.finally((()=>{if(c.get(this)===r)c.delete(this);v.delete(this)}));r.ready.then((()=>{const a=getComputedStyle(document.documentElement).getPropertyValue("--effect-animation-duration-long-1").trim();const e=h(a,750);document.documentElement.animate({clipPath:[`circle(0px at ${i}px ${o}px)`,`circle(${s}px at ${i}px ${o}px)`]},{duration:e,easing:"ease-in-out",fill:"forwards",pseudoElement:"::view-transition-new(root)"})})).catch((()=>{}))}componentWillLoad(){this.renderedVariant=this.variant;if(this.storageKey){try{const a=localStorage.getItem(this.storageKey);if(a!==null)this.collapsed=a==="true"}catch{}}this.onGroupsChange(this.groups);this.syncActiveFromUrl()}componentDidLoad(){this.checkScroll();if(this.breakpoint>0)this.connectResizeObserver();this.onGroupsChange(this.groups)}componentDidRender(){const a=v.get(this);if(a){v.delete(this);a()}}disconnectedCallback(){this.disconnectResizeObserver();this.clearEdgeOverlayTimer();if(this.globalMouseMoveHandler){window.removeEventListener("mousemove",this.globalMouseMoveHandler)}if(this.globalMouseUpHandler){window.removeEventListener("mouseup",this.globalMouseUpHandler)}}startCollapseAnimation(){this.isAnimating=true;const a=this.el.querySelector(".panel-nav");if(this.transitionEndHandler){a?.removeEventListener("transitionend",this.transitionEndHandler)}this.transitionEndHandler=e=>{if(e.propertyName==="width"){this.isAnimating=false;a?.removeEventListener("transitionend",this.transitionEndHandler)}};a?.addEventListener("transitionend",this.transitionEndHandler)}connectResizeObserver(){this.viewportNarrow=window.innerWidth<this.breakpoint;this.resizeObserver=new ResizeObserver((()=>{this.viewportNarrow=window.innerWidth<this.breakpoint}));this.resizeObserver.observe(document.documentElement)}disconnectResizeObserver(){this.resizeObserver?.disconnect();this.resizeObserver=undefined}syncActiveFromUrl(){if(!this.currentUrl){this.urlDerivedActiveId="";return}let a;let e=0;for(const n of this.getAllItems()){if(n.href&&this.currentUrl.startsWith(n.href)&&n.href.length>e){a=n;e=n.href.length}}this.urlDerivedActiveId=a?.id??""}applyToggle(a){this.dsNavToggle.emit(a);if(this.storageKey){this.collapsed=a;try{localStorage.setItem(this.storageKey,String(a))}catch{}}}getAllItems(){return this.parsedGroups.flatMap((a=>a.items))}syncRovingIndex(){const a=this.getAllItems().findIndex((a=>a.id===this.effectiveActiveId));this.rovingIndex=a>=0?a:0}handleItemKeyDown(a,e){const n=this.getAllItems().length;let t;switch(a.key){case"ArrowDown":a.preventDefault();t=(e+1)%n;break;case"ArrowUp":a.preventDefault();t=(e-1+n)%n;break;case"Home":a.preventDefault();t=0;break;case"End":a.preventDefault();t=n-1;break;default:return}this.rovingIndex=t;const i=Array.from(this.el.querySelectorAll(".panel-nav__body .panel-nav__item"));i[t]?.focus()}checkScroll(){const a=this.el.querySelector(".panel-nav__body");if(!a)return;const e=a.scrollHeight-a.scrollTop-a.clientHeight;this.atBottom=e<2}handleBodyScroll(a){const e=a.target;const n=e.scrollHeight-e.scrollTop-e.clientHeight;this.atBottom=n<2}handleItemClick(a){this.dsNavSelect.emit(a)}handleToggle(){this.applyToggle(!this.collapsed)}handleFooterAction(){this.dsNavFooterAction.emit()}clearEdgeOverlayTimer(){if(this.edgeOverlayTimer!==null){window.clearTimeout(this.edgeOverlayTimer);this.edgeOverlayTimer=null}}handleResizeHandleMouseEnter(){this.clearEdgeOverlayTimer();this.edgeOverlayTimer=window.setTimeout((()=>{this.showEdgeOverlay=true;this.edgeOverlayTimer=null}),500)}handleResizeHandleMouseLeave(){if(this.isDragging)return;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false}handleResizeHandleMouseDown(a){a.preventDefault();a.stopPropagation();const e=this.collapsed||this.viewportNarrow;this.isDragging=true;this.dragStartX=a.clientX;this.didSnap=false;this.lastDeltaX=0;this.clearEdgeOverlayTimer();this.showEdgeOverlay=false;document.body.style.cursor="ew-resize";document.body.style.userSelect="none";const n=a=>{const n=a.clientX-this.dragStartX;this.lastDeltaX=Math.abs(n);if(this.didSnap)return;if(!e&&n<-8){this.applyToggle(true);this.didSnap=true}else if(e&&n>8){this.applyToggle(false);this.didSnap=true}};const t=()=>{if(!this.didSnap&&this.lastDeltaX<3){this.applyToggle(!e)}this.isDragging=false;this.showEdgeOverlay=false;document.body.style.cursor="";document.body.style.userSelect="";window.removeEventListener("mousemove",n);window.removeEventListener("mouseup",t);this.globalMouseMoveHandler=undefined;this.globalMouseUpHandler=undefined};this.globalMouseMoveHandler=n;this.globalMouseUpHandler=t;window.addEventListener("mousemove",n);window.addEventListener("mouseup",t)}renderNavItem(a,e,n){const i=a.id===this.effectiveActiveId;const o=[t("span",{class:"panel-nav__item-icon"},t("ds-icon",{name:a.icon,size:"md",color:"inherit",flag:a.flag})),t("span",{class:"panel-nav__item-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:i?"text-body-medium-emphasis":"text-body-medium",color:"inherit"},a.label))),a.dot&&t("span",{class:"panel-nav__item-dot","aria-hidden":"true"})];const s={class:{"panel-nav__item":true,"panel-nav__item--active":i},"aria-current":i?"page":undefined,title:n?a.label:undefined,tabIndex:e===this.rovingIndex?0:-1,onClick:()=>this.handleItemClick(a.id),onKeyDown:a=>this.handleItemKeyDown(a,e),onFocus:()=>{this.rovingIndex=e}};return a.href?t("a",{...s,href:a.href},o):t("button",{...s,type:"button"},o)}render(){const a=this.renderedVariant==="dashboard";const e=this.collapsed||this.viewportNarrow;const{userName:n,userInitial:o}=this;const s={"panel-nav":true,"panel-nav--dashboard":a,"panel-nav--settings":!a,"panel-nav--collapsed":e,"panel-nav--animating":this.isAnimating,"panel-nav--at-bottom":this.atBottom};return t(i,{key:"01d20359d9ca21960871752cc93e7925c120c58e",style:{display:"block",position:"relative"}},t("nav",{key:"d1955c92d0b0f2c588df18262a0fdbde32a9e803",class:s,"aria-label":a?"Main navigation":"Settings navigation"},t("div",{key:"c350bea0d242ca3cd7f093a43bed749469ca8a14",class:"panel-nav__header"},t("button",{key:"532ace0923570805395fa700243a03ef443b4d45",type:"button",class:"panel-nav__header-btn",onClick:()=>this.handleToggle(),"aria-label":e?"Expand navigation":"Collapse navigation","aria-expanded":e?"false":"true"},t("span",{key:"e85252b4ffb3795cf3ae5a69accb5a7339042647",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"1a5a9663fb7774edd0368d3fae375279e53c8b57",class:"panel-nav__m-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},t("path",{key:"ceb229189fe603af6392a10eb0115baab4c17b03",d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"}))),t("span",{key:"28770da1bcc0970f82bfe7a8268c92d5b0c61d4e",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"5f28b2e6a25ddbded270984cf8ae48aba73d8a4b",name:e?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"7f33f2a66dc93237aa313a4df29a5418cc10dbb5",class:"panel-nav__body",onScroll:a=>this.handleBodyScroll(a)},(()=>{let a=0;return this.parsedGroups.map((n=>t("div",{class:"panel-nav__group"},n.label&&t("span",{class:"panel-nav__group-label"},t("span",{class:"panel-nav__item-label-text"},t("ds-text",{as:"span",variant:"text-caption-emphasis",color:"inherit"},n.label))),n.items.map((n=>this.renderNavItem(n,a++,e))))))})()),t("div",{key:"5dc95bc33b59cc4f5ee1e3178aea6905bbf6ebe3",class:"panel-nav__footer"},t("button",{key:"1b3b7c035aae20c5a0953de047c3aa876596a604",type:"button",class:"panel-nav__footer-btn",title:a?"Settings":"Dashboard","aria-label":a?"Open settings":"Go to dashboard",onClick:()=>this.handleFooterAction()},t("ds-icon",{key:"dd6eb0a8c7369979e22c9f78ec515fa14f601d24",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"08261a68c96d0f265ecce7d93635c5ae3bf1da6a",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":e?`User: ${n}`:`User menu for ${n}`},t("span",{key:"5828cd9bd1da834f2e38e360cbcb8eb1b97bd688",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"2522dd79057da3b3b070ec6cc02f360ce50fcf5b",class:"panel-nav__item-label-text"},t("ds-text",{key:"ca7c2cc4bbe68e12ab9841e0da98c6caf83d53c1",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"0f86e95a3f57f0016f0919d089c866d37903b5fd",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"942b78ee6e48a12705ebb4f0974fa583d02c8cea",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"fb581ce5a349c5b1eb89dd581fcdbf6586661960",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"21ecc58857f2ec5efe4c1fcd5d7a9411fb77a9f1",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"53862a063fb026cb6718ada3149b40ea0fbdaee8",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"97446f68f7ba7acf1e3df871692c1f24867240a5",class:"panel-nav__user-initial"},t("ds-text",{key:"3c18372d8dee6570d01065e94eb247e420fa4012",as:"span",variant:"text-caption-emphasis",color:"inherit"},o))))))),!this.viewportNarrow&&t("div",{key:"189f63f36b385ad79b3b7b9b5fa783f711030d76",class:{"panel-nav__resize-handle":true,"panel-nav__resize-handle--overlay":this.showEdgeOverlay},onMouseEnter:()=>this.handleResizeHandleMouseEnter(),onMouseLeave:()=>this.handleResizeHandleMouseLeave(),onMouseDown:a=>this.handleResizeHandleMouseDown(a),"aria-hidden":"true"}))}get el(){return this}static get watchers(){return{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],variant:[{onVariantChange:0}]}}static get style(){return l()}},[2,"ds-panel-nav",{variant:[1],disableViewTransition:[4,"disable-view-transition"],groups:[1],activeId:[1,"active-id"],collapsed:[1028],breakpoint:[2],storageKey:[1,"storage-key"],currentUrl:[1,"current-url"],userName:[1,"user-name"],userInitial:[1,"user-initial"],renderedVariant:[32],parsedGroups:[32],atBottom:[32],isAnimating:[32],rovingIndex:[32],viewportNarrow:[32],urlDerivedActiveId:[32],showEdgeOverlay:[32]},undefined,{collapsed:[{onCollapsedChange:0}],viewportNarrow:[{onCollapsedChange:0}],breakpoint:[{onBreakpointChange:0}],groups:[{onGroupsChange:0}],activeId:[{onActiveIdChange:0}],urlDerivedActiveId:[{onActiveIdChange:0}],currentUrl:[{onCurrentUrlChange:0}],variant:[{onVariantChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const a=["ds-panel-nav","ds-icon","ds-text"];a.forEach((a=>{switch(a){case"ds-panel-nav":if(!customElements.get(o(a))){customElements.define(o(a),f)}break;case"ds-icon":if(!customElements.get(o(a))){s()}break;case"ds-text":if(!customElements.get(o(a))){r()}break}}))}m();const u=f;const _=m;export{u as DsPanelNav,_ as defineCustomElement};
 //# sourceMappingURL=ds-panel-nav.js.map