@ds-mo/ui 14.17.1 → 14.18.1

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

@@ -1 +1 @@
-{"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","intent","contrast","orientation","open","dismissLabel","announcement","rendered","phase","hasActions","loaded","transitionTimer","openFrame","closePending","componentWillLoad","componentDidLoad","updateActionsPresence","startOpen","disconnectedCallback","clearTransitionWork","onOpenChange","isOpen","startClose","closeMotionMs","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","clearTimeout","cancelAnimationFrame","requestAnimationFrame","duration","finishClose","setTimeout","dsAfterClose","emit","slot","actions","assignedElements","filter","element","tagName","Array","from","el","querySelectorAll","length","requestClose","event","dsClose","detail","role","undefined","ariaLive","render","closing","hostClass","banner","h","Host","key","class","inert","as","variant","color","description","name","onSlotchange","currentTarget","label","side","size","icon","type","background","hasBorder","activeFill","onDsClick"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: grid;\n  overflow: hidden;\n  min-width: 0;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--effect-animation-duration-short-3)\n    var(--_banner-motion-easing);\n\n  --ds-banner-background: var(--color-background-faint-neutral);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n}\n\n:host(.banner--open) {\n  grid-template-rows: 1fr;\n  --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n}\n\n:host(.banner--hidden) {\n  display: none;\n}\n\n.banner-overflow {\n  min-height: 0;\n  overflow: visible;\n}\n\n.banner-surface {\n  display: flex;\n  position: relative;\n  width: 100%;\n  padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n  color: var(--ds-banner-description);\n  background-color: var(--ds-banner-background);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n  transform: translateY(-100%);\n  transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n:host(.banner--open) .banner-surface {\n  transform: translateY(0);\n}\n\n.banner-copy {\n  flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n  flex-basis: 100%;\n}\n\n.banner-copy-flow {\n  box-sizing: border-box;\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--ds-banner-description);\n}\n\n.banner-heading {\n  display: inline-block;\n  width: auto;\n  max-width: 100%;\n  margin-inline-end: var(--dimension-space-100);\n  vertical-align: baseline;\n  color: var(--ds-banner-heading);\n}\n\n.banner-description {\n  color: var(--ds-banner-description);\n}\n\n.banner-actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  flex-wrap: nowrap;\n  min-width: 0;\n  gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n  display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n  display: none;\n}\n\n.banner-actions--empty {\n  display: none;\n}\n\n.banner-trailing {\n  align-self: flex-start;\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n  display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n  margin-inline: var(--dimension-space-100) auto;\n  padding-block-end: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n  display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n  margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n  flex: 0 0 auto;\n}\n\n.banner-dismiss {\n  position: absolute;\n  inset-block-start: var(--dimension-space-100);\n  inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n  --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n  --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n  --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n  --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n  --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n  --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n  --ds-banner-background: var(--ds-banner-faint-background);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-neutral);\n  --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n  --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n  --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-brand); }\n:host(.banner--intent-positive.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-positive); }\n:host(.banner--intent-warning.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-warning); }\n:host(.banner--intent-caution.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-caution); }\n:host(.banner--intent-negative.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-negative); }\n\n:host(.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-neutral);\n  --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n  --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n  --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-brand); }\n:host(.banner--intent-positive.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-positive); }\n:host(.banner--intent-warning.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-warning); }\n:host(.banner--intent-caution.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-caution); }\n:host(.banner--intent-negative.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-negative); }\n\n:host(.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-neutral);\n  --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n  --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n  --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-brand); }\n:host(.banner--intent-positive.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-positive); }\n:host(.banner--intent-warning.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-warning); }\n:host(.banner--intent-caution.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-caution); }\n:host(.banner--intent-negative.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-negative); }\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .banner-surface {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .banner-surface {\n    color: var(--ds-forced-color-content);\n    background-color: var(--ds-forced-color-surface);\n    border-bottom-color: var(--ds-forced-color-content);\n  }\n\n  .banner-heading,\n  .banner-description {\n    color: var(--ds-forced-color-content);\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 { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n  | 'neutral'\n  | 'brand'\n  | 'positive'\n  | 'warning'\n  | 'caution'\n  | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Element() el!: HTMLElement;\n\n  /** Required explanatory copy. */\n  @Prop() description!: string;\n  /** Optional visual heading rendered before the description. */\n  @Prop() heading: string = '';\n  /** Semantic color family. */\n  @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n  /** Surface fill weight. */\n  @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n  /** Copy and action-lane arrangement, selected by the application. */\n  @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n  /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n  @Prop({ reflect: true }) open: boolean = true;\n  /** Localized accessible label for the close control. */\n  @Prop() dismissLabel: string = 'Dismiss banner';\n  /** Live-region urgency, independent of visual intent. */\n  @Prop() announcement: BannerAnnouncement = 'none';\n\n  /** Emitted when the close control requests dismissal. The application controls open. */\n  @Event() dsClose!: EventEmitter<MouseEvent>;\n  /** Emitted once after controlled exit motion and layout collapse complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  @State() private rendered = false;\n  @State() private phase: BannerPhase = 'closed';\n  @State() private hasActions = false;\n\n  private loaded = false;\n  private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n  private openFrame: number | null = null;\n  private closePending = false;\n\n  componentWillLoad() {\n    this.rendered = this.open;\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateActionsPresence();\n    if (this.open) this.startOpen();\n  }\n\n  disconnectedCallback() {\n    this.clearTransitionWork();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded) return;\n    if (isOpen) this.startOpen();\n    else this.startClose();\n  }\n\n  private get closeMotionMs(): number {\n    return resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort3,\n      TOKEN_DEFAULTS.animationDurationShort3,\n    );\n  }\n\n  private clearTransitionWork() {\n    if (this.transitionTimer) clearTimeout(this.transitionTimer);\n    if (this.openFrame !== null) cancelAnimationFrame(this.openFrame);\n    this.transitionTimer = null;\n    this.openFrame = null;\n  }\n\n  private startOpen() {\n    this.clearTransitionWork();\n    this.closePending = false;\n    this.rendered = true;\n    this.phase = 'closed';\n    this.openFrame = requestAnimationFrame(() => {\n      this.openFrame = null;\n      if (this.open) this.phase = 'open';\n    });\n  }\n\n  private startClose() {\n    this.clearTransitionWork();\n    if (!this.rendered || this.phase === 'closed') {\n      this.rendered = false;\n      return;\n    }\n\n    this.closePending = true;\n    this.phase = 'closing';\n    const duration = this.closeMotionMs;\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.transitionTimer = setTimeout(() => {\n      this.transitionTimer = null;\n      this.finishClose();\n    }, duration);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closePending) return;\n    this.closePending = false;\n    this.rendered = false;\n    this.phase = 'closed';\n    this.dsAfterClose.emit();\n  }\n\n  private updateActionsPresence(slot?: HTMLSlotElement) {\n    const actions = slot\n      ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n      : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n    this.hasActions = actions.length > 0;\n  }\n\n  private requestClose(event: CustomEvent<MouseEvent>) {\n    if (!this.open || this.phase === 'closing') return;\n    this.dsClose.emit(event.detail);\n  }\n\n  private get role(): 'status' | 'alert' | undefined {\n    if (this.announcement === 'polite') return 'status';\n    if (this.announcement === 'assertive') return 'alert';\n    return undefined;\n  }\n\n  private get ariaLive(): 'polite' | 'assertive' | undefined {\n    return this.announcement === 'none' ? undefined : this.announcement;\n  }\n\n  render() {\n    const closing = this.phase === 'closing';\n    const hostClass = {\n      banner: true,\n      'banner--open': this.phase === 'open',\n      'banner--closing': closing,\n      'banner--hidden': !this.rendered,\n      'banner--has-actions': this.hasActions,\n      [`banner--orientation-${this.orientation}`]: true,\n      [`banner--intent-${this.intent}`]: true,\n      [`banner--contrast-${this.contrast}`]: true,\n    };\n\n    return (\n      <Host class={hostClass}>\n        {this.rendered && (\n          <div class=\"banner-overflow\">\n            <section\n              class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n              role={this.role}\n              aria-live={this.ariaLive}\n              aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n              aria-hidden={closing ? 'true' : undefined}\n              inert={closing ? true : undefined}\n              data-phase={this.phase}\n            >\n              {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n              <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n                <ds-text\n                  class=\"banner-copy-flow\"\n                  as=\"div\"\n                  variant=\"text-body-medium\"\n                  color=\"inherit\"\n                >\n                  {this.heading && (\n                    <ds-text\n                      class=\"banner-heading\"\n                      as=\"span\"\n                      variant=\"text-title-small\"\n                      color=\"inherit\"\n                    >\n                      {this.heading}\n                    </ds-text>\n                  )}\n                  <span class=\"banner-description\">{this.description}</span>\n                </ds-text>\n              </div>\n              <div class=\"banner-trailing ds-chrome-header__trailing\">\n                <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n                  <slot\n                    name=\"actions\"\n                    onSlotchange={(event: Event) =>\n                      this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n                    }\n                  />\n                </div>\n                <div class=\"banner-dismiss\">\n                  <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n                    <ds-button-unfilled\n                      class=\"banner-close\"\n                      variant=\"icon\"\n                      icon=\"Cross\"\n                      size=\"md\"\n                      type=\"button\"\n                      background={this.contrast}\n                      aria-label={this.dismissLabel}\n                      hasBorder={false}\n                      activeFill={false}\n                      onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n                    />\n                  </ds-tooltip>\n                </div>\n              </div>\n            </section>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gUAAA,MAAMA,EAAY,IAAM,o8U,MCgCXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,wHAWUC,KAAAC,QAAkB,GAEDD,KAAAE,OAAuB,UAEvBF,KAAAG,SAA2B,QAE3BH,KAAAI,YAAiC,aAEjCJ,KAAAK,KAAgB,KAEjCL,KAAAM,aAAuB,iBAEvBN,KAAAO,aAAmC,OAO1BP,KAAAQ,SAAW,MACXR,KAAAS,MAAqB,SACrBT,KAAAU,WAAa,MAEtBV,KAAAW,OAAS,MACTX,KAAAY,gBAAwD,KACxDZ,KAAAa,UAA2B,KAC3Bb,KAAAc,aAAe,KAiLxB,CA/KC,iBAAAC,GACEf,KAAKQ,SAAWR,KAAKK,I,CAGvB,gBAAAW,GACEhB,KAAKW,OAAS,KACdX,KAAKiB,wBACL,GAAIjB,KAAKK,KAAML,KAAKkB,W,CAGtB,oBAAAC,GACEnB,KAAKoB,qB,CAIP,YAAAC,CAAaC,GACX,IAAKtB,KAAKW,OAAQ,OAClB,GAAIW,EAAQtB,KAAKkB,iBACZlB,KAAKuB,Y,CAGZ,iBAAYC,GACV,OAAOC,EACLC,EAAeC,aACfD,EAAeE,wB,CAIX,mBAAAR,GACN,GAAIpB,KAAKY,gBAAiBiB,aAAa7B,KAAKY,iBAC5C,GAAIZ,KAAKa,YAAc,KAAMiB,qBAAqB9B,KAAKa,WACvDb,KAAKY,gBAAkB,KACvBZ,KAAKa,UAAY,I,CAGX,SAAAK,GACNlB,KAAKoB,sBACLpB,KAAKc,aAAe,MACpBd,KAAKQ,SAAW,KAChBR,KAAKS,MAAQ,SACbT,KAAKa,UAAYkB,uBAAsB,KACrC/B,KAAKa,UAAY,KACjB,GAAIb,KAAKK,KAAML,KAAKS,MAAQ,MAAM,G,CAI9B,UAAAc,GACNvB,KAAKoB,sBACL,IAAKpB,KAAKQ,UAAYR,KAAKS,QAAU,SAAU,CAC7CT,KAAKQ,SAAW,MAChB,M,CAGFR,KAAKc,aAAe,KACpBd,KAAKS,MAAQ,UACb,MAAMuB,EAAWhC,KAAKwB,cACtB,GAAIQ,GAAY,EAAG,CACjBhC,KAAKiC,cACL,M,CAEFjC,KAAKY,gBAAkBsB,YAAW,KAChClC,KAAKY,gBAAkB,KACvBZ,KAAKiC,aAAa,GACjBD,E,CAGG,WAAAC,GACN,GAAIjC,KAAKK,OAASL,KAAKc,aAAc,OACrCd,KAAKc,aAAe,MACpBd,KAAKQ,SAAW,MAChBR,KAAKS,MAAQ,SACbT,KAAKmC,aAAaC,M,CAGZ,qBAAAnB,CAAsBoB,GAC5B,MAAMC,EAAUD,EACZA,EAAKE,mBAAmBC,QAAOC,GAAWA,EAAQC,UAAY,uBAC9DC,MAAMC,KAAK5C,KAAK6C,GAAGC,iBAAiB,uCACxC9C,KAAKU,WAAa4B,EAAQS,OAAS,C,CAG7B,YAAAC,CAAaC,GACnB,IAAKjD,KAAKK,MAAQL,KAAKS,QAAU,UAAW,OAC5CT,KAAKkD,QAAQd,KAAKa,EAAME,O,CAG1B,QAAYC,GACV,GAAIpD,KAAKO,eAAiB,SAAU,MAAO,SAC3C,GAAIP,KAAKO,eAAiB,YAAa,MAAO,QAC9C,OAAO8C,S,CAGT,YAAYC,GACV,OAAOtD,KAAKO,eAAiB,OAAS8C,UAAYrD,KAAKO,Y,CAGzD,MAAAgD,GACE,MAAMC,EAAUxD,KAAKS,QAAU,UAC/B,MAAMgD,EAAY,CAChBC,OAAQ,KACR,eAAgB1D,KAAKS,QAAU,OAC/B,kBAAmB+C,EACnB,kBAAmBxD,KAAKQ,SACxB,sBAAuBR,KAAKU,WAC5B,CAAC,uBAAuBV,KAAKI,eAAgB,KAC7C,CAAC,kBAAkBJ,KAAKE,UAAW,KACnC,CAAC,oBAAoBF,KAAKG,YAAa,MAGzC,OACEwD,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,GACVzD,KAAKQ,UACJmD,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,6DACNV,KAAMpD,KAAKoD,KAAI,YACJpD,KAAKsD,SAAQ,cACXtD,KAAKO,eAAiB,OAAS8C,UAAY,OAAM,cACjDG,EAAU,OAASH,UAChCU,MAAOP,EAAU,KAAOH,UAAS,aACrBrD,KAAKS,OAGjBkD,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sFACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,mBACNE,GAAG,MACHC,QAAQ,mBACRC,MAAM,WAELlE,KAAKC,SACJ0D,EAAA,WAAAE,IAAA,2CACEC,MAAM,iBACNE,GAAG,OACHC,QAAQ,mBACRC,MAAM,WAELlE,KAAKC,SAGV0D,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsB9D,KAAKmE,eAG3CR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8CACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAE,iBAAkB,KAAM,yBAA0B9D,KAAKU,aACnEiD,EAAA,QAAAE,IAAA,2CACEO,KAAK,UACLC,aAAepB,GACbjD,KAAKiB,sBAAsBgC,EAAMqB,kBAIvCX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,cAAAE,IAAA,2CAAYU,MAAOvE,KAAKM,aAAckE,KAAK,SAASC,KAAK,MACvDd,EAAA,sBAAAE,IAAA,2CACEC,MAAM,eACNG,QAAQ,OACRS,KAAK,QACLD,KAAK,KACLE,KAAK,SACLC,WAAY5E,KAAKG,SAAQ,aACbH,KAAKM,aACjBuE,UAAW,MACXC,WAAY,MACZC,UAAY9B,GAAmCjD,KAAKgD,aAAaC,U","ignoreList":[]}
+{"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","intent","contrast","orientation","open","dismissLabel","announcement","rendered","phase","hasActions","loaded","transitionTimer","closePending","componentWillLoad","componentDidLoad","updateActionsPresence","disconnectedCallback","clearTransitionWork","onOpenChange","isOpen","startOpen","startClose","closeMotionMs","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","clearTimeout","duration","finishClose","setTimeout","dsAfterClose","emit","slot","actions","assignedElements","filter","element","tagName","Array","from","el","querySelectorAll","length","requestClose","event","dsClose","detail","role","undefined","ariaLive","render","closing","hostClass","banner","h","Host","key","class","inert","as","variant","color","description","name","onSlotchange","currentTarget","label","side","size","icon","type","background","hasBorder","activeFill","onDsClick"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n  display: grid;\n  overflow: hidden;\n  min-width: 0;\n  grid-template-rows: 1fr;\n  transition: grid-template-rows var(--effect-animation-duration-short-3)\n    var(--_banner-motion-easing);\n\n  --ds-banner-background: var(--color-background-faint-neutral);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n  --_banner-surface-translate: 0%;\n}\n\n:host(.banner--open) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n  --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n  --_banner-surface-translate: -100%;\n  grid-template-rows: 0fr;\n}\n\n:host(.banner--hidden) {\n  --_banner-surface-translate: -100%;\n\n  display: none;\n  visibility: hidden;\n  grid-template-rows: 0fr;\n}\n\n.banner-overflow {\n  min-height: 0;\n  overflow: visible;\n}\n\n.banner-surface {\n  display: flex;\n  position: relative;\n  width: 100%;\n  padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n  color: var(--ds-banner-description);\n  background-color: var(--ds-banner-background);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n  transform: translateY(var(--_banner-surface-translate));\n  transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n@starting-style {\n  :host(.banner--open) {\n    grid-template-rows: 0fr;\n  }\n}\n\n.banner-copy {\n  flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n  flex-basis: 100%;\n}\n\n.banner-copy-flow {\n  box-sizing: border-box;\n  min-width: 0;\n  padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n  color: var(--ds-banner-description);\n}\n\n.banner-heading {\n  display: inline-block;\n  width: auto;\n  max-width: 100%;\n  margin-inline-end: var(--dimension-space-100);\n  vertical-align: baseline;\n  color: var(--ds-banner-heading);\n}\n\n.banner-description {\n  color: var(--ds-banner-description);\n}\n\n.banner-actions {\n  display: flex;\n  align-items: center;\n  flex: 0 0 auto;\n  flex-wrap: nowrap;\n  min-width: 0;\n  gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n  display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n  display: none;\n}\n\n.banner-actions--empty {\n  display: none;\n}\n\n.banner-trailing {\n  align-self: flex-start;\n  flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n  display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n  margin-inline: var(--dimension-space-100) auto;\n  padding-block-end: var(--dimension-space-100);\n  box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n  display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n  margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n  flex: 0 0 auto;\n}\n\n.banner-dismiss {\n  position: absolute;\n  inset-block-start: var(--dimension-space-100);\n  inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n  --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n  --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n  --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n  --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n  --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n  --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n  --ds-banner-background: var(--ds-banner-faint-background);\n  --ds-banner-heading: var(--color-foreground-primary);\n  --ds-banner-description: var(--color-foreground-secondary);\n  --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n  --ds-banner-background: var(--color-background-medium-neutral);\n  --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n  --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n  --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-brand); }\n:host(.banner--intent-positive.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-positive); }\n:host(.banner--intent-warning.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-warning); }\n:host(.banner--intent-caution.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-caution); }\n:host(.banner--intent-negative.banner--contrast-medium) { --ds-banner-background: var(--color-background-medium-negative); }\n\n:host(.banner--contrast-strong) {\n  --ds-banner-background: var(--color-background-strong-neutral);\n  --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n  --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n  --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-brand); }\n:host(.banner--intent-positive.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-positive); }\n:host(.banner--intent-warning.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-warning); }\n:host(.banner--intent-caution.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-caution); }\n:host(.banner--intent-negative.banner--contrast-strong) { --ds-banner-background: var(--color-background-strong-negative); }\n\n:host(.banner--contrast-bold) {\n  --ds-banner-background: var(--color-background-bold-neutral);\n  --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n  --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n  --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-brand); }\n:host(.banner--intent-positive.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-positive); }\n:host(.banner--intent-warning.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-warning); }\n:host(.banner--intent-caution.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-caution); }\n:host(.banner--intent-negative.banner--contrast-bold) { --ds-banner-background: var(--color-background-bold-negative); }\n\n@media (prefers-reduced-motion: reduce) {\n  :host,\n  .banner-surface {\n    transition: none;\n  }\n}\n\n@media (forced-colors: active) {\n  .banner-surface {\n    color: var(--ds-forced-color-content);\n    background-color: var(--ds-forced-color-surface);\n    border-bottom-color: var(--ds-forced-color-content);\n  }\n\n  .banner-heading,\n  .banner-description {\n    color: var(--ds-forced-color-content);\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 { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent =\n  | 'neutral'\n  | 'brand'\n  | 'positive'\n  | 'warning'\n  | 'caution'\n  | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n  tag: 'ds-banner',\n  styleUrl: 'Banner.css',\n  scoped: true,\n})\nexport class Banner {\n  @Element() el!: HTMLElement;\n\n  /** Required explanatory copy. */\n  @Prop() description!: string;\n  /** Optional visual heading rendered before the description. */\n  @Prop() heading: string = '';\n  /** Semantic color family. */\n  @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n  /** Surface fill weight. */\n  @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n  /** Copy and action-lane arrangement, selected by the application. */\n  @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n  /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n  @Prop({ reflect: true }) open: boolean = true;\n  /** Localized accessible label for the close control. */\n  @Prop() dismissLabel: string = 'Dismiss banner';\n  /** Live-region urgency, independent of visual intent. */\n  @Prop() announcement: BannerAnnouncement = 'none';\n\n  /** Emitted when the close control requests dismissal. The application controls open. */\n  @Event() dsClose!: EventEmitter<MouseEvent>;\n  /** Emitted once after controlled exit motion and layout collapse complete. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  @State() private rendered = false;\n  @State() private phase: BannerPhase = 'closed';\n  @State() private hasActions = false;\n\n  private loaded = false;\n  private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n  private closePending = false;\n\n  componentWillLoad() {\n    this.rendered = this.open;\n    this.phase = this.open ? 'open' : 'closed';\n  }\n\n  componentDidLoad() {\n    this.loaded = true;\n    this.updateActionsPresence();\n  }\n\n  disconnectedCallback() {\n    this.clearTransitionWork();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (!this.loaded) return;\n    if (isOpen) this.startOpen();\n    else this.startClose();\n  }\n\n  private get closeMotionMs(): number {\n    return resolveMotionTimeMs(\n      TOKEN_DEFAULTS.motionShort3,\n      TOKEN_DEFAULTS.animationDurationShort3,\n    );\n  }\n\n  private clearTransitionWork() {\n    if (this.transitionTimer) clearTimeout(this.transitionTimer);\n    this.transitionTimer = null;\n  }\n\n  private startOpen() {\n    this.clearTransitionWork();\n    this.closePending = false;\n    this.rendered = true;\n    this.phase = 'open';\n  }\n\n  private startClose() {\n    this.clearTransitionWork();\n    if (!this.rendered || this.phase === 'closed') {\n      this.rendered = false;\n      return;\n    }\n\n    this.closePending = true;\n    this.phase = 'closing';\n    const duration = this.closeMotionMs;\n    if (duration <= 0) {\n      this.finishClose();\n      return;\n    }\n    this.transitionTimer = setTimeout(() => {\n      this.transitionTimer = null;\n      this.finishClose();\n    }, duration);\n  }\n\n  private finishClose() {\n    if (this.open || !this.closePending) return;\n    this.closePending = false;\n    this.rendered = false;\n    this.phase = 'closed';\n    this.dsAfterClose.emit();\n  }\n\n  private updateActionsPresence(slot?: HTMLSlotElement) {\n    const actions = slot\n      ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n      : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n    this.hasActions = actions.length > 0;\n  }\n\n  private requestClose(event: CustomEvent<MouseEvent>) {\n    if (!this.open || this.phase === 'closing') return;\n    this.dsClose.emit(event.detail);\n  }\n\n  private get role(): 'status' | 'alert' | undefined {\n    if (this.announcement === 'polite') return 'status';\n    if (this.announcement === 'assertive') return 'alert';\n    return undefined;\n  }\n\n  private get ariaLive(): 'polite' | 'assertive' | undefined {\n    return this.announcement === 'none' ? undefined : this.announcement;\n  }\n\n  render() {\n    const closing = this.phase === 'closing';\n    const hostClass = {\n      banner: true,\n      'banner--open': this.phase === 'open',\n      'banner--closing': closing,\n      'banner--hidden': !this.rendered,\n      'banner--has-actions': this.hasActions,\n      [`banner--orientation-${this.orientation}`]: true,\n      [`banner--intent-${this.intent}`]: true,\n      [`banner--contrast-${this.contrast}`]: true,\n    };\n\n    return (\n      <Host class={hostClass}>\n        <div class=\"banner-overflow\">\n          <section\n            class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n            role={this.role}\n            aria-live={this.ariaLive}\n            aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n            aria-hidden={closing ? 'true' : undefined}\n            inert={closing ? true : undefined}\n            data-phase={this.phase}\n          >\n            {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n            <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n              <ds-text\n                class=\"banner-copy-flow\"\n                as=\"div\"\n                variant=\"text-body-medium\"\n                color=\"inherit\"\n              >\n                {this.heading && (\n                  <ds-text\n                    class=\"banner-heading\"\n                    as=\"span\"\n                    variant=\"text-title-small\"\n                    color=\"inherit\"\n                  >\n                    {this.heading}\n                  </ds-text>\n                )}\n                <span class=\"banner-description\">{this.description}</span>\n              </ds-text>\n            </div>\n            <div class=\"banner-trailing ds-chrome-header__trailing\">\n              <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n                <slot\n                  name=\"actions\"\n                  onSlotchange={(event: Event) =>\n                    this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n                  }\n                />\n              </div>\n              <div class=\"banner-dismiss\">\n                <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n                  <ds-button-unfilled\n                    class=\"banner-close\"\n                    variant=\"icon\"\n                    icon=\"Cross\"\n                    size=\"md\"\n                    type=\"button\"\n                    background={this.contrast}\n                    aria-label={this.dismissLabel}\n                    hasBorder={false}\n                    activeFill={false}\n                    onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n                  />\n                </ds-tooltip>\n              </div>\n            </div>\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gUAAA,MAAMA,EAAY,IAAM,8lV,MCgCXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,wHAWUC,KAAAC,QAAkB,GAEDD,KAAAE,OAAuB,UAEvBF,KAAAG,SAA2B,QAE3BH,KAAAI,YAAiC,aAEjCJ,KAAAK,KAAgB,KAEjCL,KAAAM,aAAuB,iBAEvBN,KAAAO,aAAmC,OAO1BP,KAAAQ,SAAW,MACXR,KAAAS,MAAqB,SACrBT,KAAAU,WAAa,MAEtBV,KAAAW,OAAS,MACTX,KAAAY,gBAAwD,KACxDZ,KAAAa,aAAe,KAyKxB,CAvKC,iBAAAC,GACEd,KAAKQ,SAAWR,KAAKK,KACrBL,KAAKS,MAAQT,KAAKK,KAAO,OAAS,Q,CAGpC,gBAAAU,GACEf,KAAKW,OAAS,KACdX,KAAKgB,uB,CAGP,oBAAAC,GACEjB,KAAKkB,qB,CAIP,YAAAC,CAAaC,GACX,IAAKpB,KAAKW,OAAQ,OAClB,GAAIS,EAAQpB,KAAKqB,iBACZrB,KAAKsB,Y,CAGZ,iBAAYC,GACV,OAAOC,EACLC,EAAeC,aACfD,EAAeE,wB,CAIX,mBAAAT,GACN,GAAIlB,KAAKY,gBAAiBgB,aAAa5B,KAAKY,iBAC5CZ,KAAKY,gBAAkB,I,CAGjB,SAAAS,GACNrB,KAAKkB,sBACLlB,KAAKa,aAAe,MACpBb,KAAKQ,SAAW,KAChBR,KAAKS,MAAQ,M,CAGP,UAAAa,GACNtB,KAAKkB,sBACL,IAAKlB,KAAKQ,UAAYR,KAAKS,QAAU,SAAU,CAC7CT,KAAKQ,SAAW,MAChB,M,CAGFR,KAAKa,aAAe,KACpBb,KAAKS,MAAQ,UACb,MAAMoB,EAAW7B,KAAKuB,cACtB,GAAIM,GAAY,EAAG,CACjB7B,KAAK8B,cACL,M,CAEF9B,KAAKY,gBAAkBmB,YAAW,KAChC/B,KAAKY,gBAAkB,KACvBZ,KAAK8B,aAAa,GACjBD,E,CAGG,WAAAC,GACN,GAAI9B,KAAKK,OAASL,KAAKa,aAAc,OACrCb,KAAKa,aAAe,MACpBb,KAAKQ,SAAW,MAChBR,KAAKS,MAAQ,SACbT,KAAKgC,aAAaC,M,CAGZ,qBAAAjB,CAAsBkB,GAC5B,MAAMC,EAAUD,EACZA,EAAKE,mBAAmBC,QAAOC,GAAWA,EAAQC,UAAY,uBAC9DC,MAAMC,KAAKzC,KAAK0C,GAAGC,iBAAiB,uCACxC3C,KAAKU,WAAayB,EAAQS,OAAS,C,CAG7B,YAAAC,CAAaC,GACnB,IAAK9C,KAAKK,MAAQL,KAAKS,QAAU,UAAW,OAC5CT,KAAK+C,QAAQd,KAAKa,EAAME,O,CAG1B,QAAYC,GACV,GAAIjD,KAAKO,eAAiB,SAAU,MAAO,SAC3C,GAAIP,KAAKO,eAAiB,YAAa,MAAO,QAC9C,OAAO2C,S,CAGT,YAAYC,GACV,OAAOnD,KAAKO,eAAiB,OAAS2C,UAAYlD,KAAKO,Y,CAGzD,MAAA6C,GACE,MAAMC,EAAUrD,KAAKS,QAAU,UAC/B,MAAM6C,EAAY,CAChBC,OAAQ,KACR,eAAgBvD,KAAKS,QAAU,OAC/B,kBAAmB4C,EACnB,kBAAmBrD,KAAKQ,SACxB,sBAAuBR,KAAKU,WAC5B,CAAC,uBAAuBV,KAAKI,eAAgB,KAC7C,CAAC,kBAAkBJ,KAAKE,UAAW,KACnC,CAAC,oBAAoBF,KAAKG,YAAa,MAGzC,OACEqD,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,GACXE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,6DACNV,KAAMjD,KAAKiD,KAAI,YACJjD,KAAKmD,SAAQ,cACXnD,KAAKO,eAAiB,OAAS2C,UAAY,OAAM,cACjDG,EAAU,OAASH,UAChCU,MAAOP,EAAU,KAAOH,UAAS,aACrBlD,KAAKS,OAGjB+C,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sFACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,mBACNE,GAAG,MACHC,QAAQ,mBACRC,MAAM,WAEL/D,KAAKC,SACJuD,EAAA,WAAAE,IAAA,2CACEC,MAAM,iBACNE,GAAG,OACHC,QAAQ,mBACRC,MAAM,WAEL/D,KAAKC,SAGVuD,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsB3D,KAAKgE,eAG3CR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8CACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAE,iBAAkB,KAAM,yBAA0B3D,KAAKU,aACnE8C,EAAA,QAAAE,IAAA,2CACEO,KAAK,UACLC,aAAepB,GACb9C,KAAKgB,sBAAsB8B,EAAMqB,kBAIvCX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,cAAAE,IAAA,2CAAYU,MAAOpE,KAAKM,aAAc+D,KAAK,SAASC,KAAK,MACvDd,EAAA,sBAAAE,IAAA,2CACEC,MAAM,eACNG,QAAQ,OACRS,KAAK,QACLD,KAAK,KACLE,KAAK,SACLC,WAAYzE,KAAKG,SAAQ,aACbH,KAAKM,aACjBoE,UAAW,MACXC,WAAY,MACZC,UAAY9B,GAAmC9C,KAAK6C,aAAaC,U","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as o,H as s,c as e,h as a,a as t,t as c}from"./index.js";import{d as r}from"./p-BGXqFq2C.js";const i=()=>`.ds-control-elevation.sc-ds-bar-action-h,.ds-control-elevation.sc-ds-bar-action{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-bar-action-h::after,.ds-control-elevation.sc-ds-bar-action::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-bar-action-h,.ds-control-elevation--sm.sc-ds-bar-action{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-bar-action-h,.ds-control-elevation--md.sc-ds-bar-action{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-bar-action-h,.ds-control-elevation--floating.sc-ds-bar-action{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-bar-action{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-bar-action{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-bar-action,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-bar-action{scale:none;transition:none}}.ds-chrome-space--sm.sc-ds-bar-action-h,.ds-chrome-space--sm.sc-ds-bar-action{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-action-h,.ds-chrome-space--md.sc-ds-bar-action{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-action-h,.ds-chrome-space--lg.sc-ds-bar-action{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-action-h,.ds-chrome-row.sc-ds-bar-action,.ds-chrome-column.sc-ds-bar-action-h,.ds-chrome-column.sc-ds-bar-action,.ds-chrome-grid.sc-ds-bar-action-h,.ds-chrome-grid.sc-ds-bar-action{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-action-h,.ds-chrome-row.sc-ds-bar-action{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-action-h,.ds-chrome-column.sc-ds-bar-action{flex-direction:column}.ds-chrome-grid.sc-ds-bar-action-h,.ds-chrome-grid.sc-ds-bar-action{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-action:root,.sc-ds-bar-action-h,.ds-forced-colors-scope.sc-ds-bar-action{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-action-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-action-h,.ds-focus-ring.sc-ds-bar-action,.ds-focus-ring-inset.sc-ds-bar-action-h,.ds-focus-ring-inset.sc-ds-bar-action{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-action-h:focus-visible,.ds-focus-ring.sc-ds-bar-action:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-action-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-action{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-action-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-action:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-action-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-action:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-action-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-action:root,.sc-ds-bar-action-h,.ds-forced-colors-scope.sc-ds-bar-action{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-action:where(.ds-text-decoration,.ds-text-action).sc-ds-bar-action{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-bar-action:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-bar-action{text-decoration-line:underline;text-decoration-color:currentcolor}}.ds-visually-hidden.sc-ds-bar-action-h,.ds-visually-hidden.sc-ds-bar-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-bar-action-h{display:block;min-width:0;box-sizing:border-box}[hidden].sc-ds-bar-action-h{display:none}.bar-action.sc-ds-bar-action{width:100%;min-width:0;box-sizing:border-box;height:var(--dimension-size-600);border-radius:var(--dimension-radius-125);background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-secondary);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.bar-action[hidden].sc-ds-bar-action,.bar-action__actions--empty.sc-ds-bar-action{display:none}.bar-action__copy.sc-ds-bar-action,.bar-action__actions.sc-ds-bar-action{display:flex;align-items:center;min-width:0;gap:var(--dimension-space-050)}.bar-action__copy.sc-ds-bar-action{flex:1 1 auto;padding-inline:var(--dimension-space-100)}.bar-action__count.sc-ds-bar-action{flex:0 1 auto;min-width:0}.bar-action__separator.sc-ds-bar-action,.bar-action__clear.sc-ds-bar-action,.bar-action__actions.sc-ds-bar-action{flex:0 0 auto}.bar-action__actions.sc-ds-bar-action{margin-inline-start:auto}.bar-action__actions.sc-ds-bar-action slot.sc-ds-bar-action{display:contents}.bar-action__clear.sc-ds-bar-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--dimension-size-400);margin:0;padding:var(--dimension-space-025);border:0;border-radius:var(--dimension-radius-050);background:transparent;cursor:pointer}@media (forced-colors: active){.bar-action.sc-ds-bar-action{--ds-control-elevation-shadow:none;--ds-control-elevation-highlight:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const n=o(class o extends s{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClear=e(this,"dsClear",7);this.count=0;this.selectedLabel="selected";this.clearLabel="Clear";this.label="Selected item actions";this.hasActions=false;this.updateActionsPresence=()=>{this.hasActions=Boolean(this.el.querySelector('[slot="actions"]'))};this.handleClear=o=>{this.dsClear.emit(o)}}componentWillLoad(){this.updateActionsPresence()}componentDidLoad(){this.updateActionsPresence();if(typeof MutationObserver==="undefined")return;this.actionsObserver=new MutationObserver(this.updateActionsPresence);this.actionsObserver.observe(this.el,{childList:true,subtree:true,attributes:true,attributeFilter:["slot"]})}disconnectedCallback(){this.actionsObserver?.disconnect()}get resolvedCount(){if(!Number.isFinite(this.count))return 0;return Math.max(0,Math.trunc(this.count))}get isVisible(){return this.resolvedCount>=1}render(){const o=`${this.resolvedCount} ${this.selectedLabel}`;return a(t,{key:"b9e7761af6d6bea7fbf270578c202d003b1b408e"},a("div",{key:"12dc2e0a1b32f943ef8a4c86cc63ffdc93ab645c",class:"bar-action ds-chrome-row ds-chrome-space--md ds-control-elevation ds-control-elevation--md",hidden:!this.isVisible||undefined,role:"group","aria-label":this.label},a("div",{key:"8ba2f7969c9c91e0a8d8a0d6f5aeb69d4c8a3d42",class:"bar-action__copy"},a("ds-text",{key:"6231d8eab62b91a1593adda61d27a6e3d1595d02",class:"bar-action__count",as:"span",variant:"text-body-medium",color:"inherit",fontFeature:"tabular-nums",lineTruncation:1},o),a("ds-text",{key:"033f7b32cde9ec9b4074b6b1dc70b76f16eec6c0",class:"bar-action__separator",as:"span",variant:"text-body-medium",color:"inherit","aria-hidden":"true"},"·"),a("button",{key:"94a49cca2694ec18195cacb3e8401420f691b2a7",class:"bar-action__clear ds-text-action ds-text-action--on-bold ds-focus-ring",type:"button",onClick:this.handleClear},a("ds-text",{key:"62be88a138f954144d634f467c040d28bb7cdb96",as:"span",variant:"text-body-medium",color:"inherit"},this.clearLabel))),a("div",{key:"d60ea28567dd079f0764c202ec4f070d40e190c8",class:{"bar-action__actions":true,"bar-action__actions--empty":!this.hasActions}},a("slot",{key:"d0e76522301b01429a22f3b7d14c5ad0f5b1dbcb",name:"actions"}))),a("span",{key:"64a0a746808cf854f859073a4e61d2ec62d82d13",class:"bar-action__status ds-visually-hidden",role:"status","aria-live":"polite","aria-atomic":"true"},this.isVisible?o:""))}get el(){return this}static get style(){return i()}},[262,"ds-bar-action",{count:[2],selectedLabel:[1,"selected-label"],clearLabel:[1,"clear-label"],label:[1],hasActions:[32]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-bar-action","ds-text"];o.forEach((o=>{switch(o){case"ds-bar-action":if(!customElements.get(c(o))){customElements.define(c(o),n)}break;case"ds-text":if(!customElements.get(c(o))){r()}break}}))}d();const l=n;const b=d;export{l as DsBarAction,b as defineCustomElement};
+import{p as o,H as s,c as a,h as e,a as c,t as r}from"./index.js";import{d as t}from"./p-CAnnQL1F.js";const i=()=>`.ds-control-elevation.sc-ds-bar-action-h,.ds-control-elevation.sc-ds-bar-action{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-bar-action-h::after,.ds-control-elevation.sc-ds-bar-action::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-bar-action-h,.ds-control-elevation--sm.sc-ds-bar-action{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-bar-action-h,.ds-control-elevation--md.sc-ds-bar-action{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-bar-action-h,.ds-control-elevation--floating.sc-ds-bar-action{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-bar-action{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-bar-action{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-bar-action,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-bar-action{scale:none;transition:none}}.ds-chrome-space--sm.sc-ds-bar-action-h,.ds-chrome-space--sm.sc-ds-bar-action{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-action-h,.ds-chrome-space--md.sc-ds-bar-action{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-action-h,.ds-chrome-space--lg.sc-ds-bar-action{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-action-h,.ds-chrome-row.sc-ds-bar-action,.ds-chrome-column.sc-ds-bar-action-h,.ds-chrome-column.sc-ds-bar-action,.ds-chrome-grid.sc-ds-bar-action-h,.ds-chrome-grid.sc-ds-bar-action{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-action-h,.ds-chrome-row.sc-ds-bar-action{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-action-h,.ds-chrome-column.sc-ds-bar-action{flex-direction:column}.ds-chrome-grid.sc-ds-bar-action-h,.ds-chrome-grid.sc-ds-bar-action{display:grid;align-items:center}@media (forced-colors: active){.sc-ds-bar-action:root,.sc-ds-bar-action-h,.ds-forced-colors-scope.sc-ds-bar-action{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-action-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-bar-action-h,.ds-focus-ring.sc-ds-bar-action,.ds-focus-ring-inset.sc-ds-bar-action-h,.ds-focus-ring-inset.sc-ds-bar-action{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-action-h:focus-visible,.ds-focus-ring.sc-ds-bar-action:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-action-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-action{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-bar-action-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-action:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-action-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-action:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-action::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-bar-action-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-bar-action:root,.sc-ds-bar-action-h,.ds-forced-colors-scope.sc-ds-bar-action{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-bar-action:where(.ds-text-decoration,.ds-text-action).sc-ds-bar-action{text-decoration-color:var(--ds-text-decoration-color, var(--color-foreground-tertiary));text-decoration-thickness:var(--ds-text-decoration-thickness, var(--dimension-stroke-width-012));text-underline-offset:var(--ds-text-decoration-offset, var(--dimension-space-025))}.ds-text-action.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-bold-brand);--ds-text-decoration-color:var(--ds-text-action-foreground);color:var(--ds-text-action-foreground);text-decoration-line:none}.ds-text-action--on-medium.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-on-medium-background-primary);--ds-text-decoration-color:var(--color-foreground-on-medium-background-secondary);text-decoration-line:underline}.ds-text-action--on-strong.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-on-strong-background-primary);--ds-text-decoration-color:var(--color-foreground-on-strong-background-secondary);text-decoration-line:underline}.ds-text-action--on-bold.sc-ds-bar-action{--ds-text-action-foreground:var(--color-foreground-on-bold-background-primary);--ds-text-decoration-color:var(--color-foreground-on-bold-background-secondary);text-decoration-line:underline}@media (hover: hover) and (pointer: fine){.ds-text-action.sc-ds-bar-action:hover{text-decoration-line:underline}}@media (forced-colors: active){.ds-text-action.sc-ds-bar-action{text-decoration-line:underline;text-decoration-color:currentcolor}}.ds-visually-hidden.sc-ds-bar-action-h,.ds-visually-hidden.sc-ds-bar-action{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.sc-ds-bar-action-h{display:block;min-width:0;box-sizing:border-box}[hidden].sc-ds-bar-action-h{display:none}.bar-action.sc-ds-bar-action{width:100%;min-width:0;box-sizing:border-box;height:var(--dimension-size-600);border-radius:var(--dimension-radius-125);background:var(--color-background-bold-brand);color:var(--color-foreground-on-bold-background-secondary);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.bar-action[hidden].sc-ds-bar-action,.bar-action__actions.sc-ds-bar-action:not(:has([slot='actions'])){display:none}.bar-action__copy.sc-ds-bar-action,.bar-action__actions.sc-ds-bar-action{display:flex;align-items:center;min-width:0;gap:var(--dimension-space-050)}.bar-action__copy.sc-ds-bar-action{flex:1 1 auto;padding-inline:var(--dimension-space-100)}.bar-action__count.sc-ds-bar-action{flex:0 1 auto;min-width:0}.bar-action__separator.sc-ds-bar-action,.bar-action__clear.sc-ds-bar-action,.bar-action__actions.sc-ds-bar-action{flex:0 0 auto}.bar-action__actions.sc-ds-bar-action{margin-inline-start:auto}.bar-action__actions.sc-ds-bar-action slot.sc-ds-bar-action{display:contents}.bar-action__clear.sc-ds-bar-action{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-block-size:var(--dimension-size-400);margin:0;padding:var(--dimension-space-025);border:0;border-radius:var(--dimension-radius-050);background:transparent;cursor:pointer}@media (forced-colors: active){.bar-action.sc-ds-bar-action{--ds-control-elevation-shadow:none;--ds-control-elevation-highlight:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}}`;const n=o(class o extends s{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClear=a(this,"dsClear",7);this.count=0;this.selectedLabel="selected";this.clearLabel="Clear";this.label="Selected item actions";this.handleClear=o=>{this.dsClear.emit(o)}}get resolvedCount(){if(!Number.isFinite(this.count))return 0;return Math.max(0,Math.trunc(this.count))}get isVisible(){return this.resolvedCount>=1}render(){const o=`${this.resolvedCount} ${this.selectedLabel}`;return e(c,{key:"d1005c296c7c5caf340696ce3c338607af8a3be6"},e("div",{key:"2109b2cf237da4735b7aaf315c19e1ba77d3a5b2",class:"bar-action ds-chrome-row ds-chrome-space--md ds-control-elevation ds-control-elevation--md",hidden:!this.isVisible||undefined,role:"group","aria-label":this.label},e("div",{key:"1f8b6b380dd96043fbe4cd6088c836eec5f92f39",class:"bar-action__copy"},e("ds-text",{key:"e544e3797457a92780eff7383319b4e424b60d77",class:"bar-action__count",as:"span",variant:"text-body-medium",color:"inherit",fontFeature:"tabular-nums",lineTruncation:1},o),e("ds-text",{key:"fbfea6b8752ed37ee48601c090f209a3796a1d3b",class:"bar-action__separator",as:"span",variant:"text-body-medium",color:"inherit","aria-hidden":"true"},"·"),e("button",{key:"97bc8d18a7f3bbcbad472e1cc4578f2296f7243b",class:"bar-action__clear ds-text-action ds-text-action--on-bold ds-focus-ring",type:"button",onClick:this.handleClear},e("ds-text",{key:"a1dd742af985c9f6302eee1c2fa60e1c00a8b4a3",as:"span",variant:"text-body-medium",color:"inherit"},this.clearLabel))),e("div",{key:"9e5c9ca0dd0bce3ac4f67b01dceec0a97f175f52",class:"bar-action__actions"},e("slot",{key:"021a13c095b438a800071264e2b8faf3a87f551a",name:"actions"}))),e("span",{key:"6a39b42e83e79e518443d435f08e87f8dd52445e",class:"bar-action__status ds-visually-hidden",role:"status","aria-live":"polite","aria-atomic":"true"},this.isVisible?o:""))}static get style(){return i()}},[262,"ds-bar-action",{count:[2],selectedLabel:[1,"selected-label"],clearLabel:[1,"clear-label"],label:[1]}]);function d(){if(typeof customElements==="undefined"){return}const o=["ds-bar-action","ds-text"];o.forEach((o=>{switch(o){case"ds-bar-action":if(!customElements.get(r(o))){customElements.define(r(o),n)}break;case"ds-text":if(!customElements.get(r(o))){t()}break}}))}d();const l=n;const b=d;export{l as DsBarAction,b as defineCustomElement};
 //# sourceMappingURL=ds-bar-action.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["barActionCss","BarAction","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","count","selectedLabel","clearLabel","label","hasActions","updateActionsPresence","Boolean","el","querySelector","handleClear","event","dsClear","emit","componentWillLoad","componentDidLoad","MutationObserver","actionsObserver","observe","childList","subtree","attributes","attributeFilter","disconnectedCallback","disconnect","resolvedCount","Number","isFinite","Math","max","trunc","isVisible","render","countLabel","h","Host","key","class","hidden","undefined","role","as","variant","color","fontFeature","lineTruncation","type","onClick","name"],"sources":["src/wc/components/BarAction/BarAction.css?tag=ds-bar-action&encapsulation=scoped","src/wc/components/BarAction/BarAction.tsx"],"sourcesContent":["@import '../../styles/control-elevation.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/text-decoration.css';\n@import '../../utils/visually-hidden.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.bar-action {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: var(--dimension-size-600);\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-secondary);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n}\n\n.bar-action[hidden],\n.bar-action__actions--empty {\n  display: none;\n}\n\n.bar-action__copy,\n.bar-action__actions {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.bar-action__copy {\n  flex: 1 1 auto;\n  padding-inline: var(--dimension-space-100);\n}\n\n.bar-action__count {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.bar-action__separator,\n.bar-action__clear,\n.bar-action__actions {\n  flex: 0 0 auto;\n}\n\n.bar-action__actions {\n  margin-inline-start: auto;\n}\n\n.bar-action__actions slot {\n  display: contents;\n}\n\n.bar-action__clear {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: var(--dimension-size-400);\n  margin: 0;\n  padding: var(--dimension-space-025);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  background: transparent;\n  cursor: pointer;\n}\n\n@media (forced-colors: active) {\n  .bar-action {\n    --ds-control-elevation-shadow: none;\n    --ds-control-elevation-highlight: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ds-bar-action',\n  styleUrl: 'BarAction.css',\n  scoped: true,\n})\nexport class BarAction {\n  @Element() el!: HTMLElement;\n\n  /** Number of selected items. The bar is hidden while this is below one. */\n  @Prop() count: number = 0;\n\n  /** Localized noun shown after the count. */\n  @Prop() selectedLabel: string = 'selected';\n\n  /** Visible Clear control label. */\n  @Prop() clearLabel: string = 'Clear';\n\n  /** Accessible name for the selected-set action group. */\n  @Prop() label: string = 'Selected item actions';\n\n  /** Emitted when Clear is activated. The application owns the selected identities. */\n  @Event() dsClear!: EventEmitter<MouseEvent>;\n\n  @State() private hasActions = false;\n\n  private actionsObserver?: MutationObserver;\n\n  componentWillLoad() {\n    this.updateActionsPresence();\n  }\n\n  componentDidLoad() {\n    this.updateActionsPresence();\n    if (typeof MutationObserver === 'undefined') return;\n    this.actionsObserver = new MutationObserver(this.updateActionsPresence);\n    this.actionsObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['slot'],\n    });\n  }\n\n  disconnectedCallback() {\n    this.actionsObserver?.disconnect();\n  }\n\n  private get resolvedCount(): number {\n    if (!Number.isFinite(this.count)) return 0;\n    return Math.max(0, Math.trunc(this.count));\n  }\n\n  private get isVisible(): boolean {\n    return this.resolvedCount >= 1;\n  }\n\n  private updateActionsPresence = () => {\n    this.hasActions = Boolean(this.el.querySelector('[slot=\"actions\"]'));\n  };\n\n  private handleClear = (event: MouseEvent) => {\n    this.dsClear.emit(event);\n  };\n\n  render() {\n    const countLabel = `${this.resolvedCount} ${this.selectedLabel}`;\n    return (\n      <Host>\n        <div\n          class=\"bar-action ds-chrome-row ds-chrome-space--md ds-control-elevation ds-control-elevation--md\"\n          hidden={!this.isVisible || undefined}\n          role=\"group\"\n          aria-label={this.label}\n        >\n          <div class=\"bar-action__copy\">\n            <ds-text\n              class=\"bar-action__count\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"inherit\"\n              fontFeature=\"tabular-nums\"\n              lineTruncation={1}\n            >\n              {countLabel}\n            </ds-text>\n            <ds-text\n              class=\"bar-action__separator\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"inherit\"\n              aria-hidden=\"true\"\n            >\n              ·\n            </ds-text>\n            <button\n              class=\"bar-action__clear ds-text-action ds-text-action--on-bold ds-focus-ring\"\n              type=\"button\"\n              onClick={this.handleClear}\n            >\n              <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.clearLabel}\n              </ds-text>\n            </button>\n          </div>\n          <div\n            class={{\n              'bar-action__actions': true,\n              'bar-action__actions--empty': !this.hasActions,\n            }}\n          >\n            <slot name=\"actions\" />\n          </div>\n        </div>\n        <span\n          class=\"bar-action__status ds-visually-hidden\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {this.isVisible ? countLabel : ''}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAe,IAAM,yzQ,MCgBdC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,6EASUC,KAAAC,MAAgB,EAGhBD,KAAAE,cAAwB,WAGxBF,KAAAG,WAAqB,QAGrBH,KAAAI,MAAgB,wBAKPJ,KAAAK,WAAa,MAiCtBL,KAAAM,sBAAwB,KAC9BN,KAAKK,WAAaE,QAAQP,KAAKQ,GAAGC,cAAc,oBAAoB,EAG9DT,KAAAU,YAAeC,IACrBX,KAAKY,QAAQC,KAAKF,EAAM,CA+D3B,CAjGC,iBAAAG,GACEd,KAAKM,uB,CAGP,gBAAAS,GACEf,KAAKM,wBACL,UAAWU,mBAAqB,YAAa,OAC7ChB,KAAKiB,gBAAkB,IAAID,iBAAiBhB,KAAKM,uBACjDN,KAAKiB,gBAAgBC,QAAQlB,KAAKQ,GAAI,CACpCW,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,S,CAItB,oBAAAC,GACEvB,KAAKiB,iBAAiBO,Y,CAGxB,iBAAYC,GACV,IAAKC,OAAOC,SAAS3B,KAAKC,OAAQ,OAAO,EACzC,OAAO2B,KAAKC,IAAI,EAAGD,KAAKE,MAAM9B,KAAKC,O,CAGrC,aAAY8B,GACV,OAAO/B,KAAKyB,eAAiB,C,CAW/B,MAAAO,GACE,MAAMC,EAAa,GAAGjC,KAAKyB,iBAAiBzB,KAAKE,gBACjD,OACEgC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,6FACNC,QAAStC,KAAK+B,WAAaQ,UAC3BC,KAAK,QAAO,aACAxC,KAAKI,OAEjB8B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,oBACNI,GAAG,OACHC,QAAQ,mBACRC,MAAM,UACNC,YAAY,eACZC,eAAgB,GAEfZ,GAEHC,EAAA,WAAAE,IAAA,2CACEC,MAAM,wBACNI,GAAG,OACHC,QAAQ,mBACRC,MAAM,UAAS,cACH,QAAM,KAIpBT,EAAA,UAAAE,IAAA,2CACEC,MAAM,yEACNS,KAAK,SACLC,QAAS/C,KAAKU,aAEdwB,EAAA,WAAAE,IAAA,2CAASK,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD3C,KAAKG,cAIZ+B,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,sBAAuB,KACvB,8BAA+BrC,KAAKK,aAGtC6B,EAAA,QAAAE,IAAA,2CAAMY,KAAK,cAGfd,EAAA,QAAAE,IAAA,2CACEC,MAAM,wCACNG,KAAK,SAAQ,YACH,SAAQ,cACN,QAEXxC,KAAK+B,UAAYE,EAAa,I","ignoreList":[]}
+{"version":3,"names":["barActionCss","BarAction","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","count","selectedLabel","clearLabel","label","handleClear","event","dsClear","emit","resolvedCount","Number","isFinite","Math","max","trunc","isVisible","render","countLabel","h","Host","key","class","hidden","undefined","role","as","variant","color","fontFeature","lineTruncation","type","onClick","name"],"sources":["src/wc/components/BarAction/BarAction.css?tag=ds-bar-action&encapsulation=scoped","src/wc/components/BarAction/BarAction.tsx"],"sourcesContent":["@import '../../styles/control-elevation.css';\n@import '../../utils/chrome-layout.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/forced-colors.css';\n@import '../../utils/text-decoration.css';\n@import '../../utils/visually-hidden.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.bar-action {\n  width: 100%;\n  min-width: 0;\n  box-sizing: border-box;\n  height: var(--dimension-size-600);\n  border-radius: var(--dimension-radius-125);\n  background: var(--color-background-bold-brand);\n  color: var(--color-foreground-on-bold-background-secondary);\n  --ds-focus-ring-color: var(--color-interaction-on-bold-background-focus);\n}\n\n.bar-action[hidden],\n.bar-action__actions:not(:has([slot='actions'])) {\n  display: none;\n}\n\n.bar-action__copy,\n.bar-action__actions {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n  gap: var(--dimension-space-050);\n}\n\n.bar-action__copy {\n  flex: 1 1 auto;\n  padding-inline: var(--dimension-space-100);\n}\n\n.bar-action__count {\n  flex: 0 1 auto;\n  min-width: 0;\n}\n\n.bar-action__separator,\n.bar-action__clear,\n.bar-action__actions {\n  flex: 0 0 auto;\n}\n\n.bar-action__actions {\n  margin-inline-start: auto;\n}\n\n.bar-action__actions slot {\n  display: contents;\n}\n\n.bar-action__clear {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: var(--dimension-size-400);\n  margin: 0;\n  padding: var(--dimension-space-025);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  background: transparent;\n  cursor: pointer;\n}\n\n@media (forced-colors: active) {\n  .bar-action {\n    --ds-control-elevation-shadow: none;\n    --ds-control-elevation-highlight: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-control-boundary);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ds-bar-action',\n  styleUrl: 'BarAction.css',\n  scoped: true,\n})\nexport class BarAction {\n  /** Number of selected items. The bar is hidden while this is below one. */\n  @Prop() count: number = 0;\n\n  /** Localized noun shown after the count. */\n  @Prop() selectedLabel: string = 'selected';\n\n  /** Visible Clear control label. */\n  @Prop() clearLabel: string = 'Clear';\n\n  /** Accessible name for the selected-set action group. */\n  @Prop() label: string = 'Selected item actions';\n\n  /** Emitted when Clear is activated. The application owns the selected identities. */\n  @Event() dsClear!: EventEmitter<MouseEvent>;\n\n  private get resolvedCount(): number {\n    if (!Number.isFinite(this.count)) return 0;\n    return Math.max(0, Math.trunc(this.count));\n  }\n\n  private get isVisible(): boolean {\n    return this.resolvedCount >= 1;\n  }\n\n  private handleClear = (event: MouseEvent) => {\n    this.dsClear.emit(event);\n  };\n\n  render() {\n    const countLabel = `${this.resolvedCount} ${this.selectedLabel}`;\n    return (\n      <Host>\n        <div\n          class=\"bar-action ds-chrome-row ds-chrome-space--md ds-control-elevation ds-control-elevation--md\"\n          hidden={!this.isVisible || undefined}\n          role=\"group\"\n          aria-label={this.label}\n        >\n          <div class=\"bar-action__copy\">\n            <ds-text\n              class=\"bar-action__count\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"inherit\"\n              fontFeature=\"tabular-nums\"\n              lineTruncation={1}\n            >\n              {countLabel}\n            </ds-text>\n            <ds-text\n              class=\"bar-action__separator\"\n              as=\"span\"\n              variant=\"text-body-medium\"\n              color=\"inherit\"\n              aria-hidden=\"true\"\n            >\n              ·\n            </ds-text>\n            <button\n              class=\"bar-action__clear ds-text-action ds-text-action--on-bold ds-focus-ring\"\n              type=\"button\"\n              onClick={this.handleClear}\n            >\n              <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n                {this.clearLabel}\n              </ds-text>\n            </button>\n          </div>\n          <div class=\"bar-action__actions\">\n            <slot name=\"actions\" />\n          </div>\n        </div>\n        <span\n          class=\"bar-action__status ds-visually-hidden\"\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {this.isVisible ? countLabel : ''}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sGAAA,MAAMA,EAAe,IAAM,80Q,MCcdC,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,6EAOUC,KAAAC,MAAgB,EAGhBD,KAAAE,cAAwB,WAGxBF,KAAAG,WAAqB,QAGrBH,KAAAI,MAAgB,wBAchBJ,KAAAK,YAAeC,IACrBN,KAAKO,QAAQC,KAAKF,EAAM,CA0D3B,CApEC,iBAAYG,GACV,IAAKC,OAAOC,SAASX,KAAKC,OAAQ,OAAO,EACzC,OAAOW,KAAKC,IAAI,EAAGD,KAAKE,MAAMd,KAAKC,O,CAGrC,aAAYc,GACV,OAAOf,KAAKS,eAAiB,C,CAO/B,MAAAO,GACE,MAAMC,EAAa,GAAGjB,KAAKS,iBAAiBT,KAAKE,gBACjD,OACEgB,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,6FACNC,QAAStB,KAAKe,WAAaQ,UAC3BC,KAAK,QAAO,aACAxB,KAAKI,OAEjBc,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,oBACNI,GAAG,OACHC,QAAQ,mBACRC,MAAM,UACNC,YAAY,eACZC,eAAgB,GAEfZ,GAEHC,EAAA,WAAAE,IAAA,2CACEC,MAAM,wBACNI,GAAG,OACHC,QAAQ,mBACRC,MAAM,UAAS,cACH,QAAM,KAIpBT,EAAA,UAAAE,IAAA,2CACEC,MAAM,yEACNS,KAAK,SACLC,QAAS/B,KAAKK,aAEda,EAAA,WAAAE,IAAA,2CAASK,GAAG,OAAOC,QAAQ,mBAAmBC,MAAM,WACjD3B,KAAKG,cAIZe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,uBACTH,EAAA,QAAAE,IAAA,2CAAMY,KAAK,cAGfd,EAAA,QAAAE,IAAA,2CACEC,MAAM,wCACNG,KAAK,SAAQ,YACH,SAAQ,cACN,QAEXxB,KAAKe,UAAYE,EAAa,I","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-DIEK54fV.js";const t=o;const p=s;export{t as DsBarNav,p as defineCustomElement};
+import{B as o,d as s}from"./p-CKVHrOEp.js";const p=o;const r=s;export{p as DsBarNav,r as defineCustomElement};
 //# sourceMappingURL=ds-bar-nav.js.map

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

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-DHuyj-9J.js";const t=o;const p=s;export{t as DsBarTitle,p as defineCustomElement};
+import{B as o,d as s}from"./p-BXN-e7vF.js";const t=o;const p=s;export{t as DsBarTitle,p as defineCustomElement};
 //# sourceMappingURL=ds-bar-title.js.map

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

@@ -1,2 +1,2 @@
-import{p as s,H as o,c as i,h as e,a as r,t}from"./index.js";import{d as a}from"./p-a6qP60zb.js";import{d}from"./p-U8JIZzI2.js";import{d as n}from"./p-NzGRAPcF.js";import{d as l}from"./p-BFfLvMZd.js";import{d as c}from"./p-JPTkZ3Ji.js";import{d as m}from"./p-Asi9h3pa.js";import{d as b}from"./p-DsJW5W3W.js";import{d as h}from"./p-BHz78C8h.js";import{d as w}from"./p-BHDkJmrC.js";import{d as f}from"./p-BhYWdbEp.js";import{d as p}from"./p-D2z2DgtX.js";import{d as k}from"./p-y4jhIkRc.js";import{d as u}from"./p-BGXqFq2C.js";import{d as g}from"./p-D4K9CE8a.js";const v=()=>`.ds-control--lg.sc-ds-bar-workflow,.ds-control--lg.sc-ds-bar-workflow-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--lg.sc-ds-bar-workflow-h,.ds-control--lg.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-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}.ds-chrome-space--sm.sc-ds-bar-workflow-h,.ds-chrome-space--sm.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-workflow-h,.ds-chrome-space--md.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-workflow-h,.ds-chrome-space--lg.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-workflow-h,.ds-chrome-row.sc-ds-bar-workflow,.ds-chrome-column.sc-ds-bar-workflow-h,.ds-chrome-column.sc-ds-bar-workflow,.ds-chrome-grid.sc-ds-bar-workflow-h,.ds-chrome-grid.sc-ds-bar-workflow{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-workflow-h,.ds-chrome-row.sc-ds-bar-workflow{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-workflow-h,.ds-chrome-column.sc-ds-bar-workflow{flex-direction:column}.ds-chrome-grid.sc-ds-bar-workflow-h,.ds-chrome-grid.sc-ds-bar-workflow{display:grid;align-items:center}.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{justify-content:space-between;height:var(--dimension-size-600);min-width:0;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;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 x=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=i(this,"dsExit",7);this.dsStepChange=i(this,"dsStepChange",7);this.dsSubmit=i(this,"dsSubmit",7);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.responsiveMode="desktop";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}`}renderSubmit(s){const o=this.submitAction;return e("ds-tooltip",{slot:s,label:o.label,side:"bottom",size:"sm"},e("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:o.label,"aria-label":o.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:o.type??"submit",isInactive:o.isInactive,isLoading:o.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)}))}renderMobile(){return e("ds-mobile-header",{class:"bar-workflow__mobile",heading:this.resolvedHeading,tone:"brand"},e("ds-tooltip",{slot:"leading",label:this.exitLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{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)})),this.previousStep?e("ds-tooltip",{slot:"trailing",label:this.previousLabel,side:"bottom",size:"sm"},e("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?this.renderSubmit("trailing"):e("ds-tooltip",{slot:"trailing",label:this.nextLabel,side:"bottom",size:"sm"},e("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})))}renderDesktop(){return e("div",{class:"bar-workflow ds-chrome-row ds-chrome-space--md"},e("div",{class:"bar-workflow__identity"},e("ds-tooltip",{label:this.exitLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{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)})),e("ds-text",{class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),e("div",{class:"bar-workflow__actions"},this.previousStep?e("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},e("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?this.renderSubmit():e("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},e("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}))))}render(){return e(r,{key:"ab3207cab1ba85b30351aa11981a95c72739cdd2"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return v()}},[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"],responsiveMode:[513,"responsive-mode"]}]);function z(){if(typeof customElements==="undefined"){return}const s=["ds-bar-workflow","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(t(s))){customElements.define(t(s),x)}break;case"ds-badge":if(!customElements.get(t(s))){a()}break;case"ds-button-filled":if(!customElements.get(t(s))){d()}break;case"ds-button-unfilled":if(!customElements.get(t(s))){n()}break;case"ds-icon":if(!customElements.get(t(s))){l()}break;case"ds-loader":if(!customElements.get(t(s))){c()}break;case"ds-menu":if(!customElements.get(t(s))){m()}break;case"ds-mobile-header":if(!customElements.get(t(s))){b()}break;case"ds-mobile-section-switcher":if(!customElements.get(t(s))){h()}break;case"ds-swatch-picker":if(!customElements.get(t(s))){w()}break;case"ds-switch":if(!customElements.get(t(s))){f()}break;case"ds-tab-group":if(!customElements.get(t(s))){p()}break;case"ds-tag":if(!customElements.get(t(s))){k()}break;case"ds-text":if(!customElements.get(t(s))){u()}break;case"ds-tooltip":if(!customElements.get(t(s))){g()}break}}))}z();const _=x;const E=z;export{_ as DsBarWorkflow,E as defineCustomElement};
+import{p as s,H as o,c as i,h as e,a as r,t}from"./index.js";import{d as a}from"./p-BUDAwJVV.js";import{d as n}from"./p-DUdOmSFR.js";import{d}from"./p-ag6Io-kL.js";import{d as l}from"./p-BFfLvMZd.js";import{d as c}from"./p-JPTkZ3Ji.js";import{d as m}from"./p-LK-jpxwq.js";import{d as b}from"./p-Bkh7scMQ.js";import{d as h}from"./p-CLVxgTme.js";import{d as w}from"./p-D123Jvp-.js";import{d as f}from"./p-CsBICYmt.js";import{d as p}from"./p-DAvh38E4.js";import{d as k}from"./p-Cg0kimXZ.js";import{d as u}from"./p-CAnnQL1F.js";import{d as g}from"./p-iMuFgSoM.js";const v=()=>`.ds-control--lg.sc-ds-bar-workflow,.ds-control--lg.sc-ds-bar-workflow-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--lg.sc-ds-bar-workflow-h,.ds-control--lg.sc-ds-bar-workflow{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-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}.ds-chrome-space--sm.sc-ds-bar-workflow-h,.ds-chrome-space--sm.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-workflow-h,.ds-chrome-space--md.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-workflow-h,.ds-chrome-space--lg.sc-ds-bar-workflow{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-workflow-h,.ds-chrome-row.sc-ds-bar-workflow,.ds-chrome-column.sc-ds-bar-workflow-h,.ds-chrome-column.sc-ds-bar-workflow,.ds-chrome-grid.sc-ds-bar-workflow-h,.ds-chrome-grid.sc-ds-bar-workflow{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-bar-workflow-h,.ds-chrome-row.sc-ds-bar-workflow{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-workflow-h,.ds-chrome-column.sc-ds-bar-workflow{flex-direction:column}.ds-chrome-grid.sc-ds-bar-workflow-h,.ds-chrome-grid.sc-ds-bar-workflow{display:grid;align-items:center}.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{justify-content:space-between;height:var(--dimension-size-600);min-width:0;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;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 x=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=i(this,"dsExit",7);this.dsStepChange=i(this,"dsStepChange",7);this.dsSubmit=i(this,"dsSubmit",7);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.responsiveMode="desktop";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}`}renderSubmit(s){const o=this.submitAction;return e("ds-tooltip",{slot:s,label:o.label,side:"bottom",size:"sm"},e("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:o.label,"aria-label":o.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:o.type??"submit",isInactive:o.isInactive,isLoading:o.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)}))}renderMobile(){return e("ds-mobile-header",{class:"bar-workflow__mobile",heading:this.resolvedHeading,tone:"brand"},e("ds-tooltip",{slot:"leading",label:this.exitLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{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)})),this.previousStep?e("ds-tooltip",{slot:"trailing",label:this.previousLabel,side:"bottom",size:"sm"},e("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?this.renderSubmit("trailing"):e("ds-tooltip",{slot:"trailing",label:this.nextLabel,side:"bottom",size:"sm"},e("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})))}renderDesktop(){return e("div",{class:"bar-workflow ds-chrome-row ds-chrome-space--md"},e("div",{class:"bar-workflow__identity"},e("ds-tooltip",{label:this.exitLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{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)})),e("ds-text",{class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),e("div",{class:"bar-workflow__actions"},this.previousStep?e("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},e("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?this.renderSubmit():e("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},e("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}))))}render(){return e(r,{key:"95172ca41cc7b71b2865cf2f0fc9975c36473f09"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return v()}},[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"],responsiveMode:[513,"responsive-mode"]}]);function _(){if(typeof customElements==="undefined"){return}const s=["ds-bar-workflow","ds-badge","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-mobile-header","ds-mobile-section-switcher","ds-swatch-picker","ds-switch","ds-tab-group","ds-tag","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(t(s))){customElements.define(t(s),x)}break;case"ds-badge":if(!customElements.get(t(s))){a()}break;case"ds-button-filled":if(!customElements.get(t(s))){n()}break;case"ds-button-unfilled":if(!customElements.get(t(s))){d()}break;case"ds-icon":if(!customElements.get(t(s))){l()}break;case"ds-loader":if(!customElements.get(t(s))){c()}break;case"ds-menu":if(!customElements.get(t(s))){m()}break;case"ds-mobile-header":if(!customElements.get(t(s))){b()}break;case"ds-mobile-section-switcher":if(!customElements.get(t(s))){h()}break;case"ds-swatch-picker":if(!customElements.get(t(s))){w()}break;case"ds-switch":if(!customElements.get(t(s))){f()}break;case"ds-tab-group":if(!customElements.get(t(s))){p()}break;case"ds-tag":if(!customElements.get(t(s))){k()}break;case"ds-text":if(!customElements.get(t(s))){u()}break;case"ds-tooltip":if(!customElements.get(t(s))){g()}break}}))}_();const z=x;const E=_;export{z as DsBarWorkflow,E as defineCustomElement};
 //# sourceMappingURL=ds-bar-workflow.js.map

package/dist/components/ds-breadcrumb.js

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

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

@@ -1,2 +1,2 @@
-import{B as o,d as s}from"./p-U8JIZzI2.js";const t=o;const p=s;export{t as DsButtonFilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-DUdOmSFR.js";const t=o;const m=s;export{t as DsButtonFilled,m 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-NzGRAPcF.js";const t=o;const c=s;export{t as DsButtonUnfilled,c as defineCustomElement};
+import{B as o,d as s}from"./p-ag6Io-kL.js";const t=o;const a=s;export{t as DsButtonUnfilled,a as defineCustomElement};
 //# sourceMappingURL=ds-button-unfilled.js.map

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

@@ -1,2 +1,2 @@
-import{p as r,H as s,c as a,h as d,a as c,t as e}from"./index.js";import{d as t}from"./p-a6qP60zb.js";import{d as o}from"./p-NzGRAPcF.js";import{d as i}from"./p-BFfLvMZd.js";import{d as n}from"./p-JPTkZ3Ji.js";import{d as h}from"./p-BGXqFq2C.js";const l=()=>`.ds-control--lg.sc-ds-card-chart,.ds-control--lg.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart,.ds-control--sm.sc-ds-card-chart-h,.ds-control--sm.sc-ds-card-chart,.ds-control--xs.sc-ds-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-chart-h,.ds-control--lg.sc-ds-card-chart{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart{--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-card-chart-h,.ds-control--sm.sc-ds-card-chart{--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-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-chart{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-chart{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-chart{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-chart,.ds-chrome-header__trailing.sc-ds-card-chart{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-chart{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-chart{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-chart{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-chart{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-chart,.ds-chrome-header__description.sc-ds-card-chart{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-chart{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-chart .ds-chrome-header__description.sc-ds-card-chart{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-chart:root,.sc-ds-card-chart-h,.ds-forced-colors-scope.sc-ds-card-chart{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-chart-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-chart-width);min-height:var(--_card-chart-min-height);max-width:100%;overflow:visible;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-chart-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-chart__header.sc-ds-card-chart{flex-shrink:0;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-chart__copy.sc-ds-card-chart{align-items:center}ds-text.card-chart__title.sc-ds-card-chart{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-chart__actions.sc-ds-card-chart{flex-shrink:0}.card-chart__actions.sc-ds-card-chart:empty{display:none}.card-chart__body.sc-ds-card-chart,.card-chart__layout.sc-ds-card-chart{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0}.card-chart__body.sc-ds-card-chart{border-radius:0 0 var(--dimension-radius-125) var(--dimension-radius-125);background-color:var(--color-background-primary)}.card-chart__layout.sc-ds-card-chart{height:100%;gap:var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-200) var(--dimension-space-200) 0     var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart>*.sc-ds-card-chart{width:100%;min-width:0;max-width:100%}.card-chart__chart.sc-ds-card-chart>ds-chart.sc-ds-card-chart{--ds-chart-container-height:100%}.card-chart__legend.sc-ds-card-chart{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-chart-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-chart-h::after{box-shadow:none}}`;const m={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const p={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const g=r(class r extends s{constructor(r){super();if(r!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick",7);this.variant="custom";this.cardWidth="md";this.showFilter=false;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 r=this.el.querySelector('ds-chart-legend[slot="legend"]');if(this.variant==="chart"&&r){r.setAttribute("highlight-on-hover","false");if("highlightOnHover"in r)r.highlightOnHover=false}}render(){const r=this.variant!=="custom"||this.hasChartSlot;return d(c,{key:"831de53d6122f5430183559dff180160dd6734d8",class:{"card-chart":true,[`card-chart--${this.variant}`]:true},style:{"--_card-chart-width":m[this.cardWidth],"--_card-chart-min-height":p[this.cardWidth]}},d("header",{key:"7dc8442e9bbde50e1c5ae28060aa4930b3b4e33d",class:"card-chart__header ds-chrome-header"},d("div",{key:"590e0b68f29fe7e1d1e67102c14f74015756f2b4",class:"card-chart__copy ds-chrome-header__copy ds-control--md"},d("ds-text",{key:"c8aa8ba1c2e10f2bd1b9f80041f56fd59f9e085e",class:"card-chart__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading)),d("div",{key:"0740c05e1f1622c65361af703e80dc77eea3261a",class:"card-chart__actions ds-chrome-header__trailing"},this.showFilter?d("ds-button-unfilled",{variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}):null,d("slot",{key:"179817d356109b5da3603838db46768e950d2499",name:"actions"}))),d("div",{key:"c3e650d2ad06c4c480e9a0d5e57bba676f3449fe",class:"card-chart__body"},r?d("div",{class:"card-chart__layout"},this.hasChartSlot?d("div",{class:{"card-chart__chart":true}},d("slot",{name:"chart"})):null,this.hasLegendSlot?d("div",{class:"card-chart__legend"},d("slot",{name:"legend"})):null,d("slot",null)):d("slot",null)))}get el(){return this}static get style(){return l()}},[262,"ds-card-chart",{heading:[1],variant:[1],cardWidth:[1,"card-width"],showFilter:[4,"show-filter"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function f(){if(typeof customElements==="undefined"){return}const r=["ds-card-chart","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];r.forEach((r=>{switch(r){case"ds-card-chart":if(!customElements.get(e(r))){customElements.define(e(r),g)}break;case"ds-badge":if(!customElements.get(e(r))){t()}break;case"ds-button-unfilled":if(!customElements.get(e(r))){o()}break;case"ds-icon":if(!customElements.get(e(r))){i()}break;case"ds-loader":if(!customElements.get(e(r))){n()}break;case"ds-text":if(!customElements.get(e(r))){h()}break}}))}f();const v=g;const b=f;export{v as DsCardChart,b as defineCustomElement};
+import{p as r,H as s,c as a,h as d,a as c,t as e}from"./index.js";import{d as t}from"./p-BUDAwJVV.js";import{d as o}from"./p-ag6Io-kL.js";import{d as i}from"./p-BFfLvMZd.js";import{d as n}from"./p-JPTkZ3Ji.js";import{d as h}from"./p-CAnnQL1F.js";import{d as l}from"./p-iMuFgSoM.js";const m=()=>`.ds-control--lg.sc-ds-card-chart,.ds-control--lg.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart,.ds-control--sm.sc-ds-card-chart-h,.ds-control--sm.sc-ds-card-chart,.ds-control--xs.sc-ds-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-chart-h,.ds-control--lg.sc-ds-card-chart{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart{--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-card-chart-h,.ds-control--sm.sc-ds-card-chart{--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-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-chart{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-chart{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-chart{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-chart,.ds-chrome-header__trailing.sc-ds-card-chart{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-chart{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-chart{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-chart{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-chart{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-chart,.ds-chrome-header__description.sc-ds-card-chart{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-chart{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-chart .ds-chrome-header__description.sc-ds-card-chart{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-chart:root,.sc-ds-card-chart-h,.ds-forced-colors-scope.sc-ds-card-chart{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-chart-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-chart-width);min-height:var(--_card-chart-min-height);max-width:100%;overflow:visible;border:none;border-radius:var(--dimension-radius-125);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-chart-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-chart__header.sc-ds-card-chart{flex-shrink:0;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-chart__copy.sc-ds-card-chart{align-items:center}ds-text.card-chart__title.sc-ds-card-chart{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-chart__actions.sc-ds-card-chart{flex-shrink:0}.card-chart__actions.sc-ds-card-chart:empty{display:none}.card-chart__body.sc-ds-card-chart,.card-chart__layout.sc-ds-card-chart{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0}.card-chart__body.sc-ds-card-chart{border-radius:0 0 var(--dimension-radius-125) var(--dimension-radius-125);background-color:var(--color-background-primary)}.card-chart__layout.sc-ds-card-chart{height:100%;gap:var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-200) var(--dimension-space-200) 0     var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart>*.sc-ds-card-chart{width:100%;min-width:0;max-width:100%}.card-chart__chart.sc-ds-card-chart>ds-chart.sc-ds-card-chart{--ds-chart-container-height:100%}.card-chart__legend.sc-ds-card-chart{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-chart-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-chart-h::after{box-shadow:none}}`;const p={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const g={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const f=r(class r extends s{constructor(r){super();if(r!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick",7);this.variant="custom";this.cardWidth="md";this.showFilter=false;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 r=this.el.querySelector('ds-chart-legend[slot="legend"]');if(this.variant==="chart"&&r){r.setAttribute("highlight-on-hover","false");if("highlightOnHover"in r)r.highlightOnHover=false}}render(){const r=this.variant!=="custom"||this.hasChartSlot;return d(c,{key:"831de53d6122f5430183559dff180160dd6734d8",class:{"card-chart":true,[`card-chart--${this.variant}`]:true},style:{"--_card-chart-width":p[this.cardWidth],"--_card-chart-min-height":g[this.cardWidth]}},d("header",{key:"7dc8442e9bbde50e1c5ae28060aa4930b3b4e33d",class:"card-chart__header ds-chrome-header"},d("div",{key:"590e0b68f29fe7e1d1e67102c14f74015756f2b4",class:"card-chart__copy ds-chrome-header__copy ds-control--md"},d("ds-text",{key:"c8aa8ba1c2e10f2bd1b9f80041f56fd59f9e085e",class:"card-chart__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading)),d("div",{key:"0740c05e1f1622c65361af703e80dc77eea3261a",class:"card-chart__actions ds-chrome-header__trailing"},this.showFilter?d("ds-button-unfilled",{variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}):null,d("slot",{key:"179817d356109b5da3603838db46768e950d2499",name:"actions"}))),d("div",{key:"c3e650d2ad06c4c480e9a0d5e57bba676f3449fe",class:"card-chart__body"},r?d("div",{class:"card-chart__layout"},this.hasChartSlot?d("div",{class:{"card-chart__chart":true}},d("slot",{name:"chart"})):null,this.hasLegendSlot?d("div",{class:"card-chart__legend"},d("slot",{name:"legend"})):null,d("slot",null)):d("slot",null)))}get el(){return this}static get style(){return m()}},[262,"ds-card-chart",{heading:[1],variant:[1],cardWidth:[1,"card-width"],showFilter:[4,"show-filter"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function v(){if(typeof customElements==="undefined"){return}const r=["ds-card-chart","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];r.forEach((r=>{switch(r){case"ds-card-chart":if(!customElements.get(e(r))){customElements.define(e(r),f)}break;case"ds-badge":if(!customElements.get(e(r))){t()}break;case"ds-button-unfilled":if(!customElements.get(e(r))){o()}break;case"ds-icon":if(!customElements.get(e(r))){i()}break;case"ds-loader":if(!customElements.get(e(r))){n()}break;case"ds-text":if(!customElements.get(e(r))){h()}break;case"ds-tooltip":if(!customElements.get(e(r))){l()}break}}))}v();const b=f;const _=v;export{b as DsCardChart,_ as defineCustomElement};
 //# sourceMappingURL=ds-card-chart.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["cardChartCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","showFilter","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","usesChartLayout","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","name"],"sources":["src/wc/components/CardChart/CardChart.css?tag=ds-card-chart&encapsulation=scoped","src/wc/components/CardChart/CardChart.tsx"],"sourcesContent":["@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-chart-width);\n  min-height: var(--_card-chart-min-height);\n  max-width: 100%;\n  overflow: visible;\n  border: none;\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-chart__header {\n  flex-shrink: 0;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.card-chart__copy {\n  align-items: center;\n}\n\nds-text.card-chart__title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-chart__actions {\n  flex-shrink: 0;\n}\n\n.card-chart__actions:empty {\n  display: none;\n}\n\n.card-chart__body,\n.card-chart__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-chart__body {\n  border-radius: 0 0 var(--dimension-radius-125) var(--dimension-radius-125);\n  background-color: var(--color-background-primary);\n}\n\n.card-chart__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-chart__chart {\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-200) var(--dimension-space-200) 0\n    var(--dimension-space-200);\n}\n\n.card-chart__chart > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-chart__chart > ds-chart {\n  --ds-chart-container-height: 100%;\n}\n\n.card-chart__legend {\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\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type CardChartWidth = 'sm' | 'md' | 'lg';\nexport type CardChartVariant = 'custom' | 'chart';\n\ntype LegendSlot = HTMLElement & {\n  activeLabel?: string | null;\n  highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardChartWidth, 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<CardChartWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Standard chart card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n  tag: 'ds-card-chart',\n  styleUrl: 'CardChart.css',\n  scoped: true,\n})\nexport class CardChart {\n  @Element() el!: HTMLElement;\n\n  /** Chart heading shown in the card header. */\n  @Prop() heading!: string;\n  /** Chart composition behavior. */\n  @Prop() variant: CardChartVariant = 'custom';\n  /** Width token with the matching chart-card min-height. */\n  @Prop() cardWidth: CardChartWidth = 'md';\n  /** Renders the standard filter action before custom actions. */\n  @Prop() showFilter: boolean = false;\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the standard 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 LegendSlot | null;\n    if (this.variant === 'chart' && legend) {\n      legend.setAttribute('highlight-on-hover', 'false');\n      if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n    }\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n    return (\n      <Host\n        class={{\n          'card-chart': true,\n          [`card-chart--${this.variant}`]: true,\n        }}\n        style={{\n          '--_card-chart-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-chart-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-chart__header ds-chrome-header\">\n          {/* eslint-disable-next-line local/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n          <div class=\"card-chart__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-chart__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"primary\"\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          <div class=\"card-chart__actions ds-chrome-header__trailing\">\n            {this.showFilter ? (\n              <ds-button-unfilled\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Filters\"\n                aria-label={this.filterLabel}\n                onDsClick={this.handleFilterClick}\n              />\n            ) : null}\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-chart__body\">\n          {usesChartLayout ? (\n            <div class=\"card-chart__layout\">\n              {this.hasChartSlot ? (\n                <div\n                  class={{\n                    'card-chart__chart': true,\n                  }}\n                >\n                  <slot name=\"chart\" />\n                </div>\n              ) : null}\n              {this.hasLegendSlot ? (\n                <div class=\"card-chart__legend\">\n                  <slot name=\"legend\" />\n                </div>\n              ) : null}\n              <slot />\n            </div>\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sPAAA,MAAMA,EAAe,IAAM,o8KCmB3B,MAAMC,EAAkD,CACtDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAmD,CACvDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mC,MAYOE,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,yFAWUC,KAAAC,QAA4B,SAE5BD,KAAAE,UAA4B,KAE5BF,KAAAG,WAAsB,MACtBH,KAAAI,YAAsB,SAKbJ,KAAAK,aAAe,MACfL,KAAAM,cAAgB,MAiBzBN,KAAAO,kBAAoB,KAC1BP,KAAKQ,cAAcC,MAAM,CAoE5B,CApFC,mBAAAC,GACEV,KAAKK,eAAiBL,KAAKW,GAAGC,cAAc,kBAC5CZ,KAAKM,gBAAkBN,KAAKW,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASd,KAAKW,GAAGC,cACrB,kCAEF,GAAIZ,KAAKC,UAAY,SAAWa,EAAQ,CACtCA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,EAQhE,MAAAC,GACE,MAAMC,EAAkBlB,KAAKC,UAAY,UAAYD,KAAKK,aAC1D,OACEc,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,CAAC,eAAetB,KAAKC,WAAY,MAEnCsB,MAAO,CACL,sBAAuBjC,EAAgBU,KAAKE,WAC5C,2BAA4BR,EAAiBM,KAAKE,aAGpDiB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,uCAEZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0DACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,8CACNrB,QAAQ,mBACRuB,SAAQ,KACRC,MAAM,UACNC,GAAG,MAEF1B,KAAK2B,UAGVR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kDACRtB,KAAKG,WACJgB,EAAA,sBACElB,QAAQ,OACR2B,KAAK,SACLC,KAAK,UAAS,aACF7B,KAAKI,YACjB0B,UAAW9B,KAAKO,oBAEhB,KACJY,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAGfZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRJ,EACCC,EAAA,OAAKG,MAAM,sBACRtB,KAAKK,aACJc,EAAA,OACEG,MAAO,CACL,oBAAqB,OAGvBH,EAAA,QAAMY,KAAK,WAEX,KACH/B,KAAKM,cACJa,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMY,KAAK,YAEX,KACJZ,EAAA,cAGFA,EAAA,c","ignoreList":[]}
+{"version":3,"names":["cardChartCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","showFilter","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","usesChartLayout","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","name"],"sources":["src/wc/components/CardChart/CardChart.css?tag=ds-card-chart&encapsulation=scoped","src/wc/components/CardChart/CardChart.tsx"],"sourcesContent":["@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-chart-width);\n  min-height: var(--_card-chart-min-height);\n  max-width: 100%;\n  overflow: visible;\n  border: none;\n  border-radius: var(--dimension-radius-125);\n  background-color: var(--color-background-primary);\n  box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 4;\n  border-radius: inherit;\n  box-shadow: var(--effect-highlight-elevated-sm);\n  pointer-events: none;\n}\n\n.card-chart__header {\n  flex-shrink: 0;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.card-chart__copy {\n  align-items: center;\n}\n\nds-text.card-chart__title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-chart__actions {\n  flex-shrink: 0;\n}\n\n.card-chart__actions:empty {\n  display: none;\n}\n\n.card-chart__body,\n.card-chart__layout {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  box-sizing: border-box;\n  min-height: 0;\n}\n\n.card-chart__body {\n  border-radius: 0 0 var(--dimension-radius-125) var(--dimension-radius-125);\n  background-color: var(--color-background-primary);\n}\n\n.card-chart__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-chart__chart {\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-200) var(--dimension-space-200) 0\n    var(--dimension-space-200);\n}\n\n.card-chart__chart > * {\n  width: 100%;\n  min-width: 0;\n  max-width: 100%;\n}\n\n.card-chart__chart > ds-chart {\n  --ds-chart-container-height: 100%;\n}\n\n.card-chart__legend {\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\n@media (forced-colors: active) {\n  :host {\n    box-shadow: none;\n    outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n    outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n  }\n\n  :host::after {\n    box-shadow: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type CardChartWidth = 'sm' | 'md' | 'lg';\nexport type CardChartVariant = 'custom' | 'chart';\n\ntype LegendSlot = HTMLElement & {\n  activeLabel?: string | null;\n  highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardChartWidth, 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<CardChartWidth, string> = {\n  sm: 'var(--dimension-card-height-sm)',\n  md: 'var(--dimension-card-height-md)',\n  lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Standard chart card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n  tag: 'ds-card-chart',\n  styleUrl: 'CardChart.css',\n  scoped: true,\n})\nexport class CardChart {\n  @Element() el!: HTMLElement;\n\n  /** Chart heading shown in the card header. */\n  @Prop() heading!: string;\n  /** Chart composition behavior. */\n  @Prop() variant: CardChartVariant = 'custom';\n  /** Width token with the matching chart-card min-height. */\n  @Prop() cardWidth: CardChartWidth = 'md';\n  /** Renders the standard filter action before custom actions. */\n  @Prop() showFilter: boolean = false;\n  @Prop() filterLabel: string = 'Filter';\n\n  /** Emits when the standard 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 LegendSlot | null;\n    if (this.variant === 'chart' && legend) {\n      legend.setAttribute('highlight-on-hover', 'false');\n      if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n    }\n  }\n\n  private handleFilterClick = () => {\n    this.dsFilterClick.emit();\n  };\n\n  render() {\n    const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n    return (\n      <Host\n        class={{\n          'card-chart': true,\n          [`card-chart--${this.variant}`]: true,\n        }}\n        style={{\n          '--_card-chart-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-chart-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-chart__header ds-chrome-header\">\n          {/* eslint-disable-next-line local/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n          <div class=\"card-chart__copy ds-chrome-header__copy ds-control--md\">\n            <ds-text\n              class=\"card-chart__title ds-chrome-header__heading\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"primary\"\n              as=\"h2\"\n            >\n              {this.heading}\n            </ds-text>\n          </div>\n          <div class=\"card-chart__actions ds-chrome-header__trailing\">\n            {this.showFilter ? (\n              <ds-button-unfilled\n                variant=\"icon\"\n                type=\"button\"\n                icon=\"Filters\"\n                aria-label={this.filterLabel}\n                onDsClick={this.handleFilterClick}\n              />\n            ) : null}\n            <slot name=\"actions\" />\n          </div>\n        </header>\n        <div class=\"card-chart__body\">\n          {usesChartLayout ? (\n            <div class=\"card-chart__layout\">\n              {this.hasChartSlot ? (\n                <div\n                  class={{\n                    'card-chart__chart': true,\n                  }}\n                >\n                  <slot name=\"chart\" />\n                </div>\n              ) : null}\n              {this.hasLegendSlot ? (\n                <div class=\"card-chart__legend\">\n                  <slot name=\"legend\" />\n                </div>\n              ) : null}\n              <slot />\n            </div>\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0RAAA,MAAMA,EAAe,IAAM,o8KCmB3B,MAAMC,EAAkD,CACtDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAmD,CACvDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mC,MAYOE,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,yFAWUC,KAAAC,QAA4B,SAE5BD,KAAAE,UAA4B,KAE5BF,KAAAG,WAAsB,MACtBH,KAAAI,YAAsB,SAKbJ,KAAAK,aAAe,MACfL,KAAAM,cAAgB,MAiBzBN,KAAAO,kBAAoB,KAC1BP,KAAKQ,cAAcC,MAAM,CAoE5B,CApFC,mBAAAC,GACEV,KAAKK,eAAiBL,KAAKW,GAAGC,cAAc,kBAC5CZ,KAAKM,gBAAkBN,KAAKW,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASd,KAAKW,GAAGC,cACrB,kCAEF,GAAIZ,KAAKC,UAAY,SAAWa,EAAQ,CACtCA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,EAQhE,MAAAC,GACE,MAAMC,EAAkBlB,KAAKC,UAAY,UAAYD,KAAKK,aAC1D,OACEc,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,CAAC,eAAetB,KAAKC,WAAY,MAEnCsB,MAAO,CACL,sBAAuBjC,EAAgBU,KAAKE,WAC5C,2BAA4BR,EAAiBM,KAAKE,aAGpDiB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,uCAEZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0DACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,8CACNrB,QAAQ,mBACRuB,SAAQ,KACRC,MAAM,UACNC,GAAG,MAEF1B,KAAK2B,UAGVR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kDACRtB,KAAKG,WACJgB,EAAA,sBACElB,QAAQ,OACR2B,KAAK,SACLC,KAAK,UAAS,aACF7B,KAAKI,YACjB0B,UAAW9B,KAAKO,oBAEhB,KACJY,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAGfZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRJ,EACCC,EAAA,OAAKG,MAAM,sBACRtB,KAAKK,aACJc,EAAA,OACEG,MAAO,CACL,oBAAqB,OAGvBH,EAAA,QAAMY,KAAK,WAEX,KACH/B,KAAKM,cACJa,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMY,KAAK,YAEX,KACJZ,EAAA,cAGFA,EAAA,c","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as i,f as o,h as s,a as d,t as c}from"./index.js";import{d as a}from"./p-Dg9qiMDa.js";import{d as t}from"./p-BGXqFq2C.js";import{d as n}from"./p-D4K9CE8a.js";import{r as v}from"./p-BMc0DE59.js";import{T as l}from"./p-DFQ9mcbK.js";function f(e){const r=Math.max(1,Math.floor(e.cellCount));const i=Math.max(1,e.minCellWidth);const o=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/i));if(o>=r)return r;for(let e=o;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/o);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const i=Math.max(e.expandedHeight,r);const o=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,i-r);const d=s*o;return{active:o>0&&s>0,expandedHeight:i,offset:d,visibleHeight:i-d}}function h(e){const r=typeof e==="number"?e:Number(e);if(!Number.isFinite(r)||r<0||r>100)return undefined;if(r<=50)return"fair";if(r<=80)return"good";return"excellent"}function u(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function g(e,r,i){for(let o=1;o<=e.length;o+=1){const s=((r+i*o)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const m=()=>`@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before,.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before{z-index:1}.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-overview-h,.ds-interaction-fill--bordered.sc-ds-card-overview{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-overview-h,.ds-interaction-fill--selected.sc-ds-card-overview{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-overview-h::after,.ds-interaction-fill--grouped.sc-ds-card-overview::after,.ds-interaction-fill--grouped.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-overview-h,.ds-interaction-fill--grouped.sc-ds-card-overview{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-card-overview-h>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill.sc-ds-card-overview>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill__content.sc-ds-card-overview{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-overview-h,.ds-interaction-fill--on-faint.sc-ds-card-overview{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-overview-h,.ds-interaction-fill--on-medium.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-overview-h,.ds-interaction-fill--on-bold.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-overview-h,.ds-interaction-fill--on-strong.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-overview-h,.ds-interaction-fill--on-translucent.sc-ds-card-overview{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-overview-h,.ds-interaction-fill--on-inverted.sc-ds-card-overview{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-overview-h,.ds-interaction-fill--on-media.sc-ds-card-overview{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-overview-h,.ds-interaction-fill--on-always-dark.sc-ds-card-overview{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-control--lg.sc-ds-card-overview,.ds-control--lg.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview,.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview,.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--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-card-overview-h,.ds-control--sm.sc-ds-card-overview{--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-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-card-overview{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-card-overview{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-card-overview{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-card-overview{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-card-overview{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-elevation.sc-ds-card-overview-h,.ds-control-elevation.sc-ds-card-overview{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-overview-h::after,.ds-control-elevation.sc-ds-card-overview::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-overview-h,.ds-control-elevation--sm.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-overview-h,.ds-control-elevation--md.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-overview-h,.ds-control-elevation--floating.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-overview{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-overview,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:none;transition:none}}.sc-ds-card-overview-h{display:block;box-sizing:border-box;container-type:inline-size;-webkit-user-select:none;user-select:none;--ds-card-overview-metric-min:calc(var(--dimension-size-400) * 5);--ds-card-overview-divider-width:var(--dimension-stroke-width-012);--ds-card-overview-divider-color:var(--color-always-dark-border-tertiary);color:var(--color-always-dark-foreground-primary)}.card-overview__surface.sc-ds-card-overview{width:100%;min-width:0;box-sizing:border-box;border-radius:var(--dimension-radius-125);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow-anchor:none}.card-overview__clip.sc-ds-card-overview{height:100%;min-width:0;border-radius:inherit;background:inherit;overflow:hidden}.card-overview--scroll-collapsing.sc-ds-card-overview-h{height:var(--ds-card-overview-expanded-height);pointer-events:none}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview{height:var(--ds-card-overview-visible-height);pointer-events:auto;will-change:height}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{transform:translateY(calc(-1 * var(--ds-card-overview-content-offset)));will-change:transform}.card-overview__layout.sc-ds-card-overview{display:flex;flex-direction:column;min-width:0}.card-overview__summary.sc-ds-card-overview{position:relative;z-index:1;flex:0 0 auto;min-width:0;background:var(--color-always-dark-background)}.card-overview__header.sc-ds-card-overview{display:flex;position:relative;align-items:center;gap:0;width:100%;height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box}.card-overview__header.sc-ds-card-overview::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--ds-card-overview-divider-width);background:var(--ds-card-overview-divider-color);pointer-events:none}.card-overview__period.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;gap:0;min-width:0;min-height:var(--ds-control-height);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview,.card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview__period-current.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center}.card-overview__period-fixed.sc-ds-card-overview{flex:0 1 auto;min-width:0}.card-overview__period-comparison.sc-ds-card-overview{flex:0 0 auto}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;min-width:0}.card-overview__body.sc-ds-card-overview{display:flex;position:relative;z-index:0;flex-direction:column;min-width:0;transform:translateY(0)}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat(     var(--ds-card-overview-grid-columns, auto-fit),     minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)   );align-content:stretch;min-width:0;overflow:clip}.card-overview__score.sc-ds-card-overview,.card-overview__metric.sc-ds-card-overview{display:flex;min-width:0;padding:var(--dimension-space-100);box-shadow:var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),     0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview,.card-overview__metric-action.sc-ds-card-overview{display:flex;flex:1 1 auto;min-width:0;padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview{align-items:center;justify-content:flex-start;padding-inline-start:var(--dimension-space-100);gap:var(--dimension-space-100)}.card-overview__score-badge.sc-ds-card-overview{display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin-block:calc(-1 * var(--dimension-space-050));padding:var(--dimension-space-050);border-radius:var(--dimension-radius-025);background:var(--color-always-dark-interaction-active-brand);color:var(--color-always-dark-foreground-primary)}.card-overview__score-badge--fair.sc-ds-card-overview{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.card-overview__score-badge--good.sc-ds-card-overview{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.card-overview__score-badge--excellent.sc-ds-card-overview{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--dimension-space-050);min-width:0}.card-overview__score-label-spacer.sc-ds-card-overview{visibility:hidden}.card-overview__score-value.sc-ds-card-overview,.card-overview__score-badge.sc-ds-card-overview ds-skeleton.sc-ds-card-overview{flex:0 0 auto;margin-block:calc(-1 * var(--dimension-space-100))}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;padding-inline-start:var(--dimension-space-075);border:var(--ds-card-overview-divider-width) solid     var(--color-always-dark-border-tertiary);background:transparent;color:var(--color-always-dark-foreground-negative);text-align:center}.card-overview__metric-action.sc-ds-card-overview{flex-direction:column;justify-content:center;gap:var(--dimension-space-050)}.card-overview__metric-action[role='button'].sc-ds-card-overview{cursor:default}.card-overview__metric-content.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:var(--dimension-space-050);min-width:0}.card-overview__metric-label.sc-ds-card-overview{min-width:0}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__metrics.sc-ds-card-overview{grid-template-columns:minmax(0, 1fr)}.card-overview--compact.sc-ds-card-overview-h{height:var(--dimension-size-600);min-height:var(--dimension-size-600)}.card-overview--compact.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__clip.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{width:100%;height:100%}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview::after{display:none}@media (forced-colors: active){.card-overview__header.sc-ds-card-overview::after{background:var(--ds-forced-color-content)}.card-overview__score-badge.sc-ds-card-overview,.card-overview__score-content--error.sc-ds-card-overview{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const p="200px";const b=5;const _=7;const x={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const y="var(--color-always-dark-foreground-primary)";const k="var(--color-always-dark-foreground-secondary)";const z=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect",7);this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=p;this.isLoading=false;this.overviewLabel="Overview";this.scrollCollapseProgress=0;this.focusedMetricIndex=0;this.expandedHeight=0;this.layoutResizeObserver=null;this.handleMetricKeyDown=(e,r)=>{switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault();this.moveFocus(r,1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault();this.moveFocus(r,-1);break}}}componentDidLoad(){this.observeLayout()}componentDidRender(){if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,_)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||b}get resolvedScrollCollapseProgress(){if(this.variant==="compact"||!Number.isFinite(this.scrollCollapseProgress))return 0;return Math.min(1,Math.max(0,this.scrollCollapseProgress))}get scrollCollapseGeometry(){const e=v(l.size600,48);return w({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!e)return;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const r=e[0]?.contentRect;if(r)this.updateLayoutGeometry(r.width,r.height)}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!i)return;const s=e===undefined||r===undefined?i.getBoundingClientRect():null;const d=e??s?.width??0;const c=r??s?.height??0;let a=false;if(c>0&&Math.abs(c-this.expandedHeight)>=.5){this.expandedHeight=c;a=true}const t=f({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:v(this.metricMinWidth,p)});if(t!==this.gridColumns){this.gridColumns=t;a=true}if(this.gridColumns){this.el.style.setProperty("--ds-card-overview-grid-columns",String(this.gridColumns))}else{this.el.style.removeProperty("--ds-card-overview-grid-columns")}if(a)o(this)}get rovingIndex(){return u(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.visibleMetrics;const o=g(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric-action");s[o]?.focus()}bar(e,r,i){return s("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r){if(!e)return null;return s("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,color:x[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("div",{class:"card-overview__score-badge"},this.bar("text-display-small","40px")),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label-spacer"),this.bar("text-body-medium","28px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return s("div",{class:"card-overview__score",part:"score"},s("ds-text",{as:"span",class:"card-overview__score-content card-overview__score-content--error",variant:"text-body-medium",color:"inherit",role:"alert"},e))}const r=this.score;if(!r)return null;const i=r.level??h(r.value);return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("div",{class:{"card-overview__score-badge":true,[`card-overview__score-badge--${i}`]:Boolean(i)}},s("ds-text",{as:"span",class:"card-overview__score-value ds-control-label-box",variant:"text-display-small",emphasis:true,color:"inherit",fontFeature:"tabular-nums"},r.value)),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label-spacer ds-control-label-box",variant:"text-body-small",color:k,"aria-hidden":"true"}," "),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const i=!e.isInactive;const o=s("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:k},e.label);return s("div",{class:"card-overview__metric",part:"metric"},s("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},role:i?"button":undefined,tabIndex:i&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(i)this.focusedMetricIndex=r}},s("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?s("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},o):o,s("div",{class:"card-overview__metric-figure"},s("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:y,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))))}renderMetrics(){if(this.isLoading){return[this.renderScore(),...Array.from({length:this.loadingMetricCount},((e,r)=>s("div",{class:"card-overview__metric",key:`loading-${r}`},s("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},s("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),s("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","40px"),this.bar("text-body-medium","28px")))))))]}return[this.renderScore(),...this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))]}render(){const e=this.variant==="compact";const r=this.scrollCollapseGeometry;const i={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){i["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){i["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;i["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;i["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(d,{key:"a5bf021e76a037a7eb8fe37220643a053d303c8f",class:{"card-overview":true,"card-overview--compact":e,"card-overview--stacked":!e&&this.layout==="stacked","card-overview--scroll-collapsing":r.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:i},s("div",{key:"e3c7efc5742b042b4727ea79edfb022d8cb53bb8",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"65d510949325de762483fd077466431020377af2",class:"card-overview__clip"},s("div",{key:"7d453a8b7356d52a9568d6318b4c9c7b3663f24f",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"813f80cd89fa34986ea5ab670778c42661236626",class:"card-overview__summary"},s("div",{key:"fbe3c451f81aabe9ee8d12ad593c109cd33e7a0b",class:"card-overview__header ds-control--md"},s("div",{key:"b7b656cb80ad6414ad07a8c28efe4ec25e48d4eb",class:"card-overview__period"},s("div",{key:"d465cd04e3d4e0fd511c3e39b38d1fd72c3809bf",class:"card-overview__period-current"},s("slot",{key:"e1837624837239312b24d9053b171a7d90a2c62d",name:"period"},this.periodLabel&&s("div",{key:"f57d0f2943b1cb4145da62cec801334bc707909f",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"b50a5d745575ab115bf3219db3005914e9b628c2",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"9728c177a3c458f41a0bc0d7678205a8e176d496",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"753b4627fd18d8837038e65234ffb06dd94e8589",class:"card-overview__filter"},s("slot",{key:"59aadc4188c85fab63a9700887eb1095858e4cca",name:"filter"})))),!e&&s("div",{key:"b1d92dfb6793d265883d2485d07946f594a8e16d",class:"card-overview__body"},s("div",{key:"4516adf23f92a7d7d42b8e0f9615ee6a061386f9",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"8e26a35b66a598ae6ba68712443463e0d2983dc8",name:"footer"}))))))}get el(){return this}static get style(){return m()}},[262,"ds-card-overview",{variant:[1],layout:[1],score:[16],periodLabel:[1,"period-label"],comparisonLabel:[1,"comparison-label"],metrics:[16],metricMinWidth:[1,"metric-min-width"],isLoading:[4,"is-loading"],scoreErrorMessage:[1,"score-error-message"],overviewLabel:[1,"overview-label"],scrollCollapseProgress:[2,"scroll-collapse-progress"],focusedMetricIndex:[32],expandedHeight:[32],gridColumns:[32]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(c(e))){customElements.define(c(e),z)}break;case"ds-skeleton":if(!customElements.get(c(e))){a()}break;case"ds-text":if(!customElements.get(c(e))){t()}break;case"ds-tooltip":if(!customElements.get(c(e))){n()}break}}))}M();const C=z;const j=M;export{C as DsCardOverview,j as defineCustomElement};
+import{p as e,H as r,c as i,f as o,h as s,a as d,t as c}from"./index.js";import{d as a}from"./p-BHVOiWz5.js";import{d as t}from"./p-CAnnQL1F.js";import{d as n}from"./p-iMuFgSoM.js";import{r as v}from"./p-BMc0DE59.js";import{T as l}from"./p-DFQ9mcbK.js";function f(e){const r=Math.max(1,Math.floor(e.cellCount));const i=Math.max(1,e.minCellWidth);const o=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/i));if(o>=r)return r;for(let e=o;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/o);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const i=Math.max(e.expandedHeight,r);const o=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,i-r);const d=s*o;return{active:o>0&&s>0,expandedHeight:i,offset:d,visibleHeight:i-d}}function h(e){const r=typeof e==="number"?e:Number(e);if(!Number.isFinite(r)||r<0||r>100)return undefined;if(r<=50)return"fair";if(r<=80)return"good";return"excellent"}function u(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function g(e,r,i){for(let o=1;o<=e.length;o+=1){const s=((r+i*o)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const m=()=>`@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before,.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before{z-index:1}.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-overview-h,.ds-interaction-fill--bordered.sc-ds-card-overview{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-overview-h,.ds-interaction-fill--selected.sc-ds-card-overview{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-overview-h::after,.ds-interaction-fill--grouped.sc-ds-card-overview::after,.ds-interaction-fill--grouped.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-overview-h,.ds-interaction-fill--grouped.sc-ds-card-overview{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-card-overview-h>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill.sc-ds-card-overview>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill__content.sc-ds-card-overview{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-overview-h,.ds-interaction-fill--on-faint.sc-ds-card-overview{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-overview-h,.ds-interaction-fill--on-medium.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-overview-h,.ds-interaction-fill--on-bold.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-overview-h,.ds-interaction-fill--on-strong.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-overview-h,.ds-interaction-fill--on-translucent.sc-ds-card-overview{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-overview-h,.ds-interaction-fill--on-inverted.sc-ds-card-overview{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-overview-h,.ds-interaction-fill--on-media.sc-ds-card-overview{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-overview-h,.ds-interaction-fill--on-always-dark.sc-ds-card-overview{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.ds-control--lg.sc-ds-card-overview,.ds-control--lg.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview,.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview,.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--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-card-overview-h,.ds-control--sm.sc-ds-card-overview{--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-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-card-overview{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-card-overview{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-card-overview{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-card-overview{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-card-overview{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-elevation.sc-ds-card-overview-h,.ds-control-elevation.sc-ds-card-overview{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-overview-h::after,.ds-control-elevation.sc-ds-card-overview::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-overview-h,.ds-control-elevation--sm.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-overview-h,.ds-control-elevation--md.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-overview-h,.ds-control-elevation--floating.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-overview{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-overview,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:none;transition:none}}.sc-ds-card-overview-h{display:block;box-sizing:border-box;container-type:inline-size;-webkit-user-select:none;user-select:none;--ds-card-overview-metric-min:calc(var(--dimension-size-400) * 5);--ds-card-overview-divider-width:var(--dimension-stroke-width-012);--ds-card-overview-divider-color:var(--color-always-dark-border-tertiary);color:var(--color-always-dark-foreground-primary)}.card-overview__surface.sc-ds-card-overview{width:100%;min-width:0;box-sizing:border-box;border-radius:var(--dimension-radius-125);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow-anchor:none}.card-overview__clip.sc-ds-card-overview{height:100%;min-width:0;border-radius:inherit;background:inherit;overflow:hidden}.card-overview--scroll-collapsing.sc-ds-card-overview-h{height:var(--ds-card-overview-expanded-height);pointer-events:none}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview{height:var(--ds-card-overview-visible-height);pointer-events:auto;will-change:height}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{transform:translateY(calc(-1 * var(--ds-card-overview-content-offset)));will-change:transform}.card-overview__layout.sc-ds-card-overview{display:flex;flex-direction:column;min-width:0}.card-overview__summary.sc-ds-card-overview{position:relative;z-index:1;flex:0 0 auto;min-width:0;background:var(--color-always-dark-background)}.card-overview__header.sc-ds-card-overview{display:flex;position:relative;align-items:center;gap:0;width:100%;height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box}.card-overview__header.sc-ds-card-overview::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--ds-card-overview-divider-width);background:var(--ds-card-overview-divider-color);pointer-events:none}.card-overview__period.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;gap:0;min-width:0;min-height:var(--ds-control-height);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview,.card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview__period-current.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center}.card-overview__period-fixed.sc-ds-card-overview{flex:0 1 auto;min-width:0}.card-overview__period-comparison.sc-ds-card-overview{flex:0 0 auto}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;min-width:0}.card-overview__body.sc-ds-card-overview{display:flex;position:relative;z-index:0;flex-direction:column;min-width:0;transform:translateY(0)}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat(     var(--ds-card-overview-grid-columns, auto-fit),     minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)   );align-content:stretch;min-width:0;overflow:clip}.card-overview__score.sc-ds-card-overview,.card-overview__metric.sc-ds-card-overview{display:flex;min-width:0;padding:var(--dimension-space-100);box-shadow:var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color),     0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview,.card-overview__metric-action.sc-ds-card-overview{display:flex;flex:1 1 auto;min-width:0;padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview{align-items:center;justify-content:flex-start;padding-inline-start:var(--dimension-space-100);gap:var(--dimension-space-100)}.card-overview__score-badge.sc-ds-card-overview{display:flex;flex:0 0 auto;align-items:center;justify-content:center;margin-block:calc(-1 * var(--dimension-space-050));padding:var(--dimension-space-050);border-radius:var(--dimension-radius-025);background:var(--color-always-dark-interaction-active-brand);color:var(--color-always-dark-foreground-primary)}.card-overview__score-badge--fair.sc-ds-card-overview{background:var(--color-safety-score-background-fair);color:var(--color-safety-score-foreground-on-fair)}.card-overview__score-badge--good.sc-ds-card-overview{background:var(--color-safety-score-background-good);color:var(--color-safety-score-foreground-on-good)}.card-overview__score-badge--excellent.sc-ds-card-overview{background:var(--color-safety-score-background-excellent);color:var(--color-safety-score-foreground-on-excellent)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--dimension-space-050);min-width:0}.card-overview__score-label-spacer.sc-ds-card-overview{visibility:hidden}.card-overview__score-value.sc-ds-card-overview,.card-overview__score-badge.sc-ds-card-overview ds-skeleton.sc-ds-card-overview{flex:0 0 auto;margin-block:calc(-1 * var(--dimension-space-100))}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;padding-inline-start:var(--dimension-space-075);border:var(--ds-card-overview-divider-width) solid     var(--color-always-dark-border-tertiary);background:transparent;color:var(--color-always-dark-foreground-negative);text-align:center}.card-overview__metric-action.sc-ds-card-overview{flex-direction:column;justify-content:center;gap:var(--dimension-space-050)}.card-overview__metric-action[role='button'].sc-ds-card-overview{cursor:default}.card-overview__metric-content.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:var(--dimension-space-050);min-width:0}.card-overview__metric-label.sc-ds-card-overview{min-width:0}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__metrics.sc-ds-card-overview{grid-template-columns:minmax(0, 1fr)}.card-overview--compact.sc-ds-card-overview-h{height:var(--dimension-size-600);min-height:var(--dimension-size-600)}.card-overview--compact.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__clip.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{width:100%;height:100%}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview::after{display:none}@media (forced-colors: active){.card-overview__header.sc-ds-card-overview::after{background:var(--ds-forced-color-content)}.card-overview__score-badge.sc-ds-card-overview,.card-overview__score-content--error.sc-ds-card-overview{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const p="200px";const b=5;const _=7;const x={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const y="var(--color-always-dark-foreground-primary)";const k="var(--color-always-dark-foreground-secondary)";const z=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect",7);this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=p;this.isLoading=false;this.overviewLabel="Overview";this.scrollCollapseProgress=0;this.focusedMetricIndex=0;this.expandedHeight=0;this.layoutResizeObserver=null;this.handleMetricKeyDown=(e,r)=>{switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault();this.moveFocus(r,1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault();this.moveFocus(r,-1);break}}}componentDidLoad(){this.observeLayout()}componentDidRender(){if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,_)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||b}get resolvedScrollCollapseProgress(){if(this.variant==="compact"||!Number.isFinite(this.scrollCollapseProgress))return 0;return Math.min(1,Math.max(0,this.scrollCollapseProgress))}get scrollCollapseGeometry(){const e=v(l.size600,48);return w({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!e)return;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const r=e[0]?.contentRect;if(r)this.updateLayoutGeometry(r.width,r.height)}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!i)return;const s=e===undefined||r===undefined?i.getBoundingClientRect():null;const d=e??s?.width??0;const c=r??s?.height??0;let a=false;if(c>0&&Math.abs(c-this.expandedHeight)>=.5){this.expandedHeight=c;a=true}const t=f({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:v(this.metricMinWidth,p)});if(t!==this.gridColumns){this.gridColumns=t;a=true}if(this.gridColumns){this.el.style.setProperty("--ds-card-overview-grid-columns",String(this.gridColumns))}else{this.el.style.removeProperty("--ds-card-overview-grid-columns")}if(a)o(this)}get rovingIndex(){return u(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.visibleMetrics;const o=g(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric-action");s[o]?.focus()}bar(e,r,i){return s("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r){if(!e)return null;return s("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,color:x[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("div",{class:"card-overview__score-badge"},this.bar("text-display-small","40px")),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label-spacer"),this.bar("text-body-medium","28px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return s("div",{class:"card-overview__score",part:"score"},s("ds-text",{as:"span",class:"card-overview__score-content card-overview__score-content--error",variant:"text-body-medium",color:"inherit",role:"alert"},e))}const r=this.score;if(!r)return null;const i=r.level??h(r.value);return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("div",{class:{"card-overview__score-badge":true,[`card-overview__score-badge--${i}`]:Boolean(i)}},s("ds-text",{as:"span",class:"card-overview__score-value ds-control-label-box",variant:"text-display-small",emphasis:true,color:"inherit",fontFeature:"tabular-nums"},r.value)),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label-spacer ds-control-label-box",variant:"text-body-small",color:k,"aria-hidden":"true"}," "),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const i=!e.isInactive;const o=s("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:k},e.label);return s("div",{class:"card-overview__metric",part:"metric"},s("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},role:i?"button":undefined,tabIndex:i&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(i)this.focusedMetricIndex=r}},s("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?s("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},o):o,s("div",{class:"card-overview__metric-figure"},s("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:y,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))))}renderMetrics(){if(this.isLoading){return[this.renderScore(),...Array.from({length:this.loadingMetricCount},((e,r)=>s("div",{class:"card-overview__metric",key:`loading-${r}`},s("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},s("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),s("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","40px"),this.bar("text-body-medium","28px")))))))]}return[this.renderScore(),...this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))]}render(){const e=this.variant==="compact";const r=this.scrollCollapseGeometry;const i={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){i["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){i["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;i["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;i["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(d,{key:"18978435a5f07789f1f8a68113b7d9fa542eda01",class:{"card-overview":true,"card-overview--compact":e,"card-overview--stacked":!e&&this.layout==="stacked","card-overview--scroll-collapsing":r.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:i},s("div",{key:"562e36afea4440fe58086e2b2f850665a375769c",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"935474c46d9c4351b10d8a6531ed42ab3f19e161",class:"card-overview__clip"},s("div",{key:"e57c85d8723215accfd19127c1ee9398940624b6",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"47e8474f6dc365a2e50b201c48301f205712985a",class:"card-overview__summary"},s("div",{key:"8a223a0b065e110f2f5d3ceb381136d850b5b34b",class:"card-overview__header ds-control--md"},s("div",{key:"c2b28d0aecb222a877f180d6f68d73043b3e9546",class:"card-overview__period"},s("div",{key:"19696fe32fd8f188615e1ec4f126a9226bb959b1",class:"card-overview__period-current"},s("slot",{key:"5be9a26bee32688c889355d68047a9c502fe9362",name:"period"},this.periodLabel&&s("div",{key:"33896a771eb9dc6193aed0fe4f6a5953c3eae40f",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"48c1f6ad9c092aa4a45481409e02e992173ee148",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"1bd24e6f01873663b8d09cd03e74289c3a03d29c",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"a6e9eae2875387e3e0e6da9b6e1de4988147e6fd",class:"card-overview__filter"},s("slot",{key:"785738fc4e63cc9459fc272dc777097b03e9cbd2",name:"filter"})))),!e&&s("div",{key:"038103837e2655607de9775db2b22aa442a44315",class:"card-overview__body"},s("div",{key:"3e24f2d667afba0f65efe3ab084de032d9dc3814",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"dbd60dc8fa7b4ed8bc1c3efcf209e2a743c8ecf2",name:"footer"}))))))}get el(){return this}static get style(){return m()}},[262,"ds-card-overview",{variant:[1],layout:[1],score:[16],periodLabel:[1,"period-label"],comparisonLabel:[1,"comparison-label"],metrics:[16],metricMinWidth:[1,"metric-min-width"],isLoading:[4,"is-loading"],scoreErrorMessage:[1,"score-error-message"],overviewLabel:[1,"overview-label"],scrollCollapseProgress:[2,"scroll-collapse-progress"],focusedMetricIndex:[32],expandedHeight:[32],gridColumns:[32]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(c(e))){customElements.define(c(e),z)}break;case"ds-skeleton":if(!customElements.get(c(e))){a()}break;case"ds-text":if(!customElements.get(c(e))){t()}break;case"ds-tooltip":if(!customElements.get(c(e))){n()}break}}))}M();const C=z;const j=M;export{C as DsCardOverview,j as defineCustomElement};
 //# sourceMappingURL=ds-card-overview.js.map