@ds-mo/ui 12.6.2 → 12.8.0

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

@@ -1,2 +1,2 @@
-import{p as s,H as i,c as o,h as t,a as e,t as a}from"./index.js";import{d as n}from"./p-CaRyxTMz.js";import{d as r}from"./p-BbgPGF2a.js";import{d as l}from"./p-DPME1wUJ.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as b}from"./p-uQhuDEVt.js";import{d as h}from"./p-DUlqUNbE.js";import{d as m}from"./p-B9bxDfZV.js";import{d as f}from"./p-DwX7UmLl.js";import{d as p}from"./p-DYcC5-R9.js";import{d as w}from"./p-BwGnhInj.js";import{d as u}from"./p-DWdRSOBV.js";const k=()=>`.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}.sc-ds-bar-workflow-h{display:block;min-width:0;box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow.sc-ds-bar-workflow{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-100);height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box;background:var(--color-background-bold-brand)}.bar-workflow__identity.sc-ds-bar-workflow{display:flex;flex:1 1 auto;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-400);min-width:0}.bar-workflow__heading.sc-ds-bar-workflow{display:inline-flex;flex:1 1 auto;align-items:center;width:auto;min-width:0;height:var(--dimension-size-400);padding-inline:calc(var(--ds-control-padding-inline) + var(--ds-control-label-inset));box-sizing:border-box;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 i{constructor(s){super();if(s!==false){this.__registerHost()}this.dsExit=o(this,"dsExit");this.dsStepChange=o(this,"dsStepChange");this.dsSubmit=o(this,"dsSubmit");this.steps=[];this.value="";this.exitLabel="Exit";this.exitAriaLabel="Exit workflow";this.previousLabel="Previous step";this.nextLabel="Next step";this.submitAction={label:"Save",type:"submit"};this.isNextInactive=false;this.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 i=this.submitAction;return t("ds-tooltip",{slot:s,label:i.label,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__submit",variant:"icon",icon:"Check",label:i.label,"aria-label":i.label,intent:"brand",contrast:"faint",background:"bold",size:"md",type:i.type??"submit",isInactive:i.isInactive,isLoading:i.isLoading,onDsClick:s=>this.dsSubmit.emit(s.detail)}))}renderMobile(){return t("ds-mobile-header",{class:"bar-workflow__mobile",heading:this.resolvedHeading,tone:"brand"},t("ds-tooltip",{slot:"leading",label:this.exitLabel,side:"bottom",size:"sm"},t("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?t("ds-tooltip",{slot:"trailing",label:this.previousLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?this.renderSubmit("trailing"):t("ds-tooltip",{slot:"trailing",label:this.nextLabel,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext})))}renderDesktop(){return t("div",{class:"bar-workflow"},t("div",{class:"bar-workflow__identity"},t("ds-tooltip",{label:this.exitLabel,side:"bottom",size:"sm"},t("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)})),t("ds-text",{class:"bar-workflow__heading ds-control--md",variant:"text-title-small",emphasis:true,color:"on-bold",as:"h1",lineTruncation:1},this.resolvedHeading)),t("div",{class:"bar-workflow__actions"},this.previousStep?t("ds-tooltip",{label:this.previousLabel,side:"bottom",size:"sm"},t("ds-button-unfilled",{class:"bar-workflow__previous",variant:"icon",icon:"ChevronLeft","aria-label":this.previousLabel,size:"md",background:"bold",activeFill:false,hasBorder:false,isInactive:this.previousStep.isInactive,onDsClick:this.handlePrevious})):null,this.isLastStep?this.renderSubmit():t("ds-tooltip",{label:this.nextLabel,side:"bottom",size:"sm"},t("ds-button-filled",{class:"bar-workflow__next",variant:"icon",icon:"ChevronRight",label:this.nextLabel,"aria-label":this.nextLabel,intent:"brand",contrast:"faint",background:"bold",size:"md",type:"button",isInactive:this.isNextInactive||this.nextStep?.isInactive,onDsClick:this.handleNext}))))}render(){return t(e,{key:"abdaf3d4a7ec9c9440c2354956cc1b1c48d26c95"},this.responsiveMode==="mobile"?this.renderMobile():this.renderDesktop())}static get style(){return k()}},[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(a(s))){customElements.define(a(s),g)}break;case"ds-badge":if(!customElements.get(a(s))){n()}break;case"ds-button-filled":if(!customElements.get(a(s))){r()}break;case"ds-button-unfilled":if(!customElements.get(a(s))){l()}break;case"ds-icon":if(!customElements.get(a(s))){d()}break;case"ds-loader":if(!customElements.get(a(s))){c()}break;case"ds-menu":if(!customElements.get(a(s))){b()}break;case"ds-mobile-header":if(!customElements.get(a(s))){h()}break;case"ds-mobile-section-switcher":if(!customElements.get(a(s))){m()}break;case"ds-swatch-picker":if(!customElements.get(a(s))){f()}break;case"ds-switch":if(!customElements.get(a(s))){p()}break;case"ds-text":if(!customElements.get(a(s))){w()}break;case"ds-tooltip":if(!customElements.get(a(s))){u()}break}}))}v();const x=g;const _=v;export{x as DsBarWorkflow,_ 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-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};
 //# sourceMappingURL=ds-bar-workflow.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["barWorkflowCss","BarWorkflow","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","steps","value","exitLabel","exitAriaLabel","previousLabel","nextLabel","submitAction","label","type","isNextInactive","responsiveMode","handlePrevious","previousStep","isInactive","dsStepChange","emit","id","handleNext","nextStep","currentIndex","index","findIndex","step","isLastStep","length","resolvedHeading","heading","renderSubmit","slot","submit","h","side","size","class","variant","icon","intent","contrast","background","isLoading","onDsClick","event","dsSubmit","detail","renderMobile","tone","activeFill","hasBorder","dsExit","renderDesktop","emphasis","color","as","lineTruncation","render","Host","key"],"sources":["src/wc/components/BarWorkflow/BarWorkflow.css?tag=ds-bar-workflow&encapsulation=scoped","src/wc/components/BarWorkflow/BarWorkflow.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-bold-brand);\n}\n\n.bar-workflow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-600);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  box-sizing: border-box;\n  background: var(--color-background-bold-brand);\n}\n\n.bar-workflow__identity {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n.bar-workflow__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  width: auto;\n  min-width: 0;\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  user-select: none;\n}\n\n.bar-workflow__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport type { BarWorkflowStep, BarWorkflowSubmitAction } from './bar-workflow-types';\n\n@Component({\n  tag: 'ds-bar-workflow',\n  styleUrl: 'BarWorkflow.css',\n  scoped: true,\n})\nexport class BarWorkflow {\n  /** The workflow's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Ordered workflow steps. Step state is controlled by the application. */\n  @Prop() steps: BarWorkflowStep[] = [];\n\n  /** Id of the current workflow step. Falls back to the first step. */\n  @Prop() value: string = '';\n\n  /** Concise tooltip label for the Exit control. */\n  @Prop() exitLabel: string = 'Exit';\n\n  /** Workflow-specific accessible name for Exit. */\n  @Prop() exitAriaLabel: string = 'Exit workflow';\n\n  /** Tooltip and accessible name for the previous-step control. */\n  @Prop() previousLabel: string = 'Previous step';\n\n  /** Tooltip and accessible name for the next-step control. */\n  @Prop() nextLabel: string = 'Next step';\n\n  /** The final-step Save or Submit action. */\n  @Prop() submitAction: BarWorkflowSubmitAction = {\n    label: 'Save',\n    type: 'submit',\n  };\n\n  /** Prevent advancing while the current step is incomplete or invalid. */\n  @Prop() isNextInactive: boolean = false;\n\n  /** Explicit shell breakpoint presentation. Mobile keeps the same controlled workflow state. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n\n  /** Emitted when Exit is activated. */\n  @Event() dsExit!: EventEmitter<MouseEvent>;\n\n  /** Emitted with the target previous or next step id. The component never mutates value. */\n  @Event() dsStepChange!: EventEmitter<string>;\n\n  /** Emitted when the final Save or Submit control is activated. */\n  @Event() dsSubmit!: EventEmitter<MouseEvent>;\n\n  private get currentIndex(): number {\n    const index = this.steps.findIndex(step => step.id === this.value);\n    return index >= 0 ? index : 0;\n  }\n\n  private get previousStep(): BarWorkflowStep | null {\n    return this.steps[this.currentIndex - 1] ?? null;\n  }\n\n  private get nextStep(): BarWorkflowStep | null {\n    return this.steps[this.currentIndex + 1] ?? null;\n  }\n\n  private get isLastStep(): boolean {\n    return this.steps.length <= 1 || this.currentIndex === this.steps.length - 1;\n  }\n\n  private get resolvedHeading(): string {\n    if (this.steps.length <= 1) return this.heading;\n    return `${this.heading} · ${this.currentIndex + 1}/${this.steps.length}`;\n  }\n\n  private handlePrevious = () => {\n    if (this.previousStep && !this.previousStep.isInactive) {\n      this.dsStepChange.emit(this.previousStep.id);\n    }\n  };\n\n  private handleNext = () => {\n    if (this.nextStep && !this.isNextInactive && !this.nextStep.isInactive) {\n      this.dsStepChange.emit(this.nextStep.id);\n    }\n  };\n\n  private renderSubmit(slot?: 'trailing') {\n    const submit = this.submitAction;\n    return (\n      <ds-tooltip slot={slot} label={submit.label} side=\"bottom\" size=\"sm\">\n        <ds-button-filled\n          class=\"bar-workflow__submit\"\n          variant=\"icon\"\n          icon=\"Check\"\n          label={submit.label}\n          aria-label={submit.label}\n          intent=\"brand\"\n          contrast=\"faint\"\n          background=\"bold\"\n          size=\"md\"\n          type={submit.type ?? 'submit'}\n          isInactive={submit.isInactive}\n          isLoading={submit.isLoading}\n          onDsClick={(event: CustomEvent<MouseEvent>) => this.dsSubmit.emit(event.detail)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderMobile() {\n    return (\n      <ds-mobile-header\n        class=\"bar-workflow__mobile\"\n        heading={this.resolvedHeading}\n        tone=\"brand\"\n      >\n        <ds-tooltip slot=\"leading\" label={this.exitLabel} side=\"bottom\" size=\"sm\">\n          <ds-button-unfilled\n            class=\"bar-workflow__exit\"\n            variant=\"icon\"\n            icon=\"Cross\"\n            aria-label={this.exitAriaLabel}\n            size=\"md\"\n            background=\"bold\"\n            activeFill={false}\n            hasBorder={false}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.dsExit.emit(event.detail)}\n          />\n        </ds-tooltip>\n\n        {this.previousStep ? (\n          <ds-tooltip slot=\"trailing\" label={this.previousLabel} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              class=\"bar-workflow__previous\"\n              variant=\"icon\"\n              icon=\"ChevronLeft\"\n              aria-label={this.previousLabel}\n              size=\"md\"\n              background=\"bold\"\n              activeFill={false}\n              hasBorder={false}\n              isInactive={this.previousStep.isInactive}\n              onDsClick={this.handlePrevious}\n            />\n          </ds-tooltip>\n        ) : null}\n\n        {this.isLastStep ? (\n          this.renderSubmit('trailing')\n        ) : (\n          <ds-tooltip slot=\"trailing\" label={this.nextLabel} side=\"bottom\" size=\"sm\">\n            <ds-button-filled\n              class=\"bar-workflow__next\"\n              variant=\"icon\"\n              icon=\"ChevronRight\"\n              label={this.nextLabel}\n              aria-label={this.nextLabel}\n              intent=\"brand\"\n              contrast=\"faint\"\n              background=\"bold\"\n              size=\"md\"\n              type=\"button\"\n              isInactive={this.isNextInactive || this.nextStep?.isInactive}\n              onDsClick={this.handleNext}\n            />\n          </ds-tooltip>\n        )}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"bar-workflow\">\n          <div class=\"bar-workflow__identity\">\n            <ds-tooltip label={this.exitLabel} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                class=\"bar-workflow__exit\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                aria-label={this.exitAriaLabel}\n                size=\"md\"\n                background=\"bold\"\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => this.dsExit.emit(event.detail)}\n              />\n            </ds-tooltip>\n            <ds-text\n              class=\"bar-workflow__heading ds-control--md\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"on-bold\"\n              as=\"h1\"\n              lineTruncation={1}\n            >\n              {this.resolvedHeading}\n            </ds-text>\n          </div>\n\n          <div class=\"bar-workflow__actions\">\n            {this.previousStep ? (\n              <ds-tooltip label={this.previousLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  class=\"bar-workflow__previous\"\n                  variant=\"icon\"\n                  icon=\"ChevronLeft\"\n                  aria-label={this.previousLabel}\n                  size=\"md\"\n                  background=\"bold\"\n                  activeFill={false}\n                  hasBorder={false}\n                  isInactive={this.previousStep.isInactive}\n                  onDsClick={this.handlePrevious}\n                />\n              </ds-tooltip>\n            ) : null}\n\n            {this.isLastStep ? (\n              this.renderSubmit()\n            ) : (\n              <ds-tooltip label={this.nextLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-filled\n                  class=\"bar-workflow__next\"\n                  variant=\"icon\"\n                  icon=\"ChevronRight\"\n                  label={this.nextLabel}\n                  aria-label={this.nextLabel}\n                  intent=\"brand\"\n                  contrast=\"faint\"\n                  background=\"bold\"\n                  size=\"md\"\n                  type=\"button\"\n                  isInactive={this.isNextInactive || this.nextStep?.isInactive}\n                  onDsClick={this.handleNext}\n                />\n              </ds-tooltip>\n            )}\n          </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.responsiveMode === 'mobile' ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["barWorkflowCss","BarWorkflow","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","steps","value","exitLabel","exitAriaLabel","previousLabel","nextLabel","submitAction","label","type","isNextInactive","responsiveMode","handlePrevious","previousStep","isInactive","dsStepChange","emit","id","handleNext","nextStep","currentIndex","index","findIndex","step","isLastStep","length","resolvedHeading","heading","renderSubmit","slot","submit","h","side","size","class","variant","icon","intent","contrast","background","isLoading","onDsClick","event","dsSubmit","detail","renderMobile","tone","activeFill","hasBorder","dsExit","renderDesktop","emphasis","color","as","lineTruncation","render","Host","key"],"sources":["src/wc/components/BarWorkflow/BarWorkflow.css?tag=ds-bar-workflow&encapsulation=scoped","src/wc/components/BarWorkflow/BarWorkflow.tsx"],"sourcesContent":["@import '../../utils/control-density.css';\n@import '../../utils/chrome-layout.css';\n\n:host {\n  display: block;\n  min-width: 0;\n  box-sizing: border-box;\n  background: var(--color-background-bold-brand);\n}\n\n.bar-workflow {\n  justify-content: space-between;\n  height: var(--dimension-size-600);\n  min-width: 0;\n  background: var(--color-background-bold-brand);\n}\n\n.bar-workflow__identity {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-400);\n  min-width: 0;\n}\n\n.bar-workflow__heading {\n  display: inline-flex;\n  flex: 1 1 auto;\n  align-items: center;\n  width: auto;\n  min-width: 0;\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  user-select: none;\n}\n\n.bar-workflow__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--dimension-space-100);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ShellResponsiveMode } from '../../shell/shell-responsive';\nimport type { BarWorkflowStep, BarWorkflowSubmitAction } from './bar-workflow-types';\n\n@Component({\n  tag: 'ds-bar-workflow',\n  styleUrl: 'BarWorkflow.css',\n  scoped: true,\n})\nexport class BarWorkflow {\n  /** The workflow's single visible h1. */\n  @Prop() heading!: string;\n\n  /** Ordered workflow steps. Step state is controlled by the application. */\n  @Prop() steps: BarWorkflowStep[] = [];\n\n  /** Id of the current workflow step. Falls back to the first step. */\n  @Prop() value: string = '';\n\n  /** Concise tooltip label for the Exit control. */\n  @Prop() exitLabel: string = 'Exit';\n\n  /** Workflow-specific accessible name for Exit. */\n  @Prop() exitAriaLabel: string = 'Exit workflow';\n\n  /** Tooltip and accessible name for the previous-step control. */\n  @Prop() previousLabel: string = 'Previous step';\n\n  /** Tooltip and accessible name for the next-step control. */\n  @Prop() nextLabel: string = 'Next step';\n\n  /** The final-step Save or Submit action. */\n  @Prop() submitAction: BarWorkflowSubmitAction = {\n    label: 'Save',\n    type: 'submit',\n  };\n\n  /** Prevent advancing while the current step is incomplete or invalid. */\n  @Prop() isNextInactive: boolean = false;\n\n  /** Explicit shell breakpoint presentation. Mobile keeps the same controlled workflow state. */\n  @Prop({ attribute: 'responsive-mode', reflect: true })\n  responsiveMode: ShellResponsiveMode = 'desktop';\n\n  /** Emitted when Exit is activated. */\n  @Event() dsExit!: EventEmitter<MouseEvent>;\n\n  /** Emitted with the target previous or next step id. The component never mutates value. */\n  @Event() dsStepChange!: EventEmitter<string>;\n\n  /** Emitted when the final Save or Submit control is activated. */\n  @Event() dsSubmit!: EventEmitter<MouseEvent>;\n\n  private get currentIndex(): number {\n    const index = this.steps.findIndex(step => step.id === this.value);\n    return index >= 0 ? index : 0;\n  }\n\n  private get previousStep(): BarWorkflowStep | null {\n    return this.steps[this.currentIndex - 1] ?? null;\n  }\n\n  private get nextStep(): BarWorkflowStep | null {\n    return this.steps[this.currentIndex + 1] ?? null;\n  }\n\n  private get isLastStep(): boolean {\n    return this.steps.length <= 1 || this.currentIndex === this.steps.length - 1;\n  }\n\n  private get resolvedHeading(): string {\n    if (this.steps.length <= 1) return this.heading;\n    return `${this.heading} · ${this.currentIndex + 1}/${this.steps.length}`;\n  }\n\n  private handlePrevious = () => {\n    if (this.previousStep && !this.previousStep.isInactive) {\n      this.dsStepChange.emit(this.previousStep.id);\n    }\n  };\n\n  private handleNext = () => {\n    if (this.nextStep && !this.isNextInactive && !this.nextStep.isInactive) {\n      this.dsStepChange.emit(this.nextStep.id);\n    }\n  };\n\n  private renderSubmit(slot?: 'trailing') {\n    const submit = this.submitAction;\n    return (\n      <ds-tooltip slot={slot} label={submit.label} side=\"bottom\" size=\"sm\">\n        <ds-button-filled\n          class=\"bar-workflow__submit\"\n          variant=\"icon\"\n          icon=\"Check\"\n          label={submit.label}\n          aria-label={submit.label}\n          intent=\"brand\"\n          contrast=\"faint\"\n          background=\"bold\"\n          size=\"md\"\n          type={submit.type ?? 'submit'}\n          isInactive={submit.isInactive}\n          isLoading={submit.isLoading}\n          onDsClick={(event: CustomEvent<MouseEvent>) => this.dsSubmit.emit(event.detail)}\n        />\n      </ds-tooltip>\n    );\n  }\n\n  private renderMobile() {\n    return (\n      <ds-mobile-header\n        class=\"bar-workflow__mobile\"\n        heading={this.resolvedHeading}\n        tone=\"brand\"\n      >\n        <ds-tooltip slot=\"leading\" label={this.exitLabel} side=\"bottom\" size=\"sm\">\n          <ds-button-unfilled\n            class=\"bar-workflow__exit\"\n            variant=\"icon\"\n            icon=\"Cross\"\n            aria-label={this.exitAriaLabel}\n            size=\"md\"\n            background=\"bold\"\n            activeFill={false}\n            hasBorder={false}\n            onDsClick={(event: CustomEvent<MouseEvent>) => this.dsExit.emit(event.detail)}\n          />\n        </ds-tooltip>\n\n        {this.previousStep ? (\n          <ds-tooltip slot=\"trailing\" label={this.previousLabel} side=\"bottom\" size=\"sm\">\n            <ds-button-unfilled\n              class=\"bar-workflow__previous\"\n              variant=\"icon\"\n              icon=\"ChevronLeft\"\n              aria-label={this.previousLabel}\n              size=\"md\"\n              background=\"bold\"\n              activeFill={false}\n              hasBorder={false}\n              isInactive={this.previousStep.isInactive}\n              onDsClick={this.handlePrevious}\n            />\n          </ds-tooltip>\n        ) : null}\n\n        {this.isLastStep ? (\n          this.renderSubmit('trailing')\n        ) : (\n          <ds-tooltip slot=\"trailing\" label={this.nextLabel} side=\"bottom\" size=\"sm\">\n            <ds-button-filled\n              class=\"bar-workflow__next\"\n              variant=\"icon\"\n              icon=\"ChevronRight\"\n              label={this.nextLabel}\n              aria-label={this.nextLabel}\n              intent=\"brand\"\n              contrast=\"faint\"\n              background=\"bold\"\n              size=\"md\"\n              type=\"button\"\n              isInactive={this.isNextInactive || this.nextStep?.isInactive}\n              onDsClick={this.handleNext}\n            />\n          </ds-tooltip>\n        )}\n      </ds-mobile-header>\n    );\n  }\n\n  private renderDesktop() {\n    return (\n      <div class=\"bar-workflow ds-chrome-row ds-chrome-space--md\">\n          <div class=\"bar-workflow__identity\">\n            <ds-tooltip label={this.exitLabel} side=\"bottom\" size=\"sm\">\n              <ds-button-unfilled\n                class=\"bar-workflow__exit\"\n                variant=\"icon\"\n                icon=\"Cross\"\n                aria-label={this.exitAriaLabel}\n                size=\"md\"\n                background=\"bold\"\n                activeFill={false}\n                hasBorder={false}\n                onDsClick={(event: CustomEvent<MouseEvent>) => this.dsExit.emit(event.detail)}\n              />\n            </ds-tooltip>\n            <ds-text\n              class=\"bar-workflow__heading ds-control--md\"\n              variant=\"text-title-small\"\n              emphasis\n              color=\"on-bold\"\n              as=\"h1\"\n              lineTruncation={1}\n            >\n              {this.resolvedHeading}\n            </ds-text>\n          </div>\n\n          <div class=\"bar-workflow__actions\">\n            {this.previousStep ? (\n              <ds-tooltip label={this.previousLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-unfilled\n                  class=\"bar-workflow__previous\"\n                  variant=\"icon\"\n                  icon=\"ChevronLeft\"\n                  aria-label={this.previousLabel}\n                  size=\"md\"\n                  background=\"bold\"\n                  activeFill={false}\n                  hasBorder={false}\n                  isInactive={this.previousStep.isInactive}\n                  onDsClick={this.handlePrevious}\n                />\n              </ds-tooltip>\n            ) : null}\n\n            {this.isLastStep ? (\n              this.renderSubmit()\n            ) : (\n              <ds-tooltip label={this.nextLabel} side=\"bottom\" size=\"sm\">\n                <ds-button-filled\n                  class=\"bar-workflow__next\"\n                  variant=\"icon\"\n                  icon=\"ChevronRight\"\n                  label={this.nextLabel}\n                  aria-label={this.nextLabel}\n                  intent=\"brand\"\n                  contrast=\"faint\"\n                  background=\"bold\"\n                  size=\"md\"\n                  type=\"button\"\n                  isInactive={this.isNextInactive || this.nextStep?.isInactive}\n                  onDsClick={this.handleNext}\n                />\n              </ds-tooltip>\n            )}\n          </div>\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.responsiveMode === 'mobile' ? this.renderMobile() : this.renderDesktop()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-breadcrumb.js

