@ds-mo/ui 15.0.0 → 15.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (145) hide show
  1. package/NOTICE +6 -0
  2. package/README.md +7 -0
  3. package/dist/.package-ready.json +1 -1
  4. package/dist/agent-patterns.json +1 -1
  5. package/dist/agent.json +2320 -90
  6. package/dist/components/ds-agent-questionnaire.js +1 -1
  7. package/dist/components/ds-agent-response.js +1 -1
  8. package/dist/components/ds-banner.js +1 -1
  9. package/dist/components/ds-banner.js.map +1 -1
  10. package/dist/components/ds-card-chart.js +1 -1
  11. package/dist/components/ds-card-chart.js.map +1 -1
  12. package/dist/components/ds-card-overview.js +1 -1
  13. package/dist/components/ds-card-overview.js.map +1 -1
  14. package/dist/components/ds-card-setting.js +1 -1
  15. package/dist/components/ds-card-setting.js.map +1 -1
  16. package/dist/components/ds-chart.js +1 -1
  17. package/dist/components/ds-chart.js.map +1 -1
  18. package/dist/components/ds-checkbox.js +1 -1
  19. package/dist/components/ds-conversation-list-item.js +1 -1
  20. package/dist/components/ds-conversation-list-item.js.map +1 -1
  21. package/dist/components/ds-data-filter.js +1 -1
  22. package/dist/components/ds-data-preferences.js +1 -1
  23. package/dist/components/ds-data-saved-views.js +1 -1
  24. package/dist/components/ds-data-search.js +1 -1
  25. package/dist/components/ds-data-search.js.map +1 -1
  26. package/dist/components/ds-filter-menu.js +1 -1
  27. package/dist/components/ds-message-scroller.js.map +1 -1
  28. package/dist/components/ds-mobile-sheet-nav.js +1 -1
  29. package/dist/components/ds-pagination.js +1 -1
  30. package/dist/components/ds-scroll-overlay.js.map +1 -1
  31. package/dist/components/ds-select.js +1 -1
  32. package/dist/components/ds-shell-app.js +1 -1
  33. package/dist/components/ds-table.js +1 -1
  34. package/dist/components/{p-Dpr2y6_S.js → p-B_jdoM7e.js} +2 -2
  35. package/dist/components/{p-CElUM-xU.js → p-C6xVxqOn.js} +2 -2
  36. package/dist/components/{p-MG4lcN0D.js → p-CdGXzRP8.js} +2 -2
  37. package/dist/components/{p-D6Wl3dRO.js → p-Cqc2U1ZQ.js} +2 -2
  38. package/dist/components/{p-D6Wl3dRO.js.map → p-Cqc2U1ZQ.js.map} +1 -1
  39. package/dist/components/{p-Nc76seSq.js → p-DEW7r0U9.js} +2 -2
  40. package/dist/components/{p-IEq_06J0.js → p-Dfs98tpL.js} +2 -2
  41. package/dist/components/{p-IEq_06J0.js.map → p-Dfs98tpL.js.map} +1 -1
  42. package/dist/components/p-ZhP2tVmM.js.map +1 -1
  43. package/dist/components/p-etifxiDc.js.map +1 -1
  44. package/dist/docs/components.json +1 -1
  45. package/dist/lint/STYLELINT-LICENSE +20 -0
  46. package/dist/lint/THIRD-PARTY-NOTICES +553 -0
  47. package/dist/lint/index.d.ts +7 -0
  48. package/dist/lint/index.js +51385 -0
  49. package/dist/lint/types.d.ts +13 -0
  50. package/dist/mcp-data/registry/agent-activity.json +6 -1
  51. package/dist/mcp-data/registry/agent-questionnaire.json +6 -1
  52. package/dist/mcp-data/registry/agent-response.json +12 -1
  53. package/dist/mcp-data/registry/agent-source-list.json +6 -1
  54. package/dist/mcp-data/registry/agent-tool-call.json +6 -1
  55. package/dist/mcp-data/registry/attachment-list.json +6 -1
  56. package/dist/mcp-data/registry/avatar.json +21 -1
  57. package/dist/mcp-data/registry/badge.json +30 -2
  58. package/dist/mcp-data/registry/banner.json +28 -2
  59. package/dist/mcp-data/registry/bar-action.json +24 -1
  60. package/dist/mcp-data/registry/bar-nav.json +6 -1
  61. package/dist/mcp-data/registry/bar-page-title.json +24 -1
  62. package/dist/mcp-data/registry/bar-title.json +26 -1
  63. package/dist/mcp-data/registry/bar-workflow.json +24 -1
  64. package/dist/mcp-data/registry/breadcrumb.json +6 -1
  65. package/dist/mcp-data/registry/button-filled.json +68 -1
  66. package/dist/mcp-data/registry/button-inverted.json +64 -1
  67. package/dist/mcp-data/registry/button-unfilled.json +66 -1
  68. package/dist/mcp-data/registry/calendar.json +14 -1
  69. package/dist/mcp-data/registry/card-action-center.json +24 -1
  70. package/dist/mcp-data/registry/card-chart.json +37 -2
  71. package/dist/mcp-data/registry/card-navigation.json +36 -1
  72. package/dist/mcp-data/registry/card-overview.json +27 -2
  73. package/dist/mcp-data/registry/card-setting.json +35 -2
  74. package/dist/mcp-data/registry/card-settings-scope.json +24 -1
  75. package/dist/mcp-data/registry/chart-legend.json +6 -1
  76. package/dist/mcp-data/registry/chart.json +7 -2
  77. package/dist/mcp-data/registry/checkbox.json +38 -2
  78. package/dist/mcp-data/registry/chip.json +50 -1
  79. package/dist/mcp-data/registry/code-block.json +30 -1
  80. package/dist/mcp-data/registry/conversation-list-item.json +25 -2
  81. package/dist/mcp-data/registry/conversation-list-section.json +14 -1
  82. package/dist/mcp-data/registry/conversation-list.json +6 -1
  83. package/dist/mcp-data/registry/data-customize.json +26 -1
  84. package/dist/mcp-data/registry/data-filter.json +26 -1
  85. package/dist/mcp-data/registry/data-group.json +26 -1
  86. package/dist/mcp-data/registry/data-preferences.json +26 -1
  87. package/dist/mcp-data/registry/data-saved-views.json +26 -1
  88. package/dist/mcp-data/registry/data-search.json +27 -2
  89. package/dist/mcp-data/registry/data-sort.json +26 -1
  90. package/dist/mcp-data/registry/data-toolbar.json +14 -1
  91. package/dist/mcp-data/registry/divider.json +6 -1
  92. package/dist/mcp-data/registry/empty-state.json +6 -1
  93. package/dist/mcp-data/registry/field.json +14 -1
  94. package/dist/mcp-data/registry/filter-menu.json +48 -1
  95. package/dist/mcp-data/registry/icon.json +21 -1
  96. package/dist/mcp-data/registry/input-date.json +48 -1
  97. package/dist/mcp-data/registry/input-time.json +48 -1
  98. package/dist/mcp-data/registry/input.json +48 -1
  99. package/dist/mcp-data/registry/loader.json +21 -1
  100. package/dist/mcp-data/registry/markdown.json +17 -1
  101. package/dist/mcp-data/registry/menu.json +26 -1
  102. package/dist/mcp-data/registry/message-actions.json +6 -1
  103. package/dist/mcp-data/registry/message-bubble.json +26 -1
  104. package/dist/mcp-data/registry/message-composer.json +24 -1
  105. package/dist/mcp-data/registry/message-scroller.json +12 -1
  106. package/dist/mcp-data/registry/message.json +6 -1
  107. package/dist/mcp-data/registry/mobile-bar-nav.json +24 -1
  108. package/dist/mcp-data/registry/mobile-header.json +26 -1
  109. package/dist/mcp-data/registry/mobile-section-switcher.json +26 -1
  110. package/dist/mcp-data/registry/mobile-sheet-nav.json +27 -2
  111. package/dist/mcp-data/registry/modal.json +24 -1
  112. package/dist/mcp-data/registry/pagination.json +6 -1
  113. package/dist/mcp-data/registry/panel-nav.json +28 -2
  114. package/dist/mcp-data/registry/panel-sub-nav.json +25 -0
  115. package/dist/mcp-data/registry/panel-tool-header.json +24 -1
  116. package/dist/mcp-data/registry/panel-tool-search.json +24 -1
  117. package/dist/mcp-data/registry/panel-tools.json +25 -1
  118. package/dist/mcp-data/registry/paper-texture.json +6 -1
  119. package/dist/mcp-data/registry/radio.json +35 -1
  120. package/dist/mcp-data/registry/registry.json +2319 -89
  121. package/dist/mcp-data/registry/score.json +38 -1
  122. package/dist/mcp-data/registry/scroll-overlay.json +6 -1
  123. package/dist/mcp-data/registry/select.json +52 -1
  124. package/dist/mcp-data/registry/shell-app.json +26 -1
  125. package/dist/mcp-data/registry/shell-page.json +6 -1
  126. package/dist/mcp-data/registry/shell-tools.json +25 -1
  127. package/dist/mcp-data/registry/skeleton.json +41 -1
  128. package/dist/mcp-data/registry/slider.json +42 -1
  129. package/dist/mcp-data/registry/swatch-picker.json +24 -1
  130. package/dist/mcp-data/registry/switch.json +37 -1
  131. package/dist/mcp-data/registry/tab-group.json +49 -1
  132. package/dist/mcp-data/registry/table.json +102 -1
  133. package/dist/mcp-data/registry/tag.json +52 -1
  134. package/dist/mcp-data/registry/text.json +22 -1
  135. package/dist/mcp-data/registry/textarea.json +38 -1
  136. package/dist/mcp-data/registry/time-picker.json +14 -1
  137. package/dist/mcp-data/registry/toast.json +24 -1
  138. package/dist/mcp-data/registry/tooltip-chart.json +24 -1
  139. package/dist/mcp-data/registry/tooltip.json +26 -1
  140. package/dist/mcp-data/registry/typing-indicator.json +6 -1
  141. package/package.json +32 -7
  142. /package/dist/components/{p-Dpr2y6_S.js.map → p-B_jdoM7e.js.map} +0 -0
  143. /package/dist/components/{p-CElUM-xU.js.map → p-C6xVxqOn.js.map} +0 -0
  144. /package/dist/components/{p-MG4lcN0D.js.map → p-CdGXzRP8.js.map} +0 -0
  145. /package/dist/components/{p-Nc76seSq.js.map → p-DEW7r0U9.js.map} +0 -0
@@ -1,2 +1,2 @@
1
- import{A as o,d as s}from"./p-Dpr2y6_S.js";const p=o;const r=s;export{p as DsAgentQuestionnaire,r as defineCustomElement};
1
+ import{A as o,d as s}from"./p-B_jdoM7e.js";const t=o;const p=s;export{t as DsAgentQuestionnaire,p as defineCustomElement};
2
2
  //# sourceMappingURL=ds-agent-questionnaire.js.map
@@ -1,2 +1,2 @@
1
- import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-DVINzOoK.js";import{d as r}from"./p-Dpr2y6_S.js";import{d as n}from"./p-CzIpquvw.js";import{d}from"./p-BeNa6tw5.js";import{d as m}from"./p-8yBdCXCn.js";import{d as c}from"./p-ZhP2tVmM.js";import{d as l}from"./p-CiH4GG6r.js";import{d as u}from"./p-Dzndkdx5.js";import{d as f}from"./p-D6Wl3dRO.js";import{d as p}from"./p-BgQMEHRa.js";import{d as b}from"./p-DjkUFlDW.js";import{d as k}from"./p-0XTyQNRG.js";import{d as h}from"./p-FIBCluwV.js";import{d as g}from"./p-CUcUHwI3.js";import{d as y}from"./p-DOAybCp0.js";import{d as w}from"./p-DwbcNDJF.js";import{d as E}from"./p-CYzFfFcH.js";const j=()=>`.sc-ds-agent-response-h{display:block;width:100%;--ds-prose-text-max-inline-size:var(--dimension-panel-width-lg);-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const x=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.renderMode="parts";this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items});case"questionnaire":return t("ds-agent-questionnaire",{key:s.id,requestId:s.requestId,questions:s.questions,answers:s.answers,status:"answered"})}}render(){return t(a,{key:"076c618fd957a230e6e7d42285c35d2368223809"},t("ds-message",{key:"bb3175ce22e215646626583c40699ffe903f7f68",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"e91c1335f3d23f6f9c520507c96288576cfb1590",class:"agent-response"},this.renderMode==="composed"?t("slot",null):this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"c88fa07ed04be5a59ac8d4acc33ff0952443c630",name:"footer",slot:"footer"}),t("slot",{key:"247ea0251b9bb0db4c7b192b86cef33a3a99db08",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"56eb3467e4b5b92e80ec81bb1a75a32444868f44",name:"actions",slot:"actions"})))}static get style(){return j()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],renderMode:[1,"render-mode"],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-questionnaire","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-radio","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),x)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-questionnaire":if(!customElements.get(o(s))){r()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){n()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){d()}break;case"ds-attachment-list":if(!customElements.get(o(s))){m()}break;case"ds-badge":if(!customElements.get(o(s))){c()}break;case"ds-button-filled":if(!customElements.get(o(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){u()}break;case"ds-checkbox":if(!customElements.get(o(s))){f()}break;case"ds-code-block":if(!customElements.get(o(s))){p()}break;case"ds-icon":if(!customElements.get(o(s))){b()}break;case"ds-loader":if(!customElements.get(o(s))){k()}break;case"ds-markdown":if(!customElements.get(o(s))){h()}break;case"ds-message":if(!customElements.get(o(s))){g()}break;case"ds-radio":if(!customElements.get(o(s))){y()}break;case"ds-text":if(!customElements.get(o(s))){w()}break;case"ds-tooltip":if(!customElements.get(o(s))){E()}break}}))}v();const D=x;const C=v;export{D as DsAgentResponse,C as defineCustomElement};
1
+ import{p as s,H as e,h as t,a,t as o}from"./index.js";import{d as i}from"./p-DVINzOoK.js";import{d as r}from"./p-B_jdoM7e.js";import{d as n}from"./p-CzIpquvw.js";import{d}from"./p-BeNa6tw5.js";import{d as c}from"./p-8yBdCXCn.js";import{d as m}from"./p-ZhP2tVmM.js";import{d as l}from"./p-CiH4GG6r.js";import{d as u}from"./p-Dzndkdx5.js";import{d as f}from"./p-Cqc2U1ZQ.js";import{d as p}from"./p-BgQMEHRa.js";import{d as b}from"./p-DjkUFlDW.js";import{d as k}from"./p-0XTyQNRG.js";import{d as h}from"./p-FIBCluwV.js";import{d as g}from"./p-CUcUHwI3.js";import{d as y}from"./p-DOAybCp0.js";import{d as w}from"./p-DwbcNDJF.js";import{d as E}from"./p-CYzFfFcH.js";const j=()=>`.sc-ds-agent-response-h{display:block;width:100%;--ds-prose-text-max-inline-size:var(--dimension-panel-width-lg);-webkit-user-select:none;user-select:none}.agent-response.sc-ds-agent-response{display:grid;gap:var(--dimension-space-150);min-width:0;width:100%;-webkit-user-select:none;user-select:none}`;const x=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.messageId="";this.author="";this.showAuthor=true;this.timestamp="";this.parts=[];this.renderMode="parts";this.streaming=false;this.metadataVisibility="always"}renderPart(s){switch(s.type){case"markdown":return t("ds-markdown",{key:s.id,content:s.content,streaming:s.state==="streaming"});case"activity":return t("ds-agent-activity",{key:s.id,items:s.items});case"tool":return t("ds-agent-tool-call",{key:s.id,name:s.name,label:s.label,state:s.state,input:s.input,output:s.output,error:s.error});case"attachments":return t("ds-attachment-list",{key:s.id,items:s.items});case"sources":return t("ds-agent-source-list",{key:s.id,items:s.items});case"questionnaire":return t("ds-agent-questionnaire",{key:s.id,requestId:s.requestId,questions:s.questions,answers:s.answers,status:"answered"})}}render(){return t(a,{key:"076c618fd957a230e6e7d42285c35d2368223809"},t("ds-message",{key:"bb3175ce22e215646626583c40699ffe903f7f68",messageId:this.messageId,direction:"incoming",author:this.author,showAuthor:this.showAuthor,timestamp:this.timestamp,streaming:this.streaming,metadataVisibility:this.metadataVisibility},t("div",{key:"e91c1335f3d23f6f9c520507c96288576cfb1590",class:"agent-response"},this.renderMode==="composed"?t("slot",null):this.parts.map((s=>this.renderPart(s)))),t("slot",{key:"c88fa07ed04be5a59ac8d4acc33ff0952443c630",name:"footer",slot:"footer"}),t("slot",{key:"247ea0251b9bb0db4c7b192b86cef33a3a99db08",name:"metadata-actions",slot:"metadata-actions"}),t("slot",{key:"56eb3467e4b5b92e80ec81bb1a75a32444868f44",name:"actions",slot:"actions"})))}static get style(){return j()}},[262,"ds-agent-response",{messageId:[1,"message-id"],author:[1],showAuthor:[4,"show-author"],timestamp:[1],parts:[16],renderMode:[1,"render-mode"],streaming:[4],metadataVisibility:[1,"metadata-visibility"]}]);function v(){if(typeof customElements==="undefined"){return}const s=["ds-agent-response","ds-agent-activity","ds-agent-questionnaire","ds-agent-source-list","ds-agent-tool-call","ds-attachment-list","ds-badge","ds-button-filled","ds-button-unfilled","ds-checkbox","ds-code-block","ds-icon","ds-loader","ds-markdown","ds-message","ds-radio","ds-text","ds-tooltip"];s.forEach((s=>{switch(s){case"ds-agent-response":if(!customElements.get(o(s))){customElements.define(o(s),x)}break;case"ds-agent-activity":if(!customElements.get(o(s))){i()}break;case"ds-agent-questionnaire":if(!customElements.get(o(s))){r()}break;case"ds-agent-source-list":if(!customElements.get(o(s))){n()}break;case"ds-agent-tool-call":if(!customElements.get(o(s))){d()}break;case"ds-attachment-list":if(!customElements.get(o(s))){c()}break;case"ds-badge":if(!customElements.get(o(s))){m()}break;case"ds-button-filled":if(!customElements.get(o(s))){l()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){u()}break;case"ds-checkbox":if(!customElements.get(o(s))){f()}break;case"ds-code-block":if(!customElements.get(o(s))){p()}break;case"ds-icon":if(!customElements.get(o(s))){b()}break;case"ds-loader":if(!customElements.get(o(s))){k()}break;case"ds-markdown":if(!customElements.get(o(s))){h()}break;case"ds-message":if(!customElements.get(o(s))){g()}break;case"ds-radio":if(!customElements.get(o(s))){y()}break;case"ds-text":if(!customElements.get(o(s))){w()}break;case"ds-tooltip":if(!customElements.get(o(s))){E()}break}}))}v();const C=x;const q=v;export{C as DsAgentResponse,q as defineCustomElement};
2
2
  //# sourceMappingURL=ds-agent-response.js.map
