@ds-mo/ui 13.14.0 → 13.16.0

package/dist/components/{p-DYAQVvOu.js.map → p-CsXC1cHI.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mobileBarNavCss","MINIMUM_DIRECT_PRESS_MS","MobileBarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","sheetNavExpanded","menuLabel","searchLabel","inboxLabel","messagesLabel","agentsLabel","helpLabel","searchDot","inboxDot","messagesDot","agentsDot","pressedItemId","activePointerId","pressedAt","pressClearTimer","disconnectedCallback","clearPressedItem","clearPressTimer","clearTimeout","beginDirectPress","itemId","event","isPrimary","pointerType","button","pointerId","performance","now","target","currentTarget","setPointerCapture","finishDirectPress","remaining","Math","max","setTimeout","cancelDirectPress","pressHandlers","onPointerDown","onPointerUp","onPointerCancel","onLostPointerCapture","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","requestAnimationFrame","focusDestination","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","variant","render","tools","Host","key","String","dsSheetNavToggle","map"],"sources":["src/wc/components/MobileBarNav/MobileBarNav.css?tag=ds-mobile-bar-nav&encapsulation=scoped","src/wc/components/MobileBarNav/MobileBarNav.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n@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-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav {\n  justify-content: space-between;\n  min-width: 0;\n  padding-block-end: max(var(--ds-chrome-padding), 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  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav__group {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-bar-nav__item {\n  appearance: none;\n  flex: 0 0 var(--dimension-size-500);\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n}\n\n.mobile-bar-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n/*\n * Safari can retain its native :active state after a direct touch. On coarse\n * touch-only pointers, the component-owned class provides one deterministic\n * press frame and clears it after release/cancel.\n */\n@media (hover: none) and (pointer: coarse) {\n  .mobile-bar-nav__item.ds-interaction-fill:active:not(:disabled)::after {\n    background: transparent;\n  }\n\n  .mobile-bar-nav__item--pressed.ds-interaction-fill::after,\n  .mobile-bar-nav__item--pressed.ds-interaction-fill:active:not(:disabled)::after {\n    background: var(--ds-interaction-pressed);\n  }\n}\n\n.mobile-bar-nav__divider {\n  flex: 0 0 var(--dimension-stroke-width-012);\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-iconography-lg);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.mobile-bar-nav__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n}\n\n.mobile-bar-nav__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}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n  id: MobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n  tag: 'ds-mobile-bar-nav',\n  styleUrl: 'MobileBarNav.css',\n  scoped: true,\n})\nexport class MobileBarNav {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: MobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() sheetNavExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() messagesLabel: string = 'Messages';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() helpLabel: string = 'Help & Support';\n  @Prop() searchDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n  @Prop() messagesDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n\n  @State() private pressedItemId: string | null = null;\n\n  @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n  private activePointerId: number | null = null;\n  private pressedAt = 0;\n  private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n  disconnectedCallback() {\n    this.clearPressedItem();\n  }\n\n  private clearPressTimer() {\n    if (this.pressClearTimer === null) return;\n    clearTimeout(this.pressClearTimer);\n    this.pressClearTimer = null;\n  }\n\n  private clearPressedItem() {\n    this.clearPressTimer();\n    this.activePointerId = null;\n    this.pressedItemId = null;\n  }\n\n  private beginDirectPress(itemId: string, event: PointerEvent) {\n    if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n    this.clearPressTimer();\n    this.activePointerId = event.pointerId;\n    this.pressedAt = performance.now();\n    this.pressedItemId = itemId;\n\n    const target = event.currentTarget as HTMLElement;\n    try {\n      target.setPointerCapture(event.pointerId);\n    } catch {\n      // Pointer capture can fail if Safari has already cancelled the stream.\n    }\n  }\n\n  private finishDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n\n    this.activePointerId = null;\n    const remaining = Math.max(\n      0,\n      MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt)\n    );\n\n    this.clearPressTimer();\n    this.pressClearTimer = setTimeout(() => {\n      this.pressClearTimer = null;\n      this.pressedItemId = null;\n    }, remaining);\n  }\n\n  private cancelDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n    this.clearPressedItem();\n  }\n\n  private pressHandlers(itemId: string) {\n    return {\n      onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n      onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n      onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n      onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n    };\n  }\n\n  private destinationConfig(): DestinationConfig[] {\n    const currentArea =\n      this.activeDestination === 'help'\n        ? {\n            id: 'help' as const,\n            icon: 'CircleQuestion',\n            label: this.helpLabel,\n            dot: false,\n          }\n        : {\n            id: 'area' as const,\n            icon: this.currentArea.icon || 'MapPage',\n            label: this.currentArea.label || 'Area',\n            dot: false,\n          };\n\n    return [\n      currentArea,\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n      {\n        id: 'messages',\n        icon: 'MessageBubbleStack',\n        label: this.messagesLabel,\n        dot: this.messagesDot,\n      },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n    ];\n  }\n\n  private selectDestination(destination: MobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(\n        this.activeDestination,\n        destination,\n        this.sheetNavExpanded\n      )\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n    // Owners may replace the visible mobile stage (and transiently drop focus\n    // in WebKit) while handling the controlled destination change.\n    requestAnimationFrame(() => {\n      void this.focusDestination(destination);\n    });\n  }\n\n  @Method()\n  async focusDestination(destination: MobileDestination | 'sheet-nav') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'sheet-nav'\n          ? 'ds-mobile-sheet-nav-trigger'\n          : `ds-mobile-bar-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-mobile-bar-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'mobile-bar-nav__item': true,\n          'mobile-bar-nav__item--selected': selected,\n          'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-label={item.label}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n        {...this.pressHandlers(item.id)}\n      >\n        <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n          <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n          {item.dot && (\n            <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </button>\n    );\n  }\n\n  render() {\n    const [currentArea, ...tools] = this.destinationConfig();\n\n    return (\n      <Host>\n        <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n            <button\n              id=\"ds-mobile-sheet-nav-trigger\"\n              type=\"button\"\n              class={{\n                'mobile-bar-nav__item': true,\n                'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n                'mobile-bar-nav__item--pressed':\n                  this.pressedItemId === 'sheet-nav',\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill': true,\n              }}\n              aria-label={this.menuLabel}\n              aria-expanded={String(this.sheetNavExpanded)}\n              aria-controls=\"ds-mobile-sheet-nav\"\n              onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n              {...this.pressHandlers('sheet-nav')}\n            >\n              <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n                <ds-icon\n                  name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n                  size=\"lg\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n            <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n            {this.renderDestination(currentArea)}\n          </div>\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n            {tools.map(item => this.renderDestination(item))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["mobileBarNavCss","MINIMUM_DIRECT_PRESS_MS","MobileBarNav","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","activeDestination","currentArea","id","icon","label","sheetNavExpanded","menuLabel","searchLabel","inboxLabel","messagesLabel","agentsLabel","helpLabel","searchDot","inboxDot","messagesDot","agentsDot","pressedItemId","activePointerId","pressedAt","pressClearTimer","disconnectedCallback","clearPressedItem","clearPressTimer","clearTimeout","beginDirectPress","itemId","event","isPrimary","pointerType","button","pointerId","performance","now","target","currentTarget","setPointerCapture","finishDirectPress","remaining","Math","max","setTimeout","cancelDirectPress","pressHandlers","onPointerDown","onPointerUp","onPointerCancel","onLostPointerCapture","destinationConfig","dot","selectDestination","destination","shouldEmitMobileDestinationChange","dsDestinationChange","emit","requestAnimationFrame","focusDestination","el","querySelector","focus","preventScroll","renderDestination","item","selected","h","type","class","undefined","onClick","name","size","color","variant","render","tools","Host","key","String","dsSheetNavToggle","map"],"sources":["src/wc/components/MobileBarNav/MobileBarNav.css?tag=ds-mobile-bar-nav&encapsulation=scoped","src/wc/components/MobileBarNav/MobileBarNav.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n@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-tertiary);\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav {\n  justify-content: space-between;\n  min-width: 0;\n  padding-block-end: max(var(--ds-chrome-padding), 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  -webkit-user-select: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n}\n\n.mobile-bar-nav__group {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.mobile-bar-nav__item {\n  appearance: none;\n  flex: 0 0 var(--dimension-size-500);\n  width: var(--dimension-size-500);\n  height: var(--dimension-size-500);\n  padding: var(--dimension-space-100);\n  border: 0;\n  border-radius: var(--dimension-radius-025);\n  background: transparent;\n  color: inherit;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n}\n\n.mobile-bar-nav__item--selected {\n  color: var(--color-foreground-primary);\n}\n\n/*\n * Safari can retain its native :active state after a direct touch. On coarse\n * touch-only pointers, the component-owned class provides one deterministic\n * press frame and clears it after release/cancel.\n */\n@media (hover: none) and (pointer: coarse) {\n  .mobile-bar-nav__item.ds-interaction-fill:active:not(:disabled)::after {\n    background: transparent;\n  }\n\n  .mobile-bar-nav__item--pressed.ds-interaction-fill::after,\n  .mobile-bar-nav__item--pressed.ds-interaction-fill:active:not(:disabled)::after {\n    background: var(--ds-interaction-pressed);\n  }\n}\n\n.mobile-bar-nav__divider {\n  flex: 0 0 var(--dimension-stroke-width-012);\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-iconography-lg);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.mobile-bar-nav__icon {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--dimension-iconography-lg);\n  height: var(--dimension-iconography-lg);\n}\n\n.mobile-bar-nav__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}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport {\n  shouldEmitMobileDestinationChange,\n  type MobileDestination,\n} from '../../shell/shell-responsive';\nimport type { PanelNavItem } from '../PanelNav/panel-nav-types';\nimport type { MobileBarNavDestinationDetail } from './mobile-bar-nav-types';\n\ninterface DestinationConfig {\n  id: MobileDestination;\n  icon: string;\n  label: string;\n  dot: boolean;\n}\n\nconst MINIMUM_DIRECT_PRESS_MS = 120;\n\n@Component({\n  tag: 'ds-mobile-bar-nav',\n  styleUrl: 'MobileBarNav.css',\n  scoped: true,\n})\nexport class MobileBarNav {\n  @Element() el!: HTMLElement;\n\n  @Prop() activeDestination: MobileDestination = 'area';\n  @Prop() currentArea: PanelNavItem = {\n    id: 'tracking',\n    icon: 'MapPage',\n    label: 'Tracking',\n  };\n  @Prop() sheetNavExpanded: boolean = false;\n  @Prop() menuLabel: string = 'Menu';\n  @Prop() searchLabel: string = 'Search';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() messagesLabel: string = 'Messages';\n  @Prop() agentsLabel: string = 'Agents';\n  @Prop() helpLabel: string = 'Help & Support';\n  @Prop() searchDot: boolean = false;\n  @Prop() inboxDot: boolean = false;\n  @Prop() messagesDot: boolean = false;\n  @Prop() agentsDot: boolean = false;\n\n  @State() private pressedItemId: string | null = null;\n\n  @Event() dsSheetNavToggle!: EventEmitter<boolean>;\n  @Event() dsDestinationChange!: EventEmitter<MobileBarNavDestinationDetail>;\n\n  private activePointerId: number | null = null;\n  private pressedAt = 0;\n  private pressClearTimer: ReturnType<typeof setTimeout> | null = null;\n\n  disconnectedCallback() {\n    this.clearPressedItem();\n  }\n\n  private clearPressTimer() {\n    if (this.pressClearTimer === null) return;\n    clearTimeout(this.pressClearTimer);\n    this.pressClearTimer = null;\n  }\n\n  private clearPressedItem() {\n    this.clearPressTimer();\n    this.activePointerId = null;\n    this.pressedItemId = null;\n  }\n\n  private beginDirectPress(itemId: string, event: PointerEvent) {\n    if (!event.isPrimary || event.pointerType === 'mouse' || event.button !== 0) return;\n\n    this.clearPressTimer();\n    this.activePointerId = event.pointerId;\n    this.pressedAt = performance.now();\n    this.pressedItemId = itemId;\n\n    const target = event.currentTarget as HTMLElement;\n    try {\n      target.setPointerCapture(event.pointerId);\n    } catch {\n      // Pointer capture can fail if Safari has already cancelled the stream.\n    }\n  }\n\n  private finishDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n\n    this.activePointerId = null;\n    const remaining = Math.max(\n      0,\n      MINIMUM_DIRECT_PRESS_MS - (performance.now() - this.pressedAt)\n    );\n\n    this.clearPressTimer();\n    this.pressClearTimer = setTimeout(() => {\n      this.pressClearTimer = null;\n      this.pressedItemId = null;\n    }, remaining);\n  }\n\n  private cancelDirectPress(event: PointerEvent) {\n    if (event.pointerId !== this.activePointerId) return;\n    this.clearPressedItem();\n  }\n\n  private pressHandlers(itemId: string) {\n    return {\n      onPointerDown: (event: PointerEvent) => this.beginDirectPress(itemId, event),\n      onPointerUp: (event: PointerEvent) => this.finishDirectPress(event),\n      onPointerCancel: (event: PointerEvent) => this.cancelDirectPress(event),\n      onLostPointerCapture: (event: PointerEvent) => this.finishDirectPress(event),\n    };\n  }\n\n  private destinationConfig(): DestinationConfig[] {\n    const currentArea =\n      this.activeDestination === 'help'\n        ? {\n            id: 'help' as const,\n            icon: 'CircleQuestion',\n            label: this.helpLabel,\n            dot: false,\n          }\n        : {\n            id: 'area' as const,\n            icon: this.currentArea.icon || 'MapPage',\n            label: this.currentArea.label || 'Area',\n            dot: false,\n          };\n\n    return [\n      currentArea,\n      { id: 'search', icon: 'MagnifyingGlass', label: this.searchLabel, dot: this.searchDot },\n      { id: 'inbox', icon: 'Inbox', label: this.inboxLabel, dot: this.inboxDot },\n      {\n        id: 'messages',\n        icon: 'MessageBubbleStack',\n        label: this.messagesLabel,\n        dot: this.messagesDot,\n      },\n      { id: 'agents', icon: 'AI', label: this.agentsLabel, dot: this.agentsDot },\n    ];\n  }\n\n  private selectDestination(destination: MobileDestination) {\n    if (\n      !shouldEmitMobileDestinationChange(\n        this.activeDestination,\n        destination,\n        this.sheetNavExpanded\n      )\n    ) {\n      return;\n    }\n    this.dsDestinationChange.emit({ destination });\n    // Owners may replace the visible mobile stage (and transiently drop focus\n    // in WebKit) while handling the controlled destination change.\n    requestAnimationFrame(() => {\n      void this.focusDestination(destination);\n    });\n  }\n\n  @Method()\n  async focusDestination(destination: MobileDestination | 'sheet-nav') {\n    const target = this.el.querySelector<HTMLElement>(\n      `#${\n        destination === 'sheet-nav'\n          ? 'ds-mobile-sheet-nav-trigger'\n          : `ds-mobile-bar-${destination}-trigger`\n      }`\n    );\n    target?.focus({ preventScroll: true });\n  }\n\n  private renderDestination(item: DestinationConfig) {\n    const selected = !this.sheetNavExpanded && item.id === this.activeDestination;\n    return (\n      <button\n        id={`ds-mobile-bar-${item.id}-trigger`}\n        type=\"button\"\n        class={{\n          'mobile-bar-nav__item': true,\n          'mobile-bar-nav__item--selected': selected,\n          'mobile-bar-nav__item--pressed': this.pressedItemId === item.id,\n          'ds-focus-ring-inset': true,\n          'ds-interaction-fill': true,\n        }}\n        aria-label={item.label}\n        aria-current={selected ? 'page' : undefined}\n        onClick={() => this.selectDestination(item.id)}\n        {...this.pressHandlers(item.id)}\n      >\n        <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n          <ds-icon name={item.icon} size=\"lg\" color=\"inherit\" />\n          {item.dot && (\n            <ds-badge class=\"mobile-bar-nav__dot\" variant=\"dot\" label=\"\" aria-hidden=\"true\" />\n          )}\n        </span>\n      </button>\n    );\n  }\n\n  render() {\n    const [currentArea, ...tools] = this.destinationConfig();\n\n    return (\n      <Host>\n        <nav class=\"mobile-bar-nav ds-chrome-row ds-chrome-space--md\" aria-label=\"Primary\">\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--context\">\n            <button\n              id=\"ds-mobile-sheet-nav-trigger\"\n              type=\"button\"\n              class={{\n                'mobile-bar-nav__item': true,\n                'mobile-bar-nav__item--selected': this.sheetNavExpanded,\n                'mobile-bar-nav__item--pressed':\n                  this.pressedItemId === 'sheet-nav',\n                'ds-focus-ring-inset': true,\n                'ds-interaction-fill': true,\n              }}\n              aria-label={this.menuLabel}\n              aria-expanded={String(this.sheetNavExpanded)}\n              aria-controls=\"ds-mobile-sheet-nav\"\n              onClick={() => this.dsSheetNavToggle.emit(!this.sheetNavExpanded)}\n              {...this.pressHandlers('sheet-nav')}\n            >\n              <span class=\"mobile-bar-nav__icon ds-interaction-fill__content\">\n                <ds-icon\n                  name={this.sheetNavExpanded ? 'Cross' : 'Hamburger'}\n                  size=\"lg\"\n                  color=\"inherit\"\n                />\n              </span>\n            </button>\n            <span class=\"mobile-bar-nav__divider\" aria-hidden=\"true\" />\n            {this.renderDestination(currentArea)}\n          </div>\n          <div class=\"mobile-bar-nav__group mobile-bar-nav__group--tools\">\n            {tools.map(item => this.renderDestination(item))}\n          </div>\n        </nav>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-D4j0deyd.js

@@ -0,0 +1,2 @@
+import{p as o,H as r,c as t,h as s,a as i,t as n}from"./index.js";import{g as e,i as a}from"./p-BQq26pt9.js";import{d}from"./p-dEouiXJ8.js";import{d as c}from"./p-C8U5BsJf.js";import{d as l}from"./p-Dhx_3_tf.js";import{C as u}from"./p-CuwopElg.js";const b=()=>`.ds-control--lg.sc-ds-tab-group,.ds-control--lg.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group-h,.ds-control--md.sc-ds-tab-group,.ds-control--sm.sc-ds-tab-group-h,.ds-control--sm.sc-ds-tab-group,.ds-control--xs.sc-ds-tab-group-h,.ds-control--xs.sc-ds-tab-group{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-tab-group-h,.ds-control--lg.sc-ds-tab-group{--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-tab-group-h,.ds-control--md.sc-ds-tab-group{--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-tab-group-h,.ds-control--sm.sc-ds-tab-group{--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-tab-group-h,.ds-control--xs.sc-ds-tab-group{--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-control--lg.ds-control--inset.sc-ds-tab-group-h,.ds-control--lg.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-100) - var(--dimension-space-025)   )}.ds-control--md.ds-control--inset.sc-ds-tab-group-h,.ds-control--md.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-075) - var(--dimension-space-025)   )}.ds-control--sm.ds-control--inset.sc-ds-tab-group-h,.ds-control--sm.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-050) - var(--dimension-space-025)   )}.ds-control--xs.ds-control--inset.sc-ds-tab-group-h,.ds-control--xs.ds-control--inset.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-200) - var(--dimension-space-050));--ds-control-padding-inline:calc(     var(--dimension-space-025) - var(--dimension-space-025)   )}.ds-control--lg.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--lg.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-500) - var(--dimension-space-100));--ds-control-padding-inline:calc(     var(--dimension-space-100) - var(--dimension-space-050)   )}.ds-control--md.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--md.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-400) - var(--dimension-space-100));--ds-control-padding-inline:calc(     var(--dimension-space-075) - var(--dimension-space-050)   )}.ds-control--sm.ds-control--inset-double.sc-ds-tab-group-h,.ds-control--sm.ds-control--inset-double.sc-ds-tab-group{--ds-control-height:calc(var(--dimension-size-300) - var(--dimension-space-100));--ds-control-padding-inline:calc(     var(--dimension-space-050) - var(--dimension-space-050)   )}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-tab-group-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-tab-group-h,.ds-focus-ring.sc-ds-tab-group,.ds-focus-ring-inset.sc-ds-tab-group-h,.ds-focus-ring-inset.sc-ds-tab-group{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-tab-group-h:focus-visible,.ds-focus-ring.sc-ds-tab-group:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-tab-group{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-tab-group-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-tab-group:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-tab-group::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-tab-group-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-tab-group-h,.ds-interaction-fill.sc-ds-tab-group{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-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-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before,.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-tab-group-h::before,.ds-interaction-fill.sc-ds-tab-group::before{z-index:1}.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-tab-group-h,.ds-interaction-fill--bordered.sc-ds-tab-group{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-tab-group-h,.ds-interaction-fill--selected.sc-ds-tab-group{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-tab-group-h::after,.ds-interaction-fill--grouped.sc-ds-tab-group::after,.ds-interaction-fill--grouped.sc-ds-tab-group-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-tab-group-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-tab-group:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-tab-group-h,.ds-interaction-fill--grouped.sc-ds-tab-group{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-tab-group-h>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill.sc-ds-tab-group>.ds-interaction-fill__content.sc-ds-tab-group,.ds-interaction-fill__content.sc-ds-tab-group{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-tab-group-h,.ds-interaction-fill--on-faint.sc-ds-tab-group{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-tab-group-h,.ds-interaction-fill--on-medium.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-bold.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-strong.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-translucent.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-inverted.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-media.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-always-dark.sc-ds-tab-group{--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-tab-group-h,.ds-interaction-fill--on-navigation.sc-ds-tab-group{--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)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-tab-group-h::after,.ds-interaction-fill.sc-ds-tab-group::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-tab-group-h::before,.ds-interaction-fill--selected.sc-ds-tab-group::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-tab-group-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-tab-group:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-tab-group:root,.sc-ds-tab-group-h,.ds-forced-colors-scope.sc-ds-tab-group{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-tab-group-h,.ds-control-inactive.sc-ds-tab-group{color:var(--ds-forced-color-disabled);opacity:1}}.sc-ds-tab-group-h{display:block;--_tab-group-surface-border:var(--color-border-tertiary);--_tab-group-divider:var(--color-border-secondary)}.tab-group-host--on-medium.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-medium-background-tertiary);--_tab-group-divider:var(--color-border-on-medium-background-secondary)}.tab-group-host--on-bold.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-bold-background-tertiary);--_tab-group-divider:var(--color-border-on-bold-background-secondary)}.tab-group-host--on-strong.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-border-on-strong-background-tertiary);--_tab-group-divider:var(--color-border-on-strong-background-secondary)}.tab-group-host--on-translucent.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-translucent-border-tertiary);--_tab-group-divider:var(--color-translucent-border-secondary)}.tab-group-host--on-inverted.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-inverted-border-tertiary);--_tab-group-divider:var(--color-inverted-border-secondary)}.tab-group-host--on-media.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-media-border-tertiary);--_tab-group-divider:var(--color-media-border-secondary)}.tab-group-host--on-always-dark.sc-ds-tab-group-h{--_tab-group-surface-border:var(--color-always-dark-border-tertiary);--_tab-group-divider:var(--color-always-dark-border-secondary)}.tab-list.sc-ds-tab-group{display:flex;align-items:center;gap:var(--ds-control-gap);position:relative;width:max-content;max-width:100%;height:var(--ds-control-height);padding:calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));background-color:var(--color-background-secondary);border:var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);border-radius:var(--dimension-radius-half);box-sizing:border-box}.tab-group-host--surface.sc-ds-tab-group-h .tab-list.sc-ds-tab-group{background-color:transparent}.tab.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);padding:0 var(--ds-control-padding-inline);background-color:transparent;border:none;border-radius:var(--dimension-radius-half);cursor:default;-webkit-user-select:none;user-select:none;color:var(--color-foreground-secondary);transition:color var(--effect-motion-short-2);flex-shrink:0;height:var(--ds-control-height);min-width:var(--ds-control-height);box-sizing:border-box;--_dot:var(--color-foreground-bold-brand)}.tab--selected.sc-ds-tab-group{color:var(--color-foreground-primary);background-color:var(--color-background-primary);--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--_tab-group-surface-border)}.tab-group-host--surface.sc-ds-tab-group-h .tab--selected.sc-ds-tab-group{background-color:var(--ds-interaction-active)}.tab--selected.sc-ds-tab-group:not(.ds-interaction-fill){box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.tab__content.sc-ds-tab-group{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);min-width:0}.tab__content--dot.sc-ds-tab-group{padding-right:var(--dimension-space-050)}.tab__label.sc-ds-tab-group{padding:0 var(--ds-control-label-inset);white-space:nowrap}.tab__icon.sc-ds-tab-group{flex-shrink:0}.tab__dot.sc-ds-tab-group{position:absolute;top:0;right:0;z-index:2;pointer-events:none}.on-medium.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-secondary)}.on-medium.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-medium-background-primary)}.on-bold.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-secondary)}.on-bold.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-bold-background-primary)}.on-strong.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-secondary)}.on-strong.tab--selected.sc-ds-tab-group{color:var(--color-foreground-on-strong-background-primary)}.on-translucent.sc-ds-tab-group{color:var(--color-translucent-foreground-secondary)}.on-translucent.tab--selected.sc-ds-tab-group{color:var(--color-translucent-foreground-primary)}.on-inverted.sc-ds-tab-group{color:var(--color-inverted-foreground-secondary)}.on-inverted.tab--selected.sc-ds-tab-group{color:var(--color-inverted-foreground-primary)}.on-media.sc-ds-tab-group{color:var(--color-media-foreground-secondary)}.on-media.tab--selected.sc-ds-tab-group{color:var(--color-media-foreground-primary)}.on-always-dark.sc-ds-tab-group{color:var(--color-always-dark-foreground-secondary)}.on-always-dark.tab--selected.sc-ds-tab-group{color:var(--color-always-dark-foreground-primary)}.tab-divider.sc-ds-tab-group{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--dimension-stroke-width-012);align-self:center;padding:0;flex-shrink:0;pointer-events:none}.tab-divider__line.sc-ds-tab-group{width:var(--dimension-stroke-width-012);height:var(--typography-lineheight-sm);flex-shrink:0;background-color:var(--_tab-group-divider)}`;const g=o(class o extends r{constructor(o){super();if(o!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.value="";this.tabs=[];this.size="md";this.ariaLabel=null}get selectableTabs(){return e(this.tabs)}get focusableTabId(){return this.selectableTabs.some((o=>o.id===this.value&&!o.isInactive))?this.value:this.selectableTabs.find((o=>!o.isInactive))?.id??""}selectTab(o,r){this.value=o;this.dsChange.emit(o);if(r?.focus!==false){this.focusTab(o)}}focusTab(o){const r=this.el.querySelector(`[data-tab-id="${o}"]`);r?.focus({preventScroll:true})}onValueChange(o,r){if(r===undefined||o===r)return;requestAnimationFrame((()=>{const r=document.activeElement;if(!r||!this.el.contains(r))return;const t=r.getAttribute("data-tab-id");if(t===o)return;const s=this.selectableTabs.some((r=>r.id===o&&!r.isInactive))?o:this.focusableTabId;const i=this.el.querySelector(`[data-tab-id="${s}"]`);if(i){i.focus({preventScroll:true})}else{r.blur()}}))}findEnabled(o,r){const t=this.selectableTabs;const s=t.length;for(let i=0;i<s;i++){const n=(o+r*(i+1)+s*(i+1))%s;if(!t[n]?.isInactive)return n}return o}handleKeyDown(o){const r=this.selectableTabs;if(!r.length)return;const t=o.target?.closest("[data-tab-id]")?.dataset["tabId"];const s=r.findIndex((o=>o.id===(t??this.focusableTabId)));let i=null;if(o.key==="ArrowRight"){i=this.findEnabled(s,1)}else if(o.key==="ArrowLeft"){i=this.findEnabled(s,-1)}if(o.key==="Home"){const o=r.findIndex((o=>!o.isInactive));i=o===-1?null:o}else if(o.key==="End"){const o=[...r].reverse().findIndex((o=>!o.isInactive));i=o===-1?null:r.length-1-o}if(i!==null){o.preventDefault();const t=r[i];this.selectTab(t.id)}}getBgClass(){if(!this.background)return"";if(this.background==="always-dark")return"on-always-dark";return`on-${this.background}`}render(){const o=this.getBgClass();const r=this.focusableTabId;return s(i,{key:"4814d3cb0e89bec81cad728cddbbb9315530c78b",class:{"tab-group-host":true,[`tab-group-host--${this.size}`]:true,[`ds-control--${this.size}`]:true,"tab-group-host--surface":!!o,[`tab-group-host--${o}`]:!!o}},s("div",{key:"2c6aecdc369ec39a6b4837f5f07a8e99c9ffe845",role:"tablist",class:"tab-list","aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby},this.tabs.map(((t,i)=>{if(a(t)){return s("div",{key:`divider-${i}`,class:"tab-divider","aria-hidden":"true"},s("div",{class:"tab-divider__line"}))}const n=t.id===this.value;const e=t.variant??"label";const d=e==="icon"||e==="icon-label";const c=e==="label"||e==="icon-label";const l=n&&!o;return s("button",{key:t.id,type:"button",role:"tab","data-tab-id":t.id,class:{tab:true,"tab--selected":n,[`ds-control--${this.size}`]:true,"ds-control--inset":true,"ds-focus-ring-inset":true,"ds-interaction-fill":!t.isInactive,"ds-interaction-fill--on-faint":o==="on-faint","ds-interaction-fill--on-medium":o==="on-medium","ds-interaction-fill--on-bold":o==="on-bold","ds-interaction-fill--on-strong":o==="on-strong","ds-interaction-fill--on-translucent":o==="on-translucent","ds-interaction-fill--on-inverted":o==="on-inverted","ds-interaction-fill--on-media":o==="on-media","ds-interaction-fill--on-always-dark":o==="on-always-dark","ds-control-inactive":!!t.isInactive,[o]:!!o},"aria-label":e==="icon"?t.label:undefined,"aria-selected":n,"aria-disabled":t.isInactive?"true":undefined,"aria-controls":t.panelId??undefined,disabled:t.isInactive,tabIndex:t.id===r?0:-1,onClick:()=>!t.isInactive&&this.selectTab(t.id)},s("span",{class:{tab__content:true,[`tab__content--${e}`]:true,"tab__content--dot":!!t.dot}},d&&s("ds-icon",{class:"tab__icon",name:t.icon,size:this.size,color:"inherit"}),c&&s("ds-text",{class:"tab__label",as:"span",variant:u[this.size],emphasis:l,color:"inherit"},t.label),t.dot&&s("ds-badge",{class:"tab__dot",variant:"dot",hasRing:false,label:"","aria-hidden":"true"})))}))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return b()}},[2,"ds-tab-group",{value:[1025],tabs:[16],size:[1],background:[1],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"]},[[0,"keydown","handleKeyDown"]],{value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const o=["ds-tab-group","ds-badge","ds-icon","ds-text"];o.forEach((o=>{switch(o){case"ds-tab-group":if(!customElements.get(n(o))){customElements.define(n(o),g)}break;case"ds-badge":if(!customElements.get(n(o))){d()}break;case"ds-icon":if(!customElements.get(n(o))){c()}break;case"ds-text":if(!customElements.get(n(o))){l()}break}}))}p();export{g as T,p as d};
+//# sourceMappingURL=p-D4j0deyd.js.map

package/dist/components/{p-DAM4CDXT.js.map → p-D4j0deyd.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","size","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","color","as","CONTROL_TEXT_VARIANT","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabGroupItem[] = [];\n  /** Control density: 24px small, 32px medium, or 40px large track. */\n  @Prop() size: TabGroupSize = 'md';\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private get focusableTabId(): string {\n    return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n      ? this.value\n      : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n        ? next\n        : this.focusableTabId;\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset['tabId'];\n    const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n    let nextIdx: number | null = null;\n\n    if (e.key === 'ArrowRight') {\n      nextIdx = this.findEnabled(currentIdx, 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = this.findEnabled(currentIdx, -1);\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background) return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const focusableTabId = this.focusableTabId;\n\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          [`tab-group-host--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class=\"tab-divider\"\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [`ds-control--${this.size}`]: true,\n                  'ds-control--inset': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive ? 'true' : undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={tab.id === focusableTabId ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__content: true,\n                  [`tab__content--${variant}`]: true,\n                  'tab__content--dot': !!tab.dot,\n                }}>\n                  {showIcon && (\n                    <ds-icon\n                      class=\"tab__icon\"\n                      name={tab.icon}\n                      size={this.size}\n                      color=\"inherit\"\n                    />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant={CONTROL_TEXT_VARIANT[this.size]}\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tabGroupCss","TabGroup","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","tabs","size","ariaLabel","selectableTabs","getSelectableTabs","focusableTabId","some","tab","id","isInactive","find","selectTab","options","dsChange","emit","focus","focusTab","btn","el","querySelector","preventScroll","onValueChange","next","prev","undefined","requestAnimationFrame","active","document","activeElement","contains","activeId","getAttribute","focusId","nextTab","blur","findEnabled","from","step","len","length","n","i","handleKeyDown","e","focusedId","target","closest","dataset","currentIdx","findIndex","t","nextIdx","key","first","lastEnabled","reverse","preventDefault","getBgClass","background","render","bgClass","h","Host","class","role","ariaLabelledby","map","index","isTabDivider","isSelected","variant","showIcon","showLabel","emphasizeLabel","type","label","panelId","disabled","tabIndex","onClick","tab__content","dot","name","icon","color","as","CONTROL_TEXT_VARIANT","emphasis","hasRing"],"sources":["src/wc/components/TabGroup/TabGroup.css?tag=ds-tab-group&encapsulation=scoped","src/wc/components/TabGroup/TabGroup.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/control-density-inset.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n\n:host {\n  display: block;\n  --_tab-group-surface-border: var(--color-border-tertiary);\n  --_tab-group-divider: var(--color-border-secondary);\n}\n\n:host(.tab-group-host--on-medium) {\n  --_tab-group-surface-border: var(--color-border-on-medium-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-medium-background-secondary);\n}\n\n:host(.tab-group-host--on-bold) {\n  --_tab-group-surface-border: var(--color-border-on-bold-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-bold-background-secondary);\n}\n\n:host(.tab-group-host--on-strong) {\n  --_tab-group-surface-border: var(--color-border-on-strong-background-tertiary);\n  --_tab-group-divider: var(--color-border-on-strong-background-secondary);\n}\n\n:host(.tab-group-host--on-translucent) {\n  --_tab-group-surface-border: var(--color-translucent-border-tertiary);\n  --_tab-group-divider: var(--color-translucent-border-secondary);\n}\n\n:host(.tab-group-host--on-inverted) {\n  --_tab-group-surface-border: var(--color-inverted-border-tertiary);\n  --_tab-group-divider: var(--color-inverted-border-secondary);\n}\n\n:host(.tab-group-host--on-media) {\n  --_tab-group-surface-border: var(--color-media-border-tertiary);\n  --_tab-group-divider: var(--color-media-border-secondary);\n}\n\n:host(.tab-group-host--on-always-dark) {\n  --_tab-group-surface-border: var(--color-always-dark-border-tertiary);\n  --_tab-group-divider: var(--color-always-dark-border-secondary);\n}\n\n.tab-list {\n  display: flex;\n  align-items: center;\n  gap: var(--ds-control-gap);\n  position: relative;\n  width: max-content;\n  max-width: 100%;\n  height: var(--ds-control-height);\n  padding: calc(var(--dimension-space-025) - var(--dimension-stroke-width-012));\n  background-color: var(--color-background-secondary);\n  border: var(--dimension-stroke-width-012) solid var(--_tab-group-surface-border);\n  border-radius: var(--dimension-radius-half);\n  box-sizing: border-box;\n}\n\n:host(.tab-group-host--surface) .tab-list {\n  background-color: transparent;\n}\n\n.tab {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  padding: 0 var(--ds-control-padding-inline);\n  background-color: transparent;\n  border: none;\n  border-radius: var(--dimension-radius-half);\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n  color: var(--color-foreground-secondary);\n  transition: color var(--effect-motion-short-2);\n  flex-shrink: 0;\n  height: var(--ds-control-height);\n  min-width: var(--ds-control-height);\n  box-sizing: border-box;\n  --_dot: var(--color-foreground-bold-brand);\n  /* Hover/press: `.ds-interaction-fill` fills cover the complete segment. */\n}\n\n.tab--selected {\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  /* Inset stroke on interaction-fill ::after — stays above hover wash. */\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--_tab-group-surface-border);\n}\n\n:host(.tab-group-host--surface) .tab--selected {\n  background-color: var(--ds-interaction-active);\n}\n\n.tab--selected:not(.ds-interaction-fill) {\n  box-shadow: inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color);\n}\n\n/* Inactive: `.ds-control-inactive` (50% opacity) — applied via class in TSX. */\n\n.tab__content {\n  position: relative;\n  z-index: 2;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  min-width: 0;\n}\n\n.tab__content--dot {\n  padding-right: var(--dimension-space-050);\n}\n\n.tab__label {\n  padding: 0 var(--ds-control-label-inset);\n  white-space: nowrap;\n}\n\n.tab__icon {\n  flex-shrink: 0;\n}\n\n.tab__dot {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  pointer-events: none;\n}\n\n.on-medium {\n  color: var(--color-foreground-on-medium-background-secondary);\n}\n\n.on-medium.tab--selected { color: var(--color-foreground-on-medium-background-primary); }\n\n.on-bold {\n  color: var(--color-foreground-on-bold-background-secondary);\n}\n\n.on-bold.tab--selected { color: var(--color-foreground-on-bold-background-primary); }\n\n.on-strong {\n  color: var(--color-foreground-on-strong-background-secondary);\n}\n\n.on-strong.tab--selected { color: var(--color-foreground-on-strong-background-primary); }\n\n.on-translucent { color: var(--color-translucent-foreground-secondary); }\n\n.on-translucent.tab--selected { color: var(--color-translucent-foreground-primary); }\n\n.on-inverted { color: var(--color-inverted-foreground-secondary); }\n\n.on-inverted.tab--selected { color: var(--color-inverted-foreground-primary); }\n\n.on-media { color: var(--color-media-foreground-secondary); }\n\n.on-media.tab--selected { color: var(--color-media-foreground-primary); }\n\n.on-always-dark {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.on-always-dark.tab--selected { color: var(--color-always-dark-foreground-primary); }\n\n.tab-divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--dimension-stroke-width-012);\n  align-self: center;\n  padding: 0;\n  flex-shrink: 0;\n  pointer-events: none;\n}\n\n.tab-divider__line {\n  width: var(--dimension-stroke-width-012);\n  height: var(--typography-lineheight-sm);\n  flex-shrink: 0;\n  background-color: var(--_tab-group-divider);\n}\n","import { Component, Prop, Event, EventEmitter, Element, Listen, Watch, h, Host } from '@stencil/core';\nimport { CONTROL_TEXT_VARIANT } from '../../utils';\nimport {\n  getSelectableTabs,\n  isTabDivider,\n  type TabGroupItem,\n  type TabItemTab,\n} from './tab-item-utils';\n\nexport type TabBackground =\n  | 'faint'\n  | 'medium'\n  | 'bold'\n  | 'strong'\n  | 'translucent'\n  | 'inverted'\n  | 'media'\n  | 'always-dark';\n\nexport type TabGroupSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'ds-tab-group',\n  styleUrl: 'TabGroup.css',\n  scoped: true,\n})\nexport class TabGroup {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() tabs: TabGroupItem[] = [];\n  /** Control density: 24px small, 32px medium, or 40px large track. */\n  @Prop() size: TabGroupSize = 'md';\n  @Prop() background: TabBackground | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n\n  private get selectableTabs(): TabItemTab[] {\n    return getSelectableTabs(this.tabs);\n  }\n\n  private get focusableTabId(): string {\n    return this.selectableTabs.some(tab => tab.id === this.value && !tab.isInactive)\n      ? this.value\n      : (this.selectableTabs.find(tab => !tab.isInactive)?.id ?? '');\n  }\n\n  private selectTab(id: string, options?: { focus?: boolean }) {\n    this.value = id;\n    this.dsChange.emit(id);\n    if (options?.focus !== false) {\n      this.focusTab(id);\n    }\n  }\n\n  private focusTab(id: string) {\n    const btn = this.el.querySelector(`[data-tab-id=\"${id}\"]`) as HTMLElement | null;\n    btn?.focus({ preventScroll: true });\n  }\n\n  /** Keep focus on the selected tab when value changes externally (e.g. BarNav menu). */\n  @Watch('value')\n  onValueChange(next: string, prev: string | undefined) {\n    if (prev === undefined || next === prev) return;\n\n    requestAnimationFrame(() => {\n      const active = document.activeElement as HTMLElement | null;\n      if (!active || !this.el.contains(active)) return;\n\n      const activeId = active.getAttribute('data-tab-id');\n      if (activeId === next) return;\n\n      const focusId = this.selectableTabs.some(tab => tab.id === next && !tab.isInactive)\n        ? next\n        : this.focusableTabId;\n      const nextTab = this.el.querySelector(`[data-tab-id=\"${focusId}\"]`) as HTMLElement | null;\n      if (nextTab) {\n        nextTab.focus({ preventScroll: true });\n      } else {\n        active.blur();\n      }\n    });\n  }\n\n  /**\n   * Find the next non-inactive tab index relative to `from`, stepping by `step`.\n   * Returns `from` unchanged if no other enabled tab exists.\n   */\n  private findEnabled(from: number, step: 1 | -1): number {\n    const tabs = this.selectableTabs;\n    const len = tabs.length;\n    for (let n = 0; n < len; n++) {\n      const i = (from + step * (n + 1) + len * (n + 1)) % len;\n      if (!tabs[i]?.isInactive) return i;\n    }\n    return from;\n  }\n\n  @Listen('keydown')\n  handleKeyDown(e: KeyboardEvent) {\n    const tabs = this.selectableTabs;\n    if (!tabs.length) return;\n\n    const focusedId = (e.target as Element | null)?.closest<HTMLElement>('[data-tab-id]')?.dataset['tabId'];\n    const currentIdx = tabs.findIndex(t => t.id === (focusedId ?? this.focusableTabId));\n\n    let nextIdx: number | null = null;\n\n    if (e.key === 'ArrowRight') {\n      nextIdx = this.findEnabled(currentIdx, 1);\n    } else if (e.key === 'ArrowLeft') {\n      nextIdx = this.findEnabled(currentIdx, -1);\n    }\n\n    if (e.key === 'Home') {\n      const first = tabs.findIndex(t => !t.isInactive);\n      nextIdx = first === -1 ? null : first;\n    } else if (e.key === 'End') {\n      const lastEnabled = [...tabs].reverse().findIndex(t => !t.isInactive);\n      nextIdx = lastEnabled === -1 ? null : tabs.length - 1 - lastEnabled;\n    }\n\n    if (nextIdx !== null) {\n      e.preventDefault();\n      const next = tabs[nextIdx];\n      this.selectTab(next.id);\n    }\n  }\n\n  private getBgClass(): string {\n    if (!this.background) return '';\n    if (this.background === 'always-dark') return 'on-always-dark';\n    return `on-${this.background}`;\n  }\n\n  render() {\n    const bgClass = this.getBgClass();\n    const focusableTabId = this.focusableTabId;\n\n    return (\n      <Host\n        class={{\n          'tab-group-host': true,\n          [`tab-group-host--${this.size}`]: true,\n          [`ds-control--${this.size}`]: true,\n          'tab-group-host--surface': !!bgClass,\n          [`tab-group-host--${bgClass}`]: !!bgClass,\n        }}\n      >\n        <div\n          role=\"tablist\"\n          class=\"tab-list\"\n          aria-label={this.ariaLabel}\n          aria-labelledby={this.ariaLabelledby}\n        >\n          {this.tabs.map((tab, index) => {\n            if (isTabDivider(tab)) {\n              return (\n                <div\n                  key={`divider-${index}`}\n                  class=\"tab-divider\"\n                  aria-hidden=\"true\"\n                >\n                  <div class=\"tab-divider__line\" />\n                </div>\n              );\n            }\n\n            const isSelected = tab.id === this.value;\n            const variant = tab.variant ?? 'label';\n            const showIcon = variant === 'icon' || variant === 'icon-label';\n            const showLabel = variant === 'label' || variant === 'icon-label';\n            const emphasizeLabel = isSelected && !bgClass;\n            return (\n              <button\n                key={tab.id}\n                type=\"button\"\n                role=\"tab\"\n                data-tab-id={tab.id}\n                class={{\n                  tab: true,\n                  'tab--selected': isSelected,\n                  [`ds-control--${this.size}`]: true,\n                  'ds-control--inset': true,\n                  'ds-focus-ring-inset': true,\n                  'ds-interaction-fill': !tab.isInactive,\n                  'ds-interaction-fill--on-faint': bgClass === 'on-faint',\n                  'ds-interaction-fill--on-medium': bgClass === 'on-medium',\n                  'ds-interaction-fill--on-bold': bgClass === 'on-bold',\n                  'ds-interaction-fill--on-strong': bgClass === 'on-strong',\n                  'ds-interaction-fill--on-translucent': bgClass === 'on-translucent',\n                  'ds-interaction-fill--on-inverted': bgClass === 'on-inverted',\n                  'ds-interaction-fill--on-media': bgClass === 'on-media',\n                  'ds-interaction-fill--on-always-dark': bgClass === 'on-always-dark',\n                  'ds-control-inactive': !!tab.isInactive,\n                  [bgClass]: !!bgClass,\n                }}\n                aria-label={variant === 'icon' ? tab.label : undefined}\n                aria-selected={isSelected}\n                aria-disabled={tab.isInactive ? 'true' : undefined}\n                aria-controls={tab.panelId ?? undefined}\n                disabled={tab.isInactive}\n                tabIndex={tab.id === focusableTabId ? 0 : -1}\n                onClick={() => !tab.isInactive && this.selectTab(tab.id)}\n              >\n                <span class={{\n                  tab__content: true,\n                  [`tab__content--${variant}`]: true,\n                  'tab__content--dot': !!tab.dot,\n                }}>\n                  {showIcon && (\n                    <ds-icon\n                      class=\"tab__icon\"\n                      name={tab.icon}\n                      size={this.size}\n                      color=\"inherit\"\n                    />\n                  )}\n                  {showLabel && (\n                    <ds-text\n                      class=\"tab__label\"\n                      as=\"span\"\n                      variant={CONTROL_TEXT_VARIANT[this.size]}\n                      emphasis={emphasizeLabel}\n                      color=\"inherit\"\n                    >\n                      {tab.label}\n                    </ds-text>\n                  )}\n                  {tab.dot && (\n                    <ds-badge\n                      class=\"tab__dot\"\n                      variant=\"dot\"\n                      hasRing={false}\n                      label=\"\"\n                      aria-hidden=\"true\"\n                    />\n                  )}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wPAAA,MAAMA,EAAc,IAAM,8+mB,MC0BbC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,6EAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,KAAuB,GAEvBF,KAAAG,KAAqB,KAEMH,KAAAI,UAA2B,IAsN/D,CAjNC,kBAAYC,GACV,OAAOC,EAAkBN,KAAKE,K,CAGhC,kBAAYK,GACV,OAAOP,KAAKK,eAAeG,MAAKC,GAAOA,EAAIC,KAAOV,KAAKC,QAAUQ,EAAIE,aACjEX,KAAKC,MACJD,KAAKK,eAAeO,MAAKH,IAAQA,EAAIE,cAAaD,IAAM,E,CAGvD,SAAAG,CAAUH,EAAYI,GAC5Bd,KAAKC,MAAQS,EACbV,KAAKe,SAASC,KAAKN,GACnB,GAAII,GAASG,QAAU,MAAO,CAC5BjB,KAAKkB,SAASR,E,EAIV,QAAAQ,CAASR,GACf,MAAMS,EAAMnB,KAAKoB,GAAGC,cAAc,iBAAiBX,OACnDS,GAAKF,MAAM,CAAEK,cAAe,M,CAK9B,aAAAC,CAAcC,EAAcC,GAC1B,GAAIA,IAASC,WAAaF,IAASC,EAAM,OAEzCE,uBAAsB,KACpB,MAAMC,EAASC,SAASC,cACxB,IAAKF,IAAW5B,KAAKoB,GAAGW,SAASH,GAAS,OAE1C,MAAMI,EAAWJ,EAAOK,aAAa,eACrC,GAAID,IAAaR,EAAM,OAEvB,MAAMU,EAAUlC,KAAKK,eAAeG,MAAKC,GAAOA,EAAIC,KAAOc,IAASf,EAAIE,aACpEa,EACAxB,KAAKO,eACT,MAAM4B,EAAUnC,KAAKoB,GAAGC,cAAc,iBAAiBa,OACvD,GAAIC,EAAS,CACXA,EAAQlB,MAAM,CAAEK,cAAe,M,KAC1B,CACLM,EAAOQ,M,KASL,WAAAC,CAAYC,EAAcC,GAChC,MAAMrC,EAAOF,KAAKK,eAClB,MAAMmC,EAAMtC,EAAKuC,OACjB,IAAK,IAAIC,EAAI,EAAGA,EAAIF,EAAKE,IAAK,CAC5B,MAAMC,GAAKL,EAAOC,GAAQG,EAAI,GAAKF,GAAOE,EAAI,IAAMF,EACpD,IAAKtC,EAAKyC,IAAIhC,WAAY,OAAOgC,C,CAEnC,OAAOL,C,CAIT,aAAAM,CAAcC,GACZ,MAAM3C,EAAOF,KAAKK,eAClB,IAAKH,EAAKuC,OAAQ,OAElB,MAAMK,EAAaD,EAAEE,QAA2BC,QAAqB,kBAAkBC,QAAQ,SAC/F,MAAMC,EAAahD,EAAKiD,WAAUC,GAAKA,EAAE1C,MAAQoC,GAAa9C,KAAKO,kBAEnE,IAAI8C,EAAyB,KAE7B,GAAIR,EAAES,MAAQ,aAAc,CAC1BD,EAAUrD,KAAKqC,YAAYa,EAAY,E,MAClC,GAAIL,EAAES,MAAQ,YAAa,CAChCD,EAAUrD,KAAKqC,YAAYa,GAAY,E,CAGzC,GAAIL,EAAES,MAAQ,OAAQ,CACpB,MAAMC,EAAQrD,EAAKiD,WAAUC,IAAMA,EAAEzC,aACrC0C,EAAUE,KAAU,EAAK,KAAOA,C,MAC3B,GAAIV,EAAES,MAAQ,MAAO,CAC1B,MAAME,EAAc,IAAItD,GAAMuD,UAAUN,WAAUC,IAAMA,EAAEzC,aAC1D0C,EAAUG,KAAgB,EAAK,KAAOtD,EAAKuC,OAAS,EAAIe,C,CAG1D,GAAIH,IAAY,KAAM,CACpBR,EAAEa,iBACF,MAAMlC,EAAOtB,EAAKmD,GAClBrD,KAAKa,UAAUW,EAAKd,G,EAIhB,UAAAiD,GACN,IAAK3D,KAAK4D,WAAY,MAAO,GAC7B,GAAI5D,KAAK4D,aAAe,cAAe,MAAO,iBAC9C,MAAO,MAAM5D,KAAK4D,Y,CAGpB,MAAAC,GACE,MAAMC,EAAU9D,KAAK2D,aACrB,MAAMpD,EAAiBP,KAAKO,eAE5B,OACEwD,EAACC,EAAI,CAAAV,IAAA,2CACHW,MAAO,CACL,iBAAkB,KAClB,CAAC,mBAAmBjE,KAAKG,QAAS,KAClC,CAAC,eAAeH,KAAKG,QAAS,KAC9B,4BAA6B2D,EAC7B,CAAC,mBAAmBA,OAAcA,IAGpCC,EAAA,OAAAT,IAAA,2CACEY,KAAK,UACLD,MAAM,WAAU,aACJjE,KAAKI,UAAS,kBACTJ,KAAKmE,gBAErBnE,KAAKE,KAAKkE,KAAI,CAAC3D,EAAK4D,KACnB,GAAIC,EAAa7D,GAAM,CACrB,OACEsD,EAAA,OACET,IAAK,WAAWe,IAChBJ,MAAM,cAAa,cACP,QAEZF,EAAA,OAAKE,MAAM,sB,CAKjB,MAAMM,EAAa9D,EAAIC,KAAOV,KAAKC,MACnC,MAAMuE,EAAU/D,EAAI+D,SAAW,QAC/B,MAAMC,EAAWD,IAAY,QAAUA,IAAY,aACnD,MAAME,EAAYF,IAAY,SAAWA,IAAY,aACrD,MAAMG,EAAiBJ,IAAeT,EACtC,OACEC,EAAA,UACET,IAAK7C,EAAIC,GACTkE,KAAK,SACLV,KAAK,MAAK,cACGzD,EAAIC,GACjBuD,MAAO,CACLxD,IAAK,KACL,gBAAiB8D,EACjB,CAAC,eAAevE,KAAKG,QAAS,KAC9B,oBAAqB,KACrB,sBAAuB,KACvB,uBAAwBM,EAAIE,WAC5B,gCAAiCmD,IAAY,WAC7C,iCAAkCA,IAAY,YAC9C,+BAAgCA,IAAY,UAC5C,iCAAkCA,IAAY,YAC9C,sCAAuCA,IAAY,iBACnD,mCAAoCA,IAAY,cAChD,gCAAiCA,IAAY,WAC7C,sCAAuCA,IAAY,iBACnD,wBAAyBrD,EAAIE,WAC7BmD,CAACA,KAAYA,GACd,aACWU,IAAY,OAAS/D,EAAIoE,MAAQnD,UAAS,gBACvC6C,EAAU,gBACV9D,EAAIE,WAAa,OAASe,UAAS,gBACnCjB,EAAIqE,SAAWpD,UAC9BqD,SAAUtE,EAAIE,WACdqE,SAAUvE,EAAIC,KAAOH,EAAiB,GAAI,EAC1C0E,QAAS,KAAOxE,EAAIE,YAAcX,KAAKa,UAAUJ,EAAIC,KAErDqD,EAAA,QAAME,MAAO,CACXiB,aAAc,KACd,CAAC,iBAAiBV,KAAY,KAC9B,sBAAuB/D,EAAI0E,MAE1BV,GACCV,EAAA,WACEE,MAAM,YACNmB,KAAM3E,EAAI4E,KACVlF,KAAMH,KAAKG,KACXmF,MAAM,YAGTZ,GACCX,EAAA,WACEE,MAAM,aACNsB,GAAG,OACHf,QAASgB,EAAqBxF,KAAKG,MACnCsF,SAAUd,EACVW,MAAM,WAEL7E,EAAIoE,OAGRpE,EAAI0E,KACHpB,EAAA,YACEE,MAAM,WACNO,QAAQ,MACRkB,QAAS,MACTb,MAAM,GAAE,cACI,UAIX,K","ignoreList":[]}

package/dist/components/p-D5sIwLjA.js

@@ -0,0 +1,2 @@
+import{p as e,H as o,h as s,a,t}from"./index.js";import{C as d}from"./p-BnhGV__o.js";import{d as i}from"./p-dEouiXJ8.js";import{d as c}from"./p-DStd98dM.js";import{d as n}from"./p-C8U5BsJf.js";import{d as r}from"./p-Ca-I2UnB.js";import{d as l}from"./p-Dhx_3_tf.js";import{d as f}from"./p-DyqLVdJp.js";const b=()=>`.sc-ds-code-block-h{display:block;width:100%;min-width:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.code-block.sc-ds-code-block{width:100%;min-width:0;margin:0;overflow:hidden;border-radius:var(--dimension-radius-050);background:var(--color-background-strong-neutral);color:var(--color-foreground-faint-neutral);box-sizing:border-box}.code-block__header.sc-ds-code-block{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);padding:var(--dimension-space-050) var(--dimension-space-100);background:var(--color-background-strong-neutral);box-sizing:border-box}pre.sc-ds-code-block{margin:0;padding:var(--dimension-space-150);overflow:auto;font-family:var(     --typography-font-family-code,     'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',     Menlo, Monaco, Consolas, 'Liberation Mono', monospace   );font-size:var(--typography-fontsize-sm);font-variant-ligatures:var(--ds-code-font-variant-ligatures, normal);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none);tab-size:2;-webkit-user-select:text;user-select:text}code.sc-ds-code-block{font:inherit;white-space:pre}`;const p=e(class e extends o{constructor(e){super();if(e!==false){this.__registerHost()}this.code="";this.language="";this.filename="";this.copied=false;this.copyFeedback=new d((e=>{this.copied=e}));this.copy=async()=>{await this.copyFeedback.copy(this.code)}}connectedCallback(){this.copyFeedback.connect()}handleCodeChange(){this.copyFeedback.reset()}disconnectedCallback(){this.copyFeedback.disconnect()}render(){const e=this.filename||this.language||"Code";return s(a,{key:"dad441bb5383b12d47e28fa3ad2fa04885366dfa"},s("figure",{key:"ee3df36d215daa24d62dadea6f02ca29f0eca92c",class:"code-block"},s("figcaption",{key:"d69d153b43c18db66f44c60b77080a2e9240c7be",class:"code-block__header"},s("ds-text",{key:"4371ae7f47554f754df2e5868991d4ada88871bb",as:"span",variant:"text-caption",emphasis:true,color:"on-strong"},e),s("ds-tooltip",{key:"8bac639346fc22c00447cb03519ea4e8ec7861d6",label:this.copied?"Copied":"Copy code",side:"bottom",size:"sm"},s("ds-button-unfilled",{key:"a7af54fdf35524c052990fcd0faea9d2bbbd34c8",variant:"icon",icon:this.copied?"Check":"Copy",size:"xs","aria-label":this.copied?"Copied":"Copy code",hasBorder:false,onDsClick:this.copy}))),s("pre",{key:"c2c32fcd2a78cddb056d4801a9fc20d23c4530c6"},s("code",{key:"f11624e1f57f311c0a3e7bd7460c946e479f8f10"},this.code))))}static get watchers(){return{code:[{handleCodeChange:0}]}}static get style(){return b()}},[2,"ds-code-block",{code:[1],language:[1],filename:[1],copied:[32]},undefined,{code:[{handleCodeChange:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["ds-code-block","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-code-block":if(!customElements.get(t(e))){customElements.define(t(e),p)}break;case"ds-badge":if(!customElements.get(t(e))){i()}break;case"ds-button-unfilled":if(!customElements.get(t(e))){c()}break;case"ds-icon":if(!customElements.get(t(e))){n()}break;case"ds-loader":if(!customElements.get(t(e))){r()}break;case"ds-text":if(!customElements.get(t(e))){l()}break;case"ds-tooltip":if(!customElements.get(t(e))){f()}break}}))}m();export{p as C,m as d};
+//# sourceMappingURL=p-D5sIwLjA.js.map

package/dist/components/p-D5sIwLjA.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["codeBlockCss","CodeBlock","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","code","language","filename","copied","copyFeedback","ClipboardFeedbackController","copy","async","connectedCallback","connect","handleCodeChange","reset","disconnectedCallback","disconnect","render","label","h","Host","key","class","as","variant","emphasis","color","side","size","icon","hasBorder","onDsClick"],"sources":["src/wc/components/CodeBlock/CodeBlock.css?tag=ds-code-block&encapsulation=scoped","src/wc/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.code-block {\n  width: 100%;\n  min-width: 0;\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-strong-neutral);\n  color: var(--color-foreground-faint-neutral);\n  box-sizing: border-box;\n}\n\n.code-block__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n  background: var(--color-background-strong-neutral);\n  box-sizing: border-box;\n}\n\npre {\n  margin: 0;\n  padding: var(--dimension-space-150);\n  overflow: auto;\n  font-family: var(\n    --typography-font-family-code,\n    'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',\n    Menlo, Monaco, Consolas, 'Liberation Mono', monospace\n  );\n  font-size: var(--typography-fontsize-sm);\n  font-variant-ligatures: var(--ds-code-font-variant-ligatures, normal);\n  font-weight: var(--typography-weight-regular);\n  line-height: var(--typography-lineheight-sm);\n  letter-spacing: var(--typography-letterspacing-none);\n  tab-size: 2;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ncode {\n  font: inherit;\n  white-space: pre;\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ClipboardFeedbackController } from '../../utils/clipboard';\n\n@Component({\n  tag: 'ds-code-block',\n  styleUrl: 'CodeBlock.css',\n  scoped: true,\n})\nexport class CodeBlock {\n  @Prop() code: string = '';\n  @Prop() language: string = '';\n  @Prop() filename: string = '';\n\n  @State() private copied: boolean = false;\n  private readonly copyFeedback = new ClipboardFeedbackController(copied => {\n    this.copied = copied;\n  });\n\n  connectedCallback() {\n    this.copyFeedback.connect();\n  }\n\n  @Watch('code')\n  handleCodeChange() {\n    this.copyFeedback.reset();\n  }\n\n  disconnectedCallback() {\n    this.copyFeedback.disconnect();\n  }\n\n  private copy = async () => {\n    await this.copyFeedback.copy(this.code);\n  };\n\n  render() {\n    const label = this.filename || this.language || 'Code';\n    return (\n      <Host>\n        <figure class=\"code-block\">\n          <figcaption class=\"code-block__header\">\n            <ds-text as=\"span\" variant=\"text-caption\" emphasis color=\"on-strong\">\n              {label}\n            </ds-text>\n            <ds-tooltip label={this.copied ? 'Copied' : 'Copy code'} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon={this.copied ? 'Check' : 'Copy'}\n                size=\"xs\"\n                aria-label={this.copied ? 'Copied' : 'Copy code'}\n                hasBorder={false}\n                onDsClick={this.copy}\n              />\n            </ds-tooltip>\n          </figcaption>\n          <pre>\n            <code>{this.code}</code>\n          </pre>\n        </figure>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6SAAA,MAAMA,EAAe,IAAM,wwC,MCQdC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,4CAMUC,KAAAC,KAAe,GACfD,KAAAE,SAAmB,GACnBF,KAAAG,SAAmB,GAEVH,KAAAI,OAAkB,MAClBJ,KAAAK,aAAe,IAAIC,GAA4BF,IAC9DJ,KAAKI,OAASA,CAAM,IAgBdJ,KAAAO,KAAOC,gBACPR,KAAKK,aAAaE,KAAKP,KAAKC,KAAK,CA8B1C,CA5CC,iBAAAQ,GACET,KAAKK,aAAaK,S,CAIpB,gBAAAC,GACEX,KAAKK,aAAaO,O,CAGpB,oBAAAC,GACEb,KAAKK,aAAaS,Y,CAOpB,MAAAC,GACE,MAAMC,EAAQhB,KAAKG,UAAYH,KAAKE,UAAY,OAChD,OACEe,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,cACZH,EAAA,cAAAE,IAAA,2CAAYC,MAAM,sBAChBH,EAAA,WAAAE,IAAA,2CAASE,GAAG,OAAOC,QAAQ,eAAeC,SAAQ,KAACC,MAAM,aACtDR,GAEHC,EAAA,cAAAE,IAAA,2CAAYH,MAAOhB,KAAKI,OAAS,SAAW,YAAaqB,KAAK,SAASC,KAAK,MAC1ET,EAAA,sBAAAE,IAAA,2CACEG,QAAQ,OACRK,KAAM3B,KAAKI,OAAS,QAAU,OAC9BsB,KAAK,KAAI,aACG1B,KAAKI,OAAS,SAAW,YACrCwB,UAAW,MACXC,UAAW7B,KAAKO,SAItBU,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,4CAAOnB,KAAKC,Q","ignoreList":[]}

package/dist/components/p-D9CDoQBx.js

@@ -0,0 +1,2 @@
+import{p as s,H as e,c as t,h as o,a as i,t as l}from"./index.js";import{o as a,a as n,r,b as d,d as h}from"./p-Dbobj7DI.js";import{i as c,r as m}from"./p-DNpE0RBz.js";import{d as u}from"./p-dEouiXJ8.js";import{d as b}from"./p-DStd98dM.js";import{d as p}from"./p-C8U5BsJf.js";import{d as f}from"./p-Ca-I2UnB.js";import{d as g}from"./p-CMbcRN92.js";import{d as v}from"./p-B94M62Tx.js";import{d as _}from"./p-m5CSrx_s.js";import{d as k}from"./p-B53Vpuqq.js";import{d as w}from"./p-CdKz-QT2.js";import{d as y}from"./p-GWUTrIlk.js";import{d as C}from"./p-D4j0deyd.js";import{d as x}from"./p-Dhx_3_tf.js";import{d as E}from"./p-DyqLVdJp.js";const j=()=>`.sc-ds-shell-tools-h{display:block;min-width:0;min-height:0;height:100%;background:transparent}[responsive-mode='mobile'].sc-ds-shell-tools-h{width:100%;background:var(--color-background-primary)}.shell-tools__desktop.sc-ds-shell-tools,.shell-tools__desktop.sc-ds-shell-tools ds-panel-tools.sc-ds-shell-tools,.shell-tools__mobile.sc-ds-shell-tools{display:block;min-width:0;min-height:0;height:100%}.shell-tools__mobile.sc-ds-shell-tools{display:grid;grid-template-rows:auto minmax(0, 1fr);background:var(--color-background-primary)}.shell-tools__mobile-header.sc-ds-shell-tools{grid-row:1}.shell-tools__mobile-body.sc-ds-shell-tools,.shell-tools__view.sc-ds-shell-tools{min-width:0;min-height:0;height:100%}.shell-tools__mobile-body.sc-ds-shell-tools{grid-row:2;overflow:hidden}.shell-tools__view.sc-ds-shell-tools{overflow:auto;overscroll-behavior:contain}.shell-tools__view[hidden].sc-ds-shell-tools{display:none}.shell-tools__view.sc-ds-shell-tools-s>*,.shell-tools__view .sc-ds-shell-tools-s>*{min-height:0}`;const D=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.dsToolChange=t(this,"dsToolChange");this.dsPresentationChange=t(this,"dsPresentationChange");this.dsHeaderBack=t(this,"dsHeaderBack");this.dsHeaderAction=t(this,"dsHeaderAction");this.responsiveMode="desktop";this.open=false;this.activeTool="";this.presentation="drawer";this.fullscreenHeaderMode="shared";this.items=[];this.headers={};this.storageKey="";this.toolsLabel="Tools";this.toolShortcutsLabel="Tool shortcuts";this.inboxLabel="Inbox";this.inboxNavigationLabel="Inbox sections";this.panelToolsEl=null;this.selectInboxTool=s=>{const e=s.detail;if(!this.availableInboxTools.includes(e)||e===this.mobileActiveTool)return;this.open=true;this.activeTool=e;this.dsToolChange.emit({id:e,selected:true})};this.handlePanelToolChange=s=>{this.activeTool=s.detail.id;this.open=s.detail.selected};this.handlePanelPresentationChange=s=>{this.presentation=s.detail.presentation};this.handleMobileHeaderAction=(s,e,t)=>{t.stopPropagation();this.dsHeaderAction.emit({tool:s,id:e})}}presentationChanged(s,e){if(s===e)return;if(this.panelToolsEl&&this.panelToolsEl.getAttribute("presentation")!==s){this.panelToolsEl.setAttribute("presentation",s)}}get resolvedItems(){return this.items??[]}get availableInboxTools(){return this.resolvedItems.filter((s=>!s.isInactive&&(s.mobileDestination==="inbox"||c(s.id)))).map((s=>s.id))}get mobileViewOrder(){return a(this.resolvedItems).map((s=>s.id))}toolLabel(s){const e=this.resolvedItems.find((e=>e.id===s));return e?.label??e?.ariaLabel??n[s]??s}get mobileActiveTool(){const s=this.resolvedItems.find((s=>s.id===this.activeTool));const e=s?.mobileDestination==="inbox"||c(this.activeTool);if(!e)return this.activeTool;return m(this.activeTool,this.availableInboxTools)}componentWillLoad(){this.reconcileAvailability()}handleItemsChange(){this.reconcileAvailability()}reconcileAvailability(){const s=r(this.resolvedItems,this.open,this.activeTool);this.open=s.open;this.activeTool=s.activeTool}resolvedHeaders(){return this.headers??{}}activeHeader(s){return this.resolvedHeaders()[s]??{}}activateMobileTool(s){const e=this.resolvedItems.find((e=>e.id===s));if(!e||e.isInactive)return;const t=d(this.open,this.activeTool,s);this.open=t.open;this.activeTool=t.activeTool;this.dsToolChange.emit({id:s,selected:t.selected})}async activateTool(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.activateTool(s));return}this.activateMobileTool(s)}async closeDrawer(){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.closeDrawer());return}if(!this.open)return;const s=this.activeTool;this.open=false;if(s)this.dsToolChange.emit({id:s,selected:false})}async focusHeaderAction(s){if(this.responsiveMode!=="mobile"){await(this.panelToolsEl?.focusHeaderAction(s));return}const e=this.el.querySelector(`[data-header-action-id="${CSS.escape(s)}"]`);await(e?.setFocus?.())}renderForwardedSlots(){return this.mobileViewOrder.flatMap((s=>[o("slot",{name:s,slot:s}),o("slot",{name:`${s}-view`,slot:`${s}-view`})]))}renderDesktop(){return o("div",{class:"shell-tools__desktop"},o("ds-panel-tools",{open:this.open,activeTool:this.activeTool,presentation:this.presentation,fullscreenHeaderMode:this.fullscreenHeaderMode,items:this.resolvedItems,headers:this.resolvedHeaders(),storageKey:this.storageKey,toolsLabel:this.toolsLabel,toolShortcutsLabel:this.toolShortcutsLabel,ref:s=>{this.panelToolsEl=s},onDsToolChange:this.handlePanelToolChange,onDsPresentationChange:this.handlePanelPresentationChange},this.renderForwardedSlots()))}renderMobileHeader(s){const e=this.activeHeader(s);const t=e.title?.trim();const i=t||this.toolLabel(s);const l=(e.actions??[]).filter((s=>s.id!=="fullscreen"));const a=c(s)&&!e.showBack;const n=a?this.availableInboxTools.map((s=>{const e=this.resolvedItems.find((e=>e.id===s));return{id:s,label:this.toolLabel(s),variant:"label",dot:e?.dot}})):[];return o("ds-mobile-header",{class:"shell-tools__mobile-header",heading:i,headingLevel:"h2",sections:n,value:s,sectionsAriaLabel:this.inboxNavigationLabel,sectionsPresentation:a?"segmented":"switcher",sectionsSize:"lg",onDsSectionChange:this.selectInboxTool},e.showBack?o("ds-tooltip",{slot:"leading",label:e.backAriaLabel||"Back",side:"bottom",size:"sm"},o("ds-button-unfilled",{variant:"icon",icon:e.backIcon||"ChevronLeft",size:"md","aria-label":e.backAriaLabel||"Back",activeFill:false,hasBorder:false,onDsClick:()=>this.dsHeaderBack.emit({tool:s})})):null,l.map((e=>o("ds-tooltip",{slot:"trailing",key:e.id,label:e.ariaLabel,side:"bottom",size:"sm"},o("ds-button-unfilled",{id:e.triggerId||undefined,"data-header-action-id":e.id,variant:"icon",icon:e.icon,size:"md","aria-label":e.ariaLabel,haspopup:e.haspopup,controls:e.controls,expanded:e.expanded,pressed:e.pressed,isActive:!!e.expanded,isInactive:e.isInactive,activeFill:false,hasBorder:false,onDsClick:t=>this.handleMobileHeaderAction(s,e.id,t)})))))}renderMobile(){const s=this.mobileActiveTool;return o("div",{class:"shell-tools__mobile","aria-hidden":this.open&&s?undefined:"true",inert:this.open&&s?undefined:true},s?this.renderMobileHeader(s):null,o("div",{class:"shell-tools__mobile-body"},this.mobileViewOrder.map((e=>{const t=this.open&&e===s;return o("div",{class:{"shell-tools__view":true,"shell-tools__view--active":t},hidden:!t,"aria-hidden":t?undefined:"true",inert:t?undefined:true},o("slot",{name:`${e}-view`},o("slot",{name:e})))}))))}render(){const s=this.responsiveMode==="mobile";return o(i,{key:"b64e0cafee73cf8c6ac2e3c7cef4e060b2c9ec69",role:s?this.presentation==="fullscreen"?"dialog":"complementary":undefined,"aria-modal":s&&this.presentation==="fullscreen"?"true":undefined,"aria-label":s?this.toolsLabel:undefined},s?this.renderMobile():this.renderDesktop())}get el(){return this}static get watchers(){return{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}}static get style(){return j()}},[262,"ds-shell-tools",{responsiveMode:[513,"responsive-mode"],open:[1540],activeTool:[1537,"active-tool"],presentation:[1537],fullscreenHeaderMode:[513,"fullscreen-header-mode"],items:[16],headers:[16],storageKey:[1,"storage-key"],toolsLabel:[1,"tools-label"],toolShortcutsLabel:[1,"tool-shortcuts-label"],inboxLabel:[1,"inbox-label"],inboxNavigationLabel:[1,"inbox-navigation-label"],activateTool:[64],closeDrawer:[64],focusHeaderAction:[64]},undefined,{presentation:[{presentationChanged:0}],items:[{handleItemsChange:0}]}]);function T(){if(typeof customElements==="undefined"){return}const s=["ds-shell-tools","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-panel-tool-header","ds-panel-tools","ds-swatch-picker","ds-switch","ds-tab-group","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-shell-tools":if(!customElements.get(l(s))){customElements.define(l(s),D)}break;case"ds-badge":if(!customElements.get(l(s))){u()}break;case"ds-button-unfilled":if(!customElements.get(l(s))){b()}break;case"ds-icon":if(!customElements.get(l(s))){p()}break;case"ds-loader":if(!customElements.get(l(s))){f()}break;case"ds-menu":if(!customElements.get(l(s))){g()}break;case"ds-mobile-header":if(!customElements.get(l(s))){v()}break;case"ds-mobile-section-switcher":if(!customElements.get(l(s))){_()}break;case"ds-panel-tool-header":if(!customElements.get(l(s))){k()}break;case"ds-panel-tools":if(!customElements.get(l(s))){h()}break;case"ds-swatch-picker":if(!customElements.get(l(s))){w()}break;case"ds-switch":if(!customElements.get(l(s))){y()}break;case"ds-tab-group":if(!customElements.get(l(s))){C()}break;case"ds-text":if(!customElements.get(l(s))){x()}break;case"ds-tooltip":if(!customElements.get(l(s))){E()}break}}))}T();export{D as S,T as d};
+//# sourceMappingURL=p-D9CDoQBx.js.map

package/dist/components/{p-C-aCs6ID.js.map → p-D9CDoQBx.js.map}

@@ -1 +1 @@
-{"version":3,"names":["shellToolsCss","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","headers","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","availableInboxTools","includes","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","presentationChanged","next","previous","getAttribute","setAttribute","resolvedItems","filter","item","isInactive","mobileDestination","isShellInboxTool","map","mobileViewOrder","orderPanelToolsItems","toolLabel","find","candidate","label","ariaLabel","PANEL_TOOLS_LABELS","inbox","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","reconcilePanelToolsAvailability","resolvedHeaders","activeHeader","activateMobileTool","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","querySelector","CSS","escape","setFocus","renderForwardedSlots","flatMap","h","name","slot","renderDesktop","class","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","trim","actions","inboxRoot","showBack","sections","variant","dot","heading","headingLevel","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","onDsSectionChange","backAriaLabel","side","size","icon","backIcon","activeFill","hasBorder","onDsClick","dsHeaderBack","key","triggerId","undefined","haspopup","controls","expanded","pressed","isActive","renderMobile","inert","active","hidden","render","mobile","Host","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=scoped","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: transparent;\n}\n\n:host([responsive-mode='mobile']) {\n  width: 100%;\n  background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-header {\n  grid-row: 1;\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile-body {\n  grid-row: 2;\n  overflow: hidden;\n}\n\n.shell-tools__view {\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n  display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n  min-height: 0;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  orderPanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  scoped: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(\n        item =>\n          !item.isInactive &&\n          (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n      )\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileViewOrder(): PanelToolsToolId[] {\n    return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n  }\n\n  private toolLabel(id: PanelToolsToolId): string {\n    const item = this.resolvedItems.find(candidate => candidate.id === id);\n    return (\n      item?.label ??\n      item?.ariaLabel ??\n      PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n      id\n    );\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n    const inbox =\n      item?.mobileDestination === 'inbox' || isShellInboxTool(this.activeTool);\n    if (!inbox) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  }\n\n  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return this.mobileViewOrder.flatMap(id => [\n      <slot name={id} slot={id} />,\n      <slot name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || this.toolLabel(tool);\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const inboxRoot = isShellInboxTool(tool) && !header.showBack;\n    const sections =\n      inboxRoot\n        ? this.availableInboxTools.map(id => {\n            const item = this.resolvedItems.find(candidate => candidate.id === id);\n            return {\n              id,\n              label: this.toolLabel(id),\n              variant: 'label' as const,\n              dot: item?.dot,\n            };\n          })\n        : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        sectionsPresentation={inboxRoot ? 'segmented' : 'switcher'}\n        sectionsSize=\"lg\"\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip\n            slot=\"leading\"\n            label={header.backAriaLabel || 'Back'}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\n          <ds-tooltip\n            slot=\"trailing\"\n            key={action.id}\n            label={action.ariaLabel}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              id={action.triggerId || undefined}\n              data-header-action-id={action.id}\n              variant=\"icon\"\n              icon={action.icon}\n              size=\"md\"\n              aria-label={action.ariaLabel}\n              haspopup={action.haspopup}\n              controls={action.controls}\n              expanded={action.expanded}\n              pressed={action.pressed}\n              isActive={!!action.expanded}\n              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)}\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {this.mobileViewOrder.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile\n            ? this.presentation === 'fullscreen'\n              ? 'dialog'\n              : 'complementary'\n            : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["shellToolsCss","ShellTools","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","responsiveMode","open","activeTool","presentation","fullscreenHeaderMode","items","headers","storageKey","toolsLabel","toolShortcutsLabel","inboxLabel","inboxNavigationLabel","panelToolsEl","selectInboxTool","event","id","detail","availableInboxTools","includes","mobileActiveTool","dsToolChange","emit","selected","handlePanelToolChange","handlePanelPresentationChange","handleMobileHeaderAction","tool","stopPropagation","dsHeaderAction","presentationChanged","next","previous","getAttribute","setAttribute","resolvedItems","filter","item","isInactive","mobileDestination","isShellInboxTool","map","mobileViewOrder","orderPanelToolsItems","toolLabel","find","candidate","label","ariaLabel","PANEL_TOOLS_LABELS","inbox","resolveAvailableInboxTool","componentWillLoad","reconcileAvailability","handleItemsChange","reconcilePanelToolsAvailability","resolvedHeaders","activeHeader","activateMobileTool","entry","resolvePanelToolActivation","activateTool","closeDrawer","focusHeaderAction","action","el","querySelector","CSS","escape","setFocus","renderForwardedSlots","flatMap","h","name","slot","renderDesktop","class","ref","element","onDsToolChange","onDsPresentationChange","renderMobileHeader","header","configuredTitle","title","trim","actions","inboxRoot","showBack","sections","variant","dot","heading","headingLevel","value","sectionsAriaLabel","sectionsPresentation","sectionsSize","onDsSectionChange","backAriaLabel","side","size","icon","backIcon","activeFill","hasBorder","onDsClick","dsHeaderBack","key","triggerId","undefined","haspopup","controls","expanded","pressed","isActive","renderMobile","inert","active","hidden","render","mobile","Host","role"],"sources":["src/wc/components/ShellTools/ShellTools.css?tag=ds-shell-tools&encapsulation=scoped","src/wc/components/ShellTools/ShellTools.tsx"],"sourcesContent":[":host {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n  background: transparent;\n}\n\n:host([responsive-mode='mobile']) {\n  width: 100%;\n  background: var(--color-background-primary);\n}\n\n.shell-tools__desktop,\n.shell-tools__desktop ds-panel-tools,\n.shell-tools__mobile {\n  display: block;\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile {\n  display: grid;\n  grid-template-rows: auto minmax(0, 1fr);\n  background: var(--color-background-primary);\n}\n\n.shell-tools__mobile-header {\n  grid-row: 1;\n}\n\n.shell-tools__mobile-body,\n.shell-tools__view {\n  min-width: 0;\n  min-height: 0;\n  height: 100%;\n}\n\n.shell-tools__mobile-body {\n  grid-row: 2;\n  overflow: hidden;\n}\n\n.shell-tools__view {\n  overflow: auto;\n  overscroll-behavior: contain;\n}\n\n.shell-tools__view[hidden] {\n  display: none;\n}\n\n.shell-tools__view ::slotted(*) {\n  min-height: 0;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  PANEL_TOOLS_LABELS,\n  type PanelToolsHeaderConfig,\n  type PanelToolsHeaders,\n  type PanelToolsItem,\n  type PanelToolsToolId,\n} from '../PanelTools/panel-tools-types';\nimport {\n  orderPanelToolsItems,\n  reconcilePanelToolsAvailability,\n  resolvePanelToolActivation,\n} from '../PanelTools/panel-tools-utils';\nimport {\n  isShellInboxTool,\n  resolveAvailableInboxTool,\n  type ShellInboxToolId,\n  type ShellResponsiveMode,\n} from '../../shell/shell-responsive';\n\n@Component({\n  tag: 'ds-shell-tools',\n  styleUrl: 'ShellTools.css',\n  scoped: true,\n})\nexport class ShellTools {\n  @Element() el!: HTMLElement;\n\n  /** Resolved by ShellApp; mobile uses a full-stage tool presentation. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop({ mutable: true, attribute: 'active-tool', reflect: true })\n  activeTool: PanelToolsToolId | '' = '';\n  @Prop({ mutable: true, reflect: true }) presentation: 'drawer' | 'fullscreen' = 'drawer';\n  @Prop({ attribute: 'fullscreen-header-mode', reflect: true })\n  fullscreenHeaderMode: 'shared' | 'split' = 'shared';\n  @Prop() items: PanelToolsItem[] = [];\n  @Prop() headers: PanelToolsHeaders = {};\n  @Prop({ attribute: 'storage-key' }) storageKey: string = '';\n  @Prop() toolsLabel: string = 'Tools';\n  @Prop() toolShortcutsLabel: string = 'Tool shortcuts';\n  @Prop() inboxLabel: string = 'Inbox';\n  @Prop() inboxNavigationLabel: string = 'Inbox sections';\n\n  @Watch('presentation')\n  presentationChanged(next: 'drawer' | 'fullscreen', previous: 'drawer' | 'fullscreen') {\n    if (next === previous) return;\n\n    /*\n     * Consumers update ShellTools and their slotted master/detail layout in the\n     * same render. Forward the request immediately so PanelTools can conceal\n     * its surface until its matching render class commits on the next frame.\n     */\n    if (this.panelToolsEl && this.panelToolsEl.getAttribute('presentation') !== next) {\n      this.panelToolsEl.setAttribute('presentation', next);\n    }\n  }\n\n  @Event({ bubbles: true, composed: true }) dsToolChange!: EventEmitter<{\n    id: PanelToolsToolId;\n    selected: boolean;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsPresentationChange!: EventEmitter<{\n    presentation: 'drawer' | 'fullscreen';\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderBack!: EventEmitter<{\n    tool: PanelToolsToolId;\n  }>;\n  @Event({ bubbles: true, composed: true }) dsHeaderAction!: EventEmitter<{\n    tool: PanelToolsToolId;\n    id: string;\n  }>;\n\n  private panelToolsEl: HTMLDsPanelToolsElement | null = null;\n\n  private get resolvedItems(): PanelToolsItem[] {\n    return this.items ?? [];\n  }\n\n  private get availableInboxTools(): ShellInboxToolId[] {\n    return this.resolvedItems\n      .filter(\n        item =>\n          !item.isInactive &&\n          (item.mobileDestination === 'inbox' || isShellInboxTool(item.id))\n      )\n      .map(item => item.id as ShellInboxToolId);\n  }\n\n  private get mobileViewOrder(): PanelToolsToolId[] {\n    return orderPanelToolsItems(this.resolvedItems).map(item => item.id);\n  }\n\n  private toolLabel(id: PanelToolsToolId): string {\n    const item = this.resolvedItems.find(candidate => candidate.id === id);\n    return (\n      item?.label ??\n      item?.ariaLabel ??\n      PANEL_TOOLS_LABELS[id as keyof typeof PANEL_TOOLS_LABELS] ??\n      id\n    );\n  }\n\n  private get mobileActiveTool(): PanelToolsToolId | '' {\n    const item = this.resolvedItems.find(candidate => candidate.id === this.activeTool);\n    const inbox =\n      item?.mobileDestination === 'inbox' || isShellInboxTool(this.activeTool);\n    if (!inbox) return this.activeTool;\n    return resolveAvailableInboxTool(this.activeTool, this.availableInboxTools);\n  }\n\n  componentWillLoad() {\n    this.reconcileAvailability();\n  }\n\n  @Watch('items')\n  handleItemsChange() {\n    this.reconcileAvailability();\n  }\n\n  private reconcileAvailability() {\n    const next = reconcilePanelToolsAvailability(this.resolvedItems, this.open, this.activeTool);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n  }\n\n  private resolvedHeaders(): PanelToolsHeaders {\n    return this.headers ?? {};\n  }\n\n  private activeHeader(tool: PanelToolsToolId): PanelToolsHeaderConfig {\n    return this.resolvedHeaders()[tool] ?? {};\n  }\n\n  private activateMobileTool(id: PanelToolsToolId) {\n    const item = this.resolvedItems.find(entry => entry.id === id);\n    if (!item || item.isInactive) return;\n    const next = resolvePanelToolActivation(this.open, this.activeTool, id);\n    this.open = next.open;\n    this.activeTool = next.activeTool;\n    this.dsToolChange.emit({ id, selected: next.selected });\n  }\n\n  private selectInboxTool = (event: CustomEvent<string>) => {\n    const id = event.detail;\n    if (!this.availableInboxTools.includes(id) || id === this.mobileActiveTool) return;\n    this.open = true;\n    this.activeTool = id;\n    this.dsToolChange.emit({ id, selected: true });\n  };\n\n  private handlePanelToolChange = (\n    event: CustomEvent<{ id: PanelToolsToolId; selected: boolean }>\n  ) => {\n    this.activeTool = event.detail.id;\n    this.open = event.detail.selected;\n  };\n\n  private handlePanelPresentationChange = (\n    event: CustomEvent<{ presentation: 'drawer' | 'fullscreen' }>\n  ) => {\n    this.presentation = event.detail.presentation;\n  };\n\n  private handleMobileHeaderAction = (\n    tool: PanelToolsToolId,\n    id: string,\n    event: CustomEvent<MouseEvent>\n  ) => {\n    event.stopPropagation();\n    this.dsHeaderAction.emit({ tool, id });\n  };\n\n  /** Match PanelTools' imperative activation contract in every responsive mode. */\n  @Method()\n  async activateTool(id: PanelToolsToolId) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.activateTool(id);\n      return;\n    }\n    this.activateMobileTool(id);\n  }\n\n  /** Close the active global tool surface. */\n  @Method()\n  async closeDrawer() {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.closeDrawer();\n      return;\n    }\n    if (!this.open) return;\n    const id = this.activeTool;\n    this.open = false;\n    if (id) this.dsToolChange.emit({ id, selected: false });\n  }\n\n  /** Focus an application-owned action in the visible shared tool header. */\n  @Method()\n  async focusHeaderAction(id: string) {\n    if (this.responsiveMode !== 'mobile') {\n      await this.panelToolsEl?.focusHeaderAction(id);\n      return;\n    }\n    const action = this.el.querySelector(`[data-header-action-id=\"${CSS.escape(id)}\"]`) as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    await action?.setFocus?.();\n  }\n\n  private renderForwardedSlots() {\n    return this.mobileViewOrder.flatMap(id => [\n      <slot name={id} slot={id} />,\n      <slot name={`${id}-view`} slot={`${id}-view`} />,\n    ]);\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"shell-tools__desktop\">\n        <ds-panel-tools\n          open={this.open}\n          activeTool={this.activeTool}\n          presentation={this.presentation}\n          fullscreenHeaderMode={this.fullscreenHeaderMode}\n          items={this.resolvedItems}\n          headers={this.resolvedHeaders()}\n          storageKey={this.storageKey}\n          toolsLabel={this.toolsLabel}\n          toolShortcutsLabel={this.toolShortcutsLabel}\n          ref={element => {\n            this.panelToolsEl = element as HTMLDsPanelToolsElement | null;\n          }}\n          onDsToolChange={this.handlePanelToolChange}\n          onDsPresentationChange={this.handlePanelPresentationChange}\n        >\n          {this.renderForwardedSlots()}\n        </ds-panel-tools>\n      </div>\n    );\n  }\n\n  private renderMobileHeader(tool: PanelToolsToolId) {\n    const header = this.activeHeader(tool);\n    const configuredTitle = header.title?.trim();\n    const title = configuredTitle || this.toolLabel(tool);\n    const actions = (header.actions ?? []).filter(action => action.id !== 'fullscreen');\n    const inboxRoot = isShellInboxTool(tool) && !header.showBack;\n    const sections =\n      inboxRoot\n        ? this.availableInboxTools.map(id => {\n            const item = this.resolvedItems.find(candidate => candidate.id === id);\n            return {\n              id,\n              label: this.toolLabel(id),\n              variant: 'label' as const,\n              dot: item?.dot,\n            };\n          })\n        : [];\n\n    return (\n      <ds-mobile-header\n        class=\"shell-tools__mobile-header\"\n        heading={title}\n        headingLevel=\"h2\"\n        sections={sections}\n        value={tool}\n        sectionsAriaLabel={this.inboxNavigationLabel}\n        sectionsPresentation={inboxRoot ? 'segmented' : 'switcher'}\n        sectionsSize=\"lg\"\n        onDsSectionChange={this.selectInboxTool}\n      >\n        {header.showBack ? (\n          <ds-tooltip\n            slot=\"leading\"\n            label={header.backAriaLabel || 'Back'}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              variant=\"icon\"\n              icon={header.backIcon || 'ChevronLeft'}\n              size=\"md\"\n              aria-label={header.backAriaLabel || 'Back'}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={() => this.dsHeaderBack.emit({ tool })}\n            />\n          </ds-tooltip>\n        ) : null}\n        {actions.map(action => (\n          <ds-tooltip\n            slot=\"trailing\"\n            key={action.id}\n            label={action.ariaLabel}\n            side=\"bottom\"\n            size=\"sm\"\n          >\n            <ds-button-unfilled\n              id={action.triggerId || undefined}\n              data-header-action-id={action.id}\n              variant=\"icon\"\n              icon={action.icon}\n              size=\"md\"\n              aria-label={action.ariaLabel}\n              haspopup={action.haspopup}\n              controls={action.controls}\n              expanded={action.expanded}\n              pressed={action.pressed}\n              isActive={!!action.expanded}\n              isInactive={action.isInactive}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.handleMobileHeaderAction(tool, action.id, event)}\n            />\n          </ds-tooltip>\n        ))}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderMobile() {\n    const tool = this.mobileActiveTool;\n    return (\n      <div\n        class=\"shell-tools__mobile\"\n        aria-hidden={this.open && tool ? undefined : 'true'}\n        inert={this.open && tool ? undefined : true}\n      >\n        {tool ? this.renderMobileHeader(tool) : null}\n        <div class=\"shell-tools__mobile-body\">\n          {this.mobileViewOrder.map(id => {\n            const active = this.open && id === tool;\n            return (\n              <div\n                class={{\n                  'shell-tools__view': true,\n                  'shell-tools__view--active': active,\n                }}\n                hidden={!active}\n                aria-hidden={active ? undefined : 'true'}\n                inert={active ? undefined : true}\n              >\n                <slot name={`${id}-view`}>\n                  <slot name={id} />\n                </slot>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const mobile = this.responsiveMode === 'mobile';\n    return (\n      <Host\n        role={\n          mobile\n            ? this.presentation === 'fullscreen'\n              ? 'dialog'\n              : 'complementary'\n            : undefined\n        }\n        aria-modal={mobile && this.presentation === 'fullscreen' ? 'true' : undefined}\n        aria-label={mobile ? this.toolsLabel : undefined}\n      >\n        {mobile ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/p-D9FdOR_m.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,h as r,a as o,t as a}from"./index.js";import{d}from"./p-dEouiXJ8.js";import{d as n}from"./p-DStd98dM.js";import{d as t}from"./p-D5sIwLjA.js";import{d as i}from"./p-C8U5BsJf.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as m}from"./p-Dhx_3_tf.js";import{d as h}from"./p-DyqLVdJp.js";import{r as l}from"./p-C-vRkDyn.js";const w=()=>`.sc-ds-markdown:where(.ds-prose){display:block;box-sizing:border-box;max-inline-size:100%;min-inline-size:0;color:inherit;overflow-wrap:anywhere}.sc-ds-markdown:where(.ds-prose)>:where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6.sc-ds-markdown,p.sc-ds-markdown,ul.sc-ds-markdown,ol.sc-ds-markdown,dl.sc-ds-markdown,blockquote).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{max-inline-size:var(--ds-prose-text-max-inline-size, 100%)}.sc-ds-markdown:where(.ds-prose) :where(p,ul.sc-ds-markdown,ol.sc-ds-markdown,dl.sc-ds-markdown,blockquote.sc-ds-markdown,figure.sc-ds-markdown,figcaption.sc-ds-markdown,table).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin:0;color:inherit;font-family:var(--typography-font-family-ui);font-size:var(--typography-fontsize-md);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-md);letter-spacing:var(--typography-letterspacing-negative-half)}.sc-ds-markdown:where(.ds-prose) :where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin:0;color:var(--color-foreground-primary);font-family:var(--typography-font-family-ui);font-weight:var(--typography-weight-semibold)}.sc-ds-markdown:where(.ds-prose) :where(h1,h2).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl);letter-spacing:var(--typography-letterspacing-negative-double)}.sc-ds-markdown:where(.ds-prose) :where(h3,h4).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg);letter-spacing:var(--typography-letterspacing-negative)}.sc-ds-markdown:where(.ds-prose) :where(h5,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);letter-spacing:var(--typography-letterspacing-negative)}.sc-ds-markdown:where(.ds-prose)>.sc-ds-markdown:where(*+*){margin-block-start:var(--dimension-space-150)}.sc-ds-markdown:where(.ds-prose)>:where(*)+:where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-200)}.sc-ds-markdown:where(.ds-prose)>:where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown+.sc-ds-markdown:where(*){margin-block-start:var(--dimension-space-100)}.sc-ds-markdown:where(.ds-prose) :where(blockquote,li.sc-ds-markdown,dd)>.sc-ds-markdown:where(*+*):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(li+li.sc-ds-markdown,dt+dd).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(ul,ol).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding-inline-start:var(--dimension-space-300)}.sc-ds-markdown:where(.ds-prose) :where(li>ul.sc-ds-markdown,li>ol).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(li>input[type='checkbox']):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-inline-end:var(--dimension-space-050)}.sc-ds-markdown:where(.ds-prose) :where(blockquote):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding-inline-start:var(--dimension-space-150);border-inline-start:var(--dimension-stroke-width-025) solid var(--color-border-secondary);color:var(--color-foreground-secondary)}.sc-ds-markdown:where(.ds-prose) :where(strong,b).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-weight:var(--typography-weight-medium)}.sc-ds-markdown:where(.ds-prose) :where(h1,h2.sc-ds-markdown,h3.sc-ds-markdown,h4.sc-ds-markdown,h5.sc-ds-markdown,h6) .sc-ds-markdown:where(strong,b).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{font-weight:inherit}.sc-ds-markdown:where(.ds-prose) :where(a):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{color:var(--color-foreground-brand);text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}.sc-ds-markdown:where(.ds-prose) :where(code):not(:where(pre code.sc-ds-markdown,[data-ds-prose='off'].sc-ds-markdown,[data-ds-prose='off'] *)).sc-ds-markdown{padding:var(--dimension-space-012) var(--dimension-space-025);border-radius:var(--dimension-radius-025);background:var(--color-background-secondary);font-family:var(     --typography-font-family-code,     'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',     Menlo, Monaco, Consolas, 'Liberation Mono', monospace   );font-size:var(--typography-fontsize-sm);font-variant-ligatures:var(--ds-code-font-variant-ligatures, normal);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none)}.sc-ds-markdown:where(.ds-prose) :where(pre):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{box-sizing:border-box;max-inline-size:100%;min-inline-size:0;margin:0;padding:var(--dimension-space-150);overflow:auto;border-radius:var(--dimension-radius-050);background:var(--color-background-strong-neutral);color:var(--color-foreground-faint-neutral);font-family:var(     --typography-font-family-code,     'Fira Code', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Roboto Mono',     Menlo, Monaco, Consolas, 'Liberation Mono', monospace   );font-size:var(--typography-fontsize-sm);font-variant-ligatures:var(--ds-code-font-variant-ligatures, normal);font-weight:var(--typography-weight-regular);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none);tab-size:2}.sc-ds-markdown:where(.ds-prose) :where(pre code):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding:0;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;white-space:pre}.sc-ds-markdown:where(.ds-prose) :where(hr):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin:0;border:0;border-block-start:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.sc-ds-markdown:where(.ds-prose__table-scroll){box-sizing:border-box;max-inline-size:100%;min-inline-size:0;overflow-x:auto}.sc-ds-markdown:where(.ds-prose) :where(table):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{inline-size:100%;border-collapse:collapse}.sc-ds-markdown:where(.ds-prose) :where(th,td).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{padding:var(--dimension-space-075);border:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);text-align:start;vertical-align:top;overflow-wrap:anywhere}.sc-ds-markdown:where(.ds-prose) :where(th):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{color:var(--color-foreground-primary);font-weight:var(--typography-weight-medium)}.sc-ds-markdown:where(.ds-prose) :where(img,video.sc-ds-markdown,svg).sc-ds-markdown:not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{max-inline-size:100%;block-size:auto}.sc-ds-markdown:where(.ds-prose) :where(figcaption):not(:where([data-ds-prose='off'],[data-ds-prose='off'] *)).sc-ds-markdown{margin-block-start:var(--dimension-space-050);color:var(--color-foreground-secondary);font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm);letter-spacing:var(--typography-letterspacing-none)}.sc-ds-markdown-h{display:block;min-width:0;color:inherit;box-sizing:border-box;-webkit-user-select:text;user-select:text}`;let p;function f(){p??(p=Promise.all([import("./p-BjtXYFhw.js"),import("./p-DVsje4AY.js"),import("./p-gidVv1FX.js")]).then((([e,s,r])=>({fromMarkdown:e.fromMarkdown,gfmFromMarkdown:s.gfmFromMarkdown,gfm:r.gfm}))));return p}const k=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.content="";this.streaming=false;this.tree=null;this.parseRevision=0}componentWillLoad(){if(typeof document!=="undefined")return this.parse()}disconnectedCallback(){this.parseRevision+=1;if(this.parseFrame&&typeof cancelAnimationFrame==="function"){cancelAnimationFrame(this.parseFrame)}}scheduleParse(){if(typeof requestAnimationFrame!=="function")return;if(this.parseFrame)cancelAnimationFrame(this.parseFrame);this.parseFrame=requestAnimationFrame((()=>{this.parseFrame=undefined;void this.parse()}))}async parse(){const e=++this.parseRevision;try{const{fromMarkdown:s,gfmFromMarkdown:r,gfm:o}=await f();const a=s(this.content,{extensions:[o()],mdastExtensions:[r()]});if(e===this.parseRevision)this.tree=a}catch{if(e===this.parseRevision)this.tree=null}}children(e){if(!("children"in e))return[];return e.children.map((e=>this.renderNode(e)))}renderNode(e){switch(e.type){case"root":return this.children(e);case"text":return r("span",{class:"markdown__text"},e.value);case"paragraph":return r("p",{class:"markdown__paragraph"},this.children(e));case"heading":{const s=`h${e.depth}`;return r(s,{class:"markdown__heading"},this.children(e))}case"strong":return r("strong",{class:"markdown__strong"},this.children(e));case"emphasis":return r("em",{class:"markdown__emphasis"},this.children(e));case"delete":return r("del",{class:"markdown__delete"},this.children(e));case"blockquote":return r("blockquote",{class:"markdown__blockquote"},this.children(e));case"break":return r("br",{class:"markdown__break"});case"thematicBreak":return r("hr",{class:"markdown__thematic-break"});case"inlineCode":return r("code",{class:"markdown__inline-code"},e.value);case"code":return r("ds-code-block",{class:"markdown__code-block","data-ds-prose":"off",code:e.value,language:e.lang??"",filename:e.meta??""});case"link":{const s=l(e.url,{protocols:["http:","https:","mailto:"]});return s?r("a",{class:"markdown__link",href:s,target:"_blank",rel:"noopener noreferrer"},this.children(e)):this.children(e)}case"list":{const s=e.ordered?"ol":"ul";return r(s,{class:"markdown__list",start:e.ordered&&e.start?e.start:undefined},this.children(e))}case"listItem":return r("li",{class:"markdown__list-item"},typeof e.checked==="boolean"?r("input",{class:"markdown__task-indicator",type:"checkbox",checked:e.checked,disabled:true,"aria-hidden":"true",tabIndex:-1}):null,this.children(e));case"table":{const[s,...o]=e.children;return r("div",{class:"markdown__table-wrap ds-prose__table-scroll",tabIndex:0},r("table",{class:"markdown__table"},s?r("thead",{class:"markdown__table-head"},r("tr",{class:"markdown__table-row"},s.children.map((e=>r("th",{class:"markdown__table-heading",scope:"col"},this.children(e)))))):null,r("tbody",{class:"markdown__table-body"},o.map((e=>this.renderNode(e))))))}case"tableRow":return r("tr",{class:"markdown__table-row"},this.children(e));case"tableCell":return r("td",{class:"markdown__table-cell"},this.children(e));case"image":{const s=l(e.url,{protocols:["http:","https:","mailto:"]});return s?r("a",{class:"markdown__image-link",href:s,target:"_blank",rel:"noopener noreferrer"},e.alt||"View image"):e.alt||null}case"html":case"definition":case"footnoteDefinition":return null;case"footnoteReference":return r("sup",{class:"markdown__footnote"},e.label);default:return this.children(e)}}render(){return r(o,{key:"4e0b691eb8051173cfb87f9dcb9ef28f6d29382f","aria-busy":this.streaming?"true":undefined},r("div",{key:"6aa33d3e3ed1aa32fc239f7e09b7bcb3608a360b",class:"markdown ds-prose"},this.tree?this.renderNode(this.tree):r("p",{class:"markdown__paragraph"},r("span",{class:"markdown__text"},this.content))))}static get watchers(){return{content:[{scheduleParse:0}]}}static get style(){return w()}},[2,"ds-markdown",{content:[1],streaming:[4],tree:[32]},undefined,{content:[{scheduleParse:0}]}]);function g(){if(typeof customElements==="undefined"){return}const e=["ds-markdown","ds-badge","ds-button-unfilled","ds-code-block","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-markdown":if(!customElements.get(a(e))){customElements.define(a(e),k)}break;case"ds-badge":if(!customElements.get(a(e))){d()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){n()}break;case"ds-code-block":if(!customElements.get(a(e))){t()}break;case"ds-icon":if(!customElements.get(a(e))){i()}break;case"ds-loader":if(!customElements.get(a(e))){c()}break;case"ds-text":if(!customElements.get(a(e))){m()}break;case"ds-tooltip":if(!customElements.get(a(e))){h()}break}}))}g();export{k as M,g as d};
+//# sourceMappingURL=p-D9FdOR_m.js.map

