@ds-mo/ui 3.3.0 → 4.1.0
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/.build-stamp +1 -1
- package/dist/agent.json +143 -24
- package/dist/angular/ds-app-shell.d.ts +1 -1
- package/dist/angular/ds-app-shell.js +3 -3
- package/dist/components/ds-app-shell.js +1 -1
- package/dist/components/ds-app-shell.js.map +1 -1
- package/dist/components/ds-badge.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-nav.js.map +1 -1
- package/dist/components/ds-button-filled.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-card-data-viz-donut.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-card.js +1 -1
- package/dist/components/ds-chart-donut.js +1 -1
- package/dist/components/ds-chart-donut.js.map +1 -1
- package/dist/components/ds-chart-legend.js +1 -1
- package/dist/components/ds-checkbox.js +1 -1
- package/dist/components/ds-chip.js +1 -1
- package/dist/components/ds-empty-state.js +1 -1
- package/dist/components/ds-field.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +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-panel-tools.js +1 -1
- package/dist/components/ds-panel-tools.js.map +1 -1
- package/dist/components/ds-radio-group.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-select.js.map +1 -1
- package/dist/components/ds-shell-gradient-picker.js +1 -1
- package/dist/components/ds-shell-gradient-swatch.js +1 -1
- package/dist/components/ds-slider.js +1 -1
- package/dist/components/ds-tab-group-nav.js +1 -1
- package/dist/components/ds-tab-group.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-tag.js +1 -1
- package/dist/components/ds-text.js +1 -1
- package/dist/components/ds-tooltip-data-viz.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-Cp86p-11.js → p-B4gGwfix.js} +2 -2
- package/dist/components/p-B4gGwfix.js.map +1 -0
- package/dist/components/{p-NkAPA-Dz.js → p-BKhG2xrW.js} +2 -2
- package/dist/components/p-BzIYKUGO.js +2 -0
- package/dist/components/{p-DolYlDbY.js.map → p-BzIYKUGO.js.map} +1 -1
- package/dist/components/{p-DMD-RO1W.js → p-CCRYQWKy.js} +2 -2
- package/dist/components/p-CHcS6Z4V.js +2 -0
- package/dist/components/p-CHcS6Z4V.js.map +1 -0
- package/dist/components/{p-BFiaUYu7.js → p-CfwQwstk.js} +2 -2
- package/dist/components/{p-DOEMwKBb.js → p-CvjQuj6A.js} +2 -2
- package/dist/components/p-D0B9uDTP.js +2 -0
- package/dist/components/p-D0B9uDTP.js.map +1 -0
- package/dist/components/p-D7SoZNpD.js +2 -0
- package/dist/components/p-D7SoZNpD.js.map +1 -0
- package/dist/components/{p-DHjjwgku.js → p-DO7y9eZQ.js} +2 -2
- package/dist/components/p-ORF34W29.js +2 -0
- package/dist/components/p-ORF34W29.js.map +1 -0
- package/dist/components/{p-8WTsyLQ9.js → p-drBA73M_.js} +2 -2
- package/dist/components/p-emacH2W5.js +2 -0
- package/dist/components/p-emacH2W5.js.map +1 -0
- package/dist/docs/components.json +49 -81
- package/dist/lib/nav/badge-gradient-ring.d.ts +1 -1
- package/dist/lib/nav/index.d.ts +1 -1
- package/dist/lib/nav/index.js +51 -14
- package/dist/lib/nav/index.js.map +2 -2
- package/dist/lib/nav/shell-gradient-presets.d.ts +14 -2
- package/dist/lib/nav/shell-gradient.d.ts +3 -5
- package/dist/types/components/AppShell/AppShell.d.ts +2 -9
- package/dist/types/components/Badge/Badge.d.ts +1 -1
- package/dist/types/components/Menu/menu-types.d.ts +2 -0
- package/dist/types/components/PanelNav/PanelNav.d.ts +5 -4
- package/dist/types/components/PanelNav/panel-nav-utils.d.ts +2 -0
- package/dist/types/components/ShellGradientPicker/ShellGradientPicker.d.ts +3 -0
- package/dist/types/components/ShellGradientSwatch/shell-gradient-swatch-types.d.ts +1 -1
- package/dist/types/components.d.ts +7 -29
- package/dist/types/nav/badge-gradient-ring.d.ts +1 -1
- package/dist/types/nav/index.d.ts +1 -1
- package/dist/types/nav/shell-gradient-presets.d.ts +14 -2
- package/dist/types/nav/shell-gradient.d.ts +3 -5
- package/dist/types/utils/shortcut-key.d.ts +3 -0
- package/package.json +2 -2
- package/dist/components/p-BOQRM49Q.js +0 -2
- package/dist/components/p-BOQRM49Q.js.map +0 -1
- package/dist/components/p-Bz3jyrDV.js +0 -2
- package/dist/components/p-Bz3jyrDV.js.map +0 -1
- package/dist/components/p-CTK82RIw.js +0 -2
- package/dist/components/p-CTK82RIw.js.map +0 -1
- package/dist/components/p-Cp86p-11.js.map +0 -1
- package/dist/components/p-DEgY_Lnb.js +0 -2
- package/dist/components/p-DEgY_Lnb.js.map +0 -1
- package/dist/components/p-DI8rHm9u.js +0 -2
- package/dist/components/p-DI8rHm9u.js.map +0 -1
- package/dist/components/p-DolYlDbY.js +0 -2
- /package/dist/components/{p-NkAPA-Dz.js.map → p-BKhG2xrW.js.map} +0 -0
- /package/dist/components/{p-DMD-RO1W.js.map → p-CCRYQWKy.js.map} +0 -0
- /package/dist/components/{p-BFiaUYu7.js.map → p-CfwQwstk.js.map} +0 -0
- /package/dist/components/{p-DOEMwKBb.js.map → p-CvjQuj6A.js.map} +0 -0
- /package/dist/components/{p-DHjjwgku.js.map → p-DO7y9eZQ.js.map} +0 -0
- /package/dist/components/{p-8WTsyLQ9.js.map → p-drBA73M_.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["BADGE_GRADIENT_POSITION_VAR","isShellGradientActive","from","shell","closest","getAttribute","badgeCss","SURFACE_RING","default","primary","secondary","medium","bold","strong","navigation","Badge","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","count","max","surface","gradientBackground","isSelected","gradientLayoutVersion","gradientObserver","gradientWindowListener","componentDidLoad","enableShellGradientRingIfNeeded","disconnectedCallback","unbindGradientRingSync","gradientBackgroundChanged","bindGradientRingSync","el","update","window","addEventListener","ResizeObserver","observe","bar","panel","removeEventListener","disconnect","ringHostStyle","ring","style","render","isDot","h","Host","display","String","ariaLabel","label","background","class","badge","as","emphasis","color"],"sources":["src/wc/nav/badge-gradient-ring.ts","src/wc/components/Badge/Badge.css?tag=ds-badge&encapsulation=scoped","src/wc/components/Badge/Badge.tsx"],"sourcesContent":["import {\n SHELL_GRADIENT_POSITION_BAR_VAR,\n SHELL_GRADIENT_POSITION_PANEL_VAR,\n} from './shell-gradient';\n\n/** Per-badge background-position for shell gradient ring sampling. */\nexport const BADGE_GRADIENT_POSITION_VAR = '--_badge-gradient-position';\n\nexport interface GradientSurface {\n element: HTMLElement;\n chromeHost: HTMLElement;\n positionVar: string;\n}\n\n/** Whether the badge sits under a shell with an active wash preset. */\nexport function isShellGradientActive(from: HTMLElement): boolean {\n // Explicit <HTMLElement>: the inferred HTMLDsAppShellElement type only\n // resolves where @stencil/core types are installed — consumers importing\n // `@ds-mo/ui/nav` (raw TS) compile this without them.\n const shell = from.closest<HTMLElement>('ds-app-shell');\n return shell !== null && shell.getAttribute('gradient-preset') !== 'none';\n}\n\n/** Bar or panel chrome surface that owns the shell gradient stack. */\nexport function findGradientSurface(from: HTMLElement): GradientSurface | null {\n const barHost = from.closest('ds-bar-nav') as HTMLElement | null;\n if (barHost) {\n const root = barHost.shadowRoot ?? barHost;\n const element = root.querySelector('.bar-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: barHost,\n positionVar: SHELL_GRADIENT_POSITION_BAR_VAR,\n };\n }\n }\n\n const panelHost = from.closest('ds-panel-nav') as HTMLElement | null;\n if (panelHost) {\n const root = panelHost.shadowRoot ?? panelHost;\n const element = root.querySelector('.panel-nav');\n if (element) {\n return {\n element: element as HTMLElement,\n chromeHost: panelHost,\n positionVar: SHELL_GRADIENT_POSITION_PANEL_VAR,\n };\n }\n }\n\n return null;\n}\n\ninterface ParsedPosition {\n x: number;\n y: number;\n}\n\n/** Parse a two-value CSS background-position (e.g. `-200px 0`). */\nexport function parseCssBackgroundPosition(value: string): ParsedPosition {\n const trimmed = value.trim();\n if (!trimmed) return { x: 0, y: 0 };\n\n const parts = trimmed.split(/\\s+/);\n const x = parseLength(parts[0] ?? '0');\n const y = parseLength(parts[1] ?? '0');\n return { x, y };\n}\n\nfunction parseLength(token: string): number {\n const px = token.match(/^(-?[\\d.]+)px$/);\n if (px) return Number(px[1]);\n return 0;\n}\n\n/**\n * Background position for a badge ring so the shell gradient aligns with nav chrome.\n * Uses badge center relative to the painted chrome surface.\n */\nexport function badgeGradientPosition(\n badgeHost: HTMLElement,\n surface: GradientSurface,\n shellPosition: string,\n): string {\n const badgeRect = badgeHost.getBoundingClientRect();\n const surfaceRect = surface.element.getBoundingClientRect();\n const anchorX = badgeRect.left + badgeRect.width / 2 - surfaceRect.left;\n const anchorY = badgeRect.top + badgeRect.height / 2 - surfaceRect.top;\n const { x, y } = parseCssBackgroundPosition(shellPosition);\n\n return `${Math.round(x - anchorX)}px ${Math.round(y - anchorY)}px`;\n}\n\n/** Resolve shell gradient position from chrome host custom properties. */\nexport function readShellGradientPosition(surface: GradientSurface): string {\n const styles = getComputedStyle(surface.chromeHost);\n return styles.getPropertyValue(surface.positionVar).trim() || '0 0';\n}\n\n/** Stamp `--_badge-gradient-position` on the badge host (fixed viewport chrome). */\nexport function syncBadgeGradientPosition(badgeHost: HTMLElement): void {\n if (!isShellGradientActive(badgeHost)) {\n badgeHost.style.removeProperty(BADGE_GRADIENT_POSITION_VAR);\n return;\n }\n\n badgeHost.style.setProperty(BADGE_GRADIENT_POSITION_VAR, '0 0');\n}\n",":host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n vertical-align: middle;\n\n --_badge-bg: var(--color-background-bold-brand);\n --_badge-fg: var(--color-foreground-on-bold-background-primary);\n --_badge-ring: var(--color-background-secondary);\n --_badge-ring-width: var(--dimension-stroke-width-018);\n}\n\n.badge__mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n color: var(--_badge-fg);\n background: var(--_badge-bg);\n box-shadow: 0 0 0 var(--_badge-ring-width) var(--_badge-ring);\n white-space: nowrap;\n}\n\n:host(.badge--dot) .badge__mark {\n width: var(--dimension-size-075);\n height: var(--dimension-size-075);\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--counter) .badge__mark {\n width: var(--dimension-size-150);\n height: var(--dimension-size-150);\n padding: 0;\n border-radius: var(--dimension-radius-half);\n}\n\n:host(.badge--selected) {\n --_badge-bg: var(--color-foreground-primary);\n}\n\n/* Shell gradient ring — base fill + wash donut (option 3). */\n:host(.badge--on-gradient-background) .badge__mark {\n position: relative;\n z-index: 0;\n box-shadow: none;\n isolation: isolate;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before,\n:host(.badge--on-gradient-background) .badge__mark::after {\n content: '';\n position: absolute;\n inset: calc(-1 * var(--_badge-ring-width));\n border-radius: inherit;\n box-sizing: border-box;\n padding: var(--_badge-ring-width);\n pointer-events: none;\n /* stylelint-disable color-no-hex -- mask luminance stops for ring cutout, not theme colors */\n -webkit-mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask:\n linear-gradient(#fff 0 0) content-box,\n linear-gradient(#fff 0 0);\n /* stylelint-enable color-no-hex */\n mask-composite: exclude;\n}\n\n:host(.badge--on-gradient-background) .badge__mark::before {\n z-index: -2;\n background-color: var(--_badge-ring);\n}\n\n:host(.badge--on-gradient-background) .badge__mark::after {\n z-index: -1;\n background-image: var(--ds-shell-gradient-image, none);\n background-size: var(--ds-shell-gradient-size, auto);\n background-position: 0 0;\n background-repeat: no-repeat;\n background-attachment: fixed;\n opacity: var(--ds-shell-gradient-opacity, 1);\n}\n","import { Component, Prop, Element, State, Watch, h, Host } from '@stencil/core';\nimport {\n BADGE_GRADIENT_POSITION_VAR,\n isShellGradientActive,\n} from '../../nav/badge-gradient-ring';\n\nexport type BadgeVariant = 'counter' | 'dot';\nexport type BadgeSurface =\n | 'default'\n | 'primary'\n | 'secondary'\n | 'medium'\n | 'bold'\n | 'strong'\n | 'navigation'\n | 'always-dark';\n\nconst SURFACE_RING: Record<BadgeSurface, string> = {\n default: 'var(--color-background-secondary)',\n primary: 'var(--color-background-primary)',\n secondary: 'var(--color-background-secondary)',\n medium: 'var(--color-background-medium-neutral)',\n bold: 'var(--color-background-bold-neutral)',\n strong: 'var(--color-background-strong-neutral)',\n navigation: 'var(--color-navigation-background)',\n 'always-dark': 'var(--color-always-dark-background)',\n};\n\n@Component({\n tag: 'ds-badge',\n styleUrl: 'Badge.css',\n scoped: true,\n})\nexport class Badge {\n @Element() el!: HTMLElement;\n\n /** Render as a compact counter or notification dot. */\n @Prop() variant: BadgeVariant = 'counter';\n\n /** Count shown for counter badges. Count 0 hides the badge. */\n @Prop() count: number = 0;\n\n /** Highest count shown before compacting to \"+\". */\n @Prop() max: number = 9;\n\n /** Surface context for the ring around dots. */\n @Prop() surface: BadgeSurface = 'default';\n\n /** Direct ring background override for component-local surfaces. */\n @Prop() background: string | undefined;\n\n /**\n * Ring samples the shell gradient stack (base fill + wash) instead of a flat\n * `box-shadow`. Auto-enabled under an AppShell with an active gradient preset;\n * set `gradient-background` to opt in/out explicitly.\n *\n * The attribute must NOT start with `on` — Stencil's setAccessor routes any\n * unknown `on*` member down the event-listener path during attribute\n * reflection, calling addEventListener with a non-listener and throwing.\n */\n @Prop({ attribute: 'gradient-background', reflect: true }) gradientBackground: boolean = false;\n\n /** Deprecated alias for selected counter styling. Prefer context-specific color in the parent. */\n @Prop() isSelected: boolean = false;\n\n /** Accessible label. Defaults to the count as a string. */\n @Prop() label: string | undefined;\n\n /** Bumps on resize/layout so render recomputes gradient ring position. */\n @State() private gradientLayoutVersion = 0;\n\n private gradientObserver: ResizeObserver | null = null;\n private gradientWindowListener: (() => void) | null = null;\n\n componentDidLoad() {\n this.enableShellGradientRingIfNeeded();\n }\n\n disconnectedCallback() {\n this.unbindGradientRingSync();\n }\n\n @Watch('gradientBackground')\n gradientBackgroundChanged() {\n this.bindGradientRingSync();\n }\n\n /** Imperative opt-in avoids Stencil aborting parent render for nested badges. */\n private enableShellGradientRingIfNeeded() {\n if (!this.gradientBackground && isShellGradientActive(this.el)) {\n this.gradientBackground = true;\n }\n\n if (this.gradientBackground) {\n this.bindGradientRingSync();\n }\n }\n\n private bindGradientRingSync() {\n this.unbindGradientRingSync();\n\n if (!this.gradientBackground) return;\n\n const update = () => {\n this.gradientLayoutVersion += 1;\n };\n update();\n\n this.gradientWindowListener = update;\n window.addEventListener('resize', update);\n\n if (typeof ResizeObserver !== 'undefined') {\n this.gradientObserver = new ResizeObserver(update);\n this.gradientObserver.observe(this.el);\n\n const shell = this.el.closest('ds-app-shell');\n if (shell) this.gradientObserver.observe(shell);\n\n const bar = this.el.closest('ds-bar-nav');\n if (bar) this.gradientObserver.observe(bar);\n\n const panel = this.el.closest('ds-panel-nav');\n if (panel) this.gradientObserver.observe(panel);\n }\n }\n\n private unbindGradientRingSync() {\n if (this.gradientWindowListener) {\n window.removeEventListener('resize', this.gradientWindowListener);\n this.gradientWindowListener = null;\n }\n\n this.gradientObserver?.disconnect();\n this.gradientObserver = null;\n }\n\n private ringHostStyle(ring: string): Record<string, string> {\n void this.gradientLayoutVersion;\n\n const style: Record<string, string> = { '--_badge-ring': ring };\n if (!this.gradientBackground || !isShellGradientActive(this.el)) return style;\n\n /* Shell chrome wash uses background-attachment: fixed at viewport origin. */\n style[BADGE_GRADIENT_POSITION_VAR] = '0 0';\n return style;\n }\n\n render() {\n const isDot = this.variant === 'dot';\n\n if (!isDot && this.count === 0) return <Host style={{ display: 'none' }} />;\n\n const display = this.count > this.max ? '+' : String(this.count);\n const ariaLabel = this.label ?? (isDot ? 'Notification' : String(this.count));\n const ring = this.background ?? SURFACE_RING[this.surface];\n\n return (\n <Host\n class={{\n badge: true,\n 'badge--counter': !isDot,\n 'badge--dot': isDot,\n 'badge--selected': this.isSelected,\n 'badge--on-gradient-background': this.gradientBackground,\n }}\n aria-label={ariaLabel}\n style={this.ringHostStyle(ring)}\n >\n <span class=\"badge__mark\" aria-hidden=\"true\">\n {!isDot && (\n <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"inherit\">\n {display}\n </ds-text>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"mappings":"+FAMO,MAAMA,EAA8B,6BASrC,SAAUC,EAAsBC,GAIpC,MAAMC,EAAQD,EAAKE,QAAqB,gBACxC,OAAOD,IAAU,MAAQA,EAAME,aAAa,qBAAuB,MACrE,CCrBA,MAAMC,EAAW,IAAM,mjECiBvB,MAAMC,EAA6C,CACjDC,QAAS,oCACTC,QAAS,kCACTC,UAAW,oCACXC,OAAQ,yCACRC,KAAM,uCACNC,OAAQ,yCACRC,WAAY,qCACZ,cAAe,uC,MAQJC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CASUC,KAAAC,QAAwB,UAGxBD,KAAAE,MAAgB,EAGhBF,KAAAG,IAAc,EAGdH,KAAAI,QAAwB,UAc2BJ,KAAAK,mBAA8B,MAGjFL,KAAAM,WAAsB,MAMbN,KAAAO,sBAAwB,EAEjCP,KAAAQ,iBAA0C,KAC1CR,KAAAS,uBAA8C,IA0GvD,CAxGC,gBAAAC,GACEV,KAAKW,iC,CAGP,oBAAAC,GACEZ,KAAKa,wB,CAIP,yBAAAC,GACEd,KAAKe,sB,CAIC,+BAAAJ,GACN,IAAKX,KAAKK,oBAAsBxB,EAAsBmB,KAAKgB,IAAK,CAC9DhB,KAAKK,mBAAqB,I,CAG5B,GAAIL,KAAKK,mBAAoB,CAC3BL,KAAKe,sB,EAID,oBAAAA,GACNf,KAAKa,yBAEL,IAAKb,KAAKK,mBAAoB,OAE9B,MAAMY,EAAS,KACbjB,KAAKO,uBAAyB,CAAC,EAEjCU,IAEAjB,KAAKS,uBAAyBQ,EAC9BC,OAAOC,iBAAiB,SAAUF,GAElC,UAAWG,iBAAmB,YAAa,CACzCpB,KAAKQ,iBAAmB,IAAIY,eAAeH,GAC3CjB,KAAKQ,iBAAiBa,QAAQrB,KAAKgB,IAEnC,MAAMjC,EAAQiB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAID,EAAOiB,KAAKQ,iBAAiBa,QAAQtC,GAEzC,MAAMuC,EAAMtB,KAAKgB,GAAGhC,QAAQ,cAC5B,GAAIsC,EAAKtB,KAAKQ,iBAAiBa,QAAQC,GAEvC,MAAMC,EAAQvB,KAAKgB,GAAGhC,QAAQ,gBAC9B,GAAIuC,EAAOvB,KAAKQ,iBAAiBa,QAAQE,E,EAIrC,sBAAAV,GACN,GAAIb,KAAKS,uBAAwB,CAC/BS,OAAOM,oBAAoB,SAAUxB,KAAKS,wBAC1CT,KAAKS,uBAAyB,I,CAGhCT,KAAKQ,kBAAkBiB,aACvBzB,KAAKQ,iBAAmB,I,CAGlB,aAAAkB,CAAcC,GAGpB,MAAMC,EAAgC,CAAE,gBAAiBD,GACzD,IAAK3B,KAAKK,qBAAuBxB,EAAsBmB,KAAKgB,IAAK,OAAOY,EAGxEA,EAAMhD,GAA+B,MACrC,OAAOgD,C,CAGT,MAAAC,GACE,MAAMC,EAAQ9B,KAAKC,UAAY,MAE/B,IAAK6B,GAAS9B,KAAKE,QAAU,EAAG,OAAO6B,EAACC,EAAI,CAACJ,MAAO,CAAEK,QAAS,UAE/D,MAAMA,EAAUjC,KAAKE,MAAQF,KAAKG,IAAM,IAAM+B,OAAOlC,KAAKE,OAC1D,MAAMiC,EAAYnC,KAAKoC,QAAUN,EAAQ,eAAiBI,OAAOlC,KAAKE,QACtE,MAAMyB,EAAO3B,KAAKqC,YAAclD,EAAaa,KAAKI,SAElD,OACE2B,EAACC,EAAI,CACHM,MAAO,CACLC,MAAO,KACP,kBAAmBT,EACnB,aAAcA,EACd,kBAAmB9B,KAAKM,WACxB,gCAAiCN,KAAKK,oBACvC,aACW8B,EACZP,MAAO5B,KAAK0B,cAAcC,IAE1BI,EAAA,QAAMO,MAAM,cAAa,cAAa,SAClCR,GACAC,EAAA,WAASS,GAAG,OAAOvC,QAAQ,eAAewC,SAAQ,KAACC,MAAM,WACtDT,I","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as o,H as t,c as r,h as s,a as n,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-DEgY_Lnb.js";import{d as c}from"./p-BOQRM49Q.js";const l=()=>`.sc-ds-tab-group-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.dsRovingExit=r(this,"dsRovingExit");this.value="";this.tabs=[];this.ariaLabel=null;this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,t){if(!this.selectionFollowsFocus){if(t===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(t===undefined||o===t)return;requestAnimationFrame((()=>{const t=document.activeElement;if(!t||!this.el.contains(t))return;const r=t.getAttribute("data-tab-id");if(r===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{t.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const t=this.el.querySelector(`[data-tab-id="${o}"]`);t?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const t=[...o].reverse().find((o=>!o.isInactive));if(t)await this.focusTab(t.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const t=this.selectableTabs;if(t.some((t=>t.id===o&&!t.isInactive))){this.focusedTabId=o;return}const r=t.find((o=>!o.isInactive));this.focusedTabId=r?.id??""}selectTab(o,t){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(t?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,t){const r=this.selectableTabs;for(let s=o+t;s>=0&&s<r.length;s+=t){if(!r[s]?.isInactive)return s}return null}findEnabled(o,t){const r=this.selectableTabs;const s=r.length;for(let n=0;n<s;n++){const a=(o+t*(n+1)+s*(n+1))%s;if(!r[a]?.isInactive)return a}return o}moveFocusToIndex(o){const t=this.selectableTabs[o];if(!t)return;this.focusedTabId=t.id;void this.focusTab(t.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const t=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!t||t.isInactive)return;o.preventDefault();this.selectTab(t.id,{focus:true})}handleKeyDown(o){const t=this.selectableTabs;if(!t.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const r=this.selectionFollowsFocus?t.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(r<0)return;const s=this.orientation==="vertical";let n=null;let a=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}if(o.key==="Home"){const o=t.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...t].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:t.length-1-o}if(a){o.preventDefault();this.dsRovingExit.emit(a);return}if(n!==null&&n!==r){o.preventDefault();const r=t[n];if(this.selectionFollowsFocus){this.selectTab(r.id)}else{this.moveFocusToIndex(n)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const t=this.orientation==="vertical";const r=this.background==="navigation";return s(n,{key:"644c159ed30cfa3d1697e521dd2431438fcb7922",class:"tab-group-nav-host"},s("div",{key:"285f43ef68195e3c21dada0057519285f77a6850",role:"tablist",class:{"tab-list":true,"tab-list--vertical":t,"tab-list--on-navigation":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":t?"vertical":undefined},this.tabs.map(((r,n)=>{if(e(r)){return s("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":t},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const a=r.id===this.value;return s("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,"ds-control-inactive":!!r.isInactive,[o]:!!o},"aria-selected":a,"aria-disabled":r.isInactive?"true":undefined,"aria-controls":r.panelId??undefined,disabled:r.isInactive,tabIndex:this.tabIndexForTab(r),onClick:()=>!r.isInactive&&this.selectTab(r.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=r.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!r.dot}},s("ds-text",{as:"span",variant:"text-body-medium",emphasis:a,color:"inherit"},r.label),r.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return l()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(a(o))){customElements.define(a(o),u)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break;case"ds-text":if(!customElements.get(a(o))){c()}break}}))}b();export{u as T,b as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as o,H as t,c as r,h as s,a as n,t as a}from"./index.js";import{g as i,i as e}from"./p-BQq26pt9.js";import{d}from"./p-CHcS6Z4V.js";import{d as c}from"./p-emacH2W5.js";const l=()=>`.sc-ds-tab-group-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-nav::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-control-inactive.sc-ds-tab-group-nav-h,.ds-control-inactive.sc-ds-tab-group-nav{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-tab-group-nav-h{display:block}.tab-list.sc-ds-tab-group-nav{display:flex;align-items:center;gap:var(--dimension-space-050);position:relative}.tab-list--vertical.sc-ds-tab-group-nav{flex-direction:column;align-items:stretch}.tab.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;gap:var(--dimension-space-050);padding:var(--dimension-space-075);background-color:transparent;border:none;border-radius:var(--dimension-radius-025);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);position:relative;transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--dimension-size-400);min-width:var(--dimension-size-400);box-sizing:border-box;--_hover-bg:var(--color-interaction-hover);--_pressed-bg:var(--color-interaction-pressed);--_dot:var(--color-foreground-bold-brand);--_dot-ring:var(--color-background-secondary)}.tab.sc-ds-tab-group-nav::after{content:'';position:absolute;inset:0;border-radius:var(--dimension-radius-025, 2px);background:transparent;pointer-events:none;transition:none}.tab.sc-ds-tab-group-nav:hover::after{background:var(--_hover-bg);transition:none}.tab.sc-ds-tab-group-nav:active::after{background:var(--_pressed-bg);transition:none}.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-primary)}.tab-list--vertical.sc-ds-tab-group-nav .tab.sc-ds-tab-group-nav{justify-content:flex-start}.tab__label.sc-ds-tab-group-nav{position:relative;display:inline-flex;align-items:center;padding:0 var(--dimension-space-025);white-space:nowrap}.tab__label--dot.sc-ds-tab-group-nav{padding-right:calc(var(--dimension-space-025) + var(--dimension-space-050))}.tab__dot.sc-ds-tab-group-nav{position:absolute;top:0;right:0;pointer-events:none}.on-medium.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-medium-background-hover);--_pressed-bg:var(--color-interaction-on-medium-background-pressed);--_dot-ring:var(--color-background-medium-neutral);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.on-bold.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-bold-background-hover);--_pressed-bg:var(--color-interaction-on-bold-background-pressed);--_dot-ring:var(--color-background-bold-neutral);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group-nav{--_hover-bg:var(--color-interaction-on-strong-background-hover);--_pressed-bg:var(--color-interaction-on-strong-background-pressed);--_dot-ring:var(--color-background-strong-neutral);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus);color:var(--color-foreground-on-bold-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group-nav{color:var(--color-foreground-on-bold-background-primary)}.on-always-dark.sc-ds-tab-group-nav{--_hover-bg:var(--color-always-dark-interaction-hover);--_pressed-bg:var(--color-always-dark-interaction-pressed);--_dot-ring:var(--color-always-dark-background);--ds-focus-ring-color:var(--color-always-dark-interaction-focus);color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group-nav{color:var(--color-always-dark-foreground-primary)}.on-navigation.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-secondary);--_hover-bg:var(--color-navigation-interaction-hover);--_pressed-bg:var(--color-navigation-interaction-pressed);--_dot:var(--color-navigation-foreground-brand);--_dot-ring:var(--color-navigation-background);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.on-navigation.tab--selected.sc-ds-tab-group-nav{color:var(--color-navigation-foreground-primary)}.tab-list--on-navigation.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{background-color:var(--color-navigation-border-tertiary)}.tab-divider.sc-ds-tab-group-nav{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-space-100);height:var(--dimension-size-400);padding-block:var(--dimension-space-075);flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group-nav{width:var(--dimension-stroke-width-012);align-self:stretch;background-color:var(--color-border-secondary)}.tab-divider--vertical.sc-ds-tab-group-nav{width:auto;height:var(--dimension-space-100);align-self:stretch;padding-block:0;padding-inline:var(--dimension-space-075)}.tab-divider--vertical.sc-ds-tab-group-nav .tab-divider__line.sc-ds-tab-group-nav{width:auto;height:var(--dimension-stroke-width-012);align-self:stretch}`;const u=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=r(this,"dsChange");this.dsRovingExit=r(this,"dsRovingExit");this.value="";this.tabs=[];this.ariaLabel=null;this.orientation="horizontal";this.selectionFollowsFocus=true;this.rovingEnabled=true;this.focusedTabId=""}get selectableTabs(){return i(this.tabs)}componentWillLoad(){this.syncFocusedTabId(this.value)}onValueChange(o,t){if(!this.selectionFollowsFocus){if(t===undefined||o!==this.focusedTabId){this.syncFocusedTabId(o)}return}if(t===undefined||o===t)return;requestAnimationFrame((()=>{const t=document.activeElement;if(!t||!this.el.contains(t))return;const r=t.getAttribute("data-tab-id");if(r===o)return;const s=this.el.querySelector(`[data-tab-id="${o}"]`);if(s){s.focus({preventScroll:true})}else{t.blur()}}))}onTabsChange(){if(!this.selectableTabs.some((o=>o.id===this.focusedTabId))){this.syncFocusedTabId(this.value)}}async focusTab(o){this.focusedTabId=o;const t=this.el.querySelector(`[data-tab-id="${o}"]`);t?.focus({preventScroll:true})}async focusLastTab(){const o=this.selectableTabs;const t=[...o].reverse().find((o=>!o.isInactive));if(t)await this.focusTab(t.id)}async focusFirstTab(){const o=this.selectableTabs.find((o=>!o.isInactive));if(o)await this.focusTab(o.id)}syncFocusedTabId(o){const t=this.selectableTabs;if(t.some((t=>t.id===o&&!t.isInactive))){this.focusedTabId=o;return}const r=t.find((o=>!o.isInactive));this.focusedTabId=r?.id??""}selectTab(o,t){this.value=o;this.focusedTabId=o;this.dsChange.emit(o);if(t?.focus!==false){void this.focusTab(o)}}getFocusedIndex(){return this.selectableTabs.findIndex((o=>o.id===this.focusedTabId))}findEnabledLinear(o,t){const r=this.selectableTabs;for(let s=o+t;s>=0&&s<r.length;s+=t){if(!r[s]?.isInactive)return s}return null}findEnabled(o,t){const r=this.selectableTabs;const s=r.length;for(let n=0;n<s;n++){const a=(o+t*(n+1)+s*(n+1))%s;if(!r[a]?.isInactive)return a}return o}moveFocusToIndex(o){const t=this.selectableTabs[o];if(!t)return;this.focusedTabId=t.id;void this.focusTab(t.id)}activateFocusedTab(o){if(o.key!=="Enter"&&o.key!==" ")return;const t=this.selectableTabs.find((o=>o.id===this.focusedTabId));if(!t||t.isInactive)return;o.preventDefault();this.selectTab(t.id,{focus:true})}handleKeyDown(o){const t=this.selectableTabs;if(!t.length)return;if(!this.selectionFollowsFocus){if(o.key==="Enter"||o.key===" "){this.activateFocusedTab(o);return}}const r=this.selectionFollowsFocus?t.findIndex((o=>o.id===this.value)):this.getFocusedIndex();if(r<0)return;const s=this.orientation==="vertical";let n=null;let a=null;if(!s){if(o.key==="ArrowRight"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowLeft"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}else{if(o.key==="ArrowDown"){if(this.selectionFollowsFocus){n=this.findEnabled(r,1)}else{const o=this.findEnabledLinear(r,1);if(o===null)a="end";else n=o}}else if(o.key==="ArrowUp"){if(this.selectionFollowsFocus){n=this.findEnabled(r,-1)}else{const o=this.findEnabledLinear(r,-1);if(o===null)a="start";else n=o}}}if(o.key==="Home"){const o=t.findIndex((o=>!o.isInactive));n=o===-1?null:o}else if(o.key==="End"){const o=[...t].reverse().findIndex((o=>!o.isInactive));n=o===-1?null:t.length-1-o}if(a){o.preventDefault();this.dsRovingExit.emit(a);return}if(n!==null&&n!==r){o.preventDefault();const r=t[n];if(this.selectionFollowsFocus){this.selectTab(r.id)}else{this.moveFocusToIndex(n)}}}getBgClass(){if(!this.background||this.background==="faint")return"";if(this.background==="always-dark")return"on-always-dark";if(this.background==="navigation")return"on-navigation";return`on-${this.background}`}tabIndexForTab(o){if(!this.rovingEnabled)return-1;if(this.selectionFollowsFocus){return o.id===this.value?0:-1}return o.id===this.focusedTabId?0:-1}render(){const o=this.getBgClass();const t=this.orientation==="vertical";const r=this.background==="navigation";return s(n,{key:"644c159ed30cfa3d1697e521dd2431438fcb7922",class:"tab-group-nav-host"},s("div",{key:"285f43ef68195e3c21dada0057519285f77a6850",role:"tablist",class:{"tab-list":true,"tab-list--vertical":t,"tab-list--on-navigation":r},"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-orientation":t?"vertical":undefined},this.tabs.map(((r,n)=>{if(e(r)){return s("div",{key:`divider-${n}`,class:{"tab-divider":true,"tab-divider--vertical":t},"aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const a=r.id===this.value;return s("button",{key:r.id,type:"button",role:"tab","data-tab-id":r.id,class:{tab:true,"tab--selected":a,"ds-focus-ring-inset":true,"ds-control-inactive":!!r.isInactive,[o]:!!o},"aria-selected":a,"aria-disabled":r.isInactive?"true":undefined,"aria-controls":r.panelId??undefined,disabled:r.isInactive,tabIndex:this.tabIndexForTab(r),onClick:()=>!r.isInactive&&this.selectTab(r.id),onFocus:()=>{if(!this.selectionFollowsFocus){this.focusedTabId=r.id}}},s("span",{class:{tab__label:true,"tab__label--dot":!!r.dot}},s("ds-text",{as:"span",variant:"text-body-medium",emphasis:a,color:"inherit"},r.label),r.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",background:"var(--_dot-ring)",label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}}static get style(){return l()}},[2,"ds-tab-group-nav",{value:[1025],tabs:[16],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],orientation:[1],selectionFollowsFocus:[4,"selection-follows-focus"],rovingEnabled:[4,"roving-enabled"],focusedTabId:[32],focusTab:[64],focusLastTab:[64],focusFirstTab:[64]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}],tabs:[{onTabsChange:0}]}]);function b(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group-nav","ds-badge","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group-nav":if(!customElements.get(a(o))){customElements.define(a(o),u)}break;case"ds-badge":if(!customElements.get(a(o))){d()}break;case"ds-text":if(!customElements.get(a(o))){c()}break}}))}b();export{u as T,b as d};
|
|
2
|
+
//# sourceMappingURL=p-CfwQwstk.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-9Qu1ls2y.js";import{d as r}from"./p-BOQRM49Q.js";import{C as s}from"./p-Cx-ywr1e.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-filled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"618114abfee2b998f3426ab282928a1727ac1a67",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"a67a6a0b907879b53e5c6ba14bee49a5abbba8cc",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"74682d9d33b26c0d2bf8946db979b30e05ce873b",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"633eb6022d1efd850a3ea814c219fcf1cac2d640",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"0d7c6b95a244aec87d5f52da3ee3251aa19242a5",class:"button-filled__label ds-interaction-fill__content",as:"span",variant:t,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as t,H as o,c as n,h as i,a as d,t as l}from"./index.js";import{d as e}from"./p-9Qu1ls2y.js";import{d as r}from"./p-emacH2W5.js";import{C as s}from"./p-Cx-ywr1e.js";import{c as a}from"./p-DuFm-ieS.js";const c=()=>`.sc-ds-button-filled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-filled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-filled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-filled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-filled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-filled-h,.ds-interaction-fill.sc-ds-button-filled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before,.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-filled-h::before,.ds-interaction-fill.sc-ds-button-filled::before{z-index:1}.ds-interaction-fill.sc-ds-button-filled-h::after,.ds-interaction-fill.sc-ds-button-filled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-filled-h,.ds-interaction-fill--bordered.sc-ds-button-filled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-filled-h::before,.ds-interaction-fill--selected.sc-ds-button-filled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-filled-h,.ds-interaction-fill--selected.sc-ds-button-filled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-filled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-filled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-filled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-filled-h>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill.sc-ds-button-filled>.ds-interaction-fill__content.sc-ds-button-filled,.ds-interaction-fill__content.sc-ds-button-filled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-filled-h,.ds-interaction-fill--on-medium.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-filled-h,.ds-interaction-fill--on-bold.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-filled-h,.ds-interaction-fill--on-strong.sc-ds-button-filled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-filled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-filled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-filled-h,.ds-interaction-fill--on-navigation.sc-ds-button-filled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-filled-h,.ds-control-inactive.sc-ds-button-filled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-filled-h,.ds-control--md.sc-ds-button-filled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-filled-h,.ds-control--sm.sc-ds-button-filled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-filled-h,.ds-control--xs.sc-ds-button-filled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-filled-h,.ds-control-width--hug.sc-ds-button-filled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-filled-h,.ds-control-width--fill.sc-ds-button-filled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-filled-h{display:inline-flex;outline:none;--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled-host--icon.ds-control-width--hug.sc-ds-button-filled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-filled-host--icon.ds-control-width--fill.sc-ds-button-filled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-filled-h .button-filled.sc-ds-button-filled{width:100%}.button-filled.sc-ds-button-filled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background-color:var(--ds-button-filled-bg);color:var(--ds-button-filled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:background-color var(--effect-motion-short-2), color var(--effect-motion-short-2), transform var(--effect-motion-short-2)}.button-filled--icon.sc-ds-button-filled{width:100%;height:100%;padding:0}.button-filled.sc-ds-button-filled:active:not(:disabled):not(.ds-control-inactive){transform:scale(var(--dimension-scale-subtle))}.button-filled__icon-wrap.sc-ds-button-filled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-filled__label.sc-ds-button-filled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-neutral);--ds-button-filled-fg:var(--color-foreground-faint-neutral)}.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-brand);--ds-button-filled-fg:var(--color-foreground-faint-brand)}.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-ai);--ds-button-filled-fg:var(--color-foreground-faint-ai)}.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-negative);--ds-button-filled-fg:var(--color-foreground-faint-negative)}.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-warning);--ds-button-filled-fg:var(--color-foreground-faint-warning)}.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-caution);--ds-button-filled-fg:var(--color-foreground-faint-caution)}.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-positive);--ds-button-filled-fg:var(--color-foreground-faint-positive)}.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-guide);--ds-button-filled-fg:var(--color-foreground-faint-guide)}.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-bold-walkthrough);--ds-button-filled-fg:var(--color-foreground-faint-walkthrough)}.button-filled--contrast-strong.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-neutral);--ds-button-filled-fg:var(--color-foreground-medium-neutral)}.button-filled--contrast-strong.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-brand);--ds-button-filled-fg:var(--color-foreground-medium-brand)}.button-filled--contrast-strong.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-ai);--ds-button-filled-fg:var(--color-foreground-medium-ai)}.button-filled--contrast-strong.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-negative);--ds-button-filled-fg:var(--color-foreground-medium-negative)}.button-filled--contrast-strong.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-warning);--ds-button-filled-fg:var(--color-foreground-medium-warning)}.button-filled--contrast-strong.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-caution);--ds-button-filled-fg:var(--color-foreground-medium-caution)}.button-filled--contrast-strong.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-positive);--ds-button-filled-fg:var(--color-foreground-medium-positive)}.button-filled--contrast-strong.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-guide);--ds-button-filled-fg:var(--color-foreground-medium-guide)}.button-filled--contrast-strong.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-strong-walkthrough);--ds-button-filled-fg:var(--color-foreground-medium-walkthrough)}.button-filled--contrast-medium.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-neutral);--ds-button-filled-fg:var(--color-foreground-strong-neutral)}.button-filled--contrast-medium.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-brand);--ds-button-filled-fg:var(--color-foreground-strong-brand)}.button-filled--contrast-medium.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-ai);--ds-button-filled-fg:var(--color-foreground-strong-ai)}.button-filled--contrast-medium.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-negative);--ds-button-filled-fg:var(--color-foreground-strong-negative)}.button-filled--contrast-medium.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-warning);--ds-button-filled-fg:var(--color-foreground-strong-warning)}.button-filled--contrast-medium.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-caution);--ds-button-filled-fg:var(--color-foreground-strong-caution)}.button-filled--contrast-medium.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-positive);--ds-button-filled-fg:var(--color-foreground-strong-positive)}.button-filled--contrast-medium.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-guide);--ds-button-filled-fg:var(--color-foreground-strong-guide)}.button-filled--contrast-medium.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-medium-walkthrough);--ds-button-filled-fg:var(--color-foreground-strong-walkthrough)}.button-filled--contrast-faint.button-filled--intent-neutral.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-neutral);--ds-button-filled-fg:var(--color-foreground-bold-neutral)}.button-filled--contrast-faint.button-filled--intent-brand.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-brand);--ds-button-filled-fg:var(--color-foreground-bold-brand)}.button-filled--contrast-faint.button-filled--intent-ai.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-ai);--ds-button-filled-fg:var(--color-foreground-bold-ai)}.button-filled--contrast-faint.button-filled--intent-negative.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-negative);--ds-button-filled-fg:var(--color-foreground-bold-negative)}.button-filled--contrast-faint.button-filled--intent-warning.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-warning);--ds-button-filled-fg:var(--color-foreground-bold-warning)}.button-filled--contrast-faint.button-filled--intent-caution.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-caution);--ds-button-filled-fg:var(--color-foreground-bold-caution)}.button-filled--contrast-faint.button-filled--intent-positive.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-positive);--ds-button-filled-fg:var(--color-foreground-bold-positive)}.button-filled--contrast-faint.button-filled--intent-guide.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-guide);--ds-button-filled-fg:var(--color-foreground-bold-guide)}.button-filled--contrast-faint.button-filled--intent-walkthrough.sc-ds-button-filled{--ds-button-filled-bg:var(--color-background-faint-walkthrough);--ds-button-filled-fg:var(--color-foreground-bold-walkthrough)}`;const u={md:"md",sm:"sm",xs:"xs"};const f=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClick=n(this,"dsClick");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.intent="brand";this.contrast="bold";this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=t=>{if(this.isInactive)return;this.dsClick.emit(t)}}async setFocus(){this.buttonEl?.focus()}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const t=s[this.size];const o=u[this.size];const n={"button-filled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!this.isInactive,"ds-interaction-fill--on-bold":this.contrast==="bold","ds-interaction-fill--on-strong":this.contrast==="strong","ds-interaction-fill--on-medium":this.contrast==="medium","ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-filled--icon":this.variant==="icon","button-filled--label":this.variant==="label","button-filled--icon-label":this.variant==="icon-label",[`button-filled--intent-${this.intent}`]:true,[`button-filled--contrast-${this.contrast}`]:this.contrast!=="bold"};return i(d,{key:"618114abfee2b998f3426ab282928a1727ac1a67",class:{"button-filled-host":true,"button-filled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...a(this.width)},tabIndex:-1},i("button",{key:"a67a6a0b907879b53e5c6ba14bee49a5abbba8cc",ref:t=>{this.buttonEl=t??null},type:this.type,class:n,disabled:this.isInactive,"aria-label":this.accessibleName,onClick:this.handleClick},this.showIcon&&i("span",{key:"74682d9d33b26c0d2bf8946db979b30e05ce873b",class:"button-filled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"633eb6022d1efd850a3ea814c219fcf1cac2d640",name:this.icon,size:o,color:"inherit"})),this.showLabel&&i("ds-text",{key:"0d7c6b95a244aec87d5f52da3ee3251aa19242a5",class:"button-filled__label ds-interaction-fill__content",as:"span",variant:t,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return c()}},[2,"ds-button-filled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],intent:[1],contrast:[1],isInactive:[4,"is-inactive"],type:[1],ariaLabel:[1,"aria-label"],setFocus:[64]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-button-filled","ds-icon","ds-text"];t.forEach((t=>{switch(t){case"ds-button-filled":if(!customElements.get(l(t))){customElements.define(l(t),f)}break;case"ds-icon":if(!customElements.get(l(t))){e()}break;case"ds-text":if(!customElements.get(l(t))){r()}break}}))}b();export{f as B,b as d};
|
|
2
|
+
//# sourceMappingURL=p-CvjQuj6A.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
const o=["none","cool","neutral","warm","fresh"];const n=["cool","neutral","warm","fresh"];const r="neutral";const t={none:"None",cool:"Cool",neutral:"Neutral",warm:"Warm",fresh:"Fresh"};const c={cool:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-blue-strong-background)",position:100}]},neutral:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-grey-strong-background)",position:100}]},warm:{opacity:.1,stops:[{color:"var(--color-background-transparent)",position:0},{color:"var(--color-color-intent-yellow-strong-background)",position:100}]},fresh:{opacity:.4,stops:[{color:"var(--color-color-intent-cyan-faint-background)",position:0},{color:"var(--color-background-transparent)",position:47},{color:"var(--color-background-transparent)",position:58},{color:"var(--color-color-intent-red-faint-background)",position:83},{color:"var(--color-color-intent-pink-faint-background)",position:100}]}};const a="100% 100% at 0% 0%";function s(o){const n=e(o);return n==="none"?null:c[n]}function l(o){return String(s(o)?.opacity??0)}function i(n){return o.includes(n)}function e(o){return o!=null&&i(o)?o:r}function u(o){const n=e(o);if(n==="none")return"none";return p(c[n].stops)}function p(o){const n=o.map((o=>`${o.color} ${o.position}%`)).join(", ");return`radial-gradient(${a}, ${n})`}export{r as D,o as S,n as a,t as b,u as c,e as n,l as s};
|
|
2
|
+
//# sourceMappingURL=p-D0B9uDTP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["SHELL_GRADIENT_PRESETS","SHELL_GRADIENT_WASH_PRESETS","DEFAULT_SHELL_GRADIENT_PRESET","SHELL_GRADIENT_PRESET_LABELS","none","cool","neutral","warm","fresh","SHELL_GRADIENT_RECIPES","opacity","stops","color","position","GRADIENT_GEOMETRY","shellGradientPresetRecipe","preset","normalized","normalizeShellGradientPreset","shellGradientPresetOpacity","String","isShellGradientPreset","value","includes","buildShellRadialGradientForPreset","buildShellRadialGradientFromStops","serialized","map","stop","join"],"sources":["src/wc/nav/shell-gradient-presets.ts"],"sourcesContent":["/** Built-in shell chrome wash presets. */\nexport type ShellGradientPreset = 'none' | 'cool' | 'neutral' | 'warm' | 'fresh';\n\nexport const SHELL_GRADIENT_PRESETS: ShellGradientPreset[] = [\n 'none',\n 'cool',\n 'neutral',\n 'warm',\n 'fresh',\n];\n\n/** Wash presets shown after the `none` option in pickers. */\nexport const SHELL_GRADIENT_WASH_PRESETS: Exclude<ShellGradientPreset, 'none'>[] = [\n 'cool',\n 'neutral',\n 'warm',\n 'fresh',\n];\n\n/** Default wash when `gradient-preset` is omitted. */\nexport const DEFAULT_SHELL_GRADIENT_PRESET: ShellGradientPreset = 'neutral';\n\nexport const SHELL_GRADIENT_PRESET_LABELS: Record<ShellGradientPreset, string> = {\n none: 'None',\n cool: 'Cool',\n neutral: 'Neutral',\n warm: 'Warm',\n fresh: 'Fresh',\n};\n\nexport interface ShellGradientStop {\n color: string;\n position: number;\n}\n\nexport interface ShellGradientRecipe {\n opacity: number;\n stops: readonly ShellGradientStop[];\n}\n\nconst SHELL_GRADIENT_RECIPES: Record<Exclude<ShellGradientPreset, 'none'>, ShellGradientRecipe> = {\n cool: {\n opacity: 0.1,\n stops: [\n { color: 'var(--color-background-transparent)', position: 0 },\n { color: 'var(--color-color-intent-blue-strong-background)', position: 100 },\n ],\n },\n neutral: {\n opacity: 0.1,\n stops: [\n { color: 'var(--color-background-transparent)', position: 0 },\n { color: 'var(--color-color-intent-grey-strong-background)', position: 100 },\n ],\n },\n warm: {\n opacity: 0.1,\n stops: [\n { color: 'var(--color-background-transparent)', position: 0 },\n { color: 'var(--color-color-intent-yellow-strong-background)', position: 100 },\n ],\n },\n fresh: {\n opacity: 0.4,\n stops: [\n { color: 'var(--color-color-intent-cyan-faint-background)', position: 0 },\n { color: 'var(--color-background-transparent)', position: 47 },\n { color: 'var(--color-background-transparent)', position: 58 },\n { color: 'var(--color-color-intent-red-faint-background)', position: 83 },\n { color: 'var(--color-color-intent-pink-faint-background)', position: 100 },\n ],\n },\n};\n\nconst GRADIENT_GEOMETRY = '100% 100% at 0% 0%';\n\nexport function shellGradientPresetStopToken(preset: ShellGradientPreset): string | null {\n if (preset === 'none') return null;\n const stops = SHELL_GRADIENT_RECIPES[preset].stops;\n return stops[stops.length - 1]?.color ?? null;\n}\n\nexport function shellGradientPresetRecipe(preset: ShellGradientPreset): ShellGradientRecipe | null {\n const normalized = normalizeShellGradientPreset(preset);\n return normalized === 'none' ? null : SHELL_GRADIENT_RECIPES[normalized];\n}\n\nexport function shellGradientPresetOpacity(preset: ShellGradientPreset): string {\n return String(shellGradientPresetRecipe(preset)?.opacity ?? 0);\n}\n\nexport function isShellGradientPreset(value: string): value is ShellGradientPreset {\n return (SHELL_GRADIENT_PRESETS as string[]).includes(value);\n}\n\n/**\n * Coerce unknown/absent presets to the default. Runtime values escape the\n * type: removing the reflected `gradient-preset` attribute (e.g. an Angular\n * `[attr.gradient-preset]=\"null\"` binding) drives the prop to null past its\n * field default — without normalization the stop lookup interpolates the\n * literal string \"undefined\" into CSS and the wash silently disappears.\n */\nexport function normalizeShellGradientPreset(\n value: string | null | undefined,\n): ShellGradientPreset {\n return value != null && isShellGradientPreset(value) ? value : DEFAULT_SHELL_GRADIENT_PRESET;\n}\n\n/** Radial wash for a preset — transparent at top-left into the intent stop. `none` returns no image. */\nexport function buildShellRadialGradientForPreset(preset: ShellGradientPreset): string {\n const normalized = normalizeShellGradientPreset(preset);\n if (normalized === 'none') return 'none';\n\n return buildShellRadialGradientFromStops(SHELL_GRADIENT_RECIPES[normalized].stops);\n}\n\n/** Build the production shell geometry from an ordered set of design-time stops. */\nexport function buildShellRadialGradientFromStops(stops: readonly ShellGradientStop[]): string {\n const serialized = stops.map(stop => `${stop.color} ${stop.position}%`).join(', ');\n return `radial-gradient(${GRADIENT_GEOMETRY}, ${serialized})`;\n}\n"],"mappings":"AAGO,MAAMA,EAAgD,CAC3D,OACA,OACA,UACA,OACA,SAIK,MAAMC,EAAsE,CACjF,OACA,UACA,OACA,SAIK,MAAMC,EAAqD,UAE3D,MAAMC,EAAoE,CAC/EC,KAAM,OACNC,KAAM,OACNC,QAAS,UACTC,KAAM,OACNC,MAAO,SAaT,MAAMC,EAA4F,CAChGJ,KAAM,CACJK,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,mDAAoDC,SAAU,OAG3EP,QAAS,CACPI,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,mDAAoDC,SAAU,OAG3EN,KAAM,CACJG,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,sCAAuCC,SAAU,GAC1D,CAAED,MAAO,qDAAsDC,SAAU,OAG7EL,MAAO,CACLE,QAAS,GACTC,MAAO,CACL,CAAEC,MAAO,kDAAmDC,SAAU,GACtE,CAAED,MAAO,sCAAuCC,SAAU,IAC1D,CAAED,MAAO,sCAAuCC,SAAU,IAC1D,CAAED,MAAO,iDAAkDC,SAAU,IACrE,CAAED,MAAO,kDAAmDC,SAAU,QAK5E,MAAMC,EAAoB,qBAQpB,SAAUC,EAA0BC,GACxC,MAAMC,EAAaC,EAA6BF,GAChD,OAAOC,IAAe,OAAS,KAAOR,EAAuBQ,EAC/D,CAEM,SAAUE,EAA2BH,GACzC,OAAOI,OAAOL,EAA0BC,IAASN,SAAW,EAC9D,CAEM,SAAUW,EAAsBC,GACpC,OAAQtB,EAAoCuB,SAASD,EACvD,CASM,SAAUJ,EACdI,GAEA,OAAOA,GAAS,MAAQD,EAAsBC,GAASA,EAAQpB,CACjE,CAGM,SAAUsB,EAAkCR,GAChD,MAAMC,EAAaC,EAA6BF,GAChD,GAAIC,IAAe,OAAQ,MAAO,OAElC,OAAOQ,EAAkChB,EAAuBQ,GAAYN,MAC9E,CAGM,SAAUc,EAAkCd,GAChD,MAAMe,EAAaf,EAAMgB,KAAIC,GAAQ,GAAGA,EAAKhB,SAASgB,EAAKf,cAAagB,KAAK,MAC7E,MAAO,mBAAmBf,MAAsBY,IAClD,Q","ignoreList":[]}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as i,h as o,a as s,t as n}from"./index.js";import{d as e}from"./p-emacH2W5.js";import{a as r,T as a}from"./p-drBA73M_.js";import{r as d}from"./p-BWUTr_XN.js";import{r as c}from"./p-C1cBr-Ri.js";import{C as l}from"./p-Cx-ywr1e.js";const h=new Set(["⌘","⇧","⌥","⌃"]);const p={alt:"⌥",cmd:"⌘",command:"⌘",control:"⌃",ctrl:"⌃",option:"⌥",shift:"⇧"};function m(t){return p[t.toLowerCase()]??t}function u(t){const i=t.trim();if(!i)return[];if(i.includes("+")){return i.split("+").map((t=>t.trim())).filter(Boolean).map(m)}if(/\s/.test(i)){return i.split(/\s+/).filter(Boolean).map(m)}const o=Array.from(i);const s=[];while(o.length>1&&h.has(o[0])){s.push(o.shift())}s.push(o.join(""));return s}const f=()=>`.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-tooltip-h,.ds-control--md.sc-ds-tooltip{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-tooltip-h,.ds-control--sm.sc-ds-tooltip{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-tooltip-h,.ds-control--xs.sc-ds-tooltip{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.key-hint-group.sc-ds-tooltip{display:inline-flex;align-items:center;gap:var(--dimension-stroke-width-012);width:max-content;flex-shrink:0}.key-hint.sc-ds-tooltip{box-sizing:border-box;min-width:var(--ds-control-icon, var(--dimension-iconography-md));width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));padding-inline:0;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-015) solid var(--color-border-tertiary);border-bottom-width:var(--dimension-stroke-width-025);border-radius:var(--dimension-radius-025);color:var(--color-foreground-primary)}.key-hint--wide.sc-ds-tooltip{width:calc(var(--ds-control-icon, var(--dimension-iconography-md)) * 1.5)}.key-hint__label.sc-ds-tooltip{display:inline-flex;width:max-content;min-width:max-content;font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);line-height:1;font-weight:var(--typography-weight-bold);letter-spacing:0;text-transform:uppercase;color:inherit}.ds-control--xs.sc-ds-tooltip .key-hint__label.sc-ds-tooltip{font-size:calc(var(--typography-fontsize-xs) * 0.78)}.tooltip-popup.sc-ds-tooltip{box-sizing:border-box;background-color:var(--color-background-primary);border-radius:var(--ds-control-radius, var(--dimension-radius-025));box-shadow:var(--effect-elevation-elevated-floating);white-space:nowrap;pointer-events:none;animation:tooltipFadeIn var(--effect-motion-short-2) forwards;will-change:transform;backface-visibility:hidden}.tooltip-popup--instant.sc-ds-tooltip{animation:none;opacity:1}.tooltip-popup--closing.sc-ds-tooltip{animation:tooltipFadeOut var(--effect-motion-short-3) forwards}.tooltip-inner.sc-ds-tooltip{box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075))}.tooltip-inner.sc-ds-tooltip>ds-text.sc-ds-tooltip{flex-shrink:0;min-width:max-content;max-width:none;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const g={md:a.size400,sm:a.size300,xs:a.size200};let v=0;let y=0;let b=null;function x(t){const i=document.createElement("ds-text");i.as="span";i.variant=t.variant;i.emphasis=t.emphasis??false;i.color=t.color??"inherit";if(t.wrap)i.wrap=t.wrap;i.textContent=t.text;return i}function C(t){t.style.flexShrink="0";t.style.minWidth="max-content";t.style.maxWidth="none";t.style.padding="0 var(--ds-control-label-inset, var(--dimension-space-025))";t.style.color="var(--color-foreground-primary)"}const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=r.space050;this.alignOffset=0;this.delay=a.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++y}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=null;this.positionObserver=null;this.skipEnterAnimation=false;this.isOpen=false;this.mouseEnterHandler=()=>this.show();this.mouseLeaveHandler=()=>this.hide();this.focusHandler=()=>this.show();this.blurHandler=t=>{const i=t.relatedTarget;if(i&&this.anchor?.contains(i))return;this.hide()}}componentDidLoad(){this.bindAnchor()}disconnectedCallback(){if(b===this)b=null;this.unbindAnchor();this.clearTimers();this.destroyPopup()}onContentOrPositionChange(){if(!this.label?.trim()){if(this.isOpen||this.popupEl)this.hideInstant();return}if(!this.popupEl||!this.isOpen)return;this.renderPopupContent();this.schedulePosition()}get viewportPadPx(){return d(a.space050,a.space050)}get sideOffsetPx(){return d(this.sideOffset,a.space050)}get alignOffsetPx(){return d(this.alignOffset,0)}get hoverDelayMs(){return c(this.delay,a.animationDelayMedium3)}get instantReopenMs(){return c(a.animationDurationMedium1,a.animationDurationMedium1)}get fadeOutMs(){return c(a.motionShort3,a.animationDurationShort3)}get tooltipFallbackWidthPx(){return d(a.tooltipFallbackWidth,a.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=g[this.size];return d(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const o=i[0]??this.el.firstElementChild;if(!o)return;this.anchor=o;o.setAttribute("aria-describedby",this.tooltipId);o.addEventListener("mouseenter",this.mouseEnterHandler);o.addEventListener("mouseleave",this.mouseLeaveHandler);o.addEventListener("focusin",this.focusHandler);o.addEventListener("focusout",this.blurHandler)}unbindAnchor(){if(!this.anchor)return;this.anchor.removeAttribute("aria-describedby");this.anchor.removeEventListener("mouseenter",this.mouseEnterHandler);this.anchor.removeEventListener("mouseleave",this.mouseLeaveHandler);this.anchor.removeEventListener("focusin",this.focusHandler);this.anchor.removeEventListener("focusout",this.blurHandler);this.anchor=null}clearTimers(){if(this.delayTimer){clearTimeout(this.delayTimer);this.delayTimer=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}destroyPopup(){this.positionObserver?.disconnect();this.positionObserver=null;if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}schedulePosition(){if(!this.popupEl)return;const t=()=>{const t=this.popupEl?.querySelector(":scope > .tooltip-inner > ds-text");if(t instanceof i)C(t)};requestAnimationFrame((()=>{t();this.calculatePosition();requestAnimationFrame((()=>{t();this.calculatePosition()}))}));this.positionObserver?.disconnect();this.positionObserver=new ResizeObserver((()=>this.calculatePosition()));this.positionObserver.observe(this.popupEl)}hideInstant(){this.clearTimers();v=Date.now();if(b===this)b=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-v<this.instantReopenMs;if(b&&b!==this){b.hideInstant();t=true}b=this;this.skipEnterAnimation=t;if(t){this.mountPopup();return}this.delayTimer=setTimeout((()=>{this.delayTimer=null;if(!this.label?.trim())return;this.mountPopup()}),this.hoverDelayMs)}hide(){this.clearTimers();if(!this.popupEl&&!this.isOpen)return;v=Date.now();if(b===this)b=null;if(!this.popupEl){this.isOpen=false;return}this.popupEl.classList.remove("tooltip-popup--instant");this.popupEl.classList.add("tooltip-popup--closing");this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}),this.fadeOutMs)}mountPopup(){if(!this.popupEl){const t=document.createElement("div");t.id=this.tooltipId;t.setAttribute("role","tooltip");t.className="tooltip-popup sc-ds-tooltip";Object.assign(t.style,{position:"fixed",left:"0",top:"0",zIndex:"var(--dimension-z-index-tooltip)",pointerEvents:"none"});document.body.appendChild(t);this.popupEl=t}this.popupEl.classList.toggle("tooltip-popup--instant",this.skipEnterAnimation);this.popupEl.classList.remove("tooltip-popup--closing");this.renderPopupContent();this.schedulePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=l[this.size];const i=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const s=document.createElement("div");s.className=`tooltip-inner ${i} ${o}`;const n=t=>{if(!this.shortcutKey||this.shortcutKeyPosition!==t)return;const i=document.createElement("span");i.className=`key-hint-group ${o}`;i.setAttribute("aria-hidden","true");for(const t of u(this.shortcutKey)){const s=document.createElement("span");const n=Array.from(t).length>1?" key-hint--wide":"";s.className=`key-hint${n} ${o}`;const e=document.createElement("span");e.className=`key-hint__label ${o}`;e.textContent=t;s.appendChild(e);i.appendChild(s)}s.appendChild(i)};n("start");const e=x({variant:t,wrap:"nowrap",text:this.label});C(e);s.appendChild(e);n("end");this.popupEl.replaceChildren(s)}calculatePosition(){if(!this.anchor||!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const o=t.offsetWidth||this.tooltipFallbackWidthPx;const s=t.offsetHeight||this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,d=0;switch(this.side){case"top":d=i.top-s-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-o+e:i.left+i.width/2-o/2+e;break;case"bottom":d=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-o+e:i.left+i.width/2-o/2+e;break;case"left":a=i.left-o-n;d=this.align==="start"?i.top+e:this.align==="end"?i.bottom-s+e:i.top+i.height/2-s/2+e;break;case"right":a=i.right+n;d=this.align==="start"?i.top+e:this.align==="end"?i.bottom-s+e:i.top+i.height/2-s/2+e;break}const c=Math.min(Math.max(a,r),window.innerWidth-o-r);const l=Math.min(Math.max(d,r),window.innerHeight-s-r);t.style.transform=`translate(${Math.round(c)}px, ${Math.round(l)}px)`}render(){return o(s,{key:"bf35f410cdc79de3acc8fa6281319fad871425be",style:{display:"contents"}},o("slot",{key:"fb783900f923b407f25a245c25029b6161ae2c11"}))}get el(){return this}static get watchers(){return{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}}static get style(){return f()}},[262,"ds-tooltip",{label:[1],size:[1],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],delay:[8],shortcutKey:[1,"shortcut-key"],shortcutKeyPosition:[1,"shortcut-key-position"]},undefined,{label:[{onContentOrPositionChange:0}],size:[{onContentOrPositionChange:0}],side:[{onContentOrPositionChange:0}],align:[{onContentOrPositionChange:0}],sideOffset:[{onContentOrPositionChange:0}],alignOffset:[{onContentOrPositionChange:0}],shortcutKey:[{onContentOrPositionChange:0}],shortcutKeyPosition:[{onContentOrPositionChange:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip","ds-text"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),w)}break;case"ds-text":if(!customElements.get(n(t))){e()}break}}))}k();export{w as T,k as d};
|
|
2
|
+
//# sourceMappingURL=p-D7SoZNpD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["MODIFIER_GLYPHS","Set","MODIFIER_LABELS","alt","cmd","command","control","ctrl","option","shift","canonicalKeyLabel","label","toLowerCase","shortcutKeyLabels","shortcut","normalized","trim","includes","split","map","part","filter","Boolean","test","characters","Array","from","labels","length","has","push","join","tooltipCss","FALLBACK_HEIGHT","md","TOKEN_DEFAULTS","size400","sm","size300","xs","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","createDsText","opts","el","document","createElement","as","variant","emphasis","color","wrap","textContent","text","styleTooltipLabel","style","flexShrink","minWidth","maxWidth","padding","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","positionObserver","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","hideInstant","renderPopupContent","schedulePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","disconnect","remove","reapplyLabelStyles","requestAnimationFrame","calculatePosition","ResizeObserver","observe","Date","now","instant","mountPopup","setTimeout","classList","add","tip","id","className","Object","assign","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","CONTROL_TEXT_VARIANT","density","sc","inner","appendShortcut","shortcutKey","group","hint","wide","replaceChildren","a","getBoundingClientRect","tw","offsetWidth","th","offsetHeight","vpPad","x","y","right","width","bottom","height","nextX","Math","min","max","window","innerWidth","nextY","innerHeight","transform","round","render","h","Host","key","display"],"sources":["src/wc/utils/shortcut-key.ts","src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["const MODIFIER_GLYPHS = new Set(['⌘', '⇧', '⌥', '⌃']);\nconst MODIFIER_LABELS: Readonly<Record<string, string>> = {\n alt: '⌥',\n cmd: '⌘',\n command: '⌘',\n control: '⌃',\n ctrl: '⌃',\n option: '⌥',\n shift: '⇧',\n};\n\nfunction canonicalKeyLabel(label: string): string {\n return MODIFIER_LABELS[label.toLowerCase()] ?? label;\n}\n\n/** Split a shortcut chord into the labels rendered on individual keycaps. */\nexport function shortcutKeyLabels(shortcut: string): string[] {\n const normalized = shortcut.trim();\n if (!normalized) return [];\n\n if (normalized.includes('+')) {\n return normalized.split('+').map(part => part.trim()).filter(Boolean).map(canonicalKeyLabel);\n }\n\n if (/\\s/.test(normalized)) {\n return normalized.split(/\\s+/).filter(Boolean).map(canonicalKeyLabel);\n }\n\n const characters = Array.from(normalized);\n const labels: string[] = [];\n while (characters.length > 1 && MODIFIER_GLYPHS.has(characters[0])) {\n labels.push(characters.shift()!);\n }\n labels.push(characters.join(''));\n return labels;\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/key-hint.css';\n\n.tooltip-popup {\n box-sizing: border-box;\n background-color: var(--color-background-primary);\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n box-shadow: var(--effect-elevation-elevated-floating);\n white-space: nowrap;\n pointer-events: none;\n animation: tooltipFadeIn var(--effect-motion-short-2) forwards;\n will-change: transform;\n backface-visibility: hidden;\n}\n\n/* Warm handoff between nearby triggers — no enter fade (avoids 20–100ms lag). */\n.tooltip-popup--instant {\n animation: none;\n opacity: 1;\n}\n\n.tooltip-popup--closing {\n animation: tooltipFadeOut var(--effect-motion-short-3) forwards;\n}\n\n/* Density: md / sm / xs via `.ds-control--*` on `.tooltip-inner`. */\n.tooltip-inner {\n box-sizing: border-box;\n height: var(--ds-control-height, var(--dimension-size-400));\n display: flex;\n align-items: center;\n gap: var(--ds-control-gap, var(--dimension-space-050));\n padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n}\n\n/*\n * Label layout lives on ds-text (metric-box + control label-inset).\n * NOTE: Stencil scopes this to `ds-text.sc-ds-tooltip`, but portaled\n * createElement ds-text loses that class when Text's <Host class> renders.\n * `renderPopupContent` therefore also sets these as inline styles.\n */\n.tooltip-inner > ds-text {\n flex-shrink: 0;\n min-width: max-content;\n max-width: none;\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n@keyframes tooltipFadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes tooltipFadeOut {\n from { opacity: 1; }\n to { opacity: 0; }\n}\n","import { Component, Prop, Element, Watch, h, Host } from '@stencil/core';\nimport {\n CONTROL_TEXT_VARIANT,\n resolveCssLengthPx,\n resolveCssTimeMs,\n TOKEN_CSS_LENGTHS,\n TOKEN_DEFAULTS,\n} from '../../utils';\nimport type { TextVariant } from '../Text/text-types';\nimport { shortcutKeyLabels } from '../../utils/shortcut-key';\n// Side-effect: register `ds-text` — the portal builds it via createElement, not JSX.\nimport '../Text/Text';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\nconst FALLBACK_HEIGHT: Record<TooltipSize, string> = {\n md: TOKEN_DEFAULTS.size400,\n sm: TOKEN_DEFAULTS.size300,\n xs: TOKEN_DEFAULTS.size200,\n};\n\nlet lastDismissedAt = 0;\nlet tooltipIdCounter = 0;\n/** Currently open tooltip — force-cleared on warm handoff so tips don't cross-fade. */\nlet activeTooltip: Tooltip | null = null;\n\ntype DsTextEl = HTMLElement & {\n as: string;\n variant: TextVariant;\n emphasis: boolean;\n color: string;\n wrap: string;\n};\n\nfunction createDsText(opts: {\n variant: TextVariant;\n emphasis?: boolean;\n color?: string;\n wrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty';\n text: string;\n}): DsTextEl {\n const el = document.createElement('ds-text') as DsTextEl;\n el.as = 'span';\n el.variant = opts.variant;\n el.emphasis = opts.emphasis ?? false;\n el.color = opts.color ?? 'inherit';\n if (opts.wrap) el.wrap = opts.wrap;\n el.textContent = opts.text;\n return el;\n}\n\n/**\n * Control-density label styles for portaled ds-text.\n * Scoped CSS requires `sc-ds-tooltip` on the host, but Text's `<Host class>`\n * overwrites imperative className — so these must be inline to stick.\n */\nfunction styleTooltipLabel(el: HTMLElement) {\n el.style.flexShrink = '0';\n el.style.minWidth = 'max-content';\n el.style.maxWidth = 'none';\n el.style.padding = '0 var(--ds-control-label-inset, var(--dimension-space-025))';\n el.style.color = 'var(--color-foreground-primary)';\n}\n\n/**\n * Imperative body portal for the popup.\n * Stencil must not own the portaled node — moving a VDOM child to `document.body`\n * causes recreate → re-portal → @State loops that freeze the page.\n */\n@Component({\n tag: 'ds-tooltip',\n styleUrl: 'Tooltip.css',\n scoped: true,\n})\nexport class Tooltip {\n @Element() el!: HTMLElement;\n\n /**\n * Tooltip text. Empty/whitespace skips show — useful when the wrapper must stay\n * mounted for layout/animation stability (e.g. PanelNav expand/collapse).\n */\n @Prop() label!: string;\n\n /** Control density (height, padding, type). */\n @Prop() size: TooltipSize = 'md';\n\n @Prop() side: TooltipSide = 'top';\n @Prop() align: TooltipAlign = 'center';\n /** Gap between anchor and tooltip — number (px) or TokoMo length. */\n @Prop() sideOffset: number | string = TOKEN_CSS_LENGTHS.space050;\n /** Cross-axis offset — number (px) or TokoMo length. */\n @Prop() alignOffset: number | string = 0;\n /**\n * Hover show delay before the tooltip appears.\n * Default: `--effect-animation-delay-medium-3` (1000ms). Accepts a number (ms)\n * or a TokoMo time token / `var(--effect-animation-delay-*)`. Applies to the\n * initial hover/focus show only — after a recent dismiss, reopen is instant.\n * Prefer the default; override only for denser chrome or rare/destructive actions.\n */\n @Prop() delay: number | string = TOKEN_DEFAULTS.animationDelayMedium3;\n @Prop() shortcutKey: string | undefined;\n @Prop() shortcutKeyPosition: 'start' | 'end' = 'end';\n\n private tooltipId = `ds-tooltip-${++tooltipIdCounter}`;\n private delayTimer: ReturnType<typeof setTimeout> | null = null;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n private anchor: HTMLElement | null = null;\n private popupEl: HTMLElement | null = null;\n private positionObserver: ResizeObserver | null = null;\n private skipEnterAnimation = false;\n private isOpen = false;\n private mouseEnterHandler: () => void = () => this.show();\n private mouseLeaveHandler: () => void = () => this.hide();\n /** focusin/focusout so nested focus targets (e.g. ds-button-* inner button) still open the tip. */\n private focusHandler: () => void = () => this.show();\n private blurHandler: (e: FocusEvent) => void = (e) => {\n const next = e.relatedTarget as Node | null;\n if (next && this.anchor?.contains(next)) return;\n this.hide();\n };\n\n componentDidLoad() {\n this.bindAnchor();\n }\n\n disconnectedCallback() {\n if (activeTooltip === this) activeTooltip = null;\n this.unbindAnchor();\n this.clearTimers();\n this.destroyPopup();\n }\n\n @Watch('label')\n @Watch('size')\n @Watch('side')\n @Watch('align')\n @Watch('sideOffset')\n @Watch('alignOffset')\n @Watch('shortcutKey')\n @Watch('shortcutKeyPosition')\n onContentOrPositionChange() {\n if (!this.label?.trim()) {\n if (this.isOpen || this.popupEl) this.hideInstant();\n return;\n }\n if (!this.popupEl || !this.isOpen) return;\n this.renderPopupContent();\n this.schedulePosition();\n }\n\n private get viewportPadPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n }\n\n private get sideOffsetPx(): number {\n return resolveCssLengthPx(this.sideOffset, TOKEN_DEFAULTS.space050);\n }\n\n private get alignOffsetPx(): number {\n return resolveCssLengthPx(this.alignOffset, 0);\n }\n\n private get hoverDelayMs(): number {\n return resolveCssTimeMs(this.delay, TOKEN_DEFAULTS.animationDelayMedium3);\n }\n\n private get instantReopenMs(): number {\n return resolveCssTimeMs(\n TOKEN_DEFAULTS.animationDurationMedium1,\n TOKEN_DEFAULTS.animationDurationMedium1,\n );\n }\n\n private get fadeOutMs(): number {\n return resolveCssTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private get tooltipFallbackWidthPx(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.tooltipFallbackWidth, TOKEN_DEFAULTS.tooltipFallbackWidth);\n }\n\n private get tooltipFallbackHeightPx(): number {\n const token = FALLBACK_HEIGHT[this.size];\n return resolveCssLengthPx(token, token);\n }\n\n private bindAnchor() {\n const slot = this.el.querySelector('slot') as HTMLSlotElement | null;\n const slotted = slot?.assignedElements?.() ?? [];\n const child = (slotted[0] ?? this.el.firstElementChild) as HTMLElement | null;\n if (!child) return;\n this.anchor = child;\n child.setAttribute('aria-describedby', this.tooltipId);\n child.addEventListener('mouseenter', this.mouseEnterHandler);\n child.addEventListener('mouseleave', this.mouseLeaveHandler);\n child.addEventListener('focusin', this.focusHandler);\n child.addEventListener('focusout', this.blurHandler);\n }\n\n private unbindAnchor() {\n if (!this.anchor) return;\n this.anchor.removeAttribute('aria-describedby');\n this.anchor.removeEventListener('mouseenter', this.mouseEnterHandler);\n this.anchor.removeEventListener('mouseleave', this.mouseLeaveHandler);\n this.anchor.removeEventListener('focusin', this.focusHandler);\n this.anchor.removeEventListener('focusout', this.blurHandler);\n this.anchor = null;\n }\n\n private clearTimers() {\n if (this.delayTimer) { clearTimeout(this.delayTimer); this.delayTimer = null; }\n if (this.closeTimer) { clearTimeout(this.closeTimer); this.closeTimer = null; }\n }\n\n private destroyPopup() {\n this.positionObserver?.disconnect();\n this.positionObserver = null;\n if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\n }\n\n /**\n * Position after `ds-text` upgrades and lays out. Measuring synchronously in\n * `mountPopup` reads a collapsed/fallback width and places left/right tips wrong.\n */\n private schedulePosition() {\n if (!this.popupEl) return;\n\n const reapplyLabelStyles = () => {\n const label = this.popupEl?.querySelector(':scope > .tooltip-inner > ds-text');\n if (label instanceof HTMLElement) styleTooltipLabel(label);\n };\n\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n requestAnimationFrame(() => {\n reapplyLabelStyles();\n this.calculatePosition();\n });\n });\n\n this.positionObserver?.disconnect();\n this.positionObserver = new ResizeObserver(() => this.calculatePosition());\n this.positionObserver.observe(this.popupEl);\n }\n\n /** Drop the open tip immediately (warm handoff to another tooltip). */\n private hideInstant() {\n this.clearTimers();\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }\n\n private show() {\n // Empty label = wrapper present for DOM stability (e.g. PanelNav expand/collapse)\n // but no tip should appear.\n if (!this.label?.trim()) return;\n this.clearTimers();\n let instant = Date.now() - lastDismissedAt < this.instantReopenMs;\n if (activeTooltip && activeTooltip !== this) {\n activeTooltip.hideInstant();\n instant = true;\n }\n // eslint-disable-next-line @typescript-eslint/no-this-alias -- module singleton tracks the active instance\n activeTooltip = this;\n this.skipEnterAnimation = instant;\n if (instant) {\n this.mountPopup();\n return;\n }\n this.delayTimer = setTimeout(() => {\n this.delayTimer = null;\n if (!this.label?.trim()) return;\n this.mountPopup();\n }, this.hoverDelayMs);\n }\n\n private hide() {\n this.clearTimers();\n if (!this.popupEl && !this.isOpen) return;\n lastDismissedAt = Date.now();\n if (activeTooltip === this) activeTooltip = null;\n if (!this.popupEl) {\n this.isOpen = false;\n return;\n }\n this.popupEl.classList.remove('tooltip-popup--instant');\n this.popupEl.classList.add('tooltip-popup--closing');\n this.closeTimer = setTimeout(() => {\n this.closeTimer = null;\n this.destroyPopup();\n this.isOpen = false;\n this.skipEnterAnimation = false;\n }, this.fadeOutMs);\n }\n\n private mountPopup() {\n if (!this.popupEl) {\n const tip = document.createElement('div');\n tip.id = this.tooltipId;\n tip.setAttribute('role', 'tooltip');\n // `sc-ds-tooltip` is required for Stencil scoped CSS to match outside the host.\n tip.className = 'tooltip-popup sc-ds-tooltip';\n Object.assign(tip.style, {\n position: 'fixed',\n left: '0',\n top: '0',\n zIndex: 'var(--dimension-z-index-tooltip)',\n pointerEvents: 'none',\n });\n document.body.appendChild(tip);\n this.popupEl = tip;\n }\n\n this.popupEl.classList.toggle('tooltip-popup--instant', this.skipEnterAnimation);\n this.popupEl.classList.remove('tooltip-popup--closing');\n this.renderPopupContent();\n this.schedulePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every layout node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const inner = document.createElement('div');\n inner.className = `tooltip-inner ${density} ${sc}`;\n\n const appendShortcut = (position: 'start' | 'end') => {\n if (!this.shortcutKey || this.shortcutKeyPosition !== position) return;\n const group = document.createElement('span');\n group.className = `key-hint-group ${sc}`;\n group.setAttribute('aria-hidden', 'true');\n\n for (const label of shortcutKeyLabels(this.shortcutKey)) {\n const hint = document.createElement('span');\n const wide = Array.from(label).length > 1 ? ' key-hint--wide' : '';\n hint.className = `key-hint${wide} ${sc}`;\n const text = document.createElement('span');\n text.className = `key-hint__label ${sc}`;\n text.textContent = label;\n hint.appendChild(text);\n group.appendChild(hint);\n }\n inner.appendChild(group);\n };\n\n appendShortcut('start');\n\n // ds-text is the layout box (metric-box + 2px control label-inset).\n // Inline styles required — see styleTooltipLabel.\n const label = createDsText({ variant: textVariant, wrap: 'nowrap', text: this.label });\n styleTooltipLabel(label);\n inner.appendChild(label);\n\n appendShortcut('end');\n\n this.popupEl.replaceChildren(inner);\n }\n\n private calculatePosition() {\n if (!this.anchor || !this.popupEl) return;\n const tip = this.popupEl;\n const a = this.anchor.getBoundingClientRect();\n const tw = tip.offsetWidth || this.tooltipFallbackWidthPx;\n const th = tip.offsetHeight || this.tooltipFallbackHeightPx;\n const sideOffset = this.sideOffsetPx;\n const alignOffset = this.alignOffsetPx;\n const vpPad = this.viewportPadPx;\n let x = 0, y = 0;\n\n switch (this.side) {\n case 'top':\n y = a.top - th - sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'bottom':\n y = a.bottom + sideOffset;\n x = this.align === 'start' ? a.left + alignOffset\n : this.align === 'end' ? a.right - tw + alignOffset\n : a.left + a.width / 2 - tw / 2 + alignOffset;\n break;\n case 'left':\n x = a.left - tw - sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n case 'right':\n x = a.right + sideOffset;\n y = this.align === 'start' ? a.top + alignOffset\n : this.align === 'end' ? a.bottom - th + alignOffset\n : a.top + a.height / 2 - th / 2 + alignOffset;\n break;\n }\n\n const nextX = Math.min(Math.max(x, vpPad), window.innerWidth - tw - vpPad);\n const nextY = Math.min(Math.max(y, vpPad), window.innerHeight - th - vpPad);\n tip.style.transform = `translate(${Math.round(nextX)}px, ${Math.round(nextY)}px)`;\n }\n\n render() {\n return (\n <Host style={{ display: 'contents' }}>\n <slot />\n </Host>\n );\n }\n}\n"],"mappings":"sPAAA,MAAMA,EAAkB,IAAIC,IAAI,CAAC,IAAK,IAAK,IAAK,MAChD,MAAMC,EAAoD,CACxDC,IAAK,IACLC,IAAK,IACLC,QAAS,IACTC,QAAS,IACTC,KAAM,IACNC,OAAQ,IACRC,MAAO,KAGT,SAASC,EAAkBC,GACzB,OAAOT,EAAgBS,EAAMC,gBAAkBD,CACjD,CAGM,SAAUE,EAAkBC,GAChC,MAAMC,EAAaD,EAASE,OAC5B,IAAKD,EAAY,MAAO,GAExB,GAAIA,EAAWE,SAAS,KAAM,CAC5B,OAAOF,EAAWG,MAAM,KAAKC,KAAIC,GAAQA,EAAKJ,SAAQK,OAAOC,SAASH,IAAIT,E,CAG5E,GAAI,KAAKa,KAAKR,GAAa,CACzB,OAAOA,EAAWG,MAAM,OAAOG,OAAOC,SAASH,IAAIT,E,CAGrD,MAAMc,EAAaC,MAAMC,KAAKX,GAC9B,MAAMY,EAAmB,GACzB,MAAOH,EAAWI,OAAS,GAAK5B,EAAgB6B,IAAIL,EAAW,IAAK,CAClEG,EAAOG,KAAKN,EAAWf,Q,CAEzBkB,EAAOG,KAAKN,EAAWO,KAAK,KAC5B,OAAOJ,CACT,CCnCA,MAAMK,EAAa,IAAM,i5ICiBzB,MAAMC,EAA+C,CACnDC,GAAIC,EAAeC,QACnBC,GAAIF,EAAeG,QACnBC,GAAIJ,EAAeK,SAGrB,IAAIC,EAAkB,EACtB,IAAIC,EAAmB,EAEvB,IAAIC,EAAgC,KAUpC,SAASC,EAAaC,GAOpB,MAAMC,EAAKC,SAASC,cAAc,WAClCF,EAAGG,GAAK,OACRH,EAAGI,QAAUL,EAAKK,QAClBJ,EAAGK,SAAWN,EAAKM,UAAY,MAC/BL,EAAGM,MAAQP,EAAKO,OAAS,UACzB,GAAIP,EAAKQ,KAAMP,EAAGO,KAAOR,EAAKQ,KAC9BP,EAAGQ,YAAcT,EAAKU,KACtB,OAAOT,CACT,CAOA,SAASU,EAAkBV,GACzBA,EAAGW,MAAMC,WAAa,IACtBZ,EAAGW,MAAME,SAAW,cACpBb,EAAGW,MAAMG,SAAW,OACpBd,EAAGW,MAAMI,QAAU,8DACnBf,EAAGW,MAAML,MAAQ,iCACnB,C,MAYaU,EAAOC,EAAA,MAAAD,UAAAE,EALpB,WAAAC,CAAAC,G,4CAeUC,KAAAC,KAAoB,KAEpBD,KAAAE,KAAoB,MACpBF,KAAAG,MAAsB,SAEtBH,KAAAI,WAA8BC,EAAkBC,SAEhDN,KAAAO,YAA+B,EAQ/BP,KAAAQ,MAAyBxC,EAAeyC,sBAExCT,KAAAU,oBAAuC,MAEvCV,KAAAW,UAAY,gBAAgBpC,IAC5ByB,KAAAY,WAAmD,KACnDZ,KAAAa,WAAmD,KACnDb,KAAAc,OAA6B,KAC7Bd,KAAAe,QAA8B,KAC9Bf,KAAAgB,iBAA0C,KAC1ChB,KAAAiB,mBAAqB,MACrBjB,KAAAkB,OAAS,MACTlB,KAAAmB,kBAAgC,IAAMnB,KAAKoB,OAC3CpB,KAAAqB,kBAAgC,IAAMrB,KAAKsB,OAE3CtB,KAAAuB,aAA2B,IAAMvB,KAAKoB,OACtCpB,KAAAwB,YAAwCC,IAC9C,MAAMC,EAAOD,EAAEE,cACf,GAAID,GAAQ1B,KAAKc,QAAQc,SAASF,GAAO,OACzC1B,KAAKsB,MAAM,CA6Sd,CA1SC,gBAAAO,GACE7B,KAAK8B,Y,CAGP,oBAAAC,GACE,GAAIvD,IAAkBwB,KAAMxB,EAAgB,KAC5CwB,KAAKgC,eACLhC,KAAKiC,cACLjC,KAAKkC,c,CAWP,yBAAAC,GACE,IAAKnC,KAAKxD,OAAOK,OAAQ,CACvB,GAAImD,KAAKkB,QAAUlB,KAAKe,QAASf,KAAKoC,cACtC,M,CAEF,IAAKpC,KAAKe,UAAYf,KAAKkB,OAAQ,OACnClB,KAAKqC,qBACLrC,KAAKsC,kB,CAGP,iBAAYC,GACV,OAAOC,EAAmBxE,EAAesC,SAAUtC,EAAesC,S,CAGpE,gBAAYmC,GACV,OAAOD,EAAmBxC,KAAKI,WAAYpC,EAAesC,S,CAG5D,iBAAYoC,GACV,OAAOF,EAAmBxC,KAAKO,YAAa,E,CAG9C,gBAAYoC,GACV,OAAOC,EAAiB5C,KAAKQ,MAAOxC,EAAeyC,sB,CAGrD,mBAAYoC,GACV,OAAOD,EACL5E,EAAe8E,yBACf9E,EAAe8E,yB,CAInB,aAAYC,GACV,OAAOH,EAAiB5E,EAAegF,aAAchF,EAAeiF,wB,CAGtE,0BAAYC,GACV,OAAOV,EAAmBxE,EAAemF,qBAAsBnF,EAAemF,qB,CAGhF,2BAAYC,GACV,MAAMC,EAAQvF,EAAgBkC,KAAKC,MACnC,OAAOuC,EAAmBa,EAAOA,E,CAG3B,UAAAvB,GACN,MAAMwB,EAAOtD,KAAKrB,GAAG4E,cAAc,QACnC,MAAMC,EAAUF,GAAMG,sBAAwB,GAC9C,MAAMC,EAASF,EAAQ,IAAMxD,KAAKrB,GAAGgF,kBACrC,IAAKD,EAAO,OACZ1D,KAAKc,OAAS4C,EACdA,EAAME,aAAa,mBAAoB5D,KAAKW,WAC5C+C,EAAMG,iBAAiB,aAAc7D,KAAKmB,mBAC1CuC,EAAMG,iBAAiB,aAAc7D,KAAKqB,mBAC1CqC,EAAMG,iBAAiB,UAAW7D,KAAKuB,cACvCmC,EAAMG,iBAAiB,WAAY7D,KAAKwB,Y,CAGlC,YAAAQ,GACN,IAAKhC,KAAKc,OAAQ,OAClBd,KAAKc,OAAOgD,gBAAgB,oBAC5B9D,KAAKc,OAAOiD,oBAAoB,aAAc/D,KAAKmB,mBACnDnB,KAAKc,OAAOiD,oBAAoB,aAAc/D,KAAKqB,mBACnDrB,KAAKc,OAAOiD,oBAAoB,UAAW/D,KAAKuB,cAChDvB,KAAKc,OAAOiD,oBAAoB,WAAY/D,KAAKwB,aACjDxB,KAAKc,OAAS,I,CAGR,WAAAmB,GACN,GAAIjC,KAAKY,WAAY,CAAEoD,aAAahE,KAAKY,YAAaZ,KAAKY,WAAa,I,CACxE,GAAIZ,KAAKa,WAAY,CAAEmD,aAAahE,KAAKa,YAAab,KAAKa,WAAa,I,EAGlE,YAAAqB,GACNlC,KAAKgB,kBAAkBiD,aACvBjE,KAAKgB,iBAAmB,KACxB,IAAKhB,KAAKe,QAAS,OACnBf,KAAKe,QAAQmD,SACblE,KAAKe,QAAU,I,CAOT,gBAAAuB,GACN,IAAKtC,KAAKe,QAAS,OAEnB,MAAMoD,EAAqB,KACzB,MAAM3H,EAAQwD,KAAKe,SAASwC,cAAc,qCAC1C,GAAI/G,aAAiBqD,EAAaR,EAAkB7C,EAAM,EAG5D4H,uBAAsB,KACpBD,IACAnE,KAAKqE,oBACLD,uBAAsB,KACpBD,IACAnE,KAAKqE,mBAAmB,GACxB,IAGJrE,KAAKgB,kBAAkBiD,aACvBjE,KAAKgB,iBAAmB,IAAIsD,gBAAe,IAAMtE,KAAKqE,sBACtDrE,KAAKgB,iBAAiBuD,QAAQvE,KAAKe,Q,CAI7B,WAAAqB,GACNpC,KAAKiC,cACL3D,EAAkBkG,KAAKC,MACvB,GAAIjG,IAAkBwB,KAAMxB,EAAgB,KAC5CwB,KAAKkC,eACLlC,KAAKkB,OAAS,MACdlB,KAAKiB,mBAAqB,K,CAGpB,IAAAG,GAGN,IAAKpB,KAAKxD,OAAOK,OAAQ,OACzBmD,KAAKiC,cACL,IAAIyC,EAAUF,KAAKC,MAAQnG,EAAkB0B,KAAK6C,gBAClD,GAAIrE,GAAiBA,IAAkBwB,KAAM,CAC3CxB,EAAc4D,cACdsC,EAAU,I,CAGZlG,EAAgBwB,KAChBA,KAAKiB,mBAAqByD,EAC1B,GAAIA,EAAS,CACX1E,KAAK2E,aACL,M,CAEF3E,KAAKY,WAAagE,YAAW,KAC3B5E,KAAKY,WAAa,KAClB,IAAKZ,KAAKxD,OAAOK,OAAQ,OACzBmD,KAAK2E,YAAY,GAChB3E,KAAK2C,a,CAGF,IAAArB,GACNtB,KAAKiC,cACL,IAAKjC,KAAKe,UAAYf,KAAKkB,OAAQ,OACnC5C,EAAkBkG,KAAKC,MACvB,GAAIjG,IAAkBwB,KAAMxB,EAAgB,KAC5C,IAAKwB,KAAKe,QAAS,CACjBf,KAAKkB,OAAS,MACd,M,CAEFlB,KAAKe,QAAQ8D,UAAUX,OAAO,0BAC9BlE,KAAKe,QAAQ8D,UAAUC,IAAI,0BAC3B9E,KAAKa,WAAa+D,YAAW,KAC3B5E,KAAKa,WAAa,KAClBb,KAAKkC,eACLlC,KAAKkB,OAAS,MACdlB,KAAKiB,mBAAqB,KAAK,GAC9BjB,KAAK+C,U,CAGF,UAAA4B,GACN,IAAK3E,KAAKe,QAAS,CACjB,MAAMgE,EAAMnG,SAASC,cAAc,OACnCkG,EAAIC,GAAKhF,KAAKW,UACdoE,EAAInB,aAAa,OAAQ,WAEzBmB,EAAIE,UAAY,8BAChBC,OAAOC,OAAOJ,EAAIzF,MAAO,CACvB8F,SAAU,QACVC,KAAM,IACNC,IAAK,IACLC,OAAQ,mCACRC,cAAe,SAEjB5G,SAAS6G,KAAKC,YAAYX,GAC1B/E,KAAKe,QAAUgE,C,CAGjB/E,KAAKe,QAAQ8D,UAAUc,OAAO,yBAA0B3F,KAAKiB,oBAC7DjB,KAAKe,QAAQ8D,UAAUX,OAAO,0BAC9BlE,KAAKqC,qBACLrC,KAAKsC,mBACLtC,KAAKkB,OAAS,I,CAGR,kBAAAmB,GACN,IAAKrC,KAAKe,QAAS,OACnB,MAAM6E,EAAcC,EAAqB7F,KAAKC,MAC9C,MAAM6F,EACJ9F,KAAKC,OAAS,KAAO,iBAAmBD,KAAKC,OAAS,KAAO,iBAAmB,iBAElF,MAAM8F,EAAK,gBAEX,MAAMC,EAAQpH,SAASC,cAAc,OACrCmH,EAAMf,UAAY,iBAAiBa,KAAWC,IAE9C,MAAME,EAAkBb,IACtB,IAAKpF,KAAKkG,aAAelG,KAAKU,sBAAwB0E,EAAU,OAChE,MAAMe,EAAQvH,SAASC,cAAc,QACrCsH,EAAMlB,UAAY,kBAAkBc,IACpCI,EAAMvC,aAAa,cAAe,QAElC,IAAK,MAAMpH,KAASE,EAAkBsD,KAAKkG,aAAc,CACvD,MAAME,EAAOxH,SAASC,cAAc,QACpC,MAAMwH,EAAO/I,MAAMC,KAAKf,GAAOiB,OAAS,EAAI,kBAAoB,GAChE2I,EAAKnB,UAAY,WAAWoB,KAAQN,IACpC,MAAM3G,EAAOR,SAASC,cAAc,QACpCO,EAAK6F,UAAY,mBAAmBc,IACpC3G,EAAKD,YAAc3C,EACnB4J,EAAKV,YAAYtG,GACjB+G,EAAMT,YAAYU,E,CAEpBJ,EAAMN,YAAYS,EAAM,EAG1BF,EAAe,SAIf,MAAMzJ,EAAQiC,EAAa,CAAEM,QAAS6G,EAAa1G,KAAM,SAAUE,KAAMY,KAAKxD,QAC9E6C,EAAkB7C,GAClBwJ,EAAMN,YAAYlJ,GAElByJ,EAAe,OAEfjG,KAAKe,QAAQuF,gBAAgBN,E,CAGvB,iBAAA3B,GACN,IAAKrE,KAAKc,SAAWd,KAAKe,QAAS,OACnC,MAAMgE,EAAM/E,KAAKe,QACjB,MAAMwF,EAAIvG,KAAKc,OAAO0F,wBACtB,MAAMC,EAAK1B,EAAI2B,aAAe1G,KAAKkD,uBACnC,MAAMyD,EAAK5B,EAAI6B,cAAgB5G,KAAKoD,wBACpC,MAAMhD,EAAaJ,KAAKyC,aACxB,MAAMlC,EAAcP,KAAK0C,cACzB,MAAMmE,EAAQ7G,KAAKuC,cACnB,IAAIuE,EAAI,EAAGC,EAAI,EAEf,OAAQ/G,KAAKE,MACX,IAAK,MACH6G,EAAIR,EAAEjB,IAAMqB,EAAKvG,EACjB0G,EAAI9G,KAAKG,QAAU,QAAUoG,EAAElB,KAAO9E,EAClCP,KAAKG,QAAU,MAAQoG,EAAES,MAAQP,EAAKlG,EACtCgG,EAAElB,KAAOkB,EAAEU,MAAQ,EAAIR,EAAK,EAAIlG,EACpC,MACF,IAAK,SACHwG,EAAIR,EAAEW,OAAS9G,EACf0G,EAAI9G,KAAKG,QAAU,QAAUoG,EAAElB,KAAO9E,EAClCP,KAAKG,QAAU,MAAQoG,EAAES,MAAQP,EAAKlG,EACtCgG,EAAElB,KAAOkB,EAAEU,MAAQ,EAAIR,EAAK,EAAIlG,EACpC,MACF,IAAK,OACHuG,EAAIP,EAAElB,KAAOoB,EAAKrG,EAClB2G,EAAI/G,KAAKG,QAAU,QAAUoG,EAAEjB,IAAM/E,EACjCP,KAAKG,QAAU,MAAQoG,EAAEW,OAASP,EAAKpG,EACvCgG,EAAEjB,IAAMiB,EAAEY,OAAS,EAAIR,EAAK,EAAIpG,EACpC,MACF,IAAK,QACHuG,EAAIP,EAAES,MAAQ5G,EACd2G,EAAI/G,KAAKG,QAAU,QAAUoG,EAAEjB,IAAM/E,EACjCP,KAAKG,QAAU,MAAQoG,EAAEW,OAASP,EAAKpG,EACvCgG,EAAEjB,IAAMiB,EAAEY,OAAS,EAAIR,EAAK,EAAIpG,EACpC,MAGJ,MAAM6G,EAAQC,KAAKC,IAAID,KAAKE,IAAIT,EAAGD,GAAQW,OAAOC,WAAahB,EAAKI,GACpE,MAAMa,EAAQL,KAAKC,IAAID,KAAKE,IAAIR,EAAGF,GAAQW,OAAOG,YAAchB,EAAKE,GACrE9B,EAAIzF,MAAMsI,UAAY,aAAaP,KAAKQ,MAAMT,SAAaC,KAAKQ,MAAMH,O,CAGxE,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAAC3I,MAAO,CAAE4I,QAAS,aACtBH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{d}from"./p-DEgY_Lnb.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-BOQRM49Q.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.sc-ds-button-unfilled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--contrast-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--contrast-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--contrast-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled--on-navigation.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-navigation-background);--ds-button-unfilled-border:var(--color-navigation-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const f={md:"md",sm:"sm",xs:"xs"};const b=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.dot=false;this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive)return;this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const n=this.background;const t=this.effectiveContrast();const o=a[this.size];const e=f[this.size];const d={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-medium":t==="medium","ds-interaction-fill--on-bold":t==="bold","ds-interaction-fill--on-strong":t==="strong","ds-interaction-fill--on-always-dark":n==="always-dark","ds-interaction-fill--on-navigation":n==="navigation","button-unfilled--active":this.isActive,"button-unfilled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--contrast-medium":t==="medium","button-unfilled--contrast-bold":t==="bold","button-unfilled--contrast-strong":t==="strong","button-unfilled--on-always-dark":n==="always-dark","button-unfilled--on-navigation":n==="navigation"};return i(s,{key:"75ce066872d1826e4f64e9a2337d1749778ea4f9",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"a3a0c18d952d1b78023fc89b216c5b77221247ac",ref:n=>{this.buttonEl=n??null},type:this.type,class:d,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"4105d7b25b912dc690827e2a26767a5b3fab17e0",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"e8987c5531cb80d357000c5ead825c30376c5a96",name:this.icon,size:e,color:"inherit"}),this.showDot&&i("ds-badge",{key:"8f605dab684c672918e142d72c31f653140414d8",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"5d0065ca18def0991263879542ce21054a39cdd7",class:"button-unfilled__label ds-interaction-fill__content",as:"span",variant:o,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return u()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],isInactive:[4,"is-inactive"],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),b)}break;case"ds-badge":if(!customElements.get(e(n))){d()}break;case"ds-icon":if(!customElements.get(e(n))){r()}break;case"ds-text":if(!customElements.get(e(n))){l()}break}}))}h();export{b as B,h as d};
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{p as n,H as t,c as o,h as i,a as s,t as e}from"./index.js";import{d}from"./p-CHcS6Z4V.js";import{d as r}from"./p-9Qu1ls2y.js";import{d as l}from"./p-emacH2W5.js";import{C as a}from"./p-Cx-ywr1e.js";import{c}from"./p-DuFm-ieS.js";const u=()=>`.sc-ds-button-unfilled-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-button-unfilled:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-button-unfilled{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-button-unfilled:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-button-unfilled::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-button-unfilled-h,.ds-interaction-fill.sc-ds-button-unfilled{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before,.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-button-unfilled-h::before,.ds-interaction-fill.sc-ds-button-unfilled::before{z-index:1}.ds-interaction-fill.sc-ds-button-unfilled-h::after,.ds-interaction-fill.sc-ds-button-unfilled::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-button-unfilled-h,.ds-interaction-fill--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h::before,.ds-interaction-fill--selected.sc-ds-button-unfilled::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-button-unfilled-h,.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-button-unfilled-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-button-unfilled-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-button-unfilled:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-button-unfilled-h>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill.sc-ds-button-unfilled>.ds-interaction-fill__content.sc-ds-button-unfilled,.ds-interaction-fill__content.sc-ds-button-unfilled{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-button-unfilled-h,.ds-interaction-fill--on-medium.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-button-unfilled-h,.ds-interaction-fill--on-bold.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-button-unfilled-h,.ds-interaction-fill--on-strong.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled-h,.ds-interaction-fill--on-always-dark.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-button-unfilled-h,.ds-interaction-fill--on-navigation.sc-ds-button-unfilled{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-button-unfilled-h,.ds-control-inactive.sc-ds-button-unfilled{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-button-unfilled-h,.ds-control--md.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050);--ds-control-radius:var(--dimension-radius-025)}.ds-control--sm.sc-ds-button-unfilled-h,.ds-control--sm.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control--xs.sc-ds-button-unfilled-h,.ds-control--xs.sc-ds-button-unfilled{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025);--ds-control-radius:var(--dimension-radius-025)}.ds-control-width--hug.sc-ds-button-unfilled-h,.ds-control-width--hug.sc-ds-button-unfilled{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-button-unfilled-h,.ds-control-width--fill.sc-ds-button-unfilled{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.sc-ds-button-unfilled-h{display:inline-flex;outline:none;--ds-button-unfilled-fg:var(--color-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-background-secondary);--ds-button-unfilled-border:var(--color-border-secondary)}.button-unfilled-host--icon.ds-control-width--hug.sc-ds-button-unfilled-h{width:var(--ds-control-height, var(--dimension-size-400));height:var(--ds-control-height, var(--dimension-size-400));min-width:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.button-unfilled-host--icon.ds-control-width--fill.sc-ds-button-unfilled-h{height:var(--ds-control-height, var(--dimension-size-400));min-height:var(--ds-control-height, var(--dimension-size-400))}.ds-control-width--fill.sc-ds-button-unfilled-h .button-unfilled.sc-ds-button-unfilled{width:100%}.button-unfilled.sc-ds-button-unfilled{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-button-unfilled-fg);cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.button-unfilled--icon.sc-ds-button-unfilled{width:100%;height:100%;padding:0}.button-unfilled--active.sc-ds-button-unfilled{color:var(--ds-button-unfilled-fg-active)}.button-unfilled--bordered.sc-ds-button-unfilled{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-button-unfilled-border)}.button-unfilled--bordered.sc-ds-button-unfilled:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.button-unfilled--contrast-medium.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-medium-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-medium-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-medium-neutral);--ds-button-unfilled-border:var(--color-border-on-medium-background-secondary)}.button-unfilled--contrast-bold.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-bold-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-bold-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-bold-neutral);--ds-button-unfilled-border:var(--color-border-on-bold-background-secondary)}.button-unfilled--contrast-strong.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-foreground-on-strong-background-secondary);--ds-button-unfilled-fg-active:var(--color-foreground-on-strong-background-primary);--ds-button-unfilled-dot-ring:var(--color-background-strong-neutral);--ds-button-unfilled-border:var(--color-border-on-strong-background-secondary)}.button-unfilled--on-always-dark.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-always-dark-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-always-dark-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-always-dark-background);--ds-button-unfilled-border:var(--color-always-dark-border-secondary)}.button-unfilled--on-navigation.sc-ds-button-unfilled{--ds-button-unfilled-fg:var(--color-navigation-foreground-secondary);--ds-button-unfilled-fg-active:var(--color-navigation-foreground-primary);--ds-button-unfilled-dot-ring:var(--color-navigation-background);--ds-button-unfilled-border:var(--color-navigation-border-secondary)}.button-unfilled.ds-interaction-fill--selected.sc-ds-button-unfilled{--ds-button-unfilled-dot-ring:var(--ds-interaction-active)}.button-unfilled__icon-wrap.sc-ds-button-unfilled{position:relative;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;z-index:2}.button-unfilled__label.sc-ds-button-unfilled{position:relative;z-index:2;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));white-space:nowrap;flex-shrink:0;min-width:0}.button-unfilled__dot.sc-ds-button-unfilled{position:absolute;top:0;right:0;z-index:2;pointer-events:none}`;const f={md:"md",sm:"sm",xs:"xs"};const b=n(class n extends t{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClick=o(this,"dsClick");this.dsChange=o(this,"dsChange");this.variant="label";this.size="md";this.width="hug";this.label="";this.icon="";this.isActive=false;this.activeFill=true;this.hasBorder=true;this.dot=false;this.isInactive=false;this.type="button";this.ariaLabel=null;this.buttonEl=null;this.handleClick=n=>{if(this.isInactive)return;this.dsClick.emit(n);this.dsChange.emit(!this.isActive)}}async setFocus(){this.buttonEl?.focus()}effectiveContrast(){return this.backgroundContrast??"default"}get showIcon(){return this.variant==="icon"||this.variant==="icon-label"}get showLabel(){return this.variant==="label"||this.variant==="icon-label"}get showDot(){return this.variant==="icon"&&this.dot}get dotRing(){if(this.isActive&&this.activeFill){return"var(--ds-interaction-active)"}return"var(--ds-button-unfilled-dot-ring)"}get accessibleName(){if(this.ariaLabel)return this.ariaLabel;if(this.showLabel&&this.label)return undefined;if(this.variant==="icon")return this.icon||"action";return this.label||"action"}render(){const n=this.background;const t=this.effectiveContrast();const o=a[this.size];const e=f[this.size];const d={"button-unfilled":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.isActive&&this.activeFill&&!this.isInactive,"ds-interaction-fill--on-medium":t==="medium","ds-interaction-fill--on-bold":t==="bold","ds-interaction-fill--on-strong":t==="strong","ds-interaction-fill--on-always-dark":n==="always-dark","ds-interaction-fill--on-navigation":n==="navigation","button-unfilled--active":this.isActive,"button-unfilled--bordered":this.hasBorder,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs","button-unfilled--icon":this.variant==="icon","button-unfilled--label":this.variant==="label","button-unfilled--icon-label":this.variant==="icon-label","button-unfilled--contrast-medium":t==="medium","button-unfilled--contrast-bold":t==="bold","button-unfilled--contrast-strong":t==="strong","button-unfilled--on-always-dark":n==="always-dark","button-unfilled--on-navigation":n==="navigation"};return i(s,{key:"75ce066872d1826e4f64e9a2337d1749778ea4f9",class:{"button-unfilled-host":true,"button-unfilled-host--icon":this.variant==="icon","ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...c(this.width)},tabIndex:-1},i("button",{key:"a3a0c18d952d1b78023fc89b216c5b77221247ac",ref:n=>{this.buttonEl=n??null},type:this.type,class:d,disabled:this.isInactive,tabIndex:this.focusTabIndex??0,"aria-label":this.accessibleName,"aria-controls":this.controls,"aria-expanded":this.expanded===undefined?undefined:String(this.expanded),"aria-haspopup":this.haspopup,"aria-pressed":this.pressed===undefined?undefined:String(this.pressed),onClick:this.handleClick},this.showIcon&&i("span",{key:"4105d7b25b912dc690827e2a26767a5b3fab17e0",class:"button-unfilled__icon-wrap ds-interaction-fill__content"},i("ds-icon",{key:"e8987c5531cb80d357000c5ead825c30376c5a96",name:this.icon,size:e,color:"inherit"}),this.showDot&&i("ds-badge",{key:"8f605dab684c672918e142d72c31f653140414d8",class:"button-unfilled__dot",variant:"dot",background:this.dotRing,label:"","aria-hidden":"true"})),this.showLabel&&i("ds-text",{key:"5d0065ca18def0991263879542ce21054a39cdd7",class:"button-unfilled__label ds-interaction-fill__content",as:"span",variant:o,emphasis:true,color:"inherit"},this.label)))}get el(){return this}static get style(){return u()}},[2,"ds-button-unfilled",{variant:[1],size:[1],width:[1],label:[1],icon:[1],isActive:[4,"is-active"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],dot:[4],isInactive:[4,"is-inactive"],type:[1],backgroundContrast:[1,"on-background-contrast"],background:[1],ariaLabel:[1,"aria-label"],controls:[1],expanded:[4],haspopup:[1],pressed:[4],focusTabIndex:[2,"tab-index"],setFocus:[64]}]);function h(){if(typeof customElements==="undefined"){return}const n=["ds-button-unfilled","ds-badge","ds-icon","ds-text"];n.forEach((n=>{switch(n){case"ds-button-unfilled":if(!customElements.get(e(n))){customElements.define(e(n),b)}break;case"ds-badge":if(!customElements.get(e(n))){d()}break;case"ds-icon":if(!customElements.get(e(n))){r()}break;case"ds-text":if(!customElements.get(e(n))){l()}break}}))}h();export{b as B,h as d};
|
|
2
|
+
//# sourceMappingURL=p-DO7y9eZQ.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as e,H as s,c as t,h as i,a as r,t as a}from"./index.js";import{d as n}from"./p-B4gGwfix.js";import{D as d,n as l,S as o,a as c}from"./p-D0B9uDTP.js";const h=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}.shell-gradient-picker.sc-ds-shell-gradient-picker{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:var(--dimension-size-400);gap:var(--dimension-space-100);padding:var(--dimension-space-100)}.shell-gradient-picker__divider.sc-ds-shell-gradient-picker{flex:0 0 auto;align-self:center;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background-color:var(--color-border-tertiary)}`;const f=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value=d;this.groupLabel="Shell gradient theme";this.handleSwatchSelect=e=>{const s=l(e);if(s===l(this.value))return;this.value=s;this.dsChange.emit(s)};this.handleSwatchKeyDown=(e,s)=>{const t=o.indexOf(s);let i=null;if(e.key==="ArrowRight"||e.key==="ArrowDown"){i=(t+1)%o.length}else if(e.key==="ArrowLeft"||e.key==="ArrowUp"){i=(t-1+o.length)%o.length}else if(e.key==="Home"){i=0}else if(e.key==="End"){i=o.length-1}if(i===null)return;e.preventDefault();const r=o[i];this.handleSwatchSelect(r);this.focusSwatch(r)}}focusSwatch(e){requestAnimationFrame((()=>{const s=this.el.querySelector(`ds-shell-gradient-swatch[preset="${e}"]`);s?.querySelector("button")?.focus()}))}renderSwatch(e){const s=l(this.value)===e;return i("ds-shell-gradient-swatch",{key:e,preset:e,selected:s,onKeyDown:s=>this.handleSwatchKeyDown(s,e),onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return i(r,{key:"61030a886f80bb3fc7b348126368d3ddf2fae3f4"},i("div",{key:"f27781aa51c6d8eb6174261fff365d0c0f49ff05",class:"shell-gradient-picker",role:"radiogroup","aria-label":this.groupLabel},this.renderSwatch("none"),i("div",{key:"01d269af17e53e4a808d52574d411203cf128578",class:"shell-gradient-picker__divider","aria-hidden":"true"}),c.map((e=>this.renderSwatch(e)))))}get el(){return this}static get style(){return h()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-shell-gradient-picker":if(!customElements.get(a(e))){customElements.define(a(e),f)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){n()}break}}))}g();export{f as S,g as d};
|
|
2
|
+
//# sourceMappingURL=p-ORF34W29.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","groupLabel","handleSwatchSelect","preset","normalized","normalizeShellGradientPreset","dsChange","emit","handleSwatchKeyDown","event","currentIndex","SHELL_GRADIENT_PRESETS","indexOf","nextIndex","key","length","preventDefault","nextPreset","focusSwatch","requestAnimationFrame","swatch","el","querySelector","focus","renderSwatch","selected","h","onKeyDown","onDsSelect","e","stopPropagation","detail","render","Host","class","role","SHELL_GRADIENT_WASH_PRESETS","map"],"sources":["src/wc/components/ShellGradientPicker/ShellGradientPicker.css?tag=ds-shell-gradient-picker&encapsulation=scoped","src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n}\n\n/* One row — same width footprint as menu items; 24px orbs + divider inside. */\n.shell-gradient-picker {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n width: 100%;\n min-height: var(--dimension-size-400);\n gap: var(--dimension-space-100);\n padding: var(--dimension-space-100);\n}\n\n.shell-gradient-picker__divider {\n flex: 0 0 auto;\n align-self: center;\n width: var(--dimension-stroke-width-012);\n height: var(--dimension-size-300);\n background-color: var(--color-border-tertiary);\n}\n","import { Component, Prop, Event, EventEmitter, Element, h, Host } from '@stencil/core';\nimport {\n SHELL_GRADIENT_PRESETS,\n SHELL_GRADIENT_WASH_PRESETS,\n DEFAULT_SHELL_GRADIENT_PRESET,\n normalizeShellGradientPreset,\n type ShellGradientPreset,\n} from '../ShellGradientSwatch/shell-gradient-swatch-types';\n\n@Component({\n tag: 'ds-shell-gradient-picker',\n styleUrl: 'ShellGradientPicker.css',\n scoped: true,\n})\nexport class ShellGradientPicker {\n /** Active shell wash preset. */\n @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =\n DEFAULT_SHELL_GRADIENT_PRESET;\n @Prop() groupLabel: string = 'Shell gradient theme';\n\n @Event() dsChange!: EventEmitter<ShellGradientPreset>;\n\n @Element() el!: HTMLElement;\n\n private handleSwatchSelect = (preset: ShellGradientPreset) => {\n const normalized = normalizeShellGradientPreset(preset);\n if (normalized === normalizeShellGradientPreset(this.value)) return;\n this.value = normalized;\n this.dsChange.emit(normalized);\n };\n\n private focusSwatch(preset: ShellGradientPreset) {\n requestAnimationFrame(() => {\n const swatch = this.el.querySelector<HTMLElement>(\n `ds-shell-gradient-swatch[preset=\"${preset}\"]`,\n );\n swatch?.querySelector<HTMLButtonElement>('button')?.focus();\n });\n }\n\n private handleSwatchKeyDown = (event: KeyboardEvent, preset: ShellGradientPreset) => {\n const currentIndex = SHELL_GRADIENT_PRESETS.indexOf(preset);\n let nextIndex: number | null = null;\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n nextIndex = (currentIndex + 1) % SHELL_GRADIENT_PRESETS.length;\n } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n nextIndex = (currentIndex - 1 + SHELL_GRADIENT_PRESETS.length) % SHELL_GRADIENT_PRESETS.length;\n } else if (event.key === 'Home') {\n nextIndex = 0;\n } else if (event.key === 'End') {\n nextIndex = SHELL_GRADIENT_PRESETS.length - 1;\n }\n\n if (nextIndex === null) return;\n event.preventDefault();\n const nextPreset = SHELL_GRADIENT_PRESETS[nextIndex];\n this.handleSwatchSelect(nextPreset);\n this.focusSwatch(nextPreset);\n };\n\n private renderSwatch(preset: ShellGradientPreset) {\n const selected = normalizeShellGradientPreset(this.value) === preset;\n return (\n <ds-shell-gradient-swatch\n key={preset}\n preset={preset}\n selected={selected}\n onKeyDown={(event: KeyboardEvent) => this.handleSwatchKeyDown(event, preset)}\n onDsSelect={(e: CustomEvent<ShellGradientPreset>) => {\n e.stopPropagation();\n this.handleSwatchSelect(e.detail);\n }}\n />\n );\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"shell-gradient-picker\"\n role=\"radiogroup\"\n aria-label={this.groupLabel}\n >\n {this.renderSwatch('none')}\n <div class=\"shell-gradient-picker__divider\" aria-hidden=\"true\" />\n {SHELL_GRADIENT_WASH_PRESETS.map(preset => this.renderSwatch(preset))}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"+JAAA,MAAMA,EAAyB,IAAM,ye,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EACMF,KAAAG,WAAqB,uBAMrBH,KAAAI,mBAAsBC,IAC5B,MAAMC,EAAaC,EAA6BF,GAChD,GAAIC,IAAeC,EAA6BP,KAAKC,OAAQ,OAC7DD,KAAKC,MAAQK,EACbN,KAAKQ,SAASC,KAAKH,EAAW,EAYxBN,KAAAU,oBAAsB,CAACC,EAAsBN,KACnD,MAAMO,EAAeC,EAAuBC,QAAQT,GACpD,IAAIU,EAA2B,KAE/B,GAAIJ,EAAMK,MAAQ,cAAgBL,EAAMK,MAAQ,YAAa,CAC3DD,GAAaH,EAAe,GAAKC,EAAuBI,M,MACnD,GAAIN,EAAMK,MAAQ,aAAeL,EAAMK,MAAQ,UAAW,CAC/DD,GAAaH,EAAe,EAAIC,EAAuBI,QAAUJ,EAAuBI,M,MACnF,GAAIN,EAAMK,MAAQ,OAAQ,CAC/BD,EAAY,C,MACP,GAAIJ,EAAMK,MAAQ,MAAO,CAC9BD,EAAYF,EAAuBI,OAAS,C,CAG9C,GAAIF,IAAc,KAAM,OACxBJ,EAAMO,iBACN,MAAMC,EAAaN,EAAuBE,GAC1Cf,KAAKI,mBAAmBe,GACxBnB,KAAKoB,YAAYD,EAAW,CAkC/B,CA7DS,WAAAC,CAAYf,GAClBgB,uBAAsB,KACpB,MAAMC,EAAStB,KAAKuB,GAAGC,cACrB,oCAAoCnB,OAEtCiB,GAAQE,cAAiC,WAAWC,OAAO,G,CAyBvD,YAAAC,CAAarB,GACnB,MAAMsB,EAAWpB,EAA6BP,KAAKC,SAAWI,EAC9D,OACEuB,EAAA,4BACEZ,IAAKX,EACLA,OAAQA,EACRsB,SAAUA,EACVE,UAAYlB,GAAyBX,KAAKU,oBAAoBC,EAAON,GACrEyB,WAAaC,IACXA,EAAEC,kBACFhC,KAAKI,mBAAmB2B,EAAEE,OAAO,G,CAMzC,MAAAC,GACE,OACEN,EAACO,EAAI,CAAAnB,IAAA,4CACHY,EAAA,OAAAZ,IAAA,2CACEoB,MAAM,wBACNC,KAAK,aAAY,aACLrC,KAAKG,YAEhBH,KAAK0B,aAAa,QACnBE,EAAA,OAAAZ,IAAA,2CAAKoB,MAAM,iCAAgC,cAAa,SACvDE,EAA4BC,KAAIlC,GAAUL,KAAK0B,aAAarB,M","ignoreList":[]}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const i="--dimension-menu-width-xs";const n="--dimension-radius-025";const t="--dimension-size-200";const e="--dimension-size-300";const o="--dimension-size-400";const a="--dimension-space-050";const s="--effect-animation-delay-instant";const c="--effect-animation-delay-long-2";const m="--effect-animation-delay-medium-3";const d="--effect-animation-duration-medium-1";const l="--effect-animation-duration-short-3";const r="--effect-motion-short-2";const h="--effect-motion-short-3";const u="--typography-lineheight-md";const f="--typography-lineheight-xl";const z={space050:a,radius025:n,size200:t,size300:e,size400:o,menuWidthXs:i,lineheightMd:u,lineheightXl:f,motionShort2:r,motionShort3:h,animationDurationShort3:l,animationDurationMedium1:d,animationDelayInstant:s,animationDelayMedium3:m,animationDelayLong2:c,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))",donutFillMin:"calc(var(--dimension-size-base) * 16)",donutFillMax:"calc(var(--dimension-size-base) * 24)"};const y={space050:`var(${a})`};export{
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
const i="--dimension-menu-width-xs";const n="--dimension-radius-025";const t="--dimension-size-200";const e="--dimension-size-300";const o="--dimension-size-400";const a="--dimension-space-050";const s="--effect-animation-delay-instant";const c="--effect-animation-delay-long-2";const m="--effect-animation-delay-medium-3";const d="--effect-animation-duration-medium-1";const l="--effect-animation-duration-short-3";const r="--effect-motion-short-2";const h="--effect-motion-short-3";const u="--typography-lineheight-md";const f="--typography-lineheight-xl";const z={space050:a,radius025:n,size200:t,size300:e,size400:o,menuWidthXs:i,lineheightMd:u,lineheightXl:f,motionShort2:r,motionShort3:h,animationDurationShort3:l,animationDurationMedium1:d,animationDelayInstant:s,animationDelayMedium3:m,animationDelayLong2:c,menuFallbackHeight:"calc(var(--dimension-size-base) * 20)",tooltipFallbackWidth:"calc(var(--dimension-size-800) + var(--dimension-size-200))",donutFillMin:"calc(var(--dimension-size-base) * 16)",donutFillMax:"calc(var(--dimension-size-base) * 24)"};const y={space050:`var(${a})`};export{z as T,y as a};
|
|
2
|
+
//# sourceMappingURL=p-drBA73M_.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{p as t,H as e,h as s,a as d,t as r}from"./index.js";function i(t){return`ds-text--${t.replace(/^text-/,"")}`}function a(t){return t==="span"||t==="label"?"ds-text--inline-box":"ds-text--block-box"}const o=()=>`.ds-text--display-medium.sc-ds-text-h,.ds-text--display-medium.sc-ds-text{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-text-h,.ds-text--display-small.sc-ds-text{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-text-h,.ds-text--title-large.sc-ds-text{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-text-h,.ds-text--title-medium.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-text-h,.ds-text--title-small.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-text-h,.ds-text--body-large.sc-ds-text{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-text-h,.ds-text--body-medium.sc-ds-text{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-text-h,.ds-text--body-small.sc-ds-text{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-text-h,.ds-text--caption.sc-ds-text{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--display-small.ds-text--emphasis.sc-ds-text-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-text,.ds-text--display-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-text-h,.ds-text--display-small.ds-text--regular.sc-ds-text-h,.ds-text--display-medium.ds-text--regular.sc-ds-text,.ds-text--display-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-text-h,.ds-text--title-large.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-text-h,.ds-text--title-large.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--title-small.ds-text--emphasis.sc-ds-text-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-text,.ds-text--title-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-text-h,.ds-text--title-small.ds-text--regular.sc-ds-text-h,.ds-text--title-medium.ds-text--regular.sc-ds-text,.ds-text--title-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-text-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-text-h,.ds-text--body-large.ds-text--emphasis.sc-ds-text,.ds-text--body-medium.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-text-h,.ds-text--body-medium.ds-text--regular.sc-ds-text-h,.ds-text--body-large.ds-text--regular.sc-ds-text,.ds-text--body-medium.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-text-h,.ds-text--body-small.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-text-h,.ds-text--body-small.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-text-h,.ds-text--caption.ds-text--emphasis.sc-ds-text{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-text-h,.ds-text--caption.ds-text--regular.sc-ds-text{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.sc-ds-text-h{box-sizing:border-box;max-width:100%;min-width:0;margin:0;padding:0;border:0;font-family:var(--typography-font-family)}.sc-ds-text-h:where(.ds-text--inline-box){display:inline-block}.sc-ds-text-h:where(.ds-text--block-box){display:block;width:100%}.ds-text__element.sc-ds-text{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;border:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;text-align:inherit;text-decoration:inherit;font-style:inherit;font-variant-numeric:inherit;font-feature-settings:inherit;white-space:inherit;text-wrap:inherit;overflow-wrap:inherit;word-break:inherit;overflow:inherit;text-overflow:inherit}.ds-text--truncate-1.sc-ds-text-h{overflow:hidden}.ds-text--truncate-1.sc-ds-text-h .ds-text__element.sc-ds-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-text--truncate-2.sc-ds-text-h,.ds-text--truncate-3.sc-ds-text-h,.ds-text--truncate-4.sc-ds-text-h,.ds-text--truncate-5.sc-ds-text-h{overflow:hidden}.ds-text--truncate-2.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-3.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-4.sc-ds-text-h .ds-text__element.sc-ds-text,.ds-text--truncate-5.sc-ds-text-h .ds-text__element.sc-ds-text{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word}.ds-text--truncate-2.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:2}.ds-text--truncate-3.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:3}.ds-text--truncate-4.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:4}.ds-text--truncate-5.sc-ds-text-h .ds-text__element.sc-ds-text{-webkit-line-clamp:5}.ds-text--nowrap.sc-ds-text-h,.ds-text--nowrap.sc-ds-text-h .ds-text__element.sc-ds-text{white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;min-width:0}.ds-text--balance.sc-ds-text-h,.ds-text--balance.sc-ds-text-h .ds-text__element.sc-ds-text{text-wrap:balance}.ds-text--pretty.sc-ds-text-h,.ds-text--pretty.sc-ds-text-h .ds-text__element.sc-ds-text{text-wrap:pretty}.ds-text--color-primary.sc-ds-text-h{color:var(--color-foreground-primary)}.ds-text--color-secondary.sc-ds-text-h{color:var(--color-foreground-secondary)}.ds-text--color-tertiary.sc-ds-text-h{color:var(--color-foreground-tertiary)}.ds-text--color-brand.sc-ds-text-h{color:var(--color-foreground-bold-brand)}.ds-text--color-negative.sc-ds-text-h{color:var(--color-foreground-bold-negative)}.ds-text--color-positive.sc-ds-text-h{color:var(--color-foreground-bold-positive)}.ds-text--color-warning.sc-ds-text-h{color:var(--color-foreground-bold-warning)}.ds-text--color-caution.sc-ds-text-h{color:var(--color-foreground-bold-caution)}.ds-text--color-ai.sc-ds-text-h{color:var(--color-foreground-bold-ai)}.ds-text--color-on-strong.sc-ds-text-h{color:var(--color-foreground-on-strong-background-primary)}.ds-text--color-on-bold.sc-ds-text-h{color:var(--color-foreground-on-bold-background-primary)}.ds-text--color-inherit.sc-ds-text-h{color:inherit}.ds-text--decoration-underline.sc-ds-text-h{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--decoration-dotted-underline.sc-ds-text-h{text-decoration:underline dotted;text-underline-offset:2px;text-decoration-thickness:1px}.ds-text--italic.sc-ds-text-h{font-style:italic}.ds-text--font-feature-tabular-nums.sc-ds-text-h{font-variant-numeric:tabular-nums;font-feature-settings:'tnum'}.ds-text--align-left.sc-ds-text-h{text-align:left}.ds-text--align-center.sc-ds-text-h{text-align:center}.ds-text--align-right.sc-ds-text-h{text-align:right}`;const n=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.variant="text-body-medium";this.emphasis=false;this.italic=false;this.lineTruncation="none";this.fontFeature="normal";this.as="p"}render(){const t=this.as;const e=t=>typeof t==="string"&&t.startsWith("var(--");const r={"ds-text":true,[a(this.as)]:true,[i(this.variant)]:true,"ds-text--emphasis":this.emphasis,"ds-text--regular":!this.emphasis,"ds-text--nowrap":this.wrap==="nowrap","ds-text--balance":this.wrap==="balance","ds-text--pretty":this.wrap==="pretty","ds-text--truncate-1":this.lineTruncation===1&&this.wrap!=="nowrap","ds-text--truncate-2":this.lineTruncation===2&&this.wrap!=="nowrap","ds-text--truncate-3":this.lineTruncation===3&&this.wrap!=="nowrap","ds-text--truncate-4":this.lineTruncation===4&&this.wrap!=="nowrap","ds-text--truncate-5":this.lineTruncation===5&&this.wrap!=="nowrap","ds-text--color-primary":this.color==="primary","ds-text--color-secondary":this.color==="secondary","ds-text--color-tertiary":this.color==="tertiary","ds-text--color-brand":this.color==="brand","ds-text--color-negative":this.color==="negative","ds-text--color-positive":this.color==="positive","ds-text--color-warning":this.color==="warning","ds-text--color-caution":this.color==="caution","ds-text--color-ai":this.color==="ai","ds-text--color-on-strong":this.color==="on-strong","ds-text--color-on-bold":this.color==="on-bold","ds-text--color-inherit":this.color==="inherit","ds-text--decoration-underline":this.decoration==="underline","ds-text--decoration-dotted-underline":this.decoration==="dotted-underline","ds-text--italic":this.italic,"ds-text--align-left":this.align==="left","ds-text--align-center":this.align==="center","ds-text--align-right":this.align==="right","ds-text--font-feature-tabular-nums":this.fontFeature==="tabular-nums"};const o=this.color&&e(this.color)?{color:this.color}:undefined;const n={};if(this.as==="label"&&this.for)n["for"]=this.for;if(this.textId)n["id"]=this.textId;return s(d,{key:"2b07d102e41ea1dd2d073ae7fc01332150feb733",class:r,style:o},s(t,{key:"fe2e2deb64168a31105e5de31e5e5c63aa8ce487",class:"ds-text__element",...n},s("slot",{key:"ea21620e2cae61d119aee00f63114ea9b051a138"})))}static get style(){return o()}},[262,"ds-text",{variant:[1],emphasis:[4],color:[1],decoration:[1],italic:[4],align:[1],lineTruncation:[8,"line-truncation"],wrap:[1],fontFeature:[1,"font-feature"],as:[1],for:[1],textId:[1,"text-id"]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-text"];t.forEach((t=>{switch(t){case"ds-text":if(!customElements.get(r(t))){customElements.define(r(t),n)}break}}))}x();export{n as T,x as d};
|
|
2
|
+
//# sourceMappingURL=p-emacH2W5.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["textVariantClass","variant","replace","textDisplayClass","element","textCss","Text","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","emphasis","italic","lineTruncation","fontFeature","as","render","Tag","isCustomColor","c","startsWith","cls","wrap","color","decoration","align","style","undefined","extraProps","for","textId","h","Host","key","class"],"sources":["src/wc/components/Text/text-utils.ts","src/wc/components/Text/Text.css?tag=ds-text&encapsulation=scoped","src/wc/components/Text/Text.tsx"],"sourcesContent":["import type { TextElement, TextVariant } from './text-types';\n\n/** `text-body-medium` → `ds-text--body-medium` */\nexport function textVariantClass(variant: TextVariant): string {\n return `ds-text--${variant.replace(/^text-/, '')}`;\n}\n\n/** Inline semantics get a measurable inline box; paragraphs/headings get a block box. */\nexport function textDisplayClass(element: TextElement): string {\n return element === 'span' || element === 'label'\n ? 'ds-text--inline-box'\n : 'ds-text--block-box';\n}\n","@import '../../utils/typography.css';\n\n:host {\n box-sizing: border-box;\n max-width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font-family: var(--typography-font-family);\n}\n\n:host(:where(.ds-text--inline-box)) {\n display: inline-block;\n}\n\n:host(:where(.ds-text--block-box)) {\n display: block;\n width: 100%;\n}\n\n/*\n * The host is the measurable typography box. The semantic inner element fills\n * it and inherits every text metric without adding margins, padding, or its own\n * line-height strut. One rendered line therefore measures exactly one token\n * line-height; N lines measure N × that token.\n */\n.ds-text__element {\n display: block;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n margin: 0;\n padding: 0;\n border: 0;\n font: inherit;\n line-height: inherit;\n letter-spacing: inherit;\n color: inherit;\n text-transform: inherit;\n text-align: inherit;\n text-decoration: inherit;\n font-style: inherit;\n font-variant-numeric: inherit;\n font-feature-settings: inherit;\n white-space: inherit;\n text-wrap: inherit;\n overflow-wrap: inherit;\n word-break: inherit;\n /* Consumer truncation on the host (PanelNav, ChartLegend, …) must reach the\n text node — overflow/text-overflow are not inherited by default. */\n overflow: inherit;\n text-overflow: inherit;\n}\n\n/* ── Truncation ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--truncate-1) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-1) .ds-text__element {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n:host(.ds-text--truncate-2),\n:host(.ds-text--truncate-3),\n:host(.ds-text--truncate-4),\n:host(.ds-text--truncate-5) {\n overflow: hidden;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element,\n:host(.ds-text--truncate-3) .ds-text__element,\n:host(.ds-text--truncate-4) .ds-text__element,\n:host(.ds-text--truncate-5) .ds-text__element {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n text-overflow: ellipsis;\n word-break: break-word;\n}\n\n:host(.ds-text--truncate-2) .ds-text__element { -webkit-line-clamp: 2; }\n:host(.ds-text--truncate-3) .ds-text__element { -webkit-line-clamp: 3; }\n:host(.ds-text--truncate-4) .ds-text__element { -webkit-line-clamp: 4; }\n:host(.ds-text--truncate-5) .ds-text__element { -webkit-line-clamp: 5; }\n\n/* ── Wrap ───────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--nowrap),\n:host(.ds-text--nowrap) .ds-text__element {\n white-space: nowrap;\n word-break: normal;\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n}\n\n:host(.ds-text--balance),\n:host(.ds-text--balance) .ds-text__element { text-wrap: balance; }\n\n:host(.ds-text--pretty),\n:host(.ds-text--pretty) .ds-text__element { text-wrap: pretty; }\n\n/* ── Color ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--color-primary) { color: var(--color-foreground-primary); }\n:host(.ds-text--color-secondary) { color: var(--color-foreground-secondary); }\n:host(.ds-text--color-tertiary) { color: var(--color-foreground-tertiary); }\n:host(.ds-text--color-brand) { color: var(--color-foreground-bold-brand); }\n:host(.ds-text--color-negative) { color: var(--color-foreground-bold-negative); }\n:host(.ds-text--color-positive) { color: var(--color-foreground-bold-positive); }\n:host(.ds-text--color-warning) { color: var(--color-foreground-bold-warning); }\n:host(.ds-text--color-caution) { color: var(--color-foreground-bold-caution); }\n:host(.ds-text--color-ai) { color: var(--color-foreground-bold-ai); }\n:host(.ds-text--color-on-strong) { color: var(--color-foreground-on-strong-background-primary); }\n:host(.ds-text--color-on-bold) { color: var(--color-foreground-on-bold-background-primary); }\n:host(.ds-text--color-inherit) { color: inherit; }\n\n/* ── Decorations ─────────────────────────────────────────────────────────── */\n\n:host(.ds-text--decoration-underline) {\n text-decoration: underline;\n text-underline-offset: 2px;\n text-decoration-thickness: 1px;\n}\n\n:host(.ds-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:host(.ds-text--italic) { font-style: italic; }\n\n:host(.ds-text--font-feature-tabular-nums) {\n font-variant-numeric: tabular-nums;\n font-feature-settings: 'tnum';\n}\n\n/* ── Align ──────────────────────────────────────────────────────────────── */\n\n:host(.ds-text--align-left) { text-align: left; }\n:host(.ds-text--align-center) { text-align: center; }\n:host(.ds-text--align-right) { text-align: right; }\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { textDisplayClass, textVariantClass } from './text-utils';\nimport type {\n TextAlign,\n TextColor,\n TextDecoration,\n TextElement,\n TextFontFeature,\n TextVariant,\n LineTruncation,\n TextWrap,\n} from './text-types';\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 /**\n * Heavier weight + tighter letter-spacing for the variant.\n * `false` (default): one step below emphasis (display semibold, title/body\n * medium, caption medium).\n * `true`: display bold, title/caption semibold, body medium.\n */\n @Prop() emphasis: boolean = false;\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() fontFeature: TextFontFeature = 'normal';\n @Prop() as: TextElement = 'p';\n /** Maps to `for` attribute on <label> elements. */\n @Prop() for: string | undefined;\n /** Forwarded to the inner element (e.g. aria-labelledby targets). */\n @Prop() textId: 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 'ds-text': true,\n [textDisplayClass(this.as)]: true,\n [textVariantClass(this.variant)]: true,\n 'ds-text--emphasis': this.emphasis,\n 'ds-text--regular': !this.emphasis,\n 'ds-text--nowrap': this.wrap === 'nowrap',\n 'ds-text--balance': this.wrap === 'balance',\n 'ds-text--pretty': this.wrap === 'pretty',\n 'ds-text--truncate-1': this.lineTruncation === 1 && this.wrap !== 'nowrap',\n 'ds-text--truncate-2': this.lineTruncation === 2 && this.wrap !== 'nowrap',\n 'ds-text--truncate-3': this.lineTruncation === 3 && this.wrap !== 'nowrap',\n 'ds-text--truncate-4': this.lineTruncation === 4 && this.wrap !== 'nowrap',\n 'ds-text--truncate-5': this.lineTruncation === 5 && this.wrap !== 'nowrap',\n 'ds-text--color-primary': this.color === 'primary',\n 'ds-text--color-secondary': this.color === 'secondary',\n 'ds-text--color-tertiary': this.color === 'tertiary',\n 'ds-text--color-brand': this.color === 'brand',\n 'ds-text--color-negative': this.color === 'negative',\n 'ds-text--color-positive': this.color === 'positive',\n 'ds-text--color-warning': this.color === 'warning',\n 'ds-text--color-caution': this.color === 'caution',\n 'ds-text--color-ai': this.color === 'ai',\n 'ds-text--color-on-strong': this.color === 'on-strong',\n 'ds-text--color-on-bold': this.color === 'on-bold',\n 'ds-text--color-inherit': this.color === 'inherit',\n 'ds-text--decoration-underline': this.decoration === 'underline',\n 'ds-text--decoration-dotted-underline': this.decoration === 'dotted-underline',\n 'ds-text--italic': this.italic,\n 'ds-text--align-left': this.align === 'left',\n 'ds-text--align-center': this.align === 'center',\n 'ds-text--align-right': this.align === 'right',\n 'ds-text--font-feature-tabular-nums': this.fontFeature === 'tabular-nums',\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 if (this.textId) extraProps['id'] = this.textId;\n\n return (\n <Host class={cls} style={style}>\n <Tag class=\"ds-text__element\" {...extraProps}>\n <slot />\n </Tag>\n </Host>\n );\n }\n}\n"],"mappings":"2DAGM,SAAUA,EAAiBC,GAC/B,MAAO,YAAYA,EAAQC,QAAQ,SAAU,KAC/C,CAGM,SAAUC,EAAiBC,GAC/B,OAAOA,IAAY,QAAUA,IAAY,QACrC,sBACA,oBACN,CCZA,MAAMC,EAAU,IAAM,u8P,MCkBTC,EAAIC,EAAA,MAAAD,UAAAE,EALjB,WAAAC,CAAAC,G,4CAMUC,KAAAV,QAAuB,mBAOvBU,KAAAC,SAAoB,MAGpBD,KAAAE,OAAkB,MAElBF,KAAAG,eAAiC,OAEjCH,KAAAI,YAA+B,SAC/BJ,KAAAK,GAAkB,GAgE3B,CA1DC,MAAAC,GAIE,MAAMC,EAAMP,KAAKK,GACjB,MAAMG,EAAiBC,UAAwBA,IAAM,UAAYA,EAAEC,WAAW,UAE9E,MAAMC,EAA+B,CACnC,UAAW,KACX,CAACnB,EAAiBQ,KAAKK,KAAM,KAC7B,CAAChB,EAAiBW,KAAKV,UAAW,KAClC,oBAAqBU,KAAKC,SAC1B,oBAAqBD,KAAKC,SAC1B,kBAAmBD,KAAKY,OAAS,SACjC,mBAAoBZ,KAAKY,OAAS,UAClC,kBAAmBZ,KAAKY,OAAS,SACjC,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,sBAAuBZ,KAAKG,iBAAmB,GAAKH,KAAKY,OAAS,SAClE,yBAA4BZ,KAAKa,QAAU,UAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,uBAA4Bb,KAAKa,QAAU,QAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,0BAA4Bb,KAAKa,QAAU,WAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,oBAA4Bb,KAAKa,QAAU,KAC3C,2BAA4Bb,KAAKa,QAAU,YAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,yBAA4Bb,KAAKa,QAAU,UAC3C,gCAAwCb,KAAKc,aAAe,YAC5D,uCAAwCd,KAAKc,aAAe,mBAC5D,kBAAmBd,KAAKE,OACxB,sBAAyBF,KAAKe,QAAU,OACxC,wBAAyBf,KAAKe,QAAU,SACxC,uBAAyBf,KAAKe,QAAU,QACxC,qCAAsCf,KAAKI,cAAgB,gBAG7D,MAAMY,EAAQhB,KAAKa,OAASL,EAAcR,KAAKa,OAC3C,CAAEA,MAAOb,KAAKa,OACdI,UAEJ,MAAMC,EAAqC,GAC3C,GAAIlB,KAAKK,KAAO,SAAWL,KAAKmB,IAAKD,EAAW,OAASlB,KAAKmB,IAC9D,GAAInB,KAAKoB,OAAQF,EAAW,MAAQlB,KAAKoB,OAEzC,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOb,EAAKK,MAAOA,GACvBK,EAACd,EAAG,CAAAgB,IAAA,2CAACC,MAAM,sBAAuBN,GAChCG,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
|