@@ -1,2 +1,2 @@
1
- import{p as n,H as e,c as r,h as a,a as s,t as o}from"./index.js";import{d}from"./p-ZhP2tVmM.js";import{d as i}from"./p-Dzndkdx5.js";import{d as t}from"./p-DjkUFlDW.js";import{d as c}from"./p-0XTyQNRG.js";import{d as b}from"./p-DwbcNDJF.js";import{d as l}from"./p-CYzFfFcH.js";import{b as h,T as u}from"./p-CeXf9-X3.js";const g=()=>`@media (forced-colors: active){.sc-ds-banner:root,.sc-ds-banner-h,.ds-forced-colors-scope.sc-ds-banner{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-banner-h,.sc-ds-banner:where(.ds-table),.sc-ds-banner:where(.tooltip-popup),.sc-ds-banner:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-banner,.ds-control--lg.sc-ds-banner-h,.ds-control--md.sc-ds-banner-h,.ds-control--md.sc-ds-banner,.ds-control--sm.sc-ds-banner-h,.ds-control--sm.sc-ds-banner,.ds-control--xs.sc-ds-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-banner-h,.ds-control--lg.sc-ds-banner{--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-banner-h,.ds-control--md.sc-ds-banner{--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-banner-h,.ds-control--sm.sc-ds-banner{--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-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-banner{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-banner{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-banner{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-banner,.ds-chrome-header__trailing.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-banner{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-banner{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-banner{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-banner{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-banner,.ds-chrome-header__description.sc-ds-banner{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-banner{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-banner .ds-chrome-header__description.sc-ds-banner{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-banner-h{display:grid;overflow:hidden;min-width:0;grid-template-rows:1fr;transition:grid-template-rows var(--effect-animation-duration-short-3) var(--_banner-motion-easing);--ds-banner-background:var(--color-background-faint-neutral);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary);--_banner-motion-easing:var(--effect-animation-easing-ease-in-out, ease);--_banner-surface-translate:0%}.banner--open.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-out, ease-out)}.banner--closing.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-in, ease-in);--_banner-surface-translate:-100%;grid-template-rows:0fr}.banner--hidden.sc-ds-banner-h{--_banner-surface-translate:-100%;display:none;visibility:hidden;grid-template-rows:0fr}.banner-overflow.sc-ds-banner{min-height:0;overflow:visible}.banner-browser-edge.sc-ds-banner{display:none;position:fixed;inset:0 0 auto;height:max(var(--dimension-space-200), env(safe-area-inset-top, 0px));pointer-events:none;background-color:var(--ds-banner-background)}.banner--open.sc-ds-banner-h .banner-browser-edge.sc-ds-banner,.banner--closing.sc-ds-banner-h .banner-browser-edge.sc-ds-banner{display:var(--_shell-banner-edge-display, none)}.banner-surface.sc-ds-banner{display:flex;position:relative;width:100%;padding-inline-end:calc(var(--dimension-size-400) + var(--dimension-space-200));color:var(--ds-banner-description);background-color:var(--ds-banner-background);border-bottom:var(--dimension-stroke-width-012) solid var(--ds-banner-border);transform:translateY(var(--_banner-surface-translate));transition:transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing)}@starting-style{.sc-ds-banner-h.banner--open{grid-template-rows:0fr}.sc-ds-banner-h.banner--open .banner-surface{transform:translateY(-100%)}}.banner-copy.sc-ds-banner{flex-basis:var(--dimension-card-width-sm)}.banner--orientation-horizontal.sc-ds-banner-h .banner-surface.sc-ds-banner{flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h .banner-copy.sc-ds-banner{flex-basis:100%}.banner-copy-flow.sc-ds-banner{box-sizing:border-box;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));color:var(--ds-banner-description)}.banner-heading.sc-ds-banner{display:inline-block;width:auto;max-width:100%;margin-inline-end:var(--dimension-space-100);vertical-align:baseline;color:var(--ds-banner-heading)}.banner-description.sc-ds-banner{color:var(--ds-banner-description)}.banner-actions.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;min-width:0;gap:var(--dimension-space-100)}.banner-actions.sc-ds-banner slot.sc-ds-banner{display:contents}.banner-actions.sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions .sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions.sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3),.banner-actions .sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3){display:none}.banner-actions--empty.sc-ds-banner{display:none}.banner-trailing.sc-ds-banner{align-self:flex-start;flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h:not(.banner--has-actions) .banner-trailing.sc-ds-banner{display:contents}.banner--orientation-vertical.banner--has-actions.sc-ds-banner-h .banner-trailing.sc-ds-banner{margin-inline:var(--dimension-space-100) auto;padding-block-end:var(--dimension-space-100);box-sizing:border-box}.banner--orientation-vertical.sc-ds-banner-h .banner-description.sc-ds-banner{display:block}.banner--orientation-vertical.sc-ds-banner-h .banner-heading.sc-ds-banner+.banner-description.sc-ds-banner{margin-block-start:var(--dimension-space-050)}.banner-close.sc-ds-banner{flex:0 0 auto}.banner-dismiss.sc-ds-banner{position:absolute;inset-block-start:var(--dimension-space-100);inset-inline-end:var(--dimension-space-100)}.banner--intent-neutral.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-neutral)}.banner--intent-brand.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-brand)}.banner--intent-positive.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-positive)}.banner--intent-warning.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-warning)}.banner--intent-caution.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-caution)}.banner--intent-negative.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-negative)}.banner--contrast-faint.sc-ds-banner-h{--ds-banner-background:var(--ds-banner-faint-background);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary)}.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-neutral);--ds-banner-heading:var(--color-foreground-on-medium-background-primary);--ds-banner-description:var(--color-foreground-on-medium-background-secondary);--ds-banner-border:var(--color-border-on-medium-background-tertiary)}.banner--intent-brand.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-brand)}.banner--intent-positive.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-positive)}.banner--intent-warning.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-warning)}.banner--intent-caution.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-caution)}.banner--intent-negative.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-negative)}.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-neutral);--ds-banner-heading:var(--color-foreground-on-strong-background-primary);--ds-banner-description:var(--color-foreground-on-strong-background-secondary);--ds-banner-border:var(--color-border-on-strong-background-tertiary)}.banner--intent-brand.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-brand)}.banner--intent-positive.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-positive)}.banner--intent-warning.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-warning)}.banner--intent-caution.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-caution)}.banner--intent-negative.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-negative)}.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-neutral);--ds-banner-heading:var(--color-foreground-on-bold-background-primary);--ds-banner-description:var(--color-foreground-on-bold-background-secondary);--ds-banner-border:var(--color-border-on-bold-background-tertiary)}.banner--intent-brand.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-brand)}.banner--intent-positive.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-positive)}.banner--intent-warning.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-warning)}.banner--intent-caution.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-caution)}.banner--intent-negative.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-negative)}@media (prefers-reduced-motion: reduce){.sc-ds-banner-h,.banner-surface.sc-ds-banner{transition:none}}@media (forced-colors: active){.banner-browser-edge.sc-ds-banner{background-color:var(--ds-forced-color-surface)}.banner-surface.sc-ds-banner{color:var(--ds-forced-color-content);background-color:var(--ds-forced-color-surface);border-bottom-color:var(--ds-forced-color-content)}.banner-heading.sc-ds-banner,.banner-description.sc-ds-banner{color:var(--ds-forced-color-content)}}`;const m=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClose=r(this,"dsClose",7);this.dsAfterClose=r(this,"dsAfterClose",7);this.heading="";this.intent="neutral";this.contrast="faint";this.orientation="horizontal";this.open=true;this.dismissLabel="Dismiss banner";this.announcement="none";this.rendered=false;this.phase="closed";this.hasActions=false;this.loaded=false;this.transitionTimer=null;this.closePending=false}componentWillLoad(){this.rendered=this.open;this.phase=this.open?"open":"closed"}componentDidLoad(){this.loaded=true;this.updateActionsPresence()}disconnectedCallback(){this.clearTransitionWork()}onOpenChange(n){if(!this.loaded)return;if(n)this.startOpen();else this.startClose()}get closeMotionMs(){return h(u.motionShort3,u.animationDurationShort3)}clearTransitionWork(){if(this.transitionTimer)clearTimeout(this.transitionTimer);this.transitionTimer=null}startOpen(){this.clearTransitionWork();this.closePending=false;this.rendered=true;this.phase="open"}startClose(){this.clearTransitionWork();if(!this.rendered||this.phase==="closed"){this.rendered=false;return}this.closePending=true;this.phase="closing";const n=this.closeMotionMs;if(n<=0){this.finishClose();return}this.transitionTimer=setTimeout((()=>{this.transitionTimer=null;this.finishClose()}),n)}finishClose(){if(this.open||!this.closePending)return;this.closePending=false;this.rendered=false;this.phase="closed";this.dsAfterClose.emit()}updateActionsPresence(n){const e=n?n.assignedElements().filter((n=>n.tagName==="DS-BUTTON-UNFILLED")):Array.from(this.el.querySelectorAll('ds-button-unfilled[slot="actions"]'));this.hasActions=e.length>0}requestClose(n){if(!this.open||this.phase==="closing")return;this.dsClose.emit(n.detail)}get role(){if(this.announcement==="polite")return"status";if(this.announcement==="assertive")return"alert";return undefined}get ariaLive(){return this.announcement==="none"?undefined:this.announcement}render(){const n=this.phase==="closing";const e={banner:true,"banner--open":this.phase==="open","banner--closing":n,"banner--hidden":!this.rendered,"banner--has-actions":this.hasActions,[`banner--orientation-${this.orientation}`]:true,[`banner--intent-${this.intent}`]:true,[`banner--contrast-${this.contrast}`]:true};return a(s,{key:"6534fbca846204f684b8301d5c865001503b1354",class:e},a("div",{key:"6cd33b596676eb3946a2a164eb87969df7f1096d",class:"banner-browser-edge","aria-hidden":"true"}),a("div",{key:"a8ac3a1205dc706851c7fcc5548df6e91dae7011",class:"banner-overflow"},a("section",{key:"ebdbea2bb8f34d06e347217d5ca458242e3a12c1",class:"banner-surface ds-chrome-header ds-chrome-header--wrapping",role:this.role,"aria-live":this.ariaLive,"aria-atomic":this.announcement==="none"?undefined:"true","aria-hidden":n?"true":undefined,inert:n?true:undefined,"data-phase":this.phase},a("div",{key:"e5c1b3c8b0b456dc938211e18bdcee482a558507",class:"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md"},a("ds-text",{key:"39c59108b9586e00bcb405ff1d938ca065e5a387",class:"banner-copy-flow",as:"div",variant:"text-body-medium",color:"inherit"},this.heading&&a("ds-text",{key:"8224dddba3be272936db56347b8c4d9346486f1f",class:"banner-heading",as:"span",variant:"text-title-small",color:"inherit"},this.heading),a("span",{key:"aadc2c000324ae101d6eb36d62d65f4caba551fa",class:"banner-description"},this.description))),a("div",{key:"3fe166e78815a84cb25b34341d5fde7c6562fbf8",class:"banner-trailing ds-chrome-header__trailing"},a("div",{key:"24d6e6fb5ec084a2b2eedda970228cf8aeec638c",class:{"banner-actions":true,"banner-actions--empty":!this.hasActions}},a("slot",{key:"45dd739b4f94a333a2dc0c93fe5defeedf1e4d8b",name:"actions",onSlotchange:n=>this.updateActionsPresence(n.currentTarget)})),a("div",{key:"5be4fbded01e7e3335d72fbd6d1c6aa154793eca",class:"banner-dismiss"},a("ds-tooltip",{key:"4c5b0a6361387b84f84cda25de4091603f5597f9",label:this.dismissLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{key:"fcd4b9eb257a75426eaf208ad99b1d227a4caa07",class:"banner-close",variant:"icon",icon:"Cross",size:"md",type:"button",background:this.contrast,"aria-label":this.dismissLabel,hasBorder:false,activeFill:false,onDsClick:n=>this.requestClose(n)})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return g()}},[262,"ds-banner",{description:[1],heading:[1],intent:[513],contrast:[513],orientation:[513],open:[516],dismissLabel:[1,"dismiss-label"],announcement:[1],rendered:[32],phase:[32],hasActions:[32]},undefined,{open:[{onOpenChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const n=["ds-banner","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-banner":if(!customElements.get(o(n))){customElements.define(o(n),m)}break;case"ds-badge":if(!customElements.get(o(n))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(n))){i()}break;case"ds-icon":if(!customElements.get(o(n))){t()}break;case"ds-loader":if(!customElements.get(o(n))){c()}break;case"ds-text":if(!customElements.get(o(n))){b()}break;case"ds-tooltip":if(!customElements.get(o(n))){l()}break}}))}p();const f=m;const v=p;export{f as DsBanner,v as defineCustomElement};
1
+ import{p as n,H as e,c as r,h as a,a as s,t as o}from"./index.js";import{d}from"./p-ZhP2tVmM.js";import{d as i}from"./p-Dzndkdx5.js";import{d as t}from"./p-DjkUFlDW.js";import{d as c}from"./p-0XTyQNRG.js";import{d as b}from"./p-DwbcNDJF.js";import{d as l}from"./p-CYzFfFcH.js";import{b as h,T as u}from"./p-CeXf9-X3.js";const g=()=>`@media (forced-colors: active){.sc-ds-banner:root,.sc-ds-banner-h,.ds-forced-colors-scope.sc-ds-banner{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-banner-h,.sc-ds-banner:where(.ds-table),.sc-ds-banner:where(.tooltip-popup),.sc-ds-banner:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-banner,.ds-control--lg.sc-ds-banner-h,.ds-control--md.sc-ds-banner-h,.ds-control--md.sc-ds-banner,.ds-control--sm.sc-ds-banner-h,.ds-control--sm.sc-ds-banner,.ds-control--xs.sc-ds-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-banner-h,.ds-control--lg.sc-ds-banner{--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-banner-h,.ds-control--md.sc-ds-banner{--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-banner-h,.ds-control--sm.sc-ds-banner{--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-banner-h,.ds-control--xs.sc-ds-banner{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-banner{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-banner{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-banner{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-banner,.ds-chrome-header__trailing.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-banner{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-banner{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-banner{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-banner{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-banner,.ds-chrome-header__description.sc-ds-banner{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-banner{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-banner .ds-chrome-header__description.sc-ds-banner{flex:1 1 var(--dimension-card-width-xs)}.sc-ds-banner-h{display:grid;overflow:hidden;min-width:0;grid-template-rows:1fr;transition:grid-template-rows var(--effect-animation-duration-short-3) var(--_banner-motion-easing);--ds-banner-background:var(--color-background-faint-neutral);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary);--_banner-motion-easing:var(--effect-animation-easing-ease-in-out, ease);--_banner-surface-translate:0%}.banner--open.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-out, ease-out)}.banner--closing.sc-ds-banner-h{--_banner-motion-easing:var(--effect-animation-easing-ease-in, ease-in);--_banner-surface-translate:-100%;grid-template-rows:0fr}.banner--hidden.sc-ds-banner-h{--_banner-surface-translate:-100%;display:none;visibility:hidden;grid-template-rows:0fr}.banner-overflow.sc-ds-banner{min-height:0;overflow:visible}.banner-browser-edge.sc-ds-banner{display:none;position:fixed;inset:0 0 auto;height:max(var(--dimension-space-200), env(safe-area-inset-top, 0px));pointer-events:none;background-color:var(--ds-banner-background)}.banner--open.sc-ds-banner-h .banner-browser-edge.sc-ds-banner,.banner--closing.sc-ds-banner-h .banner-browser-edge.sc-ds-banner{display:var(--_shell-banner-edge-display, none)}.banner-surface.sc-ds-banner{display:flex;position:relative;width:100%;padding-inline-end:calc(var(--dimension-size-400) + var(--dimension-space-200));color:var(--ds-banner-description);background-color:var(--ds-banner-background);border-bottom:var(--dimension-stroke-width-012) solid var(--ds-banner-border);transform:translateY(var(--_banner-surface-translate));transition:transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing)}@starting-style{.sc-ds-banner-h.banner--open{grid-template-rows:0fr}.sc-ds-banner-h.banner--open .banner-surface{transform:translateY(-100%)}}.banner-copy.sc-ds-banner{flex-basis:var(--dimension-card-width-sm)}.banner--orientation-horizontal.sc-ds-banner-h .banner-surface.sc-ds-banner{flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h .banner-copy.sc-ds-banner{flex-basis:100%}.banner-copy-flow.sc-ds-banner{box-sizing:border-box;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));color:var(--ds-banner-description)}.banner-heading.sc-ds-banner{display:inline-block;width:auto;max-width:100%;margin-inline-end:var(--dimension-space-100);vertical-align:baseline;color:var(--ds-banner-heading)}.banner-description.sc-ds-banner{color:var(--ds-banner-description)}.banner-actions.sc-ds-banner{display:flex;align-items:center;flex:0 0 auto;flex-wrap:nowrap;min-width:0;gap:var(--dimension-space-100)}.banner-actions.sc-ds-banner slot.sc-ds-banner{display:contents}.banner-actions.sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions .sc-ds-banner-s>:not(ds-button-unfilled),.banner-actions.sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3),.banner-actions .sc-ds-banner-s>ds-button-unfilled:nth-of-type(n+3){display:none}.banner-actions--empty.sc-ds-banner{display:none}.banner-trailing.sc-ds-banner{align-self:flex-start;flex-wrap:nowrap}.banner--orientation-vertical.sc-ds-banner-h:not(.banner--has-actions) .banner-trailing.sc-ds-banner{display:contents}.banner--orientation-vertical.banner--has-actions.sc-ds-banner-h .banner-trailing.sc-ds-banner{margin-inline:var(--dimension-space-100) auto;padding-block-end:var(--dimension-space-100);box-sizing:border-box}.banner--orientation-vertical.sc-ds-banner-h .banner-description.sc-ds-banner{display:block}.banner--orientation-vertical.sc-ds-banner-h .banner-heading.sc-ds-banner+.banner-description.sc-ds-banner{margin-block-start:var(--dimension-space-050)}.banner-close.sc-ds-banner{flex:0 0 auto}.banner-dismiss.sc-ds-banner{position:absolute;inset-block-start:var(--dimension-space-100);inset-inline-end:var(--dimension-space-100)}.banner--intent-neutral.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-neutral)}.banner--intent-brand.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-brand)}.banner--intent-positive.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-positive)}.banner--intent-warning.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-warning)}.banner--intent-caution.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-caution)}.banner--intent-negative.sc-ds-banner-h{--ds-banner-faint-background:var(--color-background-faint-negative)}.banner--contrast-faint.sc-ds-banner-h{--ds-banner-background:var(--ds-banner-faint-background);--ds-banner-heading:var(--color-foreground-primary);--ds-banner-description:var(--color-foreground-secondary);--ds-banner-border:var(--color-border-tertiary)}.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-neutral);--ds-banner-heading:var(--color-foreground-on-medium-background-primary);--ds-banner-description:var(--color-foreground-on-medium-background-secondary);--ds-banner-border:var(--color-border-on-medium-background-tertiary)}.banner--intent-brand.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-brand)}.banner--intent-positive.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-positive)}.banner--intent-warning.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-warning)}.banner--intent-caution.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-caution)}.banner--intent-negative.banner--contrast-medium.sc-ds-banner-h{--ds-banner-background:var(--color-background-medium-negative)}.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-neutral);--ds-banner-heading:var(--color-foreground-on-strong-background-primary);--ds-banner-description:var(--color-foreground-on-strong-background-secondary);--ds-banner-border:var(--color-border-on-strong-background-tertiary)}.banner--intent-brand.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-brand)}.banner--intent-positive.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-positive)}.banner--intent-warning.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-warning)}.banner--intent-caution.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-caution)}.banner--intent-negative.banner--contrast-strong.sc-ds-banner-h{--ds-banner-background:var(--color-background-strong-negative)}.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-neutral);--ds-banner-heading:var(--color-foreground-on-bold-background-primary);--ds-banner-description:var(--color-foreground-on-bold-background-secondary);--ds-banner-border:var(--color-border-on-bold-background-tertiary)}.banner--intent-brand.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-brand)}.banner--intent-positive.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-positive)}.banner--intent-warning.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-warning)}.banner--intent-caution.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-caution)}.banner--intent-negative.banner--contrast-bold.sc-ds-banner-h{--ds-banner-background:var(--color-background-bold-negative)}@media (prefers-reduced-motion: reduce){.sc-ds-banner-h,.banner-surface.sc-ds-banner{transition:none}}@media (forced-colors: active){.banner-browser-edge.sc-ds-banner{background-color:var(--ds-forced-color-surface)}.banner-surface.sc-ds-banner{color:var(--ds-forced-color-content);background-color:var(--ds-forced-color-surface);border-bottom-color:var(--ds-forced-color-content)}.banner-heading.sc-ds-banner,.banner-description.sc-ds-banner{color:var(--ds-forced-color-content)}}`;const m=n(class n extends e{constructor(n){super();if(n!==false){this.__registerHost()}this.dsClose=r(this,"dsClose",7);this.dsAfterClose=r(this,"dsAfterClose",7);this.heading="";this.intent="neutral";this.contrast="faint";this.orientation="horizontal";this.open=true;this.dismissLabel="Dismiss banner";this.announcement="none";this.rendered=false;this.phase="closed";this.hasActions=false;this.loaded=false;this.transitionTimer=null;this.closePending=false}componentWillLoad(){this.rendered=this.open;this.phase=this.open?"open":"closed"}componentDidLoad(){this.loaded=true;this.updateActionsPresence()}disconnectedCallback(){this.clearTransitionWork()}onOpenChange(n){if(!this.loaded)return;if(n)this.startOpen();else this.startClose()}get closeMotionMs(){return h(u.motionShort3,u.animationDurationShort3)}clearTransitionWork(){if(this.transitionTimer)clearTimeout(this.transitionTimer);this.transitionTimer=null}startOpen(){this.clearTransitionWork();this.closePending=false;this.rendered=true;this.phase="open"}startClose(){this.clearTransitionWork();if(!this.rendered||this.phase==="closed"){this.rendered=false;return}this.closePending=true;this.phase="closing";const n=this.closeMotionMs;if(n<=0){this.finishClose();return}this.transitionTimer=setTimeout((()=>{this.transitionTimer=null;this.finishClose()}),n)}finishClose(){if(this.open||!this.closePending)return;this.closePending=false;this.rendered=false;this.phase="closed";this.dsAfterClose.emit()}updateActionsPresence(n){const e=n?n.assignedElements().filter((n=>n.tagName==="DS-BUTTON-UNFILLED")):Array.from(this.el.querySelectorAll('ds-button-unfilled[slot="actions"]'));this.hasActions=e.length>0}requestClose(n){if(!this.open||this.phase==="closing")return;this.dsClose.emit(n.detail)}get role(){if(this.announcement==="polite")return"status";if(this.announcement==="assertive")return"alert";return undefined}get ariaLive(){return this.announcement==="none"?undefined:this.announcement}render(){const n=this.phase==="closing";const e={banner:true,"banner--open":this.phase==="open","banner--closing":n,"banner--hidden":!this.rendered,"banner--has-actions":this.hasActions,[`banner--orientation-${this.orientation}`]:true,[`banner--intent-${this.intent}`]:true,[`banner--contrast-${this.contrast}`]:true};return a(s,{key:"6534fbca846204f684b8301d5c865001503b1354",class:e},a("div",{key:"6cd33b596676eb3946a2a164eb87969df7f1096d",class:"banner-browser-edge","aria-hidden":"true"}),a("div",{key:"a8ac3a1205dc706851c7fcc5548df6e91dae7011",class:"banner-overflow"},a("section",{key:"ebdbea2bb8f34d06e347217d5ca458242e3a12c1",class:"banner-surface ds-chrome-header ds-chrome-header--wrapping",role:this.role,"aria-live":this.ariaLive,"aria-atomic":this.announcement==="none"?undefined:"true","aria-hidden":n?"true":undefined,inert:n?true:undefined,"data-phase":this.phase},a("div",{key:"dd6529890dd13226f0188e69399b41204571f1da",class:"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md"},a("ds-text",{key:"a80eb86fd56decd943b9aeae79c1a660f92d87d4",class:"banner-copy-flow",as:"div",variant:"text-body-medium",color:"inherit"},this.heading&&a("ds-text",{key:"3c978bb2ed5be75aa326fd118ce865afe7349c82",class:"banner-heading",as:"span",variant:"text-title-small",color:"inherit"},this.heading),a("span",{key:"adea8809ffa620600ddacb3e192785f1f6a8c5f1",class:"banner-description"},this.description))),a("div",{key:"2610a5dc4cd750e5b30fee026597ad7c9716bffb",class:"banner-trailing ds-chrome-header__trailing"},a("div",{key:"dd3e69e8c932a969973146697398d5522d2a3a95",class:{"banner-actions":true,"banner-actions--empty":!this.hasActions}},a("slot",{key:"21325872141723c8b54ae8bc64cd845f3e7e9c6c",name:"actions",onSlotchange:n=>this.updateActionsPresence(n.currentTarget)})),a("div",{key:"a58f0a5e37816d50f044323d41a81bda7dac9b5d",class:"banner-dismiss"},a("ds-tooltip",{key:"fc1e01a83900588fe49d98846872c34f3952fc89",label:this.dismissLabel,side:"bottom",size:"sm"},a("ds-button-unfilled",{key:"1190c99608ded04db99469058c73f5536e28627c",class:"banner-close",variant:"icon",icon:"Cross",size:"md",type:"button",background:this.contrast,"aria-label":this.dismissLabel,hasBorder:false,activeFill:false,onDsClick:n=>this.requestClose(n)})))))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return g()}},[262,"ds-banner",{description:[1],heading:[1],intent:[513],contrast:[513],orientation:[513],open:[516],dismissLabel:[1,"dismiss-label"],announcement:[1],rendered:[32],phase:[32],hasActions:[32]},undefined,{open:[{onOpenChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const n=["ds-banner","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];n.forEach((n=>{switch(n){case"ds-banner":if(!customElements.get(o(n))){customElements.define(o(n),m)}break;case"ds-badge":if(!customElements.get(o(n))){d()}break;case"ds-button-unfilled":if(!customElements.get(o(n))){i()}break;case"ds-icon":if(!customElements.get(o(n))){t()}break;case"ds-loader":if(!customElements.get(o(n))){c()}break;case"ds-text":if(!customElements.get(o(n))){b()}break;case"ds-tooltip":if(!customElements.get(o(n))){l()}break}}))}p();const f=m;const v=p;export{f as DsBanner,v as defineCustomElement};
2
2
  //# sourceMappingURL=ds-banner.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","intent","contrast","orientation","open","dismissLabel","announcement","rendered","phase","hasActions","loaded","transitionTimer","closePending","componentWillLoad","componentDidLoad","updateActionsPresence","disconnectedCallback","clearTransitionWork","onOpenChange","isOpen","startOpen","startClose","closeMotionMs","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","clearTimeout","duration","finishClose","setTimeout","dsAfterClose","emit","slot","actions","assignedElements","filter","element","tagName","Array","from","el","querySelectorAll","length","requestClose","event","dsClose","detail","role","undefined","ariaLive","render","closing","hostClass","banner","h","Host","key","class","inert","as","variant","color","description","name","onSlotchange","currentTarget","label","side","size","icon","type","background","hasBorder","activeFill","onDsClick"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n display: grid;\n overflow: hidden;\n min-width: 0;\n grid-template-rows: 1fr;\n transition: grid-template-rows var(--effect-animation-duration-short-3)\n var(--_banner-motion-easing);\n\n --ds-banner-background: var(--color-background-faint-neutral);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n --_banner-surface-translate: 0%;\n}\n\n:host(.banner--open) {\n --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n --_banner-surface-translate: -100%;\n grid-template-rows: 0fr;\n}\n\n:host(.banner--hidden) {\n --_banner-surface-translate: -100%;\n\n display: none;\n visibility: hidden;\n grid-template-rows: 0fr;\n}\n\n.banner-overflow {\n min-height: 0;\n overflow: visible;\n}\n\n/* ShellApp enables this surface only in its mobile banner lane. Keep it outside\n * the translated copy surface so fixed positioning stays viewport-owned. */\n.banner-browser-edge {\n display: none;\n position: fixed;\n inset: 0 0 auto;\n height: max(var(--dimension-space-200), env(safe-area-inset-top, 0px));\n pointer-events: none;\n background-color: var(--ds-banner-background);\n}\n\n:host(.banner--open) .banner-browser-edge,\n:host(.banner--closing) .banner-browser-edge {\n display: var(--_shell-banner-edge-display, none);\n}\n\n.banner-surface {\n display: flex;\n position: relative;\n width: 100%;\n padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n color: var(--ds-banner-description);\n background-color: var(--ds-banner-background);\n border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n transform: translateY(var(--_banner-surface-translate));\n transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n@starting-style {\n :host(.banner--open) {\n grid-template-rows: 0fr;\n }\n\n :host(.banner--open) .banner-surface {\n transform: translateY(-100%);\n }\n}\n\n.banner-copy {\n flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n flex-basis: 100%;\n}\n\n.banner-copy-flow {\n box-sizing: border-box;\n min-width: 0;\n padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--ds-banner-description);\n}\n\n.banner-heading {\n display: inline-block;\n width: auto;\n max-width: 100%;\n margin-inline-end: var(--dimension-space-100);\n vertical-align: baseline;\n color: var(--ds-banner-heading);\n}\n\n.banner-description {\n color: var(--ds-banner-description);\n}\n\n.banner-actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n flex-wrap: nowrap;\n min-width: 0;\n gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n display: none;\n}\n\n.banner-actions--empty {\n display: none;\n}\n\n.banner-trailing {\n align-self: flex-start;\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n margin-inline: var(--dimension-space-100) auto;\n padding-block-end: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n flex: 0 0 auto;\n}\n\n.banner-dismiss {\n position: absolute;\n inset-block-start: var(--dimension-space-100);\n inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n --ds-banner-background: var(--ds-banner-faint-background);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-neutral);\n --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-brand);\n}\n:host(.banner--intent-positive.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-positive);\n}\n:host(.banner--intent-warning.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-warning);\n}\n:host(.banner--intent-caution.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-caution);\n}\n:host(.banner--intent-negative.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-negative);\n}\n\n:host(.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-neutral);\n --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-brand);\n}\n:host(.banner--intent-positive.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-positive);\n}\n:host(.banner--intent-warning.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-warning);\n}\n:host(.banner--intent-caution.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-caution);\n}\n:host(.banner--intent-negative.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-negative);\n}\n\n:host(.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-neutral);\n --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-brand);\n}\n:host(.banner--intent-positive.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-positive);\n}\n:host(.banner--intent-warning.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-warning);\n}\n:host(.banner--intent-caution.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-caution);\n}\n:host(.banner--intent-negative.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-negative);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host,\n .banner-surface {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .banner-browser-edge {\n background-color: var(--ds-forced-color-surface);\n }\n\n .banner-surface {\n color: var(--ds-forced-color-content);\n background-color: var(--ds-forced-color-surface);\n border-bottom-color: var(--ds-forced-color-content);\n }\n\n .banner-heading,\n .banner-description {\n color: var(--ds-forced-color-content);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Element() el!: HTMLElement;\n\n /** Required explanatory copy. */\n @Prop() description!: string;\n /** Optional visual heading rendered before the description. */\n @Prop() heading: string = '';\n /** Semantic color family. */\n @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n /** Surface fill weight. */\n @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n /** Copy and action-lane arrangement, selected by the application. */\n @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n @Prop({ reflect: true }) open: boolean = true;\n /** Localized accessible label for the close control. */\n @Prop() dismissLabel: string = 'Dismiss banner';\n /** Live-region urgency, independent of visual intent. */\n @Prop() announcement: BannerAnnouncement = 'none';\n\n /** Emitted when the close control requests dismissal. The application controls open. */\n @Event() dsClose!: EventEmitter<MouseEvent>;\n /** Emitted once after controlled exit motion and layout collapse complete. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n @State() private rendered = false;\n @State() private phase: BannerPhase = 'closed';\n @State() private hasActions = false;\n\n private loaded = false;\n private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n private closePending = false;\n\n componentWillLoad() {\n this.rendered = this.open;\n this.phase = this.open ? 'open' : 'closed';\n }\n\n componentDidLoad() {\n this.loaded = true;\n this.updateActionsPresence();\n }\n\n disconnectedCallback() {\n this.clearTransitionWork();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (!this.loaded) return;\n if (isOpen) this.startOpen();\n else this.startClose();\n }\n\n private get closeMotionMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private clearTransitionWork() {\n if (this.transitionTimer) clearTimeout(this.transitionTimer);\n this.transitionTimer = null;\n }\n\n private startOpen() {\n this.clearTransitionWork();\n this.closePending = false;\n this.rendered = true;\n this.phase = 'open';\n }\n\n private startClose() {\n this.clearTransitionWork();\n if (!this.rendered || this.phase === 'closed') {\n this.rendered = false;\n return;\n }\n\n this.closePending = true;\n this.phase = 'closing';\n const duration = this.closeMotionMs;\n if (duration <= 0) {\n this.finishClose();\n return;\n }\n this.transitionTimer = setTimeout(() => {\n this.transitionTimer = null;\n this.finishClose();\n }, duration);\n }\n\n private finishClose() {\n if (this.open || !this.closePending) return;\n this.closePending = false;\n this.rendered = false;\n this.phase = 'closed';\n this.dsAfterClose.emit();\n }\n\n private updateActionsPresence(slot?: HTMLSlotElement) {\n const actions = slot\n ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n this.hasActions = actions.length > 0;\n }\n\n private requestClose(event: CustomEvent<MouseEvent>) {\n if (!this.open || this.phase === 'closing') return;\n this.dsClose.emit(event.detail);\n }\n\n private get role(): 'status' | 'alert' | undefined {\n if (this.announcement === 'polite') return 'status';\n if (this.announcement === 'assertive') return 'alert';\n return undefined;\n }\n\n private get ariaLive(): 'polite' | 'assertive' | undefined {\n return this.announcement === 'none' ? undefined : this.announcement;\n }\n\n render() {\n const closing = this.phase === 'closing';\n const hostClass = {\n banner: true,\n 'banner--open': this.phase === 'open',\n 'banner--closing': closing,\n 'banner--hidden': !this.rendered,\n 'banner--has-actions': this.hasActions,\n [`banner--orientation-${this.orientation}`]: true,\n [`banner--intent-${this.intent}`]: true,\n [`banner--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host class={hostClass}>\n <div class=\"banner-browser-edge\" aria-hidden=\"true\" />\n <div class=\"banner-overflow\">\n <section\n class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n role={this.role}\n aria-live={this.ariaLive}\n aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n aria-hidden={closing ? 'true' : undefined}\n inert={closing ? true : undefined}\n data-phase={this.phase}\n >\n {/* eslint-disable-next-line local/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n <ds-text class=\"banner-copy-flow\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n {this.heading && (\n <ds-text\n class=\"banner-heading\"\n as=\"span\"\n variant=\"text-title-small\"\n color=\"inherit\"\n >\n {this.heading}\n </ds-text>\n )}\n <span class=\"banner-description\">{this.description}</span>\n </ds-text>\n </div>\n <div class=\"banner-trailing ds-chrome-header__trailing\">\n <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n <slot\n name=\"actions\"\n onSlotchange={(event: Event) =>\n this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n <div class=\"banner-dismiss\">\n <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"banner-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n type=\"button\"\n background={this.contrast}\n aria-label={this.dismissLabel}\n hasBorder={false}\n activeFill={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n />\n </ds-tooltip>\n </div>\n </div>\n </section>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gUAAA,MAAMA,EAAY,IAAM,ikX,MC0BXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,wHAWUC,KAAAC,QAAkB,GAEDD,KAAAE,OAAuB,UAEvBF,KAAAG,SAA2B,QAE3BH,KAAAI,YAAiC,aAEjCJ,KAAAK,KAAgB,KAEjCL,KAAAM,aAAuB,iBAEvBN,KAAAO,aAAmC,OAO1BP,KAAAQ,SAAW,MACXR,KAAAS,MAAqB,SACrBT,KAAAU,WAAa,MAEtBV,KAAAW,OAAS,MACTX,KAAAY,gBAAwD,KACxDZ,KAAAa,aAAe,KAkKxB,CAhKC,iBAAAC,GACEd,KAAKQ,SAAWR,KAAKK,KACrBL,KAAKS,MAAQT,KAAKK,KAAO,OAAS,Q,CAGpC,gBAAAU,GACEf,KAAKW,OAAS,KACdX,KAAKgB,uB,CAGP,oBAAAC,GACEjB,KAAKkB,qB,CAIP,YAAAC,CAAaC,GACX,IAAKpB,KAAKW,OAAQ,OAClB,GAAIS,EAAQpB,KAAKqB,iBACZrB,KAAKsB,Y,CAGZ,iBAAYC,GACV,OAAOC,EAAoBC,EAAeC,aAAcD,EAAeE,wB,CAGjE,mBAAAT,GACN,GAAIlB,KAAKY,gBAAiBgB,aAAa5B,KAAKY,iBAC5CZ,KAAKY,gBAAkB,I,CAGjB,SAAAS,GACNrB,KAAKkB,sBACLlB,KAAKa,aAAe,MACpBb,KAAKQ,SAAW,KAChBR,KAAKS,MAAQ,M,CAGP,UAAAa,GACNtB,KAAKkB,sBACL,IAAKlB,KAAKQ,UAAYR,KAAKS,QAAU,SAAU,CAC7CT,KAAKQ,SAAW,MAChB,M,CAGFR,KAAKa,aAAe,KACpBb,KAAKS,MAAQ,UACb,MAAMoB,EAAW7B,KAAKuB,cACtB,GAAIM,GAAY,EAAG,CACjB7B,KAAK8B,cACL,M,CAEF9B,KAAKY,gBAAkBmB,YAAW,KAChC/B,KAAKY,gBAAkB,KACvBZ,KAAK8B,aAAa,GACjBD,E,CAGG,WAAAC,GACN,GAAI9B,KAAKK,OAASL,KAAKa,aAAc,OACrCb,KAAKa,aAAe,MACpBb,KAAKQ,SAAW,MAChBR,KAAKS,MAAQ,SACbT,KAAKgC,aAAaC,M,CAGZ,qBAAAjB,CAAsBkB,GAC5B,MAAMC,EAAUD,EACZA,EAAKE,mBAAmBC,QAAOC,GAAWA,EAAQC,UAAY,uBAC9DC,MAAMC,KAAKzC,KAAK0C,GAAGC,iBAAiB,uCACxC3C,KAAKU,WAAayB,EAAQS,OAAS,C,CAG7B,YAAAC,CAAaC,GACnB,IAAK9C,KAAKK,MAAQL,KAAKS,QAAU,UAAW,OAC5CT,KAAK+C,QAAQd,KAAKa,EAAME,O,CAG1B,QAAYC,GACV,GAAIjD,KAAKO,eAAiB,SAAU,MAAO,SAC3C,GAAIP,KAAKO,eAAiB,YAAa,MAAO,QAC9C,OAAO2C,S,CAGT,YAAYC,GACV,OAAOnD,KAAKO,eAAiB,OAAS2C,UAAYlD,KAAKO,Y,CAGzD,MAAA6C,GACE,MAAMC,EAAUrD,KAAKS,QAAU,UAC/B,MAAM6C,EAAY,CAChBC,OAAQ,KACR,eAAgBvD,KAAKS,QAAU,OAC/B,kBAAmB4C,EACnB,kBAAmBrD,KAAKQ,SACxB,sBAAuBR,KAAKU,WAC5B,CAAC,uBAAuBV,KAAKI,eAAgB,KAC7C,CAAC,kBAAkBJ,KAAKE,UAAW,KACnC,CAAC,oBAAoBF,KAAKG,YAAa,MAGzC,OACEqD,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,GACXE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBAAqB,cAAa,SAC7CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,6DACNV,KAAMjD,KAAKiD,KAAI,YACJjD,KAAKmD,SAAQ,cACXnD,KAAKO,eAAiB,OAAS2C,UAAY,OAAM,cACjDG,EAAU,OAASH,UAChCU,MAAOP,EAAU,KAAOH,UAAS,aACrBlD,KAAKS,OAGjB+C,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sFACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,mBAAmBE,GAAG,MAAMC,QAAQ,mBAAmBC,MAAM,WACzE/D,KAAKC,SACJuD,EAAA,WAAAE,IAAA,2CACEC,MAAM,iBACNE,GAAG,OACHC,QAAQ,mBACRC,MAAM,WAEL/D,KAAKC,SAGVuD,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsB3D,KAAKgE,eAG3CR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8CACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAE,iBAAkB,KAAM,yBAA0B3D,KAAKU,aACnE8C,EAAA,QAAAE,IAAA,2CACEO,KAAK,UACLC,aAAepB,GACb9C,KAAKgB,sBAAsB8B,EAAMqB,kBAIvCX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,cAAAE,IAAA,2CAAYU,MAAOpE,KAAKM,aAAc+D,KAAK,SAASC,KAAK,MACvDd,EAAA,sBAAAE,IAAA,2CACEC,MAAM,eACNG,QAAQ,OACRS,KAAK,QACLD,KAAK,KACLE,KAAK,SACLC,WAAYzE,KAAKG,SAAQ,aACbH,KAAKM,aACjBoE,UAAW,MACXC,WAAY,MACZC,UAAY9B,GAAmC9C,KAAK6C,aAAaC,U","ignoreList":[]}
1
+ {"version":3,"names":["bannerCss","Banner","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","intent","contrast","orientation","open","dismissLabel","announcement","rendered","phase","hasActions","loaded","transitionTimer","closePending","componentWillLoad","componentDidLoad","updateActionsPresence","disconnectedCallback","clearTransitionWork","onOpenChange","isOpen","startOpen","startClose","closeMotionMs","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","clearTimeout","duration","finishClose","setTimeout","dsAfterClose","emit","slot","actions","assignedElements","filter","element","tagName","Array","from","el","querySelectorAll","length","requestClose","event","dsClose","detail","role","undefined","ariaLive","render","closing","hostClass","banner","h","Host","key","class","inert","as","variant","color","description","name","onSlotchange","currentTarget","label","side","size","icon","type","background","hasBorder","activeFill","onDsClick"],"sources":["src/wc/components/Banner/Banner.css?tag=ds-banner&encapsulation=scoped","src/wc/components/Banner/Banner.tsx"],"sourcesContent":["@import '../../utils/forced-colors.css';\n@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n\n:host {\n display: grid;\n overflow: hidden;\n min-width: 0;\n grid-template-rows: 1fr;\n transition: grid-template-rows var(--effect-animation-duration-short-3)\n var(--_banner-motion-easing);\n\n --ds-banner-background: var(--color-background-faint-neutral);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n --_banner-motion-easing: var(--effect-animation-easing-ease-in-out, ease);\n --_banner-surface-translate: 0%;\n}\n\n:host(.banner--open) {\n --_banner-motion-easing: var(--effect-animation-easing-ease-out, ease-out);\n}\n\n:host(.banner--closing) {\n --_banner-motion-easing: var(--effect-animation-easing-ease-in, ease-in);\n --_banner-surface-translate: -100%;\n grid-template-rows: 0fr;\n}\n\n:host(.banner--hidden) {\n --_banner-surface-translate: -100%;\n\n display: none;\n visibility: hidden;\n grid-template-rows: 0fr;\n}\n\n.banner-overflow {\n min-height: 0;\n overflow: visible;\n}\n\n/* ShellApp enables this surface only in its mobile banner lane. Keep it outside\n * the translated copy surface so fixed positioning stays viewport-owned. */\n.banner-browser-edge {\n display: none;\n position: fixed;\n inset: 0 0 auto;\n height: max(var(--dimension-space-200), env(safe-area-inset-top, 0px));\n pointer-events: none;\n background-color: var(--ds-banner-background);\n}\n\n:host(.banner--open) .banner-browser-edge,\n:host(.banner--closing) .banner-browser-edge {\n display: var(--_shell-banner-edge-display, none);\n}\n\n.banner-surface {\n display: flex;\n position: relative;\n width: 100%;\n padding-inline-end: calc(var(--dimension-size-400) + var(--dimension-space-200));\n color: var(--ds-banner-description);\n background-color: var(--ds-banner-background);\n border-bottom: var(--dimension-stroke-width-012) solid var(--ds-banner-border);\n transform: translateY(var(--_banner-surface-translate));\n transition: transform var(--effect-animation-duration-short-3) var(--_banner-motion-easing);\n}\n\n@starting-style {\n :host(.banner--open) {\n grid-template-rows: 0fr;\n }\n\n :host(.banner--open) .banner-surface {\n transform: translateY(-100%);\n }\n}\n\n.banner-copy {\n flex-basis: var(--dimension-card-width-sm);\n}\n\n:host(.banner--orientation-horizontal) .banner-surface {\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical) .banner-copy {\n flex-basis: 100%;\n}\n\n.banner-copy-flow {\n box-sizing: border-box;\n min-width: 0;\n padding-inline: var(--ds-control-label-inset, var(--dimension-space-025));\n color: var(--ds-banner-description);\n}\n\n.banner-heading {\n display: inline-block;\n width: auto;\n max-width: 100%;\n margin-inline-end: var(--dimension-space-100);\n vertical-align: baseline;\n color: var(--ds-banner-heading);\n}\n\n.banner-description {\n color: var(--ds-banner-description);\n}\n\n.banner-actions {\n display: flex;\n align-items: center;\n flex: 0 0 auto;\n flex-wrap: nowrap;\n min-width: 0;\n gap: var(--dimension-space-100);\n}\n\n.banner-actions slot {\n display: contents;\n}\n\n.banner-actions ::slotted(:not(ds-button-unfilled)),\n.banner-actions ::slotted(ds-button-unfilled:nth-of-type(n + 3)) {\n display: none;\n}\n\n.banner-actions--empty {\n display: none;\n}\n\n.banner-trailing {\n align-self: flex-start;\n flex-wrap: nowrap;\n}\n\n:host(.banner--orientation-vertical:not(.banner--has-actions)) .banner-trailing {\n display: contents;\n}\n\n:host(.banner--orientation-vertical.banner--has-actions) .banner-trailing {\n margin-inline: var(--dimension-space-100) auto;\n padding-block-end: var(--dimension-space-100);\n box-sizing: border-box;\n}\n\n:host(.banner--orientation-vertical) .banner-description {\n display: block;\n}\n\n:host(.banner--orientation-vertical) .banner-heading + .banner-description {\n margin-block-start: var(--dimension-space-050);\n}\n\n.banner-close {\n flex: 0 0 auto;\n}\n\n.banner-dismiss {\n position: absolute;\n inset-block-start: var(--dimension-space-100);\n inset-inline-end: var(--dimension-space-100);\n}\n\n:host(.banner--intent-neutral) {\n --ds-banner-faint-background: var(--color-background-faint-neutral);\n}\n\n:host(.banner--intent-brand) {\n --ds-banner-faint-background: var(--color-background-faint-brand);\n}\n\n:host(.banner--intent-positive) {\n --ds-banner-faint-background: var(--color-background-faint-positive);\n}\n\n:host(.banner--intent-warning) {\n --ds-banner-faint-background: var(--color-background-faint-warning);\n}\n\n:host(.banner--intent-caution) {\n --ds-banner-faint-background: var(--color-background-faint-caution);\n}\n\n:host(.banner--intent-negative) {\n --ds-banner-faint-background: var(--color-background-faint-negative);\n}\n\n:host(.banner--contrast-faint) {\n --ds-banner-background: var(--ds-banner-faint-background);\n --ds-banner-heading: var(--color-foreground-primary);\n --ds-banner-description: var(--color-foreground-secondary);\n --ds-banner-border: var(--color-border-tertiary);\n}\n\n:host(.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-neutral);\n --ds-banner-heading: var(--color-foreground-on-medium-background-primary);\n --ds-banner-description: var(--color-foreground-on-medium-background-secondary);\n --ds-banner-border: var(--color-border-on-medium-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-brand);\n}\n:host(.banner--intent-positive.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-positive);\n}\n:host(.banner--intent-warning.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-warning);\n}\n:host(.banner--intent-caution.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-caution);\n}\n:host(.banner--intent-negative.banner--contrast-medium) {\n --ds-banner-background: var(--color-background-medium-negative);\n}\n\n:host(.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-neutral);\n --ds-banner-heading: var(--color-foreground-on-strong-background-primary);\n --ds-banner-description: var(--color-foreground-on-strong-background-secondary);\n --ds-banner-border: var(--color-border-on-strong-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-brand);\n}\n:host(.banner--intent-positive.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-positive);\n}\n:host(.banner--intent-warning.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-warning);\n}\n:host(.banner--intent-caution.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-caution);\n}\n:host(.banner--intent-negative.banner--contrast-strong) {\n --ds-banner-background: var(--color-background-strong-negative);\n}\n\n:host(.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-neutral);\n --ds-banner-heading: var(--color-foreground-on-bold-background-primary);\n --ds-banner-description: var(--color-foreground-on-bold-background-secondary);\n --ds-banner-border: var(--color-border-on-bold-background-tertiary);\n}\n\n:host(.banner--intent-brand.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-brand);\n}\n:host(.banner--intent-positive.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-positive);\n}\n:host(.banner--intent-warning.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-warning);\n}\n:host(.banner--intent-caution.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-caution);\n}\n:host(.banner--intent-negative.banner--contrast-bold) {\n --ds-banner-background: var(--color-background-bold-negative);\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host,\n .banner-surface {\n transition: none;\n }\n}\n\n@media (forced-colors: active) {\n .banner-browser-edge {\n background-color: var(--ds-forced-color-surface);\n }\n\n .banner-surface {\n color: var(--ds-forced-color-content);\n background-color: var(--ds-forced-color-surface);\n border-bottom-color: var(--ds-forced-color-content);\n }\n\n .banner-heading,\n .banner-description {\n color: var(--ds-forced-color-content);\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type BannerIntent = 'neutral' | 'brand' | 'positive' | 'warning' | 'caution' | 'negative';\n\nexport type BannerContrast = 'faint' | 'medium' | 'strong' | 'bold';\nexport type BannerAnnouncement = 'none' | 'polite' | 'assertive';\nexport type BannerOrientation = 'horizontal' | 'vertical';\n\ntype BannerPhase = 'closed' | 'open' | 'closing';\n\n@Component({\n tag: 'ds-banner',\n styleUrl: 'Banner.css',\n scoped: true,\n})\nexport class Banner {\n @Element() el!: HTMLElement;\n\n /** Required explanatory copy. */\n @Prop() description!: string;\n /** Optional visual heading rendered before the description. */\n @Prop() heading: string = '';\n /** Semantic color family. */\n @Prop({ reflect: true }) intent: BannerIntent = 'neutral';\n /** Surface fill weight. */\n @Prop({ reflect: true }) contrast: BannerContrast = 'faint';\n /** Copy and action-lane arrangement, selected by the application. */\n @Prop({ reflect: true }) orientation: BannerOrientation = 'horizontal';\n /** Controlled visibility. Keep the element mounted until dsAfterClose when unmounting. */\n @Prop({ reflect: true }) open: boolean = true;\n /** Localized accessible label for the close control. */\n @Prop() dismissLabel: string = 'Dismiss banner';\n /** Live-region urgency, independent of visual intent. */\n @Prop() announcement: BannerAnnouncement = 'none';\n\n /** Emitted when the close control requests dismissal. The application controls open. */\n @Event() dsClose!: EventEmitter<MouseEvent>;\n /** Emitted once after controlled exit motion and layout collapse complete. */\n @Event() dsAfterClose!: EventEmitter<void>;\n\n @State() private rendered = false;\n @State() private phase: BannerPhase = 'closed';\n @State() private hasActions = false;\n\n private loaded = false;\n private transitionTimer: ReturnType<typeof setTimeout> | null = null;\n private closePending = false;\n\n componentWillLoad() {\n this.rendered = this.open;\n this.phase = this.open ? 'open' : 'closed';\n }\n\n componentDidLoad() {\n this.loaded = true;\n this.updateActionsPresence();\n }\n\n disconnectedCallback() {\n this.clearTransitionWork();\n }\n\n @Watch('open')\n onOpenChange(isOpen: boolean) {\n if (!this.loaded) return;\n if (isOpen) this.startOpen();\n else this.startClose();\n }\n\n private get closeMotionMs(): number {\n return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n }\n\n private clearTransitionWork() {\n if (this.transitionTimer) clearTimeout(this.transitionTimer);\n this.transitionTimer = null;\n }\n\n private startOpen() {\n this.clearTransitionWork();\n this.closePending = false;\n this.rendered = true;\n this.phase = 'open';\n }\n\n private startClose() {\n this.clearTransitionWork();\n if (!this.rendered || this.phase === 'closed') {\n this.rendered = false;\n return;\n }\n\n this.closePending = true;\n this.phase = 'closing';\n const duration = this.closeMotionMs;\n if (duration <= 0) {\n this.finishClose();\n return;\n }\n this.transitionTimer = setTimeout(() => {\n this.transitionTimer = null;\n this.finishClose();\n }, duration);\n }\n\n private finishClose() {\n if (this.open || !this.closePending) return;\n this.closePending = false;\n this.rendered = false;\n this.phase = 'closed';\n this.dsAfterClose.emit();\n }\n\n private updateActionsPresence(slot?: HTMLSlotElement) {\n const actions = slot\n ? slot.assignedElements().filter(element => element.tagName === 'DS-BUTTON-UNFILLED')\n : Array.from(this.el.querySelectorAll('ds-button-unfilled[slot=\"actions\"]'));\n this.hasActions = actions.length > 0;\n }\n\n private requestClose(event: CustomEvent<MouseEvent>) {\n if (!this.open || this.phase === 'closing') return;\n this.dsClose.emit(event.detail);\n }\n\n private get role(): 'status' | 'alert' | undefined {\n if (this.announcement === 'polite') return 'status';\n if (this.announcement === 'assertive') return 'alert';\n return undefined;\n }\n\n private get ariaLive(): 'polite' | 'assertive' | undefined {\n return this.announcement === 'none' ? undefined : this.announcement;\n }\n\n render() {\n const closing = this.phase === 'closing';\n const hostClass = {\n banner: true,\n 'banner--open': this.phase === 'open',\n 'banner--closing': closing,\n 'banner--hidden': !this.rendered,\n 'banner--has-actions': this.hasActions,\n [`banner--orientation-${this.orientation}`]: true,\n [`banner--intent-${this.intent}`]: true,\n [`banner--contrast-${this.contrast}`]: true,\n };\n\n return (\n <Host class={hostClass}>\n <div class=\"banner-browser-edge\" aria-hidden=\"true\" />\n <div class=\"banner-overflow\">\n <section\n class=\"banner-surface ds-chrome-header ds-chrome-header--wrapping\"\n role={this.role}\n aria-live={this.ariaLive}\n aria-atomic={this.announcement === 'none' ? undefined : 'true'}\n aria-hidden={closing ? 'true' : undefined}\n inert={closing ? true : undefined}\n data-phase={this.phase}\n >\n {/* eslint-disable-next-line compomo/prefer-direct-ds-text -- The header-copy lane owns the 6px container inset separately from the inline text flow's 2px inset. */}\n <div class=\"banner-copy ds-chrome-header__copy ds-chrome-header__copy--wrapping ds-control--md\">\n <ds-text class=\"banner-copy-flow\" as=\"div\" variant=\"text-body-medium\" color=\"inherit\">\n {this.heading && (\n <ds-text\n class=\"banner-heading\"\n as=\"span\"\n variant=\"text-title-small\"\n color=\"inherit\"\n >\n {this.heading}\n </ds-text>\n )}\n <span class=\"banner-description\">{this.description}</span>\n </ds-text>\n </div>\n <div class=\"banner-trailing ds-chrome-header__trailing\">\n <div class={{ 'banner-actions': true, 'banner-actions--empty': !this.hasActions }}>\n <slot\n name=\"actions\"\n onSlotchange={(event: Event) =>\n this.updateActionsPresence(event.currentTarget as HTMLSlotElement)\n }\n />\n </div>\n <div class=\"banner-dismiss\">\n <ds-tooltip label={this.dismissLabel} side=\"bottom\" size=\"sm\">\n <ds-button-unfilled\n class=\"banner-close\"\n variant=\"icon\"\n icon=\"Cross\"\n size=\"md\"\n type=\"button\"\n background={this.contrast}\n aria-label={this.dismissLabel}\n hasBorder={false}\n activeFill={false}\n onDsClick={(event: CustomEvent<MouseEvent>) => this.requestClose(event)}\n />\n </ds-tooltip>\n </div>\n </div>\n </section>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"gUAAA,MAAMA,EAAY,IAAM,ikX,MC0BXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,wHAWUC,KAAAC,QAAkB,GAEDD,KAAAE,OAAuB,UAEvBF,KAAAG,SAA2B,QAE3BH,KAAAI,YAAiC,aAEjCJ,KAAAK,KAAgB,KAEjCL,KAAAM,aAAuB,iBAEvBN,KAAAO,aAAmC,OAO1BP,KAAAQ,SAAW,MACXR,KAAAS,MAAqB,SACrBT,KAAAU,WAAa,MAEtBV,KAAAW,OAAS,MACTX,KAAAY,gBAAwD,KACxDZ,KAAAa,aAAe,KAkKxB,CAhKC,iBAAAC,GACEd,KAAKQ,SAAWR,KAAKK,KACrBL,KAAKS,MAAQT,KAAKK,KAAO,OAAS,Q,CAGpC,gBAAAU,GACEf,KAAKW,OAAS,KACdX,KAAKgB,uB,CAGP,oBAAAC,GACEjB,KAAKkB,qB,CAIP,YAAAC,CAAaC,GACX,IAAKpB,KAAKW,OAAQ,OAClB,GAAIS,EAAQpB,KAAKqB,iBACZrB,KAAKsB,Y,CAGZ,iBAAYC,GACV,OAAOC,EAAoBC,EAAeC,aAAcD,EAAeE,wB,CAGjE,mBAAAT,GACN,GAAIlB,KAAKY,gBAAiBgB,aAAa5B,KAAKY,iBAC5CZ,KAAKY,gBAAkB,I,CAGjB,SAAAS,GACNrB,KAAKkB,sBACLlB,KAAKa,aAAe,MACpBb,KAAKQ,SAAW,KAChBR,KAAKS,MAAQ,M,CAGP,UAAAa,GACNtB,KAAKkB,sBACL,IAAKlB,KAAKQ,UAAYR,KAAKS,QAAU,SAAU,CAC7CT,KAAKQ,SAAW,MAChB,M,CAGFR,KAAKa,aAAe,KACpBb,KAAKS,MAAQ,UACb,MAAMoB,EAAW7B,KAAKuB,cACtB,GAAIM,GAAY,EAAG,CACjB7B,KAAK8B,cACL,M,CAEF9B,KAAKY,gBAAkBmB,YAAW,KAChC/B,KAAKY,gBAAkB,KACvBZ,KAAK8B,aAAa,GACjBD,E,CAGG,WAAAC,GACN,GAAI9B,KAAKK,OAASL,KAAKa,aAAc,OACrCb,KAAKa,aAAe,MACpBb,KAAKQ,SAAW,MAChBR,KAAKS,MAAQ,SACbT,KAAKgC,aAAaC,M,CAGZ,qBAAAjB,CAAsBkB,GAC5B,MAAMC,EAAUD,EACZA,EAAKE,mBAAmBC,QAAOC,GAAWA,EAAQC,UAAY,uBAC9DC,MAAMC,KAAKzC,KAAK0C,GAAGC,iBAAiB,uCACxC3C,KAAKU,WAAayB,EAAQS,OAAS,C,CAG7B,YAAAC,CAAaC,GACnB,IAAK9C,KAAKK,MAAQL,KAAKS,QAAU,UAAW,OAC5CT,KAAK+C,QAAQd,KAAKa,EAAME,O,CAG1B,QAAYC,GACV,GAAIjD,KAAKO,eAAiB,SAAU,MAAO,SAC3C,GAAIP,KAAKO,eAAiB,YAAa,MAAO,QAC9C,OAAO2C,S,CAGT,YAAYC,GACV,OAAOnD,KAAKO,eAAiB,OAAS2C,UAAYlD,KAAKO,Y,CAGzD,MAAA6C,GACE,MAAMC,EAAUrD,KAAKS,QAAU,UAC/B,MAAM6C,EAAY,CAChBC,OAAQ,KACR,eAAgBvD,KAAKS,QAAU,OAC/B,kBAAmB4C,EACnB,kBAAmBrD,KAAKQ,SACxB,sBAAuBR,KAAKU,WAC5B,CAAC,uBAAuBV,KAAKI,eAAgB,KAC7C,CAAC,kBAAkBJ,KAAKE,UAAW,KACnC,CAAC,oBAAoBF,KAAKG,YAAa,MAGzC,OACEqD,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAOL,GACXE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBAAqB,cAAa,SAC7CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,6DACNV,KAAMjD,KAAKiD,KAAI,YACJjD,KAAKmD,SAAQ,cACXnD,KAAKO,eAAiB,OAAS2C,UAAY,OAAM,cACjDG,EAAU,OAASH,UAChCU,MAAOP,EAAU,KAAOH,UAAS,aACrBlD,KAAKS,OAGjB+C,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sFACTH,EAAA,WAAAE,IAAA,2CAASC,MAAM,mBAAmBE,GAAG,MAAMC,QAAQ,mBAAmBC,MAAM,WACzE/D,KAAKC,SACJuD,EAAA,WAAAE,IAAA,2CACEC,MAAM,iBACNE,GAAG,OACHC,QAAQ,mBACRC,MAAM,WAEL/D,KAAKC,SAGVuD,EAAA,QAAAE,IAAA,2CAAMC,MAAM,sBAAsB3D,KAAKgE,eAG3CR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8CACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAO,CAAE,iBAAkB,KAAM,yBAA0B3D,KAAKU,aACnE8C,EAAA,QAAAE,IAAA,2CACEO,KAAK,UACLC,aAAepB,GACb9C,KAAKgB,sBAAsB8B,EAAMqB,kBAIvCX,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,cAAAE,IAAA,2CAAYU,MAAOpE,KAAKM,aAAc+D,KAAK,SAASC,KAAK,MACvDd,EAAA,sBAAAE,IAAA,2CACEC,MAAM,eACNG,QAAQ,OACRS,KAAK,QACLD,KAAK,KACLE,KAAK,SACLC,WAAYzE,KAAKG,SAAQ,aACbH,KAAKM,aACjBoE,UAAW,MACXC,WAAY,MACZC,UAAY9B,GAAmC9C,KAAK6C,aAAaC,U","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as r,H as s,c as d,h as a,a as c,t as e}from"./index.js";import{d as t}from"./p-ZhP2tVmM.js";import{d as i}from"./p-Dzndkdx5.js";import{d as o}from"./p-DjkUFlDW.js";import{d as n}from"./p-0XTyQNRG.js";import{d as h}from"./p-DwbcNDJF.js";import{d as l}from"./p-CYzFfFcH.js";const m=()=>`.sc-ds-card-chart-h,.sc-ds-card-chart:where(.ds-table),.sc-ds-card-chart:where(.tooltip-popup),.sc-ds-card-chart:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-chart,.ds-control--lg.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart,.ds-control--sm.sc-ds-card-chart-h,.ds-control--sm.sc-ds-card-chart,.ds-control--xs.sc-ds-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-chart-h,.ds-control--lg.sc-ds-card-chart{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-chart-h,.ds-control--sm.sc-ds-card-chart{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-chart{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-chart{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-chart{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-chart,.ds-chrome-header__trailing.sc-ds-card-chart{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-chart{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-chart{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-chart{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-chart{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-chart,.ds-chrome-header__description.sc-ds-card-chart{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-chart{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-chart .ds-chrome-header__description.sc-ds-card-chart{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-chart:root,.sc-ds-card-chart-h,.ds-forced-colors-scope.sc-ds-card-chart{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-chart-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-chart-width);min-height:var(--_card-chart-min-height);max-width:100%;overflow:visible;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-chart-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-chart__header.sc-ds-card-chart{flex-shrink:0;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-chart__copy.sc-ds-card-chart{align-items:center}ds-text.card-chart__title.sc-ds-card-chart{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-chart__actions.sc-ds-card-chart{flex-shrink:0}.card-chart__actions.sc-ds-card-chart:empty{display:none}.card-chart__body.sc-ds-card-chart,.card-chart__layout.sc-ds-card-chart{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0}.card-chart__body.sc-ds-card-chart{border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card);background-color:var(--color-background-primary)}.card-chart__layout.sc-ds-card-chart{height:100%;gap:var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-200) var(--dimension-space-200) 0 var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart>*.sc-ds-card-chart{width:100%;min-width:0;max-width:100%}.card-chart__chart.sc-ds-card-chart>ds-chart.sc-ds-card-chart{--ds-chart-container-height:100%}.card-chart__legend.sc-ds-card-chart{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-chart-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-chart-h::after{box-shadow:none}}`;const p={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const g={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const b=r(class r extends s{constructor(r){super();if(r!==false){this.__registerHost()}this.dsFilterClick=d(this,"dsFilterClick",7);this.variant="custom";this.cardWidth="md";this.showFilter=false;this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidRender(){const r=this.el.querySelector('ds-chart-legend[slot="legend"]');if(this.variant==="chart"&&r){r.setAttribute("highlight-on-hover","false");if("highlightOnHover"in r)r.highlightOnHover=false}}render(){const r=this.variant!=="custom"||this.hasChartSlot;return a(c,{key:"de80aeeffd1b52cdebd8a0cb453c0e68a5b46017",class:{"card-chart":true,[`card-chart--${this.variant}`]:true},style:{"--_card-chart-width":p[this.cardWidth],"--_card-chart-min-height":g[this.cardWidth]}},a("header",{key:"5903c66868fc6ae6c55ee706ce68b593fe4c0138",class:"card-chart__header ds-chrome-header"},a("div",{key:"765960ebbc3bc6f08ca72efe8d9328ea8da5cfdd",class:"card-chart__copy ds-chrome-header__copy ds-control--md"},a("ds-text",{key:"05c0e710d60370a5af50ed654ecd1d92f5486a57",class:"card-chart__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading)),a("div",{key:"67ed8e22ebabf3b540129936119f9a4500c8b406",class:"card-chart__actions ds-chrome-header__trailing"},this.showFilter?a("ds-button-unfilled",{variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}):null,a("slot",{key:"d527d471d2af3cdeef74ae8068a78815e3b9d572",name:"actions"}))),a("div",{key:"9574969adb9a7b1858b778ddba3128c1137fa5c8",class:"card-chart__body"},r?a("div",{class:"card-chart__layout"},this.hasChartSlot?a("div",{class:{"card-chart__chart":true}},a("slot",{name:"chart"})):null,this.hasLegendSlot?a("div",{class:"card-chart__legend"},a("slot",{name:"legend"})):null,a("slot",null)):a("slot",null)))}get el(){return this}static get style(){return m()}},[262,"ds-card-chart",{heading:[1],variant:[1],cardWidth:[1,"card-width"],showFilter:[4,"show-filter"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function v(){if(typeof customElements==="undefined"){return}const r=["ds-card-chart","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];r.forEach((r=>{switch(r){case"ds-card-chart":if(!customElements.get(e(r))){customElements.define(e(r),b)}break;case"ds-badge":if(!customElements.get(e(r))){t()}break;case"ds-button-unfilled":if(!customElements.get(e(r))){i()}break;case"ds-icon":if(!customElements.get(e(r))){o()}break;case"ds-loader":if(!customElements.get(e(r))){n()}break;case"ds-text":if(!customElements.get(e(r))){h()}break;case"ds-tooltip":if(!customElements.get(e(r))){l()}break}}))}v();const f=b;const u=v;export{f as DsCardChart,u as defineCustomElement};
1
+ import{p as r,H as s,c as a,h as d,a as c,t as e}from"./index.js";import{d as t}from"./p-ZhP2tVmM.js";import{d as i}from"./p-Dzndkdx5.js";import{d as o}from"./p-DjkUFlDW.js";import{d as n}from"./p-0XTyQNRG.js";import{d as h}from"./p-DwbcNDJF.js";import{d as l}from"./p-CYzFfFcH.js";const m=()=>`.sc-ds-card-chart-h,.sc-ds-card-chart:where(.ds-table),.sc-ds-card-chart:where(.tooltip-popup),.sc-ds-card-chart:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.ds-control--lg.sc-ds-card-chart,.ds-control--lg.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart,.ds-control--sm.sc-ds-card-chart-h,.ds-control--sm.sc-ds-card-chart,.ds-control--xs.sc-ds-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-radius:var(--ds-radius-control)}.ds-control--lg.sc-ds-card-chart-h,.ds-control--lg.sc-ds-card-chart{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-chart-h,.ds-control--md.sc-ds-card-chart{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-chart-h,.ds-control--sm.sc-ds-card-chart{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-chart-h,.ds-control--xs.sc-ds-card-chart{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-header.sc-ds-card-chart{display:flex;align-items:center;box-sizing:border-box;min-width:0;min-block-size:var(--dimension-size-600);padding:var(--dimension-space-100);gap:var(--dimension-space-100)}.ds-chrome-header--wrapping.sc-ds-card-chart{flex-wrap:wrap}.ds-chrome-header--bounded.sc-ds-card-chart{border-block-end:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.ds-chrome-header__leading.sc-ds-card-chart,.ds-chrome-header__trailing.sc-ds-card-chart{display:flex;align-items:center;flex:0 0 auto;min-width:0}.ds-chrome-header__trailing.sc-ds-card-chart{margin-inline-start:auto;gap:var(--dimension-space-100)}.ds-chrome-header__copy.sc-ds-card-chart{display:flex;flex:1 1 0;min-width:0;padding:var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box}.ds-chrome-header__copy--wrapping.sc-ds-card-chart{align-items:baseline;flex-wrap:wrap;column-gap:var(--dimension-space-100);row-gap:var(--dimension-space-050)}.ds-chrome-header__copy--stacked.sc-ds-card-chart{align-items:stretch;flex-direction:column;gap:var(--dimension-space-050)}.ds-chrome-header__heading.sc-ds-card-chart,.ds-chrome-header__description.sc-ds-card-chart{width:auto;min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025));box-sizing:border-box}.ds-chrome-header__heading.sc-ds-card-chart{flex:0 1 auto}.ds-chrome-header__copy--wrapping.sc-ds-card-chart .ds-chrome-header__description.sc-ds-card-chart{flex:1 1 var(--dimension-card-width-xs)}@media (forced-colors: active){.sc-ds-card-chart:root,.sc-ds-card-chart-h,.ds-forced-colors-scope.sc-ds-card-chart{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-chart-h{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_card-chart-width);min-height:var(--_card-chart-min-height);max-width:100%;overflow:visible;border:none;border-radius:var(--ds-radius-card);background-color:var(--color-background-primary);box-shadow:var(--effect-shadow-elevated-sm)}.sc-ds-card-chart-h::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--effect-highlight-elevated-sm);pointer-events:none}.card-chart__header.sc-ds-card-chart{flex-shrink:0;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.card-chart__copy.sc-ds-card-chart{align-items:center}ds-text.card-chart__title.sc-ds-card-chart{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none}.card-chart__actions.sc-ds-card-chart{flex-shrink:0}.card-chart__actions.sc-ds-card-chart:empty{display:none}.card-chart__body.sc-ds-card-chart,.card-chart__layout.sc-ds-card-chart{display:flex;flex:1 1 auto;flex-direction:column;box-sizing:border-box;min-height:0}.card-chart__body.sc-ds-card-chart{border-radius:0 0 var(--ds-radius-card) var(--ds-radius-card);background-color:var(--color-background-primary)}.card-chart__layout.sc-ds-card-chart{height:100%;gap:var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart{display:grid;flex:1 1 auto;align-items:center;box-sizing:border-box;min-height:0;padding:var(--dimension-space-200) var(--dimension-space-200) 0 var(--dimension-space-200)}.card-chart__chart.sc-ds-card-chart>*.sc-ds-card-chart{width:100%;min-width:0;max-width:100%}.card-chart__chart.sc-ds-card-chart>ds-chart.sc-ds-card-chart{--ds-chart-container-height:100%}.card-chart__legend.sc-ds-card-chart{flex:0 0 auto;box-sizing:border-box;padding:0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100)}@media (forced-colors: active){.sc-ds-card-chart-h{box-shadow:none;outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.sc-ds-card-chart-h::after{box-shadow:none}}`;const p={sm:"var(--dimension-card-width-sm)",md:"var(--dimension-card-width-md)",lg:"var(--dimension-card-width-lg)"};const g={sm:"var(--dimension-card-height-sm)",md:"var(--dimension-card-height-md)",lg:"var(--dimension-card-height-lg)"};const b=r(class r extends s{constructor(r){super();if(r!==false){this.__registerHost()}this.dsFilterClick=a(this,"dsFilterClick",7);this.variant="custom";this.cardWidth="md";this.showFilter=false;this.filterLabel="Filter";this.hasChartSlot=false;this.hasLegendSlot=false;this.handleFilterClick=()=>{this.dsFilterClick.emit()}}componentWillRender(){this.hasChartSlot=!!this.el.querySelector('[slot="chart"]');this.hasLegendSlot=!!this.el.querySelector('[slot="legend"]')}componentDidRender(){const r=this.el.querySelector('ds-chart-legend[slot="legend"]');if(this.variant==="chart"&&r){r.setAttribute("highlight-on-hover","false");if("highlightOnHover"in r)r.highlightOnHover=false}}render(){const r=this.variant!=="custom"||this.hasChartSlot;return d(c,{key:"de80aeeffd1b52cdebd8a0cb453c0e68a5b46017",class:{"card-chart":true,[`card-chart--${this.variant}`]:true},style:{"--_card-chart-width":p[this.cardWidth],"--_card-chart-min-height":g[this.cardWidth]}},d("header",{key:"5903c66868fc6ae6c55ee706ce68b593fe4c0138",class:"card-chart__header ds-chrome-header"},d("div",{key:"97529ce51f229725dabc39c819e8f23f0e1463cb",class:"card-chart__copy ds-chrome-header__copy ds-control--md"},d("ds-text",{key:"4a56b37c2ec5a2d4dc7105efcbc542255af5ab14",class:"card-chart__title ds-chrome-header__heading",variant:"text-title-small",emphasis:true,color:"primary",as:"h2"},this.heading)),d("div",{key:"2e44b8601ba7c7f1cef25c1191a474fac9434c92",class:"card-chart__actions ds-chrome-header__trailing"},this.showFilter?d("ds-button-unfilled",{variant:"icon",type:"button",icon:"Filters","aria-label":this.filterLabel,onDsClick:this.handleFilterClick}):null,d("slot",{key:"0689a7fc9e6da4a3ed85ddbf78b623db6263617d",name:"actions"}))),d("div",{key:"87ce086669e5acab78e6ae3fb896924e5eb9c734",class:"card-chart__body"},r?d("div",{class:"card-chart__layout"},this.hasChartSlot?d("div",{class:{"card-chart__chart":true}},d("slot",{name:"chart"})):null,this.hasLegendSlot?d("div",{class:"card-chart__legend"},d("slot",{name:"legend"})):null,d("slot",null)):d("slot",null)))}get el(){return this}static get style(){return m()}},[262,"ds-card-chart",{heading:[1],variant:[1],cardWidth:[1,"card-width"],showFilter:[4,"show-filter"],filterLabel:[1,"filter-label"],hasChartSlot:[32],hasLegendSlot:[32]}]);function v(){if(typeof customElements==="undefined"){return}const r=["ds-card-chart","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text","ds-tooltip"];r.forEach((r=>{switch(r){case"ds-card-chart":if(!customElements.get(e(r))){customElements.define(e(r),b)}break;case"ds-badge":if(!customElements.get(e(r))){t()}break;case"ds-button-unfilled":if(!customElements.get(e(r))){i()}break;case"ds-icon":if(!customElements.get(e(r))){o()}break;case"ds-loader":if(!customElements.get(e(r))){n()}break;case"ds-text":if(!customElements.get(e(r))){h()}break;case"ds-tooltip":if(!customElements.get(e(r))){l()}break}}))}v();const f=b;const u=v;export{f as DsCardChart,u as defineCustomElement};
2
2
  //# sourceMappingURL=ds-card-chart.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["cardChartCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","showFilter","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","usesChartLayout","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","name"],"sources":["src/wc/components/CardChart/CardChart.css?tag=ds-card-chart&encapsulation=scoped","src/wc/components/CardChart/CardChart.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--_card-chart-width);\n min-height: var(--_card-chart-min-height);\n max-width: 100%;\n overflow: visible;\n border: none;\n border-radius: var(--ds-radius-card);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 4;\n border-radius: inherit;\n box-shadow: var(--effect-highlight-elevated-sm);\n pointer-events: none;\n}\n\n.card-chart__header {\n flex-shrink: 0;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.card-chart__copy {\n align-items: center;\n}\n\nds-text.card-chart__title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-chart__actions {\n flex-shrink: 0;\n}\n\n.card-chart__actions:empty {\n display: none;\n}\n\n.card-chart__body,\n.card-chart__layout {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n box-sizing: border-box;\n min-height: 0;\n}\n\n.card-chart__body {\n border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n background-color: var(--color-background-primary);\n}\n\n.card-chart__layout {\n height: 100%;\n gap: var(--dimension-space-200);\n}\n\n.card-chart__chart {\n display: grid;\n flex: 1 1 auto;\n align-items: center;\n box-sizing: border-box;\n min-height: 0;\n padding: var(--dimension-space-200) var(--dimension-space-200) 0 var(--dimension-space-200);\n}\n\n.card-chart__chart > * {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}\n\n.card-chart__chart > ds-chart {\n --ds-chart-container-height: 100%;\n}\n\n.card-chart__legend {\n flex: 0 0 auto;\n box-sizing: border-box;\n padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n :host {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n\n :host::after {\n box-shadow: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardChartWidth = 'sm' | 'md' | 'lg';\nexport type CardChartVariant = 'custom' | 'chart';\n\ntype LegendSlot = HTMLElement & {\n activeLabel?: string | null;\n highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardChartWidth, string> = {\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardChartWidth, string> = {\n sm: 'var(--dimension-card-height-sm)',\n md: 'var(--dimension-card-height-md)',\n lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Standard chart card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n tag: 'ds-card-chart',\n styleUrl: 'CardChart.css',\n scoped: true,\n})\nexport class CardChart {\n @Element() el!: HTMLElement;\n\n /** Chart heading shown in the card header. */\n @Prop() heading!: string;\n /** Chart composition behavior. */\n @Prop() variant: CardChartVariant = 'custom';\n /** Width token with the matching chart-card min-height. */\n @Prop() cardWidth: CardChartWidth = 'md';\n /** Renders the standard filter action before custom actions. */\n @Prop() showFilter: boolean = false;\n @Prop() filterLabel: string = 'Filter';\n\n /** Emits when the standard header filter control is activated. */\n @Event() dsFilterClick!: EventEmitter<void>;\n\n @State() private hasChartSlot = false;\n @State() private hasLegendSlot = false;\n\n componentWillRender() {\n this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n }\n\n componentDidRender() {\n const legend = this.el.querySelector('ds-chart-legend[slot=\"legend\"]') as LegendSlot | null;\n if (this.variant === 'chart' && legend) {\n legend.setAttribute('highlight-on-hover', 'false');\n if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n }\n }\n\n private handleFilterClick = () => {\n this.dsFilterClick.emit();\n };\n\n render() {\n const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n return (\n <Host\n class={{\n 'card-chart': true,\n [`card-chart--${this.variant}`]: true,\n }}\n style={{\n '--_card-chart-width': CARD_WIDTH_VARS[this.cardWidth],\n '--_card-chart-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n }}\n >\n <header class=\"card-chart__header ds-chrome-header\">\n {/* eslint-disable-next-line local/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n <div class=\"card-chart__copy ds-chrome-header__copy ds-control--md\">\n <ds-text\n class=\"card-chart__title ds-chrome-header__heading\"\n variant=\"text-title-small\"\n emphasis\n color=\"primary\"\n as=\"h2\"\n >\n {this.heading}\n </ds-text>\n </div>\n <div class=\"card-chart__actions ds-chrome-header__trailing\">\n {this.showFilter ? (\n <ds-button-unfilled\n variant=\"icon\"\n type=\"button\"\n icon=\"Filters\"\n aria-label={this.filterLabel}\n onDsClick={this.handleFilterClick}\n />\n ) : null}\n <slot name=\"actions\" />\n </div>\n </header>\n <div class=\"card-chart__body\">\n {usesChartLayout ? (\n <div class=\"card-chart__layout\">\n {this.hasChartSlot ? (\n <div\n class={{\n 'card-chart__chart': true,\n }}\n >\n <slot name=\"chart\" />\n </div>\n ) : null}\n {this.hasLegendSlot ? (\n <div class=\"card-chart__legend\">\n <slot name=\"legend\" />\n </div>\n ) : null}\n <slot />\n </div>\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0RAAA,MAAMA,EAAe,IAAM,63LCU3B,MAAMC,EAAkD,CACtDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAmD,CACvDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mC,MAYOE,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,yFAWUC,KAAAC,QAA4B,SAE5BD,KAAAE,UAA4B,KAE5BF,KAAAG,WAAsB,MACtBH,KAAAI,YAAsB,SAKbJ,KAAAK,aAAe,MACfL,KAAAM,cAAgB,MAezBN,KAAAO,kBAAoB,KAC1BP,KAAKQ,cAAcC,MAAM,CAoE5B,CAlFC,mBAAAC,GACEV,KAAKK,eAAiBL,KAAKW,GAAGC,cAAc,kBAC5CZ,KAAKM,gBAAkBN,KAAKW,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASd,KAAKW,GAAGC,cAAc,kCACrC,GAAIZ,KAAKC,UAAY,SAAWa,EAAQ,CACtCA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,EAQhE,MAAAC,GACE,MAAMC,EAAkBlB,KAAKC,UAAY,UAAYD,KAAKK,aAC1D,OACEc,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,CAAC,eAAetB,KAAKC,WAAY,MAEnCsB,MAAO,CACL,sBAAuBjC,EAAgBU,KAAKE,WAC5C,2BAA4BR,EAAiBM,KAAKE,aAGpDiB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,uCAEZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0DACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,8CACNrB,QAAQ,mBACRuB,SAAQ,KACRC,MAAM,UACNC,GAAG,MAEF1B,KAAK2B,UAGVR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kDACRtB,KAAKG,WACJgB,EAAA,sBACElB,QAAQ,OACR2B,KAAK,SACLC,KAAK,UAAS,aACF7B,KAAKI,YACjB0B,UAAW9B,KAAKO,oBAEhB,KACJY,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAGfZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRJ,EACCC,EAAA,OAAKG,MAAM,sBACRtB,KAAKK,aACJc,EAAA,OACEG,MAAO,CACL,oBAAqB,OAGvBH,EAAA,QAAMY,KAAK,WAEX,KACH/B,KAAKM,cACJa,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMY,KAAK,YAEX,KACJZ,EAAA,cAGFA,EAAA,c","ignoreList":[]}
1
+ {"version":3,"names":["cardChartCss","CARD_WIDTH_VARS","sm","md","lg","CARD_HEIGHT_VARS","CardChart","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","cardWidth","showFilter","filterLabel","hasChartSlot","hasLegendSlot","handleFilterClick","dsFilterClick","emit","componentWillRender","el","querySelector","componentDidRender","legend","setAttribute","highlightOnHover","render","usesChartLayout","h","Host","key","class","style","emphasis","color","as","heading","type","icon","onDsClick","name"],"sources":["src/wc/components/CardChart/CardChart.css?tag=ds-card-chart&encapsulation=scoped","src/wc/components/CardChart/CardChart.tsx"],"sourcesContent":["@import '../../utils/radius.css';\n@import '../../utils/chrome-header.css';\n@import '../../utils/forced-colors.css';\n\n:host {\n position: relative;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n width: var(--_card-chart-width);\n min-height: var(--_card-chart-min-height);\n max-width: 100%;\n overflow: visible;\n border: none;\n border-radius: var(--ds-radius-card);\n background-color: var(--color-background-primary);\n box-shadow: var(--effect-shadow-elevated-sm);\n}\n\n:host::after {\n content: '';\n position: absolute;\n inset: 0;\n z-index: 4;\n border-radius: inherit;\n box-shadow: var(--effect-highlight-elevated-sm);\n pointer-events: none;\n}\n\n.card-chart__header {\n flex-shrink: 0;\n border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.card-chart__copy {\n align-items: center;\n}\n\nds-text.card-chart__title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n -webkit-user-select: none;\n user-select: none;\n}\n\n.card-chart__actions {\n flex-shrink: 0;\n}\n\n.card-chart__actions:empty {\n display: none;\n}\n\n.card-chart__body,\n.card-chart__layout {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n box-sizing: border-box;\n min-height: 0;\n}\n\n.card-chart__body {\n border-radius: 0 0 var(--ds-radius-card) var(--ds-radius-card);\n background-color: var(--color-background-primary);\n}\n\n.card-chart__layout {\n height: 100%;\n gap: var(--dimension-space-200);\n}\n\n.card-chart__chart {\n display: grid;\n flex: 1 1 auto;\n align-items: center;\n box-sizing: border-box;\n min-height: 0;\n padding: var(--dimension-space-200) var(--dimension-space-200) 0 var(--dimension-space-200);\n}\n\n.card-chart__chart > * {\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}\n\n.card-chart__chart > ds-chart {\n --ds-chart-container-height: 100%;\n}\n\n.card-chart__legend {\n flex: 0 0 auto;\n box-sizing: border-box;\n padding: 0 var(--dimension-space-100) var(--dimension-space-100) var(--dimension-space-100);\n}\n\n@media (forced-colors: active) {\n :host {\n box-shadow: none;\n outline: var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);\n outline-offset: calc(-1 * var(--dimension-stroke-width-012));\n }\n\n :host::after {\n box-shadow: none;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\n\nexport type CardChartWidth = 'sm' | 'md' | 'lg';\nexport type CardChartVariant = 'custom' | 'chart';\n\ntype LegendSlot = HTMLElement & {\n activeLabel?: string | null;\n highlightOnHover?: boolean;\n};\n\nconst CARD_WIDTH_VARS: Record<CardChartWidth, string> = {\n sm: 'var(--dimension-card-width-sm)',\n md: 'var(--dimension-card-width-md)',\n lg: 'var(--dimension-card-width-lg)',\n};\n\nconst CARD_HEIGHT_VARS: Record<CardChartWidth, string> = {\n sm: 'var(--dimension-card-height-sm)',\n md: 'var(--dimension-card-height-md)',\n lg: 'var(--dimension-card-height-lg)',\n};\n\n/**\n * Standard chart card chrome and composition. The variant owns\n * only the chart/legend relationship; applications continue to own data.\n */\n@Component({\n tag: 'ds-card-chart',\n styleUrl: 'CardChart.css',\n scoped: true,\n})\nexport class CardChart {\n @Element() el!: HTMLElement;\n\n /** Chart heading shown in the card header. */\n @Prop() heading!: string;\n /** Chart composition behavior. */\n @Prop() variant: CardChartVariant = 'custom';\n /** Width token with the matching chart-card min-height. */\n @Prop() cardWidth: CardChartWidth = 'md';\n /** Renders the standard filter action before custom actions. */\n @Prop() showFilter: boolean = false;\n @Prop() filterLabel: string = 'Filter';\n\n /** Emits when the standard header filter control is activated. */\n @Event() dsFilterClick!: EventEmitter<void>;\n\n @State() private hasChartSlot = false;\n @State() private hasLegendSlot = false;\n\n componentWillRender() {\n this.hasChartSlot = !!this.el.querySelector('[slot=\"chart\"]');\n this.hasLegendSlot = !!this.el.querySelector('[slot=\"legend\"]');\n }\n\n componentDidRender() {\n const legend = this.el.querySelector('ds-chart-legend[slot=\"legend\"]') as LegendSlot | null;\n if (this.variant === 'chart' && legend) {\n legend.setAttribute('highlight-on-hover', 'false');\n if ('highlightOnHover' in legend) legend.highlightOnHover = false;\n }\n }\n\n private handleFilterClick = () => {\n this.dsFilterClick.emit();\n };\n\n render() {\n const usesChartLayout = this.variant !== 'custom' || this.hasChartSlot;\n return (\n <Host\n class={{\n 'card-chart': true,\n [`card-chart--${this.variant}`]: true,\n }}\n style={{\n '--_card-chart-width': CARD_WIDTH_VARS[this.cardWidth],\n '--_card-chart-min-height': CARD_HEIGHT_VARS[this.cardWidth],\n }}\n >\n <header class=\"card-chart__header ds-chrome-header\">\n {/* eslint-disable-next-line compomo/prefer-direct-ds-text -- Shared header copy owns the control-density geometry around the semantic heading. */}\n <div class=\"card-chart__copy ds-chrome-header__copy ds-control--md\">\n <ds-text\n class=\"card-chart__title ds-chrome-header__heading\"\n variant=\"text-title-small\"\n emphasis\n color=\"primary\"\n as=\"h2\"\n >\n {this.heading}\n </ds-text>\n </div>\n <div class=\"card-chart__actions ds-chrome-header__trailing\">\n {this.showFilter ? (\n <ds-button-unfilled\n variant=\"icon\"\n type=\"button\"\n icon=\"Filters\"\n aria-label={this.filterLabel}\n onDsClick={this.handleFilterClick}\n />\n ) : null}\n <slot name=\"actions\" />\n </div>\n </header>\n <div class=\"card-chart__body\">\n {usesChartLayout ? (\n <div class=\"card-chart__layout\">\n {this.hasChartSlot ? (\n <div\n class={{\n 'card-chart__chart': true,\n }}\n >\n <slot name=\"chart\" />\n </div>\n ) : null}\n {this.hasLegendSlot ? (\n <div class=\"card-chart__legend\">\n <slot name=\"legend\" />\n </div>\n ) : null}\n <slot />\n </div>\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"0RAAA,MAAMA,EAAe,IAAM,63LCU3B,MAAMC,EAAkD,CACtDC,GAAI,iCACJC,GAAI,iCACJC,GAAI,kCAGN,MAAMC,EAAmD,CACvDH,GAAI,kCACJC,GAAI,kCACJC,GAAI,mC,MAYOE,EAASC,EAAA,MAAAD,UAAAE,EALtB,WAAAC,CAAAC,G,yFAWUC,KAAAC,QAA4B,SAE5BD,KAAAE,UAA4B,KAE5BF,KAAAG,WAAsB,MACtBH,KAAAI,YAAsB,SAKbJ,KAAAK,aAAe,MACfL,KAAAM,cAAgB,MAezBN,KAAAO,kBAAoB,KAC1BP,KAAKQ,cAAcC,MAAM,CAoE5B,CAlFC,mBAAAC,GACEV,KAAKK,eAAiBL,KAAKW,GAAGC,cAAc,kBAC5CZ,KAAKM,gBAAkBN,KAAKW,GAAGC,cAAc,kB,CAG/C,kBAAAC,GACE,MAAMC,EAASd,KAAKW,GAAGC,cAAc,kCACrC,GAAIZ,KAAKC,UAAY,SAAWa,EAAQ,CACtCA,EAAOC,aAAa,qBAAsB,SAC1C,GAAI,qBAAsBD,EAAQA,EAAOE,iBAAmB,K,EAQhE,MAAAC,GACE,MAAMC,EAAkBlB,KAAKC,UAAY,UAAYD,KAAKK,aAC1D,OACEc,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,CAAC,eAAetB,KAAKC,WAAY,MAEnCsB,MAAO,CACL,sBAAuBjC,EAAgBU,KAAKE,WAC5C,2BAA4BR,EAAiBM,KAAKE,aAGpDiB,EAAA,UAAAE,IAAA,2CAAQC,MAAM,uCAEZH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0DACTH,EAAA,WAAAE,IAAA,2CACEC,MAAM,8CACNrB,QAAQ,mBACRuB,SAAQ,KACRC,MAAM,UACNC,GAAG,MAEF1B,KAAK2B,UAGVR,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kDACRtB,KAAKG,WACJgB,EAAA,sBACElB,QAAQ,OACR2B,KAAK,SACLC,KAAK,UAAS,aACF7B,KAAKI,YACjB0B,UAAW9B,KAAKO,oBAEhB,KACJY,EAAA,QAAAE,IAAA,2CAAMU,KAAK,cAGfZ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACRJ,EACCC,EAAA,OAAKG,MAAM,sBACRtB,KAAKK,aACJc,EAAA,OACEG,MAAO,CACL,oBAAqB,OAGvBH,EAAA,QAAMY,KAAK,WAEX,KACH/B,KAAKM,cACJa,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMY,KAAK,YAEX,KACJZ,EAAA,cAGFA,EAAA,c","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{p as e,H as r,c as i,f as o,h as s,a as d,t}from"./index.js";import{d as c}from"./p-ljbw3UMZ.js";import{d as a}from"./p-Bpd6YCo4.js";import{d as n}from"./p-DwbcNDJF.js";import{d as v}from"./p-CYzFfFcH.js";import{r as l}from"./p-CochmPyg.js";import{T as f}from"./p-CeXf9-X3.js";function h(e){const r=Math.max(1,Math.floor(e.cellCount));const i=Math.max(1,e.minCellWidth);const o=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/i));if(o>=r)return r;for(let e=o;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/o);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const i=Math.max(e.expandedHeight,r);const o=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,i-r);const d=s*o;return{active:o>0&&s>0,expandedHeight:i,offset:d,visibleHeight:i-d}}function u(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function m(e,r,i){for(let o=1;o<=e.length;o+=1){const s=((r+i*o)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const p=()=>`@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before,.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before{z-index:1}.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-overview-h,.ds-interaction-fill--bordered.sc-ds-card-overview{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-overview-h,.ds-interaction-fill--selected.sc-ds-card-overview{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-overview-h::after,.ds-interaction-fill--grouped.sc-ds-card-overview::after,.ds-interaction-fill--grouped.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-overview-h,.ds-interaction-fill--grouped.sc-ds-card-overview{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-card-overview-h>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill.sc-ds-card-overview>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill__content.sc-ds-card-overview{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-overview-h,.ds-interaction-fill--on-faint.sc-ds-card-overview{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-overview-h,.ds-interaction-fill--on-medium.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-overview-h,.ds-interaction-fill--on-bold.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-overview-h,.ds-interaction-fill--on-strong.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-overview-h,.ds-interaction-fill--on-translucent.sc-ds-card-overview{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-overview-h,.ds-interaction-fill--on-inverted.sc-ds-card-overview{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-overview-h,.ds-interaction-fill--on-media.sc-ds-card-overview{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-overview-h,.ds-interaction-fill--on-always-dark.sc-ds-card-overview{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-overview-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-overview:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-card-overview-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-card-overview:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.sc-ds-card-overview-h,.sc-ds-card-overview:where(.ds-table),.sc-ds-card-overview:where(.tooltip-popup),.sc-ds-card-overview:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.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(--ds-radius-control)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-card-overview{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-card-overview{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-card-overview{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-card-overview{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-card-overview{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-elevation.sc-ds-card-overview-h,.ds-control-elevation.sc-ds-card-overview{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-overview-h::after,.ds-control-elevation.sc-ds-card-overview::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-overview-h,.ds-control-elevation--sm.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-overview-h,.ds-control-elevation--md.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-overview-h,.ds-control-elevation--floating.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-overview{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-overview,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:none;transition:none}}.sc-ds-card-overview-h{display:block;box-sizing:border-box;container-type:inline-size;-webkit-user-select:none;user-select:none;--ds-card-overview-metric-min:calc(var(--dimension-size-400) * 5);--ds-card-overview-divider-width:var(--dimension-stroke-width-012);--ds-card-overview-divider-color:var(--color-always-dark-border-tertiary);color:var(--color-always-dark-foreground-primary)}.card-overview__surface.sc-ds-card-overview{width:100%;min-width:0;box-sizing:border-box;border-radius:var(--ds-radius-card);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow-anchor:none}.card-overview__clip.sc-ds-card-overview{height:100%;min-width:0;border-radius:inherit;background:inherit;overflow:hidden}.card-overview--scroll-collapsing.sc-ds-card-overview-h{height:var(--ds-card-overview-expanded-height);pointer-events:none}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview{height:var(--ds-card-overview-visible-height);pointer-events:auto;will-change:height}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{transform:translateY(calc(-1 * var(--ds-card-overview-content-offset)));will-change:transform}.card-overview__layout.sc-ds-card-overview{display:flex;flex-direction:column;min-width:0}.card-overview__summary.sc-ds-card-overview{position:relative;z-index:1;flex:0 0 auto;min-width:0;background:var(--color-always-dark-background)}.card-overview__header.sc-ds-card-overview{display:flex;position:relative;align-items:center;gap:0;width:100%;height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box}.card-overview__header.sc-ds-card-overview::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--ds-card-overview-divider-width);background:var(--ds-card-overview-divider-color);pointer-events:none}.card-overview__period.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;gap:0;min-width:0;min-height:var(--ds-control-height);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview,.card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview__period-current.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center}.card-overview__period-fixed.sc-ds-card-overview{flex:0 1 auto;min-width:0}.card-overview__period-comparison.sc-ds-card-overview{flex:0 0 auto}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;min-width:0}.card-overview__body.sc-ds-card-overview{display:flex;position:relative;z-index:0;flex-direction:column;min-width:0;transform:translateY(0)}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat( var(--ds-card-overview-grid-columns, auto-fit), minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr) );align-content:stretch;min-width:0;overflow:clip}.card-overview__score.sc-ds-card-overview,.card-overview__metric.sc-ds-card-overview{display:flex;min-width:0;padding:var(--dimension-space-100);box-shadow:var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color), 0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview,.card-overview__metric-action.sc-ds-card-overview{display:flex;flex:1 1 auto;min-width:0;padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview{align-items:center;justify-content:flex-start;padding-inline-start:var(--dimension-space-100);gap:var(--dimension-space-100)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--dimension-space-050);min-width:0}.card-overview__score-label-spacer.sc-ds-card-overview{visibility:hidden}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;padding-inline-start:var(--dimension-space-075);border:var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);background:transparent;color:var(--color-always-dark-foreground-negative);text-align:center}.card-overview__metric-action.sc-ds-card-overview{flex-direction:column;justify-content:center;gap:var(--dimension-space-050)}.card-overview__metric-action[role='button'].sc-ds-card-overview{cursor:default}.card-overview__metric-content.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:var(--dimension-space-050);min-width:0}.card-overview__metric-label.sc-ds-card-overview{min-width:0}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__metrics.sc-ds-card-overview{grid-template-columns:minmax(0, 1fr)}.card-overview--compact.sc-ds-card-overview-h{height:var(--dimension-size-600);min-height:var(--dimension-size-600)}.card-overview--compact.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__clip.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{width:100%;height:100%}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview::after{display:none}@media (forced-colors: active){.card-overview__header.sc-ds-card-overview::after{background:var(--ds-forced-color-content)}.card-overview__score-content--error.sc-ds-card-overview{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const b="200px";const g=5;const _=7;const x={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const y="var(--color-always-dark-foreground-primary)";const k="var(--color-always-dark-foreground-secondary)";const z=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect",7);this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=b;this.isLoading=false;this.overviewLabel="Overview";this.scrollCollapseProgress=0;this.focusedMetricIndex=0;this.expandedHeight=0;this.layoutResizeObserver=null;this.handleMetricKeyDown=(e,r)=>{switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault();this.moveFocus(r,1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault();this.moveFocus(r,-1);break}}}componentDidLoad(){this.observeLayout()}componentDidRender(){if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=undefined;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,_)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||g}get resolvedScrollCollapseProgress(){if(this.variant==="compact"||!Number.isFinite(this.scrollCollapseProgress))return 0;return Math.min(1,Math.max(0,this.scrollCollapseProgress))}get scrollCollapseGeometry(){const e=l(f.size600,48);return w({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!e)return;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const r=e[0]?.contentRect;if(!r)return;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=requestAnimationFrame((()=>{this.layoutResizeFrame=undefined;this.updateLayoutGeometry(r.width,r.height)}))}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!i)return;const s=e===undefined||r===undefined?i.getBoundingClientRect():null;const d=e??s?.width??0;const t=r??s?.height??0;let c=false;if(t>0&&Math.abs(t-this.expandedHeight)>=.5){this.expandedHeight=t;c=true}const a=h({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:l(this.metricMinWidth,b)});if(a!==this.gridColumns){this.gridColumns=a;c=true}if(this.gridColumns){this.el.style.setProperty("--ds-card-overview-grid-columns",String(this.gridColumns))}else{this.el.style.removeProperty("--ds-card-overview-grid-columns")}if(c)o(this)}get rovingIndex(){return u(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.visibleMetrics;const o=m(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric-action");s[o]?.focus()}bar(e,r,i){return s("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r){if(!e)return null;return s("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,color:x[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",variant:"dense",isLoading:true}),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label-spacer"),this.bar("text-body-medium","28px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return s("div",{class:"card-overview__score",part:"score"},s("ds-text",{as:"span",class:"card-overview__score-content card-overview__score-content--error",variant:"text-body-medium",color:"inherit",role:"alert"},e))}const r=this.score;if(!r)return null;return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",variant:"dense",value:r.value,level:r.level,label:"Safety score"}),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label-spacer ds-control-label-box",variant:"text-body-small",color:k,"aria-hidden":"true"}," "),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const i=!e.isInactive;const o=s("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:k},e.label);return s("div",{class:"card-overview__metric",part:"metric"},s("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},role:i?"button":undefined,tabIndex:i&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(i)this.focusedMetricIndex=r}},s("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?s("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},o):o,s("div",{class:"card-overview__metric-figure"},s("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:y,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))))}renderMetrics(){if(this.isLoading){return[this.renderScore(),...Array.from({length:this.loadingMetricCount},((e,r)=>s("div",{class:"card-overview__metric",key:`loading-${r}`},s("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},s("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),s("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","40px"),this.bar("text-body-medium","28px")))))))]}return[this.renderScore(),...this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))]}render(){const e=this.variant==="compact";const r=this.scrollCollapseGeometry;const i={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){i["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){i["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;i["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;i["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(d,{key:"06e16b272f3732ddaf64f31afcf35bb487f28a13",class:{"card-overview":true,"card-overview--compact":e,"card-overview--stacked":!e&&this.layout==="stacked","card-overview--scroll-collapsing":r.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:i},s("div",{key:"87d0fc98e4d2694c001fc13635f862fe3c0ee320",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"071f8259c597c836ce9b31554b24329d3f69d97b",class:"card-overview__clip"},s("div",{key:"6178de8497a64b8ac7f55ae09018ef99275b70ff",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"6bb41c0d6eadd1f2a571522036151f47afb99349",class:"card-overview__summary"},s("div",{key:"d50f17f25fa442f04f40e77707150f029515fe13",class:"card-overview__header ds-control--md"},s("div",{key:"792f3fceff07e1ace15263667e96609e2eb3f8a6",class:"card-overview__period"},s("div",{key:"73f9396eb0bdf864a2d2e01b91b4a64bd0402166",class:"card-overview__period-current"},s("slot",{key:"220298d067e3e8c4b5b031227b8346c790ed553c",name:"period"},this.periodLabel&&s("div",{key:"360b91a2841de36eb6b184122789b8124013471c",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"b57b67a92a13f982a80180eff2136f1ebadf8656",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"fe7dea455872ce5c28305ccb00bc6603a3883db9",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"4aa5738f339f232146f92e87ba7924487ae5232b",class:"card-overview__filter"},s("slot",{key:"acd337b4b304240f0c2c4832d9343e48f79f1455",name:"filter"})))),!e&&s("div",{key:"cf2bdbce5bbea5d6b2a7727de40cbb5b40ee21bb",class:"card-overview__body"},s("div",{key:"07b2e56a47594edb086fe577cdac202266c99b8c",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"d7051f9ab0c42c64d11aee18ddcb218fea094b74",name:"footer"}))))))}get el(){return this}static get style(){return p()}},[262,"ds-card-overview",{variant:[1],layout:[1],score:[16],periodLabel:[1,"period-label"],comparisonLabel:[1,"comparison-label"],metrics:[16],metricMinWidth:[1,"metric-min-width"],isLoading:[4,"is-loading"],scoreErrorMessage:[1,"score-error-message"],overviewLabel:[1,"overview-label"],scrollCollapseProgress:[2,"scroll-collapse-progress"],focusedMetricIndex:[32],expandedHeight:[32],gridColumns:[32]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-score","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(t(e))){customElements.define(t(e),z)}break;case"ds-score":if(!customElements.get(t(e))){c()}break;case"ds-skeleton":if(!customElements.get(t(e))){a()}break;case"ds-text":if(!customElements.get(t(e))){n()}break;case"ds-tooltip":if(!customElements.get(t(e))){v()}break}}))}M();const C=z;const j=M;export{C as DsCardOverview,j as defineCustomElement};
1
+ import{p as e,H as r,c as i,f as o,h as s,a as d,t}from"./index.js";import{d as c}from"./p-ljbw3UMZ.js";import{d as a}from"./p-Bpd6YCo4.js";import{d as n}from"./p-DwbcNDJF.js";import{d as v}from"./p-CYzFfFcH.js";import{r as l}from"./p-CochmPyg.js";import{T as f}from"./p-CeXf9-X3.js";function h(e){const r=Math.max(1,Math.floor(e.cellCount));const i=Math.max(1,e.minCellWidth);const o=Math.max(1,Math.floor(Math.max(0,e.availableWidth)/i));if(o>=r)return r;for(let e=o;e>=2;e-=1){if(r%e===0)return e}const s=Math.ceil(r/o);return Math.ceil(r/s)}function w(e){const r=Math.max(0,e.compactHeight);const i=Math.max(e.expandedHeight,r);const o=e.variant==="compact"||!Number.isFinite(e.progress)?0:Math.min(1,Math.max(0,e.progress));const s=Math.max(0,i-r);const d=s*o;return{active:o>0&&s>0,expandedHeight:i,offset:d,visibleHeight:i-d}}function u(e,r){const i=e.findIndex((e=>!e.isInactive));if(i<0)return-1;return e[r]&&!e[r].isInactive?r:i}function m(e,r,i){for(let o=1;o<=e.length;o+=1){const s=((r+i*o)%e.length+e.length)%e.length;if(!e[s]?.isInactive)return s}return-1}const p=()=>`@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-card-overview-h,.ds-interaction-fill.sc-ds-card-overview{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before,.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-card-overview-h::before,.ds-interaction-fill.sc-ds-card-overview::before{z-index:1}.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color), inset var(--ds-interaction-divider-inline-start-width) 0 0 var(--ds-interaction-divider-inline-start-color), inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0 var(--ds-interaction-divider-inline-end-color), inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-card-overview-h,.ds-interaction-fill--bordered.sc-ds-card-overview{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-card-overview-h,.ds-interaction-fill--selected.sc-ds-card-overview{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-card-overview-h::after,.ds-interaction-fill--grouped.sc-ds-card-overview::after,.ds-interaction-fill--grouped.sc-ds-card-overview-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-card-overview-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-card-overview:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-card-overview-h,.ds-interaction-fill--grouped.sc-ds-card-overview{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var( --ds-interaction-group-divider-inline-start-width, 0px );--ds-interaction-divider-inline-start-color:var( --ds-interaction-group-divider-inline-start-color, transparent );--ds-interaction-divider-inline-end-width:var( --ds-interaction-group-divider-inline-end-width, 0px );--ds-interaction-divider-inline-end-color:var( --ds-interaction-group-divider-inline-end-color, transparent )}.ds-interaction-fill.sc-ds-card-overview-h>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill.sc-ds-card-overview>.ds-interaction-fill__content.sc-ds-card-overview,.ds-interaction-fill__content.sc-ds-card-overview{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-card-overview-h,.ds-interaction-fill--on-faint.sc-ds-card-overview{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-card-overview-h,.ds-interaction-fill--on-medium.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-card-overview-h,.ds-interaction-fill--on-bold.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-card-overview-h,.ds-interaction-fill--on-strong.sc-ds-card-overview{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-card-overview-h,.ds-interaction-fill--on-translucent.sc-ds-card-overview{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-card-overview-h,.ds-interaction-fill--on-inverted.sc-ds-card-overview{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-card-overview-h,.ds-interaction-fill--on-media.sc-ds-card-overview{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-card-overview-h,.ds-interaction-fill--on-always-dark.sc-ds-card-overview{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-card-overview-h,.ds-interaction-fill--on-navigation.sc-ds-card-overview{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-overview-h:not(:disabled)::after,.ds-interaction-fill.ds-interaction-fill--surface-open.sc-ds-card-overview:not(:disabled)::after{background:var(--ds-interaction-pressed)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-card-overview-h::after,.ds-interaction-fill.sc-ds-card-overview::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--surface-open.sc-ds-card-overview-h:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill--surface-open.sc-ds-card-overview:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline:var(--dimension-stroke-width-025) dashed var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.ds-interaction-fill--selected.sc-ds-card-overview-h::before,.ds-interaction-fill--selected.sc-ds-card-overview::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-card-overview-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-card-overview:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-card-overview:root,.sc-ds-card-overview-h,.ds-forced-colors-scope.sc-ds-card-overview{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-card-overview-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-card-overview-h,.ds-focus-ring.sc-ds-card-overview,.ds-focus-ring-inset.sc-ds-card-overview-h,.ds-focus-ring-inset.sc-ds-card-overview{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-card-overview-h:focus-visible,.ds-focus-ring.sc-ds-card-overview:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-card-overview{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-card-overview-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-card-overview:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-card-overview::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-card-overview-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}.sc-ds-card-overview-h,.sc-ds-card-overview:where(.ds-table),.sc-ds-card-overview:where(.tooltip-popup),.sc-ds-card-overview:where(.ds-radius){--ds-radius-control:var(--dimension-radius-025);--ds-radius-card:var(--dimension-radius-050);--ds-radius-modal:var(--dimension-radius-050);--ds-radius-menu:var(--dimension-radius-075);--ds-radius-tooltip-control:var(--dimension-radius-025);--ds-radius-tooltip-menu:var(--dimension-radius-075);--ds-radius-table:var(--dimension-radius-050)}.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(--ds-radius-control)}.ds-control--lg.sc-ds-card-overview-h,.ds-control--lg.sc-ds-card-overview{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-card-overview-h,.ds-control--md.sc-ds-card-overview{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-card-overview-h,.ds-control--sm.sc-ds-card-overview{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-card-overview-h,.ds-control--xs.sc-ds-card-overview{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-card-overview{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-card-overview{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-control-icon-box.sc-ds-card-overview{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-card-overview{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-card-overview{position:relative;padding-inline-end:calc( var(--ds-control-label-inset, var(--dimension-space-025)) + var(--ds-control-gap, var(--dimension-space-050)) )}.ds-control-label-dot__badge.sc-ds-card-overview{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-elevation.sc-ds-card-overview-h,.ds-control-elevation.sc-ds-card-overview{position:relative;overflow:visible;box-shadow:var(--ds-control-elevation-shadow, none)}.ds-control-elevation.sc-ds-card-overview-h::after,.ds-control-elevation.sc-ds-card-overview::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;box-shadow:var(--ds-control-elevation-highlight, none);pointer-events:none}.ds-control-elevation--sm.sc-ds-card-overview-h,.ds-control-elevation--sm.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-sm);--ds-control-elevation-highlight:var(--effect-highlight-elevated-sm)}.ds-control-elevation--md.sc-ds-card-overview-h,.ds-control-elevation--md.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-md);--ds-control-elevation-highlight:var(--effect-highlight-elevated-md)}.ds-control-elevation--floating.sc-ds-card-overview-h,.ds-control-elevation--floating.sc-ds-card-overview{--ds-control-elevation-shadow:var(--effect-shadow-elevated-floating);--ds-control-elevation-highlight:var(--effect-highlight-elevated-floating)}.ds-control-elevation--press-scale.sc-ds-card-overview{--ds-control-press-active-scale:var(--dimension-scale-default);transition:scale var(--effect-motion-short-2)}.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:var(--dimension-scale-subtle)}@media (prefers-reduced-motion: reduce){.ds-control-elevation--press-scale.sc-ds-card-overview,.ds-control-elevation--press-scale[data-ds-press-active].sc-ds-card-overview{scale:none;transition:none}}.sc-ds-card-overview-h{display:block;box-sizing:border-box;container-type:inline-size;-webkit-user-select:none;user-select:none;--ds-card-overview-metric-min:calc(var(--dimension-size-400) * 5);--ds-card-overview-divider-width:var(--dimension-stroke-width-012);--ds-card-overview-divider-color:var(--color-always-dark-border-tertiary);color:var(--color-always-dark-foreground-primary)}.card-overview__surface.sc-ds-card-overview{width:100%;min-width:0;box-sizing:border-box;border-radius:var(--ds-radius-card);background:var(--color-always-dark-background);color:var(--color-always-dark-foreground-primary);overflow-anchor:none}.card-overview__clip.sc-ds-card-overview{height:100%;min-width:0;border-radius:inherit;background:inherit;overflow:hidden}.card-overview--scroll-collapsing.sc-ds-card-overview-h{height:var(--ds-card-overview-expanded-height);pointer-events:none}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview{height:var(--ds-card-overview-visible-height);pointer-events:auto;will-change:height}.card-overview--scroll-collapsing.sc-ds-card-overview-h .card-overview__body.sc-ds-card-overview{transform:translateY(calc(-1 * var(--ds-card-overview-content-offset)));will-change:transform}.card-overview__layout.sc-ds-card-overview{display:flex;flex-direction:column;min-width:0}.card-overview__summary.sc-ds-card-overview{position:relative;z-index:1;flex:0 0 auto;min-width:0;background:var(--color-always-dark-background)}.card-overview__header.sc-ds-card-overview{display:flex;position:relative;align-items:center;gap:0;width:100%;height:var(--dimension-size-600);min-width:0;padding:var(--dimension-space-100);box-sizing:border-box}.card-overview__header.sc-ds-card-overview::after{content:'';position:absolute;inset-inline:0;inset-block-end:0;height:var(--ds-card-overview-divider-width);background:var(--ds-card-overview-divider-color);pointer-events:none}.card-overview__period.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;gap:0;min-width:0;min-height:var(--ds-control-height);overflow:hidden;white-space:nowrap}.card-overview__period-current.sc-ds-card-overview,.card-overview__period-comparison.sc-ds-card-overview{min-width:0;overflow:hidden;text-overflow:ellipsis}.card-overview__period-current.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center}.card-overview__period-fixed.sc-ds-card-overview{flex:0 1 auto;min-width:0}.card-overview__period-comparison.sc-ds-card-overview{flex:0 0 auto}.card-overview__filter.sc-ds-card-overview{display:flex;flex:0 1 auto;align-items:center;min-width:0}.card-overview__body.sc-ds-card-overview{display:flex;position:relative;z-index:0;flex-direction:column;min-width:0;transform:translateY(0)}.card-overview__metrics.sc-ds-card-overview{display:grid;flex:1 1 auto;grid-template-columns:repeat( var(--ds-card-overview-grid-columns, auto-fit), minmax(min(100%, var(--ds-card-overview-metric-min)), 1fr) );align-content:stretch;min-width:0;overflow:clip}.card-overview__score.sc-ds-card-overview,.card-overview__metric.sc-ds-card-overview{display:flex;min-width:0;padding:var(--dimension-space-100);box-shadow:var(--ds-card-overview-divider-width) 0 0 0 var(--ds-card-overview-divider-color), 0 var(--ds-card-overview-divider-width) 0 0 var(--ds-card-overview-divider-color);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview,.card-overview__metric-action.sc-ds-card-overview{display:flex;flex:1 1 auto;min-width:0;padding:var(--dimension-space-075);border-radius:var(--dimension-radius-025);box-sizing:border-box}.card-overview__score-content.sc-ds-card-overview{align-items:center;justify-content:flex-start;padding-inline-start:var(--dimension-space-100);gap:var(--dimension-space-100)}.card-overview__score-copy.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--dimension-space-050);min-width:0}.card-overview__score-label-spacer.sc-ds-card-overview{visibility:hidden}.card-overview__score-content--error.sc-ds-card-overview{align-items:center;justify-content:center;padding-inline-start:var(--dimension-space-075);border:var(--ds-card-overview-divider-width) solid var(--color-always-dark-border-tertiary);background:transparent;color:var(--color-always-dark-foreground-negative);text-align:center}.card-overview__metric-action.sc-ds-card-overview{flex-direction:column;justify-content:center;gap:var(--dimension-space-050)}.card-overview__metric-action[role='button'].sc-ds-card-overview{cursor:default}.card-overview__metric-content.sc-ds-card-overview{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;gap:var(--dimension-space-050);min-width:0}.card-overview__metric-label.sc-ds-card-overview{min-width:0}.card-overview__metric-figure.sc-ds-card-overview{display:flex;align-items:baseline;gap:var(--dimension-space-050);min-width:0}.card-overview__trend.sc-ds-card-overview{flex:0 0 auto;white-space:nowrap}.card-overview--stacked.sc-ds-card-overview-h .card-overview__metrics.sc-ds-card-overview{grid-template-columns:minmax(0, 1fr)}.card-overview--compact.sc-ds-card-overview-h{height:var(--dimension-size-600);min-height:var(--dimension-size-600)}.card-overview--compact.sc-ds-card-overview-h .card-overview__surface.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__clip.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__layout.sc-ds-card-overview,.card-overview--compact.sc-ds-card-overview-h .card-overview__summary.sc-ds-card-overview{width:100%;height:100%}.card-overview--compact.sc-ds-card-overview-h .card-overview__header.sc-ds-card-overview::after{display:none}@media (forced-colors: active){.card-overview__header.sc-ds-card-overview::after{background:var(--ds-forced-color-content)}.card-overview__score-content--error.sc-ds-card-overview{border:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);background:var(--ds-forced-color-surface);color:var(--ds-forced-color-content)}}`;const g="200px";const b=5;const _=7;const x={positive:"var(--color-always-dark-foreground-positive)",negative:"var(--color-always-dark-foreground-negative)",neutral:"var(--color-always-dark-foreground-secondary)"};const y="var(--color-always-dark-foreground-primary)";const k="var(--color-always-dark-foreground-secondary)";const z=e(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.dsMetricSelect=i(this,"dsMetricSelect",7);this.variant="default";this.layout="auto";this.periodLabel="";this.comparisonLabel="";this.metrics=[];this.metricMinWidth=g;this.isLoading=false;this.overviewLabel="Overview";this.scrollCollapseProgress=0;this.focusedMetricIndex=0;this.expandedHeight=0;this.layoutResizeObserver=null;this.handleMetricKeyDown=(e,r)=>{switch(e.key){case"ArrowRight":case"ArrowDown":e.preventDefault();this.moveFocus(r,1);break;case"ArrowLeft":case"ArrowUp":e.preventDefault();this.moveFocus(r,-1);break}}}componentDidLoad(){this.observeLayout()}componentDidRender(){if(!this.layoutResizeObserver||this.observedLayoutEl!==this.layoutEl){this.observeLayout()}else{this.updateLayoutGeometry()}}disconnectedCallback(){this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=null;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=undefined;this.observedLayoutEl=undefined}get visibleMetrics(){return this.metrics.slice(0,_)}get visibleCellCount(){const e=this.isLoading?this.loadingMetricCount:this.visibleMetrics.length;return 1+e}get loadingMetricCount(){return this.visibleMetrics.length||b}get resolvedScrollCollapseProgress(){if(this.variant==="compact"||!Number.isFinite(this.scrollCollapseProgress))return 0;return Math.min(1,Math.max(0,this.scrollCollapseProgress))}get scrollCollapseGeometry(){const e=l(f.size600,48);return w({variant:this.variant,progress:this.resolvedScrollCollapseProgress,expandedHeight:this.expandedHeight,compactHeight:e})}observeLayout(){const e=this.layoutEl;if(!e)return;const r=e.getBoundingClientRect();this.updateLayoutGeometry(r.width,r.height);if(typeof ResizeObserver==="undefined")return;this.layoutResizeObserver?.disconnect();this.layoutResizeObserver=new ResizeObserver((e=>{const r=e[0]?.contentRect;if(!r)return;if(this.layoutResizeFrame!==undefined)cancelAnimationFrame(this.layoutResizeFrame);this.layoutResizeFrame=requestAnimationFrame((()=>{this.layoutResizeFrame=undefined;this.updateLayoutGeometry(r.width,r.height)}))}));this.layoutResizeObserver.observe(e);this.observedLayoutEl=e}updateLayoutGeometry(e,r){const i=this.layoutEl;if(!i)return;const s=e===undefined||r===undefined?i.getBoundingClientRect():null;const d=e??s?.width??0;const t=r??s?.height??0;let c=false;if(t>0&&Math.abs(t-this.expandedHeight)>=.5){this.expandedHeight=t;c=true}const a=h({cellCount:this.visibleCellCount,availableWidth:d,minCellWidth:l(this.metricMinWidth,g)});if(a!==this.gridColumns){this.gridColumns=a;c=true}if(this.gridColumns){this.el.style.setProperty("--ds-card-overview-grid-columns",String(this.gridColumns))}else{this.el.style.removeProperty("--ds-card-overview-grid-columns")}if(c)o(this)}get rovingIndex(){return u(this.visibleMetrics,this.focusedMetricIndex)}selectMetric(e,r){if(e.isInactive)return;this.focusedMetricIndex=r;this.dsMetricSelect.emit(e)}moveFocus(e,r){const i=this.visibleMetrics;const o=m(i,e,r<0?-1:1);if(o<0)return;this.focusedMetricIndex=o;const s=this.el.querySelectorAll(".card-overview__metric-action");s[o]?.focus()}bar(e,r,i){return s("ds-skeleton",{class:i,variant:"text",textVariant:e,width:r,background:"always-dark"})}renderTrend(e,r){if(!e)return null;return s("ds-text",{as:"span",class:{"card-overview__trend":true,"ds-control-label-box":true,[`card-overview__trend--${e.tone}`]:true},variant:r,color:x[e.tone],fontFeature:"tabular-nums"},e.direction==="up"?"↑":"↓"," ",e.value)}renderScore(){if(this.isLoading){return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",variant:"dense",isLoading:true}),s("div",{class:"card-overview__score-copy"},this.bar("text-body-small","64px","card-overview__score-label-spacer"),this.bar("text-body-medium","28px"))))}const e=this.scoreErrorMessage||(!this.score?"Score unavailable":undefined);if(e){return s("div",{class:"card-overview__score",part:"score"},s("ds-text",{as:"span",class:"card-overview__score-content card-overview__score-content--error",variant:"text-body-medium",color:"inherit",role:"alert"},e))}const r=this.score;if(!r)return null;return s("div",{class:"card-overview__score",part:"score"},s("div",{class:"card-overview__score-content"},s("ds-score",{size:"lg",variant:"dense",value:r.value,level:r.level,label:"Safety score"}),s("div",{class:"card-overview__score-copy"},s("ds-text",{as:"span",class:"card-overview__score-label-spacer ds-control-label-box",variant:"text-body-small",color:k,"aria-hidden":"true"}," "),this.renderTrend(r.trend,"text-body-medium"))))}renderMetric(e,r){const i=!e.isInactive;const o=s("ds-text",{as:"span",class:"card-overview__metric-label ds-control-label-box",variant:"text-body-small",color:k},e.label);return s("div",{class:"card-overview__metric",part:"metric"},s("div",{class:{"card-overview__metric-action":true,"card-overview__metric-action--inactive":!i,"ds-interaction-fill":i,"ds-interaction-fill--on-always-dark":i,"ds-focus-ring-inset":i},role:i?"button":undefined,tabIndex:i&&r===this.rovingIndex?0:-1,onClick:()=>this.selectMetric(e,r),onKeyDown:e=>this.handleMetricKeyDown(e,r),onFocusin:()=>{if(i)this.focusedMetricIndex=r}},s("div",{class:"ds-interaction-fill__content card-overview__metric-content"},e.labelTooltip?s("ds-tooltip",{label:e.labelTooltip,side:"top",size:"sm"},o):o,s("div",{class:"card-overview__metric-figure"},s("ds-text",{as:"span",class:"card-overview__metric-value ds-control-label-box",variant:"text-body-medium",color:y,fontFeature:"tabular-nums"},e.value),this.renderTrend(e.trend,"text-body-medium")))))}renderMetrics(){if(this.isLoading){return[this.renderScore(),...Array.from({length:this.loadingMetricCount},((e,r)=>s("div",{class:"card-overview__metric",key:`loading-${r}`},s("div",{class:"card-overview__metric-action card-overview__metric-action--inactive"},s("div",{class:"card-overview__metric-content"},this.bar("text-body-small","35%","card-overview__metric-label"),s("div",{class:"card-overview__metric-figure"},this.bar("text-body-medium","40px"),this.bar("text-body-medium","28px")))))))]}return[this.renderScore(),...this.visibleMetrics.map(((e,r)=>this.renderMetric(e,r)))]}render(){const e=this.variant==="compact";const r=this.scrollCollapseGeometry;const i={"--ds-card-overview-metric-min":this.metricMinWidth};if(this.gridColumns){i["--ds-card-overview-grid-columns"]=String(this.gridColumns)}if(r.active){i["--ds-card-overview-expanded-height"]=`${r.expandedHeight}px`;i["--ds-card-overview-visible-height"]=`${r.visibleHeight}px`;i["--ds-card-overview-content-offset"]=`${r.offset}px`}return s(d,{key:"faeb5b0d433ea072cc392874b7207a4ed66b94b6",class:{"card-overview":true,"card-overview--compact":e,"card-overview--stacked":!e&&this.layout==="stacked","card-overview--scroll-collapsing":r.active},role:"region","aria-label":this.overviewLabel,"aria-busy":this.isLoading?"true":undefined,style:i},s("div",{key:"8d334a9700cc394515e7894a4e827f2b831852a2",class:{"card-overview__surface":true,"ds-control-elevation":true,"ds-control-elevation--sm":!e,"ds-control-elevation--floating":e}},s("div",{key:"cf231ae532e1e665a61e775bacfbf7b5009e568e",class:"card-overview__clip"},s("div",{key:"5409600e627ce9a06c9baace4a8a736bb0ea3370",ref:e=>{this.layoutEl=e??undefined},class:{"card-overview__layout":true}},s("div",{key:"273833e85c814b451b2185e25579c77dcd2cfdf3",class:"card-overview__summary"},s("div",{key:"7db06719870efa0283a252e2132c117343d6eaf5",class:"card-overview__header ds-control--md"},s("div",{key:"21b925c9c718ee80e7a8c5620f22f445dba07bd0",class:"card-overview__period"},s("div",{key:"912d88fbe9256f0c8827c1bed995a1b3f6cf8fb7",class:"card-overview__period-current"},s("slot",{key:"4240100d901b5a03ce67e138491f2d35c1e2546f",name:"period"},this.periodLabel&&s("div",{key:"d1ffea003515c2bd9f74bf7eb5300caab2483c21",class:"card-overview__period-fixed ds-control-frame"},s("ds-text",{key:"83df095bc2e21eaf9582c7e7766185c3fd5ffce8",as:"span",class:"ds-control-label-box",variant:"text-body-medium",emphasis:true,color:y},this.periodLabel)))),this.comparisonLabel&&s("ds-text",{key:"57448523c6cd4cdae800d118c1e63b924048f785",as:"span",class:"card-overview__period-comparison ds-control-label-box",variant:"text-body-medium",color:k},this.comparisonLabel)),s("div",{key:"6bbfede7d4f1dea7f3cc1b26e1f8b9d963ac5b2a",class:"card-overview__filter"},s("slot",{key:"cfeb4793180d07a021f51299d304b034ec8b60d2",name:"filter"})))),!e&&s("div",{key:"06d2c5123d7873141c7e457ee808c9d1d9890932",class:"card-overview__body"},s("div",{key:"5b1f6f6b271bc0a81ded5dab1ea8b7c4208cbd3a",class:"card-overview__metrics",part:"metrics"},this.renderMetrics()),s("slot",{key:"b4ec7c186423cbe8f8381bcf0e1dba5e10cc9275",name:"footer"}))))))}get el(){return this}static get style(){return p()}},[262,"ds-card-overview",{variant:[1],layout:[1],score:[16],periodLabel:[1,"period-label"],comparisonLabel:[1,"comparison-label"],metrics:[16],metricMinWidth:[1,"metric-min-width"],isLoading:[4,"is-loading"],scoreErrorMessage:[1,"score-error-message"],overviewLabel:[1,"overview-label"],scrollCollapseProgress:[2,"scroll-collapse-progress"],focusedMetricIndex:[32],expandedHeight:[32],gridColumns:[32]}]);function M(){if(typeof customElements==="undefined"){return}const e=["ds-card-overview","ds-score","ds-skeleton","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-card-overview":if(!customElements.get(t(e))){customElements.define(t(e),z)}break;case"ds-score":if(!customElements.get(t(e))){c()}break;case"ds-skeleton":if(!customElements.get(t(e))){a()}break;case"ds-text":if(!customElements.get(t(e))){n()}break;case"ds-tooltip":if(!customElements.get(t(e))){v()}break}}))}M();const C=z;const j=M;export{C as DsCardOverview,j as defineCustomElement};
2
2
  //# sourceMappingURL=ds-card-overview.js.map