npm - @ds-mo/ui - Versions diffs - 2.13.0 → 2.14.0 - Mend

@ds-mo/ui 2.13.0 → 2.14.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.

Files changed (39) hide show

package/dist/components/ds-panel-tools.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","bodyItems","filter","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. /\nexport type PanelToolsToolId = 'search' \| 'agents' \| 'messages' \| 'stacks' \| 'activity';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n];\n\n/* Rail header slot — mirrors panel-nav M logo row. /\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n search: 'Search',\n messages: 'Messages',\n stacks: 'Stacks',\n activity: 'Activity',\n agents: 'Agents',\n};\n\nexport interface PanelToolsItem {\n id: PanelToolsToolId;\n /* Icon name for <ds-icon>. /\n icon: string;\n /* Whether this rail button is currently pressed/active. /\n selected?: boolean;\n /* Show a notification dot. /\n dot?: boolean;\n isInactive?: boolean;\n ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n items: PanelToolsItem[],\n itemsJson: string,\n): PanelToolsItem[] {\n if (itemsJson) {\n return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n }\n return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n prev: PanelToolsItem[],\n next: PanelToolsItem[],\n): boolean {\n if (prev.length !== next.length) return true;\n return next.some((item, index) => {\n const prior = prev[index];\n if (!prior) return true;\n return (\n prior.id !== item.id \|\|\n prior.icon !== item.icon \|\|\n prior.selected !== item.selected \|\|\n prior.dot !== item.dot \|\|\n prior.isInactive !== item.isInactive \|\|\n prior.ariaLabel !== item.ariaLabel\n );\n });\n}\n\nexport type PanelToolsMotion = 'opening' \| 'closing' \| 'idle';\n\n/* True when the drawer clip is fully closed — safe to skip painting slot content. /\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n return !open && motion === 'idle';\n}\n\n/* Toggle or switch rail tool selection — repeat activation closes the active tool. /\nexport function resolvePanelToolActivation(\n open: boolean,\n activeTool: PanelToolsToolId \| '',\n id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n if (open && activeTool === id) {\n return { open: false, activeTool: id, selected: false };\n }\n return { open: true, activeTool: id, selected: true };\n}\n",":host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n --_panel-tools-rail-width: var(--dimension-size-600);\n --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n --_panel-tools-surface-bg: var(--color-background-secondary);\n / Match panel-nav expand timing (medium-1); easing differs by direction. /\n --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n/ Clip frame — only max-width animates (slide reveal, same as pre-rail :host). /\n.panel-tools__drawer {\n flex: 0 0 auto;\n max-width: 0;\n min-width: 0;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n box-sizing: border-box;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n border-left: var(--_panel-tools-border);\n}\n\n/ Fixed-width surface — stays 400px while the clip frame opens/closes. /\n.panel-tools__drawer-surface {\n display: flex;\n flex-direction: column;\n width: var(--_panel-tools-drawer-width);\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--_panel-tools-surface-bg);\n}\n\n/ Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. /\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n background-color: transparent;\n}\n\n/ Aligns with ds-bar-nav row — same height, inset, border, and title token. /\n.panel-tools__header {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n border-bottom: var(--_panel-tools-border);\n color: var(--color-foreground-primary);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tools__title {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.panel-tools__body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n position: relative;\n}\n\n/ Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. /\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n display: none;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n padding: var(--dimension-space-200);\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted() {\n margin: 0;\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. /\n.panel-tools__rail {\n flex: 0 0 var(--_panel-tools-rail-width);\n width: var(--_panel-tools-rail-width);\n min-width: var(--_panel-tools-rail-width);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n border-left: var(--_panel-tools-border);\n background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n display: none;\n}\n\n.panel-tools__rail-action {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--dimension-size-400);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_PRIMARY_TOOL_ID,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n tag: 'ds-panel-tools',\n styleUrl: 'PanelTools.css',\n scoped: true,\n})\nexport class PanelTools {\n @Element() el!: HTMLElement;\n\n /* When false, only the icon rail is shown. /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Active tool view — `search`, `agents`, `messages`, `stacks`, or `activity`. /\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId \| '' = '';\n\n /\n Rail items rendered in the right column.\n * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n /\n @Prop() items: PanelToolsItem[] = [];\n\n /* JSON fallback for `items` — useful when framework bindings don't propagate arrays. /\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n /* Emitted when a rail button is toggled. Detail = { id, selected }. /\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n\n /* Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. /\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n /* Arms open vs close easing for the in-flight width transition. /\n @State() private motion: 'opening' \| 'closing' \| 'idle' = 'idle';\n\n /* Suppresses width transition until the host has painted its initial open state. /\n @State() private readyForMotion = false;\n\n @State() private rovingIndex = 0;\n\n private motionEnableGeneration = 0;\n\n private get railItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get orderedRailItems(): PanelToolsItem[] {\n const railItems = this.railItems;\n const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = railItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n return headerItem ? [headerItem, ...bodyItems] : bodyItems;\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.motionEnableGeneration += 1;\n }\n\n private deferMotionEnable() {\n if (this.readyForMotion) return;\n const generation = ++this.motionEnableGeneration;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n this.readyForMotion = true;\n });\n });\n }\n\n connectedCallback() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n @Watch('open')\n openChanged(isOpen: boolean, wasOpen?: boolean) {\n if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n this.motion = isOpen ? 'opening' : 'closing';\n this.dsChromeTransitionStart.emit({\n source: 'panel-tools',\n phase: isOpen ? 'opening' : 'closing',\n });\n }\n this.deferMotionEnable();\n }\n\n @Watch('activeTool')\n activeToolChanged() {\n this.deferMotionEnable();\n }\n\n componentDidLoad() {\n this.deferMotionEnable();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n itemsChanged() {\n this.rovingIndex = 0;\n this.deferMotionEnable();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n if (event.propertyName !== 'max-width') return;\n this.motion = 'idle';\n this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n };\n\n /* Rail selection follows `open` immediately — independent of the slide animation. /\n private isRailSelected(id: PanelToolsToolId): boolean {\n return this.open && this.activeTool === id;\n }\n\n /* Drawer body stays mounted while the clip frame animates closed. /\n private isDrawerPresent(): boolean {\n return this.open \|\| this.motion === 'closing';\n }\n\n private isViewActive(id: PanelToolsToolId): boolean {\n return this.isDrawerPresent() && this.activeTool === id;\n }\n\n private headerLabel(): string {\n if (!this.isDrawerPresent() \|\| !this.activeTool) return '';\n return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n }\n\n private handleToolChange = (id: PanelToolsToolId) => {\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n };\n\n /* Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. /\n @Method()\n async activateTool(id: PanelToolsToolId) {\n const item = this.railItems.find(entry => entry.id === id);\n if (!item \|\| item.isInactive) return;\n this.handleToolChange(id);\n }\n\n /* Close the tools drawer when open — used by shell keyboard shortcuts. */\n @Method()\n async closeDrawer() {\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) {\n this.dsToolChange.emit({ id, selected: false });\n }\n }\n\n private focusRailAt(index: number) {\n const items = this.orderedRailItems;\n if (!items.length) return;\n const bounded = Math.max(0, Math.min(index, items.length - 1));\n if (bounded === this.rovingIndex) return;\n this.rovingIndex = bounded;\n const actions = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n );\n actions[bounded]?.focus({ preventScroll: true });\n }\n\n private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n const items = this.orderedRailItems;\n if (!items.length) return;\n\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.handleToolChange(items[index].id);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n if (index >= items.length - 1) return;\n e.preventDefault();\n this.focusRailAt(index + 1);\n return;\n }\n\n if (e.key === 'ArrowUp') {\n if (index <= 0) return;\n e.preventDefault();\n this.focusRailAt(index - 1);\n }\n };\n\n private renderRailAction(item: PanelToolsItem, index: number) {\n const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n return (\n <ds-tooltip key={item.id} label={label} side=\"left\" size=\"sm\">\n <ds-button-unfilled variant=\"icon\"\n class=\"panel-tools__rail-action\"\n icon={item.icon}\n isActive={this.isRailSelected(item.id)}\n activeFill={false}\n hasBorder={false}\n dot={item.dot ?? false}\n isInactive={item.isInactive}\n focusTabIndex={index === this.rovingIndex ? 0 : -1}\n aria-label={label}\n pressed={this.isRailSelected(item.id)}\n onFocusin={() => { this.rovingIndex = index; }}\n onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n onDsClick={() => this.handleToolChange(item.id)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const headerLabel = this.headerLabel();\n const orderedRailItems = this.orderedRailItems;\n const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const bodyItems = orderedRailItems.filter(item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID);\n const showDrawerChrome = this.isDrawerPresent();\n const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n return (\n <Host\n class={{\n 'panel-tools': true,\n 'panel-tools--open': this.open,\n 'panel-tools--ready': this.readyForMotion,\n 'panel-tools--motion-opening': this.motion === 'opening',\n 'panel-tools--motion-closing': this.motion === 'closing',\n 'panel-tools--drawer-resting': drawerResting,\n }}\n role=\"complementary\"\n aria-label=\"Tools\"\n >\n <div class=\"panel-tools__layout\">\n <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n {headerItem ? (\n <div class=\"panel-tools__rail-header\">\n {this.renderRailAction(headerItem, 0)}\n </div>\n ) : null}\n <div class=\"panel-tools__rail-body\">\n {bodyItems.map((item, bodyIdx) =>\n this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n )}\n </div>\n </nav>\n\n <div\n class={{\n 'panel-tools__drawer': true,\n 'panel-tools__drawer--visible': showDrawerChrome,\n }}\n aria-hidden={showDrawerChrome ? null : 'true'}\n inert={showDrawerChrome ? undefined : true}\n >\n <div class=\"panel-tools__drawer-surface\">\n <header class=\"panel-tools__header\">\n <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n </header>\n <div class=\"panel-tools__body\">\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('search'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('search')}\n >\n <slot name=\"search\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('messages'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('messages')}\n >\n <slot name=\"messages\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('stacks'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('stacks')}\n >\n <slot name=\"stacks\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('activity'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('activity')}\n >\n <slot name=\"activity\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('agents'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('agents')}\n >\n <slot name=\"agents\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["PANEL_TOOLS_PRIMARY_TOOL_ID","PANEL_TOOLS_FOOTER_TOOL_ID","PANEL_TOOLS_LABELS","search","messages","stacks","activity","agents","help","parsePanelToolsItems","items","itemsJson","parseJsonArrayProp","panelToolsDrawerResting","open","motion","resolvePanelToolActivation","activeTool","id","selected","panelToolsCss","PanelTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","readyForMotion","rovingIndex","motionEnableGeneration","handleTransitionEnd","event","target","el","querySelector","propertyName","dsChromeTransitionEnd","emit","source","handleToolChange","next","dsToolChange","handleRailKeyDown","e","index","orderedRailItems","length","key","preventDefault","focusRailAt","railItems","headerItem","find","item","footerItem","bodyItems","filter","ordered","push","disconnectedCallback","removeEventListener","deferMotionEnable","generation","requestAnimationFrame","connectedCallback","addEventListener","openChanged","isOpen","wasOpen","undefined","dsChromeTransitionStart","phase","activeToolChanged","componentDidLoad","itemsChanged","isRailSelected","isDrawerPresent","isViewActive","headerLabel","activateTool","entry","isInactive","closeDrawer","bounded","Math","max","min","actions","Array","from","querySelectorAll","focus","preventScroll","renderRailAction","label","ariaLabel","h","side","size","variant","class","icon","isActive","activeFill","hasBorder","dot","focusTabIndex","pressed","onFocusin","onKeyDown","onDsClick","render","footerIndex","showDrawerChrome","drawerResting","Host","role","map","bodyIdx","inert","hidden","name"],"sources":["src/wc/components/PanelTools/panel-tools-types.ts","src/wc/components/PanelTools/panel-tools-utils.ts","src/wc/components/PanelTools/PanelTools.css?tag=ds-panel-tools&encapsulation=scoped","src/wc/components/PanelTools/PanelTools.tsx"],"sourcesContent":["/** Tool ids for the `ds-panel-tools` rail and drawer views. /\nexport type PanelToolsToolId =\n \| 'search'\n \| 'agents'\n \| 'messages'\n \| 'stacks'\n \| 'activity'\n \| 'help';\n\nexport const PANEL_TOOLS_TOOL_IDS: PanelToolsToolId[] = [\n 'search',\n 'agents',\n 'messages',\n 'stacks',\n 'activity',\n 'help',\n];\n\n/* Rail header slot — mirrors panel-nav M logo row. /\nexport const PANEL_TOOLS_PRIMARY_TOOL_ID: PanelToolsToolId = 'search';\n\n/* Rail footer slot — flush to the bottom of the tools column. /\nexport const PANEL_TOOLS_FOOTER_TOOL_ID: PanelToolsToolId = 'help';\n\nexport const PANEL_TOOLS_LABELS: Record<PanelToolsToolId, string> = {\n search: 'Search',\n messages: 'Messages',\n stacks: 'Stacks',\n activity: 'Activity',\n agents: 'Agents',\n help: 'Help & Support',\n};\n\nexport interface PanelToolsItem {\n id: PanelToolsToolId;\n /* Icon name for <ds-icon>. /\n icon: string;\n /* Whether this rail button is currently pressed/active. /\n selected?: boolean;\n /* Show a notification dot. /\n dot?: boolean;\n isInactive?: boolean;\n ariaLabel?: string;\n}\n","import { parseJsonArrayProp } from '../BarNav/bar-nav-utils';\nimport type { PanelToolsItem, PanelToolsToolId } from './panel-tools-types';\n\nexport function parsePanelToolsItems(\n items: PanelToolsItem[],\n itemsJson: string,\n): PanelToolsItem[] {\n if (itemsJson) {\n return parseJsonArrayProp<PanelToolsItem>(itemsJson, []);\n }\n return items ?? [];\n}\n\nexport function shouldResyncPanelToolsItems(\n prev: PanelToolsItem[],\n next: PanelToolsItem[],\n): boolean {\n if (prev.length !== next.length) return true;\n return next.some((item, index) => {\n const prior = prev[index];\n if (!prior) return true;\n return (\n prior.id !== item.id \|\|\n prior.icon !== item.icon \|\|\n prior.selected !== item.selected \|\|\n prior.dot !== item.dot \|\|\n prior.isInactive !== item.isInactive \|\|\n prior.ariaLabel !== item.ariaLabel\n );\n });\n}\n\nexport type PanelToolsMotion = 'opening' \| 'closing' \| 'idle';\n\n/* True when the drawer clip is fully closed — safe to skip painting slot content. /\nexport function panelToolsDrawerResting(open: boolean, motion: PanelToolsMotion): boolean {\n return !open && motion === 'idle';\n}\n\n/* Toggle or switch rail tool selection — repeat activation closes the active tool. /\nexport function resolvePanelToolActivation(\n open: boolean,\n activeTool: PanelToolsToolId \| '',\n id: PanelToolsToolId,\n): { open: boolean; activeTool: PanelToolsToolId; selected: boolean } {\n if (open && activeTool === id) {\n return { open: false, activeTool: id, selected: false };\n }\n return { open: true, activeTool: id, selected: true };\n}\n",":host {\n display: block;\n flex: 0 0 auto;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n --_panel-tools-rail-width: var(--dimension-size-600);\n --_panel-tools-drawer-width: var(--dimension-panel-width-sm);\n --_panel-tools-border: var(--dimension-stroke-width-012, 1px) solid var(--color-border-tertiary);\n --_panel-tools-surface-bg: var(--color-background-secondary);\n / Match panel-nav expand timing (medium-1); easing differs by direction. /\n --_panel-tools-expand-dur: var(--effect-animation-duration-medium-1, 300ms);\n}\n\n.panel-tools__layout {\n display: flex;\n flex-direction: row-reverse;\n align-items: stretch;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n}\n\n/ Clip frame — only max-width animates (slide reveal, same as pre-rail :host). /\n.panel-tools__drawer {\n flex: 0 0 auto;\n max-width: 0;\n min-width: 0;\n height: 100%;\n min-height: 0;\n overflow: hidden;\n box-sizing: border-box;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__drawer {\n transition: max-width var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__drawer {\n max-width: var(--_panel-tools-drawer-width);\n}\n\n.panel-tools__drawer--visible {\n border-left: var(--_panel-tools-border);\n}\n\n/ Fixed-width surface — stays 400px while the clip frame opens/closes. /\n.panel-tools__drawer-surface {\n display: flex;\n flex-direction: column;\n width: var(--_panel-tools-drawer-width);\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n background-color: var(--_panel-tools-surface-bg);\n}\n\n/ Shell-owned chrome (bg + wash) — drawer + rail are transparent frames. /\n:host-context(ds-app-shell[gradient]) .panel-tools__drawer-surface,\n:host-context(ds-app-shell[gradient]) .panel-tools__rail {\n background-color: transparent;\n}\n\n/ Aligns with ds-bar-nav row — same height, inset, border, and title token. /\n.panel-tools__header {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n border-bottom: var(--_panel-tools-border);\n color: var(--color-foreground-primary);\n box-sizing: border-box;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.panel-tools__title {\n display: inline-flex;\n align-items: center;\n height: var(--dimension-size-400);\n padding-inline: var(--dimension-space-100);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/\n * Fade title + slot body with the drawer slide (same dur/easing).\n * Header border stays opaque — only inner content opacity animates.\n /\n.panel-tools__title,\n.panel-tools__body {\n opacity: 0;\n transition: none;\n}\n\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-opening) .panel-tools__body {\n transition: opacity var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__title,\n:host(.panel-tools--ready.panel-tools--motion-closing) .panel-tools__body {\n transition: opacity var(--_panel-tools-expand-dur)\n var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.panel-tools--open) .panel-tools__title,\n:host(.panel-tools--open) .panel-tools__body {\n opacity: 1;\n}\n\n.panel-tools__body {\n flex: 1 1 auto;\n min-height: 0;\n overflow: auto;\n position: relative;\n}\n\n/ Skip paint while fully closed; cleared during open/close motion for WYSIWYG slide. /\n:host(.panel-tools--drawer-resting) .panel-tools__body {\n content-visibility: auto;\n contain-intrinsic-size: auto 200px;\n}\n\n.panel-tools__view {\n display: none;\n height: 100%;\n min-height: 0;\n box-sizing: border-box;\n padding: var(--dimension-space-200);\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view ::slotted() {\n margin: 0;\n color: var(--color-foreground-secondary);\n font-family: var(--typography-font-family);\n font-size: var(--typography-fontsize-md);\n line-height: var(--typography-lineheight-md);\n font-weight: var(--typography-weight-regular);\n letter-spacing: var(--typography-letterspacing-negative-half);\n}\n\n.panel-tools__view--active {\n display: block;\n}\n\n/* Rail — mirrors collapsed panel-nav width, padding, and item rhythm. /\n.panel-tools__rail {\n flex: 0 0 var(--_panel-tools-rail-width);\n width: var(--_panel-tools-rail-width);\n min-width: var(--_panel-tools-rail-width);\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n height: 100%;\n min-height: 0;\n border-left: var(--_panel-tools-border);\n background-color: var(--_panel-tools-surface-bg);\n}\n\n.panel-tools__rail-header {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--dimension-size-600);\n padding: var(--dimension-space-100);\n flex-shrink: 0;\n box-sizing: border-box;\n border-bottom: var(--_panel-tools-border);\n}\n\n.panel-tools__rail-body {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--dimension-space-050);\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n scrollbar-width: none;\n}\n\n.panel-tools__rail-body::-webkit-scrollbar {\n display: none;\n}\n\n/ Flush to the bottom of the rail — mirrors Search header pin. /\n.panel-tools__rail-footer {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-top: auto;\n padding: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n.panel-tools__rail-action {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: var(--dimension-size-400);\n flex-shrink: 0;\n}\n","import { Component, Prop, Event, EventEmitter, Element, State, Watch, Method, h, Host } from '@stencil/core';\nimport type { ChromeTransitionDetail } from '../../nav/chrome-transition';\nimport {\n PANEL_TOOLS_FOOTER_TOOL_ID,\n PANEL_TOOLS_LABELS,\n PANEL_TOOLS_PRIMARY_TOOL_ID,\n type PanelToolsItem,\n type PanelToolsToolId,\n} from './panel-tools-types';\nimport { parsePanelToolsItems, panelToolsDrawerResting, resolvePanelToolActivation } from './panel-tools-utils';\n\n@Component({\n tag: 'ds-panel-tools',\n styleUrl: 'PanelTools.css',\n scoped: true,\n})\nexport class PanelTools {\n @Element() el!: HTMLElement;\n\n /* When false, only the icon rail is shown. /\n @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n /* Active tool view — `search`, `agents`, `messages`, `stacks`, `activity`, or `help`. /\n @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n activeTool: PanelToolsToolId \| '' = '';\n\n /\n Rail items rendered in the right column.\n * Set via JS property: `el.items = [...]`. Replace the array reference to update.\n /\n @Prop() items: PanelToolsItem[] = [];\n\n /* JSON fallback for `items` — useful when framework bindings don't propagate arrays. /\n @Prop({ attribute: 'items-json' }) itemsJson: string = '';\n\n /* Emitted when a rail button is toggled. Detail = { id, selected }. /\n @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n id: PanelToolsToolId;\n selected: boolean;\n }>;\n\n /* Bubbling lifecycle — `ds-bar-nav` defers overflow checks during drawer motion. /\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionStart!: EventEmitter<ChromeTransitionDetail>;\n\n @Event({ bubbles: true, composed: true })\n dsChromeTransitionEnd!: EventEmitter<ChromeTransitionDetail>;\n\n /* Arms open vs close easing for the in-flight width transition. /\n @State() private motion: 'opening' \| 'closing' \| 'idle' = 'idle';\n\n /* Suppresses width transition until the host has painted its initial open state. /\n @State() private readyForMotion = false;\n\n @State() private rovingIndex = 0;\n\n private motionEnableGeneration = 0;\n\n private get railItems(): PanelToolsItem[] {\n return parsePanelToolsItems(this.items, this.itemsJson);\n }\n\n private get orderedRailItems(): PanelToolsItem[] {\n const railItems = this.railItems;\n const headerItem = railItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const footerItem = railItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n const bodyItems = railItems.filter(\n item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n );\n const ordered: PanelToolsItem[] = [];\n if (headerItem) ordered.push(headerItem);\n ordered.push(...bodyItems);\n if (footerItem) ordered.push(footerItem);\n return ordered;\n }\n\n disconnectedCallback() {\n this.el.removeEventListener('transitionend', this.handleTransitionEnd);\n this.motionEnableGeneration += 1;\n }\n\n private deferMotionEnable() {\n if (this.readyForMotion) return;\n const generation = ++this.motionEnableGeneration;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n requestAnimationFrame(() => {\n if (generation !== this.motionEnableGeneration) return;\n this.readyForMotion = true;\n });\n });\n }\n\n connectedCallback() {\n this.el.addEventListener('transitionend', this.handleTransitionEnd);\n }\n\n @Watch('open')\n openChanged(isOpen: boolean, wasOpen?: boolean) {\n if (this.readyForMotion && wasOpen !== undefined && wasOpen !== isOpen) {\n this.motion = isOpen ? 'opening' : 'closing';\n this.dsChromeTransitionStart.emit({\n source: 'panel-tools',\n phase: isOpen ? 'opening' : 'closing',\n });\n }\n this.deferMotionEnable();\n }\n\n @Watch('activeTool')\n activeToolChanged() {\n this.deferMotionEnable();\n }\n\n componentDidLoad() {\n this.deferMotionEnable();\n }\n\n @Watch('items')\n @Watch('itemsJson')\n itemsChanged() {\n this.rovingIndex = 0;\n this.deferMotionEnable();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n if (event.target !== this.el.querySelector('.panel-tools__drawer')) return;\n if (event.propertyName !== 'max-width') return;\n this.motion = 'idle';\n this.dsChromeTransitionEnd.emit({ source: 'panel-tools' });\n };\n\n /* Rail selection follows `open` immediately — independent of the slide animation. /\n private isRailSelected(id: PanelToolsToolId): boolean {\n return this.open && this.activeTool === id;\n }\n\n /* Drawer body stays mounted while the clip frame animates closed. /\n private isDrawerPresent(): boolean {\n return this.open \|\| this.motion === 'closing';\n }\n\n private isViewActive(id: PanelToolsToolId): boolean {\n return this.isDrawerPresent() && this.activeTool === id;\n }\n\n private headerLabel(): string {\n if (!this.isDrawerPresent() \|\| !this.activeTool) return '';\n return PANEL_TOOLS_LABELS[this.activeTool as PanelToolsToolId] ?? '';\n }\n\n private handleToolChange = (id: PanelToolsToolId) => {\n const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n this.open = next.open;\n this.activeTool = next.activeTool;\n this.dsToolChange.emit({ id, selected: next.selected });\n };\n\n /* Toggle any rail tool open/closed — shell shortcuts K/A/S/M/N call this. /\n @Method()\n async activateTool(id: PanelToolsToolId) {\n const item = this.railItems.find(entry => entry.id === id);\n if (!item \|\| item.isInactive) return;\n this.handleToolChange(id);\n }\n\n /* Close the tools drawer when open — used by shell keyboard shortcuts. */\n @Method()\n async closeDrawer() {\n if (!this.open) return;\n const id = this.activeTool;\n this.open = false;\n if (id) {\n this.dsToolChange.emit({ id, selected: false });\n }\n }\n\n private focusRailAt(index: number) {\n const items = this.orderedRailItems;\n if (!items.length) return;\n const bounded = Math.max(0, Math.min(index, items.length - 1));\n if (bounded === this.rovingIndex) return;\n this.rovingIndex = bounded;\n const actions = Array.from(\n this.el.querySelectorAll<HTMLElement>('.panel-tools__rail-action .button-icon'),\n );\n actions[bounded]?.focus({ preventScroll: true });\n }\n\n private handleRailKeyDown = (e: KeyboardEvent, index: number) => {\n const items = this.orderedRailItems;\n if (!items.length) return;\n\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n this.handleToolChange(items[index].id);\n return;\n }\n\n if (e.key === 'ArrowDown') {\n if (index >= items.length - 1) return;\n e.preventDefault();\n this.focusRailAt(index + 1);\n return;\n }\n\n if (e.key === 'ArrowUp') {\n if (index <= 0) return;\n e.preventDefault();\n this.focusRailAt(index - 1);\n }\n };\n\n private renderRailAction(item: PanelToolsItem, index: number) {\n const label = item.ariaLabel ?? PANEL_TOOLS_LABELS[item.id];\n return (\n <ds-tooltip key={item.id} label={label} side=\"left\" size=\"sm\">\n <ds-button-unfilled variant=\"icon\"\n class=\"panel-tools__rail-action\"\n icon={item.icon}\n isActive={this.isRailSelected(item.id)}\n activeFill={false}\n hasBorder={false}\n dot={item.dot ?? false}\n isInactive={item.isInactive}\n focusTabIndex={index === this.rovingIndex ? 0 : -1}\n aria-label={label}\n pressed={this.isRailSelected(item.id)}\n onFocusin={() => { this.rovingIndex = index; }}\n onKeyDown={(e: KeyboardEvent) => this.handleRailKeyDown(e, index)}\n onDsClick={() => this.handleToolChange(item.id)}\n />\n </ds-tooltip>\n );\n }\n\n render() {\n const headerLabel = this.headerLabel();\n const orderedRailItems = this.orderedRailItems;\n const headerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_PRIMARY_TOOL_ID);\n const footerItem = orderedRailItems.find(item => item.id === PANEL_TOOLS_FOOTER_TOOL_ID);\n const bodyItems = orderedRailItems.filter(\n item => item.id !== PANEL_TOOLS_PRIMARY_TOOL_ID && item.id !== PANEL_TOOLS_FOOTER_TOOL_ID,\n );\n const footerIndex = footerItem\n ? (headerItem ? 1 : 0) + bodyItems.length\n : -1;\n const showDrawerChrome = this.isDrawerPresent();\n const drawerResting = panelToolsDrawerResting(this.open, this.motion);\n\n return (\n <Host\n class={{\n 'panel-tools': true,\n 'panel-tools--open': this.open,\n 'panel-tools--ready': this.readyForMotion,\n 'panel-tools--motion-opening': this.motion === 'opening',\n 'panel-tools--motion-closing': this.motion === 'closing',\n 'panel-tools--drawer-resting': drawerResting,\n }}\n role=\"complementary\"\n aria-label=\"Tools\"\n >\n <div class=\"panel-tools__layout\">\n <nav class=\"panel-tools__rail\" aria-label=\"Tool shortcuts\">\n {headerItem ? (\n <div class=\"panel-tools__rail-header\">\n {this.renderRailAction(headerItem, 0)}\n </div>\n ) : null}\n <div class=\"panel-tools__rail-body\">\n {bodyItems.map((item, bodyIdx) =>\n this.renderRailAction(item, headerItem ? bodyIdx + 1 : bodyIdx),\n )}\n </div>\n {footerItem ? (\n <div class=\"panel-tools__rail-footer\">\n {this.renderRailAction(footerItem, footerIndex)}\n </div>\n ) : null}\n </nav>\n\n <div\n class={{\n 'panel-tools__drawer': true,\n 'panel-tools__drawer--visible': showDrawerChrome,\n }}\n aria-hidden={showDrawerChrome ? null : 'true'}\n inert={showDrawerChrome ? undefined : true}\n >\n <div class=\"panel-tools__drawer-surface\">\n <header class=\"panel-tools__header\">\n <span class=\"panel-tools__title text-body-medium-emphasis\">{headerLabel}</span>\n </header>\n <div class=\"panel-tools__body\">\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('search'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('search')}\n >\n <slot name=\"search\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('messages'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('messages')}\n >\n <slot name=\"messages\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('stacks'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('stacks')}\n >\n <slot name=\"stacks\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('activity'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('activity')}\n >\n <slot name=\"activity\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('agents'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('agents')}\n >\n <slot name=\"agents\" />\n </div>\n <div\n class={{\n 'panel-tools__view': true,\n 'panel-tools__view--active': this.isViewActive('help'),\n 'text-body-medium': true,\n }}\n hidden={!this.isViewActive('help')}\n >\n <slot name=\"help\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as i,a as o,t as n}from"./index.js";import{c as r}from"./p-DuFm-ieS.js";import{d as c}from"./p-B82KZX9D.js";import{d}from"./p-CwARVsZQ.js";import{d as a}from"./p-Be3PHv34.js";import{d as l}from"./p-CQmf2CeW.js";import{r as h}from"./p-BWUTr_XN.js";import{T as f}from"./p-B_g8X0eh.js";const u=()=>`.sc-ds-select-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-select: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-select{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-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select: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-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::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-select-h,.ds-interaction-fill.sc-ds-select{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-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::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-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--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-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--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-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--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-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--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-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--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-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--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-select-h,.ds-control--sm.sc-ds-select{--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-select-h,.ds-control--xs.sc-ds-select{--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-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;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-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;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;color:var(--ds-select-fg)}`;const v={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const g={md:"md",sm:"sm",xs:"xs"};const b=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=h(f.space050,f.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=!this.hasSelection;const e=!s;const t=s?this.placeholder:this.selectedLabel;const n=v[this.size];const c=g[this.size];const d=`ds-control--${this.size}`;const a=!this.isInactive&&this.activeFill&&(e||this.isOpen);return i(o,{key:"a06918c7052a6241b8789ba0948a184cdfbb4dc6",class:{"select-host":true,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...r(this.width)}},i("button",{key:"116cbb302bdb23cb70c1045afdd0b82731bad140",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":a,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":s,"trigger--has-value":e,[d]:true},disabled:this.isInactive,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},i("span",{key:"b5a2568df8c887e1d2d9161b87bb9624b257cf7d",class:{trigger__label:true,[n]:true,"ds-interaction-fill__content":true}},t),i("span",{key:"05ec47e26a1e04795e6651be92efdaf45567e342",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"8abe52054c5748370699ed24f30b11a7ba318f52",name:"ChevronDown",size:c,color:"inherit"}))),i("ds-menu",{key:"14daa31a7d0f14672e930346823ad5db35dfe92c",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return u()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break}}))}p();const m=b;const w=p;export{m as DsSelect,w as defineCustomElement};
+import{p as s,H as e,c as t,h as i,a as o,t as n}from"./index.js";import{c as r}from"./p-DuFm-ieS.js";import{d as c}from"./p-B82KZX9D.js";import{d}from"./p-Dlol7hPg.js";import{d as a}from"./p-CYmVDfd_.js";import{d as l}from"./p-BAeKw2pj.js";import{r as h}from"./p-BWUTr_XN.js";import{T as f}from"./p-B_g8X0eh.js";const u=()=>`.sc-ds-select-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-select: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-select{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-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select: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-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::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-select-h,.ds-interaction-fill.sc-ds-select{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-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::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-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--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-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--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-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--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-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--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-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--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-select-h,.ds-control-inactive.sc-ds-select{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--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-select-h,.ds-control--sm.sc-ds-select{--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-select-h,.ds-control--xs.sc-ds-select{--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-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.select-host.sc-ds-select-h{display:inline-flex;position:relative;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.ds-control-width--hug.sc-ds-select-h .trigger__label.sc-ds-select{flex:0 1 auto}.trigger.sc-ds-select{display:inline-flex;align-items:center;justify-content:space-between;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-select-fg);cursor:pointer;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--bordered.sc-ds-select:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;min-width:0;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select,.trigger--open.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.trigger__chevron.sc-ds-select{position:relative;z-index:2;flex-shrink:0;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;color:var(--ds-select-fg)}`;const v={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const g={md:"md",sm:"sm",xs:"xs"};const b=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.options=[];this.value="";this.placeholder="Select";this.size="md";this.width="fill";this.isInactive=false;this.activeFill=true;this.hasBorder=true;this.isOpen=false;this.triggerEl=null;this.menuEl=null;this.openWithFocusVisible=false;this.handleMenuSelect=s=>{const e=s.detail;if(e?.value!==undefined){this.value=String(e.value);this.dsChange.emit(this.value)}this.close()};this.handleMenuClose=()=>{this.close()}}componentDidLoad(){if(this.menuEl&&this.triggerEl){this.menuEl.anchor=this.triggerEl}this.menuEl?.addEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.addEventListener("dsClose",this.handleMenuClose);this.syncMenuItems()}disconnectedCallback(){this.menuEl?.removeEventListener("dsSelect",this.handleMenuSelect);this.menuEl?.removeEventListener("dsClose",this.handleMenuClose)}onIsOpenChange(s){if(!this.menuEl)return;this.menuEl.initialFocusVisible=s&&this.openWithFocusVisible;this.menuEl.open=s}onOptionsChange(){this.syncMenuItems()}onValueChange(){this.syncMenuItems()}syncMenuItems(){if(!this.menuEl)return;this.menuEl.items=this.options.map((s=>({label:s.label,value:s.value,isSelected:s.value===this.value})))}syncMenuLayout(){if(!this.menuEl||!this.triggerEl)return;const s=h(f.space050,f.space050);const e=this.triggerEl.offsetWidth;this.menuEl.menuWidth="";this.menuEl.minWidth=`${e+s*2}px`;this.menuEl.alignOffset=-s;this.menuEl.anchor=this.triggerEl}open(s={focusVisible:false}){if(this.isInactive||!this.options.length)return;this.openWithFocusVisible=s.focusVisible;this.syncMenuLayout();this.syncMenuItems();this.isOpen=true}close(){this.isOpen=false;this.openWithFocusVisible=false}toggle(s){if(this.isOpen){this.close()}else{this.open(s)}}handleKeyDown(s){if(document.activeElement!==this.triggerEl)return;if(!this.isOpen){switch(s.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":s.preventDefault();this.open({focusVisible:true});break}}else if(s.key==="Escape"){s.preventDefault();this.close();this.triggerEl?.focus()}}get selectedLabel(){return this.options.find((s=>s.value===this.value))?.label??""}get hasSelection(){return this.options.some((s=>s.value===this.value))}render(){const s=!this.hasSelection;const e=!s;const t=s?this.placeholder:this.selectedLabel;const n=v[this.size];const c=g[this.size];const d=`ds-control--${this.size}`;const a=!this.isInactive&&this.activeFill&&(e||this.isOpen);return i(o,{key:"a06918c7052a6241b8789ba0948a184cdfbb4dc6",class:{"select-host":true,"ds-control-inactive":this.isInactive,"ds-control--md":this.size==="md","ds-control--sm":this.size==="sm","ds-control--xs":this.size==="xs",...r(this.width)}},i("button",{key:"116cbb302bdb23cb70c1045afdd0b82731bad140",ref:s=>{this.triggerEl=s??null},type:"button",class:{trigger:true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":a,"trigger--open":this.isOpen,"trigger--bordered":this.hasBorder,"trigger--placeholder":s,"trigger--has-value":e,[d]:true},disabled:this.isInactive,role:"combobox","aria-haspopup":"menu","aria-expanded":String(this.isOpen),"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,onClick:()=>this.toggle({focusVisible:false})},i("span",{key:"b5a2568df8c887e1d2d9161b87bb9624b257cf7d",class:{trigger__label:true,[n]:true,"ds-interaction-fill__content":true}},t),i("span",{key:"05ec47e26a1e04795e6651be92efdaf45567e342",class:"trigger__chevron ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"8abe52054c5748370699ed24f30b11a7ba318f52",name:"ChevronDown",size:c,color:"inherit"}))),i("ds-menu",{key:"14daa31a7d0f14672e930346823ad5db35dfe92c",ref:s=>{this.menuEl=s??null},side:"bottom",align:"start"}))}get el(){return this}static get watchers(){return{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}}static get style(){return u()}},[2,"ds-select",{options:[16],value:[1025],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],isOpen:[32]},[[0,"keydown","handleKeyDown"]],{isOpen:[{onIsOpenChange:0}],options:[{onOptionsChange:0}],value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-select","ds-icon","ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-select":if(!customElements.get(n(s))){customElements.define(n(s),b)}break;case"ds-icon":if(!customElements.get(n(s))){c()}break;case"ds-menu":if(!customElements.get(n(s))){d()}break;case"ds-shell-gradient-picker":if(!customElements.get(n(s))){a()}break;case"ds-shell-gradient-swatch":if(!customElements.get(n(s))){l()}break}}))}p();const m=b;const w=p;export{m as DsSelect,w as defineCustomElement};
 //# sourceMappingURL=ds-select.js.map

package/dist/components/ds-shell-gradient-picker.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-Be3PHv34.js";const t=o;const p=s;export{t as DsShellGradientPicker,p as defineCustomElement};
+import{S as o,d as s}from"./p-CYmVDfd_.js";const t=o;const m=s;export{t as DsShellGradientPicker,m as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-picker.js.map

package/dist/components/ds-shell-gradient-swatch.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{S as o,d as s}from"./p-CQmf2CeW.js";const t=o;const m=s;export{t as DsShellGradientSwatch,m as defineCustomElement};
+import{S as o,d as s}from"./p-BAeKw2pj.js";const p=o;const t=s;export{p as DsShellGradientSwatch,t as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-swatch.js.map

package/dist/components/ds-slider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"ec075eb676a4264118e4ebadc08bc614faed3386",class:"field"},t("div",{key:"2ce888dccb62a7f64521c950651a858d8f569e29",class:"label-row"},t("label",{key:"dd1c796f68b0d3cceb9d1ac6e1a735e80ea3dbe5",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"de8fae6d14c002b45ee8fe0ec36c4375fab49ac0",class:"text-body-small-emphasis"},this.value)),t("div",{key:"a2c6daa831ffd8759cd67e279d5201dbaabe63e0",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"88d81cb963a78f88cdde87737e263b86fab94db0",class:"track-inner"},t("div",{key:"da1067152e33b506ca6dd1d4563482a122cf9c0f",class:"fill-track"},t("div",{key:"36625843c6cc17eb81659890e01310eb80138937",class:"fill"})),t("div",{key:"0a880aa687ea29acaad437cd89397cbc2a793ada",class:"thumb"})),t("input",{key:"d17e422848c1306f6f9a06274bbf081c0dc14355",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
+import{p as e,H as s,c as i,h as t,a,t as r}from"./index.js";const n=()=>`.ds-control-inactive.sc-ds-slider-h,.ds-control-inactive.sc-ds-slider{opacity:0.25;pointer-events:none;cursor:not-allowed}.field.sc-ds-slider{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%}.label-row.sc-ds-slider{display:flex;align-items:baseline;justify-content:space-between;gap:var(--dimension-space-050)}.track.sc-ds-slider{position:relative;width:100%;height:var(--dimension-size-400);padding:0 var(--dimension-space-025);border-radius:var(--dimension-radius-075);cursor:pointer;user-select:none;box-sizing:border-box}.track-inner.sc-ds-slider{position:absolute;inset:0;border-radius:inherit;background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-depressed-sm);pointer-events:none;z-index:1}.fill-track.sc-ds-slider{position:absolute;top:var(--dimension-space-025);right:0;bottom:var(--dimension-space-025);left:0;z-index:1;pointer-events:none}.fill.sc-ds-slider{position:absolute;left:var(--dimension-space-025);top:0;bottom:0;width:max(0px, calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)) - var(--dimension-space-025)));background-color:var(--color-background-bold-brand);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050);transition:opacity var(--effect-motion-short-2);pointer-events:none}.track--at-min.sc-ds-slider .fill.sc-ds-slider{opacity:0}.thumb.sc-ds-slider{position:absolute;top:0;bottom:0;left:calc((var(--slider-pct, 0) / 100) * (100% - var(--dimension-size-150)));width:var(--dimension-size-150);padding:var(--dimension-space-025);box-sizing:border-box;pointer-events:none;z-index:2}.thumb.sc-ds-slider::before{content:'';position:absolute;inset:var(--dimension-space-025);background-color:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);border-radius:var(--dimension-radius-050)}.thumb.sc-ds-slider::after{content:'';position:absolute;inset:var(--dimension-space-025);background-color:transparent;border-radius:var(--dimension-radius-050);transition:background-color var(--effect-motion-short-2)}.track.sc-ds-slider:hover:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-hover)}.track.sc-ds-slider:active:not(.ds-control-inactive) .thumb.sc-ds-slider::after{background-color:var(--color-interaction-pressed)}.range-input.sc-ds-slider{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none;outline:none;z-index:3}.range-input.sc-ds-slider:disabled{cursor:not-allowed}.range-input.sc-ds-slider:hover{cursor:grab}.range-input.sc-ds-slider:active{cursor:grabbing}.track.sc-ds-slider:focus-within .track-inner.sc-ds-slider{box-shadow:var(--effect-elevation-depressed-sm), inset 0 0 0 1.25px var(--color-interaction-focus)}`;let o=0;const d=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.generatedId=`ds-slider-${++o}`;this.value=0;this.min=0;this.max=100;this.step=1;this.isInactive=false;this.handleInput=e=>{this.dsChange.emit(Number(e.target.value))}}get pct(){const e=this.max-this.min;return e===0?0:Math.round((this.value-this.min)/e*100)}render(){const e=this.inputId??this.generatedId;const s=this.pct;return t(a,{key:"b18b29340e76bab7ffbc0fd8e50458530eddbe8b",class:"field"},t("div",{key:"f21c3d2b2214131c1f186244efcf09b5871af664",class:"label-row"},t("label",{key:"e6d9388a996eff6f993c5da20fa634be8c236e88",class:"text-body-small-emphasis",htmlFor:e},this.label),t("span",{key:"7e60fa751d9143d45adf120afef6ec66ba08d65a",class:"text-body-small-emphasis"},this.value)),t("div",{key:"234602dcc8c10060071d66938f72e88f70fc17aa",class:{track:true,"ds-control-inactive":this.isInactive,"track--at-min":s===0},style:{"--slider-pct":String(s)}},t("div",{key:"eb93b85f1e131488e92bb17ee4c4aaa3d34da9fc",class:"track-inner"},t("div",{key:"b087a28b98488960a3715890eb2ffe5309e90f91",class:"fill-track"},t("div",{key:"3c7dc9a778601c533c6f3a0ed2aa16dfeb490e93",class:"fill"})),t("div",{key:"a0a783761da82741439a37e90b6f661226a46789",class:"thumb"})),t("input",{key:"b99fe154c75e310480b8ce5e2f6e9184ceed1458",type:"range",id:e,min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.isInactive,class:"range-input","aria-valuetext":this.valueText,onInput:this.handleInput})))}static get style(){return n()}},[2,"ds-slider",{value:[2],min:[2],max:[2],step:[2],label:[1],isInactive:[4,"is-inactive"],valueText:[1,"value-text"],inputId:[1,"input-id"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-slider"];e.forEach((e=>{switch(e){case"ds-slider":if(!customElements.get(r(e))){customElements.define(r(e),d)}break}}))}c();const l=d;const b=c;export{l as DsSlider,b as defineCustomElement};
 //# sourceMappingURL=ds-slider.js.map

package/dist/components/ds-toggle.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as o,h as n,a as s,t as i}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.isInactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return n(s,{key:"e9cb9b65264fe41c07360e06b7567093a19a5f6d",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.isInactive||undefined,tabIndex:this.isInactive?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":this.isInactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("span",{key:"1065d275c94e8af64e0905c84ae29f9ab2f1a447",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],isInactive:[4,"is-inactive"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(i(t))){customElements.define(i(t),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
+import{p as t,H as e,c as o,h as n,a as s,t as i}from"./index.js";const r=()=>`:host(.ds-control-inactive),.ds-control-inactive{opacity:0.25;pointer-events:none;cursor:not-allowed}:host{position:relative;display:inline-flex;align-items:center;justify-content:flex-start;width:var(--dimension-size-400);height:var(--dimension-size-250);padding:0 var(--dimension-space-025);border:none;border-radius:var(--dimension-radius-half);cursor:pointer;user-select:none;outline:none;flex-shrink:0;background-color:var(--color-background-medium-neutral);box-shadow:var(--effect-highlight-depressed-sm);transition:background-color var(--effect-motion-short-2);box-sizing:border-box}:host::before{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:var(--effect-shadow-depressed-sm);pointer-events:none}:host(:focus-visible){outline:var(--dimension-stroke-width-025) solid var(--color-interaction-focus);outline-offset:var(--dimension-space-025)}:host(.checked){background-color:var(--color-foreground-bold-brand)}.thumb{position:relative;flex-shrink:0;width:var(--dimension-size-200);height:var(--dimension-size-200);background-color:var(--color-background-primary);border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-sm);transition:transform var(--effect-motion-short-2);transform:translateX(0);z-index:1}.thumb::after{content:'';position:absolute;inset:0;background-color:transparent;border-radius:inherit;transition:background-color var(--effect-motion-instant, 100ms);pointer-events:none}:host(:hover:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-hover)}:host(:active:not(.ds-control-inactive)) .thumb::after{background-color:var(--color-interaction-pressed)}:host(.checked) .thumb{transform:translateX(var(--dimension-offset-150))}:host(:active:not(.ds-control-inactive)) .thumb{transform:translateX(0) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}:host(.checked:active:not(.ds-control-inactive)) .thumb{transform:translateX(var(--dimension-offset-150)) scale(var(--dimension-scale-subtle)) !important;transition:transform var(--effect-motion-instant)}`;const a=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dsChange=o(this,"dsChange");this.checked=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.checked=!this.checked;this.dsChange.emit(this.checked)};this.handleKeyDown=t=>{if(this.isInactive)return;if(t.key===" "||t.key==="Enter"){t.preventDefault();this.handleClick()}}}render(){return n(s,{key:"b729fc6fcfa69e9761c2d412802fd6228c0d6511",role:"switch","aria-checked":String(this.checked),"aria-disabled":this.isInactive||undefined,tabIndex:this.isInactive?-1:0,class:{toggle:true,checked:this.checked,"ds-control-inactive":this.isInactive},onClick:this.handleClick,onKeyDown:this.handleKeyDown},n("span",{key:"3d8b5cd8b8d57653a279b5627aa2dbd476f9e427",class:"thumb"}))}static get style(){return r()}},[1,"ds-toggle",{checked:[1028],isInactive:[4,"is-inactive"]}]);function c(){if(typeof customElements==="undefined"){return}const t=["ds-toggle"];t.forEach((t=>{switch(t){case"ds-toggle":if(!customElements.get(i(t))){customElements.define(i(t),a)}break}}))}c();const d=a;const l=c;export{d as DsToggle,l as defineCustomElement};
 //# sourceMappingURL=ds-toggle.js.map

package/dist/components/ds-tooltip-data-viz.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-3FLHei19.js";const t=o;const p=s;export{t as DsTooltipDataViz,p as defineCustomElement};
+import{T as o,d as s}from"./p-XNHSe8Mg.js";const t=o;const p=s;export{t as DsTooltipDataViz,p as defineCustomElement};
 //# sourceMappingURL=ds-tooltip-data-viz.js.map

package/dist/components/ds-tooltip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{T as o,d as s}from"./p-DohXlNCJ.js";const t=o;const p=s;export{t as DsTooltip,p as defineCustomElement};
+import{T as o,d as s}from"./p-CDHRJqea.js";const t=o;const a=s;export{t as DsTooltip,a as defineCustomElement};
 //# sourceMappingURL=ds-tooltip.js.map

package/dist/components/{p-CQmf2CeW.js → p-BAeKw2pj.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::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-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"5080c0250ef990549343305085a1c8bd7d74aa10"},a("button",{key:"2772d7d0e7d224c46b972f32458ac3d03b79aeaa",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"3bdadd7ba236da0602a19db8933c37b544b85216",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"01e0fcc678090f6bf623c9d7410a00eb39aee86e",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"5db33a5d536797514bf3d71d98fa5ed9db8c1f5e",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"2f7e77fcc56b2f986ef434d6bab6ea6d8ae4d724",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"8d569b6fad549cfdcff063eb70a7bf4f00e2d42c",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
-//# sourceMappingURL=p-CQmf2CeW.js.map
+import{p as s,H as e,c as t,h as a,a as i,t as r}from"./index.js";import{D as n,a as c,b as l,c as d}from"./p-Bz3jyrDV.js";const o=()=>`.sc-ds-shell-gradient-swatch-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-shell-gradient-swatch: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-shell-gradient-swatch{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-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch: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-shell-gradient-swatch{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-gradient-swatch::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-shell-gradient-swatch-h,.ds-control-inactive.sc-ds-shell-gradient-swatch{opacity:0.25;pointer-events:none;cursor:not-allowed}.sc-ds-shell-gradient-swatch-h{box-sizing:border-box;display:inline-flex;flex:0 0 auto;width:var(--dimension-size-300);height:var(--dimension-size-300);--_swatch-inner-inset:calc(     var(--dimension-stroke-width-025) + var(--dimension-space-025)   );--_swatch-ring-bg:var(--color-background-primary);--_swatch-select-motion:var(--effect-motion-short-3)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch{position:relative;box-sizing:border-box;width:var(--dimension-size-300);height:var(--dimension-size-300);padding:0;border:none;border-radius:var(--dimension-radius-half);background:transparent;cursor:pointer;flex-shrink:0;isolation:isolate}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none}.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{z-index:1;background-color:var(--color-background-secondary);background-image:var(--_swatch-gradient-image);background-repeat:no-repeat;background-size:cover;background-position:0 0;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch--none.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{background-image:none}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:not(.shell-gradient-swatch--none) .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch{opacity:var(--ds-shell-gradient-opacity, 0.1)}.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch{z-index:2;box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion)}.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{z-index:3;background:transparent;transition:top var(--_swatch-select-motion),     right var(--_swatch-select-motion),     bottom var(--_swatch-select-motion),     left var(--_swatch-select-motion),     background-color 0s}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:hover:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-hover)}.shell-gradient-swatch.sc-ds-shell-gradient-swatch:active:not(:disabled) .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{background:var(--color-interaction-pressed)}.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch{z-index:4;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--_swatch-inner-inset) var(--_swatch-ring-bg);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{z-index:5;opacity:0;transform:scale(1.2);transform-origin:center;box-shadow:inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);transition:opacity var(--_swatch-select-motion),     transform var(--_swatch-select-motion)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch{top:var(--_swatch-inner-inset);right:var(--_swatch-inner-inset);bottom:var(--_swatch-inner-inset);left:var(--_swatch-inner-inset)}.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch--selected.sc-ds-shell-gradient-swatch .shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.shell-gradient-swatch__fill.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__border.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__interaction.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__halo.sc-ds-shell-gradient-swatch,.shell-gradient-swatch__stroke.sc-ds-shell-gradient-swatch{transition:none}}`;const h=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsSelect=t(this,"dsSelect");this.preset=n;this.selected=false;this.isInactive=false;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"fa7ca80e52696c8015cb394c1ac893101cae32ef"},a("button",{key:"c1822d03928817a7df1a41b9cbad384af22da34a",type:"button",class:{"shell-gradient-swatch":true,"ds-focus-ring-inset":true,"ds-control-inactive":this.isInactive,"shell-gradient-swatch--selected":this.selected,"shell-gradient-swatch--none":this.preset==="none"},style:this.preset==="none"?undefined:{"--_swatch-gradient-image":d(this.preset),"--ds-shell-gradient-opacity":l},"aria-label":s,"aria-pressed":this.selected?"true":"false",disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"cfb65947bea286b30bfce3283e14aa9d3d663d45",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"2b71f81ad5ace582e421e6e097f1cbfcb1738619",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"ac55a44f4d3507084bffcdf842cdef9fce23ffb7",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"670b4907259680e86bfad3a0911e8c0eae6d7f14",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"d3f7ebc3f370da233a55cc946c9c57808c769f42",class:"shell-gradient-swatch__stroke","aria-hidden":"true"})))}static get style(){return o()}},[2,"ds-shell-gradient-swatch",{preset:[513],selected:[516],isInactive:[4,"is-inactive"],ariaLabel:[1,"aria-label"]}]);function g(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-swatch"];s.forEach((s=>{switch(s){case"ds-shell-gradient-swatch":if(!customElements.get(r(s))){customElements.define(r(s),h)}break}}))}g();export{h as S,g as d};
+//# sourceMappingURL=p-BAeKw2pj.js.map

package/dist/components/p-CDHRJqea.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as t,H as i,h as s,a as o,t as n}from"./index.js";import{a as e,T as r}from"./p-B_g8X0eh.js";import{r as a}from"./p-BWUTr_XN.js";import{r as h}from"./p-C1cBr-Ri.js";const l=()=>`.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)}.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-label.sc-ds-tooltip{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.key-hint.sc-ds-tooltip{width:var(--ds-control-icon, var(--dimension-size-200));height:var(--ds-control-icon, var(--dimension-size-200));flex-shrink:0;display:flex;align-items:center;justify-content:center;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)}@keyframes tooltipFadeIn{from{opacity:0}to{opacity:1}}@keyframes tooltipFadeOut{from{opacity:1}to{opacity:0}}`;const d={md:"text-body-medium",sm:"text-body-small",xs:"text-caption"};const c={md:"var(--typography-lineheight-md)",sm:"var(--typography-lineheight-sm)",xs:"var(--typography-lineheight-xs)"};const p={md:r.size400,sm:r.size300,xs:r.size200};let u=0;let m=0;let f=null;const g=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.size="md";this.side="top";this.align="center";this.sideOffset=e.space050;this.alignOffset=0;this.delay=r.animationDelayMedium3;this.shortcutKeyPosition="end";this.tooltipId=`ds-tooltip-${++m}`;this.delayTimer=null;this.closeTimer=null;this.anchor=null;this.popupEl=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(f===this)f=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.calculatePosition()}get viewportPadPx(){return a(r.space050,r.space050)}get sideOffsetPx(){return a(this.sideOffset,r.space050)}get alignOffsetPx(){return a(this.alignOffset,0)}get hoverDelayMs(){return h(this.delay,r.animationDelayMedium3)}get instantReopenMs(){return h(r.animationDurationMedium1,r.animationDurationMedium1)}get fadeOutMs(){return h(r.motionShort3,r.animationDurationShort3)}get tooltipFallbackWidthPx(){return a(r.tooltipFallbackWidth,r.tooltipFallbackWidth)}get tooltipFallbackHeightPx(){const t=p[this.size];return a(t,t)}bindAnchor(){const t=this.el.querySelector("slot");const i=t?.assignedElements?.()??[];const s=i[0]??this.el.firstElementChild;if(!s)return;this.anchor=s;s.setAttribute("aria-describedby",this.tooltipId);s.addEventListener("mouseenter",this.mouseEnterHandler);s.addEventListener("mouseleave",this.mouseLeaveHandler);s.addEventListener("focusin",this.focusHandler);s.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(){if(!this.popupEl)return;this.popupEl.remove();this.popupEl=null}hideInstant(){this.clearTimers();u=Date.now();if(f===this)f=null;this.destroyPopup();this.isOpen=false;this.skipEnterAnimation=false}show(){if(!this.label?.trim())return;this.clearTimers();let t=Date.now()-u<this.instantReopenMs;if(f&&f!==this){f.hideInstant();t=true}f=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;u=Date.now();if(f===this)f=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.calculatePosition();this.isOpen=true}renderPopupContent(){if(!this.popupEl)return;const t=d[this.size];const i=c[this.size];const s=this.size==="md"?"ds-control--md":this.size==="sm"?"ds-control--sm":"ds-control--xs";const o="sc-ds-tooltip";const n=this.shortcutKey&&this.shortcutKeyPosition==="start"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";const e=this.shortcutKey&&this.shortcutKeyPosition==="end"?`<div class="key-hint ${o}" aria-hidden="true"><span class="text-caption-emphasis ${o}">${v(this.shortcutKey)}</span></div>`:"";this.popupEl.innerHTML=`<div class="tooltip-inner ${s} ${o}">`+n+`<span class="tooltip-label ${t} ${o}" style="line-height:${i}">${v(this.label)}</span>`+e+`</div>`}calculatePosition(){if(!this.anchor\|\|!this.popupEl)return;const t=this.popupEl;const i=this.anchor.getBoundingClientRect();const s=t.offsetWidth\|\|this.tooltipFallbackWidthPx;const o=t.offsetHeight\|\|this.tooltipFallbackHeightPx;const n=this.sideOffsetPx;const e=this.alignOffsetPx;const r=this.viewportPadPx;let a=0,h=0;switch(this.side){case"top":h=i.top-o-n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"bottom":h=i.bottom+n;a=this.align==="start"?i.left+e:this.align==="end"?i.right-s+e:i.left+i.width/2-s/2+e;break;case"left":a=i.left-s-n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break;case"right":a=i.right+n;h=this.align==="start"?i.top+e:this.align==="end"?i.bottom-o+e:i.top+i.height/2-o/2+e;break}const l=Math.min(Math.max(a,r),window.innerWidth-s-r);const d=Math.min(Math.max(h,r),window.innerHeight-o-r);t.style.transform=`translate(${Math.round(l)}px, ${Math.round(d)}px)`}render(){return s(o,{key:"608e8c701ab1755da852125ca3a988345f9285f5",style:{display:"contents"}},s("slot",{key:"5d7c992aefe4b18a4e9c10b30a8cc177c7e280d9"}))}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 l()}},[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 v(t){return t.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function y(){if(typeof customElements==="undefined"){return}const t=["ds-tooltip"];t.forEach((t=>{switch(t){case"ds-tooltip":if(!customElements.get(n(t))){customElements.define(n(t),g)}break}}))}y();export{g as T,y as d};
2	+ //# sourceMappingURL=p-CDHRJqea.js.map

package/dist/components/p-CDHRJqea.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["tooltipCss","TEXT_VARIANT","md","sm","xs","LINE_HEIGHT","FALLBACK_HEIGHT","TOKEN_DEFAULTS","size400","size300","size200","lastDismissedAt","tooltipIdCounter","activeTooltip","Tooltip","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","size","side","align","sideOffset","TOKEN_CSS_LENGTHS","space050","alignOffset","delay","animationDelayMedium3","shortcutKeyPosition","tooltipId","delayTimer","closeTimer","anchor","popupEl","skipEnterAnimation","isOpen","mouseEnterHandler","show","mouseLeaveHandler","hide","focusHandler","blurHandler","e","next","relatedTarget","contains","componentDidLoad","bindAnchor","disconnectedCallback","unbindAnchor","clearTimers","destroyPopup","onContentOrPositionChange","label","trim","hideInstant","renderPopupContent","calculatePosition","viewportPadPx","resolveCssLengthPx","sideOffsetPx","alignOffsetPx","hoverDelayMs","resolveCssTimeMs","instantReopenMs","animationDurationMedium1","fadeOutMs","motionShort3","animationDurationShort3","tooltipFallbackWidthPx","tooltipFallbackWidth","tooltipFallbackHeightPx","token","slot","el","querySelector","slotted","assignedElements","child","firstElementChild","setAttribute","addEventListener","removeAttribute","removeEventListener","clearTimeout","remove","Date","now","instant","mountPopup","setTimeout","classList","add","tip","document","createElement","id","className","Object","assign","style","position","left","top","zIndex","pointerEvents","body","appendChild","toggle","textVariant","lineHeight","density","sc","startKey","shortcutKey","escapeHtml","endKey","innerHTML","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","value","replace"],"sources":["src/wc/components/Tooltip/Tooltip.css?tag=ds-tooltip&encapsulation=scoped","src/wc/components/Tooltip/Tooltip.tsx"],"sourcesContent":["@import '../../utils/control-density.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.tooltip-label {\n padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--color-foreground-primary);\n}\n\n.key-hint {\n width: var(--ds-control-icon, var(--dimension-size-200));\n height: var(--ds-control-icon, var(--dimension-size-200));\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border: var(--dimension-stroke-width-015) solid var(--color-border-tertiary);\n border-bottom-width: var(--dimension-stroke-width-025);\n border-radius: var(--dimension-radius-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 { resolveCssLengthPx, resolveCssTimeMs, TOKEN_CSS_LENGTHS, TOKEN_DEFAULTS } from '../../utils';\n\nexport type TooltipSide = 'top' | 'right' | 'bottom' | 'left';\nexport type TooltipAlign = 'start' | 'center' | 'end';\nexport type TooltipSize = 'md' | 'sm' | 'xs';\n\n/** Body text per control-density size (regular weight — not emphasis). */\nconst TEXT_VARIANT: Record<TooltipSize, string> = {\n md: 'text-body-medium',\n sm: 'text-body-small',\n xs: 'text-caption',\n};\n\nconst LINE_HEIGHT: Record<TooltipSize, string> = {\n md: 'var(--typography-lineheight-md)',\n sm: 'var(--typography-lineheight-sm)',\n xs: 'var(--typography-lineheight-xs)',\n};\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\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 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.calculatePosition();\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 if (!this.popupEl) return;\n this.popupEl.remove();\n this.popupEl = null;\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 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.calculatePosition();\n this.isOpen = true;\n }\n\n private renderPopupContent() {\n if (!this.popupEl) return;\n const textVariant = TEXT_VARIANT[this.size];\n const lineHeight = LINE_HEIGHT[this.size];\n const density =\n this.size === 'md' ? 'ds-control--md' : this.size === 'sm' ? 'ds-control--sm' : 'ds-control--xs';\n // Every node needs `sc-ds-tooltip` so scoped selectors (`.foo.sc-ds-tooltip`) match.\n const sc = 'sc-ds-tooltip';\n\n const startKey =\n this.shortcutKey && this.shortcutKeyPosition === 'start'\n ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n : '';\n const endKey =\n this.shortcutKey && this.shortcutKeyPosition === 'end'\n ? `<div class=\"key-hint ${sc}\" aria-hidden=\"true\"><span class=\"text-caption-emphasis ${sc}\">${escapeHtml(this.shortcutKey)}</span></div>`\n : '';\n\n this.popupEl.innerHTML =\n `<div class=\"tooltip-inner ${density} ${sc}\">` +\n startKey +\n `<span class=\"tooltip-label ${textVariant} ${sc}\" style=\"line-height:${lineHeight}\">${escapeHtml(this.label)}</span>` +\n endKey +\n `</div>`;\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\nfunction escapeHtml(value: string): string {\n return value\n .replace(/&/g, '&')\n .replace(/</g, '<')\n .replace(/>/g, '>')\n .replace(/\"/g, '"')\n .replace(/'/g, ''');\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-Be3PHv34.js → p-CYmVDfd_.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-CQmf2CeW.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.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 h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"af9d6c01fead555e3abd51b73e39861f6f6ed9d7"},t("div",{key:"16ec6654b6ab75716b083ebd25b324e781f61f1b",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},this.renderSwatch("none"),t("div",{key:"e2f7db2b2e1ca076a697e3bc42432bfe4a906552",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);function o(){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),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
-//# sourceMappingURL=p-Be3PHv34.js.map
+import{p as e,H as s,c as i,h as t,a as r,t as a}from"./index.js";import{d}from"./p-BAeKw2pj.js";import{D as n,S as l}from"./p-Bz3jyrDV.js";const c=()=>`.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 h=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=i(this,"dsChange");this.value=n;this.handleSwatchSelect=e=>{if(e===this.value)return;this.value=e;this.dsChange.emit(e)}}renderSwatch(e){return t("ds-shell-gradient-swatch",{key:e,preset:e,selected:this.value===e,onDsSelect:e=>{e.stopPropagation();this.handleSwatchSelect(e.detail)}})}render(){return t(r,{key:"87863ebd1f989f5c33526519589f7fc3bb3b6f97"},t("div",{key:"fd01030b57a260e4774da6e9b97a75882358814f",class:"shell-gradient-picker",role:"radiogroup","aria-label":"Shell gradient theme"},this.renderSwatch("none"),t("div",{key:"6ea6c2d7e6ddbf0a2b36a6ff2062811117192378",class:"shell-gradient-picker__divider","aria-hidden":"true"}),l.map((e=>this.renderSwatch(e)))))}static get style(){return c()}},[2,"ds-shell-gradient-picker",{value:[1537]}]);function o(){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),h)}break;case"ds-shell-gradient-swatch":if(!customElements.get(a(e))){d()}break}}))}o();export{h as S,o as d};
+//# sourceMappingURL=p-CYmVDfd_.js.map

package/dist/components/{p-CwARVsZQ.js → p-Dlol7hPg.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{p as e,H as i,c as n,h as s,a as t,t as o}from"./index.js";import{d as r}from"./p-Be3PHv34.js";import{d as a}from"./p-CQmf2CeW.js";import{a as d,T as c}from"./p-B_g8X0eh.js";import{r as l}from"./p-BWUTr_XN.js";import{r as u}from"./p-C1cBr-Ri.js";function h(e){const{anchorRect:i,popupWidth:n,popupHeight:s,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:l}=e;let u=0;let h=0;switch(t){case"top":h=i.top-s-r;u=o==="start"?i.left+a:o==="end"?i.right-n+a:i.left+i.width/2-n/2+a;break;case"bottom":h=i.bottom+r;u=o==="start"?i.left+a:o==="end"?i.right-n+a:i.left+i.width/2-n/2+a;break;case"left":u=i.left-n-r;h=o==="start"?i.top+a:o==="end"?i.bottom-s+a:i.top+i.height/2-s/2+a;break;case"right":u=i.right+r;h=o==="start"?i.top+a:o==="end"?i.bottom-s+a:i.top+i.height/2-s/2+a;break}return{x:Math.min(Math.max(u,d),c-n-d),y:Math.min(Math.max(h,d),l-s-d)}}function m(e){return"variant"in e&&e.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-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-menu: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-menu{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-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu: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-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::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-menu-h,.ds-interaction-fill.sc-ds-menu{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-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--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-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--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-menu-h,.ds-control--sm.sc-ds-menu{--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-menu-h,.ds-control--xs.sc-ds-menu{--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)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const g=8;const v=e(class e extends i{constructor(e){super();if(e!==false){this.__registerHost()}this.dsClose=n(this,"dsClose");this.dsSelect=n(this,"dsSelect");this.dsGradientSelect=n(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(e){if(e){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return l(c.space050,c.space050)}get sideOffsetPx(){return l(this.sideOffset,c.space050)}get alignOffsetPx(){return l(this.alignOffset,0)}get popupFallbackWidthPx(){return l(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return l(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return u(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((e=>m(e)?[]:e.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(e){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let i=g;const n=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;e?.();return}if(i>0){i-=1;this.positionRetryRaf=requestAnimationFrame(n)}};this.positionRetryRaf=requestAnimationFrame(n)}calculatePosition(){const e=this.resolvedAnchor;if(!e)return false;const i=this.el.querySelector(".menu-popup");if(!i)return false;this.pos=h({anchorRect:e.getBoundingClientRect(),popupWidth:i.offsetWidth||this.popupFallbackWidthPx,popupHeight:i.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const e=this.flatItems;const i=e.findIndex((e=>e.isSelected&&!e.isInactive));const n=e.findIndex((e=>!e.isInactive));this.focusedIndex=i>=0?i:n>=0?n:0;requestAnimationFrame((()=>{const e=this.el.querySelectorAll(".menu-item");e[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=e=>{const i=e.target;const n=this.el.querySelector(".menu-popup");const s=this.resolvedAnchor;if(n?.contains(i)||s?.contains(i))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(e){if(!this.shouldRender||this.closing)return;const i=this.flatItems;const n=i.map(((e,i)=>({it:e,i}))).filter((({it:e})=>!e.isInactive)).map((({i:e})=>e));if(!n.length)return;const s=n.indexOf(this.focusedIndex);const t=s<0?0:s;switch(e.key){case"ArrowDown":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t+1)%n.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t-1+n.length)%n.length];this.focusItem(this.focusedIndex);break;case"Home":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[0];this.focusItem(this.focusedIndex);break;case"End":e.preventDefault();e.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[n.length-1];this.focusItem(this.focusedIndex);break;case"Escape":e.preventDefault();this.close();break;case"Tab":e.preventDefault();this.close();break}}focusItem(e){const i=this.el.querySelectorAll(".menu-item");i[e]?.focus()}handleItemClick(e){if(e.isInactive)return;this.dsSelect.emit(e)}handleGradientSelect(e){this.dsGradientSelect.emit(e)}render(){if(!this.shouldRender)return s(t,{style:{display:"contents"}});const e=this.activeSections;let i=0;const n={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)n["width"]=this.menuWidth;if(this.minWidth)n["min-width"]=this.minWidth;return s(t,{style:{display:"contents"}},s("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:n,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},e.map(((n,t)=>s("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<e.length-1,"menu-section--gradient-picker":m(n)},role:n.header?"group":undefined,"aria-label":n.header},n.header&&s("div",{class:"section-header ds-control--md","aria-hidden":"true"},s("span",{class:"text-body-small-emphasis section-label"},n.header)),m(n)?s("ds-shell-gradient-picker",{value:n.value,onDsChange:e=>{e.stopPropagation();this.handleGradientSelect(e.detail)}}):n.items.map((e=>{const n=i++;const t=this.focusedIndex===n;return s("button",{key:n,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!e.isInactive,"ds-interaction-fill--selected":!!e.isSelected&&!e.isInactive,"menu-item--selected":!!e.isSelected,"ds-control-inactive":!!e.isInactive,"menu-item--destructive":!!e.isDestructive,"menu-item--focused":t},role:"menuitem","aria-current":e.isSelected?"true":undefined,disabled:e.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(e),onFocus:()=>{this.focusedIndex=n}},s("div",{class:"menu-item__content ds-interaction-fill__content"},s("span",{class:e.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},e.label),e.subtext&&s("span",{class:"text-body-small menu-item__subtext"},e.subtext)),e.showToggle&&s("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!e.toggleValue,"ds-interaction-fill__content":true},"aria-hidden":"true"},s("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];e.forEach((e=>{switch(e){case"ds-menu":if(!customElements.get(o(e))){customElements.define(o(e),v)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(e))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(e))){a()}break}}))}p();export{v as M,p as d};
-//# sourceMappingURL=p-CwARVsZQ.js.map
+import{p as i,H as e,c as n,h as s,a as t,t as o}from"./index.js";import{d as r}from"./p-CYmVDfd_.js";import{d as a}from"./p-BAeKw2pj.js";import{a as d,T as c}from"./p-B_g8X0eh.js";import{r as l}from"./p-BWUTr_XN.js";import{r as u}from"./p-C1cBr-Ri.js";function h(i){const{anchorRect:e,popupWidth:n,popupHeight:s,side:t,align:o,sideOffsetPx:r,alignOffsetPx:a,viewportPadPx:d,viewportWidth:c,viewportHeight:l}=i;let u=0;let h=0;switch(t){case"top":h=e.top-s-r;u=o==="start"?e.left+a:o==="end"?e.right-n+a:e.left+e.width/2-n/2+a;break;case"bottom":h=e.bottom+r;u=o==="start"?e.left+a:o==="end"?e.right-n+a:e.left+e.width/2-n/2+a;break;case"left":u=e.left-n-r;h=o==="start"?e.top+a:o==="end"?e.bottom-s+a:e.top+e.height/2-s/2+a;break;case"right":u=e.right+r;h=o==="start"?e.top+a:o==="end"?e.bottom-s+a:e.top+e.height/2-s/2+a;break}return{x:Math.min(Math.max(u,d),c-n-d),y:Math.min(Math.max(h,d),l-s-d)}}function m(i){return"variant"in i&&i.variant==="gradient-picker"}const f=()=>`.sc-ds-menu-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-menu: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-menu{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-menu:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-menu: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-menu{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-menu::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-menu-h,.ds-interaction-fill.sc-ds-menu{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-menu-h::before,.ds-interaction-fill.sc-ds-menu::before,.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-menu-h::before,.ds-interaction-fill.sc-ds-menu::before{z-index:1}.ds-interaction-fill.sc-ds-menu-h::after,.ds-interaction-fill.sc-ds-menu::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-menu-h,.ds-interaction-fill--bordered.sc-ds-menu{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-tertiary)}.ds-interaction-fill--selected.sc-ds-menu-h::before,.ds-interaction-fill--selected.sc-ds-menu::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-menu-h,.ds-interaction-fill--selected.sc-ds-menu{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-menu-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-menu-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-menu:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-menu-h>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill.sc-ds-menu>.ds-interaction-fill__content.sc-ds-menu,.ds-interaction-fill__content.sc-ds-menu{position:relative;z-index:2}.ds-interaction-fill--on-medium.sc-ds-menu-h,.ds-interaction-fill--on-medium.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-bold.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-strong.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-always-dark.sc-ds-menu{--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-menu-h,.ds-interaction-fill--on-navigation.sc-ds-menu{--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-menu-h,.ds-control-inactive.sc-ds-menu{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-menu-h,.ds-control--md.sc-ds-menu{--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-menu-h,.ds-control--sm.sc-ds-menu{--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-menu-h,.ds-control--xs.sc-ds-menu{--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)}.menu-popup.sc-ds-menu{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:var(--dimension-panel-width-lg);overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:menuFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform}.menu-popup.sc-ds-menu::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.menu-popup--closing.sc-ds-menu{animation:menuFadeOut var(--effect-motion-short-2) forwards}@keyframes menuFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes menuFadeOut{from{opacity:1}to{opacity:0}}.menu-section.sc-ds-menu{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.menu-section--divided.sc-ds-menu{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}.section-header.sc-ds-menu{display:flex;align-items:center;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));-webkit-user-select:none;user-select:none}.section-label.sc-ds-menu{display:inline-flex;align-items:center;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-primary)}.menu-item.sc-ds-menu{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.menu-item.sc-ds-menu:has(.menu-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.menu-item--destructive.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-bold-negative) !important}.menu-item__content.sc-ds-menu{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}.menu-item__label.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary)}.menu-item.sc-ds-menu:has(.menu-item__subtext) .menu-item__label.sc-ds-menu,.menu-item--selected.sc-ds-menu .menu-item__label.sc-ds-menu{color:var(--color-foreground-primary)}.menu-item__subtext.sc-ds-menu{padding:0 var(--ds-control-label-inset, var(--dimension-space-025));color:var(--color-foreground-secondary);line-height:1.4}.menu-item__toggle.sc-ds-menu{position:relative;flex-shrink:0;width:calc(var(--dimension-size-400) + var(--dimension-size-050));height:var(--dimension-size-250);border-radius:var(--dimension-radius-125);background-color:var(--color-background-translucent);transition:background-color var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu{background-color:var(--color-background-medium-brand)}.menu-item__toggle-thumb.sc-ds-menu{position:absolute;top:var(--dimension-space-025);left:var(--dimension-space-025);width:var(--dimension-size-200);height:var(--dimension-size-200);border-radius:50%;background-color:var(--color-foreground-on-bold-background-primary);transition:transform var(--effect-motion-short-2)}.menu-item__toggle--on.sc-ds-menu .menu-item__toggle-thumb.sc-ds-menu{transform:translateX(var(--dimension-offset-200, 16px))}`;const g=8;const v=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsClose=n(this,"dsClose");this.dsSelect=n(this,"dsSelect");this.dsGradientSelect=n(this,"dsGradientSelect");this.open=false;this.items=[];this.sections=[];this.side="bottom";this.align="start";this.sideOffset=d.space050;this.alignOffset=0;this.initialFocusVisible=false;this.shouldRender=false;this.closing=false;this.pos={x:0,y:0};this.focusedIndex=0;this.positionReady=false;this.focusRingVisible=false;this.clickOutsideHandler=null;this.scrollResizeHandler=null;this.closeTimer=null;this.itemEls=[];this.positionRetryRaf=null;this.listenersReady=false}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.cancelPositionRetry();this.teardownListeners()}onOpenChange(i){if(i){this.teardownListeners();this.shouldRender=true;this.closing=false;this.positionReady=false;this.listenersReady=false;this.focusRingVisible=this.initialFocusVisible;this.listenersReady=true;this.setupListeners();this.schedulePositionUpdate((()=>{this.focusInitialItem()}))}else if(this.shouldRender){this.cancelPositionRetry();this.closing=true;this.teardownListeners();this.listenersReady=false;this.closeTimer=setTimeout((()=>{this.shouldRender=false;this.closing=false;this.closeTimer=null}),this.closeAnimationMs)}}onAnchorChange(){if(this.open)this.schedulePositionUpdate()}onPositionPropsChange(){if(this.open)this.schedulePositionUpdate()}get viewportPadPx(){return l(c.space050,c.space050)}get sideOffsetPx(){return l(this.sideOffset,c.space050)}get alignOffsetPx(){return l(this.alignOffset,0)}get popupFallbackWidthPx(){return l(c.menuWidthXs,c.menuWidthXs)}get popupFallbackHeightPx(){return l(c.menuFallbackHeight,c.menuFallbackHeight)}get closeAnimationMs(){return u(c.motionShort2,c.animationDurationShort3)}get resolvedAnchor(){if(this.anchor)return this.anchor;if(this.anchorId)return document.getElementById(this.anchorId);return null}get activeSections(){if(this.sections.length>0)return this.sections;if(this.items.length>0)return[{items:this.items}];return[]}get flatItems(){return this.activeSections.flatMap((i=>m(i)?[]:i.items))}cancelPositionRetry(){if(this.positionRetryRaf!==null){cancelAnimationFrame(this.positionRetryRaf);this.positionRetryRaf=null}}schedulePositionUpdate(i){if(!this.open)return;this.cancelPositionRetry();this.positionReady=false;let e=g;const n=()=>{this.positionRetryRaf=null;if(!this.open)return;if(this.calculatePosition()){this.positionReady=true;i?.();return}if(e>0){e-=1;this.positionRetryRaf=requestAnimationFrame(n)}};this.positionRetryRaf=requestAnimationFrame(n)}calculatePosition(){const i=this.resolvedAnchor;if(!i)return false;const e=this.el.querySelector(".menu-popup");if(!e)return false;this.pos=h({anchorRect:i.getBoundingClientRect(),popupWidth:e.offsetWidth||this.popupFallbackWidthPx,popupHeight:e.offsetHeight||this.popupFallbackHeightPx,side:this.side,align:this.align,sideOffsetPx:this.sideOffsetPx,alignOffsetPx:this.alignOffsetPx,viewportPadPx:this.viewportPadPx,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight});return true}focusInitialItem(){const i=this.flatItems;const e=i.findIndex((i=>i.isSelected&&!i.isInactive));const n=i.findIndex((i=>!i.isInactive));this.focusedIndex=e>=0?e:n>=0?n:0;requestAnimationFrame((()=>{const i=this.el.querySelectorAll(".menu-item");i[this.focusedIndex]?.focus()}))}setupListeners(){this.clickOutsideHandler=i=>{const e=i.target;const n=this.el.querySelector(".menu-popup");const s=this.resolvedAnchor;if(n?.contains(e)||s?.contains(e))return;this.close()};this.scrollResizeHandler=()=>{if(this.shouldRender&&!this.closing)this.calculatePosition()};document.addEventListener("mousedown",this.clickOutsideHandler,true);window.addEventListener("scroll",this.scrollResizeHandler,true);window.addEventListener("resize",this.scrollResizeHandler)}teardownListeners(){if(this.clickOutsideHandler){document.removeEventListener("mousedown",this.clickOutsideHandler,true);this.clickOutsideHandler=null}if(this.scrollResizeHandler){window.removeEventListener("scroll",this.scrollResizeHandler,true);window.removeEventListener("resize",this.scrollResizeHandler);this.scrollResizeHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){this.resolvedAnchor?.focus();this.dsClose.emit();this.open=false;this.onOpenChange(false)}handleKeyDown(i){if(!this.shouldRender||this.closing)return;const e=this.flatItems;const n=e.map(((i,e)=>({it:i,i:e}))).filter((({it:i})=>!i.isInactive)).map((({i})=>i));if(!n.length)return;const s=n.indexOf(this.focusedIndex);const t=s<0?0:s;switch(i.key){case"ArrowDown":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t+1)%n.length];this.focusItem(this.focusedIndex);break;case"ArrowUp":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[(t-1+n.length)%n.length];this.focusItem(this.focusedIndex);break;case"Home":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[0];this.focusItem(this.focusedIndex);break;case"End":i.preventDefault();i.stopPropagation();this.focusRingVisible=true;this.focusedIndex=n[n.length-1];this.focusItem(this.focusedIndex);break;case"Escape":i.preventDefault();this.close();break;case"Tab":i.preventDefault();this.close();break}}focusItem(i){const e=this.el.querySelectorAll(".menu-item");e[i]?.focus()}handleItemClick(i){if(i.isInactive)return;this.dsSelect.emit(i)}handleGradientSelect(i){this.dsGradientSelect.emit(i)}render(){if(!this.shouldRender)return s(t,{style:{display:"contents"}});const i=this.activeSections;let e=0;const n={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,zIndex:"9998",visibility:this.positionReady?"visible":"hidden"};if(this.menuWidth)n["width"]=this.menuWidth;if(this.minWidth)n["min-width"]=this.minWidth;return s(t,{style:{display:"contents"}},s("div",{class:{"menu-popup":true,"menu-popup--closing":this.closing},style:n,role:"menu","aria-label":"Menu","aria-orientation":"vertical"},i.map(((n,t)=>s("div",{key:t,class:{"menu-section":true,"menu-section--divided":t<i.length-1,"menu-section--gradient-picker":m(n)},role:n.header?"group":undefined,"aria-label":n.header},n.header&&s("div",{class:"section-header ds-control--md","aria-hidden":"true"},s("span",{class:"text-body-small-emphasis section-label"},n.header)),m(n)?s("ds-shell-gradient-picker",{value:n.value,onDsChange:i=>{i.stopPropagation();this.handleGradientSelect(i.detail)}}):n.items.map((i=>{const n=e++;const t=this.focusedIndex===n;return s("button",{key:n,type:"button",class:{"menu-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-focus-ring--visible":t&&this.focusRingVisible,"ds-interaction-fill":!i.isInactive,"ds-interaction-fill--selected":!!i.isSelected&&!i.isInactive,"menu-item--selected":!!i.isSelected,"ds-control-inactive":!!i.isInactive,"menu-item--destructive":!!i.isDestructive,"menu-item--focused":t},role:"menuitem","aria-current":i.isSelected?"true":undefined,disabled:i.isInactive,tabIndex:t?0:-1,onMouseDown:()=>{this.focusRingVisible=false},onClick:()=>this.handleItemClick(i),onFocus:()=>{this.focusedIndex=n}},s("div",{class:"menu-item__content ds-interaction-fill__content"},s("span",{class:i.isSelected?"text-body-medium-emphasis menu-item__label":"text-body-medium menu-item__label"},i.label),i.subtext&&s("span",{class:"text-body-small menu-item__subtext"},i.subtext)),i.showToggle&&s("div",{class:{"menu-item__toggle":true,"menu-item__toggle--on":!!i.toggleValue,"ds-interaction-fill__content":true},"aria-hidden":"true"},s("div",{class:"menu-item__toggle-thumb"})))})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}}static get style(){return f()}},[2,"ds-menu",{open:[1028],items:[16],sections:[16],side:[1],align:[1],sideOffset:[8,"side-offset"],alignOffset:[8,"align-offset"],menuWidth:[1,"menu-width"],minWidth:[1,"min-width"],anchor:[16],anchorId:[1,"anchor-id"],initialFocusVisible:[4,"initial-focus-visible"],shouldRender:[32],closing:[32],pos:[32],focusedIndex:[32],positionReady:[32],focusRingVisible:[32]},[[0,"keydown","handleKeyDown"]],{open:[{onOpenChange:0}],anchor:[{onAnchorChange:0}],anchorId:[{onAnchorChange:0}],side:[{onPositionPropsChange:0}],align:[{onPositionPropsChange:0}],sideOffset:[{onPositionPropsChange:0}],alignOffset:[{onPositionPropsChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const i=["ds-menu","ds-shell-gradient-picker","ds-shell-gradient-swatch"];i.forEach((i=>{switch(i){case"ds-menu":if(!customElements.get(o(i))){customElements.define(o(i),v)}break;case"ds-shell-gradient-picker":if(!customElements.get(o(i))){r()}break;case"ds-shell-gradient-swatch":if(!customElements.get(o(i))){a()}break}}))}p();export{v as M,p as d};
+//# sourceMappingURL=p-Dlol7hPg.js.map