package/dist/components/{p-BSdAFIcG.js.map → p-D9FdOR_m.js.map}

@@ -1 +1 @@
-{"version":3,"names":["markdownCss","parserPromise","loadParser","Promise","all","import","then","fromMarkdownModule","gfmFromMarkdownModule","gfmModule","fromMarkdown","gfmFromMarkdown","gfm","Markdown","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","content","streaming","tree","parseRevision","componentWillLoad","document","parse","disconnectedCallback","parseFrame","cancelAnimationFrame","scheduleParse","requestAnimationFrame","undefined","revision","extensions","mdastExtensions","children","node","map","child","renderNode","type","h","class","value","Tag","depth","code","language","lang","filename","meta","href","resolveSafeUrl","url","protocols","target","rel","ordered","start","checked","disabled","tabIndex","heading","rows","cell","scope","row","alt","label","render","Host","key"],"sources":["src/wc/components/Markdown/Markdown.css?tag=ds-markdown&encapsulation=scoped","src/wc/components/Markdown/Markdown.tsx"],"sourcesContent":["@import '../../styles/prose.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n","import { Component, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\nimport type { Nodes, Root } from 'mdast';\nimport { resolveSafeUrl } from '../../utils';\n\ntype MarkdownRender = VNode | string | null | MarkdownRender[];\ntype MarkdownParser = {\n  fromMarkdown: typeof import('mdast-util-from-markdown').fromMarkdown;\n  gfmFromMarkdown: typeof import('mdast-util-gfm').gfmFromMarkdown;\n  gfm: typeof import('micromark-extension-gfm').gfm;\n};\n\nlet parserPromise: Promise<MarkdownParser> | undefined;\n\nfunction loadParser(): Promise<MarkdownParser> {\n  parserPromise ??= Promise.all([\n    import('mdast-util-from-markdown'),\n    import('mdast-util-gfm'),\n    import('micromark-extension-gfm'),\n  ]).then(([fromMarkdownModule, gfmFromMarkdownModule, gfmModule]) => ({\n    fromMarkdown: fromMarkdownModule.fromMarkdown,\n    gfmFromMarkdown: gfmFromMarkdownModule.gfmFromMarkdown,\n    gfm: gfmModule.gfm,\n  }));\n  return parserPromise;\n}\n\n@Component({\n  tag: 'ds-markdown',\n  styleUrl: 'Markdown.css',\n  scoped: true,\n})\nexport class Markdown {\n  @Prop() content: string = '';\n  @Prop() streaming: boolean = false;\n\n  @State() private tree: Root | null = null;\n  private parseFrame?: number;\n  private parseRevision = 0;\n\n  componentWillLoad() {\n    // The browser-targeted named-character decoder used by the Markdown parser\n    // creates a DOM element when its module is evaluated. Keep public package\n    // imports server-safe by loading that parser only in a browser context.\n    if (typeof document !== 'undefined') return this.parse();\n  }\n\n  disconnectedCallback() {\n    this.parseRevision += 1;\n    if (this.parseFrame && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.parseFrame);\n    }\n  }\n\n  @Watch('content')\n  scheduleParse() {\n    if (typeof requestAnimationFrame !== 'function') return;\n    if (this.parseFrame) cancelAnimationFrame(this.parseFrame);\n    this.parseFrame = requestAnimationFrame(() => {\n      this.parseFrame = undefined;\n      void this.parse();\n    });\n  }\n\n  private async parse() {\n    const revision = ++this.parseRevision;\n    try {\n      const { fromMarkdown, gfmFromMarkdown, gfm } = await loadParser();\n      const tree = fromMarkdown(this.content, {\n        extensions: [gfm()],\n        mdastExtensions: [gfmFromMarkdown()],\n      });\n      if (revision === this.parseRevision) this.tree = tree;\n    } catch {\n      if (revision === this.parseRevision) this.tree = null;\n    }\n  }\n\n  private children(node: Nodes): MarkdownRender[] {\n    if (!('children' in node)) return [];\n    return node.children.map(child => this.renderNode(child));\n  }\n\n  private renderNode(node: Nodes): MarkdownRender {\n    switch (node.type) {\n      case 'root':\n        return this.children(node);\n      case 'text':\n        // Keep prose text on an element boundary. Besides giving streaming updates a\n        // stable render target, this avoids axe-core treating a bare Stencil text\n        // vnode as an element while it generates a contrast-result selector.\n        return <span class=\"markdown__text\">{node.value}</span>;\n      case 'paragraph':\n        return <p class=\"markdown__paragraph\">{this.children(node)}</p>;\n      case 'heading': {\n        const Tag = `h${node.depth}`;\n        return <Tag class=\"markdown__heading\">{this.children(node)}</Tag>;\n      }\n      case 'strong':\n        return <strong class=\"markdown__strong\">{this.children(node)}</strong>;\n      case 'emphasis':\n        return <em class=\"markdown__emphasis\">{this.children(node)}</em>;\n      case 'delete':\n        return <del class=\"markdown__delete\">{this.children(node)}</del>;\n      case 'blockquote':\n        return <blockquote class=\"markdown__blockquote\">{this.children(node)}</blockquote>;\n      case 'break':\n        return <br class=\"markdown__break\" />;\n      case 'thematicBreak':\n        return <hr class=\"markdown__thematic-break\" />;\n      case 'inlineCode':\n        return <code class=\"markdown__inline-code\">{node.value}</code>;\n      case 'code':\n        return (\n          <ds-code-block\n            class=\"markdown__code-block\"\n            data-ds-prose=\"off\"\n            code={node.value}\n            language={node.lang ?? ''}\n            filename={node.meta ?? ''}\n          />\n        );\n      case 'link': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {this.children(node)}\n          </a>\n        ) : (\n          this.children(node)\n        );\n      }\n      case 'list': {\n        const Tag = node.ordered ? 'ol' : 'ul';\n        return (\n          <Tag class=\"markdown__list\" start={node.ordered && node.start ? node.start : undefined}>\n            {this.children(node)}\n          </Tag>\n        );\n      }\n      case 'listItem':\n        return (\n          <li class=\"markdown__list-item\">\n            {typeof node.checked === 'boolean' ? (\n              <input\n                class=\"markdown__task-indicator\"\n                type=\"checkbox\"\n                checked={node.checked}\n                disabled\n                aria-hidden=\"true\"\n                tabIndex={-1}\n              />\n            ) : null}\n            {this.children(node)}\n          </li>\n        );\n      case 'table': {\n        const [heading, ...rows] = node.children;\n        return (\n          <div class=\"markdown__table-wrap ds-prose__table-scroll\" tabIndex={0}>\n            <table class=\"markdown__table\">\n              {heading ? (\n                <thead class=\"markdown__table-head\">\n                  <tr class=\"markdown__table-row\">\n                    {heading.children.map(cell => (\n                      <th class=\"markdown__table-heading\" scope=\"col\">\n                        {this.children(cell)}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n              ) : null}\n              <tbody class=\"markdown__table-body\">{rows.map(row => this.renderNode(row))}</tbody>\n            </table>\n          </div>\n        );\n      }\n      case 'tableRow':\n        return <tr class=\"markdown__table-row\">{this.children(node)}</tr>;\n      case 'tableCell':\n        return <td class=\"markdown__table-cell\">{this.children(node)}</td>;\n      case 'image': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__image-link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {node.alt || 'View image'}\n          </a>\n        ) : (\n          node.alt || null\n        );\n      }\n      case 'html':\n      case 'definition':\n      case 'footnoteDefinition':\n        return null;\n      case 'footnoteReference':\n        return <sup class=\"markdown__footnote\">{node.label}</sup>;\n      default:\n        return this.children(node);\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-busy={this.streaming ? 'true' : undefined}>\n        <div class=\"markdown ds-prose\">\n          {this.tree ? (\n            this.renderNode(this.tree)\n          ) : (\n            <p class=\"markdown__paragraph\">\n              <span class=\"markdown__text\">{this.content}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["markdownCss","parserPromise","loadParser","Promise","all","import","then","fromMarkdownModule","gfmFromMarkdownModule","gfmModule","fromMarkdown","gfmFromMarkdown","gfm","Markdown","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","content","streaming","tree","parseRevision","componentWillLoad","document","parse","disconnectedCallback","parseFrame","cancelAnimationFrame","scheduleParse","requestAnimationFrame","undefined","revision","extensions","mdastExtensions","children","node","map","child","renderNode","type","h","class","value","Tag","depth","code","language","lang","filename","meta","href","resolveSafeUrl","url","protocols","target","rel","ordered","start","checked","disabled","tabIndex","heading","rows","cell","scope","row","alt","label","render","Host","key"],"sources":["src/wc/components/Markdown/Markdown.css?tag=ds-markdown&encapsulation=scoped","src/wc/components/Markdown/Markdown.tsx"],"sourcesContent":["@import '../../styles/prose.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  color: inherit;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n","import { Component, h, Host, Prop, State, VNode, Watch } from '@stencil/core';\nimport type { Nodes, Root } from 'mdast';\nimport { resolveSafeUrl } from '../../utils';\n\ntype MarkdownRender = VNode | string | null | MarkdownRender[];\ntype MarkdownParser = {\n  fromMarkdown: typeof import('mdast-util-from-markdown').fromMarkdown;\n  gfmFromMarkdown: typeof import('mdast-util-gfm').gfmFromMarkdown;\n  gfm: typeof import('micromark-extension-gfm').gfm;\n};\n\nlet parserPromise: Promise<MarkdownParser> | undefined;\n\nfunction loadParser(): Promise<MarkdownParser> {\n  parserPromise ??= Promise.all([\n    import('mdast-util-from-markdown'),\n    import('mdast-util-gfm'),\n    import('micromark-extension-gfm'),\n  ]).then(([fromMarkdownModule, gfmFromMarkdownModule, gfmModule]) => ({\n    fromMarkdown: fromMarkdownModule.fromMarkdown,\n    gfmFromMarkdown: gfmFromMarkdownModule.gfmFromMarkdown,\n    gfm: gfmModule.gfm,\n  }));\n  return parserPromise;\n}\n\n@Component({\n  tag: 'ds-markdown',\n  styleUrl: 'Markdown.css',\n  scoped: true,\n})\nexport class Markdown {\n  @Prop() content: string = '';\n  @Prop() streaming: boolean = false;\n\n  @State() private tree: Root | null = null;\n  private parseFrame?: number;\n  private parseRevision = 0;\n\n  componentWillLoad() {\n    // The browser-targeted named-character decoder used by the Markdown parser\n    // creates a DOM element when its module is evaluated. Keep public package\n    // imports server-safe by loading that parser only in a browser context.\n    if (typeof document !== 'undefined') return this.parse();\n  }\n\n  disconnectedCallback() {\n    this.parseRevision += 1;\n    if (this.parseFrame && typeof cancelAnimationFrame === 'function') {\n      cancelAnimationFrame(this.parseFrame);\n    }\n  }\n\n  @Watch('content')\n  scheduleParse() {\n    if (typeof requestAnimationFrame !== 'function') return;\n    if (this.parseFrame) cancelAnimationFrame(this.parseFrame);\n    this.parseFrame = requestAnimationFrame(() => {\n      this.parseFrame = undefined;\n      void this.parse();\n    });\n  }\n\n  private async parse() {\n    const revision = ++this.parseRevision;\n    try {\n      const { fromMarkdown, gfmFromMarkdown, gfm } = await loadParser();\n      const tree = fromMarkdown(this.content, {\n        extensions: [gfm()],\n        mdastExtensions: [gfmFromMarkdown()],\n      });\n      if (revision === this.parseRevision) this.tree = tree;\n    } catch {\n      if (revision === this.parseRevision) this.tree = null;\n    }\n  }\n\n  private children(node: Nodes): MarkdownRender[] {\n    if (!('children' in node)) return [];\n    return node.children.map(child => this.renderNode(child));\n  }\n\n  private renderNode(node: Nodes): MarkdownRender {\n    switch (node.type) {\n      case 'root':\n        return this.children(node);\n      case 'text':\n        // Keep prose text on an element boundary. Besides giving streaming updates a\n        // stable render target, this avoids axe-core treating a bare Stencil text\n        // vnode as an element while it generates a contrast-result selector.\n        return <span class=\"markdown__text\">{node.value}</span>;\n      case 'paragraph':\n        return <p class=\"markdown__paragraph\">{this.children(node)}</p>;\n      case 'heading': {\n        const Tag = `h${node.depth}`;\n        return <Tag class=\"markdown__heading\">{this.children(node)}</Tag>;\n      }\n      case 'strong':\n        return <strong class=\"markdown__strong\">{this.children(node)}</strong>;\n      case 'emphasis':\n        return <em class=\"markdown__emphasis\">{this.children(node)}</em>;\n      case 'delete':\n        return <del class=\"markdown__delete\">{this.children(node)}</del>;\n      case 'blockquote':\n        return <blockquote class=\"markdown__blockquote\">{this.children(node)}</blockquote>;\n      case 'break':\n        return <br class=\"markdown__break\" />;\n      case 'thematicBreak':\n        return <hr class=\"markdown__thematic-break\" />;\n      case 'inlineCode':\n        return <code class=\"markdown__inline-code\">{node.value}</code>;\n      case 'code':\n        return (\n          <ds-code-block\n            class=\"markdown__code-block\"\n            data-ds-prose=\"off\"\n            code={node.value}\n            language={node.lang ?? ''}\n            filename={node.meta ?? ''}\n          />\n        );\n      case 'link': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {this.children(node)}\n          </a>\n        ) : (\n          this.children(node)\n        );\n      }\n      case 'list': {\n        const Tag = node.ordered ? 'ol' : 'ul';\n        return (\n          <Tag class=\"markdown__list\" start={node.ordered && node.start ? node.start : undefined}>\n            {this.children(node)}\n          </Tag>\n        );\n      }\n      case 'listItem':\n        return (\n          <li class=\"markdown__list-item\">\n            {typeof node.checked === 'boolean' ? (\n              <input\n                class=\"markdown__task-indicator\"\n                type=\"checkbox\"\n                checked={node.checked}\n                disabled\n                aria-hidden=\"true\"\n                tabIndex={-1}\n              />\n            ) : null}\n            {this.children(node)}\n          </li>\n        );\n      case 'table': {\n        const [heading, ...rows] = node.children;\n        return (\n          <div class=\"markdown__table-wrap ds-prose__table-scroll\" tabIndex={0}>\n            <table class=\"markdown__table\">\n              {heading ? (\n                <thead class=\"markdown__table-head\">\n                  <tr class=\"markdown__table-row\">\n                    {heading.children.map(cell => (\n                      <th class=\"markdown__table-heading\" scope=\"col\">\n                        {this.children(cell)}\n                      </th>\n                    ))}\n                  </tr>\n                </thead>\n              ) : null}\n              <tbody class=\"markdown__table-body\">{rows.map(row => this.renderNode(row))}</tbody>\n            </table>\n          </div>\n        );\n      }\n      case 'tableRow':\n        return <tr class=\"markdown__table-row\">{this.children(node)}</tr>;\n      case 'tableCell':\n        return <td class=\"markdown__table-cell\">{this.children(node)}</td>;\n      case 'image': {\n        const href = resolveSafeUrl(node.url, {\n          protocols: ['http:', 'https:', 'mailto:'],\n        });\n        return href ? (\n          <a class=\"markdown__image-link\" href={href} target=\"_blank\" rel=\"noopener noreferrer\">\n            {node.alt || 'View image'}\n          </a>\n        ) : (\n          node.alt || null\n        );\n      }\n      case 'html':\n      case 'definition':\n      case 'footnoteDefinition':\n        return null;\n      case 'footnoteReference':\n        return <sup class=\"markdown__footnote\">{node.label}</sup>;\n      default:\n        return this.children(node);\n    }\n  }\n\n  render() {\n    return (\n      <Host aria-busy={this.streaming ? 'true' : undefined}>\n        <div class=\"markdown ds-prose\">\n          {this.tree ? (\n            this.renderNode(this.tree)\n          ) : (\n            <p class=\"markdown__paragraph\">\n              <span class=\"markdown__text\">{this.content}</span>\n            </p>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sVAAA,MAAMA,EAAc,IAAM,4oQCW1B,IAAIC,EAEJ,SAASC,IACPD,MAAkBE,QAAQC,IAAI,CAC5BC,OAAO,mBACPA,OAAO,mBACPA,OAAO,qBACNC,MAAK,EAAEC,EAAoBC,EAAuBC,MAAU,CAC7DC,aAAcH,EAAmBG,aACjCC,gBAAiBH,EAAsBG,gBACvCC,IAAKH,EAAUG,SAEjB,OAAOX,CACT,C,MAOaY,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAkB,GAClBD,KAAAE,UAAqB,MAEZF,KAAAG,KAAoB,KAE7BH,KAAAI,cAAgB,CAuLzB,CArLC,iBAAAC,GAIE,UAAWC,WAAa,YAAa,OAAON,KAAKO,O,CAGnD,oBAAAC,GACER,KAAKI,eAAiB,EACtB,GAAIJ,KAAKS,mBAAqBC,uBAAyB,WAAY,CACjEA,qBAAqBV,KAAKS,W,EAK9B,aAAAE,GACE,UAAWC,wBAA0B,WAAY,OACjD,GAAIZ,KAAKS,WAAYC,qBAAqBV,KAAKS,YAC/CT,KAAKS,WAAaG,uBAAsB,KACtCZ,KAAKS,WAAaI,eACbb,KAAKO,OAAO,G,CAIb,WAAMA,GACZ,MAAMO,IAAad,KAAKI,cACxB,IACE,MAAMZ,aAAEA,EAAYC,gBAAEA,EAAeC,IAAEA,SAAcV,IACrD,MAAMmB,EAAOX,EAAaQ,KAAKC,QAAS,CACtCc,WAAY,CAACrB,KACbsB,gBAAiB,CAACvB,OAEpB,GAAIqB,IAAad,KAAKI,cAAeJ,KAAKG,KAAOA,C,CACjD,MACA,GAAIW,IAAad,KAAKI,cAAeJ,KAAKG,KAAO,I,EAI7C,QAAAc,CAASC,GACf,KAAM,aAAcA,GAAO,MAAO,GAClC,OAAOA,EAAKD,SAASE,KAAIC,GAASpB,KAAKqB,WAAWD,I,CAG5C,UAAAC,CAAWH,GACjB,OAAQA,EAAKI,MACX,IAAK,OACH,OAAOtB,KAAKiB,SAASC,GACvB,IAAK,OAIH,OAAOK,EAAA,QAAMC,MAAM,kBAAkBN,EAAKO,OAC5C,IAAK,YACH,OAAOF,EAAA,KAAGC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACvD,IAAK,UAAW,CACd,MAAMQ,EAAM,IAAIR,EAAKS,QACrB,OAAOJ,EAACG,EAAG,CAACF,MAAM,qBAAqBxB,KAAKiB,SAASC,G,CAEvD,IAAK,SACH,OAAOK,EAAA,UAAQC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACzD,IAAK,WACH,OAAOK,EAAA,MAAIC,MAAM,sBAAsBxB,KAAKiB,SAASC,IACvD,IAAK,SACH,OAAOK,EAAA,OAAKC,MAAM,oBAAoBxB,KAAKiB,SAASC,IACtD,IAAK,aACH,OAAOK,EAAA,cAAYC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACjE,IAAK,QACH,OAAOK,EAAA,MAAIC,MAAM,oBACnB,IAAK,gBACH,OAAOD,EAAA,MAAIC,MAAM,6BACnB,IAAK,aACH,OAAOD,EAAA,QAAMC,MAAM,yBAAyBN,EAAKO,OACnD,IAAK,OACH,OACEF,EAAA,iBACEC,MAAM,uBAAsB,gBACd,MACdI,KAAMV,EAAKO,MACXI,SAAUX,EAAKY,MAAQ,GACvBC,SAAUb,EAAKc,MAAQ,KAG7B,IAAK,OAAQ,CACX,MAAMC,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,iBAAiBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBACvDtC,KAAKiB,SAASC,IAGjBlB,KAAKiB,SAASC,E,CAGlB,IAAK,OAAQ,CACX,MAAMQ,EAAMR,EAAKqB,QAAU,KAAO,KAClC,OACEhB,EAACG,EAAG,CAACF,MAAM,iBAAiBgB,MAAOtB,EAAKqB,SAAWrB,EAAKsB,MAAQtB,EAAKsB,MAAQ3B,WAC1Eb,KAAKiB,SAASC,G,CAIrB,IAAK,WACH,OACEK,EAAA,MAAIC,MAAM,8BACAN,EAAKuB,UAAY,UACvBlB,EAAA,SACEC,MAAM,2BACNF,KAAK,WACLmB,QAASvB,EAAKuB,QACdC,SAAQ,mBACI,OACZC,UAAU,IAEV,KACH3C,KAAKiB,SAASC,IAGrB,IAAK,QAAS,CACZ,MAAO0B,KAAYC,GAAQ3B,EAAKD,SAChC,OACEM,EAAA,OAAKC,MAAM,8CAA8CmB,SAAU,GACjEpB,EAAA,SAAOC,MAAM,mBACVoB,EACCrB,EAAA,SAAOC,MAAM,wBACXD,EAAA,MAAIC,MAAM,uBACPoB,EAAQ3B,SAASE,KAAI2B,GACpBvB,EAAA,MAAIC,MAAM,0BAA0BuB,MAAM,OACvC/C,KAAKiB,SAAS6B,QAKrB,KACJvB,EAAA,SAAOC,MAAM,wBAAwBqB,EAAK1B,KAAI6B,GAAOhD,KAAKqB,WAAW2B,O,CAK7E,IAAK,WACH,OAAOzB,EAAA,MAAIC,MAAM,uBAAuBxB,KAAKiB,SAASC,IACxD,IAAK,YACH,OAAOK,EAAA,MAAIC,MAAM,wBAAwBxB,KAAKiB,SAASC,IACzD,IAAK,QAAS,CACZ,MAAMe,EAAOC,EAAehB,EAAKiB,IAAK,CACpCC,UAAW,CAAC,QAAS,SAAU,aAEjC,OAAOH,EACLV,EAAA,KAAGC,MAAM,uBAAuBS,KAAMA,EAAMI,OAAO,SAASC,IAAI,uBAC7DpB,EAAK+B,KAAO,cAGf/B,EAAK+B,KAAO,I,CAGhB,IAAK,OACL,IAAK,aACL,IAAK,qBACH,OAAO,KACT,IAAK,oBACH,OAAO1B,EAAA,OAAKC,MAAM,sBAAsBN,EAAKgC,OAC/C,QACE,OAAOlD,KAAKiB,SAASC,G,CAI3B,MAAAiC,GACE,OACE5B,EAAC6B,EAAI,CAAAC,IAAA,uDAAYrD,KAAKE,UAAY,OAASW,WACzCU,EAAA,OAAA8B,IAAA,2CAAK7B,MAAM,qBACRxB,KAAKG,KACJH,KAAKqB,WAAWrB,KAAKG,MAErBoB,EAAA,KAAGC,MAAM,uBACPD,EAAA,QAAMC,MAAM,kBAAkBxB,KAAKC,W","ignoreList":[]}