@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 13.9 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{p as o,H as c,d as t,h as r,c as i}from"./p-c5a784ab.js";import{c as e,s as n}from"./p-9c1b2f31.js";import{d as a}from"./p-7abe098c.js";import{d as p}from"./p-62fdbefd.js";import{d}from"./p-0c71f1af.js";const l=":root{--cbp-accordion-item-color:var(--cbp-color-text-darker);--cbp-accordion-item-color-fill:var(--cbp-color-gray-cool-10);--cbp-accordion-item-color-open:var(--cbp-color-text-lighter);--cbp-accordion-item-color-fill-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darker);--cbp-accordion-item-color-fill-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-open-hover:var(--cbp-color-interactive-secondary-darker);--cbp-accordion-item-color-focus:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-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-fill-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-fill-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{display:flex;flex-direction:column}cbp-accordion-item[open]{--cbp-accordion-item-color:var(--cbp-accordion-item-color-open);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-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-fill:var(--cbp-accordion-item-color-fill-open-hover)}cbp-accordion-item[open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-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-fill);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-fill:var(--cbp-accordion-item-color-fill-hover)}cbp-accordion-item .cbp-accordion-item--control:focus-within{--cbp-accordion-item-color:var(--cbp-accordion-item-color-focus);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-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-fill:var(--cbp-accordion-item-color-fill-focus)}cbp-accordion-item .cbp-accordion-item--control:active{--cbp-accordion-item-color:var(--cbp-accordion-item-color-active);--cbp-accordion-item-color-fill:var(--cbp-accordion-item-color-fill-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-fill:var(--cbp-accordion-item-color-fill-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-fill-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-fill);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;overflow:hidden}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-color-text-lightest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-base)}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-color-text-lightest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-dark)}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-fill:var(--cbp-color-danger-dark)}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-color-white)}[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-text-lightest);--cbp-accordion-item-color-fill:var(--cbp-color-gray-cool-50);--cbp-accordion-item-color-open:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-open:var(--cbp-color-gray-cool-60);--cbp-accordion-item-color-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-accordion-item-color-open-hover:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-open-hover:var(--cbp-color-interactive-secondary-light);--cbp-accordion-item-color-focus:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill-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-fill-active:var(--cbp-color-interactive-active-light);--cbp-accordion-item-color-content:var(--cbp-color-text-lightest);--cbp-accordion-item-color-fill-content:var(--cbp-color-gray-cool-90)}[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger],[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger][open],[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger],[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger][open]{--cbp-accordion-item-color:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-light)}[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active),[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active){--cbp-accordion-item-color:var(--cbp-color-text-darkest);--cbp-accordion-item-color-fill:var(--cbp-color-danger-lighter)}[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,[data-cbp-theme=light] cbp-accordion[context*=dark] cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content,[data-cbp-theme=dark] cbp-accordion:not([context=dark-inverts]):not([context=light-always]) cbp-accordion-item[color=danger][open] .cbp-accordion-item--control:hover:not(:focus-within):not(:active)+.cbp-accordion-item--content{--cbp-accordion-item-color-fill:var(--cbp-color-danger-lighter)}@keyframes expandTo{from{max-height:0px}to{max-height:5000px}}";const b=l;const m=o(class o extends c{constructor(){super();this.__registerHost();this.accordionItemClick=t(this,"accordionItemClick",7);this.headingId=e("cbp-accordion-item");this.open=false;this.label=undefined;this.headingLevel="h3";this.color=undefined;this.sx={}}handleClick(){this.open=!this.open;this.accordionItemClick.emit({host:this.host,button:this.button,open:this.open});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:"b22e32ed8075a5404e502355313367cb444613c1"},r("div",{key:"b3b759f78de36c1ad4c34530ca0b12c1aed1ca9d",class:"cbp-accordion-item--control",onClick:()=>this.handleClick()},r("cbp-button",{key:"687b73f6a80f4617bd3e21fd9fb11e64f8a095bf",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:"869ec234317a8de77d5afcec8caeee36f448423f",name:"chevron-right"})),r("div",{key:"5748e02581a156376f2940c7833158aaf5a5ca65",id:this.headingId,class:"cbp-accordion-item--heading"},r("slot",{key:"acdd74a4b64ab3238fdb94a00fb4d7115568bc23",name:"cbp-accordion-item-label"}),this.label&&r("cbp-typography",{key:"6dc18abd92d1a675af57510cad7d713da6eebf92",tag:this.headingLevel,variant:"heading-sm"},this.label))),r("div",{key:"94a98497e177bdb19a9d606767e5737903a2bb9b",id:`${this.headingId}-content`,class:"cbp-accordion-item--content"},r("slot",{key:"f7d8564a6b2e03f1c594c136e7ec84ef4ee1da59"})))}get host(){return this}static get style(){return b}},[4,"cbp-accordion-item",{headingId:[1,"heading-id"],open:[516],label:[1],headingLevel:[1,"heading-level"],color:[513],sx:[8]}]);function s(){if(typeof customElements==="undefined"){return}const o=["cbp-accordion-item","cbp-button","cbp-icon","cbp-typography"];o.forEach((o=>{switch(o){case"cbp-accordion-item":if(!customElements.get(o)){customElements.define(o,m)}break;case"cbp-button":if(!customElements.get(o)){a()}break;case"cbp-icon":if(!customElements.get(o)){p()}break;case"cbp-typography":if(!customElements.get(o)){d()}break}}))}const h=m;const v=s;export{h as CbpAccordionItem,v as defineCustomElement};
//# sourceMappingURL=cbp-accordion-item.js.map