@ds-mo/ui 0.9.2 → 0.9.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ds-banner.js.map +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-nav.js.map +1 -1
- package/dist/components/ds-surface.js +1 -1
- package/dist/components/ds-surface.js.map +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-toast-provider.js +1 -1
- package/dist/components/ds-toast-provider.js.map +1 -1
- package/dist/components/{p-DZN5IIgI.js → p-Leo9RPok.js} +2 -2
- package/dist/components/{p-DZN5IIgI.js.map → p-Leo9RPok.js.map} +1 -1
- package/package.json +1 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["bannerCss","FADE_OUT_MS","AUTO_DISMISS_MS","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n width: 100%;\n height: var(--dimension-space-100);\n flex-shrink: 0;\n overflow: hidden;\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n -45deg,\n var(--banner-content),\n var(--banner-content) var(--dimension-size-100),\n transparent var(--dimension-size-100),\n transparent var(--dimension-size-200)\n );\n}\n\n.banner-body {\n padding: var(--dimension-space-075);\n min-height: var(--dimension-size-400);\n display: flex;\n align-items: flex-start;\n gap: var(--dimension-space-075);\n}\n\n.banner-message {\n color: var(--banner-content);\n line-height: var(--typography-lineheight-md);\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.banner-dismiss {\n background: none;\n border: none;\n margin: 0;\n padding: var(--dimension-space-025);\n color: var(--banner-content);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--dimension-radius-050);\n position: relative;\n font-size: 18px;\n line-height: 1;\n}\n\n.banner-dismiss::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n pointer-events: none;\n}\n\n.banner-dismiss:hover::before { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n position: fixed;\n top: var(--dimension-space-200);\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n}\n\n.floating-toast {\n pointer-events: auto;\n animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type BannerIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\nconst FADE_OUT_MS = 200;\nconst AUTO_DISMISS_MS = 4000;\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Prop() intent: BannerIntent = 'neutral';\n @Prop() contrast: BannerContrast = 'medium';\n @Prop() message: string = '';\n /** Renders the diagonal-stripe accent bar above the body. */\n @Prop() header: boolean = false;\n /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n @Prop() floating: boolean = false;\n @Prop() showDismiss: boolean = false;\n @Prop() dismissLabel: string = 'Dismiss';\n\n @State() private closing: boolean = false;\n\n @Event() dsDismiss!: EventEmitter<void>;\n\n private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n if (this.floating && this.message) this.scheduleDismiss();\n }\n\n @Watch('message')\n onMessageChange(newVal: string) {\n if (this.floating && newVal) {\n this.closing = false;\n this.scheduleDismiss();\n }\n }\n\n disconnectedCallback() {\n this.clearTimers();\n }\n\n private clearTimers() {\n if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private scheduleDismiss() {\n this.clearTimers();\n this.dismissTimer = setTimeout(() => {\n this.dismissTimer = null;\n this.beginClose();\n }, AUTO_DISMISS_MS);\n }\n\n private beginClose() {\n this.clearTimers();\n if (this.floating) {\n this.closing = true;\n this.closeTimer = setTimeout(() => {\n this.closing = false;\n this.closeTimer = null;\n this.dsDismiss.emit();\n }, FADE_OUT_MS);\n } else {\n this.dsDismiss.emit();\n }\n }\n\n private getContentColor(): string {\n if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n return `var(--color-foreground-${c}-${this.intent})`;\n }\n\n private getBg(): string {\n return `var(--color-background-${this.contrast}-${this.intent})`;\n }\n\n private getElevation(): string {\n return this.floating\n ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'\n : 'var(--effect-elevation-elevated)';\n }\n\n render() {\n const contentColor = this.getContentColor();\n const isAssertive = this.intent === 'negative';\n\n const bannerEl = (\n <div\n class={{ 'banner-wrapper': true }}\n style={{ '--banner-content': contentColor } as
|
|
1
|
+
{"version":3,"names":["bannerCss","FADE_OUT_MS","AUTO_DISMISS_MS","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","intent","contrast","message","header","floating","showDismiss","dismissLabel","closing","dismissTimer","closeTimer","componentDidLoad","scheduleDismiss","onMessageChange","newVal","disconnectedCallback","clearTimers","clearTimeout","setTimeout","beginClose","dsDismiss","emit","getContentColor","c","getBg","getElevation","render","contentColor","isAssertive","bannerEl","h","class","style","role","undefined","backgroundColor","boxShadow","type","onClick","Host","display","zIndex"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":[".banner-surface {\n position: relative;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border-radius: var(--dimension-radius-075);\n}\n\n.banner-header-surface {\n width: 100%;\n height: var(--dimension-space-100);\n flex-shrink: 0;\n overflow: hidden;\n border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-primary);\n}\n\n.banner-header {\n width: 100%;\n height: 100%;\n background: repeating-linear-gradient(\n -45deg,\n var(--banner-content),\n var(--banner-content) var(--dimension-size-100),\n transparent var(--dimension-size-100),\n transparent var(--dimension-size-200)\n );\n}\n\n.banner-body {\n padding: var(--dimension-space-075);\n min-height: var(--dimension-size-400);\n display: flex;\n align-items: flex-start;\n gap: var(--dimension-space-075);\n}\n\n.banner-message {\n color: var(--banner-content);\n line-height: var(--typography-lineheight-md);\n display: block;\n flex: 1;\n min-width: 0;\n}\n\n.banner-dismiss {\n background: none;\n border: none;\n margin: 0;\n padding: var(--dimension-space-025);\n color: var(--banner-content);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--dimension-radius-050);\n position: relative;\n font-size: 18px;\n line-height: 1;\n}\n\n.banner-dismiss::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n background-color: transparent;\n transition: var(--effect-transition-interaction-background-short-2, background-color var(--effect-motion-short-2));\n pointer-events: none;\n}\n\n.banner-dismiss:hover::before { background-color: var(--color-interaction-hover); }\n.banner-dismiss:active::before { background-color: var(--color-interaction-pressed); }\n\n.banner-dismiss:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-stroke-width-015);\n}\n\n/* ─── Floating ──────────────────────────────────────────────────────────────── */\n\n.floating-position {\n position: fixed;\n top: var(--dimension-space-200);\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n}\n\n.floating-toast {\n pointer-events: auto;\n animation: bannerFadeIn var(--effect-motion-short-2, 150ms) forwards;\n}\n\n.floating-toast--closing {\n animation: bannerFadeOut var(--effect-motion-short-3, 200ms) forwards;\n}\n\n@keyframes bannerFadeIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes bannerFadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-4px); }\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Host } from '@stencil/core';\n\nexport type BannerIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\n\nexport type BannerContrast = 'faint' | 'medium' | 'bold' | 'strong';\n\nconst FADE_OUT_MS = 200;\nconst AUTO_DISMISS_MS = 4000;\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Prop() intent: BannerIntent = 'neutral';\n @Prop() contrast: BannerContrast = 'medium';\n @Prop() message: string = '';\n /** Renders the diagonal-stripe accent bar above the body. */\n @Prop() header: boolean = false;\n /** Renders at a fixed position (centered top) and auto-dismisses after 4 s. */\n @Prop() floating: boolean = false;\n @Prop() showDismiss: boolean = false;\n @Prop() dismissLabel: string = 'Dismiss';\n\n @State() private closing: boolean = false;\n\n @Event() dsDismiss!: EventEmitter<void>;\n\n private dismissTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n componentDidLoad() {\n if (this.floating && this.message) this.scheduleDismiss();\n }\n\n @Watch('message')\n onMessageChange(newVal: string) {\n if (this.floating && newVal) {\n this.closing = false;\n this.scheduleDismiss();\n }\n }\n\n disconnectedCallback() {\n this.clearTimers();\n }\n\n private clearTimers() {\n if (this.dismissTimer) { clearTimeout(this.dismissTimer); this.dismissTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private scheduleDismiss() {\n this.clearTimers();\n this.dismissTimer = setTimeout(() => {\n this.dismissTimer = null;\n this.beginClose();\n }, AUTO_DISMISS_MS);\n }\n\n private beginClose() {\n this.clearTimers();\n if (this.floating) {\n this.closing = true;\n this.closeTimer = setTimeout(() => {\n this.closing = false;\n this.closeTimer = null;\n this.dsDismiss.emit();\n }, FADE_OUT_MS);\n } else {\n this.dsDismiss.emit();\n }\n }\n\n private getContentColor(): string {\n if (this.contrast === 'bold') return 'var(--color-foreground-on-bold-background-primary)';\n const c = this.contrast === 'faint' ? 'bold' : this.contrast === 'medium' ? 'strong' : 'medium';\n return `var(--color-foreground-${c}-${this.intent})`;\n }\n\n private getBg(): string {\n return `var(--color-background-${this.contrast}-${this.intent})`;\n }\n\n private getElevation(): string {\n return this.floating\n ? 'var(--effect-elevation-elevated-floating, var(--effect-elevation-floating))'\n : 'var(--effect-elevation-elevated)';\n }\n\n render() {\n const contentColor = this.getContentColor();\n const isAssertive = this.intent === 'negative';\n\n const bannerEl = (\n <div\n class={{ 'banner-wrapper': true }}\n style={{ '--banner-content': contentColor } as { [key: string]: string }}\n role={isAssertive ? 'alert' : 'status'}\n aria-live={isAssertive ? undefined : 'polite'}\n >\n <div\n class=\"banner-surface\"\n style={{\n backgroundColor: this.getBg(),\n boxShadow: this.getElevation(),\n }}\n >\n {this.header && (\n <div class=\"banner-header-surface\">\n <div class=\"banner-header\" />\n </div>\n )}\n <div class=\"banner-body\">\n <span class=\"text-body-medium banner-message\">{this.message}</span>\n {this.showDismiss && (\n <button\n type=\"button\"\n class=\"banner-dismiss\"\n onClick={() => this.beginClose()}\n aria-label={this.dismissLabel}\n >\n ×\n </button>\n )}\n </div>\n </div>\n </div>\n );\n\n if (this.floating) {\n return (\n <Host style={{ display: 'contents' }}>\n <div class=\"floating-position\" style={{ zIndex: '9998' }}>\n <div class={{ 'floating-toast': true, 'floating-toast--closing': this.closing }}>\n {bannerEl}\n </div>\n </div>\n </Host>\n );\n }\n\n return <Host style={{ display: 'contents' }}>{bannerEl}</Host>;\n }\n}\n"],"mappings":"kEAAA,MAAMA,EAAY,IAAM,41ECQxB,MAAMC,EAAc,IACpB,MAAMC,EAAkB,I,MAOXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,+EAMUC,KAAAC,OAAuB,UACvBD,KAAAE,SAA2B,SAC3BF,KAAAG,QAAkB,GAElBH,KAAAI,OAAkB,MAElBJ,KAAAK,SAAoB,MACpBL,KAAAM,YAAuB,MACvBN,KAAAO,aAAuB,UAEdP,KAAAQ,QAAmB,MAI5BR,KAAAS,aAAqD,KACrDT,KAAAU,WAAmD,IAmH5D,CAjHC,gBAAAC,GACE,GAAIX,KAAKK,UAAYL,KAAKG,QAASH,KAAKY,iB,CAI1C,eAAAC,CAAgBC,GACd,GAAId,KAAKK,UAAYS,EAAQ,CAC3Bd,KAAKQ,QAAU,MACfR,KAAKY,iB,EAIT,oBAAAG,GACEf,KAAKgB,a,CAGC,WAAAA,GACN,GAAIhB,KAAKS,aAAc,CAAEQ,aAAajB,KAAKS,cAAeT,KAAKS,aAAe,I,CAC9E,GAAIT,KAAKU,WAAc,CAAEO,aAAajB,KAAKU,YAAeV,KAAKU,WAAa,I,EAGtE,eAAAE,GACNZ,KAAKgB,cACLhB,KAAKS,aAAeS,YAAW,KAC7BlB,KAAKS,aAAe,KACpBT,KAAKmB,YAAY,GAChBzB,E,CAGG,UAAAyB,GACNnB,KAAKgB,cACL,GAAIhB,KAAKK,SAAU,CACjBL,KAAKQ,QAAU,KACfR,KAAKU,WAAaQ,YAAW,KAC3BlB,KAAKQ,QAAU,MACfR,KAAKU,WAAa,KAClBV,KAAKoB,UAAUC,MAAM,GACpB5B,E,KACE,CACLO,KAAKoB,UAAUC,M,EAIX,eAAAC,GACN,GAAItB,KAAKE,WAAa,OAAQ,MAAO,qDACrC,MAAMqB,EAAIvB,KAAKE,WAAa,QAAU,OAASF,KAAKE,WAAa,SAAW,SAAW,SACvF,MAAO,0BAA0BqB,KAAKvB,KAAKC,S,CAGrC,KAAAuB,GACN,MAAO,0BAA0BxB,KAAKE,YAAYF,KAAKC,S,CAGjD,YAAAwB,GACN,OAAOzB,KAAKK,SACR,8EACA,kC,CAGN,MAAAqB,GACE,MAAMC,EAAe3B,KAAKsB,kBAC1B,MAAMM,EAAc5B,KAAKC,SAAW,WAEpC,MAAM4B,EACJC,EAAA,OACEC,MAAO,CAAE,iBAAkB,MAC3BC,MAAO,CAAE,mBAAoBL,GAC7BM,KAAML,EAAc,QAAU,SAAQ,YAC3BA,EAAcM,UAAY,UAErCJ,EAAA,OACEC,MAAM,iBACNC,MAAO,CACLG,gBAAiBnC,KAAKwB,QACtBY,UAAWpC,KAAKyB,iBAGjBzB,KAAKI,QACJ0B,EAAA,OAAKC,MAAM,yBACTD,EAAA,OAAKC,MAAM,mBAGfD,EAAA,OAAKC,MAAM,eACTD,EAAA,QAAMC,MAAM,mCAAmC/B,KAAKG,SACnDH,KAAKM,aACJwB,EAAA,UACEO,KAAK,SACLN,MAAM,iBACNO,QAAS,IAAMtC,KAAKmB,aAAY,aACpBnB,KAAKO,cAAY,QAUzC,GAAIP,KAAKK,SAAU,CACjB,OACEyB,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aACtBV,EAAA,OAAKC,MAAM,oBAAoBC,MAAO,CAAES,OAAQ,SAC9CX,EAAA,OAAKC,MAAO,CAAE,iBAAkB,KAAM,0BAA2B/B,KAAKQ,UACnEqB,I,CAOX,OAAOC,EAACS,EAAI,CAACP,MAAO,CAAEQ,QAAS,aAAeX,E","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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-DZN5IIgI.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);if(typeof document.startViewTransition!=="function"){this.renderedVariant=a;return}p();const e=this.el.querySelector(".panel-nav__footer-btn");const n=e?.getBoundingClientRect();const t=n?Math.round(n.left+n.width/2):Math.round(window.innerWidth/2);const i=n?Math.round(n.top+n.height/2):Math.round(window.innerHeight/2);const o=Math.ceil(Math.hypot(Math.max(t,window.innerWidth-t),Math.max(i,window.innerHeight-i)));document.documentElement.style.setProperty("--vt-x",`${t}px`);document.documentElement.style.setProperty("--vt-y",`${i}px`);const s=document.startViewTransition((()=>new Promise((e=>{v.set(this,e);this.renderedVariant=a}))));c.set(this,s);s.finished.finally((()=>{if(c.get(this)===s)c.delete(this);v.delete(this)}));s.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 ${t}px ${i}px)`,`circle(${o}px at ${t}px ${i}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=e;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:"cbad4ee633da35ad9fdc49c3334d555dac8e5f54",style:{display:"block",position:"relative"}},t("nav",{key:"ecaa21cb529d4fdfc35491c665c4acc03511442e",class:s,"aria-label":a?"Main navigation":"Settings navigation"},t("div",{key:"1a65927b329955c3a44bf4fe6e0d9a5baf09b5e8",class:"panel-nav__header"},t("button",{key:"b0fcbff086514806b74a6ca16073bb61e2267291",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:"e634ef2c494ab4d88192eb218a61d9f8617d3b14",class:"panel-nav__header-logo","aria-hidden":"true"},t("svg",{key:"e705cfd098720a308c00c87f375aa1bb98812c06",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:"abc9897546d4acaa11e64b00050a5f5f3a447703",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:"6a2b2d34862187883b2071f6c06e099427be8fb0",class:"panel-nav__header-toggle","aria-hidden":"true"},t("ds-icon",{key:"a12e9f61ac9f709aed810b1bd2d13642754408e6",name:e?"LeftExpandB":"LeftCollapseB",size:"md",color:"inherit"})))),t("div",{key:"dd29f8cad18357fb376938fad8479e3ec28d1a6b",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:"9c26382a237838f46639da825f43b8ef2f4f69ee",class:"panel-nav__footer"},t("button",{key:"4aab321df4afdc57ea15db2265539ddbbb283e55",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:"ccb5de31887fba449c6f8cb2f94a8154fc89562b",name:a?"Gear":"Dashboard",size:"md",color:"inherit"})),t("button",{key:"68225f2b8bcd39b489ef445d2ed359047ac2d0ca",type:"button",class:"panel-nav__item panel-nav__footer-user","aria-label":e?`User: ${n}`:`User menu for ${n}`},t("span",{key:"ad363ef8a41856508b8efc2c94f306d49fbe61de",class:"panel-nav__item-label panel-nav__footer-user-label"},t("span",{key:"24e080f1dbd3e3d42671ea9a8796b50239854c8c",class:"panel-nav__item-label-text"},t("ds-text",{key:"8262f0071bc87a1e49056f0c4d51f53e64ac24eb",as:"span",variant:"text-body-medium-emphasis",color:"inherit"},n))),t("span",{key:"907de8c739678bdbafe32fda5b6be650d6572b1f",class:"panel-nav__item-icon panel-nav__footer-user-icon","aria-hidden":"true"},t("span",{key:"16283daf108529a4c33cce1e23d5ac4b06b3d278",class:"panel-nav__footer-icon-expanded"},t("ds-icon",{key:"a72d93d63ee728ff4b83b80989ea26a93b2ba05b",name:"ChevronUpDown",size:"md",color:"inherit"})),t("span",{key:"ff0526cdbd38726ce73eac1ce32e3583096b723c",class:"panel-nav__footer-icon-collapsed"},t("ds-icon",{key:"e5d5f8016b671a5c292b0433a0b3234e080f3e0f",name:"Circle",size:"md",color:"inherit"}),t("span",{key:"d312e62137c0f9e2b9039b97bbb645ab615a2d46",class:"panel-nav__user-initial"},t("ds-text",{key:"6e86f13925ffed6470a058af87ef8e15f8cf5ed9",as:"span",variant:"text-caption-emphasis",color:"inherit"},o))))))),!this.viewportNarrow&&t("div",{key:"864d00250b7209688028da4f609c9f2f7c2a70cd",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 b=m;export{u as DsPanelNav,b as defineCustomElement};
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=ds-panel-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["panelNavCss","vtStyleInjected","vtTransitions","WeakMap","vtResolvers","ensureVtStyle","id","document","getElementById","style","createElement","textContent","join","head","appendChild","parseCssTimeMs","value","fallback","v","trim","num","parseFloat","Number","isNaN","test","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","disableViewTransition","groups","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","renderedVariant","parsedGroups","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","JSON","parse","syncRovingIndex","onActiveIdChange","onCurrentUrlChange","syncActiveFromUrl","onVariantChange","newVal","get","skipTransition","delete","startViewTransition","btn","el","querySelector","rect","getBoundingClientRect","x","Math","round","left","width","window","innerWidth","y","top","height","innerHeight","maxR","ceil","hypot","max","documentElement","setProperty","transition","Promise","resolve","set","finished","finally","ready","then","durToken","getComputedStyle","getPropertyValue","duration","animate","clipPath","easing","fill","pseudoElement","catch","componentWillLoad","stored","localStorage","getItem","componentDidLoad","checkScroll","componentDidRender","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","removeEventListener","globalMouseUpHandler","panel","transitionEndHandler","e","propertyName","addEventListener","resizeObserver","ResizeObserver","observe","disconnect","undefined","best","bestLen","item","getAllItems","href","startsWith","length","applyToggle","next","dsNavToggle","emit","setItem","String","flatMap","g","items","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","Array","from","querySelectorAll","focus","body","remaining","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","label","dot","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","type","render","isDashboard","navCls","Host","display","position","viewBox","xmlns","focusable","d","onScroll","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n /* ─ Sizes ─ */\n --_nav-width: 200px;\n --_nav-width-collapsed: 48px;\n --_nav-item-height: var(--dimension-size-400, 32px);\n --_nav-padding-x: var(--dimension-space-100, 8px);\n --_nav-padding-y: var(--dimension-space-100, 8px);\n /* gear button outer width = padding*2 + icon */\n --_nav-footer-btn-w: calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n /* ─ Motion ─ */\n /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n --_nav-speed: var(--ds-panel-nav-speed, 1);\n --_nav-expand-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-expand-motion: var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n --_nav-label-fade-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-label-fade-motion: var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n --_nav-label-fade-out-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n /* ─ Colours – dashboard defaults ─ */\n --_nav-bg: var(--color-navigation-background);\n --_nav-border: var(--color-navigation-border-tertiary);\n --_nav-divider: var(--color-navigation-divider);\n --_nav-fg-primary: var(--color-navigation-foreground-primary);\n --_nav-fg-secondary: var(--color-navigation-foreground-secondary);\n --_nav-fg-tertiary: var(--color-navigation-foreground-tertiary);\n --_nav-hover: var(--color-navigation-interaction-hover);\n --_nav-pressed: var(--color-navigation-interaction-pressed);\n --_nav-focus: var(--color-navigation-interaction-focus);\n --_nav-dot: var(--color-navigation-foreground-brand);\n}\n\n/* ── Settings overrides ──────────────────────────────────────────────────── */\n\n.panel-nav--settings {\n --_nav-bg: var(--color-background-secondary);\n --_nav-border: var(--color-border-tertiary);\n --_nav-divider: var(--color-border-tertiary);\n --_nav-fg-primary: var(--color-foreground-primary);\n --_nav-fg-secondary: var(--color-foreground-secondary);\n --_nav-fg-tertiary: var(--color-foreground-tertiary);\n --_nav-hover: var(--color-interaction-hover);\n --_nav-pressed: var(--color-interaction-pressed);\n --_nav-focus: var(--color-interaction-focus);\n --_nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n display: flex;\n flex-direction: column;\n width: var(--_nav-width);\n min-width: var(--_nav-width);\n height: 100%;\n background: var(--_nav-bg);\n border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n box-sizing: border-box;\n overflow: hidden;\n transition:\n width var(--_nav-expand-motion),\n min-width var(--_nav-expand-motion),\n background var(--effect-motion-short-3, 200ms ease),\n border-color var(--effect-motion-short-3, 200ms ease);\n font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav--collapsed {\n width: var(--_nav-width-collapsed);\n min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-100, 8px);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-primary);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n pointer-events: none;\n}\n\n.panel-nav__header-btn:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-200, 16px);\n padding: var(--dimension-space-100, 8px);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n /* Typography via ds-text (text-caption-emphasis) */\n display: flex;\n align-items: center;\n text-transform: uppercase;\n color: var(--_nav-fg-secondary);\n user-select: none;\n height: var(--dimension-size-300, 24px);\n line-height: var(--typography-lineheight-xs, 12px);\n padding: 0 var(--dimension-space-075, 6px);\n white-space: nowrap;\n overflow: hidden;\n max-height: var(--dimension-size-300, 24px);\n opacity: 1;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n max-height var(--_nav-label-fade-motion) 0ms,\n padding var(--_nav-label-fade-motion) 0ms,\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n all: unset;\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: 0 var(--dimension-space-075, 6px);\n height: var(--dimension-size-400, 32px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n position: relative;\n box-sizing: border-box;\n width: 100%;\n user-select: none;\n transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n pointer-events: none;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__item:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n color: var(--_nav-fg-primary);\n /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n height: var(--typography-lineheight-md, 20px);\n line-height: var(--typography-lineheight-md, 20px);\n opacity: 1;\n /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n mask-image: linear-gradient(to right, black 50%, transparent 100%);\n -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n mask-size: 200% 100%;\n -webkit-mask-size: 200% 100%;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n mask-position var(--_nav-label-fade-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n position: absolute;\n right: 13px;\n top: 13px;\n width: var(--dimension-space-075, 6px);\n height: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-full, 999px);\n background: var(--_nav-dot);\n box-shadow: 0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);\n pointer-events: none;\n transition:\n right var(--_nav-expand-motion),\n top var(--_nav-expand-motion),\n background var(--effect-motion-short-3, 200ms ease),\n box-shadow var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n right: 6px;\n top: 6px;\n}\n\n.panel-nav--animating .panel-nav__item-label {\n text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n opacity: 0;\n pointer-events: none;\n text-overflow: clip;\n mask-position: 100% 0;\n -webkit-mask-position: 100% 0;\n transition:\n opacity var(--_nav-label-fade-out-motion) 0ms,\n mask-position var(--_nav-label-fade-out-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n opacity: 0;\n max-height: 0;\n padding: 0 var(--dimension-space-075, 6px);\n pointer-events: none;\n transition:\n opacity var(--_nav-label-fade-out-motion) 0ms,\n max-height var(--_nav-label-fade-out-motion) 0ms,\n padding var(--_nav-label-fade-out-motion) 0ms,\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n position: relative;\n flex-shrink: 0;\n /* single row: padding*2 + item */\n height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n /* two rows: padding*2 + item*2 + gap */\n height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Gradient fade — floats above the footer, masks content scrolling under it */\n.panel-nav__footer::before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 0;\n right: 0;\n height: calc(var(--dimension-base, 8px) * 6);\n background: linear-gradient(to bottom, transparent, var(--_nav-bg));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav--at-bottom .panel-nav__footer::before {\n opacity: 0;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-half, 9999px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n box-sizing: border-box;\n background: transparent;\n transition:\n background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Dashboard: hover previews settings surface */\n.panel-nav--dashboard .panel-nav__footer-btn:hover {\n background: var(--color-background-secondary);\n color: var(--color-foreground-secondary);\n transition: none;\n}\n\n/* Settings: hover previews dashboard nav surface */\n.panel-nav--settings .panel-nav__footer-btn:hover {\n background: var(--color-navigation-background);\n color: var(--color-navigation-foreground-secondary);\n transition: none;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n position: absolute;\n /* row position: right of gear button */\n left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n right: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n width: auto;\n min-width: 0;\n transition:\n left var(--_nav-expand-motion),\n right var(--_nav-expand-motion),\n top var(--_nav-expand-motion),\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n /* column position: full-width row below gear */\n left: var(--_nav-padding-x);\n right: var(--_nav-padding-x);\n top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n text-align: right;\n position: absolute;\n left: var(--dimension-space-075, 6px);\n right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n top: 50%;\n transform: translateY(-50%);\n flex: none;\n height: var(--typography-lineheight-md, 20px);\n mask-image: none;\n -webkit-mask-image: none;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n opacity: 0;\n pointer-events: none;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n position: absolute;\n left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n top: 0;\n bottom: 0;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n opacity: 1;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n opacity: 0;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n opacity: 0;\n transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n opacity: 1;\n transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--_nav-fg-secondary);\n text-transform: uppercase;\n line-height: 1;\n pointer-events: none;\n transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n.panel-nav__resize-handle {\n position: absolute;\n top: 0;\n /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n right: var(--dimension-space-n050, -4px);\n bottom: 0;\n width: var(--dimension-space-100, 8px);\n z-index: 10;\n cursor: ew-resize;\n touch-action: none;\n /* Needs a real background for Safari hit-testing */\n background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n content: '';\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.001);\n}\n\n/* The brand-bold overlay line */\n.panel-nav__resize-handle::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: var(--dimension-stroke-width-025, 2px);\n background: var(--color-background-bold-brand);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .panel-nav,\n .panel-nav *,\n .panel-nav *::before,\n .panel-nav *::after,\n .panel-nav__resize-handle,\n .panel-nav__resize-handle::before,\n .panel-nav__resize-handle::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n transition-delay: 0.01ms !important;\n }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\n\n// Injected once per document to suppress the browser default cross-fade and\n// pin the new-state snapshot to a 0px circle so the WAAPI reveal has no flash.\nlet vtStyleInjected = false;\n\n// Module-level WeakMaps for per-instance VT state. Using WeakMaps instead of\n// class fields avoids Stencil generating getter-only property descriptors on\n// the host element for private fields, which throws in strict environments.\nconst vtTransitions = new WeakMap<object, { skipTransition: () => void }>();\nconst vtResolvers = new WeakMap<object, () => void>();\nfunction ensureVtStyle() {\n if (vtStyleInjected) return;\n const id = 'ds-panel-nav-vt-style';\n if (document.getElementById(id)) { vtStyleInjected = true; return; }\n const style = document.createElement('style');\n style.id = id;\n style.textContent = [\n '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',\n '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n ].join('\\n');\n document.head.appendChild(style);\n vtStyleInjected = true;\n}\n\n/** Parse a CSS <time> value to milliseconds. Handles `s`, `ms`, and unitless\n * (assumed ms). Critically: `parseFloat('.75s')` is 0.75 — WAAPI treats that as\n * 0.75ms (instant/invisible), so the `s` unit must be scaled to ms. Design\n * tokens (e.g. `--effect-animation-duration-long-1`) are authored in seconds. */\nfunction parseCssTimeMs(value: string, fallback: number): number {\n const v = value.trim();\n const num = parseFloat(v);\n if (Number.isNaN(num)) return fallback;\n if (/ms\\s*$/.test(v)) return num;\n if (/s\\s*$/.test(v)) return num * 1000;\n return num;\n}\n\nexport type PanelNavVariant = 'dashboard' | 'settings';\n\nexport interface PanelNavItem {\n id: string;\n icon: string;\n label: string;\n /** Show a notification dot badge on the item */\n dot?: boolean;\n flag?: boolean;\n /** When set, the item renders as an `<a>` element so any router that\n * intercepts anchor clicks (Angular Router, React Router, etc.) handles\n * navigation automatically. `dsNavSelect` still fires on click. */\n href?: string;\n}\n\nexport interface PanelNavGroup {\n id?: string;\n label?: string;\n items: PanelNavItem[];\n}\n\n@Component({\n tag: 'ds-panel-nav',\n styleUrl: 'PanelNav.css',\n scoped: true,\n})\nexport class PanelNav {\n /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */\n @Prop() variant: PanelNavVariant = 'dashboard';\n\n /** When `true`, the component does not run its own View Transition on variant\n * change — it just updates the rendered surface synchronously. Use this when\n * the host app orchestrates the page transition itself (e.g. Angular Router's\n * `withViewTransitions`), so the two don't fight or nest. */\n @Prop() disableViewTransition: boolean = false;\n\n /** JSON string of `PanelNavGroup[]` */\n @Prop() groups: string = '[]';\n\n /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n @Prop() activeId: string = '';\n\n /** Whether the nav is in collapsed (icon-only) state.\n * When `storageKey` is set the component manages this internally —\n * do not also bind it from outside in that mode. */\n @Prop({ mutable: true }) collapsed: boolean = false;\n\n /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n @Prop() breakpoint: number = 0;\n\n /** `localStorage` key used to persist the collapsed state across page loads.\n * When set the component is self-managing for collapsed state; `dsNavToggle`\n * still fires for consumers that want to observe the change. */\n @Prop() storageKey: string = '';\n\n /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n * When set the component derives the active item by matching item `href` values\n * against this string (longest prefix wins), overriding `activeId`. */\n @Prop() currentUrl: string = '';\n\n /** Display name for the footer user section */\n @Prop() userName: string = '';\n\n /** Single character shown in the collapsed avatar */\n @Prop() userInitial: string = '';\n\n /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n @Event() dsNavSelect!: EventEmitter<string>;\n\n /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n @Event() dsNavToggle!: EventEmitter<boolean>;\n\n /** Emitted when the footer left button (gear / dashboard) is clicked. */\n @Event() dsNavFooterAction!: EventEmitter<void>;\n\n @Element() el!: HTMLElement;\n\n /** Mirrors `variant` but is only updated inside the VT callback so the\n * View Transition captures a clean before/after snapshot. */\n @State() private renderedVariant: PanelNavVariant = 'dashboard';\n\n @State() private parsedGroups: PanelNavGroup[] = [];\n @State() private atBottom = false;\n @State() private isAnimating = false;\n @State() private rovingIndex: number = 0;\n @State() private viewportNarrow: boolean = false;\n @State() private urlDerivedActiveId: string = '';\n\n private transitionEndHandler?: (e: TransitionEvent) => void;\n private resizeObserver?: ResizeObserver;\n\n // Drag-to-resize state (not @State — no re-render needed)\n private isDragging = false;\n private dragStartX = 0;\n private didSnap = false;\n private lastDeltaX = 0;\n private edgeOverlayTimer: number | null = null;\n private globalMouseMoveHandler?: (e: MouseEvent) => void;\n private globalMouseUpHandler?: () => void;\n\n @State() private showEdgeOverlay = false;\n\n /** The ID that should be treated as active. `currentUrl` matching takes precedence\n * over `activeId` when both are present. */\n private get effectiveActiveId(): string {\n return this.urlDerivedActiveId || this.activeId;\n }\n\n @Watch('collapsed')\n @Watch('viewportNarrow')\n onCollapsedChange() {\n this.startCollapseAnimation();\n }\n\n @Watch('breakpoint')\n onBreakpointChange() {\n this.disconnectResizeObserver();\n if (this.breakpoint > 0) this.connectResizeObserver();\n }\n\n @Watch('groups')\n onGroupsChange(val: string) {\n try {\n this.parsedGroups = JSON.parse(val);\n } catch {\n this.parsedGroups = [];\n }\n this.syncRovingIndex();\n }\n\n @Watch('activeId')\n @Watch('urlDerivedActiveId')\n onActiveIdChange() {\n this.syncRovingIndex();\n }\n\n @Watch('currentUrl')\n onCurrentUrlChange() {\n this.syncActiveFromUrl();\n }\n\n @Watch('variant')\n async onVariantChange(newVal: PanelNavVariant) {\n // Host app drives the transition (e.g. Angular Router withViewTransitions):\n // just reflect the new surface so the app's transition captures it.\n if (this.disableViewTransition) {\n this.renderedVariant = newVal;\n return;\n }\n\n // Skip any in-progress transition immediately so rapid variant changes\n // (e.g. quick dashboard → settings → dashboard) never leave the nav stuck.\n vtTransitions.get(this)?.skipTransition();\n vtTransitions.delete(this);\n\n if (typeof (document as any).startViewTransition !== 'function') {\n this.renderedVariant = newVal;\n return;\n }\n\n ensureVtStyle();\n\n const btn = this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null;\n const rect = btn?.getBoundingClientRect();\n const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);\n const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);\n const maxR = Math.ceil(Math.hypot(\n Math.max(x, window.innerWidth - x),\n Math.max(y, window.innerHeight - y),\n ));\n\n document.documentElement.style.setProperty('--vt-x', `${x}px`);\n document.documentElement.style.setProperty('--vt-y', `${y}px`);\n\n const transition = (document as any).startViewTransition(() =>\n new Promise<void>(resolve => {\n vtResolvers.set(this, resolve);\n this.renderedVariant = newVal;\n })\n );\n\n vtTransitions.set(this, transition);\n transition.finished.finally(() => {\n if (vtTransitions.get(this) === transition) vtTransitions.delete(this);\n vtResolvers.delete(this);\n });\n\n transition.ready.then(() => {\n const durToken = getComputedStyle(document.documentElement)\n .getPropertyValue('--effect-animation-duration-long-1').trim();\n const duration = parseCssTimeMs(durToken, 750);\n document.documentElement.animate(\n { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxR}px at ${x}px ${y}px)`] },\n { duration, easing: 'ease-in-out', fill: 'forwards', pseudoElement: '::view-transition-new(root)' },\n );\n }).catch(() => { /* transition was skipped or aborted */ });\n }\n\n componentWillLoad() {\n this.renderedVariant = this.variant;\n if (this.storageKey) {\n try {\n const stored = localStorage.getItem(this.storageKey);\n if (stored !== null) this.collapsed = stored === 'true';\n } catch { /* localStorage unavailable */ }\n }\n this.onGroupsChange(this.groups);\n this.syncActiveFromUrl();\n }\n\n componentDidLoad() {\n this.checkScroll();\n if (this.breakpoint > 0) this.connectResizeObserver();\n // Re-sync groups in case componentWillLoad ran before host bindings were applied\n // (common with Angular's property binding timing)\n this.onGroupsChange(this.groups);\n }\n\n componentDidRender() {\n // If a view transition callback is waiting for the render to complete,\n // resolve it now so the \"after\" snapshot is taken at exactly the right moment.\n const resolve = vtResolvers.get(this);\n if (resolve) {\n vtResolvers.delete(this);\n resolve();\n }\n }\n\n disconnectedCallback() {\n this.disconnectResizeObserver();\n this.clearEdgeOverlayTimer();\n if (this.globalMouseMoveHandler) {\n window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n }\n if (this.globalMouseUpHandler) {\n window.removeEventListener('mouseup', this.globalMouseUpHandler);\n }\n }\n\n private startCollapseAnimation() {\n this.isAnimating = true;\n const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\n this.transitionEndHandler = (e: TransitionEvent) => {\n if (e.propertyName === 'width') {\n this.isAnimating = false;\n panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n }\n };\n panel?.addEventListener('transitionend', this.transitionEndHandler);\n }\n\n private connectResizeObserver() {\n this.viewportNarrow = window.innerWidth < this.breakpoint;\n this.resizeObserver = new ResizeObserver(() => {\n this.viewportNarrow = window.innerWidth < this.breakpoint;\n });\n this.resizeObserver.observe(document.documentElement);\n }\n\n private disconnectResizeObserver() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = undefined;\n }\n\n /** Derive active ID from the current URL by matching item `href` values.\n * Uses longest-prefix match so `/fleet/detail` correctly activates `/fleet`. */\n private syncActiveFromUrl() {\n if (!this.currentUrl) {\n this.urlDerivedActiveId = '';\n return;\n }\n let best: PanelNavItem | undefined;\n let bestLen = 0;\n for (const item of this.getAllItems()) {\n if (item.href && this.currentUrl.startsWith(item.href) && item.href.length > bestLen) {\n best = item;\n bestLen = item.href.length;\n }\n }\n this.urlDerivedActiveId = best?.id ?? '';\n }\n\n /** Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set\n * also mutates `collapsed` directly and persists to `localStorage`. */\n private applyToggle(next: boolean) {\n this.dsNavToggle.emit(next);\n if (this.storageKey) {\n this.collapsed = next;\n try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n }\n }\n\n private getAllItems(): PanelNavItem[] {\n return this.parsedGroups.flatMap(g => g.items);\n }\n\n private syncRovingIndex() {\n const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n this.rovingIndex = idx >= 0 ? idx : 0;\n }\n\n private handleItemKeyDown(e: KeyboardEvent, index: number) {\n const total = this.getAllItems().length;\n let next = index;\n switch (e.key) {\n case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n case 'ArrowUp': e.preventDefault(); next = (index - 1 + total) % total; break;\n case 'Home': e.preventDefault(); next = 0; break;\n case 'End': e.preventDefault(); next = total - 1; break;\n default: return;\n }\n this.rovingIndex = next;\n const items = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n );\n items[next]?.focus();\n }\n\n private checkScroll() {\n const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n if (!body) return;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleBodyScroll(e: Event) {\n const body = e.target as HTMLElement;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleItemClick(id: string) {\n this.dsNavSelect.emit(id);\n }\n\n private handleToggle() {\n this.applyToggle(!this.collapsed);\n }\n\n private handleFooterAction() {\n this.dsNavFooterAction.emit();\n }\n\n private clearEdgeOverlayTimer() {\n if (this.edgeOverlayTimer !== null) {\n window.clearTimeout(this.edgeOverlayTimer);\n this.edgeOverlayTimer = null;\n }\n }\n\n private handleResizeHandleMouseEnter() {\n this.clearEdgeOverlayTimer();\n this.edgeOverlayTimer = window.setTimeout(() => {\n this.showEdgeOverlay = true;\n this.edgeOverlayTimer = null;\n }, 500);\n }\n\n private handleResizeHandleMouseLeave() {\n if (this.isDragging) return;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n }\n\n private handleResizeHandleMouseDown(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n const wasCollapsed = this.collapsed || this.viewportNarrow;\n this.isDragging = true;\n this.dragStartX = e.clientX;\n this.didSnap = false;\n this.lastDeltaX = 0;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n const onMove = (ev: MouseEvent) => {\n const deltaX = ev.clientX - this.dragStartX;\n this.lastDeltaX = Math.abs(deltaX);\n if (this.didSnap) return;\n if (!wasCollapsed && deltaX < -8) {\n this.applyToggle(true);\n this.didSnap = true;\n } else if (wasCollapsed && deltaX > 8) {\n this.applyToggle(false);\n this.didSnap = true;\n }\n };\n\n const onUp = () => {\n if (!this.didSnap && this.lastDeltaX < 3) {\n this.applyToggle(!wasCollapsed);\n }\n this.isDragging = false;\n this.showEdgeOverlay = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this.globalMouseMoveHandler = undefined;\n this.globalMouseUpHandler = undefined;\n };\n\n this.globalMouseMoveHandler = onMove;\n this.globalMouseUpHandler = onUp;\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n const isActive = item.id === this.effectiveActiveId;\n\n const itemContent = [\n <span class=\"panel-nav__item-icon\">\n <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n </span>,\n <span class=\"panel-nav__item-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text\n as=\"span\"\n variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n </span>\n </span>,\n item.dot && <span class=\"panel-nav__item-dot\" aria-hidden=\"true\" />,\n ];\n\n const sharedProps = {\n class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n 'aria-current': isActive ? ('page' as const) : undefined,\n title: collapsed ? item.label : undefined,\n tabIndex: idx === this.rovingIndex ? 0 : -1,\n onClick: () => this.handleItemClick(item.id),\n onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n onFocus: () => { this.rovingIndex = idx; },\n };\n\n return item.href\n ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n }\n\n render() {\n const isDashboard = this.renderedVariant === 'dashboard';\n const collapsed = this.collapsed || this.viewportNarrow;\n const { userName, userInitial } = this;\n\n const navCls: Record<string, boolean> = {\n 'panel-nav': true,\n 'panel-nav--dashboard': isDashboard,\n 'panel-nav--settings': !isDashboard,\n 'panel-nav--collapsed': collapsed,\n 'panel-nav--animating': this.isAnimating,\n 'panel-nav--at-bottom': this.atBottom,\n };\n\n return (\n <Host style={{ display: 'block', position: 'relative' }}>\n <nav class={navCls} aria-label={isDashboard ? 'Main navigation' : 'Settings navigation'}>\n\n {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n <div class=\"panel-nav__header\">\n <button\n type=\"button\"\n class=\"panel-nav__header-btn\"\n onClick={() => this.handleToggle()}\n aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n aria-expanded={collapsed ? 'false' : 'true'}\n >\n {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n <path 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\"/>\n </svg>\n </span>\n {/* Collapse / expand icon — revealed on hover via CSS */}\n <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n <ds-icon\n name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n size=\"md\"\n color=\"inherit\"\n />\n </span>\n </button>\n </div>\n\n {/* ── Scrollable body ── */}\n <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n {(() => {\n let flatIdx = 0;\n return this.parsedGroups.map(group => (\n <div class=\"panel-nav__group\">\n {group.label && (\n <span class=\"panel-nav__group-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {group.label}\n </ds-text>\n </span>\n </span>\n )}\n {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n </div>\n ));\n })()}\n </div>\n\n {/* ── Footer ── */}\n <div class=\"panel-nav__footer\">\n {/* Left icon button — Gear in dashboard, Dashboard in settings */}\n <button\n type=\"button\"\n class=\"panel-nav__footer-btn\"\n title={isDashboard ? 'Settings' : 'Dashboard'}\n aria-label={isDashboard ? 'Open settings' : 'Go to dashboard'}\n onClick={() => this.handleFooterAction()}\n >\n <ds-icon name={isDashboard ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n </button>\n\n {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n <button\n type=\"button\"\n class=\"panel-nav__item panel-nav__footer-user\"\n aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n >\n <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n {userName}\n </ds-text>\n </span>\n </span>\n <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n <span class=\"panel-nav__footer-icon-expanded\">\n <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n </span>\n <span class=\"panel-nav__footer-icon-collapsed\">\n <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n <span class=\"panel-nav__user-initial\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {userInitial}\n </ds-text>\n </span>\n </span>\n </span>\n </button>\n </div>\n\n </nav>\n\n {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n {!this.viewportNarrow && (\n <div\n class={{\n 'panel-nav__resize-handle': true,\n 'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n }}\n onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n aria-hidden=\"true\"\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["panelNavCss","vtStyleInjected","vtTransitions","WeakMap","vtResolvers","ensureVtStyle","id","document","getElementById","style","createElement","textContent","join","head","appendChild","parseCssTimeMs","value","fallback","v","trim","num","parseFloat","Number","isNaN","test","PanelNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","disableViewTransition","groups","activeId","collapsed","breakpoint","storageKey","currentUrl","userName","userInitial","renderedVariant","parsedGroups","atBottom","isAnimating","rovingIndex","viewportNarrow","urlDerivedActiveId","isDragging","dragStartX","didSnap","lastDeltaX","edgeOverlayTimer","showEdgeOverlay","effectiveActiveId","onCollapsedChange","startCollapseAnimation","onBreakpointChange","disconnectResizeObserver","connectResizeObserver","onGroupsChange","val","JSON","parse","syncRovingIndex","onActiveIdChange","onCurrentUrlChange","syncActiveFromUrl","onVariantChange","newVal","get","skipTransition","delete","doc","startViewTransition","btn","el","querySelector","rect","getBoundingClientRect","x","Math","round","left","width","window","innerWidth","y","top","height","innerHeight","maxR","ceil","hypot","max","documentElement","setProperty","transition","Promise","resolve","set","finished","finally","ready","then","durToken","getComputedStyle","getPropertyValue","duration","animate","clipPath","easing","fill","pseudoElement","catch","componentWillLoad","stored","localStorage","getItem","componentDidLoad","checkScroll","componentDidRender","disconnectedCallback","clearEdgeOverlayTimer","globalMouseMoveHandler","removeEventListener","globalMouseUpHandler","panel","transitionEndHandler","e","propertyName","addEventListener","resizeObserver","ResizeObserver","observe","disconnect","undefined","best","bestLen","item","getAllItems","href","startsWith","length","applyToggle","next","dsNavToggle","emit","setItem","String","flatMap","g","items","idx","findIndex","i","handleItemKeyDown","index","total","key","preventDefault","Array","from","querySelectorAll","focus","body","remaining","scrollHeight","scrollTop","clientHeight","handleBodyScroll","target","handleItemClick","dsNavSelect","handleToggle","handleFooterAction","dsNavFooterAction","clearTimeout","handleResizeHandleMouseEnter","setTimeout","handleResizeHandleMouseLeave","handleResizeHandleMouseDown","stopPropagation","wasCollapsed","clientX","cursor","userSelect","onMove","ev","deltaX","abs","onUp","renderNavItem","isActive","itemContent","h","class","name","icon","size","color","flag","as","label","dot","sharedProps","title","tabIndex","onClick","onKeyDown","onFocus","type","render","isDashboard","navCls","Host","display","position","viewBox","xmlns","focusable","d","onScroll","flatIdx","map","group","onMouseEnter","onMouseLeave","onMouseDown"],"sources":["src/wc/components/PanelNav/PanelNav.css?tag=ds-panel-nav&encapsulation=scoped","src/wc/components/PanelNav/PanelNav.tsx"],"sourcesContent":["/* ── Theme variables ──────────────────────────────────────────────────────── */\n\n.panel-nav {\n /* ─ Sizes ─ */\n --_nav-width: 200px;\n --_nav-width-collapsed: 48px;\n --_nav-item-height: var(--dimension-size-400, 32px);\n --_nav-padding-x: var(--dimension-space-100, 8px);\n --_nav-padding-y: var(--dimension-space-100, 8px);\n /* gear button outer width = padding*2 + icon */\n --_nav-footer-btn-w: calc(var(--dimension-space-075, 6px) * 2 + var(--dimension-iconography-md, 20px));\n\n /* ─ Motion ─ */\n /* --ds-panel-nav-speed: unitless multiplier; override in Storybook to slow-mo (e.g. 10 = 10×).\n *-dur vars are duration-only (needed for calc); *-motion vars add easing for use in transitions. */\n --_nav-speed: var(--ds-panel-nav-speed, 1);\n --_nav-expand-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-expand-motion: var(--_nav-expand-dur) var(--effect-animation-easing-ease-in-out, ease);\n --_nav-label-fade-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-label-fade-motion: var(--_nav-label-fade-dur) var(--effect-animation-easing-ease-in-out, ease);\n --_nav-label-fade-out-dur: calc(var(--_nav-speed) * var(--effect-animation-duration-medium-1, 300ms));\n --_nav-label-fade-out-motion: var(--_nav-label-fade-out-dur) var(--effect-animation-easing-ease-in-out, ease);\n\n /* ─ Colours – dashboard defaults ─ */\n --_nav-bg: var(--color-navigation-background);\n --_nav-border: var(--color-navigation-border-tertiary);\n --_nav-divider: var(--color-navigation-divider);\n --_nav-fg-primary: var(--color-navigation-foreground-primary);\n --_nav-fg-secondary: var(--color-navigation-foreground-secondary);\n --_nav-fg-tertiary: var(--color-navigation-foreground-tertiary);\n --_nav-hover: var(--color-navigation-interaction-hover);\n --_nav-pressed: var(--color-navigation-interaction-pressed);\n --_nav-focus: var(--color-navigation-interaction-focus);\n --_nav-dot: var(--color-navigation-foreground-brand);\n}\n\n/* ── Settings overrides ──────────────────────────────────────────────────── */\n\n.panel-nav--settings {\n --_nav-bg: var(--color-background-secondary);\n --_nav-border: var(--color-border-tertiary);\n --_nav-divider: var(--color-border-tertiary);\n --_nav-fg-primary: var(--color-foreground-primary);\n --_nav-fg-secondary: var(--color-foreground-secondary);\n --_nav-fg-tertiary: var(--color-foreground-tertiary);\n --_nav-hover: var(--color-interaction-hover);\n --_nav-pressed: var(--color-interaction-pressed);\n --_nav-focus: var(--color-interaction-focus);\n --_nav-dot: var(--color-foreground-bold-brand);\n}\n\n/* ── Shell ───────────────────────────────────────────────────────────────── */\n\n.panel-nav {\n display: flex;\n flex-direction: column;\n width: var(--_nav-width);\n min-width: var(--_nav-width);\n height: 100%;\n background: var(--_nav-bg);\n border-right: var(--dimension-stroke-width-012, 1px) solid var(--_nav-border);\n box-sizing: border-box;\n overflow: hidden;\n transition:\n width var(--_nav-expand-motion),\n min-width var(--_nav-expand-motion),\n background var(--effect-motion-short-3, 200ms ease),\n border-color var(--effect-motion-short-3, 200ms ease);\n font-family: var(--typography-font-family, system-ui);\n}\n\n.panel-nav--collapsed {\n width: var(--_nav-width-collapsed);\n min-width: var(--_nav-width-collapsed);\n}\n\n/* ── Header ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__header {\n display: flex;\n align-items: center;\n padding: var(--dimension-space-100, 8px);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--dimension-stroke-width-012, 1px) solid var(--_nav-divider);\n transition: border-color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav__header-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-primary);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* Interaction pseudo-element */\n.panel-nav__header-btn::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n pointer-events: none;\n}\n\n.panel-nav__header-btn:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__header-btn:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__header-btn:focus-visible { outline: none; }\n.panel-nav__header-btn:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Logo — visible by default, hidden on hover */\n.panel-nav__header-logo {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n z-index: 1;\n transition: opacity var(--effect-motion-short-2, 100ms ease);\n}\n\n.panel-nav__m-mark {\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n display: block;\n}\n\n/* Toggle icon — hidden by default, revealed on hover */\n.panel-nav__header-toggle {\n display: none;\n align-items: center;\n justify-content: center;\n position: absolute;\n inset: 0;\n z-index: 1;\n}\n\n.panel-nav__header-btn:hover .panel-nav__header-logo { opacity: 0; }\n.panel-nav__header-btn:hover .panel-nav__header-toggle { display: flex; }\n\n/* ── Scrollable body ─────────────────────────────────────────────────────── */\n\n.panel-nav__body {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-200, 16px);\n padding: var(--dimension-space-100, 8px);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-nav__body::-webkit-scrollbar { display: none; }\n\n/* ── Group ───────────────────────────────────────────────────────────────── */\n\n.panel-nav__group {\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050, 4px);\n}\n\n.panel-nav__group-label {\n /* Typography via ds-text (text-caption-emphasis) */\n display: flex;\n align-items: center;\n text-transform: uppercase;\n color: var(--_nav-fg-secondary);\n user-select: none;\n height: var(--dimension-size-300, 24px);\n line-height: var(--typography-lineheight-xs, 12px);\n padding: 0 var(--dimension-space-075, 6px);\n white-space: nowrap;\n overflow: hidden;\n max-height: var(--dimension-size-300, 24px);\n opacity: 1;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n max-height var(--_nav-label-fade-motion) 0ms,\n padding var(--_nav-label-fade-motion) 0ms,\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Item ────────────────────────────────────────────────────────────────── */\n\n.panel-nav__item {\n all: unset;\n display: flex;\n align-items: center;\n gap: var(--dimension-space-050, 4px);\n padding: 0 var(--dimension-space-075, 6px);\n height: var(--dimension-size-400, 32px);\n border-radius: var(--dimension-radius-025, 2px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n position: relative;\n box-sizing: border-box;\n width: 100%;\n user-select: none;\n transition: color var(--effect-motion-short-1, 50ms ease-in-out);\n}\n\n/* Interaction layer */\n.panel-nav__item::after {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--dimension-radius-025, 2px);\n background: transparent;\n pointer-events: none;\n transition: background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__item:hover::after { background: var(--_nav-hover); transition: none; }\n.panel-nav__item:active::after { background: var(--_nav-pressed); transition: none; }\n.panel-nav__item:focus-visible { outline: none; }\n.panel-nav__item:focus-visible::after {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* ── Active item ─────────────────────────────────────────────────────────── */\n\n.panel-nav__item--active {\n color: var(--_nav-fg-primary);\n /* Bold typography via ds-text (text-body-medium-emphasis) on the label */\n}\n\n/* ── Item icon ───────────────────────────────────────────────────────────── */\n\n.panel-nav__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--dimension-iconography-md, 20px);\n height: var(--dimension-iconography-md, 20px);\n position: relative;\n}\n\n/* ── Item label ──────────────────────────────────────────────────────────── */\n\n.panel-nav__item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n height: var(--typography-lineheight-md, 20px);\n line-height: var(--typography-lineheight-md, 20px);\n opacity: 1;\n /* Gradient wipe: mask sweeps left-to-right on expand, right-to-left on collapse */\n mask-image: linear-gradient(to right, black 50%, transparent 100%);\n -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);\n mask-size: 200% 100%;\n -webkit-mask-size: 200% 100%;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n transition:\n opacity var(--_nav-label-fade-motion) 0ms,\n mask-position var(--_nav-label-fade-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-motion) 0ms;\n}\n\n.panel-nav__item-label-text {\n padding: 0 var(--dimension-space-025, 2px);\n}\n\n/* ── Item notification dot — single element, moves between positions ──────── */\n\n.panel-nav__item-dot {\n position: absolute;\n right: 13px;\n top: 13px;\n width: var(--dimension-space-075, 6px);\n height: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-full, 999px);\n background: var(--_nav-dot);\n box-shadow: 0 0 0 var(--dimension-stroke-width-018, 1.5px) var(--_nav-bg);\n pointer-events: none;\n transition:\n right var(--_nav-expand-motion),\n top var(--_nav-expand-motion),\n background var(--effect-motion-short-3, 200ms ease),\n box-shadow var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__item-dot {\n right: 6px;\n top: 6px;\n}\n\n.panel-nav--animating .panel-nav__item-label {\n text-overflow: clip;\n}\n\n.panel-nav--collapsed .panel-nav__item-label {\n opacity: 0;\n pointer-events: none;\n text-overflow: clip;\n mask-position: 100% 0;\n -webkit-mask-position: 100% 0;\n transition:\n opacity var(--_nav-label-fade-out-motion) 0ms,\n mask-position var(--_nav-label-fade-out-motion) 0ms,\n -webkit-mask-position var(--_nav-label-fade-out-motion) 0ms;\n}\n\n.panel-nav--collapsed .panel-nav__group-label {\n opacity: 0;\n max-height: 0;\n padding: 0 var(--dimension-space-075, 6px);\n pointer-events: none;\n transition:\n opacity var(--_nav-label-fade-out-motion) 0ms,\n max-height var(--_nav-label-fade-out-motion) 0ms,\n padding var(--_nav-label-fade-out-motion) 0ms,\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Footer ──────────────────────────────────────────────────────────────── */\n\n.panel-nav__footer {\n position: relative;\n flex-shrink: 0;\n /* single row: padding*2 + item */\n height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height));\n transition: height var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer {\n /* two rows: padding*2 + item*2 + gap */\n height: calc(var(--_nav-padding-y) * 2 + var(--_nav-item-height) * 2 + var(--dimension-space-050, 4px));\n}\n\n/* Gradient fade — floats above the footer, masks content scrolling under it */\n.panel-nav__footer::before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 0;\n right: 0;\n height: calc(var(--dimension-base, 8px) * 6);\n background: linear-gradient(to bottom, transparent, var(--_nav-bg));\n pointer-events: none;\n opacity: 1;\n transition: opacity var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav--at-bottom .panel-nav__footer::before {\n opacity: 0;\n}\n\n/* ── Footer icon button (gear / dashboard) ───────────────────────────────── */\n\n.panel-nav__footer-btn {\n all: unset;\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n left: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n padding: var(--dimension-space-075, 6px);\n border-radius: var(--dimension-radius-half, 9999px);\n cursor: pointer;\n color: var(--_nav-fg-secondary);\n box-sizing: border-box;\n background: transparent;\n transition:\n background var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease),\n color var(--effect-animation-duration-short-3, 200ms) var(--effect-animation-easing-ease-out, ease);\n}\n\n.panel-nav__footer-btn:focus-visible {\n outline: var(--dimension-stroke-width-025, 2px) solid var(--_nav-focus);\n outline-offset: calc(-1 * var(--dimension-stroke-width-025, 2px));\n}\n\n/* Dashboard: hover previews settings surface */\n.panel-nav--dashboard .panel-nav__footer-btn:hover {\n background: var(--color-background-secondary);\n color: var(--color-foreground-secondary);\n transition: none;\n}\n\n/* Settings: hover previews dashboard nav surface */\n.panel-nav--settings .panel-nav__footer-btn:hover {\n background: var(--color-navigation-background);\n color: var(--color-navigation-foreground-secondary);\n transition: none;\n}\n\n/* ── Footer user — absolutely positioned, slides from row to below gear ───── */\n\n.panel-nav__footer-user {\n position: absolute;\n /* row position: right of gear button */\n left: calc(var(--_nav-padding-x) + var(--_nav-footer-btn-w) + var(--dimension-space-050, 4px));\n right: var(--_nav-padding-x);\n top: var(--_nav-padding-y);\n width: auto;\n min-width: 0;\n transition:\n left var(--_nav-expand-motion),\n right var(--_nav-expand-motion),\n top var(--_nav-expand-motion),\n color var(--effect-motion-short-3, 200ms ease);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user {\n /* column position: full-width row below gear */\n left: var(--_nav-padding-x);\n right: var(--_nav-padding-x);\n top: calc(var(--_nav-padding-y) + var(--_nav-item-height) + var(--dimension-space-050, 4px));\n}\n\n/* Label: absolute so it stays in place and only fades — no mask slide */\n.panel-nav__footer-user-label {\n text-align: right;\n position: absolute;\n left: var(--dimension-space-075, 6px);\n right: calc(var(--dimension-space-075, 6px) + var(--dimension-iconography-md, 20px) + var(--dimension-space-050, 4px));\n top: 50%;\n transform: translateY(-50%);\n flex: none;\n height: var(--typography-lineheight-md, 20px);\n mask-image: none;\n -webkit-mask-image: none;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-label {\n opacity: 0;\n pointer-events: none;\n mask-position: 0% 0;\n -webkit-mask-position: 0% 0;\n}\n\n/* ── Footer user icon — cross-fades chevron ↔ circle+initial ────────────── */\n\n/* Absolute — right-anchored in expanded, left-anchored in collapsed to match regular item icon position */\n.panel-nav__footer-user-icon {\n position: absolute;\n left: calc(100% - var(--dimension-iconography-md, 20px) - var(--dimension-space-075, 6px));\n top: 0;\n bottom: 0;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: left var(--_nav-expand-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-user-icon {\n left: var(--dimension-space-075, 6px);\n}\n\n.panel-nav__footer-icon-expanded,\n.panel-nav__footer-icon-collapsed {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.panel-nav__footer-icon-expanded {\n opacity: 1;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav__footer-icon-collapsed {\n opacity: 0;\n transition: opacity var(--_nav-label-fade-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-expanded {\n opacity: 0;\n transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n.panel-nav--collapsed .panel-nav__footer-icon-collapsed {\n opacity: 1;\n transition: opacity var(--_nav-label-fade-out-motion);\n}\n\n/* ── User initial — overlaid on the circle icon ─────────────────────────── */\n\n.panel-nav__user-initial {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--_nav-fg-secondary);\n text-transform: uppercase;\n line-height: 1;\n pointer-events: none;\n transition: color var(--effect-motion-short-3, 200ms ease);\n}\n\n/* ── Drag-to-resize handle ───────────────────────────────────────────────── */\n\n.panel-nav__resize-handle {\n position: absolute;\n top: 0;\n /* Centered on the right edge: --dimension-space-050 outside + inside = --dimension-space-100 hit zone */\n right: var(--dimension-space-n050, -4px);\n bottom: 0;\n width: var(--dimension-space-100, 8px);\n z-index: 10;\n cursor: ew-resize;\n touch-action: none;\n /* Needs a real background for Safari hit-testing */\n background: transparent;\n}\n\n/* Safari requires non-transparent fill for hit testing */\n.panel-nav__resize-handle::before {\n content: '';\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.001);\n}\n\n/* The brand-bold overlay line */\n.panel-nav__resize-handle::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: var(--dimension-stroke-width-025, 2px);\n background: var(--color-background-bold-brand);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--effect-motion-short-2, 100ms ease-in-out);\n}\n\n.panel-nav__resize-handle--overlay::after {\n opacity: 1;\n}\n\n/* ── Reduced motion ──────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n .panel-nav,\n .panel-nav *,\n .panel-nav *::before,\n .panel-nav *::after,\n .panel-nav__resize-handle,\n .panel-nav__resize-handle::before,\n .panel-nav__resize-handle::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n transition-delay: 0.01ms !important;\n }\n}\n","import { Component, Prop, Event, EventEmitter, Watch, State, Element, h, Host } from '@stencil/core';\n\n// Injected once per document to suppress the browser default cross-fade and\n// pin the new-state snapshot to a 0px circle so the WAAPI reveal has no flash.\nlet vtStyleInjected = false;\n\n// Module-level WeakMaps for per-instance VT state. Using WeakMaps instead of\n// class fields avoids Stencil generating getter-only property descriptors on\n// the host element for private fields, which throws in strict environments.\n// Minimal typings for the View Transitions API, which isn't in our TS lib target.\ninterface ViewTransition {\n finished: Promise<void>;\n skipTransition: () => void;\n}\ntype DocumentWithViewTransition = Document & {\n startViewTransition?: (callback: () => void | Promise<void>) => ViewTransition;\n};\n\nconst vtTransitions = new WeakMap<object, ViewTransition>();\nconst vtResolvers = new WeakMap<object, () => void>();\nfunction ensureVtStyle() {\n if (vtStyleInjected) return;\n const id = 'ds-panel-nav-vt-style';\n if (document.getElementById(id)) { vtStyleInjected = true; return; }\n const style = document.createElement('style');\n style.id = id;\n style.textContent = [\n '::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}',\n '::view-transition-new(root){clip-path:circle(0px at var(--vt-x,50%) var(--vt-y,50%))}',\n ].join('\\n');\n document.head.appendChild(style);\n vtStyleInjected = true;\n}\n\n/** Parse a CSS <time> value to milliseconds. Handles `s`, `ms`, and unitless\n * (assumed ms). Critically: `parseFloat('.75s')` is 0.75 — WAAPI treats that as\n * 0.75ms (instant/invisible), so the `s` unit must be scaled to ms. Design\n * tokens (e.g. `--effect-animation-duration-long-1`) are authored in seconds. */\nfunction parseCssTimeMs(value: string, fallback: number): number {\n const v = value.trim();\n const num = parseFloat(v);\n if (Number.isNaN(num)) return fallback;\n if (/ms\\s*$/.test(v)) return num;\n if (/s\\s*$/.test(v)) return num * 1000;\n return num;\n}\n\nexport type PanelNavVariant = 'dashboard' | 'settings';\n\nexport interface PanelNavItem {\n id: string;\n icon: string;\n label: string;\n /** Show a notification dot badge on the item */\n dot?: boolean;\n flag?: boolean;\n /** When set, the item renders as an `<a>` element so any router that\n * intercepts anchor clicks (Angular Router, React Router, etc.) handles\n * navigation automatically. `dsNavSelect` still fires on click. */\n href?: string;\n}\n\nexport interface PanelNavGroup {\n id?: string;\n label?: string;\n items: PanelNavItem[];\n}\n\n@Component({\n tag: 'ds-panel-nav',\n styleUrl: 'PanelNav.css',\n scoped: true,\n})\nexport class PanelNav {\n /** Visual variant: `dashboard` = always-dark surface, `settings` = light surface */\n @Prop() variant: PanelNavVariant = 'dashboard';\n\n /** When `true`, the component does not run its own View Transition on variant\n * change — it just updates the rendered surface synchronously. Use this when\n * the host app orchestrates the page transition itself (e.g. Angular Router's\n * `withViewTransitions`), so the two don't fight or nest. */\n @Prop() disableViewTransition: boolean = false;\n\n /** JSON string of `PanelNavGroup[]` */\n @Prop() groups: string = '[]';\n\n /** ID of the currently active/selected nav item. Overridden by `currentUrl` matching when set. */\n @Prop() activeId: string = '';\n\n /** Whether the nav is in collapsed (icon-only) state.\n * When `storageKey` is set the component manages this internally —\n * do not also bind it from outside in that mode. */\n @Prop({ mutable: true }) collapsed: boolean = false;\n\n /** Viewport width (px) below which the nav auto-collapses to icon-only mode. 0 = disabled. */\n @Prop() breakpoint: number = 0;\n\n /** `localStorage` key used to persist the collapsed state across page loads.\n * When set the component is self-managing for collapsed state; `dsNavToggle`\n * still fires for consumers that want to observe the change. */\n @Prop() storageKey: string = '';\n\n /** Current route URL (e.g. `window.location.pathname` or the router's active URL).\n * When set the component derives the active item by matching item `href` values\n * against this string (longest prefix wins), overriding `activeId`. */\n @Prop() currentUrl: string = '';\n\n /** Display name for the footer user section */\n @Prop() userName: string = '';\n\n /** Single character shown in the collapsed avatar */\n @Prop() userInitial: string = '';\n\n /** Emitted when a nav item is clicked. Detail = the item's `id`. */\n @Event() dsNavSelect!: EventEmitter<string>;\n\n /** Emitted when the collapse toggle is clicked. Detail = new collapsed state. */\n @Event() dsNavToggle!: EventEmitter<boolean>;\n\n /** Emitted when the footer left button (gear / dashboard) is clicked. */\n @Event() dsNavFooterAction!: EventEmitter<void>;\n\n @Element() el!: HTMLElement;\n\n /** Mirrors `variant` but is only updated inside the VT callback so the\n * View Transition captures a clean before/after snapshot. */\n @State() private renderedVariant: PanelNavVariant = 'dashboard';\n\n @State() private parsedGroups: PanelNavGroup[] = [];\n @State() private atBottom = false;\n @State() private isAnimating = false;\n @State() private rovingIndex: number = 0;\n @State() private viewportNarrow: boolean = false;\n @State() private urlDerivedActiveId: string = '';\n\n private transitionEndHandler?: (e: TransitionEvent) => void;\n private resizeObserver?: ResizeObserver;\n\n // Drag-to-resize state (not @State — no re-render needed)\n private isDragging = false;\n private dragStartX = 0;\n private didSnap = false;\n private lastDeltaX = 0;\n private edgeOverlayTimer: number | null = null;\n private globalMouseMoveHandler?: (e: MouseEvent) => void;\n private globalMouseUpHandler?: () => void;\n\n @State() private showEdgeOverlay = false;\n\n /** The ID that should be treated as active. `currentUrl` matching takes precedence\n * over `activeId` when both are present. */\n private get effectiveActiveId(): string {\n return this.urlDerivedActiveId || this.activeId;\n }\n\n @Watch('collapsed')\n @Watch('viewportNarrow')\n onCollapsedChange() {\n this.startCollapseAnimation();\n }\n\n @Watch('breakpoint')\n onBreakpointChange() {\n this.disconnectResizeObserver();\n if (this.breakpoint > 0) this.connectResizeObserver();\n }\n\n @Watch('groups')\n onGroupsChange(val: string) {\n try {\n this.parsedGroups = JSON.parse(val);\n } catch {\n this.parsedGroups = [];\n }\n this.syncRovingIndex();\n }\n\n @Watch('activeId')\n @Watch('urlDerivedActiveId')\n onActiveIdChange() {\n this.syncRovingIndex();\n }\n\n @Watch('currentUrl')\n onCurrentUrlChange() {\n this.syncActiveFromUrl();\n }\n\n @Watch('variant')\n async onVariantChange(newVal: PanelNavVariant) {\n // Host app drives the transition (e.g. Angular Router withViewTransitions):\n // just reflect the new surface so the app's transition captures it.\n if (this.disableViewTransition) {\n this.renderedVariant = newVal;\n return;\n }\n\n // Skip any in-progress transition immediately so rapid variant changes\n // (e.g. quick dashboard → settings → dashboard) never leave the nav stuck.\n vtTransitions.get(this)?.skipTransition();\n vtTransitions.delete(this);\n\n const doc = document as DocumentWithViewTransition;\n if (typeof doc.startViewTransition !== 'function') {\n this.renderedVariant = newVal;\n return;\n }\n\n ensureVtStyle();\n\n const btn = this.el.querySelector('.panel-nav__footer-btn') as HTMLElement | null;\n const rect = btn?.getBoundingClientRect();\n const x = rect ? Math.round(rect.left + rect.width / 2) : Math.round(window.innerWidth / 2);\n const y = rect ? Math.round(rect.top + rect.height / 2) : Math.round(window.innerHeight / 2);\n const maxR = Math.ceil(Math.hypot(\n Math.max(x, window.innerWidth - x),\n Math.max(y, window.innerHeight - y),\n ));\n\n document.documentElement.style.setProperty('--vt-x', `${x}px`);\n document.documentElement.style.setProperty('--vt-y', `${y}px`);\n\n const transition = doc.startViewTransition(() =>\n new Promise<void>(resolve => {\n vtResolvers.set(this, resolve);\n this.renderedVariant = newVal;\n })\n );\n\n vtTransitions.set(this, transition);\n transition.finished.finally(() => {\n if (vtTransitions.get(this) === transition) vtTransitions.delete(this);\n vtResolvers.delete(this);\n });\n\n transition.ready.then(() => {\n const durToken = getComputedStyle(document.documentElement)\n .getPropertyValue('--effect-animation-duration-long-1').trim();\n const duration = parseCssTimeMs(durToken, 750);\n document.documentElement.animate(\n { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${maxR}px at ${x}px ${y}px)`] },\n { duration, easing: 'ease-in-out', fill: 'forwards', pseudoElement: '::view-transition-new(root)' },\n );\n }).catch(() => { /* transition was skipped or aborted */ });\n }\n\n componentWillLoad() {\n this.renderedVariant = this.variant;\n if (this.storageKey) {\n try {\n const stored = localStorage.getItem(this.storageKey);\n if (stored !== null) this.collapsed = stored === 'true';\n } catch { /* localStorage unavailable */ }\n }\n this.onGroupsChange(this.groups);\n this.syncActiveFromUrl();\n }\n\n componentDidLoad() {\n this.checkScroll();\n if (this.breakpoint > 0) this.connectResizeObserver();\n // Re-sync groups in case componentWillLoad ran before host bindings were applied\n // (common with Angular's property binding timing)\n this.onGroupsChange(this.groups);\n }\n\n componentDidRender() {\n // If a view transition callback is waiting for the render to complete,\n // resolve it now so the \"after\" snapshot is taken at exactly the right moment.\n const resolve = vtResolvers.get(this);\n if (resolve) {\n vtResolvers.delete(this);\n resolve();\n }\n }\n\n disconnectedCallback() {\n this.disconnectResizeObserver();\n this.clearEdgeOverlayTimer();\n if (this.globalMouseMoveHandler) {\n window.removeEventListener('mousemove', this.globalMouseMoveHandler);\n }\n if (this.globalMouseUpHandler) {\n window.removeEventListener('mouseup', this.globalMouseUpHandler);\n }\n }\n\n private startCollapseAnimation() {\n this.isAnimating = true;\n const panel = this.el.querySelector('.panel-nav') as HTMLElement | null;\n if (this.transitionEndHandler) {\n panel?.removeEventListener('transitionend', this.transitionEndHandler);\n }\n this.transitionEndHandler = (e: TransitionEvent) => {\n if (e.propertyName === 'width') {\n this.isAnimating = false;\n panel?.removeEventListener('transitionend', this.transitionEndHandler!);\n }\n };\n panel?.addEventListener('transitionend', this.transitionEndHandler);\n }\n\n private connectResizeObserver() {\n this.viewportNarrow = window.innerWidth < this.breakpoint;\n this.resizeObserver = new ResizeObserver(() => {\n this.viewportNarrow = window.innerWidth < this.breakpoint;\n });\n this.resizeObserver.observe(document.documentElement);\n }\n\n private disconnectResizeObserver() {\n this.resizeObserver?.disconnect();\n this.resizeObserver = undefined;\n }\n\n /** Derive active ID from the current URL by matching item `href` values.\n * Uses longest-prefix match so `/fleet/detail` correctly activates `/fleet`. */\n private syncActiveFromUrl() {\n if (!this.currentUrl) {\n this.urlDerivedActiveId = '';\n return;\n }\n let best: PanelNavItem | undefined;\n let bestLen = 0;\n for (const item of this.getAllItems()) {\n if (item.href && this.currentUrl.startsWith(item.href) && item.href.length > bestLen) {\n best = item;\n bestLen = item.href.length;\n }\n }\n this.urlDerivedActiveId = best?.id ?? '';\n }\n\n /** Centralised toggle: always emits `dsNavToggle`; when `storageKey` is set\n * also mutates `collapsed` directly and persists to `localStorage`. */\n private applyToggle(next: boolean) {\n this.dsNavToggle.emit(next);\n if (this.storageKey) {\n this.collapsed = next;\n try { localStorage.setItem(this.storageKey, String(next)); } catch { /* unavailable */ }\n }\n }\n\n private getAllItems(): PanelNavItem[] {\n return this.parsedGroups.flatMap(g => g.items);\n }\n\n private syncRovingIndex() {\n const idx = this.getAllItems().findIndex(i => i.id === this.effectiveActiveId);\n this.rovingIndex = idx >= 0 ? idx : 0;\n }\n\n private handleItemKeyDown(e: KeyboardEvent, index: number) {\n const total = this.getAllItems().length;\n let next: number;\n switch (e.key) {\n case 'ArrowDown': e.preventDefault(); next = (index + 1) % total; break;\n case 'ArrowUp': e.preventDefault(); next = (index - 1 + total) % total; break;\n case 'Home': e.preventDefault(); next = 0; break;\n case 'End': e.preventDefault(); next = total - 1; break;\n default: return;\n }\n this.rovingIndex = next;\n const items = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-nav__body .panel-nav__item')\n );\n items[next]?.focus();\n }\n\n private checkScroll() {\n const body = this.el.querySelector('.panel-nav__body') as HTMLElement | null;\n if (!body) return;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleBodyScroll(e: Event) {\n const body = e.target as HTMLElement;\n const remaining = body.scrollHeight - body.scrollTop - body.clientHeight;\n this.atBottom = remaining < 2;\n }\n\n private handleItemClick(id: string) {\n this.dsNavSelect.emit(id);\n }\n\n private handleToggle() {\n this.applyToggle(!this.collapsed);\n }\n\n private handleFooterAction() {\n this.dsNavFooterAction.emit();\n }\n\n private clearEdgeOverlayTimer() {\n if (this.edgeOverlayTimer !== null) {\n window.clearTimeout(this.edgeOverlayTimer);\n this.edgeOverlayTimer = null;\n }\n }\n\n private handleResizeHandleMouseEnter() {\n this.clearEdgeOverlayTimer();\n this.edgeOverlayTimer = window.setTimeout(() => {\n this.showEdgeOverlay = true;\n this.edgeOverlayTimer = null;\n }, 500);\n }\n\n private handleResizeHandleMouseLeave() {\n if (this.isDragging) return;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n }\n\n private handleResizeHandleMouseDown(e: MouseEvent) {\n e.preventDefault();\n e.stopPropagation();\n\n const wasCollapsed = this.collapsed || this.viewportNarrow;\n this.isDragging = true;\n this.dragStartX = e.clientX;\n this.didSnap = false;\n this.lastDeltaX = 0;\n this.clearEdgeOverlayTimer();\n this.showEdgeOverlay = false;\n\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n const onMove = (ev: MouseEvent) => {\n const deltaX = ev.clientX - this.dragStartX;\n this.lastDeltaX = Math.abs(deltaX);\n if (this.didSnap) return;\n if (!wasCollapsed && deltaX < -8) {\n this.applyToggle(true);\n this.didSnap = true;\n } else if (wasCollapsed && deltaX > 8) {\n this.applyToggle(false);\n this.didSnap = true;\n }\n };\n\n const onUp = () => {\n if (!this.didSnap && this.lastDeltaX < 3) {\n this.applyToggle(!wasCollapsed);\n }\n this.isDragging = false;\n this.showEdgeOverlay = false;\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n this.globalMouseMoveHandler = undefined;\n this.globalMouseUpHandler = undefined;\n };\n\n this.globalMouseMoveHandler = onMove;\n this.globalMouseUpHandler = onUp;\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n private renderNavItem(item: PanelNavItem, idx: number, collapsed: boolean) {\n const isActive = item.id === this.effectiveActiveId;\n\n const itemContent = [\n <span class=\"panel-nav__item-icon\">\n <ds-icon name={item.icon} size=\"md\" color=\"inherit\" flag={item.flag} />\n </span>,\n <span class=\"panel-nav__item-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text\n as=\"span\"\n variant={isActive ? 'text-body-medium-emphasis' : 'text-body-medium'}\n color=\"inherit\"\n >\n {item.label}\n </ds-text>\n </span>\n </span>,\n item.dot && <span class=\"panel-nav__item-dot\" aria-hidden=\"true\" />,\n ];\n\n const sharedProps = {\n class: { 'panel-nav__item': true, 'panel-nav__item--active': isActive },\n 'aria-current': isActive ? ('page' as const) : undefined,\n title: collapsed ? item.label : undefined,\n tabIndex: idx === this.rovingIndex ? 0 : -1,\n onClick: () => this.handleItemClick(item.id),\n onKeyDown: (e: KeyboardEvent) => this.handleItemKeyDown(e, idx),\n onFocus: () => { this.rovingIndex = idx; },\n };\n\n return item.href\n ? <a {...sharedProps} href={item.href}>{itemContent}</a>\n : <button {...sharedProps} type=\"button\">{itemContent}</button>;\n }\n\n render() {\n const isDashboard = this.renderedVariant === 'dashboard';\n const collapsed = this.collapsed || this.viewportNarrow;\n const { userName, userInitial } = this;\n\n const navCls: Record<string, boolean> = {\n 'panel-nav': true,\n 'panel-nav--dashboard': isDashboard,\n 'panel-nav--settings': !isDashboard,\n 'panel-nav--collapsed': collapsed,\n 'panel-nav--animating': this.isAnimating,\n 'panel-nav--at-bottom': this.atBottom,\n };\n\n return (\n <Host style={{ display: 'block', position: 'relative' }}>\n <nav class={navCls} aria-label={isDashboard ? 'Main navigation' : 'Settings navigation'}>\n\n {/* ── Header: Motive logo, reveals collapse toggle on hover ── */}\n <div class=\"panel-nav__header\">\n <button\n type=\"button\"\n class=\"panel-nav__header-btn\"\n onClick={() => this.handleToggle()}\n aria-label={collapsed ? 'Expand navigation' : 'Collapse navigation'}\n aria-expanded={collapsed ? 'false' : 'true'}\n >\n {/* Motive M mark — fades out on hover to reveal collapse toggle */}\n <span class=\"panel-nav__header-logo\" aria-hidden=\"true\">\n <svg class=\"panel-nav__m-mark\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" focusable=\"false\" aria-hidden=\"true\">\n <path 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\"/>\n </svg>\n </span>\n {/* Collapse / expand icon — revealed on hover via CSS */}\n <span class=\"panel-nav__header-toggle\" aria-hidden=\"true\">\n <ds-icon\n name={collapsed ? 'LeftExpandB' : 'LeftCollapseB'}\n size=\"md\"\n color=\"inherit\"\n />\n </span>\n </button>\n </div>\n\n {/* ── Scrollable body ── */}\n <div class=\"panel-nav__body\" onScroll={e => this.handleBodyScroll(e)}>\n {(() => {\n let flatIdx = 0;\n return this.parsedGroups.map(group => (\n <div class=\"panel-nav__group\">\n {group.label && (\n <span class=\"panel-nav__group-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {group.label}\n </ds-text>\n </span>\n </span>\n )}\n {group.items.map(item => this.renderNavItem(item, flatIdx++, collapsed))}\n </div>\n ));\n })()}\n </div>\n\n {/* ── Footer ── */}\n <div class=\"panel-nav__footer\">\n {/* Left icon button — Gear in dashboard, Dashboard in settings */}\n <button\n type=\"button\"\n class=\"panel-nav__footer-btn\"\n title={isDashboard ? 'Settings' : 'Dashboard'}\n aria-label={isDashboard ? 'Open settings' : 'Go to dashboard'}\n onClick={() => this.handleFooterAction()}\n >\n <ds-icon name={isDashboard ? 'Gear' : 'Dashboard'} size=\"md\" color=\"inherit\" />\n </button>\n\n {/* Right user — label fades like nav items; right icon cross-fades chevron ↔ circle+initial */}\n <button\n type=\"button\"\n class=\"panel-nav__item panel-nav__footer-user\"\n aria-label={collapsed ? `User: ${userName}` : `User menu for ${userName}`}\n >\n <span class=\"panel-nav__item-label panel-nav__footer-user-label\">\n <span class=\"panel-nav__item-label-text\">\n <ds-text as=\"span\" variant=\"text-body-medium-emphasis\" color=\"inherit\">\n {userName}\n </ds-text>\n </span>\n </span>\n <span class=\"panel-nav__item-icon panel-nav__footer-user-icon\" aria-hidden=\"true\">\n <span class=\"panel-nav__footer-icon-expanded\">\n <ds-icon name=\"ChevronUpDown\" size=\"md\" color=\"inherit\" />\n </span>\n <span class=\"panel-nav__footer-icon-collapsed\">\n <ds-icon name=\"Circle\" size=\"md\" color=\"inherit\" />\n <span class=\"panel-nav__user-initial\">\n <ds-text as=\"span\" variant=\"text-caption-emphasis\" color=\"inherit\">\n {userInitial}\n </ds-text>\n </span>\n </span>\n </span>\n </button>\n </div>\n\n </nav>\n\n {/* Drag-to-resize handle — always rendered, hidden only when auto-collapsed by breakpoint */}\n {!this.viewportNarrow && (\n <div\n class={{\n 'panel-nav__resize-handle': true,\n 'panel-nav__resize-handle--overlay': this.showEdgeOverlay,\n }}\n onMouseEnter={() => this.handleResizeHandleMouseEnter()}\n onMouseLeave={() => this.handleResizeHandleMouseLeave()}\n onMouseDown={(e: MouseEvent) => this.handleResizeHandleMouseDown(e)}\n aria-hidden=\"true\"\n />\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"
|
|
1
|
+
import{p as r,H as o,h as e,a,t as s}from"./index.js";const n=()=>`.surface.sc-ds-surface{box-sizing:border-box;position:relative;border:none;padding:0;margin:0;font:inherit;color:inherit;background:none;text-decoration:none;text-align:left;cursor:default;appearance:none;-webkit-appearance:none}.bg-primary.sc-ds-surface{background-color:var(--color-background-primary)}.bg-secondary.sc-ds-surface{background-color:var(--color-background-secondary)}.bg-transparent.sc-ds-surface{background-color:transparent}.bg-translucent.sc-ds-surface{background-color:var(--color-background-translucent);backdrop-filter:blur(var(--effect-blur-md));-webkit-backdrop-filter:blur(var(--effect-blur-md))}.intent-brand-faint.sc-ds-surface{background-color:var(--color-background-faint-brand)}.intent-brand-medium.sc-ds-surface{background-color:var(--color-background-medium-brand)}.intent-brand-bold.sc-ds-surface{background-color:var(--color-background-bold-brand)}.intent-brand-strong.sc-ds-surface{background-color:var(--color-background-strong-brand)}.intent-positive-faint.sc-ds-surface{background-color:var(--color-background-faint-positive)}.intent-positive-medium.sc-ds-surface{background-color:var(--color-background-medium-positive)}.intent-positive-bold.sc-ds-surface{background-color:var(--color-background-bold-positive)}.intent-positive-strong.sc-ds-surface{background-color:var(--color-background-strong-positive)}.intent-negative-faint.sc-ds-surface{background-color:var(--color-background-faint-negative)}.intent-negative-medium.sc-ds-surface{background-color:var(--color-background-medium-negative)}.intent-negative-bold.sc-ds-surface{background-color:var(--color-background-bold-negative)}.intent-negative-strong.sc-ds-surface{background-color:var(--color-background-strong-negative)}.intent-warning-faint.sc-ds-surface{background-color:var(--color-background-faint-warning)}.intent-warning-medium.sc-ds-surface{background-color:var(--color-background-medium-warning)}.intent-warning-bold.sc-ds-surface{background-color:var(--color-background-bold-warning)}.intent-warning-strong.sc-ds-surface{background-color:var(--color-background-strong-warning)}.intent-caution-faint.sc-ds-surface{background-color:var(--color-background-faint-caution)}.intent-caution-medium.sc-ds-surface{background-color:var(--color-background-medium-caution)}.intent-caution-bold.sc-ds-surface{background-color:var(--color-background-bold-caution)}.intent-caution-strong.sc-ds-surface{background-color:var(--color-background-strong-caution)}.intent-ai-faint.sc-ds-surface{background-color:var(--color-background-faint-ai)}.intent-ai-medium.sc-ds-surface{background-color:var(--color-background-medium-ai)}.intent-ai-bold.sc-ds-surface{background-color:var(--color-background-bold-ai)}.intent-ai-strong.sc-ds-surface{background-color:var(--color-background-strong-ai)}.intent-neutral-faint.sc-ds-surface{background-color:var(--color-background-faint-neutral)}.intent-neutral-medium.sc-ds-surface{background-color:var(--color-background-medium-neutral)}.intent-neutral-bold.sc-ds-surface{background-color:var(--color-background-bold-neutral)}.intent-neutral-strong.sc-ds-surface{background-color:var(--color-background-strong-neutral)}.intent-walkthrough-faint.sc-ds-surface{background-color:var(--color-background-faint-walkthrough)}.intent-walkthrough-medium.sc-ds-surface{background-color:var(--color-background-medium-walkthrough)}.intent-walkthrough-bold.sc-ds-surface{background-color:var(--color-background-bold-walkthrough)}.intent-walkthrough-strong.sc-ds-surface{background-color:var(--color-background-strong-walkthrough)}.intent-guide-faint.sc-ds-surface{background-color:var(--color-background-faint-guide)}.intent-guide-medium.sc-ds-surface{background-color:var(--color-background-medium-guide)}.intent-guide-bold.sc-ds-surface{background-color:var(--color-background-bold-guide)}.intent-guide-strong.sc-ds-surface{background-color:var(--color-background-strong-guide)}.elevation-depressed.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-sm)}.elevation-depressed-md.sc-ds-surface{box-shadow:var(--effect-elevation-depressed-md)}.elevation-flat.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-sm)}.elevation-elevated.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-md)}.elevation-floating.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-floating)}.elevation-overlayTop.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-top)}.elevation-overlayRight.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-right)}.elevation-overlayBottom.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-bottom)}.elevation-overlayLeft.sc-ds-surface{box-shadow:var(--effect-elevation-elevated-panel-left)}.edge-top.sc-ds-surface{border-top:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-right.sc-ds-surface{border-right:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-bottom.sc-ds-surface{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.edge-left.sc-ds-surface{border-left:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.radius-none.sc-ds-surface{border-radius:var(--dimension-radius-000)}.radius-xs.sc-ds-surface{border-radius:var(--dimension-radius-050)}.radius-sm.sc-ds-surface{border-radius:var(--dimension-radius-075)}.radius-md.sc-ds-surface{border-radius:var(--dimension-radius-100)}.radius-lg.sc-ds-surface{border-radius:var(--dimension-radius-125)}.radius-xl.sc-ds-surface{border-radius:var(--dimension-radius-175)}.radius-2xl.sc-ds-surface{border-radius:var(--dimension-radius-200)}.radius-full.sc-ds-surface{border-radius:var(--dimension-radius-half)}.interactive.sc-ds-surface{cursor:pointer;transition:transform var(--effect-motion-short-2);--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed)}.interactive.sc-ds-surface:hover{background-color:var(--_hover-bg)}.interactive.sc-ds-surface:active{background-color:var(--_pressed-bg);transform:scale(var(--dimension-scale-subtle))}.interactive.sc-ds-surface:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}.selected.sc-ds-surface::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background-color:var(--color-interaction-hover)}.selected.sc-ds-surface>*.sc-ds-surface{position:relative;z-index:1}.inactive.sc-ds-surface{opacity:0.5;cursor:not-allowed;pointer-events:none}`;const c=new Set(["none","xs","sm","md","lg","xl","2xl","full"]);const t=r(class r extends o{constructor(r){super();if(r!==false){this.__registerHost()}this.background="transparent";this.contrast="faint";this.elevation="none";this.interactive=false;this.selected=false;this.inactive=false;this.as="div"}render(){const r=this.as;const o=this.intent?`intent-${this.intent}-${this.contrast}`:`bg-${this.background}`;const s=`elevation-${this.elevation}`;const n=this.edge&&this.elevation==="none"?this.edge.trim().split(/\s+/).map((r=>`edge-${r}`)):[];const t=this.radius&&c.has(this.radius)?`radius-${this.radius}`:"";const d=this.radius&&!c.has(this.radius)?this.radius:undefined;const i=["surface",o,s,...n,t,this.interactive?"interactive":"",this.selected?"selected":"",this.inactive?"inactive":""].filter(Boolean).join(" ");return e(a,{key:"9746e64e9219bbd6dec8ee748b185b53a4438872",style:{display:"contents"}},e(r,{key:"bc8f055e5db0f71dd4768ced405007cb2f6126be",class:i,style:d?{borderRadius:d}:undefined},e("slot",{key:"f7211bb8547e79b383076cd13211a46805dd58e5"})))}static get style(){return n()}},[262,"ds-surface",{background:[1],intent:[1],contrast:[1],elevation:[1],edge:[1],radius:[1],interactive:[4],selected:[4],inactive:[4],as:[1]}]);function d(){if(typeof customElements==="undefined"){return}const r=["ds-surface"];r.forEach((r=>{switch(r){case"ds-surface":if(!customElements.get(s(r))){customElements.define(s(r),t)}break}}))}d();const i=t;const u=d;export{i as DsSurface,u as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-surface.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["surfaceCss","RADIUS_PRESETS","Set","Surface","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","contrast","elevation","interactive","selected","inactive","as","render","Tag","intentClass","intent","elevClass","edgeClasses","edge","trim","split","map","e","radiusClass","radius","has","customRadius","undefined","cls","filter","Boolean","join","h","Host","key","style","display","class","borderRadius"],"sources":["src/wc/components/Surface/Surface.css?tag=ds-surface&encapsulation=scoped","src/wc/components/Surface/Surface.tsx"],"sourcesContent":[".surface {\n box-sizing: border-box;\n position: relative;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n background: none;\n text-decoration: none;\n text-align: left;\n cursor: default;\n appearance: none;\n -webkit-appearance: none;\n}\n\n/* Backgrounds */\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/* Intent × Contrast */\n.intent-brand-faint { background-color: var(--color-background-faint-brand); }\n.intent-brand-medium { background-color: var(--color-background-medium-brand); }\n.intent-brand-bold { background-color: var(--color-background-bold-brand); }\n.intent-brand-strong { background-color: var(--color-background-strong-brand); }\n.intent-positive-faint { background-color: var(--color-background-faint-positive); }\n.intent-positive-medium { background-color: var(--color-background-medium-positive); }\n.intent-positive-bold { background-color: var(--color-background-bold-positive); }\n.intent-positive-strong { background-color: var(--color-background-strong-positive); }\n.intent-negative-faint { background-color: var(--color-background-faint-negative); }\n.intent-negative-medium { background-color: var(--color-background-medium-negative); }\n.intent-negative-bold { background-color: var(--color-background-bold-negative); }\n.intent-negative-strong { background-color: var(--color-background-strong-negative); }\n.intent-warning-faint { background-color: var(--color-background-faint-warning); }\n.intent-warning-medium { background-color: var(--color-background-medium-warning); }\n.intent-warning-bold { background-color: var(--color-background-bold-warning); }\n.intent-warning-strong { background-color: var(--color-background-strong-warning); }\n.intent-caution-faint { background-color: var(--color-background-faint-caution); }\n.intent-caution-medium { background-color: var(--color-background-medium-caution); }\n.intent-caution-bold { background-color: var(--color-background-bold-caution); }\n.intent-caution-strong { background-color: var(--color-background-strong-caution); }\n.intent-ai-faint { background-color: var(--color-background-faint-ai); }\n.intent-ai-medium { background-color: var(--color-background-medium-ai); }\n.intent-ai-bold { background-color: var(--color-background-bold-ai); }\n.intent-ai-strong { background-color: var(--color-background-strong-ai); }\n.intent-neutral-faint { background-color: var(--color-background-faint-neutral); }\n.intent-neutral-medium { background-color: var(--color-background-medium-neutral); }\n.intent-neutral-bold { background-color: var(--color-background-bold-neutral); }\n.intent-neutral-strong { background-color: var(--color-background-strong-neutral); }\n.intent-walkthrough-faint { background-color: var(--color-background-faint-walkthrough); }\n.intent-walkthrough-medium { background-color: var(--color-background-medium-walkthrough); }\n.intent-walkthrough-bold { background-color: var(--color-background-bold-walkthrough); }\n.intent-walkthrough-strong { background-color: var(--color-background-strong-walkthrough); }\n.intent-guide-faint { background-color: var(--color-background-faint-guide); }\n.intent-guide-medium { background-color: var(--color-background-medium-guide); }\n.intent-guide-bold { background-color: var(--color-background-bold-guide); }\n.intent-guide-strong { background-color: var(--color-background-strong-guide); }\n\n/* Elevation */\n.elevation-none {}\n.elevation-depressed { box-shadow: var(--effect-elevation-depressed-sm); }\n.elevation-depressed-md { box-shadow: var(--effect-elevation-depressed-md); }\n.elevation-flat { box-shadow: var(--effect-elevation-elevated-sm); }\n.elevation-elevated { box-shadow: var(--effect-elevation-elevated-md); }\n.elevation-floating { box-shadow: var(--effect-elevation-elevated-floating); }\n.elevation-overlayTop { box-shadow: var(--effect-elevation-elevated-panel-top); }\n.elevation-overlayRight { box-shadow: var(--effect-elevation-elevated-panel-right); }\n.elevation-overlayBottom { box-shadow: var(--effect-elevation-elevated-panel-bottom); }\n.elevation-overlayLeft { box-shadow: var(--effect-elevation-elevated-panel-left); }\n\n/* Edges */\n.edge-top { border-top: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-right { border-right: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-bottom { border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-left { border-left: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n\n/* Radius */\n.radius-none { border-radius: var(--dimension-radius-000); }\n.radius-xs { border-radius: var(--dimension-radius-050); }\n.radius-sm { border-radius: var(--dimension-radius-075); }\n.radius-md { border-radius: var(--dimension-radius-100); }\n.radius-lg { border-radius: var(--dimension-radius-125); }\n.radius-xl { border-radius: var(--dimension-radius-175); }\n.radius-2xl { border-radius: var(--dimension-radius-200); }\n.radius-full { border-radius: var(--dimension-radius-half); }\n\n/* Interactive */\n.interactive {\n cursor: pointer;\n transition: transform var(--effect-motion-short-2);\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n}\n.interactive:hover { background-color: var(--_hover-bg); }\n.interactive:active { background-color: var(--_pressed-bg); transform: scale(var(--dimension-scale-subtle)); }\n.interactive:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n/* Selected */\n.selected::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n z-index: 0;\n background-color: var(--color-interaction-hover);\n}\n.selected > * { position: relative; z-index: 1; }\n\n/* Inactive */\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SurfaceIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\nexport type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\nexport type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';\nexport type SurfaceElevation =\n | 'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating'\n | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft';\nexport type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';\nexport type SurfaceRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});\nexport type SurfaceElement = 'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span';\n\nconst RADIUS_PRESETS = new Set(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']);\n\n@Component({\n tag: 'ds-surface',\n styleUrl: 'Surface.css',\n scoped: true,\n})\nexport class Surface {\n @Prop() background: SurfaceBackground = 'transparent';\n @Prop() intent: SurfaceIntent | undefined;\n @Prop() contrast: SurfaceContrast = 'faint';\n @Prop() elevation: SurfaceElevation = 'none';\n /** Space-separated list of edges: \"top bottom\" etc. Only applies when elevation='none'. */\n @Prop() edge: string | undefined;\n @Prop() radius: SurfaceRadius | undefined;\n @Prop() interactive: boolean = false;\n @Prop() selected: boolean = false;\n @Prop() inactive: boolean = false;\n @Prop() as: SurfaceElement = 'div';\n\n render() {\n const Tag = this.as as any;\n\n const intentClass = this.intent\n ? `intent-${this.intent}-${this.contrast}`\n : `bg-${this.background}`;\n\n const elevClass = `elevation-${this.elevation}`;\n\n const edgeClasses = this.edge && this.elevation === 'none'\n ? this.edge.trim().split(/\\s+/).map(e => `edge-${e}`)\n : [];\n\n const radiusClass = this.radius && RADIUS_PRESETS.has(this.radius)\n ? `radius-${this.radius}`\n : '';\n\n const customRadius = this.radius && !RADIUS_PRESETS.has(this.radius)\n ? this.radius\n : undefined;\n\n const cls = [\n 'surface',\n intentClass,\n elevClass,\n ...edgeClasses,\n radiusClass,\n this.interactive ? 'interactive' : '',\n this.selected ? 'selected' : '',\n this.inactive ? 'inactive' : '',\n ].filter(Boolean).join(' ');\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag\n class={cls}\n style={customRadius ? { borderRadius: customRadius } : undefined}\n >\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAa,IAAM,01MCczB,MAAMC,EAAiB,IAAIC,IAAI,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,S,MAOhEC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAMUC,KAAAC,WAAgC,cAEhCD,KAAAE,SAA4B,QAC5BF,KAAAG,UAA8B,OAI9BH,KAAAI,YAAuB,MACvBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACpBN,KAAAO,GAAqB,KA6C9B,CA3CC,MAAAC,GACE,MAAMC,EAAMT,KAAKO,GAEjB,MAAMG,EAAcV,KAAKW,OACrB,UAAUX,KAAKW,UAAUX,KAAKE,WAC9B,MAAMF,KAAKC,aAEf,MAAMW,EAAY,aAAaZ,KAAKG,YAEpC,MAAMU,EAAcb,KAAKc,MAAQd,KAAKG,YAAc,OAChDH,KAAKc,KAAKC,OAAOC,MAAM,OAAOC,KAAIC,GAAK,QAAQA,MAC/C,GAEJ,MAAMC,EAAcnB,KAAKoB,QAAU3B,EAAe4B,IAAIrB,KAAKoB,QACvD,UAAUpB,KAAKoB,SACf,GAEJ,MAAME,EAAetB,KAAKoB,SAAW3B,EAAe4B,IAAIrB,KAAKoB,QACzDpB,KAAKoB,OACLG,UAEJ,MAAMC,EAAM,CACV,UACAd,EACAE,KACGC,EACHM,EACAnB,KAAKI,YAAc,cAAgB,GACnCJ,KAAKK,SAAW,WAAa,GAC7BL,KAAKM,SAAW,WAAa,IAC7BmB,OAAOC,SAASC,KAAK,KAEvB,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,QAAS,aACtBJ,EAACnB,EAAG,CAAAqB,IAAA,2CACFG,MAAOT,EACPO,MAAOT,EAAe,CAAEY,aAAcZ,GAAiBC,WAEvDK,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["surfaceCss","RADIUS_PRESETS","Set","Surface","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","background","contrast","elevation","interactive","selected","inactive","as","render","Tag","intentClass","intent","elevClass","edgeClasses","edge","trim","split","map","e","radiusClass","radius","has","customRadius","undefined","cls","filter","Boolean","join","h","Host","key","style","display","class","borderRadius"],"sources":["src/wc/components/Surface/Surface.css?tag=ds-surface&encapsulation=scoped","src/wc/components/Surface/Surface.tsx"],"sourcesContent":[".surface {\n box-sizing: border-box;\n position: relative;\n border: none;\n padding: 0;\n margin: 0;\n font: inherit;\n color: inherit;\n background: none;\n text-decoration: none;\n text-align: left;\n cursor: default;\n appearance: none;\n -webkit-appearance: none;\n}\n\n/* Backgrounds */\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/* Intent × Contrast */\n.intent-brand-faint { background-color: var(--color-background-faint-brand); }\n.intent-brand-medium { background-color: var(--color-background-medium-brand); }\n.intent-brand-bold { background-color: var(--color-background-bold-brand); }\n.intent-brand-strong { background-color: var(--color-background-strong-brand); }\n.intent-positive-faint { background-color: var(--color-background-faint-positive); }\n.intent-positive-medium { background-color: var(--color-background-medium-positive); }\n.intent-positive-bold { background-color: var(--color-background-bold-positive); }\n.intent-positive-strong { background-color: var(--color-background-strong-positive); }\n.intent-negative-faint { background-color: var(--color-background-faint-negative); }\n.intent-negative-medium { background-color: var(--color-background-medium-negative); }\n.intent-negative-bold { background-color: var(--color-background-bold-negative); }\n.intent-negative-strong { background-color: var(--color-background-strong-negative); }\n.intent-warning-faint { background-color: var(--color-background-faint-warning); }\n.intent-warning-medium { background-color: var(--color-background-medium-warning); }\n.intent-warning-bold { background-color: var(--color-background-bold-warning); }\n.intent-warning-strong { background-color: var(--color-background-strong-warning); }\n.intent-caution-faint { background-color: var(--color-background-faint-caution); }\n.intent-caution-medium { background-color: var(--color-background-medium-caution); }\n.intent-caution-bold { background-color: var(--color-background-bold-caution); }\n.intent-caution-strong { background-color: var(--color-background-strong-caution); }\n.intent-ai-faint { background-color: var(--color-background-faint-ai); }\n.intent-ai-medium { background-color: var(--color-background-medium-ai); }\n.intent-ai-bold { background-color: var(--color-background-bold-ai); }\n.intent-ai-strong { background-color: var(--color-background-strong-ai); }\n.intent-neutral-faint { background-color: var(--color-background-faint-neutral); }\n.intent-neutral-medium { background-color: var(--color-background-medium-neutral); }\n.intent-neutral-bold { background-color: var(--color-background-bold-neutral); }\n.intent-neutral-strong { background-color: var(--color-background-strong-neutral); }\n.intent-walkthrough-faint { background-color: var(--color-background-faint-walkthrough); }\n.intent-walkthrough-medium { background-color: var(--color-background-medium-walkthrough); }\n.intent-walkthrough-bold { background-color: var(--color-background-bold-walkthrough); }\n.intent-walkthrough-strong { background-color: var(--color-background-strong-walkthrough); }\n.intent-guide-faint { background-color: var(--color-background-faint-guide); }\n.intent-guide-medium { background-color: var(--color-background-medium-guide); }\n.intent-guide-bold { background-color: var(--color-background-bold-guide); }\n.intent-guide-strong { background-color: var(--color-background-strong-guide); }\n\n/* Elevation */\n.elevation-none {}\n.elevation-depressed { box-shadow: var(--effect-elevation-depressed-sm); }\n.elevation-depressed-md { box-shadow: var(--effect-elevation-depressed-md); }\n.elevation-flat { box-shadow: var(--effect-elevation-elevated-sm); }\n.elevation-elevated { box-shadow: var(--effect-elevation-elevated-md); }\n.elevation-floating { box-shadow: var(--effect-elevation-elevated-floating); }\n.elevation-overlayTop { box-shadow: var(--effect-elevation-elevated-panel-top); }\n.elevation-overlayRight { box-shadow: var(--effect-elevation-elevated-panel-right); }\n.elevation-overlayBottom { box-shadow: var(--effect-elevation-elevated-panel-bottom); }\n.elevation-overlayLeft { box-shadow: var(--effect-elevation-elevated-panel-left); }\n\n/* Edges */\n.edge-top { border-top: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-right { border-right: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-bottom { border-bottom: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n.edge-left { border-left: var(--dimension-stroke-width-015) solid var(--color-border-tertiary); }\n\n/* Radius */\n.radius-none { border-radius: var(--dimension-radius-000); }\n.radius-xs { border-radius: var(--dimension-radius-050); }\n.radius-sm { border-radius: var(--dimension-radius-075); }\n.radius-md { border-radius: var(--dimension-radius-100); }\n.radius-lg { border-radius: var(--dimension-radius-125); }\n.radius-xl { border-radius: var(--dimension-radius-175); }\n.radius-2xl { border-radius: var(--dimension-radius-200); }\n.radius-full { border-radius: var(--dimension-radius-half); }\n\n/* Interactive */\n.interactive {\n cursor: pointer;\n transition: transform var(--effect-motion-short-2);\n --_hover-bg: var(--color-interaction-hover);\n --_pressed-bg: var(--color-interaction-pressed);\n}\n.interactive:hover { background-color: var(--_hover-bg); }\n.interactive:active { background-color: var(--_pressed-bg); transform: scale(var(--dimension-scale-subtle)); }\n.interactive:focus-visible {\n outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);\n outline-offset: var(--dimension-space-025);\n}\n\n/* Selected */\n.selected::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: inherit;\n pointer-events: none;\n z-index: 0;\n background-color: var(--color-interaction-hover);\n}\n.selected > * { position: relative; z-index: 1; }\n\n/* Inactive */\n.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type SurfaceIntent =\n | 'brand' | 'positive' | 'negative' | 'warning' | 'caution'\n | 'ai' | 'neutral' | 'walkthrough' | 'guide';\nexport type SurfaceBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';\nexport type SurfaceContrast = 'faint' | 'medium' | 'bold' | 'strong';\nexport type SurfaceElevation =\n | 'none' | 'depressed' | 'depressed-md' | 'flat' | 'elevated' | 'floating'\n | 'overlayTop' | 'overlayRight' | 'overlayBottom' | 'overlayLeft';\nexport type SurfaceEdge = 'top' | 'right' | 'bottom' | 'left';\nexport type SurfaceRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' | (string & {});\nexport type SurfaceElement = 'div' | 'section' | 'aside' | 'article' | 'header' | 'footer' | 'main' | 'nav' | 'span';\n\nconst RADIUS_PRESETS = new Set(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']);\n\n@Component({\n tag: 'ds-surface',\n styleUrl: 'Surface.css',\n scoped: true,\n})\nexport class Surface {\n @Prop() background: SurfaceBackground = 'transparent';\n @Prop() intent: SurfaceIntent | undefined;\n @Prop() contrast: SurfaceContrast = 'faint';\n @Prop() elevation: SurfaceElevation = 'none';\n /** Space-separated list of edges: \"top bottom\" etc. Only applies when elevation='none'. */\n @Prop() edge: string | undefined;\n @Prop() radius: SurfaceRadius | undefined;\n @Prop() interactive: boolean = false;\n @Prop() selected: boolean = false;\n @Prop() inactive: boolean = false;\n @Prop() as: SurfaceElement = 'div';\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n\n const intentClass = this.intent\n ? `intent-${this.intent}-${this.contrast}`\n : `bg-${this.background}`;\n\n const elevClass = `elevation-${this.elevation}`;\n\n const edgeClasses = this.edge && this.elevation === 'none'\n ? this.edge.trim().split(/\\s+/).map(e => `edge-${e}`)\n : [];\n\n const radiusClass = this.radius && RADIUS_PRESETS.has(this.radius)\n ? `radius-${this.radius}`\n : '';\n\n const customRadius = this.radius && !RADIUS_PRESETS.has(this.radius)\n ? this.radius\n : undefined;\n\n const cls = [\n 'surface',\n intentClass,\n elevClass,\n ...edgeClasses,\n radiusClass,\n this.interactive ? 'interactive' : '',\n this.selected ? 'selected' : '',\n this.inactive ? 'inactive' : '',\n ].filter(Boolean).join(' ');\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag\n class={cls}\n style={customRadius ? { borderRadius: customRadius } : undefined}\n >\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"sDAAA,MAAMA,EAAa,IAAM,01MCczB,MAAMC,EAAiB,IAAIC,IAAI,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,MAAO,S,MAOhEC,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAMUC,KAAAC,WAAgC,cAEhCD,KAAAE,SAA4B,QAC5BF,KAAAG,UAA8B,OAI9BH,KAAAI,YAAuB,MACvBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACpBN,KAAAO,GAAqB,KAgD9B,CA9CC,MAAAC,GAIE,MAAMC,EAAMT,KAAKO,GAEjB,MAAMG,EAAcV,KAAKW,OACrB,UAAUX,KAAKW,UAAUX,KAAKE,WAC9B,MAAMF,KAAKC,aAEf,MAAMW,EAAY,aAAaZ,KAAKG,YAEpC,MAAMU,EAAcb,KAAKc,MAAQd,KAAKG,YAAc,OAChDH,KAAKc,KAAKC,OAAOC,MAAM,OAAOC,KAAIC,GAAK,QAAQA,MAC/C,GAEJ,MAAMC,EAAcnB,KAAKoB,QAAU3B,EAAe4B,IAAIrB,KAAKoB,QACvD,UAAUpB,KAAKoB,SACf,GAEJ,MAAME,EAAetB,KAAKoB,SAAW3B,EAAe4B,IAAIrB,KAAKoB,QACzDpB,KAAKoB,OACLG,UAEJ,MAAMC,EAAM,CACV,UACAd,EACAE,KACGC,EACHM,EACAnB,KAAKI,YAAc,cAAgB,GACnCJ,KAAKK,SAAW,WAAa,GAC7BL,KAAKM,SAAW,WAAa,IAC7BmB,OAAOC,SAASC,KAAK,KAEvB,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEC,QAAS,aACtBJ,EAACnB,EAAG,CAAAqB,IAAA,2CACFG,MAAOT,EACPO,MAAOT,EAAe,CAAEY,aAAcZ,GAAiBC,WAEvDK,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{T as o,d as s}from"./p-
|
|
1
|
+
import{T as o,d as s}from"./p-Leo9RPok.js";const t=o;const p=s;export{t as DsText,p as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-text.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"e0927b3ad6fc615d3bcb2285b76ca0044670d7c5",style:{display:"contents"}},s("div",{key:"
|
|
1
|
+
import{p as t,H as e,h as s,a as i,t as o}from"./index.js";let n=[];const r=new Set;let a=0;function c(){r.forEach((t=>t()))}function d(t){r.add(t);return()=>r.delete(t)}function l(){return n}const u={show(t){const e=`ds-toast-${++a}`;n=[...n,{id:e,intent:"neutral",duration:4e3,...t}];c();return e},success(t,e){return u.show({message:t,intent:"positive",...e})},error(t,e){return u.show({message:t,intent:"negative",...e})},warning(t,e){return u.show({message:t,intent:"warning",...e})},info(t,e){return u.show({message:t,intent:"neutral",...e})},dismiss(t){n=n.filter((e=>e.id!==t));c()},dismissAll(){n=[];c()}};const m=()=>`.toast.sc-ds-toast-provider{animation:toastSlideIn var(--effect-motion-short-3) ease-out;width:100%;max-width:420px}.toast--exit.sc-ds-toast-provider{animation:toastFadeOut 200ms ease-in forwards}.toast-dismiss.sc-ds-toast-provider{background:none;border:none;color:inherit;cursor:pointer;padding:var(--dimension-space-025);margin-left:auto;font-size:16px;line-height:1;opacity:0.7;border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);flex-shrink:0}.toast-dismiss.sc-ds-toast-provider:hover{opacity:1}@keyframes toastSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastFadeOut{from{opacity:1}to{opacity:0}}`;const p={neutral:"var(--color-background-bold-neutral)",brand:"var(--color-background-bold-brand)",positive:"var(--color-background-bold-positive)",negative:"var(--color-background-bold-negative)",warning:"var(--color-background-bold-warning)",caution:"var(--color-background-bold-caution)"};const f=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.position="top-center";this.items=[];this.unsubscribe=null}connectedCallback(){this.unsubscribe=d((()=>this.syncFromStore()));this.syncFromStore()}disconnectedCallback(){this.items.forEach((t=>{if(t.timer)clearTimeout(t.timer)}));this.unsubscribe?.()}syncFromStore(){const t=l();const e=new Set(this.items.map((t=>t.data.id)));const s=new Set(t.map((t=>t.id)));const i=this.items.filter((t=>s.has(t.data.id)));const o=t.filter((t=>!e.has(t.id))).map((t=>{const e={data:t,exiting:false,timer:null,remaining:t.duration,startedAt:0,paused:false};if(t.duration>0){e.startedAt=Date.now();e.timer=setTimeout((()=>this.dismissItem(t.id)),t.duration)}return e}));this.items=[...i,...o]}dismissItem(t){this.items=this.items.map((e=>e.data.id===t?{...e,exiting:true,timer:null}:e));setTimeout((()=>{this.items=this.items.filter((e=>e.data.id!==t));u.dismiss(t)}),200)}pauseItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||e.paused||!e.timer)return e;clearTimeout(e.timer);const s=Date.now()-e.startedAt;return{...e,paused:true,timer:null,remaining:Math.max(0,e.remaining-s)}}))}resumeItem(t){this.items=this.items.map((e=>{if(e.data.id!==t||!e.paused||e.remaining<=0)return e;const s=setTimeout((()=>this.dismissItem(t)),e.remaining);return{...e,paused:false,timer:s,startedAt:Date.now()}}))}getPositionStyle(){const t={position:"fixed",zIndex:"9999",display:"flex",flexDirection:"column",gap:"var(--dimension-space-075)",pointerEvents:"none",padding:"var(--dimension-space-100)",maxWidth:"480px",width:"100%",boxSizing:"border-box"};switch(this.position){case"top-center":return{...t,top:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"top-right":return{...t,top:"0",right:"0",alignItems:"flex-end"};case"bottom-center":return{...t,bottom:"0",left:"50%",transform:"translateX(-50%)",alignItems:"center"};case"bottom-right":return{...t,bottom:"0",right:"0",alignItems:"flex-end"}}}render(){return s(i,{key:"e0927b3ad6fc615d3bcb2285b76ca0044670d7c5",style:{display:"contents"}},s("div",{key:"d86b3a380eea51d08ef551854a62ca3e64f4088c",class:"toast-container",role:"region","aria-label":"Notifications","aria-live":"polite",style:this.getPositionStyle()},this.items.map((t=>s("div",{key:t.data.id,class:{toast:true,"toast--exit":t.exiting},role:t.data.intent==="negative"?"alert":"status",style:{backgroundColor:p[t.data.intent],borderRadius:"var(--dimension-radius-125)",boxShadow:"var(--effect-elevation-elevated-floating)",display:"flex",alignItems:"center",gap:"var(--dimension-space-075)",padding:"var(--dimension-space-075) var(--dimension-space-100)",minHeight:"var(--dimension-size-400)",pointerEvents:"auto",color:"var(--color-foreground-on-bold-background-primary)",boxSizing:"border-box"},onMouseEnter:()=>this.pauseItem(t.data.id),onMouseLeave:()=>this.resumeItem(t.data.id)},s("span",{class:"text-body-medium",style:{flex:"1"}},t.data.message),s("button",{type:"button",class:"toast-dismiss",onClick:()=>this.dismissItem(t.data.id),"aria-label":"Dismiss"},"×"))))))}static get style(){return m()}},[2,"ds-toast-provider",{position:[1],items:[32]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-toast-provider"];t.forEach((t=>{switch(t){case"ds-toast-provider":if(!customElements.get(o(t))){customElements.define(o(t),f)}break}}))}g();const h=f;const b=g;export{h as DsToastProvider,b as defineCustomElement};
|
|
2
2
|
//# sourceMappingURL=ds-toast-provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","toast","show","options","id","intent","duration","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n id: string;\n message: string;\n intent: ToastIntent;\n duration: number;\n}\n\nexport interface ToastOptions {\n message: string;\n intent?: ToastIntent;\n duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n listeners.add(fn);\n return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n return toasts;\n}\n\nexport const toast = {\n show(options: ToastOptions): string {\n const id = `ds-toast-${++idCounter}`;\n toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];\n emit();\n return id;\n },\n success(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'positive', ...options });\n },\n error(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'negative', ...options });\n },\n warning(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'warning', ...options });\n },\n info(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'neutral', ...options });\n },\n dismiss(id: string) {\n toasts = toasts.filter(t => t.id !== id);\n emit();\n },\n dismissAll() {\n toasts = [];\n emit();\n },\n};\n",".toast {\n animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n width: 100%;\n max-width: 420px;\n}\n\n.toast--exit {\n animation: toastFadeOut 200ms ease-in forwards;\n}\n\n.toast-dismiss {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n padding: var(--dimension-space-025);\n margin-left: auto;\n font-size: 16px;\n line-height: 1;\n opacity: 0.7;\n border-radius: var(--dimension-radius-050);\n transition: opacity var(--effect-motion-short-2);\n flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n neutral: 'var(--color-background-bold-neutral)',\n brand: 'var(--color-background-bold-brand)',\n positive: 'var(--color-background-bold-positive)',\n negative: 'var(--color-background-bold-negative)',\n warning: 'var(--color-background-bold-warning)',\n caution: 'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n data: ToastData;\n exiting: boolean;\n timer: ReturnType<typeof setTimeout> | null;\n remaining: number;\n startedAt: number;\n paused: boolean;\n}\n\n@Component({\n tag: 'ds-toast-provider',\n styleUrl: 'Toast.css',\n scoped: true,\n})\nexport class ToastProvider {\n @Prop() position: ToastPosition = 'top-center';\n\n @State() private items: ToastItemState[] = [];\n\n private unsubscribe: (() => void) | null = null;\n\n connectedCallback() {\n this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n this.syncFromStore();\n }\n\n disconnectedCallback() {\n this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n this.unsubscribe?.();\n }\n\n private syncFromStore() {\n const storeToasts = getToasts();\n const existingIds = new Set(this.items.map(i => i.data.id));\n const storeIds = new Set(storeToasts.map(t => t.id));\n\n // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n // Add new items\n const newItems: ToastItemState[] = storeToasts\n .filter(t => !existingIds.has(t.id))\n .map(data => {\n const state: ToastItemState = {\n data,\n exiting: false,\n timer: null,\n remaining: data.duration,\n startedAt: 0,\n paused: false,\n };\n if (data.duration > 0) {\n state.startedAt = Date.now();\n state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n }\n return state;\n });\n\n this.items = [...kept, ...newItems];\n }\n\n private dismissItem(id: string) {\n this.items = this.items.map(i =>\n i.data.id === id ? { ...i, exiting: true, timer: null } : i\n );\n setTimeout(() => {\n this.items = this.items.filter(i => i.data.id !== id);\n toastService.dismiss(id);\n }, 200);\n }\n\n private pauseItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || i.paused || !i.timer) return i;\n clearTimeout(i.timer);\n const elapsed = Date.now() - i.startedAt;\n return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n });\n }\n\n private resumeItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n return { ...i, paused: false, timer, startedAt: Date.now() };\n });\n }\n\n private getPositionStyle(): Record<string, string> {\n const base: Record<string, string> = {\n position: 'fixed',\n zIndex: '9999',\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--dimension-space-075)',\n pointerEvents: 'none',\n padding: 'var(--dimension-space-100)',\n maxWidth: '480px',\n width: '100%',\n boxSizing: 'border-box',\n };\n switch (this.position) {\n case 'top-center':\n return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'top-right':\n return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n case 'bottom-center':\n return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'bottom-right':\n return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n }\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class=\"toast-container\"\n role=\"region\"\n aria-label=\"Notifications\"\n aria-live=\"polite\"\n style={this.getPositionStyle() as any}\n >\n {this.items.map(item => (\n <div\n key={item.data.id}\n class={{ toast: true, 'toast--exit': item.exiting }}\n role={item.data.intent === 'negative' ? 'alert' : 'status'}\n style={{\n backgroundColor: INTENT_BG[item.data.intent],\n borderRadius: 'var(--dimension-radius-125)',\n boxShadow: 'var(--effect-elevation-elevated-floating)',\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--dimension-space-075)',\n padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n minHeight: 'var(--dimension-size-400)',\n pointerEvents: 'auto',\n color: 'var(--color-foreground-on-bold-background-primary)',\n boxSizing: 'border-box',\n }}\n onMouseEnter={() => this.pauseItem(item.data.id)}\n onMouseLeave={() => this.resumeItem(item.data.id)}\n >\n <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n <button\n type=\"button\"\n class=\"toast-dismiss\"\n onClick={() => this.dismissItem(item.data.id)}\n aria-label=\"Dismiss\"\n >\n ×\n </button>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["toasts","listeners","Set","idCounter","emit","forEach","fn","subscribeToToasts","add","delete","getToasts","toast","show","options","id","intent","duration","success","message","error","warning","info","dismiss","filter","t","dismissAll","toastCss","INTENT_BG","neutral","brand","positive","negative","caution","ToastProvider","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","position","items","unsubscribe","connectedCallback","syncFromStore","disconnectedCallback","item","timer","clearTimeout","storeToasts","existingIds","map","i","data","storeIds","kept","has","newItems","state","exiting","remaining","startedAt","paused","Date","now","setTimeout","dismissItem","toastService","pauseItem","elapsed","Math","max","resumeItem","getPositionStyle","base","zIndex","display","flexDirection","gap","pointerEvents","padding","maxWidth","width","boxSizing","top","left","transform","alignItems","right","bottom","render","h","Host","key","style","class","role","backgroundColor","borderRadius","boxShadow","minHeight","color","onMouseEnter","onMouseLeave","flex","type","onClick"],"sources":["src/wc/components/Toast/toast-service.ts","src/wc/components/Toast/Toast.css?tag=ds-toast-provider&encapsulation=scoped","src/wc/components/Toast/Toast.tsx"],"sourcesContent":["export type ToastIntent = 'neutral' | 'brand' | 'positive' | 'negative' | 'warning' | 'caution';\n\nexport interface ToastData {\n id: string;\n message: string;\n intent: ToastIntent;\n duration: number;\n}\n\nexport interface ToastOptions {\n message: string;\n intent?: ToastIntent;\n duration?: number;\n}\n\nlet toasts: ToastData[] = [];\nconst listeners = new Set<() => void>();\nlet idCounter = 0;\n\nfunction emit() {\n listeners.forEach(fn => fn());\n}\n\nexport function subscribeToToasts(fn: () => void): () => void {\n listeners.add(fn);\n return () => listeners.delete(fn);\n}\n\nexport function getToasts(): ToastData[] {\n return toasts;\n}\n\nexport const toast = {\n show(options: ToastOptions): string {\n const id = `ds-toast-${++idCounter}`;\n toasts = [...toasts, { id, intent: 'neutral', duration: 4000, ...options }];\n emit();\n return id;\n },\n success(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'positive', ...options });\n },\n error(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'negative', ...options });\n },\n warning(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'warning', ...options });\n },\n info(message: string, options?: Partial<ToastOptions>): string {\n return toast.show({ message, intent: 'neutral', ...options });\n },\n dismiss(id: string) {\n toasts = toasts.filter(t => t.id !== id);\n emit();\n },\n dismissAll() {\n toasts = [];\n emit();\n },\n};\n",".toast {\n animation: toastSlideIn var(--effect-motion-short-3) ease-out;\n width: 100%;\n max-width: 420px;\n}\n\n.toast--exit {\n animation: toastFadeOut 200ms ease-in forwards;\n}\n\n.toast-dismiss {\n background: none;\n border: none;\n color: inherit;\n cursor: pointer;\n padding: var(--dimension-space-025);\n margin-left: auto;\n font-size: 16px;\n line-height: 1;\n opacity: 0.7;\n border-radius: var(--dimension-radius-050);\n transition: opacity var(--effect-motion-short-2);\n flex-shrink: 0;\n}\n\n.toast-dismiss:hover { opacity: 1; }\n\n@keyframes toastSlideIn {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes toastFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, State, h, Host } from '@stencil/core';\nimport { subscribeToToasts, getToasts, toast as toastService, type ToastData, type ToastIntent } from './toast-service';\n\nexport type ToastPosition = 'top-center' | 'top-right' | 'bottom-center' | 'bottom-right';\n\nconst INTENT_BG: Record<ToastIntent, string> = {\n neutral: 'var(--color-background-bold-neutral)',\n brand: 'var(--color-background-bold-brand)',\n positive: 'var(--color-background-bold-positive)',\n negative: 'var(--color-background-bold-negative)',\n warning: 'var(--color-background-bold-warning)',\n caution: 'var(--color-background-bold-caution)',\n};\n\ninterface ToastItemState {\n data: ToastData;\n exiting: boolean;\n timer: ReturnType<typeof setTimeout> | null;\n remaining: number;\n startedAt: number;\n paused: boolean;\n}\n\n@Component({\n tag: 'ds-toast-provider',\n styleUrl: 'Toast.css',\n scoped: true,\n})\nexport class ToastProvider {\n @Prop() position: ToastPosition = 'top-center';\n\n @State() private items: ToastItemState[] = [];\n\n private unsubscribe: (() => void) | null = null;\n\n connectedCallback() {\n this.unsubscribe = subscribeToToasts(() => this.syncFromStore());\n this.syncFromStore();\n }\n\n disconnectedCallback() {\n this.items.forEach(item => { if (item.timer) clearTimeout(item.timer); });\n this.unsubscribe?.();\n }\n\n private syncFromStore() {\n const storeToasts = getToasts();\n const existingIds = new Set(this.items.map(i => i.data.id));\n const storeIds = new Set(storeToasts.map(t => t.id));\n\n // Remove items no longer in store (instant, no animation since dismiss() already fires animation)\n const kept = this.items.filter(i => storeIds.has(i.data.id));\n\n // Add new items\n const newItems: ToastItemState[] = storeToasts\n .filter(t => !existingIds.has(t.id))\n .map(data => {\n const state: ToastItemState = {\n data,\n exiting: false,\n timer: null,\n remaining: data.duration,\n startedAt: 0,\n paused: false,\n };\n if (data.duration > 0) {\n state.startedAt = Date.now();\n state.timer = setTimeout(() => this.dismissItem(data.id), data.duration);\n }\n return state;\n });\n\n this.items = [...kept, ...newItems];\n }\n\n private dismissItem(id: string) {\n this.items = this.items.map(i =>\n i.data.id === id ? { ...i, exiting: true, timer: null } : i\n );\n setTimeout(() => {\n this.items = this.items.filter(i => i.data.id !== id);\n toastService.dismiss(id);\n }, 200);\n }\n\n private pauseItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || i.paused || !i.timer) return i;\n clearTimeout(i.timer);\n const elapsed = Date.now() - i.startedAt;\n return { ...i, paused: true, timer: null, remaining: Math.max(0, i.remaining - elapsed) };\n });\n }\n\n private resumeItem(id: string) {\n this.items = this.items.map(i => {\n if (i.data.id !== id || !i.paused || i.remaining <= 0) return i;\n const timer = setTimeout(() => this.dismissItem(id), i.remaining);\n return { ...i, paused: false, timer, startedAt: Date.now() };\n });\n }\n\n private getPositionStyle(): Record<string, string> {\n const base: Record<string, string> = {\n position: 'fixed',\n zIndex: '9999',\n display: 'flex',\n flexDirection: 'column',\n gap: 'var(--dimension-space-075)',\n pointerEvents: 'none',\n padding: 'var(--dimension-space-100)',\n maxWidth: '480px',\n width: '100%',\n boxSizing: 'border-box',\n };\n switch (this.position) {\n case 'top-center':\n return { ...base, top: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'top-right':\n return { ...base, top: '0', right: '0', alignItems: 'flex-end' };\n case 'bottom-center':\n return { ...base, bottom: '0', left: '50%', transform: 'translateX(-50%)', alignItems: 'center' };\n case 'bottom-right':\n return { ...base, bottom: '0', right: '0', alignItems: 'flex-end' };\n }\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <div\n class=\"toast-container\"\n role=\"region\"\n aria-label=\"Notifications\"\n aria-live=\"polite\"\n style={this.getPositionStyle()}\n >\n {this.items.map(item => (\n <div\n key={item.data.id}\n class={{ toast: true, 'toast--exit': item.exiting }}\n role={item.data.intent === 'negative' ? 'alert' : 'status'}\n style={{\n backgroundColor: INTENT_BG[item.data.intent],\n borderRadius: 'var(--dimension-radius-125)',\n boxShadow: 'var(--effect-elevation-elevated-floating)',\n display: 'flex',\n alignItems: 'center',\n gap: 'var(--dimension-space-075)',\n padding: 'var(--dimension-space-075) var(--dimension-space-100)',\n minHeight: 'var(--dimension-size-400)',\n pointerEvents: 'auto',\n color: 'var(--color-foreground-on-bold-background-primary)',\n boxSizing: 'border-box',\n }}\n onMouseEnter={() => this.pauseItem(item.data.id)}\n onMouseLeave={() => this.resumeItem(item.data.id)}\n >\n <span class=\"text-body-medium\" style={{ flex: '1' }}>{item.data.message}</span>\n <button\n type=\"button\"\n class=\"toast-dismiss\"\n onClick={() => this.dismissItem(item.data.id)}\n aria-label=\"Dismiss\"\n >\n ×\n </button>\n </div>\n ))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const i=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const i=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;return o(r,{key:"
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as e,h as o,a as r,t as s}from"./index.js";const i=()=>`.text.sc-ds-text{margin:0}.text--truncate-1.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text--truncate-2.sc-ds-text,.text--truncate-3.sc-ds-text,.text--truncate-4.sc-ds-text,.text--truncate-5.sc-ds-text{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word}.text--truncate-2.sc-ds-text{-webkit-line-clamp:2}.text--truncate-3.sc-ds-text{-webkit-line-clamp:3}.text--truncate-4.sc-ds-text{-webkit-line-clamp:4}.text--truncate-5.sc-ds-text{-webkit-line-clamp:5}.text--nowrap.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.text--balance.sc-ds-text{text-wrap:balance}.text--pretty.sc-ds-text{text-wrap:pretty}.text--color-primary.sc-ds-text{color:var(--color-foreground-primary)}.text--color-secondary.sc-ds-text{color:var(--color-foreground-secondary)}.text--color-tertiary.sc-ds-text{color:var(--color-foreground-tertiary)}.text--color-brand.sc-ds-text{color:var(--color-foreground-bold-brand)}.text--color-negative.sc-ds-text{color:var(--color-foreground-bold-negative)}.text--color-positive.sc-ds-text{color:var(--color-foreground-bold-positive)}.text--color-warning.sc-ds-text{color:var(--color-foreground-bold-warning)}.text--color-caution.sc-ds-text{color:var(--color-foreground-bold-caution)}.text--color-ai.sc-ds-text{color:var(--color-foreground-bold-ai)}.text--color-on-strong.sc-ds-text{color:var(--color-foreground-on-strong-background-primary)}.text--color-on-bold.sc-ds-text{color:var(--color-foreground-on-bold-background-primary)}.text--color-inherit.sc-ds-text{color:inherit}.text--decoration-underline.sc-ds-text{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.text--decoration-dotted-underline.sc-ds-text{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.text--italic.sc-ds-text{font-style:italic}.text--align-left.sc-ds-text{text-align:left}.text--align-center.sc-ds-text{text-align:center}.text--align-right.sc-ds-text{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.italic=false;this.lineTruncation="none";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const s={[this.variant]:true,text:true,"text--nowrap":this.wrap==="nowrap","text--balance":this.wrap==="balance","text--pretty":this.wrap==="pretty","text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","text--color-primary":this.color==="primary","text--color-secondary":this.color==="secondary","text--color-tertiary":this.color==="tertiary","text--color-brand":this.color==="brand","text--color-negative":this.color==="negative","text--color-positive":this.color==="positive","text--color-warning":this.color==="warning","text--color-caution":this.color==="caution","text--color-ai":this.color==="ai","text--color-on-strong":this.color==="on-strong","text--color-on-bold":this.color==="on-bold","text--color-inherit":this.color==="inherit","text--decoration-underline":this.decoration==="underline","text--decoration-dotted-underline":this.decoration==="dotted-underline","text--italic":this.italic,"text--align-left":this.align==="left","text--align-center":this.align==="center","text--align-right":this.align==="right"};const i=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;return o(r,{key:"86572f96b431b50a7f02d07a1ff150d3714d9d92",style:{display:"contents"}},o(t,{key:"59d215ffdee3462552ed3caecc9e93f6b0ffc79a",class:s,style:i,...n},o("slot",{key:"f2b3f3e4a4df05d6a29e9eabc28ef1f3f908610d"})))}static get style(){return i()}},[262,"ds-text",{variant:[1],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],as:[1],for:[1]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(s(t))){customElements.define(s(t),n)}break}}))}c();export{n as T,c as d};
|
|
2
|
+
//# sourceMappingURL=p-Leo9RPok.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","italic","lineTruncation","as","render","Tag","isCustomColor","c","startsWith","cls","text","wrap","color","decoration","align","style","undefined","extraProps","for","h","Host","key","display","class"],"sources":["src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":[".text {\n margin: 0;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n.text--truncate-1 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.text--truncate-2,\n.text--truncate-3,\n.text--truncate-4,\n.text--truncate-5 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n.text--truncate-2 { -webkit-line-clamp: 2; }\n.text--truncate-3 { -webkit-line-clamp: 3; }\n.text--truncate-4 { -webkit-line-clamp: 4; }\n.text--truncate-5 { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n.text--nowrap {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.text--balance { text-wrap: balance; }\n.text--pretty { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n.text--color-primary { color: var(--color-foreground-primary); }\n.text--color-secondary { color: var(--color-foreground-secondary); }\n.text--color-tertiary { color: var(--color-foreground-tertiary); }\n.text--color-brand { color: var(--color-foreground-bold-brand); }\n.text--color-negative { color: var(--color-foreground-bold-negative); }\n.text--color-positive { color: var(--color-foreground-bold-positive); }\n.text--color-warning { color: var(--color-foreground-bold-warning); }\n.text--color-caution { color: var(--color-foreground-bold-caution); }\n.text--color-ai { color: var(--color-foreground-bold-ai); }\n.text--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.text--color-on-bold { color: var(--color-foreground-on-bold-background-primary); }\n.text--color-inherit { color: inherit; }\n\n/* ── Decoration ─────────────────────────────────────────────────────────── */\n\n.text--decoration-underline {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n.text--decoration-dotted-underline {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n.text--italic { font-style: italic; }\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n.text--align-left { text-align: left; }\n.text--align-center { text-align: center; }\n.text--align-right { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TextVariant =\n | 'text-display-medium'\n | 'text-display-small'\n | 'text-title-large'\n | 'text-title-medium'\n | 'text-title-small'\n | 'text-body-large'\n | 'text-body-large-emphasis'\n | 'text-body-medium'\n | 'text-body-medium-emphasis'\n | 'text-body-small'\n | 'text-body-small-emphasis'\n | 'text-caption'\n | 'text-caption-emphasis';\n\nexport type TextColorToken =\n | 'primary' | 'secondary' | 'tertiary'\n | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n @Prop() color: TextColor | undefined;\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n\n render() {\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n [this.variant]: true,\n 'text': true,\n 'text--nowrap': this.wrap === 'nowrap',\n 'text--balance': this.wrap === 'balance',\n 'text--pretty': this.wrap === 'pretty',\n 'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'text--color-primary': this.color === 'primary',\n 'text--color-secondary': this.color === 'secondary',\n 'text--color-tertiary': this.color === 'tertiary',\n 'text--color-brand': this.color === 'brand',\n 'text--color-negative': this.color === 'negative',\n 'text--color-positive': this.color === 'positive',\n 'text--color-warning': this.color === 'warning',\n 'text--color-caution': this.color === 'caution',\n 'text--color-ai': this.color === 'ai',\n 'text--color-on-strong': this.color === 'on-strong',\n 'text--color-on-bold': this.color === 'on-bold',\n 'text--color-inherit': this.color === 'inherit',\n 'text--decoration-underline': this.decoration === 'underline',\n 'text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'text--italic': this.italic,\n 'text--align-left': this.align === 'left',\n 'text--align-center': this.align === 'center',\n 'text--align-right': this.align === 'right',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag class={cls} style={style} {...extraProps}>\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,ghE,MCkCTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAuB,mBAGvBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,GAAkB,
|
|
1
|
+
{"version":3,"names":["textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","italic","lineTruncation","as","render","Tag","isCustomColor","c","startsWith","cls","text","wrap","color","decoration","align","style","undefined","extraProps","for","h","Host","key","display","class"],"sources":["src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":[".text {\n margin: 0;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n.text--truncate-1 {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.text--truncate-2,\n.text--truncate-3,\n.text--truncate-4,\n.text--truncate-5 {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n.text--truncate-2 { -webkit-line-clamp: 2; }\n.text--truncate-3 { -webkit-line-clamp: 3; }\n.text--truncate-4 { -webkit-line-clamp: 4; }\n.text--truncate-5 { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n.text--nowrap {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n.text--balance { text-wrap: balance; }\n.text--pretty { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n.text--color-primary { color: var(--color-foreground-primary); }\n.text--color-secondary { color: var(--color-foreground-secondary); }\n.text--color-tertiary { color: var(--color-foreground-tertiary); }\n.text--color-brand { color: var(--color-foreground-bold-brand); }\n.text--color-negative { color: var(--color-foreground-bold-negative); }\n.text--color-positive { color: var(--color-foreground-bold-positive); }\n.text--color-warning { color: var(--color-foreground-bold-warning); }\n.text--color-caution { color: var(--color-foreground-bold-caution); }\n.text--color-ai { color: var(--color-foreground-bold-ai); }\n.text--color-on-strong { color: var(--color-foreground-on-strong-background-primary); }\n.text--color-on-bold { color: var(--color-foreground-on-bold-background-primary); }\n.text--color-inherit { color: inherit; }\n\n/* ── Decoration ─────────────────────────────────────────────────────────── */\n\n.text--decoration-underline {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n.text--decoration-dotted-underline {\n text-decoration: underline dotted;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n/* ── Style ──────────────────────────────────────────────────────────────── */\n\n.text--italic { font-style: italic; }\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n.text--align-left { text-align: left; }\n.text--align-center { text-align: center; }\n.text--align-right { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TextVariant =\n | 'text-display-medium'\n | 'text-display-small'\n | 'text-title-large'\n | 'text-title-medium'\n | 'text-title-small'\n | 'text-body-large'\n | 'text-body-large-emphasis'\n | 'text-body-medium'\n | 'text-body-medium-emphasis'\n | 'text-body-small'\n | 'text-body-small-emphasis'\n | 'text-caption'\n | 'text-caption-emphasis';\n\nexport type TextColorToken =\n | 'primary' | 'secondary' | 'tertiary'\n | 'brand' | 'negative' | 'positive' | 'warning' | 'caution' | 'ai'\n | 'on-strong' | 'on-bold' | 'inherit';\n\nexport type TextColor = TextColorToken | `var(--${string})`;\nexport type TextDecoration = 'none' | 'underline' | 'dotted-underline';\nexport type TextAlign = 'left' | 'center' | 'right';\nexport type LineTruncation = 1 | 2 | 3 | 4 | 5 | 'none';\nexport type TextWrap = 'wrap' | 'nowrap' | 'balance' | 'pretty';\nexport type TextElement = 'p' | 'span' | 'div' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\n@Component({\n tag: 'ds-text',\n styleUrl: 'Text.css',\n scoped: true,\n})\nexport class Text {\n @Prop() variant: TextVariant = 'text-body-medium';\n @Prop() color: TextColor | undefined;\n @Prop() decoration: TextDecoration | undefined;\n @Prop() italic: boolean = false;\n @Prop() align: TextAlign | undefined;\n @Prop() lineTruncation: LineTruncation = 'none';\n @Prop() wrap: TextWrap | undefined;\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n\n render() {\n // Polymorphic element: TSX treats a variable tag as a component, so a\n // dynamic intrinsic element name must be cast to `any` to render.\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const Tag = this.as as any;\n const isCustomColor = (c: TextColor) => typeof c === 'string' && c.startsWith('var(--');\n\n const cls: Record<string, boolean> = {\n [this.variant]: true,\n 'text': true,\n 'text--nowrap': this.wrap === 'nowrap',\n 'text--balance': this.wrap === 'balance',\n 'text--pretty': this.wrap === 'pretty',\n 'text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'text--color-primary': this.color === 'primary',\n 'text--color-secondary': this.color === 'secondary',\n 'text--color-tertiary': this.color === 'tertiary',\n 'text--color-brand': this.color === 'brand',\n 'text--color-negative': this.color === 'negative',\n 'text--color-positive': this.color === 'positive',\n 'text--color-warning': this.color === 'warning',\n 'text--color-caution': this.color === 'caution',\n 'text--color-ai': this.color === 'ai',\n 'text--color-on-strong': this.color === 'on-strong',\n 'text--color-on-bold': this.color === 'on-bold',\n 'text--color-inherit': this.color === 'inherit',\n 'text--decoration-underline': this.decoration === 'underline',\n 'text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'text--italic': this.italic,\n 'text--align-left': this.align === 'left',\n 'text--align-center': this.align === 'center',\n 'text--align-right': this.align === 'right',\n };\n\n const style = this.color && isCustomColor(this.color)\n ? { color: this.color as string }\n : undefined;\n\n const extraProps: Record<string, string> = {};\n if (this.as === 'label' && this.for) extraProps['for'] = this.for;\n\n return (\n <Host style={{ display: 'contents' }}>\n <Tag class={cls} style={style} {...extraProps}>\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAAA,MAAMA,EAAU,IAAM,ghE,MCkCTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAuB,mBAGvBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,GAAkB,GAyD3B,CArDC,MAAAC,GAIE,MAAMC,EAAMN,KAAKI,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,CAACV,KAAKC,SAAU,KAChBU,KAAQ,KACR,eAAgBX,KAAKY,OAAS,SAC9B,gBAAiBZ,KAAKY,OAAS,UAC/B,eAAgBZ,KAAKY,OAAS,SAC9B,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,mBAAoBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAC/D,sBAAyBZ,KAAKa,QAAU,UACxC,wBAAyBb,KAAKa,QAAU,YACxC,uBAAyBb,KAAKa,QAAU,WACxC,oBAAyBb,KAAKa,QAAU,QACxC,uBAAyBb,KAAKa,QAAU,WACxC,uBAAyBb,KAAKa,QAAU,WACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,iBAAyBb,KAAKa,QAAU,KACxC,wBAAyBb,KAAKa,QAAU,YACxC,sBAAyBb,KAAKa,QAAU,UACxC,sBAAyBb,KAAKa,QAAU,UACxC,6BAAqCb,KAAKc,aAAe,YACzD,oCAAqCd,KAAKc,aAAe,mBACzD,eAAgBd,KAAKE,OACrB,mBAAsBF,KAAKe,QAAU,OACrC,qBAAsBf,KAAKe,QAAU,SACrC,oBAAsBf,KAAKe,QAAU,SAGvC,MAAMC,EAAQhB,KAAKa,OAASN,EAAcP,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKI,KAAO,SAAWJ,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAE9D,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACN,MAAO,CAAEO,QAAS,aACtBH,EAACd,EAAG,CAAAgB,IAAA,2CAACE,MAAOd,EAAKM,MAAOA,KAAWE,GACjCE,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ds-mo/ui",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.4",
|
|
4
4
|
"description": "CompoMo — composable web components styled with TokoMo design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -66,7 +66,6 @@
|
|
|
66
66
|
"@stencil/angular-output-target": "^1.3.1",
|
|
67
67
|
"@stencil/core": "^4.43.4",
|
|
68
68
|
"@storybook/addon-docs": "^10.4.2",
|
|
69
|
-
"@storybook/addon-toolbars": "^9.0.8",
|
|
70
69
|
"@storybook/web-components": "^10.4.2",
|
|
71
70
|
"@storybook/web-components-vite": "^10.4.2",
|
|
72
71
|
"concurrently": "^10.0.3",
|