@@ -1,2 +1,2 @@
-import{B as s,d as o}from"./p-DqubRds2.js";const t=s;const p=o;export{t as DsBreadcrumb,p as defineCustomElement};
+import{B as o,d as s}from"./p-G3qIxpQj.js";const p=o;const t=s;export{p 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-BbgPGF2a.js";const t=o;const a=s;export{t as DsButtonFilled,a as defineCustomElement};
+import{B as o,d as s}from"./p-DzM3SzPz.js";const t=o;const p=s;export{t as DsButtonFilled,p 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-DPME1wUJ.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
+import{B as o,d as s}from"./p-huw1oRbt.js";const t=o;const p=s;export{t as DsButtonUnfilled,p as defineCustomElement};
 //# sourceMappingURL=ds-button-unfilled.js.map

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

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

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

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

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

@@ -1,2 +1,2 @@
-import{p as t,H as a,c as e,h as s,a as d,t as i}from"./index.js";import{d as n}from"./p-CaRyxTMz.js";import{d as o}from"./p-DPME1wUJ.js";import{d as c}from"./p-DSa0Hnd3.js";import{d as r}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as h}from"./p-BwGnhInj.js";const m=()=>`.sc-ds-card-data-viz-donut-h{display:contents}.card-data-viz-donut__layout.sc-ds-card-data-viz-donut{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;height:100%;gap:var(--dimension-space-200);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut{flex:1 1 auto;min-height:0;display:grid;padding:var(--dimension-space-400) var(--dimension-space-400) 0 var(--dimension-space-400);box-sizing:border-box}.card-data-viz-donut__chart-region.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.card-data-viz-donut__legend-region.sc-ds-card-data-viz-donut{flex:0 0 auto;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);box-sizing:border-box}`;const u=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=e(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const a=this.el.querySelector('[slot="legend"]');if(!a||!("activeLabel"in a))return;a.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const a=this.el.querySelector('[slot="chart"]');if(!a||!("activeLabel"in a))return;a.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const t=this.el.querySelector('[slot="chart"]');if(!t||!("showTooltip"in t))return;t.showTooltip=!this.hasLegendSlot}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return s(d,{key:"77d2c66100bcd0859ac154f45a5496d2bc112594",class:"card-data-viz-donut"},s("ds-card-shell-data-viz",{key:"2b27e2c0db1bcbe56253845922bcc52f768735ea",heading:this.heading,cardWidth:this.cardWidth},s("ds-button-unfilled",{key:"7ee7f87447ce938b4d89958a5ae000995ddaee34",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),s("div",{key:"fc16ef32cb38951adda2e331790b8cd5388318f1",class:"card-data-viz-donut__layout"},this.hasChartSlot&&s("div",{key:"d7485fc652520a1bcb45b07c77be22835025e846",class:"card-data-viz-donut__chart-region"},s("slot",{key:"70f030bb2750c87316ae709ddb7ee6de5aa977dc",name:"chart"})),this.hasLegendSlot&&s("div",{key:"acd4395d7f8665e1105aac533520895d1241190b",class:"card-data-viz-donut__legend-region"},s("slot",{key:"348e5dab2a30b074b62546b05d82fedf181ea80a",name:"legend"})))))}get el(){return this}static get style(){return m()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),u)}break;case"ds-badge":if(!customElements.get(i(t))){n()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){o()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){c()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}b();const f=u;const v=b;export{f as DsCardDataVizDonut,v as defineCustomElement};
+import{p as t,H as a,c as s,h as d,a as e,t as i}from"./index.js";import{d as c}from"./p-BFRMwl93.js";import{d as n}from"./p-huw1oRbt.js";import{d as o}from"./p-BXaieghV.js";import{d as r}from"./p-BAfG3M8z.js";import{d as l}from"./p-Ca-I2UnB.js";import{d as h}from"./p-CPwpgUWT.js";const f=()=>`.ds-data-viz-card-layout.sc-ds-card-data-viz-donut{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;gap:var(--dimension-space-200)}.ds-data-viz-card-chart.sc-ds-card-data-viz-donut{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)}.ds-data-viz-card-chart.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%}.ds-data-viz-card-chart--fill.sc-ds-card-data-viz-donut>*.sc-ds-card-data-viz-donut{height:100%;min-height:0;max-height:100%}.ds-data-viz-card-legend.sc-ds-card-data-viz-donut{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100)     var(--dimension-space-100)}.sc-ds-card-data-viz-donut-h{display:contents}`;const m=t(class t extends a{constructor(t){super();if(t!==false){this.__registerHost()}this.dsFilterClick=s(this,"dsFilterClick");this.cardWidth="md";this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleChartHover=t=>{const a=this.el.querySelector('[slot="legend"]');if(!a||!("activeLabel"in a))return;a.activeLabel=t.detail?.label??null};this.handleLegendHover=t=>{const a=this.el.querySelector('[slot="chart"]');if(!a||!("activeLabel"in a))return;a.activeLabel=t.detail?.label??null};this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidLoad(){this.el.addEventListener("dsSliceHover",this.handleChartHover);this.el.addEventListener("dsItemHover",this.handleLegendHover)}componentDidRender(){const t=this.el.querySelector('[slot="chart"]');if(!t||!("showTooltip"in t))return;t.showTooltip=!this.hasLegendSlot}disconnectedCallback(){this.el.removeEventListener("dsSliceHover",this.handleChartHover);this.el.removeEventListener("dsItemHover",this.handleLegendHover)}render(){return d(e,{key:"9567d0cbf7de344d8fdd27e3ee21c8c92e7230aa",class:"card-data-viz-donut"},d("ds-card-shell-data-viz",{key:"be8053bcf51e7904fd5a31ce78bd36f0ca1d854c",heading:this.heading,cardWidth:this.cardWidth},d("ds-button-unfilled",{key:"1faa6bf31952b2e1ed82db451792a48b17744c5b",slot:"actions",variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}),d("div",{key:"3cca9a50e53b95b573c9d230f2cfe183fd908d4e",class:"ds-data-viz-card-layout"},this.hasChartSlot&&d("div",{key:"47223c97bdbf7f360cae26b22fe6801e8a176a82",class:"ds-data-viz-card-chart ds-data-viz-card-chart--fill"},d("slot",{key:"b98a08f273b3946e9b905e5abb3d4bff67ca93ea",name:"chart"})),this.hasLegendSlot&&d("div",{key:"192fed4cc05e976da640833bfb876fc0ff006cb8",class:"ds-data-viz-card-legend"},d("slot",{key:"9c142acfd67846e957aa91347fa7157cde781693",name:"legend"})))))}get el(){return this}static get style(){return f()}},[262,"ds-card-data-viz-donut",{heading:[1],cardWidth:[1,"card-width"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function b(){if(typeof customElements==="undefined"){return}const t=["ds-card-data-viz-donut","ds-badge","ds-button-unfilled","ds-card-shell-data-viz","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-card-data-viz-donut":if(!customElements.get(i(t))){customElements.define(i(t),m)}break;case"ds-badge":if(!customElements.get(i(t))){c()}break;case"ds-button-unfilled":if(!customElements.get(i(t))){n()}break;case"ds-card-shell-data-viz":if(!customElements.get(i(t))){o()}break;case"ds-icon":if(!customElements.get(i(t))){r()}break;case"ds-loader":if(!customElements.get(i(t))){l()}break;case"ds-text":if(!customElements.get(i(t))){h()}break}}))}b();const u=m;const v=b;export{u as DsCardDataVizDonut,v as defineCustomElement};
 //# sourceMappingURL=ds-card-data-viz-donut.js.map

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

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

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

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

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

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

package/dist/components/ds-card-overview.d.ts

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

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

@@ -0,0 +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};
+//# sourceMappingURL=ds-card-overview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardOverviewCss","DEFAULT_METRIC_MIN_WIDTH","LOADING_PLACEHOLDER_COUNT","CardOverview","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","periodLabel","comparisonLabel","metrics","metricMinWidth","isLoading","overviewLabel","focusedMetricIndex","handleMetricKeyDown","event","index","key","preventDefault","moveFocus","hasScore","score","undefined","scoreErrorMessage","rovingIndex","first","findIndex","metric","isInactive","current","selectMetric","dsMetricSelect","emit","from","step","count","length","offset","next","cells","el","querySelectorAll","focus","bar","textVariant","width","className","h","class","variant","background","renderTrend","trend","emphasis","as","tone","color","fontFeature","direction","value","renderScore","part","role","name","size","label","band","renderMetric","selectable","tabIndex","onClick","onKeyDown","onFocusin","labelTooltip","side","renderMetrics","Array","_","map","render","hasHeader","Boolean","Host","style","controlSize"],"sources":["src/wc/components/CardOverview/CardOverview.css?tag=ds-card-overview&encapsulation=scoped","src/wc/components/CardOverview/CardOverview.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/focus-ring.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../styles/control-elevation.css';\n\n/*\n * A permanently dark surface, independent of the page theme, so the summary bar\n * reads the same on every product surface. Every foreground, border, and\n * interaction token below therefore comes from the always-dark family rather\n * than the theme-reactive one.\n */\n\n:host {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  box-sizing: border-box;\n  /* Drives the narrow layout below from the card's own width, not the viewport's. */\n  container-type: inline-size;\n  /* A summary is read, not copied; stray selection while clicking cells is noise. */\n  -webkit-user-select: none;\n  user-select: none;\n  /* Width a metric may shrink to before the grid drops a column. */\n  --ds-card-overview-metric-min: calc(var(--dimension-size-400) * 5);\n  --ds-card-overview-divider: var(--dimension-stroke-width-012) solid\n    var(--color-always-dark-border-tertiary);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-always-dark-background);\n  color: var(--color-always-dark-foreground-primary);\n  /*\n   * Clips the square-cornered metric washes to the card radius. The outer\n   * elevation shadow is painted outside the border box and is unaffected, and\n   * the inset highlight is meant to sit exactly on this edge.\n   */\n  overflow: hidden;\n}\n\n/* ── Score ────────────────────────────────────────────────────────────────── */\n\n/*\n * Hugs its content and never shrinks, so the headline figure keeps its size and\n * the metric grid absorbs the remaining width.\n */\n/*\n * Top aligned rather than centred, and padded to match the header, so the score\n * label sits in the same 32px box at the same offset as the period text beside\n * it. Both use the same type variant, so their baselines land together.\n */\n.card-overview__score {\n  display: flex;\n  flex: 0 0 auto;\n  flex-direction: column;\n  gap: 0;\n  min-width: 0;\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  border-inline-end: var(--ds-card-overview-divider);\n}\n\n/* The control-height box that aligns this label with the period text. */\n.card-overview__score-label-row {\n  display: flex;\n  align-items: center;\n  min-height: var(--ds-control-height);\n}\n\n.card-overview__score-label {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/*\n * The score is its own column, so its rows cannot baseline-align with the measure\n * rows through flex or grid — those only align items that share a line. These two\n * offsets pull the column onto the measure baselines instead.\n *\n * They are compensation for how much lower a display-scale figure sits in its line\n * box than the body text it aligns to, so they are coupled to the type pairing:\n * change the score or measure variants and both need re-measuring.\n */\n.card-overview__score-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  margin-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n}\n\n/* Second half of the baseline compensation described above the score figure. */\n.card-overview__score-band {\n  margin-block-start: calc(-1 * var(--dimension-space-025));\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/*\n * A skeleton bar is a solid block, so in a baseline-aligned row it aligns on its\n * bottom edge while the text it stands in for aligns on its baseline. Next to a\n * display-scale figure that difference is the descent under the figure's\n * baseline, which drops the bar below where the resolved trend sits.\n *\n * The offset is applied with relative positioning rather than a margin: a margin\n * is not part of a synthesized baseline, so it grows the figure instead of moving\n * the bar, which then pushes the band below it out of place.\n *\n * Only needed beside the score figure; the measure rows pair body variants whose\n * bottom edge and baseline already agree.\n */\n.card-overview__skeleton-baseline {\n  position: relative;\n  inset-block-start: calc(-1 * var(--dimension-space-150));\n}\n\n.card-overview__score--error {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  color: var(--color-always-dark-foreground-negative);\n}\n\n/* ── Body ─────────────────────────────────────────────────────────────────── */\n\n/*\n * Takes the remaining inline space. The minimum is what makes the host wrap: once\n * the score and roughly two measure columns no longer fit side by side, the body\n * drops below the score instead of squeezing it. `min()` keeps that from becoming\n * an overflow floor on very narrow viewports.\n */\n.card-overview__body {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  min-width: min(100%, calc(var(--ds-card-overview-metric-min) * 2));\n}\n\n/*\n * One control row: 8px of padding on every side around a 32px md control, so the\n * bar is 8 + 32 + 8. Both ends of the bar are control-shaped boxes — the period\n * text on the left and the slotted control on the right — so the row reads\n * balanced rather than text on one side and a control on the other.\n */\n.card-overview__header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n  padding: var(--dimension-space-100);\n  border-block-end: var(--ds-card-overview-divider);\n  box-sizing: border-box;\n}\n\n/*\n * Matches the control's box on the opposite end, including its inline padding, so\n * the text lands at the same optical inset the slotted control does:\n * 8 from the bar + 6 from this box + 2 from the label inset = 16.\n *\n * Nowrap keeps the row at the control height; the period truncates rather than\n * growing the bar to two lines.\n */\n.card-overview__period {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--ds-control-height);\n  min-width: 0;\n  padding-inline: var(--ds-control-padding-inline);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.card-overview__period-current {\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__period-comparison {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* The period control is slotted, so only reserve space for it. */\n.card-overview__filter {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n}\n\n/* ── Metrics ──────────────────────────────────────────────────────────────── */\n\n/*\n * Reflows to fewer columns and finally stacks from `auto-fit` alone. No observer\n * and no horizontal scroll: a metric never compresses past its minimum, it moves\n * to the next row instead.\n */\n/*\n * Wrapping flex rather than an auto-fit grid, because a grid gives the final row's\n * items their column width and leaves a gap. Flex lets the last row's items grow\n * to fill, so a measure left on its own spans the full width.\n *\n * Dividers are trailing, not leading: a leading divider on the first cell would\n * land exactly on the score's own trailing border and paint it twice. The two\n * negative margins pull the final column's and final row's dividers past the card\n * edge, where the card's `overflow: hidden` clips them, so separators appear\n * between cells without needing to detect which cell ends a row.\n *\n * `flex: 1 1 auto` on the container makes it absorb whatever height the body has\n * left, so cells reach the card bottom and their hover wash has no dead strip.\n */\n.card-overview__metrics {\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  min-width: 0;\n  margin-inline-end: calc(-1 * var(--dimension-stroke-width-012));\n  margin-block-end: calc(-1 * var(--dimension-stroke-width-012));\n}\n\n/*\n * Square by design. Cells tile edge to edge against their dividers, so a radius\n * would break the seam; the card's own radius clips the outer corners instead.\n *\n * Padding is plain rather than control-derived: a cell is a block of content, not\n * a control box that has to optically match something on the far side.\n */\n.card-overview__metric {\n  display: flex;\n  position: relative;\n  flex: 1 1 var(--ds-card-overview-metric-min);\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  min-width: 0;\n  padding: var(--dimension-space-175) var(--dimension-space-200);\n  border-radius: 0;\n  border-inline-end: var(--ds-card-overview-divider);\n  border-block-end: var(--ds-card-overview-divider);\n}\n\n.card-overview__metric[role='button'] {\n  cursor: default;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.card-overview__metric-label {\n  min-width: 0;\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n.card-overview__metric-value {\n  color: var(--color-always-dark-foreground-primary);\n}\n\n.card-overview__metric-figure {\n  display: flex;\n  align-items: baseline;\n  gap: var(--dimension-space-100);\n  min-width: 0;\n}\n\n/* ── Trend ────────────────────────────────────────────────────────────────── */\n\n/*\n * Tone arrives resolved from the caller: the arrow direction and the sentiment\n * are independent, so a falling metric can read positive or neutral. The arrow is\n * a glyph inside this text node, so it always matches the surrounding weight.\n */\n.card-overview__trend {\n  flex: 0 0 auto;\n  white-space: nowrap;\n}\n\n.card-overview__trend--positive {\n  color: var(--color-always-dark-foreground-positive);\n}\n\n.card-overview__trend--negative {\n  color: var(--color-always-dark-foreground-negative);\n}\n\n/*\n * Secondary rather than tertiary: the change value is content, not decoration,\n * and tertiary does not hold a readable contrast at this size.\n */\n.card-overview__trend--neutral {\n  color: var(--color-always-dark-foreground-secondary);\n}\n\n/* ── Narrow layout ────────────────────────────────────────────────────────── */\n\n/*\n * Below roughly two measure columns the card stops being a bar with a leading\n * score and becomes a stack. The score turns into its own full-width row reading\n * left to right, so its divider moves from the trailing edge to the underside and\n * the period bar spans the full width beneath it.\n */\n/*\n * Selectors are host-qualified purely for specificity: the compiled sheet places\n * these rules ahead of the base ones, so a plain class here would only ever add\n * properties and never override them.\n */\n@container (max-width: 480px) {\n  :host .card-overview__score {\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--dimension-space-100);\n    width: 100%;\n    padding-block: var(--dimension-space-150);\n    border-inline-end: none;\n    border-block-end: var(--ds-card-overview-divider);\n  }\n\n  /* Pushes the figure and band to the trailing edge, opposite the label. */\n  :host .card-overview__score-label-row {\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n\n  /* The vertical rhythm that aligned these to the measure rows no longer applies. */\n  :host .card-overview__score-band,\n  :host .card-overview__score-figure {\n    margin-block-start: 0;\n  }\n\n  /*\n   * Here the band joins the baseline-aligned row, so the band skeleton needs the\n   * same lift the trend skeleton gets: a solid bar synthesizes its baseline from\n   * its bottom edge and would otherwise hang below the figure's baseline. The\n   * column layout aligns the band by margin instead, so this is narrow-only.\n   */\n  :host .card-overview__score-band--loading {\n    position: relative;\n    inset-block-start: calc(-1 * (var(--dimension-space-150) + var(--dimension-space-012)));\n  }\n\n  /*\n   * The period gets a full-width row of its own here, but not enough of it for\n   * both parts on one line. Wrapping keeps the comparison readable; holding the\n   * single-line rule instead collides the two runs of text.\n   */\n  :host .card-overview__header {\n    align-items: flex-start;\n  }\n\n  :host .card-overview__period {\n    flex-wrap: wrap;\n    min-height: 0;\n    overflow: visible;\n    white-space: normal;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { TextVariant } from '../Text/text-types';\nimport type { MetricTrend } from '../../utils/metric-change';\nimport type { OverviewMetric, OverviewScore } from './card-overview-types';\n\n/** Metric cells below this width drop a grid column rather than compress further. */\nconst DEFAULT_METRIC_MIN_WIDTH = 'var(--dimension-menu-width-xs)';\n\n/** Skeleton cells rendered while loading with no metrics supplied yet. */\nconst LOADING_PLACEHOLDER_COUNT = 4;\n\n@Component({\n  tag: 'ds-card-overview',\n  styleUrl: 'CardOverview.css',\n  scoped: true,\n})\nexport class CardOverview {\n  @Element() el!: HTMLElement;\n\n  /** Leading summary block. Omit to render the bar without a headline figure. */\n  @Prop() score: OverviewScore | undefined;\n\n  /** Current reporting period, for example `Jun 29, 2026 – Jul 26, 2026`. */\n  @Prop() periodLabel: string = '';\n\n  /** Comparison caption, for example `vs. previous score period`. */\n  @Prop() comparisonLabel: string = '';\n\n  /** Measures rendered in the responsive grid. */\n  @Prop() metrics: OverviewMetric[] = [];\n\n  /**\n   * Width a metric cell may shrink to before the grid drops a column. The grid\n   * reflows and then stacks from this alone, so no measurement is required.\n   */\n  @Prop() metricMinWidth: string = DEFAULT_METRIC_MIN_WIDTH;\n\n  /** Replace the score and metrics with skeletons while data resolves. */\n  @Prop() isLoading: boolean = false;\n\n  /** Message shown in place of the score when its figure cannot be resolved. */\n  @Prop() scoreErrorMessage: string | undefined;\n\n  /** Accessible name for the region. */\n  @Prop() overviewLabel: string = 'Overview';\n\n  /** Emitted when a metric that is not inactive is activated. */\n  @Event() dsMetricSelect!: EventEmitter<OverviewMetric>;\n\n  /** Roving tab stop across selectable metrics. */\n  @State() private focusedMetricIndex: number = 0;\n\n  private get hasScore(): boolean {\n    return this.score !== undefined || this.scoreErrorMessage !== undefined || this.isLoading;\n  }\n\n  /** Index of the roving tab stop, skipping inactive metrics. */\n  private get rovingIndex(): number {\n    const first = this.metrics.findIndex(metric => !metric.isInactive);\n    if (first < 0) return -1;\n    const current = this.metrics[this.focusedMetricIndex];\n    return current && !current.isInactive ? this.focusedMetricIndex : first;\n  }\n\n  private selectMetric(metric: OverviewMetric, index: number) {\n    if (metric.isInactive) return;\n    this.focusedMetricIndex = index;\n    this.dsMetricSelect.emit(metric);\n  }\n\n  /** Move the roving tab stop, wrapping and skipping inactive metrics. */\n  private moveFocus(from: number, step: number) {\n    const count = this.metrics.length;\n    if (count === 0) return;\n\n    for (let offset = 1; offset <= count; offset += 1) {\n      // Positive modulo so a backwards step from the first metric wraps to the last.\n      const next = (((from + step * offset) % count) + count) % count;\n      if (this.metrics[next]?.isInactive) continue;\n\n      this.focusedMetricIndex = next;\n      const cells = this.el.querySelectorAll<HTMLElement>('.card-overview__metric');\n      cells[next]?.focus();\n      return;\n    }\n  }\n\n  private handleMetricKeyDown = (event: KeyboardEvent, index: number) => {\n    switch (event.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        event.preventDefault();\n        this.moveFocus(index, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        event.preventDefault();\n        this.moveFocus(index, -1);\n        break;\n      default:\n        break;\n    }\n  };\n\n  /**\n   * A skeleton bar matching the type metrics of the text it stands in for, so the\n   * loading state holds the same shape and rhythm as the resolved content.\n   *\n   * `background` is always passed: the default base is the theme's quaternary\n   * foreground, which is black and therefore invisible on this permanently dark\n   * surface.\n   */\n  private bar(textVariant: TextVariant, width: string, className?: string) {\n    return (\n      <ds-skeleton\n        class={className}\n        variant=\"text\"\n        textVariant={textVariant}\n        width={width}\n        background=\"always-dark\"\n      />\n    );\n  }\n\n  /**\n   * Arrow and change in one text node.\n   *\n   * The arrow is a typeface glyph rather than an icon so it inherits the exact\n   * size, weight, and baseline of the value beside it; an icon would need its\n   * own size scale and would drift whenever the type scale changed.\n   *\n   * Tone is supplied by the caller and never inferred here.\n   */\n  private renderTrend(trend: MetricTrend | undefined, variant: TextVariant, emphasis = false) {\n    if (!trend) return null;\n    return (\n      <ds-text\n        as=\"span\"\n        class={{\n          'card-overview__trend': true,\n          [`card-overview__trend--${trend.tone}`]: true,\n        }}\n        variant={variant}\n        emphasis={emphasis}\n        color=\"inherit\"\n        fontFeature=\"tabular-nums\"\n      >\n        {trend.direction === 'up' ? '↑' : '↓'} {trend.value}\n      </ds-text>\n    );\n  }\n\n  private renderScore() {\n    if (this.isLoading) {\n      return (\n        <div class=\"card-overview__score ds-control--md\" part=\"score\">\n          {/*\n            * The label row is kept but left empty. It carries the control-height\n            * box that aligns the score block with the period control, so dropping\n            * it would shift the whole block up; a bar inside it would collide with\n            * the figure, which sits under the label by design.\n            */}\n          <div class=\"card-overview__score-label-row\" />\n          <div class=\"card-overview__score-figure\">\n            {this.bar('text-display-medium', '56px')}\n            {this.bar('text-body-small', '24px', 'card-overview__skeleton-baseline')}\n          </div>\n          {/*\n            * Class goes on the skeleton itself, matching the resolved band. In a\n            * wrapper the bar picks up inline leading and drops below the resolved\n            * band position.\n            */}\n          {this.bar('text-caption', '80px', 'card-overview__score-band card-overview__score-band--loading')}\n        </div>\n      );\n    }\n\n    if (this.scoreErrorMessage) {\n      return (\n        <div class=\"card-overview__score card-overview__score--error\" part=\"score\" role=\"alert\">\n          <ds-icon name=\"CircleExclamation\" size=\"sm\" color=\"inherit\" aria-hidden=\"true\" />\n          <ds-text as=\"span\" variant=\"text-body-medium\" color=\"inherit\">\n            {this.scoreErrorMessage}\n          </ds-text>\n        </div>\n      );\n    }\n\n    const score = this.score;\n    if (!score) return null;\n\n    return (\n      <div class=\"card-overview__score ds-control--md\" part=\"score\">\n        <div class=\"card-overview__score-label-row\">\n          <ds-text\n            as=\"span\"\n            class=\"card-overview__score-label\"\n            variant=\"text-body-medium\"\n            emphasis\n            color=\"inherit\"\n          >\n            {score.label}\n          </ds-text>\n        </div>\n        <div class=\"card-overview__score-figure\">\n          <ds-text as=\"span\" variant=\"text-display-medium\" emphasis color=\"inherit\" fontFeature=\"tabular-nums\">\n            {score.value}\n          </ds-text>\n          {this.renderTrend(score.trend, 'text-body-small', true)}\n        </div>\n        {score.band && (\n          <ds-text as=\"span\" class=\"card-overview__score-band\" variant=\"text-caption\" color=\"inherit\">\n            {score.band}\n          </ds-text>\n        )}\n      </div>\n    );\n  }\n\n  private renderMetric(metric: OverviewMetric, index: number) {\n    const selectable = !metric.isInactive;\n    const label = (\n      <ds-text as=\"span\" class=\"card-overview__metric-label\" variant=\"text-body-small\" color=\"inherit\">\n        {metric.label}\n      </ds-text>\n    );\n\n    return (\n      <div\n        class={{\n          'card-overview__metric': true,\n          'card-overview__metric--inactive': !selectable,\n          // Selection targets get the shared wash; press scaling is not used here\n          // so the grid keeps its columns aligned. See docs/control-press-policy.md.\n          'ds-interaction-fill': selectable,\n          // The card is permanently dark, so interaction tokens come from that family.\n          'ds-interaction-fill--on-always-dark': selectable,\n          'ds-focus-ring-inset': selectable,\n        }}\n        part=\"metric\"\n        role={selectable ? 'button' : undefined}\n        tabIndex={selectable && index === this.rovingIndex ? 0 : -1}\n        onClick={() => this.selectMetric(metric, index)}\n        onKeyDown={event => this.handleMetricKeyDown(event, index)}\n        onFocusin={() => {\n          if (selectable) this.focusedMetricIndex = index;\n        }}\n      >\n        {metric.labelTooltip\n          ? <ds-tooltip label={metric.labelTooltip} side=\"top\" size=\"sm\">{label}</ds-tooltip>\n          : label}\n        <div class=\"card-overview__metric-figure\">\n          <ds-text as=\"span\" class=\"card-overview__metric-value\" variant=\"text-body-medium\" color=\"inherit\" fontFeature=\"tabular-nums\">\n            {metric.value}\n          </ds-text>\n          {this.renderTrend(metric.trend, 'text-body-medium')}\n        </div>\n      </div>\n    );\n  }\n\n  private renderMetrics() {\n    if (this.isLoading && this.metrics.length === 0) {\n      return Array.from({ length: LOADING_PLACEHOLDER_COUNT }, (_, index) => (\n        <div class=\"card-overview__metric\" key={`loading-${index}`}>\n          {this.bar('text-body-small', '70%', 'card-overview__metric-label')}\n          <div class=\"card-overview__metric-figure\">\n            {this.bar('text-body-medium', '36px')}\n            {/* text-body-medium, matching renderTrend for a metric — a smaller\n              * variant here leaves the trend bar short of the value beside it. */}\n            {this.bar('text-body-medium', '40px')}\n          </div>\n        </div>\n      ));\n    }\n\n    return this.metrics.map((metric, index) => this.renderMetric(metric, index));\n  }\n\n  render() {\n    const hasHeader = Boolean(this.periodLabel || this.comparisonLabel);\n\n    return (\n      <Host\n        class={{\n          'card-overview': true,\n          'card-overview--has-score': this.hasScore,\n          // Split shadow and inset highlight, so the opaque surface cannot cover\n          // the highlight the way a combined elevation shadow would.\n          'ds-control-elevation': true,\n          'ds-control-elevation--sm': true,\n        }}\n        role=\"region\"\n        aria-label={this.overviewLabel}\n        aria-busy={this.isLoading ? 'true' : undefined}\n        style={{ '--ds-card-overview-metric-min': this.metricMinWidth }}\n      >\n        {this.hasScore && this.renderScore()}\n\n        <div class=\"card-overview__body\">\n          {/* `ds-control--md` supplies the 32px height and the label inset below. */}\n          <div class=\"card-overview__header ds-control--md\">\n            {this.isLoading ? (\n              <div class=\"card-overview__period ds-control-label-box\">\n                {this.bar('text-body-medium', '184px')}\n                {this.bar('text-body-medium', '248px')}\n              </div>\n            ) : hasHeader && (\n              <div class=\"card-overview__period ds-control-label-box\">\n                {this.periodLabel && (\n                  <ds-text as=\"span\" class=\"card-overview__period-current ds-control-label-box\" variant=\"text-body-medium\" emphasis color=\"inherit\">\n                    {this.periodLabel}\n                  </ds-text>\n                )}\n                {this.comparisonLabel && (\n                  <ds-text as=\"span\" class=\"card-overview__period-comparison ds-control-label-box\" variant=\"text-body-medium\" color=\"inherit\">\n                    {this.comparisonLabel}\n                  </ds-text>\n                )}\n              </div>\n            )}\n            <div class=\"card-overview__filter\">\n              {/*\n                Period control is application owned: it varies by product surface.\n                While loading it is stood in for by a control-shaped skeleton so the\n                header keeps its resolved proportions.\n              */}\n              {this.isLoading\n                ? <ds-skeleton variant=\"control\" controlSize=\"md\" width=\"128px\" background=\"always-dark\" />\n                : <slot name=\"filter\" />}\n            </div>\n          </div>\n\n          <div class=\"card-overview__metrics\" part=\"metrics\">\n            {this.renderMetrics()}\n          </div>\n\n          <slot name=\"footer\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

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

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

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

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

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