@cbpds/web-components/dist/cbp-web-components/p-d326728d.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r as o,c,h as r,a as i,g as t}from"./p-654179c2.js";import{c as a,s as n}from"./p-93ade441.js";const e=":root{--cbp-accordion-item-color:var(--cbp-color-text-darker);--cbp-accordion-item-color-background:var(--cbp-color-gray-cool-10);--cbp-accordion-item-color-open:var(--cbp-color-text-lighter);--cbp-accordion-item-color-background-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darker);--cbp-accordion-item-color-background-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-open-hover:var(--cbp-color-interactive-secondary-darker);--cbp-accordion-item-color-focus:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-focus:var(--cbp-color-interactive-focus-dark);--cbp-accordion-item-color-outline-focus:var(--cbp-color-white);--cbp-accordion-item-color-active:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-active:var(--cbp-color-interactive-active-dark);--cbp-accordion-item-border-width:var(--cbp-border-width-xs);--cbp-accordion-item-border-style:solid;--cbp-accordion-item-border-radius:var(--cbp-border-radius-sharp, 0);--cbp-accordion-item-control-font-size:var(--cbp-font-size-heading-sm);--cbp-accordion-item-control-font-weight:var(--cbp-font-weight-semibold);--cbp-accordion-item-control-gap:var(--cbp-space-3x);--cbp-accordion-item-control-padding:var(--cbp-space-3x);--cbp-accordion-item-control-direction:row;--cbp-accordion-item-color-content:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-content:var(--cbp-color-white);--cbp-accordion-item-content-font-size:var(--cbp-font-size-md);--cbp-accordion-item-content-font-family:inherit;--cbp-accordion-item-content-font-weight:var(--cbp-font-weight-regular);--cbp-accordion-item-content-padding:var(--cbp-space-3x);--cbp-accordion-item-heading-gap:var(--cbp-space-2x);--cbp-accordion-item-danger-color:var(--cbp-color-white);--cbp-accordion-item-danger-color-dark:var(--cbp-color-text-darkest);--cbp-accordion-item-danger-color-background:var(--cbp-color-danger-base);--cbp-accordion-item-danger-color-background-dark:var(--cbp-color-danger-light);--cbp-accordion-item-danger-color-background-hover:var(--cbp-color-danger-dark);--cbp-accordion-item-danger-color-background-hover-dark:var(--cbp-color-danger-lighter)}[data-cbp-theme=light] cbp-accordion[context*=dark],[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]){--cbp-accordion-item-color:var(--cbp-color-white);--cbp-accordion-item-color-background:var(--cbp-color-gray-cool-50);--cbp-accordion-item-color-open:var(--cbp-color-white);--cbp-accordion-item-color-background-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-open-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-focus:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-focus:var(--cbp-color-interactive-focus-light);--cbp-accordion-item-color-outline-focus:var(--cbp-color-black);--cbp-accordion-item-color-active:var(--cbp-color-text-darkest);--cbp-accordion-item-color-background-active:var(--cbp-color-interactive-active-light);--cbp-accordion-item-color-content:var(--cbp-color-text-lightest);--cbp-accordion-item-color-background-content:var(--cbp-color-gray-cool-90);--cbp-accordion-item-danger-color:var(--cbp-accordion-item-danger-color-dark);--cbp-accordion-item-danger-color-background:var(--cbp-accordion-item-danger-color-background-dark);--cbp-accordion-item-danger-color-background-hover:var(--cbp-accordion-item-danger-color-background-hover-dark)}cbp-accordion-item{display:flex;flex-direction:column}cbp-accordion-item[open]{--cbp-accordion-item-color:var(--cbp-accordion-item-color-open);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-open)}cbp-accordion-item[open] .cbp-accordion-item--control{--cbp-accordion-rotate-icon:rotate(270deg);--cbp-accordion-toggle:expandTo 500ms}cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active){--cbp-accordion-item-color:var(--cbp-accordion-item-color-open-hover);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-open-hover)}cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-open-hover)}cbp-accordion-item .cbp-accordion-item--control{display:flex;flex-direction:var(--cbp-accordion-item-control-direction, row);align-items:center;gap:var(--cbp-accordion-item-control-gap);min-height:var(--cbp-space-13x);color:var(--cbp-accordion-item-color);--cbp-button-color:var(--cbp-accordion-item-color);background-color:var(--cbp-accordion-item-color-background);font-size:var(--cbp-accordion-item-control-font-size);font-weight:var(--cbp-accordion-item-control-font-weight);padding:var(--cbp-accordion-item-control-padding);outline-style:solid;outline-color:var(--cbp-accordion-item-color-outline-focus);outline-width:0;outline-offset:calc(-1 * var(--cbp-space-1x));cursor:pointer}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading{display:flex;flex-grow:1;justify-content:space-between}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading :first-child{flex-grow:1}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--heading [slot=cbp-accordion-item-label]{display:flex;align-items:center;gap:var(--cbp-accordion-item-heading-gap)}cbp-accordion-item .cbp-accordion-item--control cbp-typography,cbp-accordion-item .cbp-accordion-item--control cbp-typography>*{color:var(--cbp-accordion-item-color)}cbp-accordion-item .cbp-accordion-item--control:hover{--cbp-accordion-item-color:var(--cbp-accordion-item-color-hover);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-hover)}cbp-accordion-item .cbp-accordion-item--control:focus-within{--cbp-accordion-item-color:var(--cbp-accordion-item-color-focus);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-focus);outline-width:var(--cbp-border-size-md)}cbp-accordion-item .cbp-accordion-item--control:focus-within .cbp-accordion-item--toggle{--cbp-button-color:var(--cbp-accordion-item-color-focus) !important}cbp-accordion-item .cbp-accordion-item--control:focus-within+.cbp-accordion-item--content{--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-focus)}cbp-accordion-item .cbp-accordion-item--control:active{--cbp-accordion-item-color:var(--cbp-accordion-item-color-active);--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-active)}cbp-accordion-item .cbp-accordion-item--control:active .cbp-accordion-item--toggle{--cbp-button-color:var(--cbp-accordion-item-color-active) !important}cbp-accordion-item .cbp-accordion-item--control:active+.cbp-accordion-item--content{--cbp-accordion-item-color-background:var(--cbp-accordion-item-color-background-active)}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--toggle{--cbp-button-padding:0;--cbp-button-border-width:0;--cbp-button-focus-outline-width:0;--cbp-button-color:var(--cbp-accordion-item-color) !important;--cbp-button-color-hover:var(--cbp-accordion-item-color) !important;--cbp-button-color-focus:var(--cbp-accordion-item-color) !important;--cbp-button-color-active:var(--cbp-accordion-item-color) !important;--cbp-button-color-bg:transparent !important;--cbp-button-color-bg-hover:transparent !important;--cbp-button-color-bg-focus:transparent !important;--cbp-button-color-bg-active:transparent !important}cbp-accordion-item .cbp-accordion-item--control .cbp-accordion-item--toggle cbp-icon svg{transition:transform 150ms;transform:var(--cbp-accordion-rotate-icon)}cbp-accordion-item .cbp-accordion-item--content{color:var(--cbp-accordion-item-color-content);background-color:var(--cbp-accordion-item-color-background-content);padding:var(--cbp-space-4x) var(--cbp-space-3x);border-width:var(--cbp-border-size-xl);border-style:var(--cbp-accordion-item-border-style);border-color:var(--cbp-accordion-item-color-background);border-top:0;animation:var(--cbp-accordion-toggle);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 10);animation-iteration-count:revert;animation-fill-mode:forwards}cbp-accordion-item:not([open]){--cbp-accordion-rotate-icon:rotate(90deg)}cbp-accordion-item:not([open]) .cbp-accordion-item--content{display:none}cbp-accordion-item[color=danger],cbp-accordion-item[color=danger][open]{--cbp-accordion-item-color:var(--cbp-accordion-item-danger-color);--cbp-accordion-item-color-background:var(--cbp-accordion-item-danger-color-background)}cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active){--cbp-accordion-item-color:var(--cbp-accordion-item-danger-color);--cbp-accordion-item-color-background:var(--cbp-accordion-item-danger-color-background-hover)}cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-background:var(--cbp-accordion-item-danger-color-background-hover)}cbp-accordion-item[color=danger] .cbp-accordion-item--control cbp-typography,cbp-accordion-item[color=danger] .cbp-accordion-item--control cbp-typography>*,cbp-accordion-item[color=danger][open] .cbp-accordion-item--control cbp-typography,cbp-accordion-item[color=danger][open] .cbp-accordion-item--control cbp-typography>*{--cbp-accordion-item-color:var(--cbp-accordion-item-danger-color)}@keyframes expandTo{from{max-height:0px}to{max-height:5000px}}";const d=e;const b=class{constructor(r){o(this,r);this.accordionItemClick=c(this,"accordionItemClick",7);this.headingId=a("cbp-accordion-item");this.open=false;this.label=undefined;this.headingLevel="h3";this.color=undefined;this.sx={}}handleClick(o){this.open=!this.open;this.accordionItemClick.emit({host:this.host,button:this.button,open:this.open,nativeEvent:o});this.button.focus()}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}n(this.host,Object.assign({},this.sx))}componentDidLoad(){this.button=this.control.querySelector("button")}render(){return r(i,{key:"b096acb167e5faa340acdc6be01e233cc05d9cff"},r("div",{key:"42537e04ef0f2df62cb75d6f1de43276b1162b60",class:"cbp-accordion-item--control",onClick:o=>this.handleClick(o)},r("cbp-button",{key:"7d5cc484131af94b00c6100afaaf599a789bd9e1",type:"button",class:"cbp-accordion-item--toggle",fill:"ghost",color:"secondary",controls:`${this.headingId}-content`,expanded:`${this.open}`,"aria-labelledby":this.headingId,ref:o=>this.control=o},r("cbp-icon",{key:"178c2e3620626f99ad3f6bb74db6b53f844b596d",name:"chevron-right"})),r("div",{key:"dcd615b44414e3930e6dddec4c44180d9685cdbc",id:this.headingId,class:"cbp-accordion-item--heading"},r("slot",{key:"faabb763a16fc31cc3880e3e73b14e9026b6dcda",name:"cbp-accordion-item-label"}),this.label&&r("cbp-typography",{key:"ce781aaf9b0bedb0f47fc1368dc6d79421c76d1a",tag:this.headingLevel,variant:"heading-sm"},this.label))),r("div",{key:"ab51dc59fd2d148354a4eecbb41170ccd59999bf",id:`${this.headingId}-content`,class:"cbp-accordion-item--content"},r("slot",{key:"cd6c38d9d15fb8afa099a02d3b5bccc820eefb2b"})))}get host(){return t(this)}};b.style=d;export{b as cbp_accordion_item};
//# sourceMappingURL=p-d326728d.entry.js.map