@ds-mo/ui 12.2.0 → 12.4.0

package/dist/components/ds-bar-title.js.map

@@ -1 +1 @@
-{"version":3,"names":["isBarTitleDivider","item","type","barTitleCss","nextBarTitleId","BarTitle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","description","showBack","backAriaLabel","backLabel","sections","value","sectionsAriaLabel","primaryAction","actions","actionsAriaLabel","variant","sectionMenuOpen","actionMenuOpen","sectionMenuInitialFocusVisible","actionMenuInitialFocusVisible","instanceId","sectionMenuTriggerId","sectionMenuId","actionMenuTriggerId","actionMenuId","sectionTriggerEl","actionTriggerEl","toggleSectionMenu","event","detail","closeSectionMenu","handleSectionSelect","id","String","selected","selectableSections","find","section","isInactive","dsSectionChange","emit","requestAnimationFrame","focus","toggleActionMenu","closeActionMenu","handleActionSelect","primaryMatches","primaryCollapsed","action","selectableActions","candidate","isLoading","dsAction","setFocus","handleSectionsChange","hasSectionSelector","handleActionsChange","showActionMenuTrigger","compact","backTooltipLabel","collapse","filter","length","effectiveValue","some","selectedSectionLabel","label","sectionTriggerAriaLabel","groupsFromItems","source","map","groups","items","commit","push","sectionMenuSections","isSelected","actionMenuItem","primary","isDestructive","intent","actionMenuSections","renderSectionSelector","h","class","ref","el","onClick","as","emphasis","color","name","size","renderActions","icon","contrast","onDsClick","side","activeFill","hasBorder","haspopup","controls","expanded","renderBack","dsBack","render","Host","key","lineTruncation","heading","wrap","anchorId","menuLabel","open","initialFocusVisible","onDsClose","onDsSelect","align"],"sources":["src/wc/components/BarTitle/bar-title-types.ts","src/wc/components/BarTitle/BarTitle.css?tag=ds-bar-title&encapsulation=scoped","src/wc/components/BarTitle/BarTitle.tsx"],"sourcesContent":["import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\n\nexport interface BarTitleSection {\n  id: string;\n  label: string;\n  isInactive?: boolean;\n}\n\nexport interface BarTitleDivider {\n  type: 'divider';\n}\n\nexport type BarTitleSectionItem = BarTitleSection | BarTitleDivider;\n\nexport interface BarTitleAction {\n  id: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\nexport interface BarTitlePrimaryAction extends BarTitleAction {\n  icon?: string;\n  intent?: ButtonFilledIntent;\n  contrast?: ButtonFilledContrast;\n  isLoading?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  collapse?: BarTitlePrimaryActionCollapse;\n}\n\nexport type BarTitleActionItem = BarTitleAction | BarTitleDivider;\n\nexport type BarTitleVariant = 'expanded' | 'compact' | 'constrained';\n\nexport type BarTitlePrimaryActionCollapse = 'auto' | 'never';\n\nexport function isBarTitleDivider(\n  item: BarTitleSectionItem | BarTitleActionItem\n): item is BarTitleDivider {\n  return 'type' in item && item.type === 'divider';\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host([data-shell-page-syncing]) {\n  visibility: hidden;\n}\n\n.bar-title {\n  position: relative;\n  min-width: 0;\n  padding: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.bar-title::after {\n  content: '';\n  position: absolute;\n  inset: auto var(--dimension-space-400) 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.bar-title__inner {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n.bar-title__row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n  gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n/*\n * Pull the whole leading block up by exactly the breadcrumb row's own box\n * (its xs control-height + its top margin + the row-gap below it), so the\n * title row lands flush with the actions' top without moving actions.\n * Tied to the same tokens that size the breadcrumb, not a guessed pixel value.\n */\n:host(.bar-title-host--expanded.bar-title-host--has-back) .bar-title__leading {\n  margin-block-start: calc(-1 * (var(--dimension-size-200) + var(--dimension-space-050) * 2));\n}\n\n.bar-title__title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__breadcrumb-back,\n.bar-title__section-chevron {\n  flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  margin-block-start: var(--dimension-space-050);\n}\n\n.bar-title__heading {\n  display: block;\n  width: auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.bar-title__divider {\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-250);\n  margin-inline-start: var(--dimension-space-100);\n  flex: 0 0 var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n  display: flex;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n  --ds-control-radius: var(--dimension-radius-half);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--ds-control-padding-inline);\n  border: none;\n  border-radius: var(--ds-control-radius);\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  font-family: inherit;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.bar-title__section-trigger--expanded {\n  color: var(--color-foreground-primary);\n}\n\n.bar-title__section-trigger--expanded::after,\n.bar-title__section-trigger--expanded:hover::after {\n  background: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.bar-title__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex: 0 0 auto;\n}\n\n.bar-title__description {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n  inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n  height: 100%;\n  padding: 0;\n  gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n  height: 100%;\n  align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n  height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n  margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar-title__section-trigger {\n    transition: none;\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  isBarTitleDivider,\n  type BarTitleAction,\n  type BarTitleActionItem,\n  type BarTitlePrimaryAction,\n  type BarTitleSection,\n  type BarTitleSectionItem,\n  type BarTitleVariant,\n} from './bar-title-types';\n\nlet nextBarTitleId = 0;\n\ntype FocusableButton = HTMLElement & { setFocus?: () => Promise<void> };\n\n@Component({\n  tag: 'ds-bar-title',\n  styleUrl: 'BarTitle.css',\n  scoped: true,\n})\nexport class BarTitle {\n  /** The page's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown in the expanded presentation. */\n  @Prop() description: string = '';\n\n  /** Show the leading page-level Back action. */\n  @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Accessible name for the leading Back action. */\n  @Prop() backAriaLabel: string = 'Back';\n\n  /** Visible parent-page label used by the expanded Back breadcrumb. */\n  @Prop() backLabel: string = 'Back';\n\n  /** Optional page sections exposed through the active-section menu. */\n  @Prop() sections: BarTitleSectionItem[] = [];\n\n  /** Id of the active page section. */\n  @Prop() value: string = '';\n\n  /** Accessible name for the page-section menu. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n\n  /** The one highest-emphasis page action. */\n  @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n  /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n  @Prop() actions: BarTitleActionItem[] = [];\n\n  /** Accessible name for the page-actions menu. */\n  @Prop() actionsAriaLabel: string = 'More page actions';\n\n  /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n  @Prop() variant: BarTitleVariant = 'expanded';\n\n  /** Emitted when the leading Back action is activated. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n\n  /** Emitted with the newly selected page-section id. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n\n  /** Emitted with the activated primary or overflow action id. */\n  @Event() dsAction!: EventEmitter<string>;\n\n  @State() private sectionMenuOpen = false;\n  @State() private actionMenuOpen = false;\n  @State() private sectionMenuInitialFocusVisible = false;\n  @State() private actionMenuInitialFocusVisible = false;\n\n  private readonly instanceId = nextBarTitleId++;\n  private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n  private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n  private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n  private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n  private sectionTriggerEl: HTMLButtonElement | null = null;\n  private actionTriggerEl: FocusableButton | null = null;\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (!this.hasSectionSelector) this.closeSectionMenu();\n  }\n\n  @Watch('actions')\n  @Watch('primaryAction')\n  handleActionsChange() {\n    if (!this.showActionMenuTrigger) this.closeActionMenu();\n  }\n\n  private get compact(): boolean {\n    return this.variant !== 'expanded';\n  }\n\n  /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */\n  private get backTooltipLabel(): string {\n    return 'Go back';\n  }\n\n  private get primaryCollapsed(): boolean {\n    return (\n      this.variant === 'constrained' &&\n      this.primaryAction !== null &&\n      (this.primaryAction.collapse ?? 'auto') === 'auto'\n    );\n  }\n\n  private get selectableSections(): BarTitleSection[] {\n    return this.sections.filter((item): item is BarTitleSection => !isBarTitleDivider(item));\n  }\n\n  private get hasSectionSelector(): boolean {\n    return this.selectableSections.length > 1;\n  }\n\n  private get effectiveValue(): string {\n    return this.selectableSections.some(section => section.id === this.value)\n      ? this.value\n      : (this.selectableSections[0]?.id ?? '');\n  }\n\n  private get selectedSectionLabel(): string {\n    return this.selectableSections.find(section => section.id === this.effectiveValue)?.label ?? '';\n  }\n\n  private get sectionTriggerAriaLabel(): string {\n    return `${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`;\n  }\n\n  private groupsFromItems<T extends BarTitleSection | BarTitleAction>(\n    source: Array<T | { type: 'divider' }>,\n    map: (item: T) => MenuItemData\n  ): MenuSection[] {\n    const groups: MenuSection[] = [];\n    let items: MenuItemData[] = [];\n    const commit = () => {\n      if (items.length > 0) groups.push({ items });\n      items = [];\n    };\n\n    for (const item of source) {\n      if (isBarTitleDivider(item)) {\n        commit();\n      } else {\n        items.push(map(item));\n      }\n    }\n    commit();\n    return groups;\n  }\n\n  private get sectionMenuSections(): MenuSection[] {\n    return this.groupsFromItems(this.sections, section => ({\n      label: section.label,\n      value: section.id,\n      isSelected: section.id === this.effectiveValue,\n      isInactive: section.isInactive,\n    }));\n  }\n\n  private get selectableActions(): BarTitleAction[] {\n    return this.actions.filter((item): item is BarTitleAction => !isBarTitleDivider(item));\n  }\n\n  private get showActionMenuTrigger(): boolean {\n    return (\n      this.selectableActions.length > 0 || (this.primaryCollapsed && this.primaryAction !== null)\n    );\n  }\n\n  private actionMenuItem(action: BarTitleAction | BarTitlePrimaryAction): MenuItemData {\n    const primary = action as BarTitlePrimaryAction;\n    return {\n      label: action.label,\n      value: action.id,\n      isInactive: action.isInactive || primary.isLoading,\n      isDestructive: action.isDestructive || primary.intent === 'negative',\n    };\n  }\n\n  private get actionMenuSections(): MenuSection[] {\n    const groups = this.groupsFromItems(this.actions, action => this.actionMenuItem(action));\n    if (!this.primaryCollapsed || !this.primaryAction) return groups;\n    return [{ items: [this.actionMenuItem(this.primaryAction)] }, ...groups];\n  }\n\n  private toggleSectionMenu = (event: MouseEvent) => {\n    this.sectionMenuInitialFocusVisible = event.detail === 0;\n    this.actionMenuOpen = false;\n    this.sectionMenuOpen = !this.sectionMenuOpen;\n  };\n\n  private closeSectionMenu = () => {\n    this.sectionMenuOpen = false;\n  };\n\n  private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const selected = this.selectableSections.find(section => section.id === id);\n    if (!selected || selected.isInactive) return;\n    this.closeSectionMenu();\n    this.dsSectionChange.emit(id);\n    requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n  };\n\n  private toggleActionMenu = (event: MouseEvent) => {\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.sectionMenuOpen = false;\n    this.actionMenuOpen = !this.actionMenuOpen;\n  };\n\n  private closeActionMenu = () => {\n    this.actionMenuOpen = false;\n  };\n\n  private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const primaryMatches = this.primaryCollapsed && this.primaryAction?.id === id;\n    const action = this.selectableActions.find(candidate => candidate.id === id);\n    if (!primaryMatches && !action) return;\n    if (\n      (primaryMatches && (this.primaryAction?.isInactive || this.primaryAction?.isLoading)) ||\n      action?.isInactive\n    ) {\n      return;\n    }\n    this.closeActionMenu();\n    this.dsAction.emit(id);\n    requestAnimationFrame(() => void this.actionTriggerEl?.setFocus?.());\n  };\n\n  private renderSectionSelector() {\n    if (!this.hasSectionSelector) return null;\n    return [\n      <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n      <div class=\"bar-title__section-selector\">\n        <button\n          ref={el => {\n            this.sectionTriggerEl = el ?? null;\n          }}\n          id={this.sectionMenuTriggerId}\n          class={{\n            'bar-title__section-trigger': true,\n            'bar-title__section-trigger--expanded': this.sectionMenuOpen,\n            'ds-control--md': true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n          }}\n          type=\"button\"\n          aria-haspopup=\"menu\"\n          aria-controls={this.sectionMenuId}\n          aria-expanded={String(this.sectionMenuOpen)}\n          aria-label={this.sectionTriggerAriaLabel}\n          onClick={this.toggleSectionMenu}\n        >\n          <ds-text\n            class=\"bar-title__section-label ds-interaction-fill__content\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n          >\n            {this.selectedSectionLabel}\n          </ds-text>\n          <ds-icon\n            class=\"bar-title__section-chevron ds-interaction-fill__content\"\n            name=\"ChevronUpDown\"\n            size=\"md\"\n            color=\"inherit\"\n            aria-hidden=\"true\"\n          />\n        </button>\n      </div>,\n    ];\n  }\n\n  private renderActions() {\n    const primary = this.primaryAction;\n    if (!primary && !this.showActionMenuTrigger) return null;\n\n    return (\n      <div class=\"bar-title__actions\">\n        {primary && !this.primaryCollapsed ? (\n          <ds-button-filled\n            class=\"bar-title__primary-action\"\n            variant={primary.icon ? 'icon-label' : 'label'}\n            icon={primary.icon ?? ''}\n            label={primary.label}\n            intent={primary.intent ?? 'brand'}\n            contrast={primary.contrast ?? 'bold'}\n            size=\"md\"\n            type={primary.type ?? 'button'}\n            isInactive={primary.isInactive}\n            isLoading={primary.isLoading}\n            onDsClick={() => this.dsAction.emit(primary.id)}\n          />\n        ) : null}\n        {this.showActionMenuTrigger ? (\n          <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              ref={el => {\n                this.actionTriggerEl = el ?? null;\n              }}\n              id={this.actionMenuTriggerId}\n              class=\"bar-title__more-actions\"\n              variant=\"icon\"\n              icon=\"Ellipses\"\n              aria-label={this.actionsAriaLabel}\n              size=\"md\"\n              activeFill={!this.compact}\n              hasBorder={!this.compact && !this.primaryCollapsed}\n              haspopup=\"menu\"\n              controls={this.actionMenuId}\n              expanded={this.actionMenuOpen}\n              onDsClick={(event: CustomEvent<MouseEvent>) => this.toggleActionMenu(event.detail)}\n            />\n          </ds-tooltip>\n        ) : null}\n      </div>\n    );\n  }\n\n  private renderBack(compact: boolean) {\n    if (!this.showBack) return null;\n\n    if (!compact) {\n      return (\n        <div class=\"bar-title__breadcrumb\">\n          <ds-button-unfilled\n            class=\"bar-title__breadcrumb-back\"\n            variant=\"icon-label\"\n            icon=\"ChevronLeft\"\n            label={this.backLabel}\n            aria-label={this.backAriaLabel}\n            size=\"xs\"\n            hasBorder={false}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n          />\n        </div>\n      );\n    }\n\n    return (\n      <ds-tooltip label={this.backTooltipLabel} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          class=\"bar-title__back\"\n          variant=\"icon\"\n          icon=\"ChevronLeft\"\n          aria-label={this.backAriaLabel}\n          size=\"md\"\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const compact = this.compact;\n    return (\n      <Host\n        class={{\n          'bar-title-host--compact': compact,\n          'bar-title-host--expanded': this.variant === 'expanded',\n          'bar-title-host--constrained': this.variant === 'constrained',\n          'bar-title-host--has-description': !!this.description,\n          'bar-title-host--has-back': this.showBack,\n        }}\n      >\n        <div class=\"bar-title\">\n          <div class=\"bar-title__inner\">\n            <div class=\"bar-title__row\">\n              <div class=\"bar-title__leading\">\n                {!compact ? this.renderBack(false) : null}\n                <div class=\"bar-title__title-row\">\n                  <div class=\"bar-title__identity\">\n                    {compact ? this.renderBack(true) : null}\n                    <ds-text\n                      class=\"bar-title__heading ds-control--md\"\n                      variant={compact ? 'text-title-small' : 'text-title-medium'}\n                      emphasis\n                      color=\"primary\"\n                      as=\"h1\"\n                      lineTruncation={1}\n                    >\n                      {this.heading}\n                    </ds-text>\n                  </div>\n                  {this.renderSectionSelector()}\n                </div>\n                {this.description && !compact ? (\n                  <ds-text\n                    class=\"bar-title__description\"\n                    variant=\"text-body-small\"\n                    color=\"secondary\"\n                    lineTruncation={2}\n                    wrap=\"wrap\"\n                    as=\"p\"\n                  >\n                    {this.description}\n                  </ds-text>\n                ) : null}\n              </div>\n              {this.renderActions()}\n            </div>\n          </div>\n        </div>\n\n        {this.hasSectionSelector ? (\n          <ds-menu\n            id={this.sectionMenuId}\n            class=\"bar-title__section-menu\"\n            anchorId={this.sectionMenuTriggerId}\n            menuLabel={this.sectionsAriaLabel}\n            open={this.sectionMenuOpen}\n            initialFocusVisible={this.sectionMenuInitialFocusVisible}\n            sections={this.sectionMenuSections}\n            onDsClose={this.closeSectionMenu}\n            onDsSelect={this.handleSectionSelect}\n          />\n        ) : null}\n\n        {this.showActionMenuTrigger ? (\n          <ds-menu\n            id={this.actionMenuId}\n            class=\"bar-title__action-menu\"\n            anchorId={this.actionMenuTriggerId}\n            align=\"end\"\n            menuLabel={this.actionsAriaLabel}\n            open={this.actionMenuOpen}\n            initialFocusVisible={this.actionMenuInitialFocusVisible}\n            sections={this.actionMenuSections}\n            onDsClose={this.closeActionMenu}\n            onDsSelect={this.handleActionSelect}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["isBarTitleDivider","item","type","barTitleCss","nextBarTitleId","BarTitle","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","description","showBack","backAriaLabel","backLabel","breadcrumbs","breadcrumbAriaLabel","sections","value","sectionsAriaLabel","primaryAction","actions","actionsAriaLabel","variant","sectionMenuOpen","actionMenuOpen","sectionMenuInitialFocusVisible","actionMenuInitialFocusVisible","instanceId","sectionMenuTriggerId","sectionMenuId","actionMenuTriggerId","actionMenuId","sectionTriggerEl","actionTriggerEl","toggleSectionMenu","event","detail","closeSectionMenu","handleSectionSelect","id","String","selected","selectableSections","find","section","isInactive","dsSectionChange","emit","requestAnimationFrame","focus","toggleActionMenu","closeActionMenu","handleActionSelect","primaryMatches","primaryCollapsed","action","selectableActions","candidate","isLoading","dsAction","setFocus","handleBreadcrumbSelect","length","dsBack","originalEvent","forwarded","dsBreadcrumbSelect","defaultPrevented","preventDefault","componentWillLoad","el","closest","setAttribute","handleSectionsChange","hasSectionSelector","handleActionsChange","showActionMenuTrigger","compact","expandedBreadcrumbItems","label","ariaLabel","backTooltipLabel","collapse","filter","effectiveValue","some","selectedSectionLabel","sectionTriggerAriaLabel","groupsFromItems","source","map","groups","items","commit","push","sectionMenuSections","isSelected","actionMenuItem","primary","isDestructive","intent","actionMenuSections","renderSectionSelector","h","class","ref","onClick","as","emphasis","color","name","size","renderActions","icon","contrast","onDsClick","side","activeFill","hasBorder","haspopup","controls","expanded","renderBreadcrumb","onDsSelect","renderBack","render","Host","key","lineTruncation","heading","wrap","anchorId","menuLabel","open","initialFocusVisible","onDsClose","align"],"sources":["src/wc/components/BarTitle/bar-title-types.ts","src/wc/components/BarTitle/BarTitle.css?tag=ds-bar-title&encapsulation=scoped","src/wc/components/BarTitle/BarTitle.tsx"],"sourcesContent":["import type { ButtonFilledContrast, ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\n\nexport interface BarTitleSection {\n  id: string;\n  label: string;\n  isInactive?: boolean;\n}\n\nexport interface BarTitleDivider {\n  type: 'divider';\n}\n\nexport type BarTitleSectionItem = BarTitleSection | BarTitleDivider;\n\nexport interface BarTitleAction {\n  id: string;\n  label: string;\n  isInactive?: boolean;\n  isDestructive?: boolean;\n}\n\nexport interface BarTitlePrimaryAction extends BarTitleAction {\n  icon?: string;\n  intent?: ButtonFilledIntent;\n  contrast?: ButtonFilledContrast;\n  isLoading?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  collapse?: BarTitlePrimaryActionCollapse;\n}\n\nexport type BarTitleActionItem = BarTitleAction | BarTitleDivider;\n\nexport type BarTitleVariant = 'expanded' | 'compact' | 'constrained';\n\nexport type BarTitlePrimaryActionCollapse = 'auto' | 'never';\n\nexport function isBarTitleDivider(\n  item: BarTitleSectionItem | BarTitleActionItem\n): item is BarTitleDivider {\n  return 'type' in item && item.type === 'divider';\n}\n","@import '../../utils/control-density.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/interaction-fill.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n:host([data-shell-page-syncing]) {\n  visibility: hidden;\n}\n\n.bar-title {\n  position: relative;\n  min-width: 0;\n  padding: 0;\n  box-sizing: border-box;\n  background: var(--color-background-primary);\n}\n\n.bar-title::after {\n  content: '';\n  position: absolute;\n  inset: auto var(--dimension-space-400) 0;\n  height: var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n  pointer-events: none;\n}\n\n.bar-title__inner {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n  gap: var(--dimension-space-100);\n  padding: var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n.bar-title__row {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  min-height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n:host(.bar-title-host--expanded) .bar-title__row {\n  gap: var(--dimension-space-400);\n}\n\n.bar-title__leading {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n.bar-title__title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  min-height: var(--dimension-size-400);\n}\n\n.bar-title__identity {\n  display: flex;\n  flex: 0 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n}\n\n.bar-title__back,\n.bar-title__section-chevron {\n  flex: 0 0 auto;\n}\n\n.bar-title__breadcrumb {\n  display: block;\n  width: 100%;\n  min-width: 0;\n}\n\n.bar-title__heading {\n  display: block;\n  width: auto;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n}\n\n.bar-title__divider {\n  width: var(--dimension-stroke-width-012);\n  height: var(--dimension-size-250);\n  margin-inline-start: var(--dimension-space-100);\n  flex: 0 0 var(--dimension-stroke-width-012);\n  background: var(--color-border-tertiary);\n}\n\n.bar-title__section-selector {\n  display: flex;\n  flex: 0 1 auto;\n  min-width: 0;\n  max-width: var(--dimension-panel-width-sm);\n}\n\n.bar-title__section-trigger {\n  --ds-control-radius: var(--dimension-radius-half);\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ds-control-gap);\n  height: var(--ds-control-height);\n  min-width: 0;\n  max-width: 100%;\n  padding-inline: var(--ds-control-padding-inline);\n  border: none;\n  border-radius: var(--ds-control-radius);\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-secondary);\n  cursor: pointer;\n  font-family: inherit;\n  user-select: none;\n  transition: color var(--effect-motion-short-2);\n}\n\n.bar-title__section-trigger--expanded {\n  color: var(--color-foreground-primary);\n}\n\n.bar-title__section-trigger--expanded::after,\n.bar-title__section-trigger--expanded:hover::after {\n  background: var(--ds-interaction-pressed);\n}\n\n.bar-title__section-label {\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.bar-title__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  flex: 0 0 auto;\n}\n\n.bar-title__description {\n  display: block;\n  min-width: 0;\n  max-width: 100%;\n}\n\n:host(.bar-title-host--compact) .bar-title {\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n}\n\n:host(.bar-title-host--compact) .bar-title::after {\n  inset-inline: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__inner {\n  height: 100%;\n  padding: 0;\n  gap: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__row {\n  height: 100%;\n  align-items: center;\n}\n\n:host(.bar-title-host--compact) .bar-title__identity {\n  height: var(--dimension-size-400);\n}\n\n:host(.bar-title-host--compact) .bar-title__divider {\n  margin-inline-start: 0;\n}\n\n:host(.bar-title-host--compact) .bar-title__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  height: var(--dimension-size-400);\n  padding-inline: calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));\n  box-sizing: border-box;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .bar-title__section-trigger {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport type { BreadcrumbItem, BreadcrumbSelectDetail } from '../Breadcrumb/breadcrumb-types';\nimport type { MenuItemData, MenuSection } from '../Menu/menu-types';\nimport {\n  isBarTitleDivider,\n  type BarTitleAction,\n  type BarTitleActionItem,\n  type BarTitlePrimaryAction,\n  type BarTitleSection,\n  type BarTitleSectionItem,\n  type BarTitleVariant,\n} from './bar-title-types';\n\nlet nextBarTitleId = 0;\n\ntype FocusableButton = HTMLElement & { setFocus?: () => Promise<void> };\n\n@Component({\n  tag: 'ds-bar-title',\n  styleUrl: 'BarTitle.css',\n  scoped: true,\n})\nexport class BarTitle {\n  @Element() el!: HTMLElement;\n\n  /** The page's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Optional supporting copy shown in the expanded presentation. */\n  @Prop() description: string = '';\n\n  /** Show the leading page-level Back action. */\n  @Prop({ attribute: 'show-back' }) showBack: boolean = false;\n\n  /** Accessible name for the leading Back action. */\n  @Prop() backAriaLabel: string = 'Back';\n\n  /** Visible parent-page label used by the expanded breadcrumb when breadcrumbs is empty. */\n  @Prop() backLabel: string = 'Back';\n\n  /** Optional expanded ancestor path. Compact variants continue to use the Back action. */\n  @Prop() breadcrumbs: BreadcrumbItem[] = [];\n\n  /** Accessible name for the expanded breadcrumb navigation landmark. */\n  @Prop() breadcrumbAriaLabel: string = 'Breadcrumb';\n\n  /** Optional page sections exposed through the active-section menu. */\n  @Prop() sections: BarTitleSectionItem[] = [];\n\n  /** Id of the active page section. */\n  @Prop() value: string = '';\n\n  /** Accessible name for the page-section menu. */\n  @Prop() sectionsAriaLabel: string = 'Change page section';\n\n  /** The one highest-emphasis page action. */\n  @Prop() primaryAction: BarTitlePrimaryAction | null = null;\n\n  /** Secondary page actions shown in the overflow menu. Dividers create groups. */\n  @Prop() actions: BarTitleActionItem[] = [];\n\n  /** Accessible name for the page-actions menu. */\n  @Prop() actionsAriaLabel: string = 'More page actions';\n\n  /** Explicit visual/capacity variant. ShellPage owns automatic selection. */\n  @Prop() variant: BarTitleVariant = 'expanded';\n\n  /** Emitted when the leading Back action is activated. */\n  @Event() dsBack!: EventEmitter<MouseEvent>;\n\n  /** Emitted when an authored expanded breadcrumb item is activated. */\n  @Event({ cancelable: true }) dsBreadcrumbSelect!: EventEmitter<BreadcrumbSelectDetail>;\n\n  /** Emitted with the newly selected page-section id. */\n  @Event() dsSectionChange!: EventEmitter<string>;\n\n  /** Emitted with the activated primary or overflow action id. */\n  @Event() dsAction!: EventEmitter<string>;\n\n  @State() private sectionMenuOpen = false;\n  @State() private actionMenuOpen = false;\n  @State() private sectionMenuInitialFocusVisible = false;\n  @State() private actionMenuInitialFocusVisible = false;\n\n  private readonly instanceId = nextBarTitleId++;\n  private readonly sectionMenuTriggerId = `bar-title-section-trigger-${this.instanceId}`;\n  private readonly sectionMenuId = `bar-title-section-menu-${this.instanceId}`;\n  private readonly actionMenuTriggerId = `bar-title-action-trigger-${this.instanceId}`;\n  private readonly actionMenuId = `bar-title-action-menu-${this.instanceId}`;\n  private sectionTriggerEl: HTMLButtonElement | null = null;\n  private actionTriggerEl: FocusableButton | null = null;\n\n  componentWillLoad() {\n    if (this.el.closest('ds-shell-page')) {\n      this.el.setAttribute('data-shell-page-syncing', '');\n    }\n  }\n\n  @Watch('sections')\n  handleSectionsChange() {\n    if (!this.hasSectionSelector) this.closeSectionMenu();\n  }\n\n  @Watch('actions')\n  @Watch('primaryAction')\n  handleActionsChange() {\n    if (!this.showActionMenuTrigger) this.closeActionMenu();\n  }\n\n  private get compact(): boolean {\n    return this.variant !== 'expanded';\n  }\n\n  private get expandedBreadcrumbItems(): BreadcrumbItem[] {\n    if (this.breadcrumbs.length > 0) return this.breadcrumbs;\n    if (!this.showBack) return [];\n    return [\n      {\n        id: 'back',\n        label: this.backLabel,\n        ariaLabel: this.backAriaLabel,\n      },\n    ];\n  }\n\n  /** Tooltip copy is fixed and generic; backAriaLabel/actionsAriaLabel stay page-specific. */\n  private get backTooltipLabel(): string {\n    return 'Go back';\n  }\n\n  private get primaryCollapsed(): boolean {\n    return (\n      this.variant === 'constrained' &&\n      this.primaryAction !== null &&\n      (this.primaryAction.collapse ?? 'auto') === 'auto'\n    );\n  }\n\n  private get selectableSections(): BarTitleSection[] {\n    return this.sections.filter((item): item is BarTitleSection => !isBarTitleDivider(item));\n  }\n\n  private get hasSectionSelector(): boolean {\n    return this.selectableSections.length > 1;\n  }\n\n  private get effectiveValue(): string {\n    return this.selectableSections.some(section => section.id === this.value)\n      ? this.value\n      : (this.selectableSections[0]?.id ?? '');\n  }\n\n  private get selectedSectionLabel(): string {\n    return this.selectableSections.find(section => section.id === this.effectiveValue)?.label ?? '';\n  }\n\n  private get sectionTriggerAriaLabel(): string {\n    return `${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`;\n  }\n\n  private groupsFromItems<T extends BarTitleSection | BarTitleAction>(\n    source: Array<T | { type: 'divider' }>,\n    map: (item: T) => MenuItemData\n  ): MenuSection[] {\n    const groups: MenuSection[] = [];\n    let items: MenuItemData[] = [];\n    const commit = () => {\n      if (items.length > 0) groups.push({ items });\n      items = [];\n    };\n\n    for (const item of source) {\n      if (isBarTitleDivider(item)) {\n        commit();\n      } else {\n        items.push(map(item));\n      }\n    }\n    commit();\n    return groups;\n  }\n\n  private get sectionMenuSections(): MenuSection[] {\n    return this.groupsFromItems(this.sections, section => ({\n      label: section.label,\n      value: section.id,\n      isSelected: section.id === this.effectiveValue,\n      isInactive: section.isInactive,\n    }));\n  }\n\n  private get selectableActions(): BarTitleAction[] {\n    return this.actions.filter((item): item is BarTitleAction => !isBarTitleDivider(item));\n  }\n\n  private get showActionMenuTrigger(): boolean {\n    return (\n      this.selectableActions.length > 0 || (this.primaryCollapsed && this.primaryAction !== null)\n    );\n  }\n\n  private actionMenuItem(action: BarTitleAction | BarTitlePrimaryAction): MenuItemData {\n    const primary = action as BarTitlePrimaryAction;\n    return {\n      label: action.label,\n      value: action.id,\n      isInactive: action.isInactive || primary.isLoading,\n      isDestructive: action.isDestructive || primary.intent === 'negative',\n    };\n  }\n\n  private get actionMenuSections(): MenuSection[] {\n    const groups = this.groupsFromItems(this.actions, action => this.actionMenuItem(action));\n    if (!this.primaryCollapsed || !this.primaryAction) return groups;\n    return [{ items: [this.actionMenuItem(this.primaryAction)] }, ...groups];\n  }\n\n  private toggleSectionMenu = (event: MouseEvent) => {\n    this.sectionMenuInitialFocusVisible = event.detail === 0;\n    this.actionMenuOpen = false;\n    this.sectionMenuOpen = !this.sectionMenuOpen;\n  };\n\n  private closeSectionMenu = () => {\n    this.sectionMenuOpen = false;\n  };\n\n  private handleSectionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const selected = this.selectableSections.find(section => section.id === id);\n    if (!selected || selected.isInactive) return;\n    this.closeSectionMenu();\n    this.dsSectionChange.emit(id);\n    requestAnimationFrame(() => this.sectionTriggerEl?.focus());\n  };\n\n  private toggleActionMenu = (event: MouseEvent) => {\n    this.actionMenuInitialFocusVisible = event.detail === 0;\n    this.sectionMenuOpen = false;\n    this.actionMenuOpen = !this.actionMenuOpen;\n  };\n\n  private closeActionMenu = () => {\n    this.actionMenuOpen = false;\n  };\n\n  private handleActionSelect = (event: CustomEvent<MenuItemData>) => {\n    const id = String(event.detail?.value ?? '');\n    const primaryMatches = this.primaryCollapsed && this.primaryAction?.id === id;\n    const action = this.selectableActions.find(candidate => candidate.id === id);\n    if (!primaryMatches && !action) return;\n    if (\n      (primaryMatches && (this.primaryAction?.isInactive || this.primaryAction?.isLoading)) ||\n      action?.isInactive\n    ) {\n      return;\n    }\n    this.closeActionMenu();\n    this.dsAction.emit(id);\n    requestAnimationFrame(() => void this.actionTriggerEl?.setFocus?.());\n  };\n\n  private renderSectionSelector() {\n    if (!this.hasSectionSelector) return null;\n    return [\n      <div class=\"bar-title__divider\" aria-hidden=\"true\" />,\n      <div class=\"bar-title__section-selector\">\n        <button\n          ref={el => {\n            this.sectionTriggerEl = el ?? null;\n          }}\n          id={this.sectionMenuTriggerId}\n          class={{\n            'bar-title__section-trigger': true,\n            'bar-title__section-trigger--expanded': this.sectionMenuOpen,\n            'ds-control--md': true,\n            'ds-focus-ring-inset': true,\n            'ds-interaction-fill': true,\n          }}\n          type=\"button\"\n          aria-haspopup=\"menu\"\n          aria-controls={this.sectionMenuId}\n          aria-expanded={String(this.sectionMenuOpen)}\n          aria-label={this.sectionTriggerAriaLabel}\n          onClick={this.toggleSectionMenu}\n        >\n          <ds-text\n            class=\"bar-title__section-label ds-interaction-fill__content\"\n            as=\"span\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"primary\"\n          >\n            {this.selectedSectionLabel}\n          </ds-text>\n          <ds-icon\n            class=\"bar-title__section-chevron ds-interaction-fill__content\"\n            name=\"ChevronUpDown\"\n            size=\"md\"\n            color=\"inherit\"\n            aria-hidden=\"true\"\n          />\n        </button>\n      </div>,\n    ];\n  }\n\n  private renderActions() {\n    const primary = this.primaryAction;\n    if (!primary && !this.showActionMenuTrigger) return null;\n\n    return (\n      <div class=\"bar-title__actions\">\n        {primary && !this.primaryCollapsed ? (\n          <ds-button-filled\n            class=\"bar-title__primary-action\"\n            variant={primary.icon ? 'icon-label' : 'label'}\n            icon={primary.icon ?? ''}\n            label={primary.label}\n            intent={primary.intent ?? 'brand'}\n            contrast={primary.contrast ?? 'bold'}\n            size=\"md\"\n            type={primary.type ?? 'button'}\n            isInactive={primary.isInactive}\n            isLoading={primary.isLoading}\n            onDsClick={() => this.dsAction.emit(primary.id)}\n          />\n        ) : null}\n        {this.showActionMenuTrigger ? (\n          <ds-tooltip label=\"Page options\" side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              ref={el => {\n                this.actionTriggerEl = el ?? null;\n              }}\n              id={this.actionMenuTriggerId}\n              class=\"bar-title__more-actions\"\n              variant=\"icon\"\n              icon=\"Ellipses\"\n              aria-label={this.actionsAriaLabel}\n              size=\"md\"\n              activeFill={!this.compact}\n              hasBorder={primary !== null && !this.primaryCollapsed}\n              haspopup=\"menu\"\n              controls={this.actionMenuId}\n              expanded={this.actionMenuOpen}\n              onDsClick={(event: CustomEvent<MouseEvent>) => this.toggleActionMenu(event.detail)}\n            />\n          </ds-tooltip>\n        ) : null}\n      </div>\n    );\n  }\n\n  private handleBreadcrumbSelect = (event: CustomEvent<BreadcrumbSelectDetail>) => {\n    if (this.breadcrumbs.length === 0) {\n      this.dsBack.emit(event.detail.originalEvent);\n      return;\n    }\n    const forwarded = this.dsBreadcrumbSelect.emit(event.detail);\n    if (forwarded.defaultPrevented) event.preventDefault();\n  };\n\n  private renderBreadcrumb() {\n    const items = this.expandedBreadcrumbItems;\n    if (items.length === 0) return null;\n    return (\n      <ds-breadcrumb\n        class=\"bar-title__breadcrumb\"\n        items={items}\n        ariaLabel={this.breadcrumbAriaLabel}\n        onDsSelect={this.handleBreadcrumbSelect}\n      />\n    );\n  }\n\n  private renderBack() {\n    if (!this.showBack) return null;\n    return (\n      <ds-tooltip label={this.backTooltipLabel} side=\"bottom\" size=\"sm\">\n        <ds-button-unfilled\n          class=\"bar-title__back\"\n          variant=\"icon\"\n          icon=\"ChevronLeft\"\n          aria-label={this.backAriaLabel}\n          size=\"md\"\n          activeFill={false}\n          hasBorder={false}\n          onDsClick={(event: CustomEvent<MouseEvent>) => this.dsBack.emit(event.detail)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  render() {\n    const compact = this.compact;\n    return (\n      <Host\n        class={{\n          'bar-title-host--compact': compact,\n          'bar-title-host--expanded': this.variant === 'expanded',\n          'bar-title-host--constrained': this.variant === 'constrained',\n          'bar-title-host--has-description': !!this.description,\n          'bar-title-host--has-back': this.showBack,\n          'bar-title-host--has-breadcrumb': !compact && this.expandedBreadcrumbItems.length > 0,\n        }}\n      >\n        <div class=\"bar-title\">\n          <div class=\"bar-title__inner\">\n            {!compact ? this.renderBreadcrumb() : null}\n            <div class=\"bar-title__row\">\n              <div class=\"bar-title__leading\">\n                <div class=\"bar-title__title-row\" data-shell-page-header-anchor>\n                  <div class=\"bar-title__identity\">\n                    {compact ? this.renderBack() : null}\n                    <ds-text\n                      class=\"bar-title__heading ds-control--md\"\n                      variant={compact ? 'text-title-small' : 'text-title-medium'}\n                      emphasis\n                      color=\"primary\"\n                      as=\"h1\"\n                      lineTruncation={1}\n                    >\n                      {this.heading}\n                    </ds-text>\n                  </div>\n                  {this.renderSectionSelector()}\n                </div>\n                {this.description && !compact ? (\n                  <ds-text\n                    class=\"bar-title__description\"\n                    variant=\"text-body-small\"\n                    color=\"secondary\"\n                    lineTruncation={2}\n                    wrap=\"wrap\"\n                    as=\"p\"\n                  >\n                    {this.description}\n                  </ds-text>\n                ) : null}\n              </div>\n              {this.renderActions()}\n            </div>\n          </div>\n        </div>\n\n        {this.hasSectionSelector ? (\n          <ds-menu\n            id={this.sectionMenuId}\n            class=\"bar-title__section-menu\"\n            anchorId={this.sectionMenuTriggerId}\n            menuLabel={this.sectionsAriaLabel}\n            open={this.sectionMenuOpen}\n            initialFocusVisible={this.sectionMenuInitialFocusVisible}\n            sections={this.sectionMenuSections}\n            onDsClose={this.closeSectionMenu}\n            onDsSelect={this.handleSectionSelect}\n          />\n        ) : null}\n\n        {this.showActionMenuTrigger ? (\n          <ds-menu\n            id={this.actionMenuId}\n            class=\"bar-title__action-menu\"\n            anchorId={this.actionMenuTriggerId}\n            align=\"end\"\n            menuLabel={this.actionsAriaLabel}\n            open={this.actionMenuOpen}\n            initialFocusVisible={this.actionMenuInitialFocusVisible}\n            sections={this.actionMenuSections}\n            onDsClose={this.closeActionMenu}\n            onDsSelect={this.handleActionSelect}\n          />\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-bar-workflow.js

@@ -1,2 +1,2 @@
-import{p as s,H as i,c as o,h as t,a as e,t as a}from"./index.js";import{d as n}from"./p-DOCKtrS4.js";import{d as r}from"./p-GMDGgtY8.js";import{d as l}from"./p-xY3TjBF5.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as b}from"./p-C0_8K4y7.js";import{d as f}from"./p-CCHqsF_H.js";const h=()=>`.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow,.ds-control--sm.sc-ds-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow,.ds-control--xs.sc-ds-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow{--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-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow{--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-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-bar-workflow-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow.sc-ds-bar-workflow{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow__identity.sc-ds-bar-workflow{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:0}.bar-workflow__heading.sc-ds-bar-workflow{display:inline-flex;flex:1 1 auto;align-items:center;width:auto;min-width:0;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}.bar-workflow__actions.sc-ds-bar-workflow{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}`;const m=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=o(this,"dsExit");this.dsStepChange=o(this,"dsStepChange");this.dsSubmit=o(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.handlePrevious=()=>{if(this.previousStep&&!this.previousStep.isInactive){this.dsStepChange.emit(this.previousStep.id)}};this.handleNext=()=>{if(this.nextStep&&!this.isNextInactive&&!this.nextStep.isInactive){this.dsStepChange.emit(this.nextStep.id)}}}get currentIndex(){const s=this.steps.findIndex((s=>s.id===this.value));return s>=0?s:0}get previousStep(){return this.steps[this.currentIndex-1]??null}get nextStep(){return this.steps[this.currentIndex+1]??null}get isLastStep(){return this.steps.length<=1||this.currentIndex===this.steps.length-1}get resolvedHeading(){if(this.steps.length<=1)return this.heading;return`${this.heading} · ${this.currentIndex+1}/${this.steps.length}`}render(){const s=this.submitAction;return t(e,{key:"ada2726cd7649e04a8cc93b29cbd9fe42573e787"},t("div",{key:"3637bfe648d9c6f4054429ffe372633acce6e010",class:"bar-workflow"},t("div",{key:"f98e42bff7361cdb2ffd4e1494a23aad41075292",class:"bar-workflow__identity"},t("ds-tooltip",{key:"be8df3f8e1dbfd53c503ca53c135dff2b58fff89",label:this.exitLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"59608cf6f52925ba164c1136878bdc6ef2e6989c",class:"bar-workflow__exit",variant:"icon",icon:"Cross","aria-label":this.exitAriaLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,onDsClick:s=>this.dsExit.emit(s.detail)})),t("ds-text",{key:"65f3850b14f19c4db187cf8af2de0573e256074f",class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),t("div",{key:"b7a73358a20ff1af1fbe845b1efff29d9e9c7645",class:"bar-workflow__actions"},this.previousStep?t("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?t("ds-tooltip",{label:s.label,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:s.label,"aria-label":s.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:s.type??"submit",isInactive:s.isInactive,isLoading:s.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)})):t("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext})))))}static get style(){return h()}},[2,"ds-bar-workflow",{heading:[1],steps:[16],value:[1],exitLabel:[1,"exit-label"],exitAriaLabel:[1,"exit-aria-label"],previousLabel:[1,"previous-label"],nextLabel:[1,"next-label"],submitAction:[16],isNextInactive:[4,"is-next-inactive"]}]);function p(){if(typeof customElements==="undefined"){return}const s=["ds-bar-workflow","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(a(s))){customElements.define(a(s),m)}break;case"ds-badge":if(!customElements.get(a(s))){n()}break;case"ds-button-filled":if(!customElements.get(a(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){l()}break;case"ds-icon":if(!customElements.get(a(s))){d()}break;case"ds-loader":if(!customElements.get(a(s))){c()}break;case"ds-text":if(!customElements.get(a(s))){b()}break;case"ds-tooltip":if(!customElements.get(a(s))){f()}break}}))}p();const w=m;const u=p;export{w as DsBarWorkflow,u as defineCustomElement};
+import{p as s,H as i,c as o,h as t,a as e,t as a}from"./index.js";import{d as n}from"./p-CH6cNXXF.js";import{d as r}from"./p-BhxwpOH8.js";import{d}from"./p-CoYFJD-w.js";import{d as l}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as b}from"./p-BwGnhInj.js";import{d as f}from"./p-BPS9VExm.js";const h=()=>`.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow,.ds-control--sm.sc-ds-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow,.ds-control--xs.sc-ds-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-bar-workflow-h,.ds-control--md.sc-ds-bar-workflow{--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-bar-workflow-h,.ds-control--sm.sc-ds-bar-workflow{--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-bar-workflow-h,.ds-control--xs.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.sc-ds-bar-workflow-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow.sc-ds-bar-workflow{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow__identity.sc-ds-bar-workflow{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:0}.bar-workflow__heading.sc-ds-bar-workflow{display:inline-flex;flex:1 1 auto;align-items:center;width:auto;min-width:0;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}.bar-workflow__actions.sc-ds-bar-workflow{display:flex;flex:0 0 auto;align-items:center;gap:var(--dimension-space-100)}`;const m=s(class s extends i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=o(this,"dsExit");this.dsStepChange=o(this,"dsStepChange");this.dsSubmit=o(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.handlePrevious=()=>{if(this.previousStep&&!this.previousStep.isInactive){this.dsStepChange.emit(this.previousStep.id)}};this.handleNext=()=>{if(this.nextStep&&!this.isNextInactive&&!this.nextStep.isInactive){this.dsStepChange.emit(this.nextStep.id)}}}get currentIndex(){const s=this.steps.findIndex((s=>s.id===this.value));return s>=0?s:0}get previousStep(){return this.steps[this.currentIndex-1]??null}get nextStep(){return this.steps[this.currentIndex+1]??null}get isLastStep(){return this.steps.length<=1||this.currentIndex===this.steps.length-1}get resolvedHeading(){if(this.steps.length<=1)return this.heading;return`${this.heading} · ${this.currentIndex+1}/${this.steps.length}`}render(){const s=this.submitAction;return t(e,{key:"c5bb82cba86bb0625c943ab37b7da3214b5dcf48"},t("div",{key:"99f9d6223498075e4e20da5532e8e1f4a2732fd7",class:"bar-workflow"},t("div",{key:"2cf2ed56382f618e3a7f544ef77ac12f082ba928",class:"bar-workflow__identity"},t("ds-tooltip",{key:"5d6ba04341a94d44d934e26afcc00bcc321d7d6e",label:this.exitLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{key:"ba3056ffc5f258e8a97ad0684aabde3faf234313",class:"bar-workflow__exit",variant:"icon",icon:"Cross","aria-label":this.exitAriaLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,onDsClick:s=>this.dsExit.emit(s.detail)})),t("ds-text",{key:"d6dede66a9a6fe475aa13b82e3a8637f06a70d66",class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),t("div",{key:"71a91c0beb23bcf693cdd408aa09701cc34bc682",class:"bar-workflow__actions"},this.previousStep?t("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?t("ds-tooltip",{label:s.label,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:s.label,"aria-label":s.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:s.type??"submit",isInactive:s.isInactive,isLoading:s.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)})):t("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext})))))}static get style(){return h()}},[2,"ds-bar-workflow",{heading:[1],steps:[16],value:[1],exitLabel:[1,"exit-label"],exitAriaLabel:[1,"exit-aria-label"],previousLabel:[1,"previous-label"],nextLabel:[1,"next-label"],submitAction:[16],isNextInactive:[4,"is-next-inactive"]}]);function w(){if(typeof customElements==="undefined"){return}const s=["ds-bar-workflow","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(a(s))){customElements.define(a(s),m)}break;case"ds-badge":if(!customElements.get(a(s))){n()}break;case"ds-button-filled":if(!customElements.get(a(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){d()}break;case"ds-icon":if(!customElements.get(a(s))){l()}break;case"ds-loader":if(!customElements.get(a(s))){c()}break;case"ds-text":if(!customElements.get(a(s))){b()}break;case"ds-tooltip":if(!customElements.get(a(s))){f()}break}}))}w();const p=m;const u=w;export{p as DsBarWorkflow,u as defineCustomElement};
 //# sourceMappingURL=ds-bar-workflow.js.map

package/dist/components/ds-breadcrumb.d.ts

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

package/dist/components/ds-breadcrumb.js

@@ -0,0 +1,2 @@
+import{B as o,d as s}from"./p-BVV_rlIP.js";const r=o;const t=s;export{r as DsBreadcrumb,t as defineCustomElement};
+//# sourceMappingURL=ds-breadcrumb.js.map

package/dist/components/ds-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-button-filled.js

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-GMDGgtY8.js";const t=o;const p=s;export{t as DsButtonFilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-BhxwpOH8.js";const p=o;const t=s;export{p as DsButtonFilled,t as defineCustomElement};
 //# sourceMappingURL=ds-button-filled.js.map

package/dist/components/ds-button-unfilled.js

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-xY3TjBF5.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-CoYFJD-w.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
 //# sourceMappingURL=ds-button-unfilled.js.map

package/dist/components/ds-card-data-viz-bar.d.ts

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

package/dist/components/ds-card-data-viz-bar.js

@@ -0,0 +1,2 @@
+import{p as a,H as e,c as s,h as d,a as t,t as i}from"./index.js";import{d as r}from"./p-CH6cNXXF.js";import{d as c}from"./p-CoYFJD-w.js";import{d as n}from"./p-DSa0Hnd3.js";import{d as o}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-BwGnhInj.js";const h=()=>`.sc-ds-card-data-viz-bar-h{display:contents}.card-data-viz-bar__layout.sc-ds-card-data-viz-bar{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;gap:var(--dimension-space-200)}.card-data-viz-bar__chart-region.sc-ds-card-data-viz-bar{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-400) var(--dimension-space-400) 0     var(--dimension-space-400)}.card-data-viz-bar__chart-region.sc-ds-card-data-viz-bar>*.sc-ds-card-data-viz-bar{width:100%;min-width:0;max-width:100%}.card-data-viz-bar__legend-region.sc-ds-card-data-viz-bar{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}`;const f=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.dsFilterClick=s(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidRender(){const a=this.el.querySelector('ds-chart-legend[slot="legend"]');if(!a)return;a.setAttribute("highlight-on-hover","false");if("highlightOnHover"in a)a.highlightOnHover=false}render(){return d(t,{key:"f7ad4476cc5584d6a62d1a9182c99d04be4e6034",class:"card-data-viz-bar"},d("ds-card-shell-data-viz",{key:"b4b0c1485088c3bc5415fa8fa475de748c782906",heading:this.heading,cardWidth:this.cardWidth},d("ds-button-unfilled",{key:"e671c5c7252b5df94c2a67ce729ed21e247dc21b",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),d("div",{key:"3e3bdfb0418b45f66b9db4f6965cf501dbe6d583",class:"card-data-viz-bar__layout"},this.hasChartSlot&&d("div",{key:"b935fcbf8a0bead7fca100d832ce443f498ceace",class:"card-data-viz-bar__chart-region"},d("slot",{key:"af0beb6816700c9d196de389e227c5c833708c15",name:"chart"})),this.hasLegendSlot&&d("div",{key:"bcd3bbaf1be3e0a9a6589e0099dbf951d26a53aa",class:"card-data-viz-bar__legend-region"},d("slot",{key:"233789fbaf1c749b6b072a4c6503121dccb9f980",name:"legend"})))))}get el(){return this}static get style(){return h()}},[262,"ds-card-data-viz-bar",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function m(){if(typeof customElements==="undefined"){return}const a=["ds-card-data-viz-bar","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz-bar":if(!customElements.get(i(a))){customElements.define(i(a),f)}break;case"ds-badge":if(!customElements.get(i(a))){r()}break;case"ds-button-unfilled":if(!customElements.get(i(a))){c()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(a))){n()}break;case"ds-icon":if(!customElements.get(i(a))){o()}break;case"ds-loader":if(!customElements.get(i(a))){l()}break;case"ds-text":if(!customElements.get(i(a))){b()}break}}))}m();const p=f;const g=m;export{p as DsCardDataVizBar,g as defineCustomElement};
+//# sourceMappingURL=ds-card-data-viz-bar.js.map

package/dist/components/ds-card-data-viz-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardDataVizBarCss","CardDataVizBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizBar/CardDataVizBar.css?tag=ds-card-data-viz-bar&encapsulation=scoped","src/wc/components/CardDataVizBar/CardDataVizBar.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.card-data-viz-bar__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-bar__chart-region {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz-bar__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-bar__legend-region {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizBarWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Bar-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and an optional, content-sized static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-bar',\n  styleUrl: 'CardDataVizBar.css',\n  scoped: true,\n})\nexport class CardDataVizBar {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizBarWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-bar\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-bar__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-bar__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-bar__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAoB,IAAM,gwB,MCkBnBC,EAAcC,EAAA,MAAAD,UAAAE,EAL3B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAiC,KACjCD,KAAAE,YAAsB,SAKbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MAgBzBJ,KAAAK,kBAAoB,KAC1BL,KAAKM,cAAcC,MAAM,CA+B5B,CA9CC,mBAAAC,GACER,KAAKG,eAAiBH,KAAKS,GAAGC,cAAc,kBAC5CV,KAAKI,gBAAkBJ,KAAKS,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASZ,KAAKS,GAAGC,cACrB,kCAEF,IAAKE,EAAQ,OACbA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,CAO9D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAASpB,KAAKoB,QAASnB,UAAWD,KAAKC,WAC7De,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFxB,KAAKE,YACjBuB,UAAWzB,KAAKK,oBAElBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACRnB,KAAKG,cACJa,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGd1B,KAAKI,eACJY,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}

package/dist/components/ds-card-data-viz-donut.js

@@ -1,2 +1,2 @@
-import{p as t,H as e,c as d,h as s,a,t as i}from"./index.js";import{d as n}from"./p-DOCKtrS4.js";import{d as o}from"./p-xY3TjBF5.js";import{d as r}from"./p-CNffejay.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as h}from"./p-C0_8K4y7.js";const f=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const m=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=d(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const t=this.el.querySelector('[slot="chart"]');if(!t||!("showTooltip"in t))return;t.showTooltip=!this.hasLegendSlot}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return s(a,{key:"b3cb4a59d822b1dd5eb58179cbe2900c1fed26e8",class:"card-data-viz-donut"},s("ds-card-shell-data-viz",{key:"577a8411ff3793f0fd8b5dfeb27f03e0b6ae2356",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"95fe298d880dbef92d6eedf608abe92865fafb78",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"a79834d6612e9b369295ca79a7d5c381014ffe96",class:"card-data-viz-donut__layout"},this.hasChartSlot&&s("div",{key:"b1d414d5fdf35923e55532998c3ab0314371d609",class:"card-data-viz-donut__chart-region"},s("slot",{key:"d35d1a262eed39bd400d7ace0ce5d5a8d133479b",name:"chart"})),this.hasLegendSlot&&s("div",{key:"697486120c4557d2b380ab9a2b123b27f9d568bc",class:"card-data-viz-donut__legend-region"},s("slot",{key:"9479b153f3d88233925725b8e00095450e2318fd",name:"legend"})))))}get el(){return this}static get style(){return f()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function u(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),m)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){r()}break;case"ds-icon":if(!customElements.get(i(t))){c()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}u();const b=m;const v=u;export{b as DsCardDataVizDonut,v as defineCustomElement};
+import{p as t,H as e,c as a,h as s,a as d,t as i}from"./index.js";import{d as n}from"./p-CH6cNXXF.js";import{d as o}from"./p-CoYFJD-w.js";import{d as c}from"./p-DSa0Hnd3.js";import{d as r}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as h}from"./p-BwGnhInj.js";const m=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const u=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const e=this.el.querySelector('[slot="legend"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const e=this.el.querySelector('[slot="chart"]');if(!e||!("activeLabel"in e))return;e.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const t=this.el.querySelector('[slot="chart"]');if(!t||!("showTooltip"in t))return;t.showTooltip=!this.hasLegendSlot}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return s(d,{key:"77d2c66100bcd0859ac154f45a5496d2bc112594",class:"card-data-viz-donut"},s("ds-card-shell-data-viz",{key:"2b27e2c0db1bcbe56253845922bcc52f768735ea",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"7ee7f87447ce938b4d89958a5ae000995ddaee34",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"fc16ef32cb38951adda2e331790b8cd5388318f1",class:"card-data-viz-donut__layout"},this.hasChartSlot&&s("div",{key:"d7485fc652520a1bcb45b07c77be22835025e846",class:"card-data-viz-donut__chart-region"},s("slot",{key:"70f030bb2750c87316ae709ddb7ee6de5aa977dc",name:"chart"})),this.hasLegendSlot&&s("div",{key:"acd4395d7f8665e1105aac533520895d1241190b",class:"card-data-viz-donut__legend-region"},s("slot",{key:"348e5dab2a30b074b62546b05d82fedf181ea80a",name:"legend"})))))}get el(){return this}static get style(){return m()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),u)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){c()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}b();const f=u;const v=b;export{f as DsCardDataVizDonut,v as defineCustomElement};
 //# sourceMappingURL=ds-card-data-viz-donut.js.map

package/dist/components/ds-card-data-viz-donut.js.map

@@ -1 +1 @@
-{"version":3,"names":["cardDataVizDonutCss","CardDataVizDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","handleFilterClick","dsFilterClick","emit","componentWillRender","componentDidLoad","addEventListener","componentDidRender","showTooltip","disconnectedCallback","removeEventListener","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizDonut/CardDataVizDonut.css?tag=ds-card-data-viz-donut&encapsulation=scoped","src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.card-data-viz-donut__layout {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n/*\n * Chart region fills leftover space; legend stays content-sized.\n * Padding is per-region so the body gap isn't doubled at the shared edge.\n */\n.card-data-viz-donut__chart-region {\n  flex: 1 1 auto;\n  min-height: 0;\n  /* Stretch the slotted donut to the full region; the donut centers its own SVG. */\n  display: grid;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n/* Make the slotted donut stretch to the region so ResizeObserver can measure fill size. */\n.card-data-viz-donut__chart-region > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz-donut__legend-region {\n  flex: 0 0 auto;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n  box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into composition behavior through public props. */\ntype SyncableSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('showTooltip' in chart)) return;\n    chart.showTooltip = !this.hasLegendSlot;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qRAAA,MAAMA,EAAsB,IAAM,kyB,MCuBrBC,EAAgBC,EAAA,MAAAD,UAAAE,EAL7B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAmC,KACnCD,KAAAE,YAAsB,SAQbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MA8BzBJ,KAAAK,iBAAoBC,IAI1B,MAAMC,EAASP,KAAKQ,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEZ,KAAAa,kBAAqBP,IAC3B,MAAMQ,EAAQd,KAAKQ,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGpEZ,KAAAe,kBAAoB,KAC1Bf,KAAKgB,cAAcC,MAAM,CA+B5B,CA3EC,mBAAAC,GAIElB,KAAKG,eAAiBH,KAAKQ,GAAGC,cAAc,kBAC5CT,KAAKI,gBAAkBJ,KAAKQ,GAAGC,cAAc,kB,CAG/C,gBAAAU,GAKEnB,KAAKQ,GAAGY,iBAAiB,eAAgBpB,KAAKK,kBAC9CL,KAAKQ,GAAGY,iBAAiB,cAAepB,KAAKa,kB,CAG/C,kBAAAQ,GACE,MAAMP,EAAQd,KAAKQ,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMQ,aAAetB,KAAKI,a,CAG5B,oBAAAmB,GACEvB,KAAKQ,GAAGgB,oBAAoB,eAAgBxB,KAAKK,kBACjDL,KAAKQ,GAAGgB,oBAAoB,cAAexB,KAAKa,kB,CAsBlD,MAAAY,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAAS9B,KAAK8B,QAAS7B,UAAWD,KAAKC,WAC7DyB,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFlC,KAAKE,YACjBiC,UAAWnC,KAAKe,oBAElBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACR7B,KAAKG,cACJuB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGdpC,KAAKI,eACJsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}
+{"version":3,"names":["cardDataVizDonutCss","CardDataVizDonut","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleChartHover","e","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","handleFilterClick","dsFilterClick","emit","componentWillRender","componentDidLoad","addEventListener","componentDidRender","showTooltip","disconnectedCallback","removeEventListener","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizDonut/CardDataVizDonut.css?tag=ds-card-data-viz-donut&encapsulation=scoped","src/wc/components/CardDataVizDonut/CardDataVizDonut.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.card-data-viz-donut__layout {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-height: 0;\n  height: 100%;\n  gap: var(--dimension-space-200);\n  box-sizing: border-box;\n}\n\n/*\n * Chart region fills leftover space; legend stays content-sized.\n * Padding is per-region so the body gap isn't doubled at the shared edge.\n */\n.card-data-viz-donut__chart-region {\n  flex: 1 1 auto;\n  min-height: 0;\n  /* Stretch the slotted donut to the full region; the donut centers its own SVG. */\n  display: grid;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);\n  box-sizing: border-box;\n}\n\n/* Make the slotted donut stretch to the region so ResizeObserver can measure fill size. */\n.card-data-viz-donut__chart-region > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz-donut__legend-region {\n  flex: 0 0 auto;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n  box-sizing: border-box;\n}\n","import { Component, Element, Event, EventEmitter, State, h, Host, Prop } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizDonutWidth = CardShellDataVizWidth;\n\n/** Matches the `dsSliceHover`/`dsItemHover` detail shape emitted by `ds-chart-*` and `ds-chart-legend`. */\ntype HoveredDatum = { label: string } | null;\n\n/** A slotted chart/legend that opts into composition behavior through public props. */\ntype SyncableSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\n/**\n * Donut data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart region and\n * content-sized legend. Hover sync between chart and legend stays here.\n */\n@Component({\n  tag: 'ds-card-data-viz-donut',\n  styleUrl: 'CardDataVizDonut.css',\n  scoped: true,\n})\nexport class CardDataVizDonut {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizDonutWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  // Scoped (light-DOM) components have no native slot projection to detect emptiness from CSS —\n  // check the actual children so an unused region (e.g. no legend) doesn't render a dangling\n  // padded box plus a body gap next to nothing.\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    // Not `:scope >` — Stencil's scoped slot polyfill relocates slotted children into\n    // region wrappers (and here into nested `ds-card-shell-data-viz`), so they may not stay direct\n    // host children across renders.\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidLoad() {\n    // Sync the chart's and legend's `activeLabel` from each other's hover events, so any\n    // ds-chart-donut + ds-chart-legend pair cross-highlights without every consumer having to\n    // wire it up by hand. Delegated on the host (rather than bound to the specific slotted\n    // elements) since Stencil events bubble and the slot content can be swapped at runtime.\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('showTooltip' in chart)) return;\n    chart.showTooltip = !this.hasLegendSlot;\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (e: Event) => {\n    // Not `:scope >` — Stencil's slot polyfill for scoped (non-shadow) components relocates\n    // slotted children into an inner region wrapper on render, so they're no longer direct\n    // children of the host by the time this fires.\n    const legend = this.el.querySelector('[slot=\"legend\"]') as SyncableSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (e: Event) => {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as SyncableSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel = (e as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-donut\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-donut__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-donut__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-donut__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAsB,IAAM,kyB,MCuBrBC,EAAgBC,EAAA,MAAAD,UAAAE,EAL7B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAmC,KACnCD,KAAAE,YAAsB,SAQbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MA8BzBJ,KAAAK,iBAAoBC,IAI1B,MAAMC,EAASP,KAAKQ,GAAGC,cAAc,mBACrC,IAAKF,KAAY,gBAAiBA,GAAS,OAC3CA,EAAOG,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGrEZ,KAAAa,kBAAqBP,IAC3B,MAAMQ,EAAQd,KAAKQ,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMJ,YAAeJ,EAAgCK,QAAQC,OAAS,IAAI,EAGpEZ,KAAAe,kBAAoB,KAC1Bf,KAAKgB,cAAcC,MAAM,CA+B5B,CA3EC,mBAAAC,GAIElB,KAAKG,eAAiBH,KAAKQ,GAAGC,cAAc,kBAC5CT,KAAKI,gBAAkBJ,KAAKQ,GAAGC,cAAc,kB,CAG/C,gBAAAU,GAKEnB,KAAKQ,GAAGY,iBAAiB,eAAgBpB,KAAKK,kBAC9CL,KAAKQ,GAAGY,iBAAiB,cAAepB,KAAKa,kB,CAG/C,kBAAAQ,GACE,MAAMP,EAAQd,KAAKQ,GAAGC,cAAc,kBACpC,IAAKK,KAAW,gBAAiBA,GAAQ,OACzCA,EAAMQ,aAAetB,KAAKI,a,CAG5B,oBAAAmB,GACEvB,KAAKQ,GAAGgB,oBAAoB,eAAgBxB,KAAKK,kBACjDL,KAAKQ,GAAGgB,oBAAoB,cAAexB,KAAKa,kB,CAsBlD,MAAAY,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,uBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAAS9B,KAAK8B,QAAS7B,UAAWD,KAAKC,WAC7DyB,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFlC,KAAKE,YACjBiC,UAAWnC,KAAKe,oBAElBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,+BACR7B,KAAKG,cACJuB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGdpC,KAAKI,eACJsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}

package/dist/components/ds-card-data-viz-line.d.ts

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

package/dist/components/ds-card-data-viz-line.js

@@ -0,0 +1,2 @@
+import{p as e,H as a,c as i,h as s,a as t,t as d}from"./index.js";import{d as n}from"./p-CH6cNXXF.js";import{d as c}from"./p-CoYFJD-w.js";import{d as r}from"./p-DSa0Hnd3.js";import{d as l}from"./p-BAfG3M8z.js";import{d as o}from"./p-Cpr3K41-.js";import{d as f}from"./p-BwGnhInj.js";const h=()=>`.sc-ds-card-data-viz-line-h{display:contents}.card-data-viz-line__layout.sc-ds-card-data-viz-line{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;gap:var(--dimension-space-200)}.card-data-viz-line__chart-region.sc-ds-card-data-viz-line{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-400) var(--dimension-space-400) 0     var(--dimension-space-400)}.card-data-viz-line__chart-region.sc-ds-card-data-viz-line>*.sc-ds-card-data-viz-line{width:100%;min-width:0;max-width:100%}.card-data-viz-line__legend-region.sc-ds-card-data-viz-line{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}`;const m=e(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.dsFilterClick=i(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidRender(){const e=this.el.querySelector('ds-chart-legend[slot="legend"]');if(!e)return;e.setAttribute("highlight-on-hover","false");if("highlightOnHover"in e)e.highlightOnHover=false}render(){return s(t,{key:"0ebfbb0fe4aa654223ff60a69928d11779614659",class:"card-data-viz-line"},s("ds-card-shell-data-viz",{key:"c21bab44f9785d58f1649ec09bcfccf2f3a5cc73",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"3233bc349eb40292b8ecce8937405df7c1bd4f40",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"974ac5dc55d921ff00da0055eb795f98a0152f44",class:"card-data-viz-line__layout"},this.hasChartSlot&&s("div",{key:"e80ad0264a521fa7c315bc22eef8f444cdffb63e",class:"card-data-viz-line__chart-region"},s("slot",{key:"bdfbf55472be11f1547d10799981561d87fc92f2",name:"chart"})),this.hasLegendSlot&&s("div",{key:"7cf226d2b70579c8800534315fed2346ba437b36",class:"card-data-viz-line__legend-region"},s("slot",{key:"5639fd2befc4947e8bc9bcdfce398287df4aa4e5",name:"legend"})))))}get el(){return this}static get style(){return h()}},[262,"ds-card-data-viz-line",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-card-data-viz-line","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-data-viz-line":if(!customElements.get(d(e))){customElements.define(d(e),m)}break;case"ds-badge":if(!customElements.get(d(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){c()}break;case"ds-card-shell-data-viz":if(!customElements.get(d(e))){r()}break;case"ds-icon":if(!customElements.get(d(e))){l()}break;case"ds-loader":if(!customElements.get(d(e))){o()}break;case"ds-text":if(!customElements.get(d(e))){f()}break}}))}b();const p=m;const g=b;export{p as DsCardDataVizLine,g as defineCustomElement};
+//# sourceMappingURL=ds-card-data-viz-line.js.map

package/dist/components/ds-card-data-viz-line.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardDataVizLineCss","CardDataVizLine","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","h","Host","key","class","heading","slot","variant","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataVizLine/CardDataVizLine.css?tag=ds-card-data-viz-line&encapsulation=scoped","src/wc/components/CardDataVizLine/CardDataVizLine.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.card-data-viz-line__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-height: 0;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz-line__chart-region {\n  display: grid;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-height: 0;\n  padding: var(--dimension-space-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz-line__chart-region > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-data-viz-line__legend-region {\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100)\n    var(--dimension-space-100);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport type { CardShellDataVizWidth } from '../CardShellDataViz/CardShellDataViz';\n\nexport type CardDataVizLineWidth = CardShellDataVizWidth;\n\ntype StaticLegendSlot = HTMLElement & {\n  highlightOnHover?: boolean;\n};\n\n/**\n * Line-chart data-viz card — dedicated `ds-card-shell-data-viz` chrome with a fill chart\n * region and a content-sized, static legend.\n */\n@Component({\n  tag: 'ds-card-data-viz-line',\n  styleUrl: 'CardDataVizLine.css',\n  scoped: true,\n})\nexport class CardDataVizLine {\n  @Element() el!: HTMLElement;\n\n  /** Widget heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /** Card width token — also sets matching min-height. */\n  @Prop() cardWidth: CardDataVizLineWidth = 'md';\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the header filter control is activated. */\n  @Event() dsFilterClick!: EventEmitter<void>;\n\n  @State() private hasChartSlot = false;\n  @State() private hasLegendSlot = false;\n\n  componentWillRender() {\n    this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n    this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n  }\n\n  componentDidRender() {\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as StaticLegendSlot | null;\n    if (!legend) return;\n    legend.setAttribute('highlight-on-hover', 'false');\n    if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    return (\n      <Host class=\"card-data-viz-line\">\n        <ds-card-shell-data-viz heading={this.heading} cardWidth={this.cardWidth}>\n          <ds-button-unfilled\n            slot=\"actions\"\n            variant=\"icon\"\n            type=\"button\"\n            icon=\"Filters\"\n            aria-label={this.filterLabel}\n            onDsClick={this.handleFilterClick}\n          />\n          <div class=\"card-data-viz-line__layout\">\n            {this.hasChartSlot && (\n              <div class=\"card-data-viz-line__chart-region\">\n                <slot name=\"chart\" />\n              </div>\n            )}\n            {this.hasLegendSlot && (\n              <div class=\"card-data-viz-line__legend-region\">\n                <slot name=\"legend\" />\n              </div>\n            )}\n          </div>\n        </ds-card-shell-data-viz>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAqB,IAAM,0wB,MCkBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,uFAYUC,KAAAC,UAAkC,KAClCD,KAAAE,YAAsB,SAKbF,KAAAG,aAAe,MACfH,KAAAI,cAAgB,MAgBzBJ,KAAAK,kBAAoB,KAC1BL,KAAKM,cAAcC,MAAM,CA+B5B,CA9CC,mBAAAC,GACER,KAAKG,eAAiBH,KAAKS,GAAGC,cAAc,kBAC5CV,KAAKI,gBAAkBJ,KAAKS,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASZ,KAAKS,GAAGC,cACrB,kCAEF,IAAKE,EAAQ,OACbA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,CAO9D,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,sBACVH,EAAA,0BAAAE,IAAA,2CAAwBE,QAASpB,KAAKoB,QAASnB,UAAWD,KAAKC,WAC7De,EAAA,sBAAAE,IAAA,2CACEG,KAAK,UACLC,QAAQ,OACRC,KAAK,SACLC,KAAK,UAAS,aACFxB,KAAKE,YACjBuB,UAAWzB,KAAKK,oBAElBW,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACRnB,KAAKG,cACJa,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,WAGd1B,KAAKI,eACJY,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qCACTH,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}

package/dist/components/ds-card-setting.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,c as s,h as i,a as d,t as a}from"./index.js";import{d as r}from"./p-DOCKtrS4.js";import{d as n}from"./p-GMDGgtY8.js";import{d as o}from"./p-xY3TjBF5.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-C0_8K4y7.js";const m=()=>`.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);flex:0 0 auto;box-sizing:border-box;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const h={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const u=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAction=s(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(e,t){this.dsAction.emit({action:e,originalEvent:t})}render(){const e=this.editing;return i(d,{key:"fb6f19c156383221eed30089b8b0910b9ad92acf",class:{"card-setting":true,"card-setting--editing":e},style:{"--_card-setting-width":g[this.cardWidth],"--_card-setting-min-height":h[this.cardWidth]}},i("header",{key:"b87e984f719058ffbd5e6159555c2d497c938697",class:"card-setting__header"},i("ds-text",{key:"e39218774015269ee00b06ef263633a9250b910e",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:e?f:"primary",as:"h2"},this.heading),i("div",{key:"40f17459f72edc2289f7d162e1aadd710d7d7bb5",class:"card-setting__actions"},!e?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:e=>this.emitAction("edit",e.detail)}):[i("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:e=>this.emitAction("cancel",e.detail)}),i("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:e=>this.emitAction("save",e.detail)})])),i("div",{key:"b2f870dc9816ef8486f03fcf92d3f73658df0772",class:"card-setting__body"},i("slot",{key:"ef48792626b5620d442ed576705377c77e18832b"})))}static get style(){return m()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-setting":if(!customElements.get(a(e))){customElements.define(a(e),u)}break;case"ds-badge":if(!customElements.get(a(e))){r()}break;case"ds-button-filled":if(!customElements.get(a(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(a(e))){o()}break;case"ds-icon":if(!customElements.get(a(e))){c()}break;case"ds-loader":if(!customElements.get(a(e))){l()}break;case"ds-text":if(!customElements.get(a(e))){b()}break}}))}p();const v=u;const k=p;export{v as DsCardSetting,k as defineCustomElement};
+import{p as e,H as t,c as s,h as i,a,t as d}from"./index.js";import{d as r}from"./p-CH6cNXXF.js";import{d as n}from"./p-BhxwpOH8.js";import{d as o}from"./p-CoYFJD-w.js";import{d as c}from"./p-BAfG3M8z.js";import{d as l}from"./p-Cpr3K41-.js";import{d as b}from"./p-BwGnhInj.js";const m=()=>`.sc-ds-card-setting-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-setting-width);min-height:var(--_card-setting-min-height);max-width:100%;overflow:hidden;background-color:var(--color-background-primary);border:none;border-radius:var(--dimension-radius-025);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h{background-color:var(--color-background-bold-brand);box-shadow:0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand)}.card-setting__header.sc-ds-card-setting{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);padding:var(--dimension-space-100);flex:0 0 auto;box-sizing:border-box;background-color:var(--color-background-secondary);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-setting--editing.sc-ds-card-setting-h .card-setting__header.sc-ds-card-setting{background-color:transparent;border-bottom-color:transparent}ds-text.card-setting__title.sc-ds-card-setting{display:flex;flex:1 1 auto;align-items:center;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));box-sizing:border-box;-webkit-user-select:none;user-select:none}.card-setting__actions.sc-ds-card-setting{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-setting__body.sc-ds-card-setting{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;box-sizing:border-box;background-color:var(--color-background-primary);border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025)}.card-setting--editing.sc-ds-card-setting-h .card-setting__body.sc-ds-card-setting{border-radius:var(--dimension-radius-025)}`;const g={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const h={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f="var(--color-foreground-faint-brand)";const u=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.dsAction=s(this,"dsAction");this.cardWidth="md";this.editing=false;this.editLabel="Edit";this.cancelLabel="Cancel";this.saveLabel="Save"}emitAction(e,t){this.dsAction.emit({action:e,originalEvent:t})}render(){const e=this.editing;return i(a,{key:"27cba83733ef02f62682856172542f5504baca42",class:{"card-setting":true,"card-setting--editing":e},style:{"--_card-setting-width":g[this.cardWidth],"--_card-setting-min-height":h[this.cardWidth]}},i("header",{key:"8308adf56bc64a1637f7667896a6df61be9bd265",class:"card-setting__header"},i("ds-text",{key:"09fe4e2a31b584ef640e76e77b749828af1381f7",class:"card-setting__title",variant:"text-title-small",emphasis:true,color:e?f:"primary",as:"h2"},this.heading),i("div",{key:"8d84b873b961b1073a25a9226c62a2781fbed3b0",class:"card-setting__actions"},!e?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Pencil","aria-label":this.editLabel,onDsClick:e=>this.emitAction("edit",e.detail)}):[i("ds-button-unfilled",{key:"cancel",variant:"icon",type:"button",icon:"Cross",background:"bold","aria-label":this.cancelLabel,onDsClick:e=>this.emitAction("cancel",e.detail)}),i("ds-button-filled",{key:"save",variant:"icon",type:"button",icon:"Check",intent:"brand",contrast:"faint","aria-label":this.saveLabel,onDsClick:e=>this.emitAction("save",e.detail)})])),i("div",{key:"9fc9c57a58e8ce4c990d1328721ee48ccba72ed8",class:"card-setting__body"},i("slot",{key:"3eb7bbbcc304d1df1ea9a2248ae16e2090919692"})))}static get style(){return m()}},[262,"ds-card-setting",{heading:[1],cardWidth:[1,"card-width"],editing:[4],editLabel:[1,"edit-label"],cancelLabel:[1,"cancel-label"],saveLabel:[1,"save-label"]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-card-setting","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-card-setting":if(!customElements.get(d(e))){customElements.define(d(e),u)}break;case"ds-badge":if(!customElements.get(d(e))){r()}break;case"ds-button-filled":if(!customElements.get(d(e))){n()}break;case"ds-button-unfilled":if(!customElements.get(d(e))){o()}break;case"ds-icon":if(!customElements.get(d(e))){c()}break;case"ds-loader":if(!customElements.get(d(e))){l()}break;case"ds-text":if(!customElements.get(d(e))){b()}break}}))}p();const v=u;const k=p;export{v as DsCardSetting,k as defineCustomElement};
 //# sourceMappingURL=ds-card-setting.js.map

package/dist/components/ds-card-setting.js.map

@@ -1 +1 @@
-{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","editLabel","cancelLabel","saveLabel","emitAction","action","originalEvent","dsAction","emit","render","h","Host","key","class","style","variant","emphasis","color","as","heading","type","icon","onDsClick","event","detail","background","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header\">\n          <ds-text\n            class=\"card-setting__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-setting__actions\">\n          {!editing ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAction('edit', event.detail)\n              }\n            />\n          ) : (\n            [\n              <ds-button-unfilled\n                key=\"cancel\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('cancel', event.detail)\n                }\n              />,\n              <ds-button-filled\n                key=\"save\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('save', event.detail)\n                }\n              />,\n            ]\n          )}\n          </div>\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAiB,IAAM,qwDCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAqD,CACzDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,6EAcUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MACVF,KAAAG,UAAoB,OACpBH,KAAAI,YAAsB,SACtBJ,KAAAK,UAAoB,MA+E7B,CA1ES,UAAAC,CAAWC,EAA2BC,GAC5CR,KAAKS,SAASC,KAAK,CAAEH,SAAQC,iB,CAG/B,MAAAG,GACE,MAAMT,EAAUF,KAAKE,QAErB,OACEU,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBb,GAE3Bc,MAAO,CACL,wBAAyB3B,EAAgBW,KAAKC,WAC9C,6BAA8BR,EAAiBO,KAAKC,aAGtDW,EAAA,UAAAE,IAAA,2CAAQC,MAAM,wBACZH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,SAAQ,KACRC,MAAOjB,EAAUR,EAA0B,UAC3C0B,GAAG,MAEFpB,KAAKqB,SAERT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTb,EACAU,EAAA,sBACEK,QAAQ,OACRK,KAAK,SACLC,KAAK,SAAQ,aACDvB,KAAKG,UACjBqB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,UAEhC,CAGAd,EAAA,sBACEE,IAAI,SACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLI,WAAW,OAAM,aACL3B,KAAKI,YACjBoB,UAAYC,GACVzB,KAAKM,WAAW,SAAUmB,EAAMC,UAGpCd,EAAA,oBACEE,IAAI,OACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLK,OAAO,QACPC,SAAS,QAAO,aACJ7B,KAAKK,UACjBmB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,aAOxCd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["cardSettingCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","FAINT_BRAND_TITLE_COLOR","CardSetting","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","cardWidth","editing","editLabel","cancelLabel","saveLabel","emitAction","action","originalEvent","dsAction","emit","render","h","Host","key","class","style","variant","emphasis","color","as","heading","type","icon","onDsClick","event","detail","background","intent","contrast"],"sources":["src/wc/components/CardSetting/CardSetting.css?tag=ds-card-setting&encapsulation=scoped","src/wc/components/CardSetting/CardSetting.tsx"],"sourcesContent":[":host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-setting-width);\n  min-height: var(--_card-setting-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) {\n  background-color: var(--color-background-bold-brand);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-brand);\n}\n\n.card-setting__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  padding: var(--dimension-space-100);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  background-color: var(--color-background-secondary);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n:host(.card-setting--editing) .card-setting__header {\n  background-color: transparent;\n  border-bottom-color: transparent;\n}\n\nds-text.card-setting__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-setting__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-setting__body {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  min-height: 0;\n  box-sizing: border-box;\n  background-color: var(--color-background-primary);\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n}\n\n:host(.card-setting--editing) .card-setting__body {\n  border-radius: var(--dimension-radius-025);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type CardSettingWidth = 'sm' | 'md' | 'lg';\nexport type CardSettingAction = 'edit' | 'save' | 'cancel';\n\nexport interface CardSettingActionDetail {\n  action: CardSettingAction;\n  originalEvent: MouseEvent;\n}\n\nconst CARD_WIDTH_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-width-sm)',\n  md: 'var(--dimension-card-width-md)',\n  lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardSettingWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\nconst FAINT_BRAND_TITLE_COLOR = 'var(--color-foreground-faint-brand)';\n\n@Component({\n  tag: 'ds-card-setting',\n  styleUrl: 'CardSetting.css',\n  scoped: true,\n})\nexport class CardSetting {\n  /** Section heading shown in the card header. */\n  @Prop() heading!: string;\n\n  /**\n   * Card width token (`sm` / `md` / `lg`). Also sets host `min-height` to the\n   * matching `--dimension-card-height-*` so the body fills available space\n   * even when the slot is empty.\n   */\n  @Prop() cardWidth: CardSettingWidth = 'md';\n\n  /** Controlled edit state — parent owns single-edit orchestration. */\n  @Prop() editing = false;\n  @Prop() editLabel: string = 'Edit';\n  @Prop() cancelLabel: string = 'Cancel';\n  @Prop() saveLabel: string = 'Save';\n\n  /** Emits a controlled edit, save, or cancel request. */\n  @Event() dsAction!: EventEmitter<CardSettingActionDetail>;\n\n  private emitAction(action: CardSettingAction, originalEvent: MouseEvent) {\n    this.dsAction.emit({ action, originalEvent });\n  }\n\n  render() {\n    const editing = this.editing;\n\n    return (\n      <Host\n        class={{\n          'card-setting': true,\n          'card-setting--editing': editing,\n        }}\n        style={{\n          '--_card-setting-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-setting-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-setting__header\">\n          <ds-text\n            class=\"card-setting__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color={editing ? FAINT_BRAND_TITLE_COLOR : 'primary'}\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-setting__actions\">\n          {!editing ? (\n            <ds-button-unfilled\n              variant=\"icon\"\n              type=\"button\"\n              icon=\"Pencil\"\n              aria-label={this.editLabel}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.emitAction('edit', event.detail)\n              }\n            />\n          ) : (\n            [\n              <ds-button-unfilled\n                key=\"cancel\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Cross\"\n                background=\"bold\"\n                aria-label={this.cancelLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('cancel', event.detail)\n                }\n              />,\n              <ds-button-filled\n                key=\"save\"\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Check\"\n                intent=\"brand\"\n                contrast=\"faint\"\n                aria-label={this.saveLabel}\n                onDsClick={(event: CustomEvent<MouseEvent>) =>\n                  this.emitAction('save', event.detail)\n                }\n              />,\n            ]\n          )}\n          </div>\n        </header>\n        <div class=\"card-setting__body\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"qRAAA,MAAMA,EAAiB,IAAM,qwDCU7B,MAAMC,EAAoD,CACxDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAqD,CACzDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mCAGN,MAAME,EAA0B,sC,MAOnBC,EAAWC,EAAA,MAAAD,UAAAE,EALxB,WAAAC,CAAAC,G,6EAcUC,KAAAC,UAA8B,KAG9BD,KAAAE,QAAU,MACVF,KAAAG,UAAoB,OACpBH,KAAAI,YAAsB,SACtBJ,KAAAK,UAAoB,MA+E7B,CA1ES,UAAAC,CAAWC,EAA2BC,GAC5CR,KAAKS,SAASC,KAAK,CAAEH,SAAQC,iB,CAG/B,MAAAG,GACE,MAAMT,EAAUF,KAAKE,QAErB,OACEU,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,eAAgB,KAChB,wBAAyBb,GAE3Bc,MAAO,CACL,wBAAyB3B,EAAgBW,KAAKC,WAC9C,6BAA8BR,EAAiBO,KAAKC,aAGtDW,EAAA,UAAAE,IAAA,2CAAQC,MAAM,wBACZH,EAAA,WAAAE,IAAA,2CACEC,MAAM,sBACNE,QAAQ,mBACRC,SAAQ,KACRC,MAAOjB,EAAUR,EAA0B,UAC3C0B,GAAG,MAEFpB,KAAKqB,SAERT,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTb,EACAU,EAAA,sBACEK,QAAQ,OACRK,KAAK,SACLC,KAAK,SAAQ,aACDvB,KAAKG,UACjBqB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,UAEhC,CAGAd,EAAA,sBACEE,IAAI,SACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLI,WAAW,OAAM,aACL3B,KAAKI,YACjBoB,UAAYC,GACVzB,KAAKM,WAAW,SAAUmB,EAAMC,UAGpCd,EAAA,oBACEE,IAAI,OACJG,QAAQ,OACRK,KAAK,SACLC,KAAK,QACLK,OAAO,QACPC,SAAS,QAAO,aACJ7B,KAAKK,UACjBmB,UAAYC,GACVzB,KAAKM,WAAW,OAAQmB,EAAMC,aAOxCd,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACTH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/ds-card-shell-data-viz.js

@@ -1,2 +1,2 @@
-import{C as o,d as s}from"./p-CNffejay.js";const t=o;const a=s;export{t as DsCardShellDataViz,a as defineCustomElement};
+import{C as o,d as s}from"./p-DSa0Hnd3.js";const t=o;const a=s;export{t as DsCardShellDataViz,a as defineCustomElement};
 //# sourceMappingURL=ds-card-shell-data-viz.js.map

package/dist/components/ds-chart-bar-stacked.d.ts

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

package/dist/components/ds-chart-bar-stacked.js

@@ -0,0 +1,2 @@
+import{p as t,H as s,h as e,a,t as r}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{f as n}from"./p-DXewjzkM.js";import{b as o,l as i}from"./p-C_ewSXTT.js";const h=()=>`.sc-ds-chart-bar-stacked-h{display:inline-flex;max-width:100%;font-family:var(--typography-font-family)}.chart-bar-stacked__svg.sc-ds-chart-bar-stacked{display:block;max-width:100%;height:auto}.chart-bar-stacked__gridline.sc-ds-chart-bar-stacked{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar-stacked__axis-label.sc-ds-chart-bar-stacked{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar-stacked__segment-shape--rounded.sc-ds-chart-bar-stacked{rx:var(--dimension-radius-025)}.chart-bar-stacked__segment-separator.sc-ds-chart-bar-stacked{stroke:var(--color-background-primary);stroke-width:var(--dimension-stroke-width-012);stroke-linecap:butt}`;const d={top:16,right:16,bottom:24,left:32};const l=[0,25,50,75,100];const b=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.series=[];this.categories=[];this.variant="stacked";this.width=480;this.height=240}valuesForCategory(t){return this.series.map((s=>Math.max(0,s.data[t]??0)))}accessibleLabel(){return this.categories.map(((t,s)=>{const e=this.valuesForCategory(s);const a=e.reduce(((t,s)=>t+s),0);const r=this.series.map(((t,s)=>{const r=e[s];const c=this.variant==="percentage"?n(a?r/a:0,1):String(r);return`${t.name}: ${c}`})).join(", ");return`${t}: ${r}`})).join("; ")}render(){const t=this.width-d.left-d.right;const s=this.height-d.top-d.bottom;const r=this.categories.map(((t,s)=>this.valuesForCategory(s)));const n=r.map((t=>t.reduce(((t,s)=>t+s),0)));const h=this.variant==="percentage"?100:Math.max(0,...n);const b=o().domain(this.categories).range([0,t]).padding(.35);const g=i().domain([0,h||1]).range([s,0]).nice();const k=this.variant==="percentage"?l:g.ticks(4);return e(a,{key:"e9efba588c8c349c844de5c7d7ba6d15080a8bb0",class:"chart-bar-stacked"},e("svg",{key:"de5c077dec1685bb496f2245b202387718c6d984",class:"chart-bar-stacked__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.accessibleLabel()},e("g",{key:"8ff0ae1c9e10e0e6f6d3c73e52e55d9469a841b0",transform:`translate(${d.left}, ${d.top})`},k.map((s=>e("g",{key:`grid-${s}`,transform:`translate(0, ${g(s)})`},e("line",{class:"chart-bar-stacked__gridline",x1:0,x2:t}),e("text",{class:"chart-bar-stacked__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},this.variant==="percentage"?`${s}%`:s)))),this.categories.map(((t,a)=>{const o=b.bandwidth();const i=b(t)??0;const h=r[a];const d=n[a];const l=h.reduce(((t,s,e)=>s>0?e:t),-1);let k=0;return e("g",{class:"chart-bar-stacked__stack","data-category":t,key:t},this.series.map(((t,s)=>{const a=h[s];const r=this.variant==="percentage"?d?a/d*100:0:a;const n=k;const b=k+r;k=b;const p=g(b);const f=g(n);const m=Math.max(0,f-p);if(!m)return null;const y=t.color??c(s);const u=s===l;const _=this.variant==="stacked"&&u;const x=p+m/2;const v=m/2;return e("g",{class:"chart-bar-stacked__segment","data-series":t.name,key:t.name},e("rect",{class:{"chart-bar-stacked__segment-shape":true,"chart-bar-stacked__segment-shape--rounded":_},x:i,y:p,width:o,height:m,fill:y}),_?e("rect",{class:"chart-bar-stacked__segment-square-base",x:i,y:x,width:o,height:v,fill:y}):null,n>0?e("line",{class:"chart-bar-stacked__segment-separator",x1:i,x2:i+o,y1:f,y2:f,"vector-effect":"non-scaling-stroke"}):null)})),e("text",{class:"chart-bar-stacked__axis-label",x:i+o/2,y:s+16,"text-anchor":"middle"},t))})))))}static get style(){return h()}},[2,"ds-chart-bar-stacked",{series:[16],categories:[16],variant:[1],width:[2],height:[2]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar-stacked"];t.forEach((t=>{switch(t){case"ds-chart-bar-stacked":if(!customElements.get(r(t))){customElements.define(r(t),b)}break}}))}g();const k=b;const p=g;export{k as DsChartBarStacked,p as defineCustomElement};
+//# sourceMappingURL=ds-chart-bar-stacked.js.map

package/dist/components/ds-chart-bar-stacked.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chartBarStackedCss","MARGIN","top","right","bottom","left","PERCENTAGE_TICKS","ChartBarStacked","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","series","categories","variant","width","height","valuesForCategory","categoryIndex","map","Math","max","data","accessibleLabel","category","values","total","reduce","sum","value","details","seriesIndex","visibleValue","formatPercentage","String","name","join","render","innerWidth","innerHeight","categoryValues","_","index","totals","yMax","xScale","scaleBand","domain","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","transform","tick","x1","x2","x","barWidth","bandwidth","barX","topSeriesIndex","topIndex","cumulativeValue","rawValue","segmentStart","segmentEnd","segmentY","segmentBottom","segmentHeight","fill","color","categoryColor","isTopSegment","hasRoundedTop","squareBaseY","squareBaseHeight","y","y1","y2"],"sources":["src/wc/components/ChartBarStacked/ChartBarStacked.css?tag=ds-chart-bar-stacked&encapsulation=scoped","src/wc/components/ChartBarStacked/ChartBarStacked.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 100%;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar-stacked__svg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n.chart-bar-stacked__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar-stacked__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar-stacked__segment-shape--rounded {\n  rx: var(--dimension-radius-025);\n}\n\n.chart-bar-stacked__segment-separator {\n  stroke: var(--color-background-primary);\n  stroke-width: var(--dimension-stroke-width-012);\n  stroke-linecap: butt;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { categoryColor } from '../../utils/chart-colors';\nimport { formatPercentage } from '../../utils';\nimport type { ChartSeries } from '../../utils/chart-types';\n\nexport type ChartBarStackedVariant = 'stacked' | 'percentage';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\nconst PERCENTAGE_TICKS = [0, 25, 50, 75, 100];\n\n@Component({\n  tag: 'ds-chart-bar-stacked',\n  styleUrl: 'ChartBarStacked.css',\n  scoped: true,\n})\nexport class ChartBarStacked {\n  /** Ordered stack series. Set as a JS property (not an HTML attribute). */\n  @Prop() series: ChartSeries[] = [];\n  /** X-axis labels — must match each series' `data` length. Set as a JS property. */\n  @Prop() categories: string[] = [];\n  @Prop() variant: ChartBarStackedVariant = 'stacked';\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  private valuesForCategory(categoryIndex: number) {\n    return this.series.map(series => Math.max(0, series.data[categoryIndex] ?? 0));\n  }\n\n  private accessibleLabel() {\n    return this.categories\n      .map((category, categoryIndex) => {\n        const values = this.valuesForCategory(categoryIndex);\n        const total = values.reduce((sum, value) => sum + value, 0);\n        const details = this.series\n          .map((series, seriesIndex) => {\n            const value = values[seriesIndex];\n            const visibleValue = this.variant === 'percentage'\n              ? formatPercentage(total ? value / total : 0, 1)\n              : String(value);\n            return `${series.name}: ${visibleValue}`;\n          })\n          .join(', ');\n        return `${category}: ${details}`;\n      })\n      .join('; ');\n  }\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n    const categoryValues = this.categories.map((_, index) => this.valuesForCategory(index));\n    const totals = categoryValues.map(values =>\n      values.reduce((sum, value) => sum + value, 0)\n    );\n    const yMax = this.variant === 'percentage' ? 100 : Math.max(0, ...totals);\n\n    const xScale = scaleBand()\n      .domain(this.categories)\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = this.variant === 'percentage' ? PERCENTAGE_TICKS : yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar-stacked\">\n        <svg\n          class=\"chart-bar-stacked__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.accessibleLabel()}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar-stacked__gridline\" x1={0} x2={innerWidth} />\n                <text\n                  class=\"chart-bar-stacked__axis-label\"\n                  x={-8}\n                  text-anchor=\"end\"\n                  dominant-baseline=\"middle\"\n                >\n                  {this.variant === 'percentage' ? `${tick}%` : tick}\n                </text>\n              </g>\n            ))}\n\n            {this.categories.map((category, categoryIndex) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(category) ?? 0;\n              const values = categoryValues[categoryIndex];\n              const total = totals[categoryIndex];\n              const topSeriesIndex = values.reduce(\n                (topIndex, value, seriesIndex) => (value > 0 ? seriesIndex : topIndex),\n                -1\n              );\n              let cumulativeValue = 0;\n\n              return (\n                <g class=\"chart-bar-stacked__stack\" data-category={category} key={category}>\n                  {this.series.map((series, seriesIndex) => {\n                    const rawValue = values[seriesIndex];\n                    const value = this.variant === 'percentage'\n                      ? total\n                        ? (rawValue / total) * 100\n                        : 0\n                      : rawValue;\n                    const segmentStart = cumulativeValue;\n                    const segmentEnd = cumulativeValue + value;\n                    cumulativeValue = segmentEnd;\n\n                    const segmentY = yScale(segmentEnd);\n                    const segmentBottom = yScale(segmentStart);\n                    const segmentHeight = Math.max(0, segmentBottom - segmentY);\n                    if (!segmentHeight) return null;\n\n                    const fill = series.color ?? categoryColor(seriesIndex);\n                    const isTopSegment = seriesIndex === topSeriesIndex;\n                    const hasRoundedTop =\n                      this.variant === 'stacked' && isTopSegment;\n                    const squareBaseY = segmentY + segmentHeight / 2;\n                    const squareBaseHeight = segmentHeight / 2;\n\n                    return (\n                      <g\n                        class=\"chart-bar-stacked__segment\"\n                        data-series={series.name}\n                        key={series.name}\n                      >\n                        <rect\n                          class={{\n                            'chart-bar-stacked__segment-shape': true,\n                            'chart-bar-stacked__segment-shape--rounded': hasRoundedTop,\n                          }}\n                          x={barX}\n                          y={segmentY}\n                          width={barWidth}\n                          height={segmentHeight}\n                          fill={fill}\n                        />\n                        {hasRoundedTop ? (\n                          <rect\n                            class=\"chart-bar-stacked__segment-square-base\"\n                            x={barX}\n                            y={squareBaseY}\n                            width={barWidth}\n                            height={squareBaseHeight}\n                            fill={fill}\n                          />\n                        ) : null}\n                        {segmentStart > 0 ? (\n                          <line\n                            class=\"chart-bar-stacked__segment-separator\"\n                            x1={barX}\n                            x2={barX + barWidth}\n                            y1={segmentBottom}\n                            y2={segmentBottom}\n                            vector-effect=\"non-scaling-stroke\"\n                          />\n                        ) : null}\n                      </g>\n                    );\n                  })}\n                  <text\n                    class=\"chart-bar-stacked__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {category}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oKAAA,MAAMA,EAAqB,IAAM,m2BCQjC,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,IACvD,MAAMC,EAAmB,CAAC,EAAG,GAAI,GAAI,GAAI,K,MAO5BC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,4CAOUC,KAAAC,OAAwB,GAExBD,KAAAE,WAAuB,GACvBF,KAAAG,QAAkC,UAClCH,KAAAI,MAAgB,IAChBJ,KAAAK,OAAiB,GAmK1B,CAjKS,iBAAAC,CAAkBC,GACxB,OAAOP,KAAKC,OAAOO,KAAIP,GAAUQ,KAAKC,IAAI,EAAGT,EAAOU,KAAKJ,IAAkB,I,CAGrE,eAAAK,GACN,OAAOZ,KAAKE,WACTM,KAAI,CAACK,EAAUN,KACd,MAAMO,EAASd,KAAKM,kBAAkBC,GACtC,MAAMQ,EAAQD,EAAOE,QAAO,CAACC,EAAKC,IAAUD,EAAMC,GAAO,GACzD,MAAMC,EAAUnB,KAAKC,OAClBO,KAAI,CAACP,EAAQmB,KACZ,MAAMF,EAAQJ,EAAOM,GACrB,MAAMC,EAAerB,KAAKG,UAAY,aAClCmB,EAAiBP,EAAQG,EAAQH,EAAQ,EAAG,GAC5CQ,OAAOL,GACX,MAAO,GAAGjB,EAAOuB,SAASH,GAAc,IAEzCI,KAAK,MACR,MAAO,GAAGZ,MAAaM,GAAS,IAEjCM,KAAK,K,CAGV,MAAAC,GACE,MAAMC,EAAa3B,KAAKI,MAAQf,EAAOI,KAAOJ,EAAOE,MACrD,MAAMqC,EAAc5B,KAAKK,OAAShB,EAAOC,IAAMD,EAAOG,OACtD,MAAMqC,EAAiB7B,KAAKE,WAAWM,KAAI,CAACsB,EAAGC,IAAU/B,KAAKM,kBAAkByB,KAChF,MAAMC,EAASH,EAAerB,KAAIM,GAChCA,EAAOE,QAAO,CAACC,EAAKC,IAAUD,EAAMC,GAAO,KAE7C,MAAMe,EAAOjC,KAAKG,UAAY,aAAe,IAAMM,KAAKC,IAAI,KAAMsB,GAElE,MAAME,EAASC,IACZC,OAAOpC,KAAKE,YACZmC,MAAM,CAAC,EAAGV,IACVW,QAAQ,KAEX,MAAMC,EAASC,IACZJ,OAAO,CAAC,EAAGH,GAAQ,IACnBI,MAAM,CAACT,EAAa,IACpBa,OAEH,MAAMC,EAAS1C,KAAKG,UAAY,aAAeT,EAAmB6C,EAAOI,MAAM,GAE/E,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,qBACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,yBACNC,QAAS,OAAOhD,KAAKI,SAASJ,KAAKK,SACnCD,MAAOJ,KAAKI,MACZC,OAAQL,KAAKK,OACb4C,KAAK,MAAK,aACEjD,KAAKY,mBAEjBgC,EAAA,KAAAE,IAAA,2CAAGI,UAAW,aAAa7D,EAAOI,SAASJ,EAAOC,QAC/CoD,EAAOlC,KAAI2C,GACVP,EAAA,KAAGE,IAAK,QAAQK,IAAQD,UAAW,gBAAgBX,EAAOY,OACxDP,EAAA,QAAMG,MAAM,8BAA8BK,GAAI,EAAGC,GAAI1B,IACrDiB,EAAA,QACEG,MAAM,gCACNO,GAAG,EAAE,cACO,MAAK,oBACC,UAEjBtD,KAAKG,UAAY,aAAe,GAAGgD,KAAUA,MAKnDnD,KAAKE,WAAWM,KAAI,CAACK,EAAUN,KAC9B,MAAMgD,EAAWrB,EAAOsB,YACxB,MAAMC,EAAOvB,EAAOrB,IAAa,EACjC,MAAMC,EAASe,EAAetB,GAC9B,MAAMQ,EAAQiB,EAAOzB,GACrB,MAAMmD,EAAiB5C,EAAOE,QAC5B,CAAC2C,EAAUzC,EAAOE,IAAiBF,EAAQ,EAAIE,EAAcuC,IAC7D,GAEF,IAAIC,EAAkB,EAEtB,OACEhB,EAAA,KAAGG,MAAM,2BAA0B,gBAAgBlC,EAAUiC,IAAKjC,GAC/Db,KAAKC,OAAOO,KAAI,CAACP,EAAQmB,KACxB,MAAMyC,EAAW/C,EAAOM,GACxB,MAAMF,EAAQlB,KAAKG,UAAY,aAC3BY,EACG8C,EAAW9C,EAAS,IACrB,EACF8C,EACJ,MAAMC,EAAeF,EACrB,MAAMG,EAAaH,EAAkB1C,EACrC0C,EAAkBG,EAElB,MAAMC,EAAWzB,EAAOwB,GACxB,MAAME,EAAgB1B,EAAOuB,GAC7B,MAAMI,EAAgBzD,KAAKC,IAAI,EAAGuD,EAAgBD,GAClD,IAAKE,EAAe,OAAO,KAE3B,MAAMC,EAAOlE,EAAOmE,OAASC,EAAcjD,GAC3C,MAAMkD,EAAelD,IAAgBsC,EACrC,MAAMa,EACJvE,KAAKG,UAAY,WAAamE,EAChC,MAAME,EAAcR,EAAWE,EAAgB,EAC/C,MAAMO,EAAmBP,EAAgB,EAEzC,OACEtB,EAAA,KACEG,MAAM,6BAA4B,cACrB9C,EAAOuB,KACpBsB,IAAK7C,EAAOuB,MAEZoB,EAAA,QACEG,MAAO,CACL,mCAAoC,KACpC,4CAA6CwB,GAE/CjB,EAAGG,EACHiB,EAAGV,EACH5D,MAAOmD,EACPlD,OAAQ6D,EACRC,KAAMA,IAEPI,EACC3B,EAAA,QACEG,MAAM,yCACNO,EAAGG,EACHiB,EAAGF,EACHpE,MAAOmD,EACPlD,OAAQoE,EACRN,KAAMA,IAEN,KACHL,EAAe,EACdlB,EAAA,QACEG,MAAM,uCACNK,GAAIK,EACJJ,GAAII,EAAOF,EACXoB,GAAIV,EACJW,GAAIX,EAAa,gBACH,uBAEd,KACF,IAGRrB,EAAA,QACEG,MAAM,gCACNO,EAAGG,EAAOF,EAAW,EACrBmB,EAAG9C,EAAc,GAAE,cACP,UAEXf,GAED,M","ignoreList":[]}

package/dist/components/ds-chart-bar.js

@@ -1,2 +1,2 @@
-import{p as t,H as a,h as s,a as r,t as e}from"./index.js";import{c as i}from"./p-CMv_7vFs.js";import{m as c,b as o,l as n}from"./p-CzBnvtcz.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar.sc-ds-chart-bar{rx:var(--dimension-radius-050)}`;const l={top:16,right:16,bottom:24,left:32};const d=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-l.left-l.right;const a=this.height-l.top-l.bottom;const e=c(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const f=d.ticks(4);return s(r,{key:"38a224f5202e74a88334d2220f3381a3661cffaa",class:"chart-bar"},s("svg",{key:"4a779c91c60bcaeb25a6ad1233551e04ab855339",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},s("g",{key:"e1269c60a7afceaa81e0d1048fde70ce1fb2b024",transform:`translate(${l.left}, ${l.top})`},f.map((a=>s("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},s("line",{class:"chart-bar__gridline",x1:0,x2:t}),s("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,r)=>{const e=h.bandwidth();const c=h(t.label)??0;const o=d(t.value);return s("g",{key:t.label},s("rect",{class:"chart-bar__bar",x:c,y:o,width:e,height:a-o,fill:t.color??i(r)}),s("text",{class:"chart-bar__axis-label",x:c+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function f(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}f();const b=d;const m=f;export{b as DsChartBar,m as defineCustomElement};
+import{p as t,H as a,h as r,a as s,t as e}from"./index.js";import{c}from"./p-CMv_7vFs.js";import{m as i}from"./p-CH3w-P2H.js";import{b as o,l as n}from"./p-C_ewSXTT.js";const h=()=>`.sc-ds-chart-bar-h{display:inline-flex;font-family:var(--typography-font-family)}.chart-bar__gridline.sc-ds-chart-bar{stroke:var(--color-border-tertiary);stroke-width:1}.chart-bar__axis-label.sc-ds-chart-bar{fill:var(--color-foreground-secondary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-xs);font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive);text-transform:uppercase}.chart-bar__bar--rounded.sc-ds-chart-bar{rx:var(--dimension-radius-025)}`;const l={top:16,right:16,bottom:24,left:32};const d=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.data=[];this.width=480;this.height=240}render(){const t=this.width-l.left-l.right;const a=this.height-l.top-l.bottom;const e=i(this.data,(t=>t.value))??0;const h=o().domain(this.data.map((t=>t.label))).range([0,t]).padding(.35);const d=n().domain([0,e||1]).range([a,0]).nice();const b=d.ticks(4);return r(s,{key:"875c272143a66f499765c00ce026341114ec3b13",class:"chart-bar"},r("svg",{key:"353fb36d3943bd57878c59e1ac93a2cb01a0f82a",class:"chart-bar__svg",viewBox:`0 0 ${this.width} ${this.height}`,width:this.width,height:this.height,role:"img","aria-label":this.data.map((t=>`${t.label}: ${t.value}`)).join(", ")},r("g",{key:"048d204cb9216cad953a24428139950e00ef1363",transform:`translate(${l.left}, ${l.top})`},b.map((a=>r("g",{key:`grid-${a}`,transform:`translate(0, ${d(a)})`},r("line",{class:"chart-bar__gridline",x1:0,x2:t}),r("text",{class:"chart-bar__axis-label",x:-8,"text-anchor":"end","dominant-baseline":"middle"},a)))),this.data.map(((t,s)=>{const e=h.bandwidth();const i=h(t.label)??0;const o=d(t.value);const n=a-o;const l=o+n/2;const b=n/2;const f=t.color??c(s);return r("g",{key:t.label},r("rect",{class:"chart-bar__bar chart-bar__bar--rounded",x:i,y:o,width:e,height:n,fill:f}),r("rect",{class:"chart-bar__bar chart-bar__bar--square-base",x:i,y:l,width:e,height:b,fill:f}),r("text",{class:"chart-bar__axis-label",x:i+e/2,y:a+16,"text-anchor":"middle"},t.label))})))))}static get style(){return h()}},[2,"ds-chart-bar",{data:[16],width:[2],height:[2]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-chart-bar"];t.forEach((t=>{switch(t){case"ds-chart-bar":if(!customElements.get(e(t))){customElements.define(e(t),d)}break}}))}b();const f=d;const m=b;export{f as DsChartBar,m as defineCustomElement};
 //# sourceMappingURL=ds-chart-bar.js.map

package/dist/components/ds-chart-bar.js.map

@@ -1 +1 @@
-{"version":3,"names":["chartBarCss","MARGIN","top","right","bottom","left","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","width","height","render","innerWidth","innerHeight","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","join","transform","tick","x1","x2","x","i","barWidth","bandwidth","barX","barY","y","fill","color","categoryColor"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar {\n  rx: var(--dimension-radius-050);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={innerHeight - barY}\n                    fill={d.color ?? categoryColor(i)}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iJAAA,MAAMA,EAAc,IAAM,wgBCM1B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAqB,GACrBD,KAAAE,MAAgB,IAChBF,KAAAG,OAAiB,GAsE1B,CApEC,MAAAC,GACE,MAAMC,EAAaL,KAAKE,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMc,EAAcN,KAAKG,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMc,EAAOC,EAAIR,KAAKC,MAAMQ,GAAKA,EAAEC,SAAU,EAE7C,MAAMC,EAASC,IACZC,OAAOb,KAAKC,KAAKa,KAAIL,GAAKA,EAAEM,SAC5BC,MAAM,CAAC,EAAGX,IACVY,QAAQ,KAEX,MAAMC,EAASC,IACZN,OAAO,CAAC,EAAGN,GAAQ,IACnBS,MAAM,CAACV,EAAa,IACpBc,OAEH,MAAMC,EAASH,EAAOI,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,iBACNC,QAAS,OAAO3B,KAAKE,SAASF,KAAKG,SACnCD,MAAOF,KAAKE,MACZC,OAAQH,KAAKG,OACbyB,KAAK,MAAK,aACE5B,KAAKC,KAAKa,KAAIL,GAAK,GAAGA,EAAEM,UAAUN,EAAEC,UAASmB,KAAK,OAE9DN,EAAA,KAAAE,IAAA,2CAAGK,UAAW,aAAaxC,EAAOI,SAASJ,EAAOC,QAC/C8B,EAAOP,KAAIiB,GACVR,EAAA,KAAGE,IAAK,QAAQM,IAAQD,UAAW,gBAAgBZ,EAAOa,OACxDR,EAAA,QAAMG,MAAM,sBAAsBM,GAAI,EAAGC,GAAI5B,IAC7CkB,EAAA,QAAMG,MAAM,wBAAwBQ,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC5EH,MAKN/B,KAAKC,KAAKa,KAAI,CAACL,EAAG0B,KACjB,MAAMC,EAAWzB,EAAO0B,YACxB,MAAMC,EAAO3B,EAAOF,EAAEM,QAAU,EAChC,MAAMwB,EAAOrB,EAAOT,EAAEC,OACtB,OACEa,EAAA,KAAGE,IAAKhB,EAAEM,OACRQ,EAAA,QACEG,MAAM,iBACNQ,EAAGI,EACHE,EAAGD,EACHrC,MAAOkC,EACPjC,OAAQG,EAAciC,EACtBE,KAAMhC,EAAEiC,OAASC,EAAcR,KAEjCZ,EAAA,QACEG,MAAM,wBACNQ,EAAGI,EAAOF,EAAW,EACrBI,EAAGlC,EAAc,GAAE,cACP,UAEXG,EAAEM,OAEH,M","ignoreList":[]}
+{"version":3,"names":["chartBarCss","MARGIN","top","right","bottom","left","ChartBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","data","width","height","render","innerWidth","innerHeight","yMax","max","d","value","xScale","scaleBand","domain","map","label","range","padding","yScale","scaleLinear","nice","yTicks","ticks","h","Host","key","class","viewBox","role","join","transform","tick","x1","x2","x","i","barWidth","bandwidth","barX","barY","barHeight","squareBaseY","squareBaseHeight","fill","color","categoryColor","y"],"sources":["src/wc/components/ChartBar/ChartBar.css?tag=ds-chart-bar&encapsulation=scoped","src/wc/components/ChartBar/ChartBar.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  font-family: var(--typography-font-family);\n}\n\n.chart-bar__gridline {\n  stroke: var(--color-border-tertiary);\n  stroke-width: 1;\n}\n\n/* Matches ds-text text-caption regular (SVG cannot host ds-text). */\n.chart-bar__axis-label {\n  fill: var(--color-foreground-secondary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-xs);\n  font-weight: var(--typography-weight-medium);\n  letter-spacing: var(--typography-letterspacing-positive);\n  text-transform: uppercase;\n}\n\n.chart-bar__bar--rounded {\n  rx: var(--dimension-radius-025);\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { scaleBand, scaleLinear } from 'd3-scale';\nimport { max } from 'd3-array';\nimport { categoryColor } from '../../utils/chart-colors';\nimport type { ChartDatum } from '../../utils/chart-types';\n\nconst MARGIN = { top: 16, right: 16, bottom: 24, left: 32 };\n\n@Component({\n  tag: 'ds-chart-bar',\n  styleUrl: 'ChartBar.css',\n  scoped: true,\n})\nexport class ChartBar {\n  /** Bars to render. Set as a JS property (not an HTML attribute). */\n  @Prop() data: ChartDatum[] = [];\n  @Prop() width: number = 480;\n  @Prop() height: number = 240;\n\n  render() {\n    const innerWidth = this.width - MARGIN.left - MARGIN.right;\n    const innerHeight = this.height - MARGIN.top - MARGIN.bottom;\n\n    const yMax = max(this.data, d => d.value) ?? 0;\n\n    const xScale = scaleBand()\n      .domain(this.data.map(d => d.label))\n      .range([0, innerWidth])\n      .padding(0.35);\n\n    const yScale = scaleLinear()\n      .domain([0, yMax || 1])\n      .range([innerHeight, 0])\n      .nice();\n\n    const yTicks = yScale.ticks(4);\n\n    return (\n      <Host class=\"chart-bar\">\n        <svg\n          class=\"chart-bar__svg\"\n          viewBox={`0 0 ${this.width} ${this.height}`}\n          width={this.width}\n          height={this.height}\n          role=\"img\"\n          aria-label={this.data.map(d => `${d.label}: ${d.value}`).join(', ')}\n        >\n          <g transform={`translate(${MARGIN.left}, ${MARGIN.top})`}>\n            {yTicks.map(tick => (\n              <g key={`grid-${tick}`} transform={`translate(0, ${yScale(tick)})`}>\n                <line class=\"chart-bar__gridline\" x1={0} x2={innerWidth} />\n                <text class=\"chart-bar__axis-label\" x={-8} text-anchor=\"end\" dominant-baseline=\"middle\">\n                  {tick}\n                </text>\n              </g>\n            ))}\n\n            {this.data.map((d, i) => {\n              const barWidth = xScale.bandwidth();\n              const barX = xScale(d.label) ?? 0;\n              const barY = yScale(d.value);\n              const barHeight = innerHeight - barY;\n              const squareBaseY = barY + barHeight / 2;\n              const squareBaseHeight = barHeight / 2;\n              const fill = d.color ?? categoryColor(i);\n              return (\n                <g key={d.label}>\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--rounded\"\n                    x={barX}\n                    y={barY}\n                    width={barWidth}\n                    height={barHeight}\n                    fill={fill}\n                  />\n                  <rect\n                    class=\"chart-bar__bar chart-bar__bar--square-base\"\n                    x={barX}\n                    y={squareBaseY}\n                    width={barWidth}\n                    height={squareBaseHeight}\n                    fill={fill}\n                  />\n                  <text\n                    class=\"chart-bar__axis-label\"\n                    x={barX + barWidth / 2}\n                    y={innerHeight + 16}\n                    text-anchor=\"middle\"\n                  >\n                    {d.label}\n                  </text>\n                </g>\n              );\n            })}\n          </g>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yKAAA,MAAMA,EAAc,IAAM,ihBCM1B,MAAMC,EAAS,CAAEC,IAAK,GAAIC,MAAO,GAAIC,OAAQ,GAAIC,KAAM,I,MAO1CC,EAAQC,EAAA,MAAAD,UAAAE,EALrB,WAAAC,CAAAC,G,4CAOUC,KAAAC,KAAqB,GACrBD,KAAAE,MAAgB,IAChBF,KAAAG,OAAiB,GAkF1B,CAhFC,MAAAC,GACE,MAAMC,EAAaL,KAAKE,MAAQZ,EAAOI,KAAOJ,EAAOE,MACrD,MAAMc,EAAcN,KAAKG,OAASb,EAAOC,IAAMD,EAAOG,OAEtD,MAAMc,EAAOC,EAAIR,KAAKC,MAAMQ,GAAKA,EAAEC,SAAU,EAE7C,MAAMC,EAASC,IACZC,OAAOb,KAAKC,KAAKa,KAAIL,GAAKA,EAAEM,SAC5BC,MAAM,CAAC,EAAGX,IACVY,QAAQ,KAEX,MAAMC,EAASC,IACZN,OAAO,CAAC,EAAGN,GAAQ,IACnBS,MAAM,CAACV,EAAa,IACpBc,OAEH,MAAMC,EAASH,EAAOI,MAAM,GAE5B,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACVH,EAAA,OAAAE,IAAA,2CACEC,MAAM,iBACNC,QAAS,OAAO3B,KAAKE,SAASF,KAAKG,SACnCD,MAAOF,KAAKE,MACZC,OAAQH,KAAKG,OACbyB,KAAK,MAAK,aACE5B,KAAKC,KAAKa,KAAIL,GAAK,GAAGA,EAAEM,UAAUN,EAAEC,UAASmB,KAAK,OAE9DN,EAAA,KAAAE,IAAA,2CAAGK,UAAW,aAAaxC,EAAOI,SAASJ,EAAOC,QAC/C8B,EAAOP,KAAIiB,GACVR,EAAA,KAAGE,IAAK,QAAQM,IAAQD,UAAW,gBAAgBZ,EAAOa,OACxDR,EAAA,QAAMG,MAAM,sBAAsBM,GAAI,EAAGC,GAAI5B,IAC7CkB,EAAA,QAAMG,MAAM,wBAAwBQ,GAAG,EAAE,cAAc,MAAK,oBAAmB,UAC5EH,MAKN/B,KAAKC,KAAKa,KAAI,CAACL,EAAG0B,KACjB,MAAMC,EAAWzB,EAAO0B,YACxB,MAAMC,EAAO3B,EAAOF,EAAEM,QAAU,EAChC,MAAMwB,EAAOrB,EAAOT,EAAEC,OACtB,MAAM8B,EAAYlC,EAAciC,EAChC,MAAME,EAAcF,EAAOC,EAAY,EACvC,MAAME,EAAmBF,EAAY,EACrC,MAAMG,EAAOlC,EAAEmC,OAASC,EAAcV,GACtC,OACEZ,EAAA,KAAGE,IAAKhB,EAAEM,OACRQ,EAAA,QACEG,MAAM,yCACNQ,EAAGI,EACHQ,EAAGP,EACHrC,MAAOkC,EACPjC,OAAQqC,EACRG,KAAMA,IAERpB,EAAA,QACEG,MAAM,6CACNQ,EAAGI,EACHQ,EAAGL,EACHvC,MAAOkC,EACPjC,OAAQuC,EACRC,KAAMA,IAERpB,EAAA,QACEG,MAAM,wBACNQ,EAAGI,EAAOF,EAAW,EACrBU,EAAGxC,EAAc,GAAE,cACP,UAEXG,EAAEM,OAEH,M","ignoreList":[]}