@ds-mo/ui 12.3.0 → 12.4.1

package/dist/components/ds-shell-app.js.map

@@ -1 +1 @@
-{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","shellAppCss","ShellApp","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradientPreset","shortcutsEnabled","toolsFullscreen","resizeObserver","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentDidLoad","syncSlottedNavStyle","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","tools","querySelector","handleToolsPresentation","detail","presentation","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","schedule","panel","bar","setAttribute","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","normalizeShellGradientPreset","handleWindowKeyDown","action","preventDefault","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","size","opacity","shellGradientPresetOpacity","isBar","tagName","render","chromeActive","shellCls","h","Host","class","inert"],"sources":["src/wc/shell/shell-gradient.ts","src/wc/shell/shell-shortcuts.ts","src/wc/shell/shell-chrome-metrics.ts","src/wc/components/ShellApp/ShellApp.css?tag=ds-shell-app&encapsulation=scoped","src/wc/components/ShellApp/ShellApp.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n  normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-shell-app` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n  | 'toggle-panel-nav'\n  | 'close-panel-tools'\n  | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n  k: 'search',\n  a: 'agents',\n  s: 'stacks',\n  m: 'messages',\n  n: 'activity',\n  '/': 'help',\n};\n\n/** Tool shortcut keys (K, A, S, M, N, /) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n  return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n  if (!target || typeof target !== 'object') return false;\n  if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n  const el = target as Element & { isContentEditable?: boolean };\n\n  const editable = el.closest(\n    'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n  );\n  if (editable) return true;\n\n  const role = el.getAttribute('role');\n  if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n  return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n  if (e.key === '[' || e.code === 'BracketLeft') return '[';\n  if (e.key === ']' || e.code === 'BracketRight') return ']';\n  return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n  e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n  if (!isBareShellShortcutKey(e)) return null;\n\n  const key = normalizedShortcutKey(e);\n  if (key === '[') return 'toggle-panel-nav';\n  if (key === ']') return 'close-panel-tools';\n\n  const toolId = TOOL_SHORTCUT_KEYS[key];\n  if (toolId) return `open-tool:${toolId}`;\n\n  return null;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n}\n\n.shell-app {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family, system-ui);\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n","import { Component, Prop, Element, State, Watch, Listen, h, Host } from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  isEditableShortcutTarget,\n  resolveShellShortcut,\n} from '../../shell/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionDepth,\n  createRafCoalescer,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport {\n  isPanelNavCollapsed,\n  panelWidthPxFromTokens,\n  readPanelNavWidthTokens,\n  type PanelNavWidthTokens,\n} from '../../shell/shell-chrome-metrics';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  readShellViewportDimensions,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientPresetOpacity,\n  shellGradientSize,\n} from '../../shell/shell-gradient';\n\n@Component({\n  tag: 'ds-shell-app',\n  styleUrl: 'ShellApp.css',\n  scoped: true,\n})\nexport class ShellApp {\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /**\n   * Shell chrome wash preset. `none` renders solid chrome; the remaining\n   * presets use token-based washes that adapt to the active color theme.\n   */\n  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n  @Element() el!: HTMLElement;\n  @State() private toolsFullscreen = false;\n\n  private resizeObserver: ResizeObserver | null = null;\n  private readonly panelNavTransition = new ChromeTransitionDepth();\n  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n  private cachedViewportWidth = 0;\n  private cachedViewportHeight = 0;\n  private onWindowResize = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n  private onVisualViewportChange = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n\n  componentDidLoad() {\n    this.syncSlottedNavStyle();\n    this.connectMetricsObserver();\n    this.connectViewportListeners();\n    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n    requestAnimationFrame(() => {\n      this.cachePanelWidthTokens();\n      this.scheduleChromeSync();\n    });\n    const tools = this.el.querySelector('ds-panel-tools');\n    this.toolsFullscreen = tools?.getAttribute('presentation') === 'fullscreen';\n  }\n\n  @Listen('dsPresentationChange')\n  handleToolsPresentation(event: CustomEvent<{ presentation?: string }>) {\n    this.toolsFullscreen = event.detail?.presentation === 'fullscreen';\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.disconnectViewportListeners();\n    this.chromeSyncCoalescer.cancel();\n    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  @Watch('navStyle')\n  @Watch('gradientPreset')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.enter();\n    const viewport = readShellViewportDimensions();\n    this.cachedViewportWidth = viewport.width;\n    this.cachedViewportHeight = viewport.height;\n    this.syncChrome();\n  };\n\n  private onChromeTransitionEnd = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.exit();\n    if (!this.panelNavTransition.isActive) {\n      this.scheduleChromeSync();\n    }\n  };\n\n  /** Coalesce ResizeObserver bursts to one layout read per frame. */\n  private scheduleChromeSync() {\n    this.chromeSyncCoalescer.schedule();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.panelNavTransition.isActive) return;\n      this.scheduleChromeSync();\n    });\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.shell-app__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n  }\n\n  private connectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n    }\n  }\n\n  private disconnectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.removeEventListener('resize', this.onWindowResize);\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.removeEventListener('resize', this.onVisualViewportChange);\n      visual.removeEventListener('scroll', this.onVisualViewportChange);\n    }\n  }\n\n  private cachePanelWidthTokens() {\n    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n    if (!navRoot) return;\n    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    const panelWrap = this.el.querySelector('.shell-app__panel') as HTMLElement | null;\n    const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n    if (measured > 0) return measured;\n\n    if (this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    return 0;\n  }\n\n  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n  private resolveViewportDimensions(): { width: number; height: number } {\n    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n      return {\n        width: this.cachedViewportWidth,\n        height: this.cachedViewportHeight,\n      };\n    }\n\n    return readShellViewportDimensions();\n  }\n\n  private chromeLayerActive(): boolean {\n    return normalizeShellGradientPreset(this.gradientPreset) !== 'none';\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleWindowKeyDown(e: KeyboardEvent) {\n    if (!this.shortcutsEnabled) return;\n    if (isEditableShortcutTarget(e.target)) return;\n\n    const action = resolveShellShortcut(e);\n    if (!action) return;\n\n    e.preventDefault();\n\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n    const tools = this.el.querySelector('ds-panel-tools') as HTMLDsPanelToolsElement | null;\n\n    if (action === 'toggle-panel-nav') {\n      void panel?.toggleCollapsed();\n      return;\n    }\n\n    if (action === 'close-panel-tools') {\n      void tools?.closeDrawer();\n      return;\n    }\n\n    if (action.startsWith('open-tool:') && tools) {\n      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n      void tools.activateTool(toolId);\n    }\n  }\n\n  private syncChrome() {\n    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n    const clearLayoutVars = () => {\n      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n    };\n\n    const preset = normalizeShellGradientPreset(this.gradientPreset);\n    if (preset === 'none') {\n      this.clearGradientPaintVars(targets);\n      clearLayoutVars();\n      return;\n    }\n\n    const viewport = this.resolveViewportDimensions();\n    const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n    const image = buildShellRadialGradient(preset);\n\n    const size = shellGradientSize({\n      width: viewport.width,\n      height: viewport.height,\n    });\n    const opacity = shellGradientPresetOpacity(preset);\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  render() {\n    const chromeActive = this.chromeLayerActive();\n    const shellCls: Record<string, boolean> = {\n      'shell-app': true,\n      'shell-app--gradient': chromeActive,\n      [`shell-app--${this.navStyle}`]: true,\n      'shell-app--tools-fullscreen': this.toolsFullscreen,\n    };\n\n    return (\n      <Host class={shellCls}>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div class=\"shell-app__panel\" aria-hidden={this.toolsFullscreen ? 'true' : undefined} inert={this.toolsFullscreen ? true : undefined}>\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"shell-app__main\">\n            <div class=\"shell-app__bar\" aria-hidden={this.toolsFullscreen ? 'true' : undefined} inert={this.toolsFullscreen ? true : undefined}>\n              <slot name=\"bar\" />\n            </div>\n            <div class=\"shell-app__tools\">\n              <slot name=\"tools\" />\n            </div>\n            <div class=\"shell-app__content\" aria-hidden={this.toolsFullscreen ? 'true' : undefined} inert={this.toolsFullscreen ? true : undefined}>\n              <slot />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SHELL_GRADIENT_IMAGE_VAR","SHELL_GRADIENT_SIZE_VAR","SHELL_GRADIENT_POSITION_PANEL_VAR","SHELL_GRADIENT_POSITION_BAR_VAR","SHELL_GRADIENT_OPACITY_VAR","buildShellRadialGradient","preset","DEFAULT_SHELL_GRADIENT_PRESET","buildShellRadialGradientForPreset","readShellViewportDimensions","win","w","globalThis","window","undefined","width","height","visual","visualViewport","Math","round","innerWidth","innerHeight","shellGradientSize","layout","shellGradientPositionPanel","shellGradientPositionBar","panelWidth","TOOL_SHORTCUT_KEYS","k","a","s","m","n","isBareShellShortcutKey","e","metaKey","ctrlKey","altKey","shiftKey","isEditableShortcutTarget","target","closest","el","editable","role","getAttribute","Boolean","isContentEditable","normalizedShortcutKey","key","code","length","toLowerCase","resolveShellShortcut","toolId","readCssVarWidthPx","context","cssVarName","document","probe","createElement","style","cssText","appendChild","getBoundingClientRect","removeChild","readPanelNavWidthTokens","navRoot","expandedPx","collapsedPx","isPanelNavCollapsed","panelNavHost","classList","contains","collapsedProp","collapsed","panelWidthPxFromTokens","tokens","shellAppCss","ShellApp","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","navStyle","gradientPreset","shortcutsEnabled","mobileDestination","mobileNavigationOpen","toolsFullscreen","resolvedMode","resizeObserver","hasLoaded","panelNavTransition","ChromeTransitionDepth","chromeSyncCoalescer","createRafCoalescer","syncChrome","panelWidthTokens","cachedViewportWidth","cachedViewportHeight","onWindowResize","updateResponsiveMode","isActive","scheduleChromeSync","onVisualViewportChange","onChromeTransitionStart","event","readChromeTransitionSource","enter","viewport","onChromeTransitionEnd","exit","componentWillLoad","resolveShellResponsiveMode","componentDidLoad","syncSlottedNavStyle","syncSlottedMobileState","connectMetricsObserver","connectViewportListeners","addEventListener","CHROME_TRANSITION_START","CHROME_TRANSITION_END","requestAnimationFrame","cachePanelWidthTokens","tools","querySelector","handleToolsPresentation","detail","presentation","disconnectedCallback","disconnect","disconnectViewportListeners","cancel","removeEventListener","onShellPropsChange","onMobileStateChange","_next","previous","bar","activeElement","focusDestination","next","dsResponsiveModeChange","emit","mode","schedule","panel","setAttribute","navigation","responsiveMode","activeDestination","navigationExpanded","open","ResizeObserver","observe","panelWrap","passive","applyGradientVars","vars","name","value","Object","entries","removeProperty","setProperty","clearGradientPaintVars","targets","keys","syncChromeLayoutVars","panelPosition","barPosition","resolvePanelWidthPx","panelNav","measured","resolveViewportDimensions","chromeLayerActive","normalizeShellGradientPreset","handleWindowKeyDown","action","preventDefault","toggleCollapsed","closeDrawer","startsWith","slice","activateTool","filter","clearLayoutVars","image","size","opacity","shellGradientPresetOpacity","isBar","tagName","render","chromeActive","mobile","mobileToolActive","mobileStageBlocked","fullscreen","shellCls","h","Host","class","inert","hidden"],"sources":["src/wc/shell/shell-gradient.ts","src/wc/shell/shell-shortcuts.ts","src/wc/shell/shell-chrome-metrics.ts","src/wc/components/ShellApp/ShellApp.css?tag=ds-shell-app&encapsulation=scoped","src/wc/components/ShellApp/ShellApp.tsx"],"sourcesContent":["/** CSS var names consumed by `ds-panel-nav` / `ds-bar-nav` inside `ds-shell-app`. */\nimport type { ShellGradientPreset } from './shell-gradient-presets';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  buildShellRadialGradientForPreset,\n  normalizeShellGradientPreset,\n} from './shell-gradient-presets';\n\nexport type { ShellGradientPreset } from './shell-gradient-presets';\nexport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  SHELL_GRADIENT_PRESETS,\n  SHELL_GRADIENT_PRESET_LABELS,\n  buildShellRadialGradientForPreset,\n  buildShellRadialGradientFromStops,\n  isShellGradientPreset,\n  shellGradientPresetOpacity,\n  shellGradientPresetRecipe,\n  shellGradientPresetStopToken,\n} from './shell-gradient-presets';\n\nexport const SHELL_GRADIENT_IMAGE_VAR = '--ds-shell-gradient-image';\nexport const SHELL_GRADIENT_SIZE_VAR = '--ds-shell-gradient-size';\nexport const SHELL_GRADIENT_POSITION_PANEL_VAR = '--ds-shell-gradient-position-panel';\nexport const SHELL_GRADIENT_POSITION_BAR_VAR = '--ds-shell-gradient-position-bar';\nexport const SHELL_GRADIENT_OPACITY_VAR = '--ds-shell-gradient-opacity';\n/** Per chrome-surface background-position — offsets wash + grid to shell row origin. */\nexport const SHELL_CHROME_SURFACE_POSITION_VAR = '--ds-shell-chrome-surface-position';\n\n/** Whether the shared chrome layer (secondary bg + optional wash) should mount. */\nexport function shellChromeLayerActive(preset: ShellGradientPreset): boolean {\n  return normalizeShellGradientPreset(preset) !== 'none';\n}\n\n/**\n * Shell radial wash — same for panel and bar nav.\n * Tokens follow `data-theme` (light/dark intent stops).\n */\nexport function buildShellRadialGradient(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradientForPreset(preset);\n}\n\n/** Built-in radial image for the selected shell preset. */\nexport function shellGradientImage(\n  preset: ShellGradientPreset = DEFAULT_SHELL_GRADIENT_PRESET,\n): string {\n  return buildShellRadialGradient(preset);\n}\n\nexport interface ShellViewportDimensions {\n  width: number;\n  height: number;\n}\n\n/**\n * Viewport size for shell chrome with `background-attachment: fixed`.\n * Must not use the `ds-shell-app` element box — the shell can be shorter or\n * taller than the viewport when host height chains break or content overflows.\n */\nexport function readShellViewportDimensions(win?: Window): ShellViewportDimensions {\n  const w = win ?? (typeof globalThis.window !== 'undefined' ? globalThis.window : undefined);\n  if (!w) return { width: 0, height: 0 };\n\n  const visual = w.visualViewport;\n  return {\n    width: Math.round(visual?.width ?? w.innerWidth),\n    height: Math.round(visual?.height ?? w.innerHeight),\n  };\n}\n\nexport interface ShellGradientLayout {\n  width: number;\n  height: number;\n  panelWidth: number;\n}\n\n/** Pixel `background-size` for the fixed-attachment radial wash. */\nexport function shellGradientSize(layout: Pick<ShellGradientLayout, 'width' | 'height'>): string {\n  return `${Math.round(layout.width)}px ${Math.round(layout.height)}px`;\n}\n\nexport function shellGradientPositionPanel(): string {\n  return '0 0';\n}\n\nexport function shellGradientPositionBar(panelWidth: number): string {\n  return `${-Math.round(panelWidth)}px 0`;\n}\n\n/** Phase-lock a chrome rect to the shell row coordinate system (wash + grid). */\nexport function shellChromeSurfacePosition(leftPx: number, topPx: number): string {\n  return `${-Math.round(leftPx)}px ${-Math.round(topPx)}px`;\n}\n","import type { PanelToolsToolId } from '../components/PanelTools/panel-tools-types';\n\nexport type ShellShortcutAction =\n  | 'toggle-panel-nav'\n  | 'close-panel-tools'\n  | `open-tool:${PanelToolsToolId}`;\n\nconst TOOL_SHORTCUT_KEYS: Record<string, PanelToolsToolId> = {\n  k: 'search',\n  a: 'agents',\n  s: 'stacks',\n  m: 'messages',\n  n: 'activity',\n  '/': 'help',\n};\n\n/** Tool shortcut keys (K, A, S, M, N, /) toggle open/closed via `ds-panel-tools.activateTool`. */\n\n/** True when no modifier keys are held — avoids browser/app chords like ⌘N. */\nexport function isBareShellShortcutKey(\n  e: Pick<KeyboardEvent, 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): boolean {\n  return !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey;\n}\n\n/** Skip shell shortcuts while typing in an editable control. */\nexport function isEditableShortcutTarget(target: EventTarget | null): boolean {\n  if (!target || typeof target !== 'object') return false;\n  if (!('closest' in target) || typeof target.closest !== 'function') return false;\n\n  const el = target as Element & { isContentEditable?: boolean };\n\n  const editable = el.closest(\n    'input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [contenteditable=\"plaintext-only\"]',\n  );\n  if (editable) return true;\n\n  const role = el.getAttribute('role');\n  if (role === 'textbox' || role === 'combobox' || role === 'searchbox') return true;\n\n  return Boolean(el.isContentEditable);\n}\n\nfunction normalizedShortcutKey(e: Pick<KeyboardEvent, 'key' | 'code'>): string {\n  if (e.key === '[' || e.code === 'BracketLeft') return '[';\n  if (e.key === ']' || e.code === 'BracketRight') return ']';\n  return e.key.length === 1 ? e.key.toLowerCase() : e.key.toLowerCase();\n}\n\n/** Resolve a shell chrome shortcut, or `null` when the key is not handled. */\nexport function resolveShellShortcut(\n  e: Pick<KeyboardEvent, 'key' | 'code' | 'metaKey' | 'ctrlKey' | 'altKey' | 'shiftKey'>,\n): ShellShortcutAction | null {\n  if (!isBareShellShortcutKey(e)) return null;\n\n  const key = normalizedShortcutKey(e);\n  if (key === '[') return 'toggle-panel-nav';\n  if (key === ']') return 'close-panel-tools';\n\n  const toolId = TOOL_SHORTCUT_KEYS[key];\n  if (toolId) return `open-tool:${toolId}`;\n\n  return null;\n}\n","import { shellGradientPositionBar } from './shell-gradient';\n\n/** Read a `var(--token)` width in px using a hidden probe (works with calc() tokens). */\nexport function readCssVarWidthPx(context: HTMLElement, cssVarName: string): number {\n  if (typeof document === 'undefined') return 0;\n\n  const probe = document.createElement('div');\n  probe.style.cssText =\n    'position:absolute;visibility:hidden;pointer-events:none;height:0;width:var(' +\n    cssVarName +\n    ');';\n  context.appendChild(probe);\n  const width = probe.getBoundingClientRect().width;\n  context.removeChild(probe);\n  return width;\n}\n\nexport interface PanelNavWidthTokens {\n  expandedPx: number;\n  collapsedPx: number;\n}\n\n/** Resolve panel-nav expanded/collapsed widths from scoped CSS vars on `.panel-nav`. */\nexport function readPanelNavWidthTokens(navRoot: HTMLElement): PanelNavWidthTokens {\n  return {\n    expandedPx: readCssVarWidthPx(navRoot, '--_nav-width'),\n    collapsedPx: readCssVarWidthPx(navRoot, '--_nav-width-collapsed'),\n  };\n}\n\nexport function isPanelNavCollapsed(\n  panelNavHost: HTMLElement | null,\n  navRoot: HTMLElement | null,\n): boolean {\n  if (navRoot?.classList.contains('panel-nav--collapsed')) return true;\n  const collapsedProp = (panelNavHost as (HTMLElement & { collapsed?: boolean }) | null)?.collapsed;\n  return collapsedProp === true;\n}\n\nexport function panelWidthPxFromTokens(\n  tokens: PanelNavWidthTokens,\n  collapsed: boolean,\n): number {\n  return collapsed ? tokens.collapsedPx : tokens.expandedPx;\n}\n\nexport function barGradientPositionFromPanelWidth(panelWidthPx: number): string {\n  return shellGradientPositionBar(panelWidthPx);\n}\n",":host {\n  display: block;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  --ds-shell-panel-tools-width: var(--dimension-panel-width-xs);\n}\n\n.shell-app {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow: hidden;\n  overscroll-behavior: none;\n  font-family: var(--typography-font-family, system-ui);\n}\n\n:host {\n  --_shell-chrome-bg: var(--color-background-secondary);\n}\n\n.shell-app__row {\n  display: flex;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n/*\n * One chrome layer behind the shell row. Wash uses background-attachment: fixed\n * so the pattern is locked to the viewport — panel/tools collapse only changes the\n * transparent window, not the pattern phase. JS sets wash background-size from\n * readShellViewportDimensions(), not the shell element box.\n */\n.shell-app__chrome {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  background-color: var(--_shell-chrome-bg);\n}\n\n:host(.shell-app--gradient) .shell-app__chrome::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  background-position: 0 0;\n  background-attachment: fixed;\n  z-index: 1;\n  opacity: var(--ds-shell-gradient-opacity, 1);\n  background-image: var(--ds-shell-gradient-image, none);\n  background-size: var(--ds-shell-gradient-size, auto);\n  background-repeat: no-repeat;\n}\n\n.shell-app__panel {\n  flex: 0 0 auto;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n  /* Above main so resize handle line can paint over the workspace edge */\n  z-index: 2;\n}\n\n.shell-app__panel ::slotted(ds-panel-nav) {\n  display: block;\n  height: 100%;\n}\n\n.shell-app__main {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  grid-template-rows: auto minmax(0, 1fr);\n  grid-template-areas:\n    'bar tools'\n    'content tools';\n  position: relative;\n  z-index: 1;\n}\n\n.shell-app__mobile-section,\n.shell-app__mobile-navigation,\n.shell-app__mobile-bar {\n  display: none;\n}\n\n.shell-app__bar {\n  grid-area: bar;\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.shell-app__bar ::slotted(ds-bar-nav) {\n  display: block;\n}\n\n.shell-app__content {\n  grid-area: content;\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  /* Limit reflow to the page column — not on __main (breaks tools flex shrink). */\n  contain: layout;\n}\n\n/* Opaque page surface — masks the fixed chrome layer in the content column. */\n.shell-app__content {\n  position: relative;\n  z-index: 1;\n  background-color: var(--color-background-primary);\n}\n\n.shell-app__tools {\n  grid-area: tools;\n  flex: 0 0 auto;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  display: flex;\n  position: relative;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.shell-app__tools ::slotted(ds-panel-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n.shell-app__tools ::slotted(ds-shell-tools) {\n  display: block;\n  height: 100%;\n  min-height: 0;\n}\n\n:host(.shell-app--tools-fullscreen) .shell-app__panel,\n:host(.shell-app--tools-fullscreen) .shell-app__bar,\n:host(.shell-app--tools-fullscreen) .shell-app__content {\n  visibility: hidden;\n}\n\n:host(.shell-app--mobile) {\n  --_shell-chrome-bg: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__chrome,\n:host(.shell-app--mobile) .shell-app__panel,\n:host(.shell-app--mobile) .shell-app__bar {\n  display: none;\n}\n\n:host(.shell-app--mobile) .shell-app__main {\n  width: 100%;\n  grid-template-columns: minmax(0, 1fr);\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  grid-template-areas:\n    'mobile-section'\n    'stage'\n    'mobile-bar';\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-section {\n  grid-area: mobile-section;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 1;\n}\n\n:host(.shell-app--mobile) .shell-app__content,\n:host(.shell-app--mobile) .shell-app__tools,\n:host(.shell-app--mobile) .shell-app__mobile-navigation {\n  grid-area: stage;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  position: relative;\n}\n\n:host(.shell-app--mobile) .shell-app__content {\n  z-index: 1;\n  overflow: auto;\n}\n\n:host(.shell-app--mobile) .shell-app__tools {\n  z-index: 2;\n  width: 100%;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-navigation {\n  display: block;\n  z-index: 3;\n  overflow: hidden;\n  background: var(--color-background-primary);\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-bar {\n  grid-area: mobile-bar;\n  display: block;\n  min-width: 0;\n  position: relative;\n  z-index: 4;\n}\n\n:host(.shell-app--mobile) .shell-app__mobile-section[hidden],\n:host(.shell-app--mobile) .shell-app__tools[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-navigation[hidden],\n:host(.shell-app--mobile) .shell-app__mobile-bar[hidden] {\n  display: none;\n}\n\n:host(.shell-app--mobile-tool-active) .shell-app__content,\n:host(.shell-app--mobile-navigation-open) .shell-app__content,\n:host(.shell-app--mobile-navigation-open) .shell-app__tools {\n  visibility: hidden;\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Watch,\n  Listen,\n  h,\n  Host,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport {\n  isEditableShortcutTarget,\n  resolveShellShortcut,\n} from '../../shell/shell-shortcuts';\nimport type { PanelToolsToolId } from '../PanelTools/panel-tools-types';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../../shell/shell-gradient-presets';\nimport {\n  CHROME_TRANSITION_END,\n  CHROME_TRANSITION_START,\n  ChromeTransitionDepth,\n  createRafCoalescer,\n  readChromeTransitionSource,\n} from '../../shell/chrome-transition';\nimport {\n  isPanelNavCollapsed,\n  panelWidthPxFromTokens,\n  readPanelNavWidthTokens,\n  type PanelNavWidthTokens,\n} from '../../shell/shell-chrome-metrics';\nimport {\n  SHELL_GRADIENT_IMAGE_VAR,\n  SHELL_GRADIENT_OPACITY_VAR,\n  SHELL_GRADIENT_POSITION_BAR_VAR,\n  SHELL_GRADIENT_POSITION_PANEL_VAR,\n  SHELL_GRADIENT_SIZE_VAR,\n  buildShellRadialGradient,\n  readShellViewportDimensions,\n  shellGradientPositionBar,\n  shellGradientPositionPanel,\n  shellGradientPresetOpacity,\n  shellGradientSize,\n} from '../../shell/shell-gradient';\nimport {\n  resolveShellResponsiveMode,\n  type ShellMobileDestination,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-app',\n  styleUrl: 'ShellApp.css',\n  scoped: true,\n})\nexport class ShellApp {\n  /** Chrome style propagated to slotted `ds-panel-nav` and `ds-bar-nav`. */\n  @Prop({ attribute: 'nav-style', reflect: true }) navStyle: NavChromeStyle = 'dashboard';\n\n  /**\n   * Shell chrome wash preset. `none` renders solid chrome; the remaining\n   * presets use token-based washes that adapt to the active color theme.\n   */\n  @Prop({ attribute: 'gradient-preset', reflect: true }) gradientPreset: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n\n  /** When `true` (default), registers global shell keyboard shortcuts. `[` toggles panel nav; `]` closes tools; K, A, S, M, N, and / toggle tool drawers. Modifiers are ignored so browser chords like ⌘N stay native. */\n  @Prop({ attribute: 'shortcuts-enabled' }) shortcutsEnabled: boolean = true;\n\n  /** Controlled mobile surface shown above the persistent bottom bar. */\n  @Prop({ attribute: 'mobile-destination' })\n  mobileDestination: ShellMobileDestination = 'area';\n\n  /** Controlled full-stage mobile navigation-pane state. */\n  @Prop({ attribute: 'mobile-navigation-open' })\n  mobileNavigationOpen: boolean = false;\n\n  /** Emitted after crossing the fixed 768px or 1200px shell boundaries. */\n  @Event() dsResponsiveModeChange!: EventEmitter<{ mode: ShellResponsiveMode }>;\n\n  @Element() el!: HTMLElement;\n  @State() private toolsFullscreen = false;\n  @State() private resolvedMode: ShellResponsiveMode = 'desktop';\n\n  private resizeObserver: ResizeObserver | null = null;\n  private hasLoaded = false;\n  private readonly panelNavTransition = new ChromeTransitionDepth();\n  private readonly chromeSyncCoalescer = createRafCoalescer(() => this.syncChrome());\n  private panelWidthTokens: PanelNavWidthTokens = { expandedPx: 0, collapsedPx: 0 };\n  private cachedViewportWidth = 0;\n  private cachedViewportHeight = 0;\n  private onWindowResize = () => {\n    this.updateResponsiveMode();\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n  private onVisualViewportChange = () => {\n    if (this.panelNavTransition.isActive) return;\n    this.scheduleChromeSync();\n  };\n\n  componentWillLoad() {\n    if (typeof window !== 'undefined') {\n      this.resolvedMode = resolveShellResponsiveMode(window.innerWidth);\n    }\n  }\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    this.syncSlottedNavStyle();\n    this.syncSlottedMobileState();\n    this.connectMetricsObserver();\n    this.connectViewportListeners();\n    this.el.addEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.addEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n    requestAnimationFrame(() => {\n      this.cachePanelWidthTokens();\n      this.scheduleChromeSync();\n    });\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools');\n    this.toolsFullscreen = tools?.getAttribute('presentation') === 'fullscreen';\n  }\n\n  @Listen('dsPresentationChange')\n  handleToolsPresentation(event: CustomEvent<{ presentation?: string }>) {\n    this.toolsFullscreen = event.detail?.presentation === 'fullscreen';\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.disconnectViewportListeners();\n    this.chromeSyncCoalescer.cancel();\n    this.el.removeEventListener(CHROME_TRANSITION_START, this.onChromeTransitionStart);\n    this.el.removeEventListener(CHROME_TRANSITION_END, this.onChromeTransitionEnd);\n  }\n\n  @Watch('navStyle')\n  @Watch('gradientPreset')\n  onShellPropsChange() {\n    this.syncSlottedNavStyle();\n    this.scheduleChromeSync();\n  }\n\n  @Watch('mobileDestination')\n  @Watch('mobileNavigationOpen')\n  onMobileStateChange(_next: unknown, previous: unknown) {\n    this.syncSlottedMobileState();\n    if (\n      previous === true &&\n      !this.mobileNavigationOpen &&\n      this.resolvedMode === 'mobile'\n    ) {\n      requestAnimationFrame(() => {\n        const bar = this.el.querySelector('ds-shell-mobile-bar') as\n          | (HTMLElement & {\n              focusDestination?: (\n                destination: ShellMobileDestination | 'navigation'\n              ) => Promise<void>;\n            })\n          | null;\n        const activeElement = document.activeElement;\n        if (activeElement instanceof HTMLElement && bar?.contains(activeElement)) return;\n        void bar?.focusDestination?.('navigation');\n      });\n    }\n  }\n\n  private updateResponsiveMode() {\n    if (typeof window === 'undefined') return;\n    const next = resolveShellResponsiveMode(window.innerWidth);\n    if (next === this.resolvedMode) return;\n    this.resolvedMode = next;\n    this.syncSlottedMobileState();\n    this.scheduleChromeSync();\n    if (this.hasLoaded) this.dsResponsiveModeChange.emit({ mode: next });\n  }\n\n  private onChromeTransitionStart = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.enter();\n    const viewport = readShellViewportDimensions();\n    this.cachedViewportWidth = viewport.width;\n    this.cachedViewportHeight = viewport.height;\n    this.syncChrome();\n  };\n\n  private onChromeTransitionEnd = (event: Event) => {\n    if (readChromeTransitionSource(event) !== 'panel-nav') return;\n\n    this.panelNavTransition.exit();\n    if (!this.panelNavTransition.isActive) {\n      this.scheduleChromeSync();\n    }\n  };\n\n  /** Coalesce ResizeObserver bursts to one layout read per frame. */\n  private scheduleChromeSync() {\n    this.chromeSyncCoalescer.schedule();\n  }\n\n  private syncSlottedNavStyle() {\n    const panel = this.el.querySelector('ds-panel-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    const bar = this.el.querySelector('ds-bar-nav') as (HTMLElement & { navStyle: NavChromeStyle }) | null;\n    if (panel) {\n      panel.setAttribute('nav-style', this.navStyle);\n      panel.navStyle = this.navStyle;\n    }\n    if (bar) {\n      bar.setAttribute('nav-style', this.navStyle);\n      bar.navStyle = this.navStyle;\n    }\n  }\n\n  private syncSlottedMobileState() {\n    const tools = this.el.querySelector('ds-shell-tools') as\n      | (HTMLElement & { responsiveMode: ShellResponsiveMode })\n      | null;\n    const bar = this.el.querySelector('ds-shell-mobile-bar') as\n      | (HTMLElement & {\n          activeDestination: ShellMobileDestination;\n          navigationExpanded: boolean;\n        })\n      | null;\n    const navigation = this.el.querySelector('ds-shell-mobile-nav') as\n      | (HTMLElement & { open: boolean })\n      | null;\n\n    if (tools) {\n      tools.setAttribute('responsive-mode', this.resolvedMode);\n      tools.responsiveMode = this.resolvedMode;\n    }\n    if (bar) {\n      bar.activeDestination = this.mobileDestination;\n      bar.navigationExpanded = this.mobileNavigationOpen;\n    }\n    if (navigation) {\n      navigation.open = this.mobileNavigationOpen;\n    }\n  }\n\n  private connectMetricsObserver() {\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.panelNavTransition.isActive) return;\n      this.scheduleChromeSync();\n    });\n    this.resizeObserver.observe(this.el);\n    const panelWrap = this.el.querySelector('.shell-app__panel');\n    if (panelWrap) this.resizeObserver.observe(panelWrap);\n  }\n\n  private connectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.addEventListener('resize', this.onWindowResize, { passive: true });\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.addEventListener('resize', this.onVisualViewportChange, { passive: true });\n      visual.addEventListener('scroll', this.onVisualViewportChange, { passive: true });\n    }\n  }\n\n  private disconnectViewportListeners() {\n    if (typeof window === 'undefined') return;\n\n    window.removeEventListener('resize', this.onWindowResize);\n\n    const visual = window.visualViewport;\n    if (visual) {\n      visual.removeEventListener('resize', this.onVisualViewportChange);\n      visual.removeEventListener('scroll', this.onVisualViewportChange);\n    }\n  }\n\n  private cachePanelWidthTokens() {\n    const navRoot = this.el.querySelector('ds-panel-nav .panel-nav') as HTMLElement | null;\n    if (!navRoot) return;\n    this.panelWidthTokens = readPanelNavWidthTokens(navRoot);\n  }\n\n  private applyGradientVars(target: HTMLElement, vars: Record<string, string | null>) {\n    const style = target.style;\n    for (const [name, value] of Object.entries(vars)) {\n      if (value === null) style.removeProperty(name);\n      else style.setProperty(name, value);\n    }\n  }\n\n  private clearGradientPaintVars(targets: HTMLElement[]) {\n    const keys = [\n      SHELL_GRADIENT_IMAGE_VAR,\n      SHELL_GRADIENT_SIZE_VAR,\n      SHELL_GRADIENT_OPACITY_VAR,\n    ];\n    for (const target of targets) {\n      for (const key of keys) target.style.removeProperty(key);\n    }\n  }\n\n  /** Panel/bar wash offsets for scroll fades and badge rings. */\n  private syncChromeLayoutVars(\n    panel: HTMLElement | null,\n    bar: HTMLElement | null,\n    panelPosition: string,\n    barPosition: string,\n  ) {\n    if (panel) {\n      panel.style.setProperty(SHELL_GRADIENT_POSITION_PANEL_VAR, panelPosition);\n    }\n    if (bar) {\n      bar.style.setProperty(SHELL_GRADIENT_POSITION_BAR_VAR, barPosition);\n    }\n  }\n\n  private resolvePanelWidthPx(panelNav: HTMLElement | null): number {\n    const navRoot = panelNav?.querySelector('.panel-nav') as HTMLElement | null;\n\n    if (this.panelNavTransition.isActive && this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    const panelWrap = this.el.querySelector('.shell-app__panel') as HTMLElement | null;\n    const measured = panelWrap?.getBoundingClientRect().width ?? 0;\n    if (measured > 0) return measured;\n\n    if (this.panelWidthTokens.expandedPx > 0) {\n      const collapsed = isPanelNavCollapsed(panelNav, navRoot);\n      return panelWidthPxFromTokens(this.panelWidthTokens, collapsed);\n    }\n\n    return 0;\n  }\n\n  /** Fixed-attachment wash/grid size — always the viewport, never the shell element box. */\n  private resolveViewportDimensions(): { width: number; height: number } {\n    if (this.panelNavTransition.isActive && this.cachedViewportWidth > 0) {\n      return {\n        width: this.cachedViewportWidth,\n        height: this.cachedViewportHeight,\n      };\n    }\n\n    return readShellViewportDimensions();\n  }\n\n  private chromeLayerActive(): boolean {\n    return (\n      this.resolvedMode !== 'mobile' &&\n      normalizeShellGradientPreset(this.gradientPreset) !== 'none'\n    );\n  }\n\n  @Listen('keydown', { target: 'window', capture: true })\n  handleWindowKeyDown(e: KeyboardEvent) {\n    if (!this.shortcutsEnabled) return;\n    if (isEditableShortcutTarget(e.target)) return;\n\n    const action = resolveShellShortcut(e);\n    if (!action) return;\n\n    e.preventDefault();\n\n    const panel = this.el.querySelector('ds-panel-nav') as HTMLDsPanelNavElement | null;\n    const tools = this.el.querySelector('ds-shell-tools, ds-panel-tools') as\n      | (HTMLElement & {\n          closeDrawer?: () => Promise<void>;\n          activateTool?: (id: PanelToolsToolId) => Promise<void>;\n        })\n      | null;\n\n    if (action === 'toggle-panel-nav') {\n      void panel?.toggleCollapsed();\n      return;\n    }\n\n    if (action === 'close-panel-tools') {\n      void tools?.closeDrawer?.();\n      return;\n    }\n\n    if (action.startsWith('open-tool:') && tools) {\n      const toolId = action.slice('open-tool:'.length) as PanelToolsToolId;\n      void tools.activateTool?.(toolId);\n    }\n  }\n\n  private syncChrome() {\n    const panelNav = this.el.querySelector('ds-panel-nav') as HTMLElement | null;\n    const bar = this.el.querySelector('ds-bar-nav') as HTMLElement | null;\n    const targets = [this.el, panelNav, bar].filter((el): el is HTMLElement => el !== null);\n\n    const clearLayoutVars = () => {\n      if (panelNav) panelNav.style.removeProperty(SHELL_GRADIENT_POSITION_PANEL_VAR);\n      if (bar) bar.style.removeProperty(SHELL_GRADIENT_POSITION_BAR_VAR);\n    };\n\n    const preset = normalizeShellGradientPreset(this.gradientPreset);\n    if (preset === 'none' || this.resolvedMode === 'mobile') {\n      this.clearGradientPaintVars(targets);\n      clearLayoutVars();\n      return;\n    }\n\n    const viewport = this.resolveViewportDimensions();\n    const panelWidth = this.resolvePanelWidthPx(panelNav);\n\n    const panelPosition = shellGradientPositionPanel();\n    const barPosition = shellGradientPositionBar(panelWidth);\n\n    this.syncChromeLayoutVars(panelNav, bar, panelPosition, barPosition);\n\n    const image = buildShellRadialGradient(preset);\n\n    const size = shellGradientSize({\n      width: viewport.width,\n      height: viewport.height,\n    });\n    const opacity = shellGradientPresetOpacity(preset);\n\n    for (const target of targets) {\n      if (target === this.el) {\n        this.applyGradientVars(target, {\n          [SHELL_GRADIENT_IMAGE_VAR]: image,\n          [SHELL_GRADIENT_SIZE_VAR]: size,\n          [SHELL_GRADIENT_POSITION_PANEL_VAR]: panelPosition,\n          [SHELL_GRADIENT_POSITION_BAR_VAR]: barPosition,\n          [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        });\n        continue;\n      }\n\n      const isBar = target.tagName.toLowerCase() === 'ds-bar-nav';\n      this.applyGradientVars(target, {\n        [SHELL_GRADIENT_IMAGE_VAR]: image,\n        [SHELL_GRADIENT_SIZE_VAR]: size,\n        [SHELL_GRADIENT_OPACITY_VAR]: opacity,\n        [SHELL_GRADIENT_POSITION_PANEL_VAR]: isBar ? null : panelPosition,\n        [SHELL_GRADIENT_POSITION_BAR_VAR]: isBar ? barPosition : null,\n      });\n    }\n  }\n\n  render() {\n    const chromeActive = this.chromeLayerActive();\n    const mobile = this.resolvedMode === 'mobile';\n    const mobileToolActive = mobile && this.mobileDestination !== 'area';\n    const mobileStageBlocked = mobile && (mobileToolActive || this.mobileNavigationOpen);\n    const fullscreen = !mobile && this.toolsFullscreen;\n    const shellCls: Record<string, boolean> = {\n      'shell-app': true,\n      'shell-app--gradient': chromeActive,\n      [`shell-app--${this.navStyle}`]: true,\n      [`shell-app--${this.resolvedMode}`]: true,\n      'shell-app--tools-fullscreen': fullscreen,\n      'shell-app--mobile-tool-active': mobileToolActive,\n      'shell-app--mobile-navigation-open': mobile && this.mobileNavigationOpen,\n    };\n\n    return (\n      <Host class={shellCls} responsive-mode={this.resolvedMode}>\n        <div class=\"shell-app__row\">\n          <div class=\"shell-app__chrome\" aria-hidden=\"true\" />\n          <div class=\"shell-app__panel\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n            <slot name=\"panel\" />\n          </div>\n          <div class=\"shell-app__main\">\n            <div class=\"shell-app__bar\" aria-hidden={fullscreen ? 'true' : undefined} inert={fullscreen ? true : undefined}>\n              <slot name=\"bar\" />\n            </div>\n            <div\n              class=\"shell-app__mobile-section\"\n              hidden={!mobile || this.mobileDestination !== 'area' || this.mobileNavigationOpen}\n            >\n              <slot name=\"mobile-section-nav\" />\n            </div>\n            <div\n              class=\"shell-app__tools\"\n              aria-hidden={mobile && (!mobileToolActive || this.mobileNavigationOpen) ? 'true' : undefined}\n              inert={mobile && (!mobileToolActive || this.mobileNavigationOpen) ? true : undefined}\n              hidden={mobile && !mobileToolActive}\n            >\n              <slot name=\"tools\" />\n            </div>\n            <div\n              class=\"shell-app__content\"\n              aria-hidden={fullscreen || mobileStageBlocked ? 'true' : undefined}\n              inert={fullscreen || mobileStageBlocked ? true : undefined}\n            >\n              <slot />\n            </div>\n            <div\n              class=\"shell-app__mobile-navigation\"\n              hidden={!mobile || !this.mobileNavigationOpen}\n              aria-hidden={mobile && this.mobileNavigationOpen ? undefined : 'true'}\n              inert={mobile && this.mobileNavigationOpen ? undefined : true}\n            >\n              <slot name=\"mobile-navigation\" />\n            </div>\n            <div class=\"shell-app__mobile-bar\" hidden={!mobile}>\n              <slot name=\"mobile-bar\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as i,a as c,t as r}from"./index.js";import{D as a,n,s as d}from"./p-D1HFMTdC.js";import{d as h}from"./p-Bi_bxbih.js";const o=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}`;const l=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value=a;this.groupLabel="Shell gradient theme";this.handleChange=s=>{const e=n(s);if(e===n(this.value))return;this.value=e;this.dsChange.emit(e)}}render(){return i(c,{key:"9599dbade42881937130d182b261ff8c76240a56"},i("ds-swatch-picker",{key:"862af33377043c087c447f4cf107de4d02ec106e",value:n(this.value),groupLabel:this.groupLabel,sections:d(),onDsChange:s=>{s.stopPropagation();this.handleChange(s.detail)}}))}static get style(){return o()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-picker","ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-shell-gradient-picker":if(!customElements.get(r(s))){customElements.define(r(s),l)}break;case"ds-swatch-picker":if(!customElements.get(r(s))){h()}break}}))}p();const f=l;const u=p;export{f as DsShellGradientPicker,u as defineCustomElement};
+import{p as s,H as e,c as t,h as i,a as c,t as r}from"./index.js";import{D as a,n,s as o}from"./p-D1HFMTdC.js";import{d}from"./p-Biz6xo-z.js";const h=()=>`.sc-ds-shell-gradient-picker-h{display:block;width:100%}`;const l=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value=a;this.groupLabel="Shell gradient theme";this.handleChange=s=>{const e=n(s);if(e===n(this.value))return;this.value=e;this.dsChange.emit(e)}}render(){return i(c,{key:"8ad5dfa4c3fb2b80380459ee46f557e780421017"},i("ds-swatch-picker",{key:"e9ccdec0818303ae512448cfcd9e8243803bf657",value:n(this.value),groupLabel:this.groupLabel,sections:o(),onDsChange:s=>{s.stopPropagation();this.handleChange(s.detail)}}))}static get style(){return h()}},[2,"ds-shell-gradient-picker",{value:[1537],groupLabel:[1,"group-label"]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-shell-gradient-picker","ds-swatch-picker"];s.forEach((s=>{switch(s){case"ds-shell-gradient-picker":if(!customElements.get(r(s))){customElements.define(r(s),l)}break;case"ds-swatch-picker":if(!customElements.get(r(s))){d()}break}}))}p();const f=l;const u=p;export{f as DsShellGradientPicker,u as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-picker.js.map

package/dist/components/ds-shell-gradient-picker.js.map

@@ -1 +1 @@
-{"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","groupLabel","handleChange","normalized","normalizeShellGradientPreset","dsChange","emit","render","h","Host","key","sections","shellGradientPickerSections","onDsChange","event","stopPropagation","detail"],"sources":["src/wc/components/ShellGradientPicker/ShellGradientPicker.css?tag=ds-shell-gradient-picker&encapsulation=scoped","src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../ShellGradientSwatch/shell-gradient-swatch-types';\nimport { shellGradientPickerSections } from '../../shell/shell-gradient-presets';\n\n/** @deprecated Use `ds-swatch-picker` with shell preset options. */\n@Component({\n  tag: 'ds-shell-gradient-picker',\n  styleUrl: 'ShellGradientPicker.css',\n  scoped: true,\n})\nexport class ShellGradientPicker {\n  /** Active shell wash preset. */\n  @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n  @Prop() groupLabel: string = 'Shell gradient theme';\n\n  @Event() dsChange!: EventEmitter<ShellGradientPreset>;\n\n  private handleChange = (value: string) => {\n    const normalized = normalizeShellGradientPreset(value);\n    if (normalized === normalizeShellGradientPreset(this.value)) return;\n    this.value = normalized;\n    this.dsChange.emit(normalized);\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-swatch-picker\n          value={normalizeShellGradientPreset(this.value)}\n          groupLabel={this.groupLabel}\n          sections={shellGradientPickerSections()}\n          onDsChange={(event: CustomEvent<string>) => {\n            event.stopPropagation();\n            this.handleChange(event.detail);\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"mJAAA,MAAMA,EAAyB,IAAM,2D,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EACMF,KAAAG,WAAqB,uBAIrBH,KAAAI,aAAgBH,IACtB,MAAMI,EAAaC,EAA6BL,GAChD,GAAII,IAAeC,EAA6BN,KAAKC,OAAQ,OAC7DD,KAAKC,MAAQI,EACbL,KAAKO,SAASC,KAAKH,EAAW,CAkBjC,CAfC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEX,MAAOK,EAA6BN,KAAKC,OACzCE,WAAYH,KAAKG,WACjBU,SAAUC,IACVC,WAAaC,IACXA,EAAMC,kBACNjB,KAAKI,aAAaY,EAAME,OAAO,I","ignoreList":[]}
+{"version":3,"names":["shellGradientPickerCss","ShellGradientPicker","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","DEFAULT_SHELL_GRADIENT_PRESET","groupLabel","handleChange","normalized","normalizeShellGradientPreset","dsChange","emit","render","h","Host","key","sections","shellGradientPickerSections","onDsChange","event","stopPropagation","detail"],"sources":["src/wc/components/ShellGradientPicker/ShellGradientPicker.css?tag=ds-shell-gradient-picker&encapsulation=scoped","src/wc/components/ShellGradientPicker/ShellGradientPicker.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\nimport {\n  DEFAULT_SHELL_GRADIENT_PRESET,\n  normalizeShellGradientPreset,\n  type ShellGradientPreset,\n} from '../ShellGradientSwatch/shell-gradient-swatch-types';\nimport { shellGradientPickerSections } from '../../shell/shell-gradient-presets';\n\n/** @deprecated Use `ds-swatch-picker` with shell preset options. */\n@Component({\n  tag: 'ds-shell-gradient-picker',\n  styleUrl: 'ShellGradientPicker.css',\n  scoped: true,\n})\nexport class ShellGradientPicker {\n  /** Active shell wash preset. */\n  @Prop({ mutable: true, reflect: true }) value: ShellGradientPreset =\n    DEFAULT_SHELL_GRADIENT_PRESET;\n  @Prop() groupLabel: string = 'Shell gradient theme';\n\n  @Event() dsChange!: EventEmitter<ShellGradientPreset>;\n\n  private handleChange = (value: string) => {\n    const normalized = normalizeShellGradientPreset(value);\n    if (normalized === normalizeShellGradientPreset(this.value)) return;\n    this.value = normalized;\n    this.dsChange.emit(normalized);\n  };\n\n  render() {\n    return (\n      <Host>\n        <ds-swatch-picker\n          value={normalizeShellGradientPreset(this.value)}\n          groupLabel={this.groupLabel}\n          sections={shellGradientPickerSections()}\n          onDsChange={(event: CustomEvent<string>) => {\n            event.stopPropagation();\n            this.handleChange(event.detail);\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"mappings":"8IAAA,MAAMA,EAAyB,IAAM,2D,MCcxBC,EAAmBC,EAAA,MAAAD,UAAAE,EALhC,WAAAC,CAAAC,G,6EAO0CC,KAAAC,MACtCC,EACMF,KAAAG,WAAqB,uBAIrBH,KAAAI,aAAgBH,IACtB,MAAMI,EAAaC,EAA6BL,GAChD,GAAII,IAAeC,EAA6BN,KAAKC,OAAQ,OAC7DD,KAAKC,MAAQI,EACbL,KAAKO,SAASC,KAAKH,EAAW,CAkBjC,CAfC,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEX,MAAOK,EAA6BN,KAAKC,OACzCE,WAAYH,KAAKG,WACjBU,SAAUC,IACVC,WAAaC,IACXA,EAAMC,kBACNjB,KAAKI,aAAaY,EAAME,OAAO,I","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as a,a as i,t as n}from"./index.js";import{D as r,S as c,a as l,b as d}from"./p-D1HFMTdC.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-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible::after,.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-h,.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-h::after,.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.5;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-secondary);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=r;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"3c5ebc7313ed505169ffa45fbe865cea3ced7270"},a("button",{key:"fa7bd822defa9a7e4ee1bc39e059969a1ce21b3c",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(this.preset)},"aria-label":s,role:"radio","aria-checked":this.selected?"true":"false",tabIndex:this.selected?0:-1,disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"8c2420f275a0dff17fa64148d436bc23582f71b0",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"b59e206e57e858554a124a7719ab84cff2ec09b6",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"154cf832f0f2d506afb6ee78b8eaffe83d371e5d",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"a8182ee4bac662abe848867f7a7a00e1ce028dfe",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"72ceb340169c790f459219ed01f73d64654b557c",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(n(s))){customElements.define(n(s),h)}break}}))}g();const w=h;const f=g;export{w as DsShellGradientSwatch,f as defineCustomElement};
+import{p as s,H as e,c as t,h as a,a as i,t as n}from"./index.js";import{D as r,S as c,a as l,b as d}from"./p-D1HFMTdC.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-h:focus-visible,.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-h,.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-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-gradient-swatch:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-gradient-swatch-h:focus-visible::after,.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-h,.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-h::after,.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.5;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-secondary);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=r;this.selected=false;this.isInactive=false;this.ariaLabel=null;this.handleClick=()=>{if(this.isInactive)return;this.dsSelect.emit(this.preset)}}render(){const s=this.ariaLabel??c[this.preset];return a(i,{key:"9ae633b06b4458cee5db0e8f976c949720f6f342"},a("button",{key:"0f1874dcd74d35cbef36de564f29bee668500ed0",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(this.preset)},"aria-label":s,role:"radio","aria-checked":this.selected?"true":"false",tabIndex:this.selected?0:-1,disabled:this.isInactive,onClick:this.handleClick},a("span",{key:"e9965bc7801c3a90b0a7b51b467e90495b6e5bda",class:"shell-gradient-swatch__fill","aria-hidden":"true"}),a("span",{key:"4b5bb5ce2354c6282a8b772e34edc4982df3bcb4",class:"shell-gradient-swatch__border","aria-hidden":"true"}),a("span",{key:"80f2e2bc841cf16352424a2481fe7e8e56f09962",class:"shell-gradient-swatch__interaction","aria-hidden":"true"}),a("span",{key:"fb838a9c84d4495b83c388fe8493c1a5465584c0",class:"shell-gradient-swatch__halo","aria-hidden":"true"}),a("span",{key:"c9531dec5ee9a68cfa44f2881cfdee0c82d0ce4c",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(n(s))){customElements.define(n(s),h)}break}}))}g();const w=h;const f=g;export{w as DsShellGradientSwatch,f as defineCustomElement};
 //# sourceMappingURL=ds-shell-gradient-swatch.js.map

package/dist/components/ds-shell-mobile-bar.d.ts

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

package/dist/components/ds-shell-mobile-bar.js

@@ -0,0 +1,2 @@
+import{p as i,H as e,c as s,h as o,a as r,t as n}from"./index.js";import{s as t}from"./p-BrusnEYP.js";import{d as a}from"./p-BAfG3M8z.js";import{d as l}from"./p-BwGnhInj.js";const c=()=>`.sc-ds-shell-mobile-bar-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-mobile-bar-h:focus-visible,.ds-focus-ring.sc-ds-shell-mobile-bar: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-mobile-bar-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-bar{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-mobile-bar-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-mobile-bar:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-mobile-bar-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-mobile-bar: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-mobile-bar-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-bar::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-shell-mobile-bar-h,.ds-interaction-fill.sc-ds-shell-mobile-bar{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-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-shell-mobile-bar-h::before,.ds-interaction-fill.sc-ds-shell-mobile-bar::before,.ds-interaction-fill.sc-ds-shell-mobile-bar-h::after,.ds-interaction-fill.sc-ds-shell-mobile-bar::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-shell-mobile-bar-h::before,.ds-interaction-fill.sc-ds-shell-mobile-bar::before{z-index:1}.ds-interaction-fill.sc-ds-shell-mobile-bar-h::after,.ds-interaction-fill.sc-ds-shell-mobile-bar::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-shell-mobile-bar-h,.ds-interaction-fill--bordered.sc-ds-shell-mobile-bar{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-shell-mobile-bar-h::before,.ds-interaction-fill--selected.sc-ds-shell-mobile-bar::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--selected.sc-ds-shell-mobile-bar{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-shell-mobile-bar-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-bar:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-shell-mobile-bar-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-bar:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-shell-mobile-bar-h>.ds-interaction-fill__content.sc-ds-shell-mobile-bar,.ds-interaction-fill.sc-ds-shell-mobile-bar>.ds-interaction-fill__content.sc-ds-shell-mobile-bar,.ds-interaction-fill__content.sc-ds-shell-mobile-bar{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-faint.sc-ds-shell-mobile-bar{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-medium.sc-ds-shell-mobile-bar{--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-shell-mobile-bar-h,.ds-interaction-fill--on-bold.sc-ds-shell-mobile-bar{--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-shell-mobile-bar-h,.ds-interaction-fill--on-strong.sc-ds-shell-mobile-bar{--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-translucent.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-media.sc-ds-shell-mobile-bar{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-bar-h,.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-bar{--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-shell-mobile-bar-h,.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-bar{--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)}.sc-ds-shell-mobile-bar-h{display:block;min-width:0;background:var(--color-background-primary);color:var(--color-foreground-secondary)}.shell-mobile-bar.sc-ds-shell-mobile-bar{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));align-items:stretch;min-width:0;padding:var(--dimension-space-050) var(--dimension-space-050)     max(var(--dimension-space-050), env(safe-area-inset-bottom));border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary);box-sizing:border-box}.shell-mobile-bar__item.sc-ds-shell-mobile-bar{appearance:none;min-width:0;min-height:var(--dimension-size-600);padding:var(--dimension-space-050) var(--dimension-space-025);border:0;border-radius:var(--dimension-radius-100);background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--dimension-space-025);cursor:pointer}.shell-mobile-bar__item--selected.sc-ds-shell-mobile-bar{color:var(--color-foreground-primary)}.shell-mobile-bar__item.sc-ds-shell-mobile-bar ds-text.sc-ds-shell-mobile-bar{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.shell-mobile-bar__icon.sc-ds-shell-mobile-bar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-iconography-md);height:var(--dimension-iconography-md)}.shell-mobile-bar__dot.sc-ds-shell-mobile-bar{position:absolute;inset-block-start:calc(var(--dimension-space-025) * -1);inset-inline-end:calc(var(--dimension-space-025) * -1);width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half);background:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-background-primary)}`;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsNavigationToggle=s(this,"dsNavigationToggle");this.dsDestinationChange=s(this,"dsDestinationChange");this.activeDestination="area";this.currentArea={id:"tracking",icon:"MapPage",label:"Tracking"};this.navigationExpanded=false;this.menuLabel="Menu";this.searchLabel="Search";this.agentsLabel="Agents";this.inboxLabel="Inbox";this.searchDot=false;this.agentsDot=false;this.inboxDot=false}destinationConfig(){return[{id:"area",icon:this.currentArea.icon||"MapPage",label:this.currentArea.label||"Area",dot:false},{id:"search",icon:"MagnifyingGlass",label:this.searchLabel,dot:this.searchDot},{id:"agents",icon:"AI",label:this.agentsLabel,dot:this.agentsDot},{id:"inbox",icon:"Inbox",label:this.inboxLabel,dot:this.inboxDot}]}selectDestination(i){if(!t(this.activeDestination,i,this.navigationExpanded)){return}this.dsDestinationChange.emit({destination:i})}async focusDestination(i){const e=this.el.querySelector(`#${i==="navigation"?"ds-shell-mobile-navigation-trigger":`ds-shell-mobile-${i}-trigger`}`);e?.focus({preventScroll:true})}renderDestination(i){const e=!this.navigationExpanded&&i.id===this.activeDestination;return o("button",{id:`ds-shell-mobile-${i.id}-trigger`,type:"button",class:{"shell-mobile-bar__item":true,"shell-mobile-bar__item--selected":e,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":e},"aria-current":e?"page":undefined,onClick:()=>this.selectDestination(i.id)},o("span",{class:"shell-mobile-bar__icon"},o("ds-icon",{name:i.icon,size:"md",color:"inherit"}),i.dot&&o("span",{class:"shell-mobile-bar__dot","aria-hidden":"true"})),o("ds-text",{as:"span",variant:"text-caption",color:"inherit"},i.label))}render(){return o(r,{key:"40c791b23a1cb0cd4e92b42ec758f56edef01913"},o("nav",{key:"9218fdf4db0ad0c74dcd3f73c487559d0a3d12d9",class:"shell-mobile-bar","aria-label":"Primary"},o("button",{key:"8f3bbd94b4bcd66438cb35f03c747e544e07df2f",id:"ds-shell-mobile-navigation-trigger",type:"button",class:{"shell-mobile-bar__item":true,"shell-mobile-bar__item--selected":this.navigationExpanded,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.navigationExpanded},"aria-expanded":String(this.navigationExpanded),"aria-controls":"ds-shell-mobile-navigation",onClick:()=>this.dsNavigationToggle.emit(!this.navigationExpanded)},o("span",{key:"fdfbe7de5b49cf7a65257146d066aa99415e6e08",class:"shell-mobile-bar__icon"},o("ds-icon",{key:"13edbce022ef3c86523cf33f82fff9397e421434",name:"Hamburger",size:"md",color:"inherit"})),o("ds-text",{key:"95d218fc70895003328fbc0eb75216316cc31401",as:"span",variant:"text-caption",color:"inherit"},this.menuLabel)),this.destinationConfig().map((i=>this.renderDestination(i)))))}get el(){return this}static get style(){return c()}},[2,"ds-shell-mobile-bar",{activeDestination:[1,"active-destination"],currentArea:[16],navigationExpanded:[4,"navigation-expanded"],menuLabel:[1,"menu-label"],searchLabel:[1,"search-label"],agentsLabel:[1,"agents-label"],inboxLabel:[1,"inbox-label"],searchDot:[4,"search-dot"],agentsDot:[4,"agents-dot"],inboxDot:[4,"inbox-dot"],focusDestination:[64]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-shell-mobile-bar","ds-icon","ds-text"];i.forEach((i=>{switch(i){case"ds-shell-mobile-bar":if(!customElements.get(n(i))){customElements.define(n(i),d)}break;case"ds-icon":if(!customElements.get(n(i))){a()}break;case"ds-text":if(!customElements.get(n(i))){l()}break}}))}b();const h=d;const f=b;export{h as DsShellMobileBar,f as defineCustomElement};
+//# sourceMappingURL=ds-shell-mobile-bar.js.map

package/dist/components/ds-shell-mobile-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shellMobileBarCss","ShellMobileBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","navigationExpanded","menuLabel","searchLabel","agentsLabel","inboxLabel","searchDot","agentsDot","inboxDot","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","focusDestination","target","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","as","variant","render","Host","key","String","dsNavigationToggle","map"],"sources":["src/wc/components/ShellMobileBar/ShellMobileBar.css?tag=ds-shell-mobile-bar&encapsulation=scoped","src/wc/components/ShellMobileBar/ShellMobileBar.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n}\n\n.shell-mobile-bar {\n  display: grid;\n  grid-template-columns: repeat(5, minmax(0, 1fr));\n  align-items: stretch;\n  min-width: 0;\n  padding: var(--dimension-space-050) var(--dimension-space-050)\n    max(var(--dimension-space-050), env(safe-area-inset-bottom));\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-primary);\n  box-sizing: border-box;\n}\n\n.shell-mobile-bar__item {\n  appearance: none;\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  padding: var(--dimension-space-050) var(--dimension-space-025);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: transparent;\n  color: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n  cursor: pointer;\n}\n\n.shell-mobile-bar__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-bar__item ds-text {\n  display: block;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.shell-mobile-bar__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-md);\n  height: var(--dimension-iconography-md);\n}\n\n.shell-mobile-bar__dot {\n  position: absolute;\n  inset-block-start: calc(var(--dimension-space-025) * -1);\n  inset-inline-end: calc(var(--dimension-space-025) * -1);\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-background-primary);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type ShellMobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { ShellMobileBarDestinationDetail } from './shell-mobile-bar-types';\n\ninterface DestinationConfig {\n  id: ShellMobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\n@Component({\n  tag: 'ds-shell-mobile-bar',\n  styleUrl: 'ShellMobileBar.css',\n  scoped: true,\n})\nexport class ShellMobileBar {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: ShellMobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() navigationExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() searchDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n\n  @Event() dsNavigationToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<ShellMobileBarDestinationDetail>;\n\n  private destinationConfig(): DestinationConfig[] {\n    return [\n      {\n        id: 'area',\n        icon: this.currentArea.icon || 'MapPage',\n        label: this.currentArea.label || 'Area',\n        dot: false,\n      },\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n      { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n    ];\n  }\n\n  private selectDestination(destination: ShellMobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(\n        this.activeDestination,\n        destination,\n        this.navigationExpanded\n      )\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n  }\n\n  @Method()\n  async focusDestination(destination: ShellMobileDestination | 'navigation') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'navigation'\n          ? 'ds-shell-mobile-navigation-trigger'\n          : `ds-shell-mobile-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.navigationExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-shell-mobile-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'shell-mobile-bar__item': true,\n          'shell-mobile-bar__item--selected': selected,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n          'ds-interaction-fill--selected': selected,\n        }}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n      >\n        <span class=\"shell-mobile-bar__icon\">\n          <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n          {item.dot && (\n            <span class=\"shell-mobile-bar__dot\" aria-hidden=\"true\" />\n          )}\n        </span>\n        <ds-text as=\"span\" variant=\"text-caption\" color=\"inherit\">\n          {item.label}\n        </ds-text>\n      </button>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <nav class=\"shell-mobile-bar\" aria-label=\"Primary\">\n          <button\n            id=\"ds-shell-mobile-navigation-trigger\"\n            type=\"button\"\n            class={{\n              'shell-mobile-bar__item': true,\n              'shell-mobile-bar__item--selected': this.navigationExpanded,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': this.navigationExpanded,\n            }}\n            aria-expanded={String(this.navigationExpanded)}\n            aria-controls=\"ds-shell-mobile-navigation\"\n            onClick={() => this.dsNavigationToggle.emit(!this.navigationExpanded)}\n          >\n            <span class=\"shell-mobile-bar__icon\">\n              <ds-icon name=\"Hamburger\" size=\"md\" color=\"inherit\" />\n            </span>\n            <ds-text\n              as=\"span\"\n              variant=\"text-caption\"\n              color=\"inherit\"\n            >\n              {this.menuLabel}\n            </ds-text>\n          </button>\n          {this.destinationConfig().map(item => this.renderDestination(item))}\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAoB,IAAM,ulR,MC6BnBC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,wJAQUC,KAAAC,kBAA4C,OAC5CD,KAAAE,YAA4B,CAClCC,GAAI,WACJC,KAAM,UACNC,MAAO,YAEDL,KAAAM,mBAA8B,MAC9BN,KAAAO,UAAoB,OACpBP,KAAAQ,YAAsB,SACtBR,KAAAS,YAAsB,SACtBT,KAAAU,WAAqB,QACrBV,KAAAW,UAAqB,MACrBX,KAAAY,UAAqB,MACrBZ,KAAAa,SAAoB,KA2G7B,CAtGS,iBAAAC,GACN,MAAO,CACL,CACEX,GAAI,OACJC,KAAMJ,KAAKE,YAAYE,MAAQ,UAC/BC,MAAOL,KAAKE,YAAYG,OAAS,OACjCU,IAAK,OAEP,CAAEZ,GAAI,SAAUC,KAAM,kBAAmBC,MAAOL,KAAKQ,YAAaO,IAAKf,KAAKW,WAC5E,CAAER,GAAI,SAAUC,KAAM,KAAMC,MAAOL,KAAKS,YAAaM,IAAKf,KAAKY,WAC/D,CAAET,GAAI,QAASC,KAAM,QAASC,MAAOL,KAAKU,WAAYK,IAAKf,KAAKa,U,CAI5D,iBAAAG,CAAkBC,GACxB,IACGC,EACClB,KAAKC,kBACLgB,EACAjB,KAAKM,oBAEP,CACA,M,CAEFN,KAAKmB,oBAAoBC,KAAK,CAAEH,e,CAIlC,sBAAMI,CAAiBJ,GACrB,MAAMK,EAAStB,KAAKuB,GAAGC,cACrB,IACEP,IAAgB,aACZ,qCACA,mBAAmBA,eAG3BK,GAAQG,MAAM,CAAEC,cAAe,M,CAGzB,iBAAAC,CAAkBC,GACxB,MAAMC,GAAY7B,KAAKM,oBAAsBsB,EAAKzB,KAAOH,KAAKC,kBAC9D,OACE6B,EAAA,UACE3B,GAAI,mBAAmByB,EAAKzB,aAC5B4B,KAAK,SACLC,MAAO,CACL,yBAA0B,KAC1B,mCAAoCH,EACpC,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCA,GAClC,eACaA,EAAW,OAASI,UAClCC,QAAS,IAAMlC,KAAKgB,kBAAkBY,EAAKzB,KAE3C2B,EAAA,QAAME,MAAM,0BACVF,EAAA,WAASK,KAAMP,EAAKxB,KAAMgC,KAAK,KAAKC,MAAM,YACzCT,EAAKb,KACJe,EAAA,QAAME,MAAM,wBAAuB,cAAa,UAGpDF,EAAA,WAASQ,GAAG,OAAOC,QAAQ,eAAeF,MAAM,WAC7CT,EAAKvB,O,CAMd,MAAAmC,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,4CACHZ,EAAA,OAAAY,IAAA,2CAAKV,MAAM,mBAAkB,aAAY,WACvCF,EAAA,UAAAY,IAAA,2CACEvC,GAAG,qCACH4B,KAAK,SACLC,MAAO,CACL,yBAA0B,KAC1B,mCAAoChC,KAAKM,mBACzC,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCN,KAAKM,oBACvC,gBACcqC,OAAO3C,KAAKM,oBAAmB,gBAChC,6BACd4B,QAAS,IAAMlC,KAAK4C,mBAAmBxB,MAAMpB,KAAKM,qBAElDwB,EAAA,QAAAY,IAAA,2CAAMV,MAAM,0BACVF,EAAA,WAAAY,IAAA,2CAASP,KAAK,YAAYC,KAAK,KAAKC,MAAM,aAE5CP,EAAA,WAAAY,IAAA,2CACEJ,GAAG,OACHC,QAAQ,eACRF,MAAM,WAELrC,KAAKO,YAGTP,KAAKc,oBAAoB+B,KAAIjB,GAAQ5B,KAAK2B,kBAAkBC,M","ignoreList":[]}

package/dist/components/ds-shell-mobile-nav.d.ts

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

package/dist/components/ds-shell-mobile-nav.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as i,h as n,a as o,t as a}from"./index.js";import{d as t}from"./p-yhj1lIPx.js";import{d as l}from"./p-CH6cNXXF.js";import{d as r}from"./p-BAfG3M8z.js";import{d}from"./p-PZ6R_nGI.js";import{d as c}from"./p-BwGnhInj.js";const h=()=>`.ds-control--md.sc-ds-shell-mobile-nav-h,.ds-control--md.sc-ds-shell-mobile-nav,.ds-control--sm.sc-ds-shell-mobile-nav-h,.ds-control--sm.sc-ds-shell-mobile-nav,.ds-control--xs.sc-ds-shell-mobile-nav-h,.ds-control--xs.sc-ds-shell-mobile-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-shell-mobile-nav-h,.ds-control--md.sc-ds-shell-mobile-nav{--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--sm.sc-ds-shell-mobile-nav-h,.ds-control--sm.sc-ds-shell-mobile-nav{--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--xs.sc-ds-shell-mobile-nav-h,.ds-control--xs.sc-ds-shell-mobile-nav{--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:0}.sc-ds-shell-mobile-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-mobile-nav-h:focus-visible,.ds-focus-ring.sc-ds-shell-mobile-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-mobile-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-mobile-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-mobile-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-mobile-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-nav::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-shell-mobile-nav-h,.ds-interaction-fill.sc-ds-shell-mobile-nav{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-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-shell-mobile-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-nav::before,.ds-interaction-fill.sc-ds-shell-mobile-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-shell-mobile-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-nav::before{z-index:1}.ds-interaction-fill.sc-ds-shell-mobile-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-nav::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-shell-mobile-nav-h,.ds-interaction-fill--bordered.sc-ds-shell-mobile-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-shell-mobile-nav-h::before,.ds-interaction-fill--selected.sc-ds-shell-mobile-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--selected.sc-ds-shell-mobile-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-shell-mobile-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-shell-mobile-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-shell-mobile-nav-h>.ds-interaction-fill__content.sc-ds-shell-mobile-nav,.ds-interaction-fill.sc-ds-shell-mobile-nav>.ds-interaction-fill__content.sc-ds-shell-mobile-nav,.ds-interaction-fill__content.sc-ds-shell-mobile-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-faint.sc-ds-shell-mobile-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-medium.sc-ds-shell-mobile-nav{--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-shell-mobile-nav-h,.ds-interaction-fill--on-bold.sc-ds-shell-mobile-nav{--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-shell-mobile-nav-h,.ds-interaction-fill--on-strong.sc-ds-shell-mobile-nav{--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-translucent.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-media.sc-ds-shell-mobile-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-nav{--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-shell-mobile-nav-h,.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-nav{--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)}.sc-ds-shell-mobile-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-shell-mobile-nav-h:not([open]){display:none}.shell-mobile-nav.sc-ds-shell-mobile-nav{display:grid;grid-template-rows:auto minmax(0, 1fr) auto;height:100%;min-height:0;background:var(--color-background-primary)}.shell-mobile-nav__header.sc-ds-shell-mobile-nav{display:grid;gap:var(--dimension-space-100);padding:var(--dimension-space-200);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.shell-mobile-nav__body.sc-ds-shell-mobile-nav{min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--dimension-space-100)}.shell-mobile-nav__group.sc-ds-shell-mobile-nav+.shell-mobile-nav__group.sc-ds-shell-mobile-nav{margin-block-start:var(--dimension-space-200)}.shell-mobile-nav__group-label.sc-ds-shell-mobile-nav{display:block;padding:0 var(--dimension-space-100) var(--dimension-space-050)}.shell-mobile-nav__items.sc-ds-shell-mobile-nav{display:grid;gap:var(--dimension-space-025)}.shell-mobile-nav__area.sc-ds-shell-mobile-nav,.shell-mobile-nav__auxiliary.sc-ds-shell-mobile-nav{appearance:none;width:100%;border:0;background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-content-gap);padding-inline:var(--dimension-space-100);cursor:pointer;text-align:start}.shell-mobile-nav__area--selected.sc-ds-shell-mobile-nav{color:var(--color-foreground-primary)}.shell-mobile-nav__dot.sc-ds-shell-mobile-nav{width:var(--dimension-size-075);height:var(--dimension-size-075);margin-inline-start:auto;border-radius:var(--dimension-radius-half);background:var(--color-background-bold-brand)}.shell-mobile-nav__footer.sc-ds-shell-mobile-nav{display:grid;gap:var(--dimension-space-025);padding:var(--dimension-space-100);border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}`;const v=[{id:"dashboard",label:"Dashboard"},{id:"settings",label:"Settings"}];const b=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=i(this,"dsAreaSelect");this.dsBrowseContextChange=i(this,"dsBrowseContextChange");this.dsAuxiliarySelect=i(this,"dsAuxiliarySelect");this.dsClose=i(this,"dsClose");this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";this.heading="Navigation";this.navigationLabel="Application navigation";this.dashboardLabel="Dashboard";this.settingsLabel="Settings";this.accountLabel="Account";this.helpLabel="Help & Support";this.handleContextChange=e=>{const s=e.detail==="settings"?"settings":"dashboard";if(s===this.browseContext)return;this.dsBrowseContextChange.emit(s)}}get groups(){return this.browseContext==="settings"?this.settingsGroups:this.dashboardGroups}get items(){return this.groups.flatMap((e=>e.items))}get activeId(){return t(this.currentUrl,[...this.dashboardGroups.flatMap((e=>e.items)),...this.settingsGroups.flatMap((e=>e.items))])}handleOpenChange(e){if(!e)return;requestAnimationFrame((()=>{const e=this.el.querySelector('[aria-current="page"]');const s=this.el.querySelector(".shell-mobile-nav__area");(e??s)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}selectAuxiliary(e,s){this.dsAuxiliarySelect.emit({id:e,anchor:s.currentTarget})}renderGroup(e,s){return n("section",{class:"shell-mobile-nav__group","aria-labelledby":e.label?`mobile-nav-group-${e.id??s}`:undefined},e.label&&n("ds-text",{id:`mobile-nav-group-${e.id??s}`,class:"shell-mobile-nav__group-label",as:"h2",variant:"text-caption",color:"secondary"},e.label),n("div",{class:"shell-mobile-nav__items"},e.items.map((e=>{const s=e.id===this.activeId;return n("button",{type:"button",class:{"shell-mobile-nav__area":true,"shell-mobile-nav__area--selected":s,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":s},"aria-current":s?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},n("ds-icon",{name:e.icon,size:"md",color:"inherit"}),n("ds-text",{as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},e.label),e.dot&&n("span",{class:"shell-mobile-nav__dot","aria-hidden":"true"}))}))))}render(){const e=[{...v[0],label:this.dashboardLabel},{...v[1],label:this.settingsLabel}];return n(o,{key:"ac9d44755700a15982a9dbf95030fdc2cb94b42d","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},n("section",{key:"d1ab3c7297a000581441c0381ccf2ac99818b395",id:"ds-shell-mobile-navigation",class:"shell-mobile-nav","aria-label":this.navigationLabel},n("header",{key:"fb04504a2773c96cd75ae9485562083463881e5c",class:"shell-mobile-nav__header"},n("ds-text",{key:"244cf658112d889e47488a0eae2003f50a7e8553",as:"h1",variant:"text-title-medium",emphasis:true},this.heading),n("ds-tab-group",{key:"e8cd9a945f35aa0f915dbebcce0324d40c21d011",tabs:e,value:this.browseContext,"aria-label":"Navigation context",onDsChange:this.handleContextChange})),n("nav",{key:"1e9d3a87021750de6aa4838a19f9dcbb6b5526d8",class:"shell-mobile-nav__body","aria-label":this.navigationLabel},this.groups.map(((e,s)=>this.renderGroup(e,s)))),n("footer",{key:"906862314bd16f93922e8e7feae19a699633b12b",class:"shell-mobile-nav__footer"},n("button",{key:"fcd5b86682cd18138e90e59711c6e9358eabe8dd",type:"button",class:"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill",onClick:e=>this.selectAuxiliary("help",e)},n("ds-icon",{key:"b6b2c85dfc23d299addfc0edc581adb95e8481e0",name:"CircleQuestion",size:"md",color:"inherit"}),n("ds-text",{key:"9006a64aafc472db6d8e7d01a365a2b632cd3de6",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},this.helpLabel)),n("button",{key:"e334dad947f59f3bc86c08efc0ed926017aa95c8",type:"button",class:"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill",onClick:e=>this.selectAuxiliary("account",e)},n("ds-icon",{key:"81a0d824511f13e75b726419ba089b7841364298",name:"Avatar",size:"md",color:"inherit"}),n("ds-text",{key:"632acdc5c31bb95237fe526a5d08c26b2069cbcd",as:"span",variant:"text-body-medium",emphasis:true,color:"inherit"},this.accountLabel)))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return h()}},[2,"ds-shell-mobile-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],heading:[1],navigationLabel:[1,"navigation-label"],dashboardLabel:[1,"dashboard-label"],settingsLabel:[1,"settings-label"],accountLabel:[1,"account-label"],helpLabel:[1,"help-label"]},[[0,"keydown","handleKeyDown"]],{open:[{handleOpenChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-shell-mobile-nav","ds-badge","ds-icon","ds-tab-group","ds-text"];e.forEach((e=>{switch(e){case"ds-shell-mobile-nav":if(!customElements.get(a(e))){customElements.define(a(e),b)}break;case"ds-badge":if(!customElements.get(a(e))){l()}break;case"ds-icon":if(!customElements.get(a(e))){r()}break;case"ds-tab-group":if(!customElements.get(a(e))){d()}break;case"ds-text":if(!customElements.get(a(e))){c()}break}}))}m();const u=b;const f=m;export{u as DsShellMobileNav,f as defineCustomElement};
+//# sourceMappingURL=ds-shell-mobile-nav.js.map

package/dist/components/ds-shell-mobile-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shellMobileNavCss","CONTEXT_TABS","id","label","ShellMobileNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","browseContext","dashboardGroups","settingsGroups","currentUrl","heading","navigationLabel","dashboardLabel","settingsLabel","accountLabel","helpLabel","handleContextChange","event","next","detail","dsBrowseContextChange","emit","groups","items","flatMap","group","activeId","deriveActiveIdFromUrl","handleOpenChange","requestAnimationFrame","selected","el","querySelector","first","focus","preventScroll","handleKeyDown","key","preventDefault","dsClose","selectAuxiliary","dsAuxiliarySelect","anchor","currentTarget","renderGroup","index","h","class","undefined","as","variant","color","map","item","type","onClick","dsAreaSelect","name","icon","size","emphasis","dot","render","contextTabs","Host","inert","tabs","value","onDsChange"],"sources":["src/wc/components/ShellMobileNav/ShellMobileNav.css?tag=ds-shell-mobile-nav&encapsulation=scoped","src/wc/components/ShellMobileNav/ShellMobileNav.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: var(--color-background-primary);\n}\n\n:host(:not([open])) {\n  display: none;\n}\n\n.shell-mobile-nav {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr) auto;\n  height: 100%;\n  min-height: 0;\n  background: var(--color-background-primary);\n}\n\n.shell-mobile-nav__header {\n  display: grid;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-200);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.shell-mobile-nav__body {\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  padding: var(--dimension-space-100);\n}\n\n.shell-mobile-nav__group + .shell-mobile-nav__group {\n  margin-block-start: var(--dimension-space-200);\n}\n\n.shell-mobile-nav__group-label {\n  display: block;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-050);\n}\n\n.shell-mobile-nav__items {\n  display: grid;\n  gap: var(--dimension-space-025);\n}\n\n.shell-mobile-nav__area,\n.shell-mobile-nav__auxiliary {\n  appearance: none;\n  width: 100%;\n  border: 0;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--ds-control-content-gap);\n  padding-inline: var(--dimension-space-100);\n  cursor: pointer;\n  text-align: start;\n}\n\n.shell-mobile-nav__area--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-nav__dot {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  margin-inline-start: auto;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n}\n\n.shell-mobile-nav__footer {\n  display: grid;\n  gap: var(--dimension-space-025);\n  padding: var(--dimension-space-100);\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { NavChromeStyle } from '../../shell/nav-chrome';\nimport { deriveActiveIdFromUrl } from '../PanelNav/panel-nav-utils';\nimport type { PanelNavGroup, PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type {\n  ShellMobileNavAuxiliaryDetail,\n  ShellMobileNavAuxiliaryId,\n} from './shell-mobile-nav-types';\n\nconst CONTEXT_TABS = [\n  { id: 'dashboard', label: 'Dashboard' },\n  { id: 'settings', label: 'Settings' },\n];\n\n@Component({\n  tag: 'ds-shell-mobile-nav',\n  styleUrl: 'ShellMobileNav.css',\n  scoped: true,\n})\nexport class ShellMobileNav {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) open: boolean = false;\n  @Prop() browseContext: NavChromeStyle = 'dashboard';\n  @Prop() dashboardGroups: PanelNavGroup[] = [];\n  @Prop() settingsGroups: PanelNavGroup[] = [];\n  @Prop() currentUrl: string = '';\n  @Prop() heading: string = 'Navigation';\n  @Prop() navigationLabel: string = 'Application navigation';\n  @Prop() dashboardLabel: string = 'Dashboard';\n  @Prop() settingsLabel: string = 'Settings';\n  @Prop() accountLabel: string = 'Account';\n  @Prop() helpLabel: string = 'Help & Support';\n\n  @Event() dsAreaSelect!: EventEmitter<string>;\n  @Event() dsBrowseContextChange!: EventEmitter<NavChromeStyle>;\n  @Event() dsAuxiliarySelect!: EventEmitter<ShellMobileNavAuxiliaryDetail>;\n  @Event() dsClose!: EventEmitter<void>;\n\n  private get groups(): PanelNavGroup[] {\n    return this.browseContext === 'settings' ? this.settingsGroups : this.dashboardGroups;\n  }\n\n  private get items(): PanelNavItem[] {\n    return this.groups.flatMap(group => group.items);\n  }\n\n  private get activeId(): string {\n    return deriveActiveIdFromUrl(this.currentUrl, [\n      ...this.dashboardGroups.flatMap(group => group.items),\n      ...this.settingsGroups.flatMap(group => group.items),\n    ]);\n  }\n\n  @Watch('open')\n  handleOpenChange(open: boolean) {\n    if (!open) return;\n    requestAnimationFrame(() => {\n      const selected = this.el.querySelector<HTMLElement>('[aria-current=\"page\"]');\n      const first = this.el.querySelector<HTMLElement>('.shell-mobile-nav__area');\n      (selected ?? first)?.focus({ preventScroll: true });\n    });\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open || event.key !== 'Escape') return;\n    event.preventDefault();\n    this.dsClose.emit();\n  }\n\n  private handleContextChange = (event: CustomEvent<string>) => {\n    const next = event.detail === 'settings' ? 'settings' : 'dashboard';\n    if (next === this.browseContext) return;\n    this.dsBrowseContextChange.emit(next);\n  };\n\n  private selectAuxiliary(id: ShellMobileNavAuxiliaryId, event: MouseEvent) {\n    this.dsAuxiliarySelect.emit({\n      id,\n      anchor: event.currentTarget as HTMLElement,\n    });\n  }\n\n  private renderGroup(group: PanelNavGroup, index: number) {\n    return (\n      <section class=\"shell-mobile-nav__group\" aria-labelledby={group.label ? `mobile-nav-group-${group.id ?? index}` : undefined}>\n        {group.label && (\n          <ds-text\n            id={`mobile-nav-group-${group.id ?? index}`}\n            class=\"shell-mobile-nav__group-label\"\n            as=\"h2\"\n            variant=\"text-caption\"\n            color=\"secondary\"\n          >\n            {group.label}\n          </ds-text>\n        )}\n        <div class=\"shell-mobile-nav__items\">\n          {group.items.map(item => {\n            const selected = item.id === this.activeId;\n            return (\n              <button\n                type=\"button\"\n                class={{\n                  'shell-mobile-nav__area': true,\n                  'shell-mobile-nav__area--selected': selected,\n                  'ds-control--md': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': true,\n                  'ds-interaction-fill--selected': selected,\n                }}\n                aria-current={selected ? 'page' : undefined}\n                onClick={() => this.dsAreaSelect.emit(item.id)}\n              >\n                <ds-icon name={item.icon} size=\"md\" color=\"inherit\" />\n                <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                  {item.label}\n                </ds-text>\n                {item.dot && <span class=\"shell-mobile-nav__dot\" aria-hidden=\"true\" />}\n              </button>\n            );\n          })}\n        </div>\n      </section>\n    );\n  }\n\n  render() {\n    const contextTabs = [\n      { ...CONTEXT_TABS[0], label: this.dashboardLabel },\n      { ...CONTEXT_TABS[1], label: this.settingsLabel },\n    ];\n\n    return (\n      <Host aria-hidden={this.open ? undefined : 'true'} inert={this.open ? undefined : true}>\n        <section\n          id=\"ds-shell-mobile-navigation\"\n          class=\"shell-mobile-nav\"\n          aria-label={this.navigationLabel}\n        >\n          <header class=\"shell-mobile-nav__header\">\n            <ds-text as=\"h1\" variant=\"text-title-medium\" emphasis>\n              {this.heading}\n            </ds-text>\n            <ds-tab-group\n              tabs={contextTabs}\n              value={this.browseContext}\n              aria-label=\"Navigation context\"\n              onDsChange={this.handleContextChange}\n            />\n          </header>\n\n          <nav class=\"shell-mobile-nav__body\" aria-label={this.navigationLabel}>\n            {this.groups.map((group, index) => this.renderGroup(group, index))}\n          </nav>\n\n          <footer class=\"shell-mobile-nav__footer\">\n            <button\n              type=\"button\"\n              class=\"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill\"\n              onClick={event => this.selectAuxiliary('help', event)}\n            >\n              <ds-icon name=\"CircleQuestion\" size=\"md\" color=\"inherit\" />\n              <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                {this.helpLabel}\n              </ds-text>\n            </button>\n            <button\n              type=\"button\"\n              class=\"shell-mobile-nav__auxiliary ds-control--md ds-focus-ring-inset ds-interaction-fill\"\n              onClick={event => this.selectAuxiliary('account', event)}\n            >\n              <ds-icon name=\"Avatar\" size=\"md\" color=\"inherit\" />\n              <ds-text as=\"span\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                {this.accountLabel}\n              </ds-text>\n            </button>\n          </footer>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-shell-mobile-section-nav.d.ts

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

package/dist/components/ds-shell-mobile-section-nav.js

@@ -0,0 +1,2 @@
+import{p as i,H as e,c as s,h as n,a as o,t}from"./index.js";import{p as r,d as a}from"./p-BOQnc-M4.js";import{g as l,i as c}from"./p-BQq26pt9.js";import{d}from"./p-BwGnhInj.js";const v=()=>`.sc-ds-shell-mobile-section-nav-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-shell-mobile-section-nav-h:focus-visible,.ds-focus-ring.sc-ds-shell-mobile-section-nav:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-shell-mobile-section-nav:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-shell-mobile-section-nav::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-shell-mobile-section-nav-h,.ds-interaction-fill.sc-ds-shell-mobile-section-nav{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-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::before,.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::before,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::before{z-index:1}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav::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-shell-mobile-section-nav-h,.ds-interaction-fill--bordered.sc-ds-shell-mobile-section-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav-h::before,.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--selected.sc-ds-shell-mobile-section-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-shell-mobile-section-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-shell-mobile-section-nav-h>.ds-interaction-fill__content.sc-ds-shell-mobile-section-nav,.ds-interaction-fill.sc-ds-shell-mobile-section-nav>.ds-interaction-fill__content.sc-ds-shell-mobile-section-nav,.ds-interaction-fill__content.sc-ds-shell-mobile-section-nav{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-faint.sc-ds-shell-mobile-section-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-medium.sc-ds-shell-mobile-section-nav{--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-shell-mobile-section-nav-h,.ds-interaction-fill--on-bold.sc-ds-shell-mobile-section-nav{--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-shell-mobile-section-nav-h,.ds-interaction-fill--on-strong.sc-ds-shell-mobile-section-nav{--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-translucent.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-translucent.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-inverted.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-media.sc-ds-shell-mobile-section-nav{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-section-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-shell-mobile-section-nav{--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-shell-mobile-section-nav-h,.ds-interaction-fill--on-navigation.sc-ds-shell-mobile-section-nav{--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)}.sc-ds-shell-mobile-section-nav-h{display:block;min-width:0;background:var(--color-background-primary);color:var(--color-foreground-secondary)}.shell-mobile-section-nav.sc-ds-shell-mobile-section-nav{min-width:0;min-height:var(--dimension-size-600);display:flex;align-items:center;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background:var(--color-background-primary)}.shell-mobile-section-nav__scroller.sc-ds-shell-mobile-section-nav{width:100%;min-width:0;min-height:var(--dimension-size-600);display:flex;align-items:center;gap:var(--dimension-space-050);padding-inline:var(--dimension-space-100);overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:none;box-sizing:border-box}.shell-mobile-section-nav__scroller.sc-ds-shell-mobile-section-nav::-webkit-scrollbar{display:none}.shell-mobile-section-nav__tab.sc-ds-shell-mobile-section-nav{appearance:none;flex:0 0 auto;min-height:var(--dimension-size-400);padding-inline:var(--dimension-space-100);border:0;border-radius:var(--dimension-radius-100);background:transparent;color:inherit;display:inline-flex;align-items:center;gap:var(--dimension-space-050);cursor:pointer}.shell-mobile-section-nav__tab--selected.sc-ds-shell-mobile-section-nav{color:var(--color-foreground-primary)}.shell-mobile-section-nav__tab.sc-ds-shell-mobile-section-nav:disabled{color:var(--color-foreground-tertiary);cursor:default}.shell-mobile-section-nav__divider.sc-ds-shell-mobile-section-nav{flex:0 0 auto;width:var(--dimension-stroke-width-012);height:var(--dimension-size-300);background:var(--color-border-tertiary)}.shell-mobile-section-nav__dot.sc-ds-shell-mobile-section-nav{width:var(--dimension-size-075);height:var(--dimension-size-075);border-radius:var(--dimension-radius-half);background:var(--color-background-bold-brand)}.shell-mobile-section-nav__heading.sc-ds-shell-mobile-section-nav{display:block;min-width:0;padding-inline:var(--dimension-space-200);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}`;const h=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.dsTabChange=s(this,"dsTabChange");this.tabs=[];this.tabsJson="";this.value="";this.basePath="";this.currentUrl="";this.navigationLabel="Section navigation";this.lastScrolledValue=""}get resolvedTabs(){return this.tabsJson?r(this.tabsJson,[]):this.tabs??[]}get urlState(){return a(this.currentUrl,this.basePath,this.resolvedTabs)}get effectiveValue(){if(this.currentUrl&&this.basePath)return this.urlState.value;return this.value}componentDidLoad(){this.scrollSelectedIntoView()}componentDidRender(){this.scrollSelectedIntoView()}scrollSelectedIntoView(){const i=this.effectiveValue;if(!i||i===this.lastScrolledValue)return;this.lastScrolledValue=i;requestAnimationFrame((()=>{this.el.querySelector(`[data-section-id="${CSS.escape(i)}"]`)?.scrollIntoView({block:"nearest",inline:"center"})}))}selectTab(i,e){if(e||i===this.effectiveValue)return;this.dsTabChange.emit(i)}render(){const i=this.resolvedTabs;const e=l(i);const s=e.length>0&&!this.urlState.hideTabs;return n(o,{key:"a58d17180c6dc3f22e6753970d9119432e9fb046"},n("nav",{key:"ca8a3153e1d34d283d1eb927683248d09d86b7cf",class:"shell-mobile-section-nav","aria-label":this.navigationLabel},s?n("div",{class:"shell-mobile-section-nav__scroller"},i.map(((i,e)=>{if(c(i)){return n("span",{class:"shell-mobile-section-nav__divider","aria-hidden":"true",key:`divider-${e}`})}const s=i.id===this.effectiveValue;return n("button",{type:"button",class:{"shell-mobile-section-nav__tab":true,"shell-mobile-section-nav__tab--selected":s,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"data-section-id":i.id,disabled:i.isInactive,"aria-current":s?"page":undefined,onClick:()=>this.selectTab(i.id,i.isInactive)},n("ds-text",{as:"span",variant:"text-body-medium",emphasis:s,color:"inherit"},i.label),i.dot&&n("span",{class:"shell-mobile-section-nav__dot","aria-hidden":"true"}))}))):n("ds-text",{class:"shell-mobile-section-nav__heading",as:"span",variant:"text-body-medium",emphasis:true},this.heading??"")))}get el(){return this}static get style(){return v()}},[2,"ds-shell-mobile-section-nav",{tabs:[16],tabsJson:[1,"tabs-json"],value:[1],heading:[1],basePath:[1,"base-path"],currentUrl:[1,"current-url"],navigationLabel:[1,"navigation-label"]}]);function b(){if(typeof customElements==="undefined"){return}const i=["ds-shell-mobile-section-nav","ds-text"];i.forEach((i=>{switch(i){case"ds-shell-mobile-section-nav":if(!customElements.get(t(i))){customElements.define(t(i),h)}break;case"ds-text":if(!customElements.get(t(i))){d()}break}}))}b();const f=h;const m=b;export{f as DsShellMobileSectionNav,m as defineCustomElement};
+//# sourceMappingURL=ds-shell-mobile-section-nav.js.map

package/dist/components/ds-shell-mobile-section-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["shellMobileSectionNavCss","ShellMobileSectionNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","tabs","tabsJson","value","basePath","currentUrl","navigationLabel","lastScrolledValue","resolvedTabs","parseJsonArrayProp","urlState","deriveBarNavValueFromUrl","effectiveValue","componentDidLoad","scrollSelectedIntoView","componentDidRender","selectedValue","requestAnimationFrame","el","querySelector","CSS","escape","scrollIntoView","block","inline","selectTab","id","isInactive","dsTabChange","emit","render","selectableTabs","getSelectableTabs","showTabs","length","hideTabs","h","Host","key","class","map","tab","index","isTabDivider","selected","type","disabled","undefined","onClick","as","variant","emphasis","color","label","dot","heading"],"sources":["src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.css?tag=ds-shell-mobile-section-nav&encapsulation=scoped","src/wc/components/ShellMobileSectionNav/ShellMobileSectionNav.tsx"],"sourcesContent":["@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  background: var(--color-background-primary);\n  color: var(--color-foreground-secondary);\n}\n\n.shell-mobile-section-nav {\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  display: flex;\n  align-items: center;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background: var(--color-background-primary);\n}\n\n.shell-mobile-section-nav__scroller {\n  width: 100%;\n  min-width: 0;\n  min-height: var(--dimension-size-600);\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  padding-inline: var(--dimension-space-100);\n  overflow-x: auto;\n  overflow-y: hidden;\n  overscroll-behavior-inline: contain;\n  scrollbar-width: none;\n  box-sizing: border-box;\n}\n\n.shell-mobile-section-nav__scroller::-webkit-scrollbar {\n  display: none;\n}\n\n.shell-mobile-section-nav__tab {\n  appearance: none;\n  flex: 0 0 auto;\n  min-height: var(--dimension-size-400);\n  padding-inline: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-100);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  cursor: pointer;\n}\n\n.shell-mobile-section-nav__tab--selected {\n  color: var(--color-foreground-primary);\n}\n\n.shell-mobile-section-nav__tab:disabled {\n  color: var(--color-foreground-tertiary);\n  cursor: default;\n}\n\n.shell-mobile-section-nav__divider {\n  flex: 0 0 auto;\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-300);\n  background: var(--color-border-tertiary);\n}\n\n.shell-mobile-section-nav__dot {\n  width: var(--dimension-size-075);\n  height: var(--dimension-size-075);\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-bold-brand);\n}\n\n.shell-mobile-section-nav__heading {\n  display: block;\n  min-width: 0;\n  padding-inline: var(--dimension-space-200);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport type { BarNavTab } from '../BarNav/bar-nav-types';\nimport {\n  deriveBarNavValueFromUrl,\n  parseJsonArrayProp,\n} from '../BarNav/bar-nav-utils';\nimport { getSelectableTabs, isTabDivider } from '../TabGroup/tab-item-utils';\n\n@Component({\n  tag: 'ds-shell-mobile-section-nav',\n  styleUrl: 'ShellMobileSectionNav.css',\n  scoped: true,\n})\nexport class ShellMobileSectionNav {\n  @Element() el!: HTMLElement;\n\n  /** Route sections shared with the corresponding desktop BarNav. */\n  @Prop() tabs: BarNavTab[] = [];\n  /** JSON fallback for `tabs`. */\n  @Prop({ attribute: 'tabs-json' }) tabsJson: string = '';\n  /** Controlled selected tab when URL-derived selection is unavailable. */\n  @Prop() value: string = '';\n  /** Active primary-area label shown when the route has no section row. */\n  @Prop() heading: string | undefined;\n  /** Section base path used to derive the selected route tab. */\n  @Prop() basePath: string = '';\n  /** Current application route. */\n  @Prop() currentUrl: string = '';\n  @Prop() navigationLabel: string = 'Section navigation';\n\n  /** Route intent; the application owns navigation. */\n  @Event() dsTabChange!: EventEmitter<string>;\n\n  private lastScrolledValue = '';\n\n  private get resolvedTabs(): BarNavTab[] {\n    return this.tabsJson\n      ? parseJsonArrayProp<BarNavTab>(this.tabsJson, [])\n      : (this.tabs ?? []);\n  }\n\n  private get urlState() {\n    return deriveBarNavValueFromUrl(this.currentUrl, this.basePath, this.resolvedTabs);\n  }\n\n  private get effectiveValue(): string {\n    if (this.currentUrl && this.basePath) return this.urlState.value;\n    return this.value;\n  }\n\n  componentDidLoad() {\n    this.scrollSelectedIntoView();\n  }\n\n  componentDidRender() {\n    this.scrollSelectedIntoView();\n  }\n\n  private scrollSelectedIntoView() {\n    const selectedValue = this.effectiveValue;\n    if (!selectedValue || selectedValue === this.lastScrolledValue) return;\n    this.lastScrolledValue = selectedValue;\n    requestAnimationFrame(() => {\n      this.el\n        .querySelector<HTMLElement>(`[data-section-id=\"${CSS.escape(selectedValue)}\"]`)\n        ?.scrollIntoView({ block: 'nearest', inline: 'center' });\n    });\n  }\n\n  private selectTab(id: string, isInactive: boolean | undefined) {\n    if (isInactive || id === this.effectiveValue) return;\n    this.dsTabChange.emit(id);\n  }\n\n  render() {\n    const tabs = this.resolvedTabs;\n    const selectableTabs = getSelectableTabs(tabs);\n    const showTabs = selectableTabs.length > 0 && !this.urlState.hideTabs;\n\n    return (\n      <Host>\n        <nav class=\"shell-mobile-section-nav\" aria-label={this.navigationLabel}>\n          {showTabs ? (\n            <div class=\"shell-mobile-section-nav__scroller\">\n              {tabs.map((tab, index) => {\n                if (isTabDivider(tab)) {\n                  return (\n                    <span\n                      class=\"shell-mobile-section-nav__divider\"\n                      aria-hidden=\"true\"\n                      key={`divider-${index}`}\n                    />\n                  );\n                }\n\n                const selected = tab.id === this.effectiveValue;\n                return (\n                  <button\n                    type=\"button\"\n                    class={{\n                      'shell-mobile-section-nav__tab': true,\n                      'shell-mobile-section-nav__tab--selected': selected,\n                      'ds-focus-ring-inset': true,\n                      'ds-interaction-fill': true,\n                    }}\n                    data-section-id={tab.id}\n                    disabled={tab.isInactive}\n                    aria-current={selected ? 'page' : undefined}\n                    onClick={() => this.selectTab(tab.id, tab.isInactive)}\n                  >\n                    <ds-text\n                      as=\"span\"\n                      variant=\"text-body-medium\"\n                      emphasis={selected}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                    {tab.dot && (\n                      <span class=\"shell-mobile-section-nav__dot\" aria-hidden=\"true\" />\n                    )}\n                  </button>\n                );\n              })}\n            </div>\n          ) : (\n            <ds-text\n              class=\"shell-mobile-section-nav__heading\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              emphasis\n            >\n              {this.heading ?? ''}\n            </ds-text>\n          )}\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kLAAA,MAAMA,EAA2B,IAAM,2vS,MCqB1BC,EAAqBC,EAAA,MAAAD,UAAAE,EALlC,WAAAC,CAAAC,G,mFASUC,KAAAC,KAAoB,GAEMD,KAAAE,SAAmB,GAE7CF,KAAAG,MAAgB,GAIhBH,KAAAI,SAAmB,GAEnBJ,KAAAK,WAAqB,GACrBL,KAAAM,gBAA0B,qBAK1BN,KAAAO,kBAAoB,EA0G7B,CAxGC,gBAAYC,GACV,OAAOR,KAAKE,SACRO,EAA8BT,KAAKE,SAAU,IAC5CF,KAAKC,MAAQ,E,CAGpB,YAAYS,GACV,OAAOC,EAAyBX,KAAKK,WAAYL,KAAKI,SAAUJ,KAAKQ,a,CAGvE,kBAAYI,GACV,GAAIZ,KAAKK,YAAcL,KAAKI,SAAU,OAAOJ,KAAKU,SAASP,MAC3D,OAAOH,KAAKG,K,CAGd,gBAAAU,GACEb,KAAKc,wB,CAGP,kBAAAC,GACEf,KAAKc,wB,CAGC,sBAAAA,GACN,MAAME,EAAgBhB,KAAKY,eAC3B,IAAKI,GAAiBA,IAAkBhB,KAAKO,kBAAmB,OAChEP,KAAKO,kBAAoBS,EACzBC,uBAAsB,KACpBjB,KAAKkB,GACFC,cAA2B,qBAAqBC,IAAIC,OAAOL,SAC1DM,eAAe,CAAEC,MAAO,UAAWC,OAAQ,UAAW,G,CAItD,SAAAC,CAAUC,EAAYC,GAC5B,GAAIA,GAAcD,IAAO1B,KAAKY,eAAgB,OAC9CZ,KAAK4B,YAAYC,KAAKH,E,CAGxB,MAAAI,GACE,MAAM7B,EAAOD,KAAKQ,aAClB,MAAMuB,EAAiBC,EAAkB/B,GACzC,MAAMgC,EAAWF,EAAeG,OAAS,IAAMlC,KAAKU,SAASyB,SAE7D,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,2BAA0B,aAAavC,KAAKM,iBACpD2B,EACCG,EAAA,OAAKG,MAAM,sCACRtC,EAAKuC,KAAI,CAACC,EAAKC,KACd,GAAIC,EAAaF,GAAM,CACrB,OACEL,EAAA,QACEG,MAAM,oCAAmC,cAC7B,OACZD,IAAK,WAAWI,K,CAKtB,MAAME,EAAWH,EAAIf,KAAO1B,KAAKY,eACjC,OACEwB,EAAA,UACES,KAAK,SACLN,MAAO,CACL,gCAAiC,KACjC,0CAA2CK,EAC3C,sBAAuB,KACvB,sBAAuB,MACxB,kBACgBH,EAAIf,GACrBoB,SAAUL,EAAId,WAAU,eACViB,EAAW,OAASG,UAClCC,QAAS,IAAMhD,KAAKyB,UAAUgB,EAAIf,GAAIe,EAAId,aAE1CS,EAAA,WACEa,GAAG,OACHC,QAAQ,mBACRC,SAAUP,EACVQ,MAAM,WAELX,EAAIY,OAENZ,EAAIa,KACHlB,EAAA,QAAMG,MAAM,gCAA+B,cAAa,SAEnD,KAKfH,EAAA,WACEG,MAAM,oCACNU,GAAG,OACHC,QAAQ,mBACRC,SAAQ,MAEPnD,KAAKuD,SAAW,K","ignoreList":[]}

package/dist/components/ds-shell-page.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,h as s,a as i,t as a}from"./index.js";import{r as n}from"./p-BJMRBHKW.js";function h(e,t,s){if(e!=="auto")return e;if(t==="constrained")return"constrained";if(t==="compact"||!s)return"compact";return"expanded"}const r=()=>`.sc-ds-shell-page-h{display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--color-background-primary)}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-raised);min-width:0;background:var(--color-background-primary);overflow:visible;overflow-anchor:none}.shell-page__sticky-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__sticky-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__sticky-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__sticky-header .sc-ds-shell-page-s>ds-bar-workflow{display:block;min-width:0}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--color-background-primary)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.contentInset="default";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.scrollRoot=null;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;const t=this.sentinelEl.getBoundingClientRect().top>=e;if(!t&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(t&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=t};this.handleHeaderSlotChange=e=>{const t=e.target;const s=t.assignedElements({flatten:true}).find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(s??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}componentDidLoad(){this.observeHeader(this.findHeader());this.connectScrollRoot()}componentDidRender(){this.syncHeaderVariant()}disconnectedCallback(){this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}get effectiveVariant(){return h(this.headerPresentation,this.headerCapacity??"roomy",this.pageTopVisible)}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const t=getComputedStyle(e).overflowY;if(t==="auto"||t==="scroll"||t==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return n("--dimension-size-600",0)}setHeaderTravel(e){const t=Math.max(0,e);if(Math.abs(t-this.headerTravel)<.5)return;this.headerTravel=t;this.el.style.setProperty("--ds-shell-page-header-travel",`${t}px`);this.handleScroll()}measureHeaderTravel(e){const t=e.querySelector("[data-shell-page-header-anchor]");const s=this.compactHeaderHeight;if(!t||s<=0)return;const i=e.getBoundingClientRect();const a=t.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const n=a.top-i.top;const h=Math.max(0,(s-a.height)/2);this.setHeaderTravel(n-h)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=e.getBoundingClientRect().height;this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncRenderedHeaderGeometry(e){const t=this.effectiveVariant;if(!e.classList.contains(this.variantClass(t)))return;this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(t);if(t==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(t)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(t){this.cancelHeaderGeometrySync();let s=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==t)return;s-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(t);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&i>=2||s<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(t,s){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==t){t.removeAttribute("data-shell-page-syncing");return}i-=1;if(t.classList.contains(this.variantClass(s))){t.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const t=this.headerEl;if(!t)return;if(!this.headerContractResolved){this.cancelHeaderReveal();t.setAttribute("data-shell-page-syncing","");return}const s=this.effectiveVariant;const i=!t.classList.contains(this.variantClass(s));if(!i)this.syncRenderedHeaderGeometry(t);if(e){this.cancelHeaderReveal();t.setAttribute("data-shell-page-syncing","")}if(t.variant!==s)t.variant=s;if(e){this.revealHeaderWhenSynced(t,s)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"]})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){return s(i,{key:"3bcc057d7688f2cb84574302182b94df7b559000",role:"main",class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none",[`shell-page-host--header-${this.effectiveVariant}`]:true}},s("div",{key:"84d5388311be7d13017f47df33bf29a1789c7966",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),s("div",{key:"01ad2f3f54b1acd831a59bfaac98b712a65fd226",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},s("slot",{key:"ae85a7d8a5039a7e873fca4634f30f4ce0a98ba8",name:"header",onSlotchange:this.handleHeaderSlotChange})),s("div",{key:"43e40529635c5aaffdcf493601078962e3dbd057",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),s("div",{key:"910e47c80784e4048d204a4305fdf9625790d3e5",class:"shell-page__content"},s("slot",{key:"598382bca1fdafc9a6405f7e96e71f487271b9d6"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}]}}static get style(){return r()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],contentInset:[1,"content-inset"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}]}]);l.MAX_HEADER_REVEAL_FRAMES=12;l.MAX_HEADER_GEOMETRY_FRAMES=12;function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),l)}break}}))}o();const d=l;const c=o;export{d as DsShellPage,c as defineCustomElement};
+import{p as e,H as t,h as s,a as i,t as a}from"./index.js";import{r as n}from"./p-BJMRBHKW.js";function h(e,t,s){if(e!=="auto")return e;if(t==="constrained")return"constrained";if(t==="compact"||!s)return"compact";return"expanded"}const r=()=>`.sc-ds-shell-page-h{display:block;position:relative;min-width:0;min-height:100%;box-sizing:border-box;background:var(--color-background-primary)}.shell-page__scroll-sentinel.sc-ds-shell-page{position:absolute;inset-block-start:var(--ds-shell-page-header-travel, 0);inset-inline-start:0;width:var(--dimension-stroke-width-012);height:var(--dimension-stroke-width-012);pointer-events:none}.shell-page__sticky-header.sc-ds-shell-page{position:sticky;inset-block-start:var(--ds-shell-page-sticky-offset, 0);z-index:var(--dimension-z-index-raised);min-width:0;background:var(--color-background-primary);overflow:visible;overflow-anchor:none}.shell-page__sticky-header.sc-ds-shell-page-s>ds-bar-title,.shell-page__sticky-header .sc-ds-shell-page-s>ds-bar-title,.shell-page__sticky-header.sc-ds-shell-page-s>ds-bar-workflow,.shell-page__sticky-header .sc-ds-shell-page-s>ds-bar-workflow{display:block;min-width:0}.shell-page__flow-spacer.sc-ds-shell-page{height:var(--ds-shell-page-flow-spacer, 0);background:var(--color-background-primary)}.shell-page__content.sc-ds-shell-page{min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.shell-page-host--inset-default.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:var(--dimension-space-400) var(--dimension-space-400) var(--dimension-space-800)}.shell-page-host--inset-none.sc-ds-shell-page-h .shell-page__content.sc-ds-shell-page{padding:0}`;const l=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.headerPresentation="auto";this.contentInset="default";this.pageTopVisible=true;this.sentinelEl=null;this.spacerEl=null;this.stickyHeaderEl=null;this.headerEl=null;this.expandedHeaderHeight=0;this.headerTravel=0;this.expandedGeometryFrozen=false;this.headerResizeObserver=null;this.headerMutationObserver=null;this.headerRevealFrame=null;this.headerGeometryFrame=null;this.scrollRoot=null;this.handleScroll=()=>{if(!this.sentinelEl||!this.scrollRoot)return;const e=this.scrollRoot===window?0:this.scrollRoot.getBoundingClientRect().top;const t=this.sentinelEl.getBoundingClientRect().top>=e;if(!t&&this.pageTopVisible&&this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl);this.expandedGeometryFrozen=true}if(t&&this.expandedGeometryFrozen&&this.el.getBoundingClientRect().top>=e){this.expandedGeometryFrozen=false;if(this.headerEl?.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(this.headerEl)}}this.pageTopVisible=t};this.handleHeaderSlotChange=e=>{const t=e.target;const s=t.assignedElements().find((e=>e.tagName.toLowerCase()==="ds-bar-title"));this.observeHeader(s??null)}}handleHeaderContractChange(){this.syncHeaderVariant(true)}componentDidLoad(){this.observeHeader(this.findHeader());this.connectScrollRoot()}componentDidRender(){this.syncHeaderVariant()}disconnectedCallback(){this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=null}get effectiveVariant(){return h(this.headerPresentation,this.headerCapacity??"roomy",this.pageTopVisible)}get headerContractResolved(){return this.headerPresentation!=="auto"||this.headerCapacity!==undefined}get isScrollCompacted(){return this.headerPresentation==="auto"&&this.headerCapacity==="roomy"&&!this.pageTopVisible}composedParent(e){return e.assignedSlot?.parentElement??e.parentElement}findScrollRoot(){let e=this.composedParent(this.el);while(e&&e!==document.documentElement){const t=getComputedStyle(e).overflowY;if(t==="auto"||t==="scroll"||t==="overlay"){return e}e=this.composedParent(e)}return window}connectScrollRoot(){const e=this.findScrollRoot();if(e===this.scrollRoot)return;this.scrollRoot?.removeEventListener("scroll",this.handleScroll);this.scrollRoot=e;this.scrollRoot.addEventListener("scroll",this.handleScroll,{passive:true});this.handleScroll()}findHeader(){return this.el.querySelector("ds-bar-title")}get compactHeaderHeight(){return n("--dimension-size-600",0)}setHeaderTravel(e){const t=Math.max(0,e);if(Math.abs(t-this.headerTravel)<.5)return;this.headerTravel=t;this.el.style.setProperty("--ds-shell-page-header-travel",`${t}px`);this.handleScroll()}measureHeaderTravel(e){const t=e.querySelector("[data-shell-page-header-anchor]");const s=this.compactHeaderHeight;if(!t||s<=0)return;const i=e.getBoundingClientRect();const a=t.getBoundingClientRect();if(i.height<=0||a.height<=0)return;const n=a.top-i.top;const h=Math.max(0,(s-a.height)/2);this.setHeaderTravel(n-h)}captureExpandedHeaderGeometry(e){this.expandedHeaderHeight=e.getBoundingClientRect().height;this.measureHeaderTravel(e)}setSpacerHeight(e){if(!this.spacerEl)return;this.spacerEl.style.setProperty("--ds-shell-page-flow-spacer",`${Math.max(0,e)}px`)}variantClass(e){return`bar-title-host--${e}`}setStickyHeaderOffset(e){this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset",e==="expanded"&&this.headerPresentation==="auto"&&this.headerCapacity==="roomy"?`${-this.headerTravel}px`:"0px")}syncRenderedHeaderGeometry(e){const t=this.effectiveVariant;if(!e.classList.contains(this.variantClass(t)))return;this.setSpacerHeight(this.isScrollCompacted?this.expandedHeaderHeight-this.compactHeaderHeight:0);this.setStickyHeaderOffset(t);if(t==="expanded"&&!this.expandedGeometryFrozen){this.captureExpandedHeaderGeometry(e);this.setStickyHeaderOffset(t)}}cancelHeaderGeometrySync(){if(this.headerGeometryFrame!==null)cancelAnimationFrame(this.headerGeometryFrame);this.headerGeometryFrame=null}scheduleHeaderGeometrySync(t){this.cancelHeaderGeometrySync();let s=e.MAX_HEADER_GEOMETRY_FRAMES;let i=0;const a=()=>{if(this.headerEl!==t)return;s-=1;i+=1;this.connectScrollRoot();this.syncRenderedHeaderGeometry(t);const e=this.effectiveVariant!=="expanded"||this.expandedHeaderHeight>0&&this.headerTravel>0;if(e&&i>=2||s<=0){this.headerGeometryFrame=null;return}this.headerGeometryFrame=requestAnimationFrame(a)};this.headerGeometryFrame=requestAnimationFrame(a)}cancelHeaderReveal(){if(this.headerRevealFrame!==null)cancelAnimationFrame(this.headerRevealFrame);this.headerRevealFrame=null;this.headerEl?.removeAttribute("data-shell-page-syncing")}revealHeaderWhenSynced(t,s){let i=e.MAX_HEADER_REVEAL_FRAMES;const a=()=>{if(this.headerEl!==t){t.removeAttribute("data-shell-page-syncing");return}i-=1;if(t.classList.contains(this.variantClass(s))){t.removeAttribute("data-shell-page-syncing");this.headerRevealFrame=null;return}if(i<=0){this.headerRevealFrame=null;return}this.headerRevealFrame=requestAnimationFrame(a)};this.headerRevealFrame=requestAnimationFrame(a)}syncHeaderVariant(e=false){const t=this.headerEl;if(!t)return;if(!this.headerContractResolved){this.cancelHeaderReveal();t.setAttribute("data-shell-page-syncing","");return}const s=this.effectiveVariant;const i=!t.classList.contains(this.variantClass(s));if(!i)this.syncRenderedHeaderGeometry(t);if(e){this.cancelHeaderReveal();t.setAttribute("data-shell-page-syncing","")}if(t.variant!==s)t.variant=s;if(e){this.revealHeaderWhenSynced(t,s)}}observeHeader(e){this.cancelHeaderReveal();this.cancelHeaderGeometrySync();this.headerResizeObserver?.disconnect();this.headerResizeObserver=null;this.headerMutationObserver?.disconnect();this.headerMutationObserver=null;this.headerEl=e;this.expandedHeaderHeight=0;this.expandedGeometryFrozen=false;this.setHeaderTravel(0);this.setSpacerHeight(0);this.stickyHeaderEl?.style.setProperty("--ds-shell-page-sticky-offset","0px");if(!e)return;if(e.classList.contains(this.variantClass("expanded"))){this.captureExpandedHeaderGeometry(e)}if(typeof ResizeObserver!=="undefined"){this.headerResizeObserver=new ResizeObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerResizeObserver.observe(e)}if(typeof MutationObserver!=="undefined"){this.headerMutationObserver=new MutationObserver((()=>{this.syncRenderedHeaderGeometry(e)}));this.headerMutationObserver.observe(e,{attributes:true,attributeFilter:["class"]})}this.syncHeaderVariant(true);this.scheduleHeaderGeometrySync(e)}render(){return s(i,{key:"b6c5bf0bd192a8e01819395e1d4fd4e4c886c4c8",role:"main",class:{"shell-page-host--inset-default":this.contentInset==="default","shell-page-host--inset-none":this.contentInset==="none",[`shell-page-host--header-${this.effectiveVariant}`]:true}},s("div",{key:"939c065589b45cdea40d394cc1c10b505ea358b7",ref:e=>{this.sentinelEl=e??null},class:"shell-page__scroll-sentinel","aria-hidden":"true"}),s("div",{key:"1552af29cadd1aa28e0b783b2d3c746f190b40ec",ref:e=>{this.stickyHeaderEl=e??null},class:"shell-page__sticky-header"},s("slot",{key:"c69915ded2b6524dcb191c3623c7a57105143c01",name:"header",onSlotchange:this.handleHeaderSlotChange})),s("div",{key:"672a964bfe074b23aecc0e856324d2c7a94671ed",ref:e=>{this.spacerEl=e??null},class:"shell-page__flow-spacer","aria-hidden":"true"}),s("div",{key:"490ea294613419efb945497d8a692e9c168063fe",class:"shell-page__content"},s("slot",{key:"031d82d5bb8fe66c666aa63ccb6d558e584ba910"})))}get el(){return this}static get watchers(){return{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}]}}static get style(){return r()}},[262,"ds-shell-page",{headerPresentation:[1,"header-presentation"],headerCapacity:[1,"header-capacity"],contentInset:[1,"content-inset"],pageTopVisible:[32]},undefined,{headerCapacity:[{handleHeaderContractChange:0}],headerPresentation:[{handleHeaderContractChange:0}]}]);l.MAX_HEADER_REVEAL_FRAMES=12;l.MAX_HEADER_GEOMETRY_FRAMES=12;function o(){if(typeof customElements==="undefined"){return}const e=["ds-shell-page"];e.forEach((e=>{switch(e){case"ds-shell-page":if(!customElements.get(a(e))){customElements.define(a(e),l)}break}}))}o();const d=l;const c=o;export{d as DsShellPage,c as defineCustomElement};
 //# sourceMappingURL=ds-shell-page.js.map