@ds-mo/ui 13.0.0 → 13.2.0

package/dist/components/{p-DsiCDzoF.js.map → p-eAfNzlMa.js.map}

@@ -1 +1 @@
-{"version":3,"names":["buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","hasMenu","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","undefined","dsChange","setFocus","focus","showDot","resolvedHaspopup","haspopup","visuallyActive","expanded","dotRing","accessibleName","render","bg","background","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/button-base.css';\n\n:host {\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n.button-unfilled {\n  background: transparent;\n  color: var(--ds-button-unfilled-fg);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active and popup-open foreground changes resolve atomically with the fill. */\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle even when\n * shell chrome opts out of selected fills with `activeFill=false`.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type {\n  ButtonPopup,\n  ButtonSize,\n  ButtonVariant,\n  ButtonWidth,\n} from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /**\n   * Owner-controlled visual emphasis inside a composite. This does not add\n   * toggle semantics and does not emit dsChange.\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * Scale down during a physical pointer press.\n   * Disable when an owning composite requires fixed child or background geometry.\n   */\n  @Prop() pressScale: boolean = true;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  /**\n   * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n   * active styling, and makes activation emit dsChange with the requested state.\n   */\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n   * both menu-button shapes:\n   *\n   * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n   *   the affordance.\n   * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n   *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n  };\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  /** An expanded popup trigger is visually active even when selection is controlled separately. */\n  private get visuallyActive(): boolean {\n    return this.isActive || this.pressed === true || this.expanded === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if ((this.isActive || this.pressed === true) && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected':\n        (this.isActive || this.pressed === true) &&\n        this.activeFill &&\n        !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.visuallyActive,\n      'button-unfilled--expanded': this.expanded === true && !this.isInactive,\n      'ds-button--expanded': this.expanded === true && !this.isInactive,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-button--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control-frame': true,\n      'button-unfilled--icon': this.variant === 'icon',\n      'ds-button--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-button-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.resolvedHaspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onPointerDown={event =>\n            beginElevatedControlPress(\n              event,\n              this.pressScale && !this.isInactive && !this.isLoading,\n            )\n          }\n          onClick={this.handleClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-unfilled',\n            variant: this.variant,\n            size: this.size,\n            label: this.label,\n            icon: this.icon,\n            hasMenu: this.hasMenu,\n            isLoading: this.isLoading,\n            dot: {\n              visible: this.showDot,\n              background: this.dotRing,\n            },\n          })}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["buttonUnfilledCss","ButtonUnfilled","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","size","width","label","icon","isActive","activeFill","hasBorder","rounded","pressScale","dot","isInactive","isLoading","type","ariaLabel","hasMenu","buttonEl","handleClick","event","preventDefault","stopPropagation","dsClick","emit","pressed","undefined","dsChange","setFocus","focus","showDot","resolvedHaspopup","haspopup","visuallyActive","expanded","dotRing","accessibleName","render","bg","background","cls","h","Host","key","class","controlWidthClass","tabIndex","ref","el","disabled","focusTabIndex","controls","String","onPointerDown","beginElevatedControlPress","onClick","renderButtonContent","namespace","visible"],"sources":["src/wc/components/ButtonUnfilled/ButtonUnfilled.css?tag=ds-button-unfilled&encapsulation=scoped","src/wc/components/ButtonUnfilled/ButtonUnfilled.tsx"],"sourcesContent":["@import '../../utils/button-base.css';\n\n:host {\n  --ds-button-unfilled-fg: var(--color-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-secondary);\n  --ds-button-unfilled-border: var(--color-border-secondary);\n}\n\n.button-unfilled {\n  background: transparent;\n  color: var(--ds-button-unfilled-fg);\n  /* Hover/press/selected fill: `.ds-interaction-fill` (+ `--selected` / `--on-*`).\n     Active and popup-open foreground changes resolve atomically with the fill. */\n}\n\n.button-unfilled--active {\n  color: var(--ds-button-unfilled-fg-active);\n}\n\n/*\n * An open popup is a transient pressed state, not a selected state. Keep the\n * pressed wash visible for the popup's complete rendered lifecycle even when\n * shell chrome opts out of selected fills with `activeFill=false`.\n */\n/* Inset stroke via interaction-fill ::after (above selected / hover washes). */\n.button-unfilled--bordered {\n  --ds-interaction-border-color: var(--ds-button-unfilled-border);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity). */\n\n/* Foreground / chrome tokens per surface — interaction tokens come from util `--on-*`. */\n.button-unfilled--background-medium {\n  --ds-button-unfilled-fg: var(--color-foreground-on-medium-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-medium-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-medium-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-medium-background-secondary);\n}\n\n.button-unfilled--background-bold {\n  --ds-button-unfilled-fg: var(--color-foreground-on-bold-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-bold-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-bold-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-bold-background-secondary);\n}\n\n.button-unfilled--background-strong {\n  --ds-button-unfilled-fg: var(--color-foreground-on-strong-background-secondary);\n  --ds-button-unfilled-fg-active: var(--color-foreground-on-strong-background-primary);\n  --ds-button-unfilled-dot-ring: var(--color-background-strong-neutral);\n  --ds-button-unfilled-border: var(--color-border-on-strong-background-secondary);\n}\n\n.button-unfilled--background-translucent {\n  --ds-button-unfilled-fg: var(--color-translucent-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-translucent-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-translucent-translucent);\n  --ds-button-unfilled-border: var(--color-translucent-border-secondary);\n}\n\n.button-unfilled--background-inverted {\n  --ds-button-unfilled-fg: var(--color-inverted-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-inverted-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-inverted-background);\n  --ds-button-unfilled-border: var(--color-inverted-border-secondary);\n}\n\n.button-unfilled--background-media {\n  --ds-button-unfilled-fg: var(--color-media-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-media-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-media-background);\n  --ds-button-unfilled-border: var(--color-media-border-secondary);\n}\n\n.button-unfilled--on-always-dark {\n  --ds-button-unfilled-fg: var(--color-always-dark-foreground-secondary);\n  --ds-button-unfilled-fg-active: var(--color-always-dark-foreground-primary);\n  --ds-button-unfilled-dot-ring: var(--color-always-dark-background);\n  --ds-button-unfilled-border: var(--color-always-dark-border-secondary);\n}\n\n/*\n * After surface ring defaults: selected fill remaps the knock-out to the active\n * wash so the badge halo matches the selected background.\n */\n.button-unfilled.ds-interaction-fill--selected {\n  --ds-button-unfilled-dot-ring: var(--ds-interaction-active);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { controlWidthClass } from '../../utils';\nimport { beginElevatedControlPress } from '../../utils/control-press';\nimport { renderButtonContent } from '../../utils/button-render';\nimport type {\n  ButtonPopup,\n  ButtonSize,\n  ButtonVariant,\n  ButtonWidth,\n} from '../../utils/button-types';\n\nexport type ButtonUnfilledBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type ButtonUnfilledVariant = ButtonVariant;\nexport type ButtonUnfilledSize = ButtonSize;\nexport type ButtonUnfilledWidth = ButtonWidth;\nexport type ButtonUnfilledPopup = ButtonPopup;\n\n@Component({\n  tag: 'ds-button-unfilled',\n  styleUrl: 'ButtonUnfilled.css',\n  scoped: true,\n})\nexport class ButtonUnfilled {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Content layout. Default is label-only; pass `icon` for icon-only chrome\n   * (nav / tool rails) or `icon-label` for leading icon + text.\n   */\n  @Prop() variant: ButtonUnfilledVariant = 'label';\n\n  /** Control density (height, padding, icon, type). */\n  @Prop() size: ButtonUnfilledSize = 'md';\n\n  /** Width fit — hug content (default) or fill the parent. */\n  @Prop() width: ButtonUnfilledWidth = 'hug';\n\n  /** Visible text for `label` / `icon-label` variants. */\n  @Prop() label: string = '';\n\n  /** Icon name passed to <ds-icon> for `icon` / `icon-label` variants. */\n  @Prop() icon: string = '';\n\n  /**\n   * Owner-controlled visual emphasis inside a composite. This does not add\n   * toggle semantics and does not emit dsChange.\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * When active, render the selected interaction fill.\n   * Default `true` for general UI. Shell chrome (nav / tool rails) should pass\n   * `false` so selection is foreground-only (primary color, no fill).\n   */\n  @Prop() activeFill: boolean = true;\n\n  /** Show a 1px secondary inset border. Default on; shell chrome can pass `false`. */\n  @Prop() hasBorder: boolean = true;\n\n  /** Use the half-radius treatment instead of the default control radius. */\n  @Prop() rounded: boolean = false;\n\n  /**\n   * Scale down during a physical pointer press.\n   * Disable when an owning composite requires fixed child or background geometry.\n   */\n  @Prop() pressScale: boolean = true;\n\n  /** Show a notification dot at the top-right of the icon zone (icon variant only). */\n  @Prop() dot: boolean = false;\n\n  /** Disables interaction. */\n  @Prop() isInactive: boolean = false;\n\n  /** Shows an inline loader and prevents interaction without applying inactive opacity. */\n  @Prop() isLoading: boolean = false;\n\n  /** Native button type. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** Actual parent surface context. Omit on primary and secondary surfaces. */\n  @Prop() background: ButtonUnfilledBackground | undefined;\n\n  /** Accessible name override. Required for icon-only buttons. */\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop() controls: string | undefined;\n  @Prop() expanded: boolean | undefined;\n  @Prop() haspopup: ButtonUnfilledPopup | undefined;\n  /**\n   * Controlled state for a genuine toggle button. Adds aria-pressed, promotes\n   * active styling, and makes activation emit dsChange with the requested state.\n   */\n  @Prop() pressed: boolean | undefined;\n\n  /**\n   * Mark the button as a Menu trigger. Implies `aria-haspopup=\"menu\"` and covers\n   * both menu-button shapes:\n   *\n   * - `label` / `icon-label` — the action *has* a menu; a trailing chevron carries\n   *   the affordance.\n   * - `icon` — the button *is* a menu, i.e. the overflow / more-options control.\n   *   No chevron is added, so the glyph must convey it on its own; use `Ellipses`.\n   *\n   * Use `haspopup` directly for non-menu popups.\n   */\n  @Prop() hasMenu: boolean = false;\n\n  /**\n   * Native `tabindex` for roving keyboard groups in shell chrome.\n   * Omit for the default button tab stop (`0`).\n   */\n  @Prop({ attribute: 'tab-index' }) focusTabIndex?: number;\n\n  @Event() dsClick!: EventEmitter<MouseEvent>;\n  @Event() dsChange!: EventEmitter<boolean>;\n\n  private buttonEl: HTMLButtonElement | null = null;\n\n  @Method()\n  async setFocus() {\n    this.buttonEl?.focus();\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    if (this.isInactive || this.isLoading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.dsClick.emit(event);\n    if (this.pressed !== undefined) this.dsChange.emit(!this.pressed);\n  };\n\n  private get showDot(): boolean {\n    return this.variant === 'icon' && this.dot && !this.isLoading;\n  }\n\n  private get resolvedHaspopup(): ButtonUnfilledPopup | undefined {\n    return this.haspopup ?? (this.hasMenu ? 'menu' : undefined);\n  }\n\n  /** An expanded popup trigger is visually active even when selection is controlled separately. */\n  private get visuallyActive(): boolean {\n    return this.isActive || this.pressed === true || this.expanded === true;\n  }\n\n  /** Knock-out ring: selected fill → active wash; otherwise surface token. */\n  private get dotRing(): string {\n    if ((this.isActive || this.pressed === true) && this.activeFill) {\n      return 'var(--ds-interaction-active)';\n    }\n    return 'var(--ds-button-unfilled-dot-ring)';\n  }\n\n  private get accessibleName(): string | undefined {\n    if (this.ariaLabel) return this.ariaLabel;\n    if (this.isLoading && this.variant === 'label' && this.label) return this.label;\n    return undefined;\n  }\n\n  render() {\n    const bg = this.background;\n    const cls: Record<string, boolean> = {\n      'button-unfilled': true,\n      'ds-button': true,\n      'ds-focus-ring-inset': true,\n      'ds-control-press-scale': this.pressScale,\n      'ds-interaction-fill': true,\n      'ds-interaction-fill--selected':\n        (this.isActive || this.pressed === true) &&\n        this.activeFill &&\n        !this.isInactive,\n      'ds-interaction-fill--on-faint': bg === 'faint',\n      'ds-interaction-fill--on-medium': bg === 'medium',\n      'ds-interaction-fill--on-bold': bg === 'bold',\n      'ds-interaction-fill--on-strong': bg === 'strong',\n      'ds-interaction-fill--on-translucent': bg === 'translucent',\n      'ds-interaction-fill--on-inverted': bg === 'inverted',\n      'ds-interaction-fill--on-media': bg === 'media',\n      'ds-interaction-fill--on-always-dark': bg === 'always-dark',\n      'button-unfilled--active': this.visuallyActive,\n      'button-unfilled--expanded': this.expanded === true && !this.isInactive,\n      'ds-button--expanded': this.expanded === true && !this.isInactive,\n      'button-unfilled--bordered': this.hasBorder,\n      'ds-button--bordered': this.hasBorder,\n      'button-unfilled--rounded': this.rounded,\n      'ds-button--rounded': this.rounded,\n      'ds-control-inactive': this.isInactive,\n      'ds-control--lg': this.size === 'lg',\n      'ds-control--md': this.size === 'md',\n      'ds-control--sm': this.size === 'sm',\n      'ds-control--xs': this.size === 'xs',\n      'ds-control-frame': true,\n      'button-unfilled--icon': this.variant === 'icon',\n      'ds-button--icon': this.variant === 'icon',\n      'button-unfilled--label': this.variant === 'label',\n      'button-unfilled--icon-label': this.variant === 'icon-label',\n      'button-unfilled--background-faint': bg === 'faint',\n      'button-unfilled--background-medium': bg === 'medium',\n      'button-unfilled--background-bold': bg === 'bold',\n      'button-unfilled--background-strong': bg === 'strong',\n      'button-unfilled--background-translucent': bg === 'translucent',\n      'button-unfilled--background-inverted': bg === 'inverted',\n      'button-unfilled--background-media': bg === 'media',\n      'button-unfilled--on-always-dark': bg === 'always-dark',\n    };\n\n    return (\n      <Host\n        class={{\n          'button-unfilled-host': true,\n          'button-unfilled-host--icon': this.variant === 'icon',\n          'ds-button-host--icon': this.variant === 'icon',\n          'ds-control--lg': this.size === 'lg',\n          'ds-control--md': this.size === 'md',\n          'ds-control--sm': this.size === 'sm',\n          'ds-control--xs': this.size === 'xs',\n          ...controlWidthClass(this.width),\n        }}\n        tabIndex={-1}\n      >\n        <button\n          ref={el => {\n            this.buttonEl = el ?? null;\n          }}\n          type={this.type}\n          class={cls}\n          disabled={this.isInactive}\n          tabIndex={this.focusTabIndex ?? 0}\n          aria-label={this.accessibleName}\n          aria-busy={this.isLoading ? 'true' : undefined}\n          aria-disabled={this.isLoading ? 'true' : undefined}\n          aria-controls={this.controls}\n          aria-expanded={this.expanded === undefined ? undefined : String(this.expanded)}\n          aria-haspopup={this.resolvedHaspopup}\n          aria-pressed={this.pressed === undefined ? undefined : String(this.pressed)}\n          onPointerDown={event =>\n            beginElevatedControlPress(\n              event,\n              this.pressScale && !this.isInactive && !this.isLoading,\n            )\n          }\n          onClick={this.handleClick}\n        >\n          {renderButtonContent({\n            namespace: 'button-unfilled',\n            variant: this.variant,\n            size: this.size,\n            label: this.label,\n            icon: this.icon,\n            hasMenu: this.hasMenu,\n            isLoading: this.isLoading,\n            dot: {\n              visible: this.showDot,\n              background: this.dotRing,\n            },\n          })}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/{p-_DzUXA86.js → p-gZni7A2L.js}

@@ -1,2 +1,2 @@
-import{p as e,H as s,c as i,h as o,a as n,t}from"./index.js";import{d as a}from"./p-yhj1lIPx.js";import{d as r}from"./p-BsoqsbBh.js";import{d}from"./p-DsiCDzoF.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as h}from"./p-CMWata9g.js";import{d as v}from"./p-Ay1AX7Ql.js";import{d as m}from"./p-ohsLFap_.js";const b=()=>`.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-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}.ds-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{position:relative;z-index:0;cursor:default;--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-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-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-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}`;const f=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=i(this,"dsAreaSelect");this.dsBrowseContextChange=i(this,"dsBrowseContextChange");this.dsClose=i(this,"dsClose");this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";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 activeId(){return a(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(".mobile-sheet-nav__item");(e??s)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const s=e.id===this.activeId;return o("button",{type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":s,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},o("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),o("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:s,color:"inherit"},e.label),e.dot&&o("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}renderLogo(){return o("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},o("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},o("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,s,i){return o("ds-tooltip",{label:i,side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",size:"lg",icon:s,"aria-label":i,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...f[0],label:this.dashboardLabel},{...f[1],label:this.settingsLabel}];return o(n,{key:"1bbd16f4b0c720aab7f7d0bd5dde06f9b27cc1bc","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},o("section",{key:"4540491ca93278f614ceee0ababe82efef4d3005",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},o("header",{key:"9d24461cca7007d23023e28fb480479fbc13c5e1",class:"mobile-sheet-nav__header ds-chrome-grid ds-chrome-space--md"},o("div",{key:"448949638784fa9f41d610513e87707701c26dfb",class:"mobile-sheet-nav__brand"},this.renderLogo()),o("ds-tab-group",{key:"425861861ad81a241012fdef29844eb0038c7d6b",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,"aria-label":"Browse context",onDsChange:this.handleContextChange}),o("div",{key:"1c4174c47dda5b5e6ee53c4f1f28d120a6a7f06b",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","CircleQuestion",this.helpLabel),this.renderHeaderDestination("account","Avatar",this.accountLabel))),o("nav",{key:"8f8bf1089000a2ad124d4100c82e7b71f9ed3e1e",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},o("div",{key:"ca4fa383406aad24ff7da37b3f2f761a75e0295c",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>o("div",{class:"mobile-sheet-nav__items"},e.items.map((e=>this.renderItem(e))))))))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],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 u(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),g)}break;case"ds-badge":if(!customElements.get(t(e))){r()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){h()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}u();export{g as M,u as d};
-//# sourceMappingURL=p-_DzUXA86.js.map
+import{p as e,H as s,c as i,h as o,a as n,t}from"./index.js";import{d as a}from"./p-yhj1lIPx.js";import{d as r}from"./p-BsoqsbBh.js";import{d}from"./p-eAfNzlMa.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as h}from"./p-CHpNyAo1.js";import{d as v}from"./p-Ay1AX7Ql.js";import{d as m}from"./p-ohsLFap_.js";const b=()=>`.ds-control--lg.sc-ds-mobile-sheet-nav,.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-nav,.ds-control--sm.sc-ds-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-nav,.ds-control--xs.sc-ds-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-nav{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-mobile-sheet-nav-h,.ds-control--lg.sc-ds-mobile-sheet-nav{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-mobile-sheet-nav-h,.ds-control--md.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--sm.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-control--xs.sc-ds-mobile-sheet-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}.ds-chrome-space--sm.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--sm.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--md.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-mobile-sheet-nav-h,.ds-chrome-space--lg.sc-ds-mobile-sheet-nav{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav,.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav,.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-mobile-sheet-nav-h,.ds-chrome-row.sc-ds-mobile-sheet-nav{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-mobile-sheet-nav-h,.ds-chrome-column.sc-ds-mobile-sheet-nav{flex-direction:column}.ds-chrome-grid.sc-ds-mobile-sheet-nav-h,.ds-chrome-grid.sc-ds-mobile-sheet-nav{display:grid;align-items:center}.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.sc-ds-mobile-sheet-nav,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-mobile-sheet-nav-h:focus-visible,.ds-focus-ring.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h:focus-visible,.ds-focus-ring-inset.sc-ds-mobile-sheet-nav:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-mobile-sheet-nav-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-nav-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill.sc-ds-mobile-sheet-nav{position:relative;z-index:0;cursor:default;--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-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill.sc-ds-mobile-sheet-nav::before{z-index:1}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h::after,.ds-interaction-fill.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--bordered.sc-ds-mobile-sheet-nav{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h::before,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--selected.sc-ds-mobile-sheet-nav{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-mobile-sheet-nav:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-mobile-sheet-nav-h>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill.sc-ds-mobile-sheet-nav>.ds-interaction-fill__content.sc-ds-mobile-sheet-nav,.ds-interaction-fill__content.sc-ds-mobile-sheet-nav{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-faint.sc-ds-mobile-sheet-nav{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-nav-h,.ds-interaction-fill--on-medium.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-bold.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-strong.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-translucent.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-inverted.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-media.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-always-dark.sc-ds-mobile-sheet-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-mobile-sheet-nav-h,.ds-interaction-fill--on-navigation.sc-ds-mobile-sheet-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-mobile-sheet-nav-h{display:block;min-width:0;min-height:0;height:100%;background:var(--color-background-primary)}.sc-ds-mobile-sheet-nav-h:not([open]){display:none}.mobile-sheet-nav.sc-ds-mobile-sheet-nav{display:grid;grid-template-rows:auto minmax(0, 1fr);height:100%;min-height:0;background:var(--color-background-primary)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav{position:relative;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr)}.mobile-sheet-nav__header.sc-ds-mobile-sheet-nav::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.mobile-sheet-nav__brand.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-start;min-width:0}.mobile-sheet-nav__logo.sc-ds-mobile-sheet-nav{display:inline-flex;align-items:center;justify-content:center;width:var(--dimension-size-500);height:var(--dimension-size-500);padding:var(--dimension-space-100);box-sizing:border-box;color:var(--color-foreground-primary)}.mobile-sheet-nav__logo-mark.sc-ds-mobile-sheet-nav{width:var(--dimension-iconography-lg);height:var(--dimension-iconography-lg);flex:0 0 auto}.mobile-sheet-nav__context.sc-ds-mobile-sheet-nav{justify-self:center}.mobile-sheet-nav__actions.sc-ds-mobile-sheet-nav{display:flex;align-items:center;justify-content:flex-end;gap:var(--dimension-space-050);min-width:0}.mobile-sheet-nav__body.sc-ds-mobile-sheet-nav{min-height:0;overflow:auto;overscroll-behavior:contain}.mobile-sheet-nav__sections.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-400)}.mobile-sheet-nav__items.sc-ds-mobile-sheet-nav{display:grid;gap:var(--dimension-space-100)}.mobile-sheet-nav__item.sc-ds-mobile-sheet-nav{appearance:none;width:100%;height:var(--ds-control-height);min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);border:0;border-radius:var(--ds-control-radius);background:transparent;color:var(--color-foreground-secondary);display:flex;align-items:center;justify-content:flex-start;gap:var(--ds-control-gap);cursor:default;text-align:start;box-sizing:border-box}.mobile-sheet-nav__item--selected.sc-ds-mobile-sheet-nav{color:var(--color-foreground-primary)}.mobile-sheet-nav__item-label.sc-ds-mobile-sheet-nav{min-width:0;padding-inline:var(--ds-control-label-inset)}.mobile-sheet-nav__dot.sc-ds-mobile-sheet-nav{margin-inline-start:auto}`;const f=[{id:"dashboard",label:"Dashboard",icon:"Dashboard",variant:"icon"},{id:"settings",label:"Settings",icon:"Gear",variant:"icon"}];const g=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAreaSelect=i(this,"dsAreaSelect");this.dsBrowseContextChange=i(this,"dsBrowseContextChange");this.dsClose=i(this,"dsClose");this.open=false;this.browseContext="dashboard";this.dashboardGroups=[];this.settingsGroups=[];this.currentUrl="";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 activeId(){return a(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(".mobile-sheet-nav__item");(e??s)?.focus({preventScroll:true})}))}handleKeyDown(e){if(!this.open||e.key!=="Escape")return;e.preventDefault();this.dsClose.emit()}renderItem(e){const s=e.id===this.activeId;return o("button",{type:"button",class:{"mobile-sheet-nav__item":true,"mobile-sheet-nav__item--selected":s,"ds-control--lg":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},"aria-current":s?"page":undefined,onClick:()=>this.dsAreaSelect.emit(e.id)},o("ds-icon",{class:"ds-interaction-fill__content",name:e.icon,size:"lg",color:"inherit"}),o("ds-text",{class:"mobile-sheet-nav__item-label ds-interaction-fill__content",as:"span",variant:"text-body-large",emphasis:s,color:"inherit"},e.label),e.dot&&o("ds-badge",{class:"mobile-sheet-nav__dot ds-interaction-fill__content",variant:"dot",hasRing:false,label:"","aria-hidden":"true"}))}renderLogo(){return o("span",{class:"mobile-sheet-nav__logo","aria-hidden":"true"},o("svg",{class:"mobile-sheet-nav__logo-mark",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",focusable:"false","aria-hidden":"true"},o("path",{d:"M11.1159 4.31537H7.67021L2.53401 13.0703H0V15.6875H4.02716L8.24319 8.49978V15.6846H11.6342L15.8289 8.47829V15.6846H18.7122V4.3125H15.2559L11.1159 11.3648V4.31537Z",fill:"currentColor"})))}renderHeaderDestination(e,s,i){return o("ds-tooltip",{label:i,side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",size:"lg",icon:s,"aria-label":i,activeFill:false,hasBorder:false,onDsClick:()=>this.dsAreaSelect.emit(e)}))}render(){const e=[{...f[0],label:this.dashboardLabel},{...f[1],label:this.settingsLabel}];return o(n,{key:"1bbd16f4b0c720aab7f7d0bd5dde06f9b27cc1bc","aria-hidden":this.open?undefined:"true",inert:this.open?undefined:true},o("section",{key:"4540491ca93278f614ceee0ababe82efef4d3005",id:"ds-mobile-sheet-nav",class:"mobile-sheet-nav"},o("header",{key:"9d24461cca7007d23023e28fb480479fbc13c5e1",class:"mobile-sheet-nav__header ds-chrome-grid ds-chrome-space--md"},o("div",{key:"448949638784fa9f41d610513e87707701c26dfb",class:"mobile-sheet-nav__brand"},this.renderLogo()),o("ds-tab-group",{key:"425861861ad81a241012fdef29844eb0038c7d6b",class:"mobile-sheet-nav__context",tabs:e,value:this.browseContext,"aria-label":"Browse context",onDsChange:this.handleContextChange}),o("div",{key:"1c4174c47dda5b5e6ee53c4f1f28d120a6a7f06b",class:"mobile-sheet-nav__actions"},this.renderHeaderDestination("help","CircleQuestion",this.helpLabel),this.renderHeaderDestination("account","Avatar",this.accountLabel))),o("nav",{key:"8f8bf1089000a2ad124d4100c82e7b71f9ed3e1e",class:"mobile-sheet-nav__body ds-chrome-column ds-chrome-space--md","aria-label":this.navigationLabel},o("div",{key:"ca4fa383406aad24ff7da37b3f2f761a75e0295c",class:"mobile-sheet-nav__sections"},this.groups.filter((e=>e.items.length>0)).map((e=>o("div",{class:"mobile-sheet-nav__items"},e.items.map((e=>this.renderItem(e))))))))))}get el(){return this}static get watchers(){return{open:[{handleOpenChange:0}]}}static get style(){return b()}},[2,"ds-mobile-sheet-nav",{open:[516],browseContext:[1,"browse-context"],dashboardGroups:[16],settingsGroups:[16],currentUrl:[1,"current-url"],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 u(){if(typeof customElements==="undefined"){return}const e=["ds-mobile-sheet-nav","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-tab-group","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-mobile-sheet-nav":if(!customElements.get(t(e))){customElements.define(t(e),g)}break;case"ds-badge":if(!customElements.get(t(e))){r()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){d()}break;case"ds-icon":if(!customElements.get(t(e))){c()}break;case"ds-loader":if(!customElements.get(t(e))){l()}break;case"ds-tab-group":if(!customElements.get(t(e))){h()}break;case"ds-text":if(!customElements.get(t(e))){v()}break;case"ds-tooltip":if(!customElements.get(t(e))){m()}break}}))}u();export{g as M,u as d};
+//# sourceMappingURL=p-gZni7A2L.js.map

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-07-30T22:46:00",
+  "timestamp": "2026-07-31T02:45:23",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",