@ds-mo/ui 12.8.0 → 13.0.0

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

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as s,h as e,a as r,t as n}from"./index.js";import{d as a}from"./p-BFRMwl93.js";import{d as o}from"./p-G3qIxpQj.js";import{d as c}from"./p-DzM3SzPz.js";import{d}from"./p-huw1oRbt.js";import{d as l}from"./p-BAfG3M8z.js";import{d as h}from"./p-Ca-I2UnB.js";import{d as b}from"./p-B6vE3ujd.js";import{d as u}from"./p-Utr23NC-.js";import{d as m}from"./p-Re2kPrXm.js";import{d as f}from"./p-CPwpgUWT.js";import{d as g}from"./p-69lHhJiX.js";function v(t){return"type"in t&&t.type==="divider"}const p=()=>`.ds-control--lg.sc-ds-bar-title,.ds-control--lg.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title-h,.ds-control--md.sc-ds-bar-title,.ds-control--sm.sc-ds-bar-title-h,.ds-control--sm.sc-ds-bar-title,.ds-control--xs.sc-ds-bar-title-h,.ds-control--xs.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-bar-title-h,.ds-control--lg.sc-ds-bar-title{--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-title-h,.ds-control--md.sc-ds-bar-title{--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-title-h,.ds-control--sm.sc-ds-bar-title{--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-title-h,.ds-control--xs.sc-ds-bar-title{--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-title-h,.ds-chrome-space--sm.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-bar-title-h,.ds-chrome-space--md.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-bar-title-h,.ds-chrome-space--lg.sc-ds-bar-title{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-bar-title-h,.ds-chrome-row.sc-ds-bar-title,.ds-chrome-column.sc-ds-bar-title-h,.ds-chrome-column.sc-ds-bar-title,.ds-chrome-grid.sc-ds-bar-title-h,.ds-chrome-grid.sc-ds-bar-title{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-title-h,.ds-chrome-row.sc-ds-bar-title{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-bar-title-h,.ds-chrome-column.sc-ds-bar-title{flex-direction:column}.ds-chrome-grid.sc-ds-bar-title-h,.ds-chrome-grid.sc-ds-bar-title{display:grid;align-items:center}.sc-ds-bar-title-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-title-h,.ds-focus-ring.sc-ds-bar-title,.ds-focus-ring-inset.sc-ds-bar-title-h,.ds-focus-ring-inset.sc-ds-bar-title{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-bar-title-h:focus-visible,.ds-focus-ring.sc-ds-bar-title: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-title-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-bar-title{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-title-h:focus-visible,.ds-focus-ring-inset.sc-ds-bar-title:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-bar-title-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-bar-title: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-title-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-bar-title::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-bar-title-h,.ds-interaction-fill.sc-ds-bar-title{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before,.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-bar-title-h::before,.ds-interaction-fill.sc-ds-bar-title::before{z-index:1}.ds-interaction-fill.sc-ds-bar-title-h::after,.ds-interaction-fill.sc-ds-bar-title::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-bar-title-h,.ds-interaction-fill--bordered.sc-ds-bar-title{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-bar-title-h::before,.ds-interaction-fill--selected.sc-ds-bar-title::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-bar-title-h,.ds-interaction-fill--selected.sc-ds-bar-title{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-bar-title-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-bar-title-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-bar-title:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-bar-title-h>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill.sc-ds-bar-title>.ds-interaction-fill__content.sc-ds-bar-title,.ds-interaction-fill__content.sc-ds-bar-title{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-bar-title-h,.ds-interaction-fill--on-faint.sc-ds-bar-title{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-bar-title-h,.ds-interaction-fill--on-medium.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-bold.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-strong.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-translucent.sc-ds-bar-title{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-bar-title-h,.ds-interaction-fill--on-inverted.sc-ds-bar-title{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-bar-title-h,.ds-interaction-fill--on-media.sc-ds-bar-title{--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-bar-title-h,.ds-interaction-fill--on-always-dark.sc-ds-bar-title{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-bar-title-h,.ds-interaction-fill--on-navigation.sc-ds-bar-title{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.sc-ds-bar-title-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-primary)}[data-shell-page-syncing].sc-ds-bar-title-h{visibility:hidden}.bar-title.sc-ds-bar-title{position:relative;min-width:0;box-sizing:border-box;background:var(--color-background-primary)}.bar-title.sc-ds-bar-title::after{content:'';position:absolute;inset:auto var(--ds-bar-title-divider-inset, var(--dimension-space-400)) 0;height:var(--dimension-stroke-width-012);background:var(--color-border-tertiary);pointer-events:none}.bar-title__inner.sc-ds-bar-title{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:var(--dimension-space-100);padding:var(--dimension-space-400);box-sizing:border-box}.bar-title__row.sc-ds-bar-title{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--dimension-space-100);min-height:var(--dimension-size-400);min-width:0}.bar-title-host--expanded.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{gap:var(--dimension-space-400)}.bar-title__leading.sc-ds-bar-title{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--dimension-space-100);min-width:0}.bar-title__title-row.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;min-height:var(--dimension-size-400)}.bar-title__identity.sc-ds-bar-title{display:flex;flex:0 1 auto;align-items:center;gap:var(--dimension-space-050);min-width:0}.bar-title__back.sc-ds-bar-title,.bar-title__section-chevron.sc-ds-bar-title{flex:0 0 auto}.bar-title__breadcrumb.sc-ds-bar-title{display:block;width:100%;min-width:0}.bar-title__heading.sc-ds-bar-title{display:block;width:auto;min-width:0;user-select:none}.bar-title__divider.sc-ds-bar-title{width:var(--dimension-stroke-width-012);height:var(--dimension-size-250);margin-inline-start:var(--dimension-space-100);flex:0 0 var(--dimension-stroke-width-012);background:var(--color-border-tertiary)}.bar-title__section-selector.sc-ds-bar-title{display:flex;flex:0 1 auto;min-width:0;max-width:var(--dimension-panel-width-sm)}.bar-title__section-trigger.sc-ds-bar-title{--ds-control-radius:var(--dimension-radius-half);display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-control-gap);height:var(--ds-control-height);min-width:0;max-width:100%;padding-inline:var(--ds-control-padding-inline);border:none;border-radius:var(--ds-control-radius);box-sizing:border-box;background:transparent;color:var(--color-foreground-secondary);cursor:default;font-family:inherit;user-select:none}.bar-title__section-trigger--expanded.sc-ds-bar-title{color:var(--color-foreground-primary)}.bar-title__section-trigger--expanded.sc-ds-bar-title::after,.bar-title__section-trigger--expanded.sc-ds-bar-title:hover::after{background:var(--ds-interaction-pressed)}.bar-title__section-label.sc-ds-bar-title{min-width:0;padding-inline:var(--ds-control-label-inset)}.bar-title__actions.sc-ds-bar-title{display:flex;align-items:center;gap:var(--dimension-space-100);flex:0 0 auto}.bar-title__description.sc-ds-bar-title{display:block;min-width:0;max-width:100%}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title{height:var(--dimension-size-600)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title.sc-ds-bar-title::after{inset-inline:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__inner.sc-ds-bar-title{flex:1 1 auto;height:100%;min-width:0;padding:0;gap:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__row.sc-ds-bar-title{height:100%;align-items:center}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__identity.sc-ds-bar-title{height:var(--dimension-size-400)}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__divider.sc-ds-bar-title{margin-inline-start:0}.bar-title-host--compact.sc-ds-bar-title-h .bar-title__heading.sc-ds-bar-title{display:inline-flex;flex:1 1 auto;align-items:center;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box}`;let _=0;const k=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsBack=s(this,"dsBack");this.dsBreadcrumbSelect=s(this,"dsBreadcrumbSelect");this.dsSectionChange=s(this,"dsSectionChange");this.dsAction=s(this,"dsAction");this.description="";this.showBack=false;this.backAriaLabel="Back";this.backLabel="Back";this.breadcrumbs=[];this.breadcrumbAriaLabel="Breadcrumb";this.sections=[];this.value="";this.sectionsAriaLabel="Change page section";this.primaryAction=null;this.actions=[];this.actionsAriaLabel="More page actions";this.variant="expanded";this.sectionMenuOpen=false;this.actionMenuOpen=false;this.sectionMenuInitialFocusVisible=false;this.actionMenuInitialFocusVisible=false;this.instanceId=_++;this.sectionMenuTriggerId=`bar-title-section-trigger-${this.instanceId}`;this.sectionMenuId=`bar-title-section-menu-${this.instanceId}`;this.actionMenuTriggerId=`bar-title-action-trigger-${this.instanceId}`;this.actionMenuId=`bar-title-action-menu-${this.instanceId}`;this.sectionTriggerEl=null;this.actionTriggerEl=null;this.toggleSectionMenu=t=>{this.sectionMenuInitialFocusVisible=t.detail===0;this.actionMenuOpen=false;this.sectionMenuOpen=!this.sectionMenuOpen};this.closeSectionMenu=()=>{this.sectionMenuOpen=false};this.handleSectionSelect=t=>{const i=String(t.detail?.value??"");const s=this.selectableSections.find((t=>t.id===i));if(!s||s.isInactive)return;this.closeSectionMenu();this.dsSectionChange.emit(i);requestAnimationFrame((()=>this.sectionTriggerEl?.focus()))};this.toggleActionMenu=t=>{this.actionMenuInitialFocusVisible=t.detail===0;this.sectionMenuOpen=false;this.actionMenuOpen=!this.actionMenuOpen};this.closeActionMenu=()=>{this.actionMenuOpen=false};this.handleActionSelect=t=>{const i=String(t.detail?.value??"");const s=this.primaryCollapsed&&this.primaryAction?.id===i;const e=this.selectableActions.find((t=>t.id===i));if(!s&&!e)return;if(s&&(this.primaryAction?.isInactive||this.primaryAction?.isLoading)||e?.isInactive){return}this.closeActionMenu();this.dsAction.emit(i);requestAnimationFrame((()=>void this.actionTriggerEl?.setFocus?.()))};this.handleBreadcrumbSelect=t=>{if(this.breadcrumbs.length===0){this.dsBack.emit(t.detail.originalEvent);return}const i=this.dsBreadcrumbSelect.emit(t.detail);if(i.defaultPrevented)t.preventDefault()}}componentWillLoad(){if(this.el.closest("ds-shell-page")){this.el.setAttribute("data-shell-page-syncing","")}}handleSectionsChange(){if(!this.hasSectionSelector)this.closeSectionMenu()}handleActionsChange(){if(!this.showActionMenuTrigger)this.closeActionMenu()}get compact(){return this.variant!=="expanded"}get expandedBreadcrumbItems(){if(this.breadcrumbs.length>0)return this.breadcrumbs;if(!this.showBack)return[];return[{id:"back",label:this.backLabel,ariaLabel:this.backAriaLabel}]}get backTooltipLabel(){return"Go back"}get primaryCollapsed(){return this.variant==="constrained"&&this.primaryAction!==null&&(this.primaryAction.collapse??"auto")==="auto"}get selectableSections(){return this.sections.filter((t=>!v(t)))}get hasSectionSelector(){return this.selectableSections.length>1}get effectiveValue(){return this.selectableSections.some((t=>t.id===this.value))?this.value:this.selectableSections[0]?.id??""}get selectedSectionLabel(){return this.selectableSections.find((t=>t.id===this.effectiveValue))?.label??""}get sectionTriggerAriaLabel(){return`${this.sectionsAriaLabel}. Current section: ${this.selectedSectionLabel}`}groupsFromItems(t,i){const s=[];let e=[];const r=()=>{if(e.length>0)s.push({items:e});e=[]};for(const s of t){if(v(s)){r()}else{e.push(i(s))}}r();return s}get sectionMenuSections(){return this.groupsFromItems(this.sections,(t=>({label:t.label,value:t.id,isSelected:t.id===this.effectiveValue,isInactive:t.isInactive})))}get selectableActions(){return this.actions.filter((t=>!v(t)))}get showActionMenuTrigger(){return this.selectableActions.length>0||this.primaryCollapsed&&this.primaryAction!==null}actionMenuItem(t){const i=t;return{label:t.label,value:t.id,isInactive:t.isInactive||i.isLoading,isDestructive:t.isDestructive||i.intent==="negative"}}get actionMenuSections(){const t=this.groupsFromItems(this.actions,(t=>this.actionMenuItem(t)));if(!this.primaryCollapsed||!this.primaryAction)return t;return[{items:[this.actionMenuItem(this.primaryAction)]},...t]}renderSectionSelector(){if(!this.hasSectionSelector)return null;return[e("div",{class:"bar-title__divider","aria-hidden":"true"}),e("div",{class:"bar-title__section-selector"},e("button",{ref:t=>{this.sectionTriggerEl=t??null},id:this.sectionMenuTriggerId,class:{"bar-title__section-trigger":true,"bar-title__section-trigger--expanded":this.sectionMenuOpen,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true},type:"button","aria-haspopup":"menu","aria-controls":this.sectionMenuId,"aria-expanded":String(this.sectionMenuOpen),"aria-label":this.sectionTriggerAriaLabel,onClick:this.toggleSectionMenu},e("ds-text",{class:"bar-title__section-label ds-interaction-fill__content",as:"span",variant:"text-body-medium",emphasis:true,color:"primary",lineTruncation:1},this.selectedSectionLabel),e("ds-icon",{class:"bar-title__section-chevron ds-interaction-fill__content",name:"ChevronUpDown",size:"md",color:"inherit","aria-hidden":"true"})))]}renderActions(){const t=this.primaryAction;if(!t&&!this.showActionMenuTrigger)return null;return e("div",{class:"bar-title__actions"},t&&!this.primaryCollapsed?e("ds-button-filled",{class:"bar-title__primary-action",variant:t.icon?"icon-label":"label",icon:t.icon??"",label:t.label,intent:t.intent??"brand",contrast:t.contrast??"bold",size:"md",type:t.type??"button",isInactive:t.isInactive,isLoading:t.isLoading,onDsClick:()=>this.dsAction.emit(t.id)}):null,this.showActionMenuTrigger?e("ds-tooltip",{label:"Page options",side:"bottom",size:"sm"},e("ds-button-unfilled",{ref:t=>{this.actionTriggerEl=t??null},id:this.actionMenuTriggerId,class:"bar-title__more-actions",variant:"icon",icon:"Ellipses","aria-label":this.actionsAriaLabel,size:"md",activeFill:!this.compact,hasBorder:t!==null&&!this.primaryCollapsed,haspopup:"menu",controls:this.actionMenuId,expanded:this.actionMenuOpen,onDsClick:t=>this.toggleActionMenu(t.detail)})):null)}renderBreadcrumb(){const t=this.expandedBreadcrumbItems;if(t.length===0)return null;return e("ds-breadcrumb",{class:"bar-title__breadcrumb",items:t,ariaLabel:this.breadcrumbAriaLabel,onDsSelect:this.handleBreadcrumbSelect})}renderBack(){if(!this.showBack)return null;return e("ds-tooltip",{label:this.backTooltipLabel,side:"bottom",size:"sm"},e("ds-button-unfilled",{class:"bar-title__back",variant:"icon",icon:"ChevronLeft","aria-label":this.backAriaLabel,size:"md",activeFill:false,hasBorder:false,onDsClick:t=>this.dsBack.emit(t.detail)}))}render(){const t=this.compact;return e(r,{key:"6f876dd8e4026234010b2700679be1fccb381afd",class:{"bar-title-host--compact":t,"bar-title-host--expanded":this.variant==="expanded","bar-title-host--constrained":this.variant==="constrained","bar-title-host--has-description":!!this.description,"bar-title-host--has-back":this.showBack,"bar-title-host--has-breadcrumb":!t&&this.expandedBreadcrumbItems.length>0}},e("div",{key:"dd7dc73bba095d8cc11d2955f14e63f5f870f563",class:{"bar-title":true,"ds-chrome-row":t,"ds-chrome-space--md":t}},e("div",{key:"09ff7aaa3ddb4095244ddc0b4b5522bd85f3d2f1",class:"bar-title__inner"},!t?this.renderBreadcrumb():null,e("div",{key:"00e0b5c0f061c183f05836558350f8e27af5d2fc",class:"bar-title__row"},e("div",{key:"5d32ab3e46eac313abaeba9f87aff0812fc6cfb8",class:"bar-title__leading"},e("div",{key:"61b53f839832339e278e6ca4993247b5d140ec25",class:"bar-title__title-row","data-shell-page-header-anchor":true},e("div",{key:"bab3a528319d729dc714f6b1106d2f2da1373558",class:"bar-title__identity"},t?this.renderBack():null,e("ds-text",{key:"8aaa21ca3ba208451d92881af05c2d464650ed26",class:"bar-title__heading ds-control--md",variant:t?"text-title-small":"text-title-medium",emphasis:true,color:"primary",as:"h1",lineTruncation:1},this.heading)),this.renderSectionSelector()),this.description&&!t?e("ds-text",{class:"bar-title__description",variant:"text-body-small",color:"secondary",lineTruncation:2,wrap:"wrap",as:"p"},this.description):null),this.renderActions()))),this.hasSectionSelector?e("ds-menu",{id:this.sectionMenuId,class:"bar-title__section-menu",anchorId:this.sectionMenuTriggerId,menuLabel:this.sectionsAriaLabel,open:this.sectionMenuOpen,initialFocusVisible:this.sectionMenuInitialFocusVisible,sections:this.sectionMenuSections,onDsClose:this.closeSectionMenu,onDsSelect:this.handleSectionSelect}):null,this.showActionMenuTrigger?e("ds-menu",{id:this.actionMenuId,class:"bar-title__action-menu",anchorId:this.actionMenuTriggerId,align:"end",menuLabel:this.actionsAriaLabel,open:this.actionMenuOpen,initialFocusVisible:this.actionMenuInitialFocusVisible,sections:this.actionMenuSections,onDsClose:this.closeActionMenu,onDsSelect:this.handleActionSelect}):null)}get el(){return this}static get watchers(){return{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}}static get style(){return p()}},[2,"ds-bar-title",{heading:[1],description:[1],showBack:[4,"show-back"],backAriaLabel:[1,"back-aria-label"],backLabel:[1,"back-label"],breadcrumbs:[16],breadcrumbAriaLabel:[1,"breadcrumb-aria-label"],sections:[16],value:[1],sectionsAriaLabel:[1,"sections-aria-label"],primaryAction:[16],actions:[16],actionsAriaLabel:[1,"actions-aria-label"],variant:[1],sectionMenuOpen:[32],actionMenuOpen:[32],sectionMenuInitialFocusVisible:[32],actionMenuInitialFocusVisible:[32]},undefined,{sections:[{handleSectionsChange:0}],actions:[{handleActionsChange:0}],primaryAction:[{handleActionsChange:0}]}]);function x(){if(typeof customElements==="undefined"){return}const t=["ds-bar-title","ds-badge","ds-breadcrumb","ds-button-filled","ds-button-unfilled","ds-icon","ds-loader","ds-menu","ds-swatch-picker","ds-switch","ds-text","ds-tooltip"];t.forEach((t=>{switch(t){case"ds-bar-title":if(!customElements.get(n(t))){customElements.define(n(t),k)}break;case"ds-badge":if(!customElements.get(n(t))){a()}break;case"ds-breadcrumb":if(!customElements.get(n(t))){o()}break;case"ds-button-filled":if(!customElements.get(n(t))){c()}break;case"ds-button-unfilled":if(!customElements.get(n(t))){d()}break;case"ds-icon":if(!customElements.get(n(t))){l()}break;case"ds-loader":if(!customElements.get(n(t))){h()}break;case"ds-menu":if(!customElements.get(n(t))){b()}break;case"ds-swatch-picker":if(!customElements.get(n(t))){u()}break;case"ds-switch":if(!customElements.get(n(t))){m()}break;case"ds-text":if(!customElements.get(n(t))){f()}break;case"ds-tooltip":if(!customElements.get(n(t))){g()}break}}))}x();const w=k;const y=x;export{w as DsBarTitle,y as defineCustomElement};
+import{B as o,d as s}from"./p-Dg1LBXJ2.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-title.js.map

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

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-BFRMwl93.js";import{d as n}from"./p-DzM3SzPz.js";import{d}from"./p-huw1oRbt.js";import{d as l}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as m}from"./p-B6vE3ujd.js";import{d as b}from"./p-B6NvVdeO.js";import{d as h}from"./p-CsX3ICz7.js";import{d as w}from"./p-Utr23NC-.js";import{d as f}from"./p-Re2kPrXm.js";import{d as p}from"./p-CPwpgUWT.js";import{d as k}from"./p-69lHhJiX.js";const u=()=>`.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 g=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=i(this,"dsExit");this.dsStepChange=i(this,"dsStepChange");this.dsSubmit=i(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.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:"aa34c58311d01adabcc9b0c86f65f8519a486130"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return u()}},[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 v(){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-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(t(s))){customElements.define(t(s),g)}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-text":if(!customElements.get(t(s))){p()}break;case"ds-tooltip":if(!customElements.get(t(s))){k()}break}}))}v();const x=g;const z=v;export{x as DsBarWorkflow,z 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-BsoqsbBh.js";import{d as n}from"./p-C3ArcO50.js";import{d}from"./p-DsiCDzoF.js";import{d as l}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as m}from"./p-CS6CHlHK.js";import{d as b}from"./p-D09HINr_.js";import{d as h}from"./p-CWoXKe_h.js";import{d as w}from"./p-BaUsq_VK.js";import{d as f}from"./p-Bkv3UjZz.js";import{d as p}from"./p-Ay1AX7Ql.js";import{d as k}from"./p-ohsLFap_.js";const u=()=>`.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 g=s(class s extends o{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=i(this,"dsExit");this.dsStepChange=i(this,"dsStepChange");this.dsSubmit=i(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.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:"7d5634ef932b31f88daab921bd6aa7fe70966a01"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return u()}},[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 v(){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-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-bar-workflow":if(!customElements.get(t(s))){customElements.define(t(s),g)}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-text":if(!customElements.get(t(s))){p()}break;case"ds-tooltip":if(!customElements.get(t(s))){k()}break}}))}v();const x=g;const _=v;export{x as DsBarWorkflow,_ 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-G3qIxpQj.js";const p=o;const t=s;export{p as DsBreadcrumb,t as defineCustomElement};
+import{B as o,d as r}from"./p-DbQr7Kwr.js";const s=o;const t=r;export{s as DsBreadcrumb,t 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-DzM3SzPz.js";const t=o;const p=s;export{t as DsButtonFilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-C3ArcO50.js";const r=o;const t=s;export{r as DsButtonFilled,t as defineCustomElement};
 //# sourceMappingURL=ds-button-filled.js.map

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

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

package/dist/components/{ds-select-multi.d.ts → ds-card-data-viz.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface DsSelectMulti extends Components.DsSelectMulti, HTMLElement {}
-export const DsSelectMulti: {
-    prototype: DsSelectMulti;
-    new (): DsSelectMulti;
+interface DsCardDataViz extends Components.DsCardDataViz, HTMLElement {}
+export const DsCardDataViz: {
+    prototype: DsCardDataViz;
+    new (): DsCardDataViz;
 };
 /**
  * Used to define this component and all nested components recursively.

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

@@ -0,0 +1,2 @@
+import{p as a,H as d,c as s,h as i,a as e,t}from"./index.js";import{d as r}from"./p-BsoqsbBh.js";import{d as c}from"./p-DsiCDzoF.js";import{d as o}from"./p-BAfG3M8z.js";import{d as n}from"./p-Ca-I2UnB.js";import{d as h}from"./p-Ay1AX7Ql.js";const l=()=>`.ds-chrome-space--sm.sc-ds-card-data-viz-h,.ds-chrome-space--sm.sc-ds-card-data-viz{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-card-data-viz-h,.ds-chrome-space--md.sc-ds-card-data-viz{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-card-data-viz-h,.ds-chrome-space--lg.sc-ds-card-data-viz{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-card-data-viz-h,.ds-chrome-row.sc-ds-card-data-viz,.ds-chrome-column.sc-ds-card-data-viz-h,.ds-chrome-column.sc-ds-card-data-viz,.ds-chrome-grid.sc-ds-card-data-viz-h,.ds-chrome-grid.sc-ds-card-data-viz{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-card-data-viz-h,.ds-chrome-row.sc-ds-card-data-viz{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-card-data-viz-h,.ds-chrome-column.sc-ds-card-data-viz{flex-direction:column}.ds-chrome-grid.sc-ds-card-data-viz-h,.ds-chrome-grid.sc-ds-card-data-viz{display:grid;align-items:center}.sc-ds-card-data-viz-h{display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-data-viz-width);min-height:var(--_card-data-viz-min-height);max-width:100%;overflow:hidden;border:none;border-radius:var(--dimension-radius-025);background-color:var(--color-background-primary);box-shadow:0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.card-data-viz__header.sc-ds-card-data-viz{flex-shrink:0;justify-content:space-between;height:var(--dimension-size-600);border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);background-color:var(--color-background-secondary)}ds-text.card-data-viz__title.sc-ds-card-data-viz{display:flex;flex:1 1 auto;align-items:center;box-sizing:border-box;min-width:0;padding:calc(var(--dimension-space-075) + var(--dimension-space-025));-webkit-user-select:none;user-select:none}.card-data-viz__actions.sc-ds-card-data-viz{display:flex;flex-shrink:0;align-items:center;gap:var(--dimension-space-100)}.card-data-viz__actions.sc-ds-card-data-viz:empty{display:none}.card-data-viz__body.sc-ds-card-data-viz,.card-data-viz__layout.sc-ds-card-data-viz{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0}.card-data-viz__body.sc-ds-card-data-viz{border-radius:0 0 var(--dimension-radius-025) var(--dimension-radius-025);background-color:var(--color-background-primary)}.card-data-viz__layout.sc-ds-card-data-viz{height:100%;gap:var(--dimension-space-200)}.card-data-viz__chart.sc-ds-card-data-viz{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-400) var(--dimension-space-400) 0     var(--dimension-space-400)}.card-data-viz__chart.sc-ds-card-data-viz>*.sc-ds-card-data-viz{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz__chart--fill.sc-ds-card-data-viz>*.sc-ds-card-data-viz{height:100%;min-height:0;max-height:100%}.card-data-viz__legend.sc-ds-card-data-viz{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}`;const m={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const v={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const g=a(class a extends d{constructor(a){super();if(a!==false){this.__registerHost()}this.dsFilterClick=s(this,"dsFilterClick");this.variant="custom";this.cardWidth="md";this.showFilter=false;this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=a=>{if(this.variant!=="donut")return;const d=this.el.querySelector('[slot="legend"]');if(!d||!("activeLabel"in d))return;d.activeLabel=a.detail?.label??null};this.handleLegendHover=a=>{if(this.variant!=="donut")return;const d=this.el.querySelector('[slot="chart"]');if(!d||!("activeLabel"in d))return;d.activeLabel=a.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const a=this.el.querySelector('[slot="chart"]');const d=this.el.querySelector('ds-chart-legend[slot="legend"]');if(this.variant==="donut"){if(a&&"showTooltip"in a){a.showTooltip=!this.hasLegendSlot}return}if((this.variant==="bar"||this.variant==="line")&&d){d.setAttribute("highlight-on-hover","false");if("highlightOnHover"in d)d.highlightOnHover=false}}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){const a=this.variant!=="custom"||this.hasChartSlot;return i(e,{key:"d6991673f2e2da80c8244a57088b89d4cfc38242",class:{"card-data-viz":true,[`card-data-viz--${this.variant}`]:true},style:{"--_card-data-viz-width":m[this.cardWidth],"--_card-data-viz-min-height":v[this.cardWidth]}},i("header",{key:"de30db0c6f206e6ed8f7f70a213493cd99d8276e",class:"card-data-viz__header ds-chrome-row ds-chrome-space--md"},i("ds-text",{key:"6cef7a236e173ce5cb807af92bdec8da0148fbe0",class:"card-data-viz__title",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading),i("div",{key:"7fa584cb5b3f336f98377dba2cf2d372be4ab1d7",class:"card-data-viz__actions"},this.showFilter?i("ds-button-unfilled",{variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}):null,i("slot",{key:"28ef6bd9e79f0a949f820e18fbd9f74e66e4e7c0",name:"actions"}))),i("div",{key:"94cd6bad310fb16b38f0878b7d49ce40625800b1",class:"card-data-viz__body"},a?i("div",{class:"card-data-viz__layout"},this.hasChartSlot?i("div",{class:{"card-data-viz__chart":true,"card-data-viz__chart--fill":this.variant==="donut"}},i("slot",{name:"chart"})):null,this.hasLegendSlot?i("div",{class:"card-data-viz__legend"},i("slot",{name:"legend"})):null,i("slot",null)):i("slot",null)))}get el(){return this}static get style(){return l()}},[262,"ds-card-data-viz",{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 a=["ds-card-data-viz","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];a.forEach((a=>{switch(a){case"ds-card-data-viz":if(!customElements.get(t(a))){customElements.define(t(a),g)}break;case"ds-badge":if(!customElements.get(t(a))){r()}break;case"ds-button-unfilled":if(!customElements.get(t(a))){c()}break;case"ds-icon":if(!customElements.get(t(a))){o()}break;case"ds-loader":if(!customElements.get(t(a))){n()}break;case"ds-text":if(!customElements.get(t(a))){h()}break}}))}f();const b=g;const p=f;export{b as DsCardDataViz,p as defineCustomElement};
+//# sourceMappingURL=ds-card-data-viz.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardDataVizCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardDataViz","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","showFilter","filterLabel","hasChartSlot","hasLegendSlot","handleChartHover","event","legend","el","querySelector","activeLabel","detail","label","handleLegendHover","chart","handleFilterClick","dsFilterClick","emit","componentWillRender","componentDidLoad","addEventListener","componentDidRender","showTooltip","setAttribute","highlightOnHover","disconnectedCallback","removeEventListener","render","usesChartLayout","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","name"],"sources":["src/wc/components/CardDataViz/CardDataViz.css?tag=ds-card-data-viz&encapsulation=scoped","src/wc/components/CardDataViz/CardDataViz.tsx"],"sourcesContent":["@import '../../utils/chrome-layout.css';\n\n:host {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: var(--_card-data-viz-width);\n  min-height: var(--_card-data-viz-min-height);\n  max-width: 100%;\n  overflow: hidden;\n  border: none;\n  border-radius: var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n  box-shadow: 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n.card-data-viz__header {\n  flex-shrink: 0;\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  background-color: var(--color-background-secondary);\n}\n\nds-text.card-data-viz__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 0;\n  padding: calc(var(--dimension-space-075) + var(--dimension-space-025));\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-data-viz__actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n\n.card-data-viz__actions:empty {\n  display: none;\n}\n\n.card-data-viz__body,\n.card-data-viz__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-data-viz__body {\n  border-radius: 0 0 var(--dimension-radius-025) var(--dimension-radius-025);\n  background-color: var(--color-background-primary);\n}\n\n.card-data-viz__layout {\n  height: 100%;\n  gap: var(--dimension-space-200);\n}\n\n.card-data-viz__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-400) var(--dimension-space-400) 0\n    var(--dimension-space-400);\n}\n\n.card-data-viz__chart > * {\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  max-width: 100%;\n  max-height: 100%;\n}\n\n.card-data-viz__chart--fill > * {\n  height: 100%;\n  min-height: 0;\n  max-height: 100%;\n}\n\n.card-data-viz__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","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\nexport type CardDataVizWidth = 'sm' | 'md' | 'lg';\nexport type CardDataVizVariant = 'custom' | 'bar' | 'line' | 'donut';\n\ntype HoveredDatum = { label: string } | null;\n\ntype ChartSlot = HTMLElement & {\n  activeLabel?: string | null;\n  showTooltip?: boolean;\n};\n\ntype LegendSlot = HTMLElement & {\n  activeLabel?: string | null;\n  highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardDataVizWidth, 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<CardDataVizWidth, 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 data-visualization 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-data-viz',\n  styleUrl: 'CardDataViz.css',\n  scoped: true,\n})\nexport class CardDataViz {\n  @Element() el!: HTMLElement;\n\n  /** Data-visualization heading shown in the card header. */\n  @Prop() heading!: string;\n  /** Chart composition behavior. */\n  @Prop() variant: CardDataVizVariant = 'custom';\n  /** Width token with the matching data-visualization card min-height. */\n  @Prop() cardWidth: CardDataVizWidth = '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  componentDidLoad() {\n    this.el.addEventListener('dsSliceHover', this.handleChartHover);\n    this.el.addEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  componentDidRender() {\n    const chart = this.el.querySelector('[slot=\"chart\"]') as ChartSlot | null;\n    const legend = this.el.querySelector(\n      'ds-chart-legend[slot=\"legend\"]'\n    ) as LegendSlot | null;\n\n    if (this.variant === 'donut') {\n      if (chart && 'showTooltip' in chart) {\n        chart.showTooltip = !this.hasLegendSlot;\n      }\n      return;\n    }\n\n    if (\n      (this.variant === 'bar' || this.variant === 'line') &&\n      legend\n    ) {\n      legend.setAttribute('highlight-on-hover', 'false');\n      if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n    }\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('dsSliceHover', this.handleChartHover);\n    this.el.removeEventListener('dsItemHover', this.handleLegendHover);\n  }\n\n  private handleChartHover = (event: Event) => {\n    if (this.variant !== 'donut') return;\n    const legend = this.el.querySelector('[slot=\"legend\"]') as LegendSlot | null;\n    if (!legend || !('activeLabel' in legend)) return;\n    legend.activeLabel =\n      (event as CustomEvent<HoveredDatum>).detail?.label ?? null;\n  };\n\n  private handleLegendHover = (event: Event) => {\n    if (this.variant !== 'donut') return;\n    const chart = this.el.querySelector('[slot=\"chart\"]') as ChartSlot | null;\n    if (!chart || !('activeLabel' in chart)) return;\n    chart.activeLabel =\n      (event as CustomEvent<HoveredDatum>).detail?.label ?? null;\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-data-viz': true,\n          [`card-data-viz--${this.variant}`]: true,\n        }}\n        style={{\n          '--_card-data-viz-width': CARD_WIDTH_VARS[this.cardWidth],\n          '--_card-data-viz-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n        }}\n      >\n        <header class=\"card-data-viz__header ds-chrome-row ds-chrome-space--md\">\n          <ds-text\n            class=\"card-data-viz__title\"\n            variant=\"text-title-small\"\n            emphasis\n            color=\"primary\"\n            as=\"h2\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"card-data-viz__actions\">\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-data-viz__body\">\n          {usesChartLayout ? (\n            <div class=\"card-data-viz__layout\">\n              {this.hasChartSlot ? (\n                <div\n                  class={{\n                    'card-data-viz__chart': true,\n                    'card-data-viz__chart--fill': this.variant === 'donut',\n                  }}\n                >\n                  <slot name=\"chart\" />\n                </div>\n              ) : null}\n              {this.hasLegendSlot ? (\n                <div class=\"card-data-viz__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":"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","ignoreList":[]}

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

@@ -1,2 +1,2 @@
-import{p as e,H as r,c as i,h as o,a as s,t as a}from"./index.js";import{d}from"./p-BAfG3M8z.js";import{d as n}from"./p-BKOlvCGS.js";import{d as c}from"./p-CPwpgUWT.js";import{d as t}from"./p-69lHhJiX.js";const v=()=>`.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-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 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.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);--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);--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);--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)}.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))}.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-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-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:flex;flex-wrap:wrap;align-items:stretch;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:var(--dimension-stroke-width-012) solid     var(--color-always-dark-border-tertiary);border-radius:var(--dimension-radius-050);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow:hidden}.card-overview__score.sc-ds-card-overview{display:flex;flex:0 0 auto;flex-direction:column;gap:0;min-width:0;padding:var(--dimension-space-100) var(--dimension-space-200);border-inline-end:var(--ds-card-overview-divider)}.card-overview__score-label-row.sc-ds-card-overview{display:flex;align-items:center;min-height:var(--ds-control-height)}.card-overview__score-label.sc-ds-card-overview{color:var(--color-always-dark-foreground-secondary)}.card-overview__score-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0;margin-block-start:calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)))}.card-overview__score-band.sc-ds-card-overview{margin-block-start:calc(-1 * var(--dimension-space-025));color:var(--color-always-dark-foreground-secondary)}.card-overview__skeleton-baseline.sc-ds-card-overview{position:relative;inset-block-start:calc(-1 * var(--dimension-space-150))}.card-overview__score--error.sc-ds-card-overview{flex-direction:row;align-items:center;gap:var(--dimension-space-050);color:var(--color-always-dark-foreground-negative)}.card-overview__body.sc-ds-card-overview{display:flex;flex:1 1 0;flex-direction:column;min-width:min(100%, calc(var(--ds-card-overview-metric-min) * 2))}.card-overview__header.sc-ds-card-overview{display:flex;align-items:center;gap:var(--dimension-space-100);min-width:0;padding:var(--dimension-space-100);border-block-end:var(--ds-card-overview-divider);box-sizing:border-box}.card-overview__period.sc-ds-card-overview{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);min-height:var(--ds-control-height);min-width:0;padding-inline:var(--ds-control-padding-inline);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview{color:var(--color-always-dark-foreground-primary)}.card-overview__period-comparison.sc-ds-card-overview{color:var(--color-always-dark-foreground-secondary)}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 0 auto;align-items:center}.card-overview__metrics.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-wrap:wrap;align-content:flex-start;min-width:0;margin-inline-end:calc(-1 * var(--dimension-stroke-width-012));margin-block-end:calc(-1 * var(--dimension-stroke-width-012))}.card-overview__metric.sc-ds-card-overview{display:flex;position:relative;flex:1 1 var(--ds-card-overview-metric-min);flex-direction:column;gap:var(--dimension-space-050);min-width:0;padding:var(--dimension-space-175) var(--dimension-space-200);border-radius:0;border-inline-end:var(--ds-card-overview-divider);border-block-end:var(--ds-card-overview-divider)}.card-overview__metric[role='button'].sc-ds-card-overview{cursor:default;-webkit-user-select:none;user-select:none}.card-overview__metric-label.sc-ds-card-overview{min-width:0;color:var(--color-always-dark-foreground-secondary)}.card-overview__metric-value.sc-ds-card-overview{color:var(--color-always-dark-foreground-primary)}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-100);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview__trend--positive.sc-ds-card-overview{color:var(--color-always-dark-foreground-positive)}.card-overview__trend--negative.sc-ds-card-overview{color:var(--color-always-dark-foreground-negative)}.card-overview__trend--neutral.sc-ds-card-overview{color:var(--color-always-dark-foreground-secondary)}@container (max-width: 480px){.sc-ds-card-overview-h .card-overview__score{flex-direction:row;align-items:baseline;gap:var(--dimension-space-100);width:100%;padding-block:var(--dimension-space-150);border-inline-end:none;border-block-end:var(--ds-card-overview-divider)}.sc-ds-card-overview-h .card-overview__score-label-row{flex:1 1 auto;min-height:0}.sc-ds-card-overview-h .card-overview__score-band,.sc-ds-card-overview-h .card-overview__score-figure{margin-block-start:0}.sc-ds-card-overview-h .card-overview__score-band--loading{position:relative;inset-block-start:calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)))}.sc-ds-card-overview-h .card-overview__header{align-items:flex-start}.sc-ds-card-overview-h .card-overview__period{flex-wrap:wrap;min-height:0;overflow:visible;white-space:normal}}`;const l="var(--dimension-menu-width-xs)";const w=4;const f=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect");this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=l;this.isLoading=false;this.overviewLabel="Overview";this.focusedMetricIndex=0;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}}}get hasScore(){return this.score!==undefined||this.scoreErrorMessage!==undefined||this.isLoading}get rovingIndex(){const e=this.metrics.findIndex((e=>!e.isInactive));if(e<0)return-1;const r=this.metrics[this.focusedMetricIndex];return r&&!r.isInactive?this.focusedMetricIndex:e}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.metrics.length;if(i===0)return;for(let o=1;o<=i;o+=1){const s=((e+r*o)%i+i)%i;if(this.metrics[s]?.isInactive)continue;this.focusedMetricIndex=s;const a=this.el.querySelectorAll(".card-overview__metric");a[s]?.focus();return}}bar(e,r,i){return o("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r,i=false){if(!e)return null;return o("ds-text",{as:"span",class:{"card-overview__trend":true,[`card-overview__trend--${e.tone}`]:true},variant:r,emphasis:i,color:"inherit",fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return o("div",{class:"card-overview__score ds-control--md",part:"score"},o("div",{class:"card-overview__score-label-row"}),o("div",{class:"card-overview__score-figure"},this.bar("text-display-medium","56px"),this.bar("text-body-small","24px","card-overview__skeleton-baseline")),this.bar("text-caption","80px","card-overview__score-band card-overview__score-band--loading"))}if(this.scoreErrorMessage){return o("div",{class:"card-overview__score card-overview__score--error",part:"score",role:"alert"},o("ds-icon",{name:"CircleExclamation",size:"sm",color:"inherit","aria-hidden":"true"}),o("ds-text",{as:"span",variant:"text-body-medium",color:"inherit"},this.scoreErrorMessage))}const e=this.score;if(!e)return null;return o("div",{class:"card-overview__score ds-control--md",part:"score"},o("div",{class:"card-overview__score-label-row"},o("ds-text",{as:"span",class:"card-overview__score-label",variant:"text-body-medium",emphasis:true,color:"inherit"},e.label)),o("div",{class:"card-overview__score-figure"},o("ds-text",{as:"span",variant:"text-display-medium",emphasis:true,color:"inherit",fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-small",true)),e.band&&o("ds-text",{as:"span",class:"card-overview__score-band",variant:"text-caption",color:"inherit"},e.band))}renderMetric(e,r){const i=!e.isInactive;const s=o("ds-text",{as:"span",class:"card-overview__metric-label",variant:"text-body-small",color:"inherit"},e.label);return o("div",{class:{"card-overview__metric":true,"card-overview__metric--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},part:"metric",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}},e.labelTooltip?o("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},s):s,o("div",{class:"card-overview__metric-figure"},o("ds-text",{as:"span",class:"card-overview__metric-value",variant:"text-body-medium",color:"inherit",fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))}renderMetrics(){if(this.isLoading&&this.metrics.length===0){return Array.from({length:w},((e,r)=>o("div",{class:"card-overview__metric",key:`loading-${r}`},this.bar("text-body-small","70%","card-overview__metric-label"),o("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","36px"),this.bar("text-body-medium","40px")))))}return this.metrics.map(((e,r)=>this.renderMetric(e,r)))}render(){const e=Boolean(this.periodLabel||this.comparisonLabel);return o(s,{key:"eba9fc9993f61edd4a0ff9f4de1a8e5da40e8eca",class:{"card-overview":true,"card-overview--has-score":this.hasScore,"ds-control-elevation":true,"ds-control-elevation--sm":true},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:{"--ds-card-overview-metric-min":this.metricMinWidth}},this.hasScore&&this.renderScore(),o("div",{key:"d08e62b6ad65c1c71972115d98222bf7c8d13c49",class:"card-overview__body"},o("div",{key:"16d6df48135ee20678eef8b559e9b3cca59d7af2",class:"card-overview__header ds-control--md"},this.isLoading?o("div",{class:"card-overview__period ds-control-label-box"},this.bar("text-body-medium","184px"),this.bar("text-body-medium","248px")):e&&o("div",{class:"card-overview__period ds-control-label-box"},this.periodLabel&&o("ds-text",{as:"span",class:"card-overview__period-current ds-control-label-box",variant:"text-body-medium",emphasis:true,color:"inherit"},this.periodLabel),this.comparisonLabel&&o("ds-text",{as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:"inherit"},this.comparisonLabel)),o("div",{key:"76046f4e3c07315b995700e2c54e3ee1ca7a65d7",class:"card-overview__filter"},this.isLoading?o("ds-skeleton",{variant:"control",controlSize:"md",width:"128px",background:"always-dark"}):o("slot",{name:"filter"}))),o("div",{key:"5841251a2afb29ca4935b175390e91e8d69ec2a1",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),o("slot",{key:"591a95f5b191025138f612e32901a57557769786",name:"footer"})))}get el(){return this}static get style(){return v()}},[262,"ds-card-overview",{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"],focusedMetricIndex:[32]}]);function h(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-icon","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(a(e))){customElements.define(a(e),f)}break;case"ds-icon":if(!customElements.get(a(e))){d()}break;case"ds-skeleton":if(!customElements.get(a(e))){n()}break;case"ds-text":if(!customElements.get(a(e))){c()}break;case"ds-tooltip":if(!customElements.get(a(e))){t()}break}}))}h();const m=f;const u=h;export{m as DsCardOverview,u as defineCustomElement};
+import{p as e,H as r,c as i,h as o,a as s,t as d}from"./index.js";import{d as a}from"./p-BAfG3M8z.js";import{d as c}from"./p-BUZXuod2.js";import{d as n}from"./p-Ay1AX7Ql.js";import{d as t}from"./p-ohsLFap_.js";import{r as v}from"./p-BJMRBHKW.js";import{T as l}from"./p-C4uYvyq6.js";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,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function m(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 u=()=>`.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-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 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.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);--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);--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);--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)}.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))}.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-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-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);--ds-card-overview-divider:var(--ds-card-overview-divider-width) solid     var(--ds-card-overview-divider-color);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-050);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:clip}.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__layout.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:grid;grid-template-rows:auto minmax(0, 1fr);grid-template-columns:minmax(0, 1fr);align-items:stretch;min-width:0}.card-overview__layout--has-score.sc-ds-card-overview{grid-template-columns:auto minmax(0, 1fr)}.card-overview__summary.sc-ds-card-overview{display:contents}.card-overview__score.sc-ds-card-overview{display:flex;grid-row:1 / span 2;grid-column:1;flex:0 0 auto;flex-direction:column;gap:0;min-width:0;padding:var(--dimension-space-100) var(--dimension-space-200);border-inline-end:var(--ds-card-overview-divider)}.card-overview__score--resolved.sc-ds-card-overview{min-inline-size:max-content}.card-overview__score-label-row.sc-ds-card-overview{display:flex;align-items:center;min-height:var(--ds-control-height)}.card-overview__score-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0;margin-block-start:calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)))}.card-overview__score-value.sc-ds-card-overview{flex:0 0 auto}.card-overview__score-band.sc-ds-card-overview{margin-block-start:calc(-1 * var(--dimension-space-025))}.card-overview__skeleton-baseline.sc-ds-card-overview{position:relative;inset-block-start:calc(-1 * var(--dimension-space-150))}.card-overview__score--error.sc-ds-card-overview{flex-direction:row;align-items:center;gap:var(--dimension-space-050);color:var(--color-reference-dark-red-30-l70-c20-bold)}.card-overview__body.sc-ds-card-overview{display:flex;grid-row:2;grid-column:1;flex-direction:column;min-width:0}.card-overview__body--has-score.sc-ds-card-overview{grid-column:2}.card-overview__header.sc-ds-card-overview{display:flex;grid-row:1;grid-column:1;align-items:center;gap:var(--dimension-space-100);min-width:0;padding:var(--dimension-space-100);border-block-end:var(--ds-card-overview-divider);box-sizing:border-box}.card-overview__header--has-score.sc-ds-card-overview{grid-column:2}.card-overview__period.sc-ds-card-overview{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);min-height:var(--ds-control-height);min-width:0;padding-inline:var(--ds-control-padding-inline);overflow:hidden;white-space:nowrap}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 0 auto;align-items:center}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat(     auto-fit,     minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr)   );align-content:stretch;min-width:0;overflow:clip}.card-overview__metric.sc-ds-card-overview{display:flex;position:relative;flex-direction:column;gap:var(--dimension-space-050);min-width:0;padding:var(--dimension-space-175) var(--dimension-space-200);border-radius:0;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)}.card-overview__metric[role='button'].sc-ds-card-overview{cursor:default;-webkit-user-select:none;user-select:none}.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-100);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}@container (max-width: 480px){.sc-ds-card-overview-h .card-overview__layout{grid-template-rows:auto minmax(0, 1fr);grid-template-columns:minmax(0, 1fr)}.sc-ds-card-overview-h .card-overview__summary{display:grid;grid-row:1;grid-column:1;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto;border-block-end:var(--ds-card-overview-divider)}.sc-ds-card-overview-h .card-overview__score{display:grid;grid-row:1;grid-column:1;grid-template-rows:auto auto;grid-template-columns:auto auto;justify-content:start;column-gap:var(--dimension-space-100);width:auto;padding-block-end:var(--dimension-space-100);padding-inline-end:var(--dimension-space-100);border-inline-end:none}.sc-ds-card-overview-h .card-overview__score-label-row{grid-row:1;grid-column:1 / -1;min-height:var(--ds-control-height)}.sc-ds-card-overview-h .card-overview__score-band,.sc-ds-card-overview-h .card-overview__score-figure{grid-row:2;margin-block-start:0}.sc-ds-card-overview-h .card-overview__score-figure{grid-column:1;align-self:baseline;gap:var(--dimension-space-100)}.sc-ds-card-overview-h .card-overview__score-band{grid-column:2;align-self:baseline;display:none}.sc-ds-card-overview-h .card-overview__header{display:grid;grid-row:1;grid-column:2;grid-template-rows:auto auto;align-content:start;gap:0;padding:0;border-block-end:none}.sc-ds-card-overview-h .card-overview__filter{grid-row:1;grid-column:1;align-self:start;justify-self:end;padding:var(--dimension-space-100) var(--dimension-space-100) 0 0}.sc-ds-card-overview-h .card-overview__period{grid-row:2;grid-column:1;flex-direction:column;align-items:flex-end;justify-self:stretch;gap:0;min-height:0;padding-block:var(--dimension-space-150) var(--dimension-space-100);padding-inline:var(--dimension-space-100) var(--dimension-space-200);overflow:visible;text-align:end;white-space:nowrap}.sc-ds-card-overview-h .card-overview__body{grid-row:2;grid-column:1}}.card-overview--stacked.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview{grid-template-rows:auto minmax(0, 1fr);grid-template-columns:minmax(0, 1fr)}.card-overview--stacked.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{display:grid;grid-row:1;grid-column:1;grid-template-columns:minmax(0, 1fr) auto;grid-template-rows:auto;border-block-end:var(--ds-card-overview-divider)}.card-overview--stacked.sc-ds-card-overview-h .card-overview__score.sc-ds-card-overview{display:grid;grid-row:1;grid-column:1;grid-template-rows:auto auto;grid-template-columns:auto auto;justify-content:start;column-gap:var(--dimension-space-100);width:auto;padding-block-end:var(--dimension-space-100);padding-inline-end:var(--dimension-space-100);border-inline-end:none}.card-overview--stacked.sc-ds-card-overview-h .card-overview__score-label-row.sc-ds-card-overview{grid-row:1;grid-column:1 / -1;min-height:var(--ds-control-height)}.card-overview--stacked.sc-ds-card-overview-h .card-overview__score-band.sc-ds-card-overview,.card-overview--stacked.sc-ds-card-overview-h .card-overview__score-figure.sc-ds-card-overview{grid-row:2;margin-block-start:0}.card-overview--stacked.sc-ds-card-overview-h .card-overview__score-figure.sc-ds-card-overview{grid-column:1;align-self:baseline;gap:var(--dimension-space-100)}.card-overview--stacked.sc-ds-card-overview-h .card-overview__score-band.sc-ds-card-overview{grid-column:2;align-self:baseline;display:none}.card-overview--stacked.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview{display:grid;grid-row:1;grid-column:2;grid-template-rows:auto auto;align-content:start;gap:0;padding:0;border-block-end:none}.card-overview--stacked.sc-ds-card-overview-h .card-overview__filter.sc-ds-card-overview{grid-row:1;grid-column:1;align-self:start;justify-self:end;padding:var(--dimension-space-100) var(--dimension-space-100) 0 0}.card-overview--stacked.sc-ds-card-overview-h .card-overview__period.sc-ds-card-overview{grid-row:2;grid-column:1;flex-direction:column;align-items:flex-end;justify-self:stretch;gap:0;min-height:0;padding-block:var(--dimension-space-150) var(--dimension-space-100);padding-inline:var(--dimension-space-100) var(--dimension-space-200);overflow:visible;text-align:end;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{grid-row:2;grid-column:1}.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{height:100%}.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{display:flex;width:100%;height:100%;min-width:0}.card-overview--compact.sc-ds-card-overview-h .card-overview__score.sc-ds-card-overview{display:flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:var(--dimension-space-100);width:auto;height:100%;min-width:0;padding:var(--dimension-space-100) var(--dimension-space-200);border-inline-end:var(--ds-card-overview-divider);box-sizing:border-box}.card-overview--compact.sc-ds-card-overview-h .card-overview__score-label-row.sc-ds-card-overview{display:contents;min-height:0}.card-overview--compact.sc-ds-card-overview-h .card-overview__score-label.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__score-figure.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__trend.sc-ds-card-overview{flex:0 0 auto}.card-overview--compact.sc-ds-card-overview-h .card-overview__score-figure.sc-ds-card-overview{display:flex;align-self:center;align-items:baseline;gap:var(--dimension-space-050);margin-block-start:0}.card-overview--compact.sc-ds-card-overview-h .card-overview__score-band.sc-ds-card-overview{display:none}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview{display:flex;flex:1 1 auto;grid-row:auto;grid-column:auto;align-items:center;gap:var(--dimension-space-100);height:100%;min-width:0;padding:var(--dimension-space-100);border-block-end:none;box-sizing:border-box}.card-overview--compact.sc-ds-card-overview-h .card-overview__period.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:row;align-items:center;gap:var(--dimension-space-050);min-width:0;min-height:var(--ds-control-height);padding-inline:var(--ds-control-padding-inline);overflow:hidden;text-align:start;white-space:nowrap}.card-overview--compact.sc-ds-card-overview-h .card-overview__period-current.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview--compact.sc-ds-card-overview-h .card-overview__period-current.sc-ds-card-overview{flex:0 1 auto}.card-overview--compact.sc-ds-card-overview-h .card-overview__period-comparison.sc-ds-card-overview{flex:1 1 auto}.card-overview--compact.sc-ds-card-overview-h .card-overview__filter.sc-ds-card-overview{display:flex;flex:0 0 auto;align-items:center;padding:0}`;const f="var(--dimension-menu-width-xs)";const g=4;const p=6;const b={positive:"var(--color-reference-dark-green-145-l70-c19-bold)",negative:"var(--color-reference-dark-red-30-l70-c20-bold)",neutral:"var(--color-always-dark-foreground-secondary)"};const _="var(--color-always-dark-foreground-primary)";const x="var(--color-always-dark-foreground-secondary)";const y=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect");this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=f;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.observeLayout()}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null}get hasScore(){return this.score!==undefined||this.scoreErrorMessage!==undefined||this.isLoading}get visibleMetrics(){return this.metrics.slice(0,p)}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=>{if(e>0&&Math.abs(e-this.expandedHeight)>=.5){this.expandedHeight=e}};r(e.getBoundingClientRect().height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const i=e[0]?.contentRect.height;if(i!==undefined)r(i)}));this.layoutResizeObserver.observe(e)}get rovingIndex(){return h(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=m(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric");s[o]?.focus()}bar(e,r,i){return o("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r,i=false){if(!e)return null;return o("ds-text",{as:"span",class:{"card-overview__trend":true,[`card-overview__trend--${e.tone}`]:true},variant:r,emphasis:i,color:b[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(e){if(this.isLoading){if(e){return o("div",{class:"card-overview__score ds-control--md",part:"score"},this.bar("text-body-medium","40px","card-overview__score-label"),o("div",{class:"card-overview__score-figure"},this.bar("text-body-medium","24px"),this.bar("text-body-medium","32px")))}return o("div",{class:"card-overview__score ds-control--md",part:"score"},o("div",{class:"card-overview__score-label-row"}),o("div",{class:"card-overview__score-figure"},this.bar("text-display-medium","56px"),this.bar("text-body-small","24px","card-overview__skeleton-baseline")),this.bar("text-caption","80px","card-overview__score-band card-overview__score-band--loading"))}if(this.scoreErrorMessage){return o("div",{class:"card-overview__score card-overview__score--error",part:"score",role:"alert"},o("ds-icon",{name:"CircleExclamation",size:"sm",color:"inherit","aria-hidden":"true"}),o("ds-text",{as:"span",variant:"text-body-medium",color:"inherit"},this.scoreErrorMessage))}const r=this.score;if(!r)return null;return o("div",{class:"card-overview__score card-overview__score--resolved ds-control--md",part:"score"},o("div",{class:"card-overview__score-label-row"},o("ds-text",{as:"span",class:"card-overview__score-label",variant:"text-body-medium",emphasis:!e,color:x},r.label)),o("div",{class:"card-overview__score-figure"},o("ds-text",{as:"span",class:"card-overview__score-value",variant:e?"text-body-medium":"text-display-medium",emphasis:true,color:_,fontFeature:"tabular-nums"},r.value),this.renderTrend(r.trend,e?"text-body-medium":"text-body-small",!e)),r.band&&!e&&o("ds-text",{as:"span",class:"card-overview__score-band",variant:"text-caption",color:x},r.band))}renderMetric(e,r){const i=!e.isInactive;const s=o("ds-text",{as:"span",class:"card-overview__metric-label",variant:"text-body-small",color:x},e.label);return o("div",{class:{"card-overview__metric":true,"card-overview__metric--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},part:"metric",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}},e.labelTooltip?o("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},s):s,o("div",{class:"card-overview__metric-figure"},o("ds-text",{as:"span",class:"card-overview__metric-value",variant:"text-body-medium",color:_,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))}renderMetrics(){if(this.isLoading&&this.metrics.length===0){return Array.from({length:g},((e,r)=>o("div",{class:"card-overview__metric",key:`loading-${r}`},this.bar("text-body-small","70%","card-overview__metric-label"),o("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","36px"),this.bar("text-body-medium","40px")))))}return this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))}render(){const e=Boolean(this.periodLabel||this.comparisonLabel);const r=this.variant==="compact";const i=this.scrollCollapseGeometry;return o(s,{key:"c3f6b2c5d448999b60c2e1fe5872b755b13d9310",class:{"card-overview":true,"card-overview--has-score":this.hasScore,"card-overview--compact":r,"card-overview--stacked":!r&&this.layout==="stacked","card-overview--scroll-collapsing":i.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:{"--ds-card-overview-metric-min":this.metricMinWidth,"--ds-card-overview-expanded-height":i.active?`${i.expandedHeight}px`:undefined,"--ds-card-overview-visible-height":i.active?`${i.visibleHeight}px`:undefined,"--ds-card-overview-content-offset":i.active?`${i.offset}px`:undefined}},o("div",{key:"f73a60b5716e042c3bd326c7bd34342a8d0d631d",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!r,"ds-control-elevation--floating":r}},o("div",{key:"5b6f34d08334cff80e0e27ec2a8908ab1792474c",class:"card-overview__clip"},o("div",{key:"7753b62f398a2efe2a2a6a6206c2456726494fb8",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true,"card-overview__layout--has-score":this.hasScore}},o("div",{key:"2bc3185c6f19c63a264f940202136e3859f6726b",class:"card-overview__summary"},this.hasScore&&this.renderScore(r),o("div",{key:"563341559360db9bd4ca2cdc374f8d33922084e6",class:{"card-overview__header":true,"card-overview__header--has-score":this.hasScore,"ds-control--md":true}},this.isLoading?o("div",{class:"card-overview__period ds-control-label-box"},this.bar("text-body-medium","184px"),this.bar("text-body-medium","248px")):e&&o("div",{class:"card-overview__period ds-control-label-box"},this.periodLabel&&o("ds-text",{as:"span",class:"card-overview__period-current ds-control-label-box",variant:"text-body-medium",emphasis:true,color:_},this.periodLabel),this.comparisonLabel&&o("ds-text",{as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:x},this.comparisonLabel)),o("div",{key:"38842ff5bf3314cd64ad3ba2267d4892c1c713f7",class:"card-overview__filter"},this.isLoading?o("ds-skeleton",{variant:"control",controlSize:"md",width:"128px",background:"always-dark"}):o("slot",{name:"filter"})))),!r&&o("div",{key:"f921bd6d7828e9d0c657e224986e0623fdc8d751",class:{"card-overview__body":true,"card-overview__body--has-score":this.hasScore}},o("div",{key:"9cf323cecd96b7838d1039b6e3142d2bcd672a1f",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),o("slot",{key:"bb1a40b77813b2b36373613b22aa98181eb49a84",name:"footer"}))))))}get el(){return this}static get style(){return u()}},[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]}]);function k(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-icon","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(d(e))){customElements.define(d(e),y)}break;case"ds-icon":if(!customElements.get(d(e))){a()}break;case"ds-skeleton":if(!customElements.get(d(e))){c()}break;case"ds-text":if(!customElements.get(d(e))){n()}break;case"ds-tooltip":if(!customElements.get(d(e))){t()}break}}))}k();const z=y;const M=k;export{z as DsCardOverview,M as defineCustomElement};
 //# sourceMappingURL=ds-card-overview.js.map