@cbpds/web-components/dist/components/p-c79ac5f9.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as o,H as r,d as t,h as c,c as b}from"./p-9caf8482.js";import{c as a,s as e,g as n}from"./p-9c1b2f31.js";const l=":root{--cbp-button-color:var(--cbp-color-text-lightest);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-focus:var(--cbp-color-text-lightest);--cbp-button-color-active:var(--cbp-color-text-lightest);--cbp-button-color-bg:var(--cbp-color-interactive-primary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-bg-focus:var(--cbp-color-interactive-focus-dark);--cbp-button-color-bg-active:var(--cbp-color-interactive-active-dark);--cbp-button-color-border:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-border-focus:var(--cbp-color-interactive-focus-dark);--cbp-button-color-border-active:var(--cbp-color-interactive-active-dark);--cbp-button-color-dark:var(--cbp-color-text-darkest);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-focus-dark:var(--cbp-color-text-darkest);--cbp-button-color-active-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-dark:var(--cbp-color-interactive-primary-base);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-bg-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-button-color-bg-active-dark:var(--cbp-color-interactive-active-light);--cbp-button-color-border-dark:var(--cbp-color-interactive-primary-base);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-button-color-border-active-dark:var(--cbp-color-interactive-active-light);--cbp-button-color-outline-focus:var(--cbp-color-white);--cbp-button-color-outline-focus-dark:var(--cbp-color-black);--cbp-button-focus-outline-width:var(--cbp-border-size-md);--cbp-button-padding:var(--cbp-space-2x);--cbp-button-border-width:var(--cbp-border-size-md);--cbp-button-border-style:solid;--cbp-button-border-radius:var(--cbp-border-radius-soft);--cbp-button-min-width:auto;--cbp-button-min-height:2.25rem;--cbp-button-width:auto;--cbp-button-height:auto;--cbp-button-gap:0 var(--cbp-space-2x)}[data-cbp-theme=light] cbp-button[context*=dark]:not(#fakeId),[data-cbp-theme=dark] cbp-button:not([context=dark-inverts]):not([context=light-always]):not(#fakeId){--cbp-button-color:var(--cbp-button-color-dark);--cbp-button-color-hover:var(--cbp-button-color-hover-dark);--cbp-button-color-focus:var(--cbp-button-color-focus-dark);--cbp-button-color-active:var(--cbp-button-color-active-dark);--cbp-button-color-bg:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-hover:var(--cbp-button-color-bg-hover-dark);--cbp-button-color-bg-focus:var(--cbp-button-color-bg-focus-dark);--cbp-button-color-bg-active:var(--cbp-button-color-bg-active-dark);--cbp-button-color-border:var(--cbp-button-color-border-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border-hover-dark);--cbp-button-color-border-focus:var(--cbp-button-color-border-focus-dark);--cbp-button-color-border-active:var(--cbp-button-color-border-active-dark);--cbp-button-color-outline-focus:var(--cbp-button-color-outline-focus-dark)}cbp-button{display:inline-block;width:var(--cbp-button-width);height:var(--cbp-button-height)}cbp-button button,cbp-button a{display:inline-flex;gap:var(--cbp-button-gap);align-items:center;justify-content:center;border-width:var(--cbp-button-border-width);border-style:solid;border-radius:var(--cbp-button-border-radius);font-weight:var(--cbp-font-weight-medium);text-transform:uppercase;letter-spacing:var(--cbp-letter-spacing-loose);text-decoration:none;padding:var(--cbp-button-padding);transition:all var(--cbp-motion-duration-shorter);min-width:var(--cbp-button-min-width);min-height:var(--cbp-button-min-height);width:var(--cbp-button-width);height:var(--cbp-button-height);white-space:nowrap;cursor:pointer;color:var(--cbp-button-color);background-color:var(--cbp-button-color-bg);border-color:var(--cbp-button-color-border);outline-color:var(--cbp-button-color-outline-focus);outline-style:solid;outline-width:0;outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-button button:hover,cbp-button a:hover{--cbp-button-color:var(--cbp-button-color-hover);--cbp-button-color-bg:var(--cbp-button-color-bg-hover);--cbp-button-color-border:var(--cbp-button-color-border-hover)}cbp-button button:focus,cbp-button a:focus{--cbp-button-color:var(--cbp-button-color-focus);--cbp-button-color-bg:var(--cbp-button-color-bg-focus);--cbp-button-color-border:var(--cbp-button-color-border-focus);outline-width:var(--cbp-button-focus-outline-width)}cbp-button button:active,cbp-button a:active{--cbp-button-color:var(--cbp-button-color-active);--cbp-button-color-bg:var(--cbp-button-color-bg-active);--cbp-button-color-border:var(--cbp-button-color-border-active)}cbp-button[fill=solid]{--cbp-button-color:var(--cbp-color-text-lightest);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-dark:var(--cbp-color-text-darkest);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest)}cbp-button[fill=solid][color=primary]{--cbp-button-color-bg:var(--cbp-color-interactive-primary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-border:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-darker);--cbp-button-color-bg-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-lighter)}cbp-button[fill=solid][color=secondary]{--cbp-button-color-bg:var(--cbp-color-interactive-secondary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-bg-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=solid][color=tertiary]{--cbp-button-color-bg:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-text-lightest);--cbp-button-color-bg-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=solid][color=danger]{--cbp-button-color-bg:var(--cbp-color-danger-dark);--cbp-button-color-bg-hover:var(--cbp-color-danger-darker);--cbp-button-color-border:var(--cbp-color-danger-dark);--cbp-button-color-border-hover:var(--cbp-color-danger-darker);--cbp-button-color-bg-dark:var(--cbp-color-danger-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-danger-lighter);--cbp-button-color-border-dark:var(--cbp-color-danger-light);--cbp-button-color-border-hover-dark:var(--cbp-color-danger-lighter)}cbp-button[fill=solid]:has(button:disabled),cbp-button[fill=solid]:has(a[aria-disabled=true]){--cbp-button-color:var(--cbp-color-interactive-disabled-light);--cbp-button-color-hover:var(--cbp-button-color);--cbp-button-color-focus:var(--cbp-button-color);--cbp-button-color-active:var(--cbp-button-color);--cbp-button-color-bg:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-bg-hover:var(--cbp-button-color-bg);--cbp-button-color-bg-focus:var(--cbp-button-color-bg);--cbp-button-color-bg-active:var(--cbp-button-color-bg);--cbp-button-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border);--cbp-button-color-border-focus:var(--cbp-button-color-border);--cbp-button-color-border-active:var(--cbp-button-color-border);--cbp-button-color-dark:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-hover-dark:var(--cbp-button-color-dark);--cbp-button-color-focus-dark:var(--cbp-button-color-dark);--cbp-button-color-active-dark:var(--cbp-button-color-dark);--cbp-button-color-bg-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-bg-hover-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-focus-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-active-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-border-hover-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-focus-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-active-dark:var(--cbp-button-color-border-dark)}cbp-button[fill=outline]{--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest)}cbp-button[fill=outline][color=primary]{--cbp-button-color:var(--cbp-color-interactive-primary-dark);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-light)}cbp-button[fill=outline][color=secondary]{--cbp-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=outline][color=tertiary]{--cbp-button-color:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-dark:var(--cbp-color-interactive-secondary-base);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=outline][color=danger]{--cbp-button-color:var(--cbp-color-danger-dark);--cbp-button-color-bg-hover:var(--cbp-color-danger-dark);--cbp-button-color-border:var(--cbp-color-danger-dark);--cbp-button-color-border-hover:var(--cbp-color-danger-darker);--cbp-button-color-dark:var(--cbp-color-danger-light);--cbp-button-color-bg-hover-dark:var(--cbp-color-danger-light);--cbp-button-color-border-dark:var(--cbp-color-danger-light);--cbp-button-color-border-hover-dark:var(--cbp-color-danger-light)}cbp-button[fill=outline]:has(button:disabled),cbp-button[fill=outline]:has(a[aria-disabled=true]){--cbp-button-color:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-hover:var(--cbp-button-color);--cbp-button-color-focus:var(--cbp-button-color);--cbp-button-color-active:var(--cbp-button-color);--cbp-button-color-bg:var(--cbp-color-white);--cbp-button-color-bg-hover:var(--cbp-color-white);--cbp-button-color-bg-focus:var(--cbp-color-white);--cbp-button-color-bg-active:var(--cbp-color-white);--cbp-button-color-border:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-border-hover:var(--cbp-button-color-border);--cbp-button-color-border-focus:var(--cbp-button-color-border);--cbp-button-color-border-active:var(--cbp-button-color-border);--cbp-button-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-hover-dark:var(--cbp-button-color-dark);--cbp-button-color-focus-dark:var(--cbp-button-color-dark);--cbp-button-color-active-dark:var(--cbp-button-color-dark);--cbp-button-color-bg-dark:var(--cbp-color-gray-cool-80);--cbp-button-color-bg-hover-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-focus-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-bg-active-dark:var(--cbp-button-color-bg-dark);--cbp-button-color-border-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-border-hover-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-focus-dark:var(--cbp-button-color-border-dark);--cbp-button-color-border-active-dark:var(--cbp-button-color-border-dark)}cbp-button[fill=ghost]{--cbp-button-color-bg:transparent;--cbp-button-color-border:transparent;--cbp-button-color-bg-dark:transparent;--cbp-button-color-border-dark:transparent}cbp-button[fill=ghost][color=primary]{--cbp-button-color:var(--cbp-color-interactive-primary-dark);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-border-hover:var(--cbp-color-interactive-primary-dark);--cbp-button-color-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-primary-light);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-primary-light)}cbp-button[fill=ghost][color=secondary]{--cbp-button-color:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=ghost][color=tertiary]{--cbp-button-color:var(--cbp-color-interactive-secondary-base);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-border-hover:var(--cbp-color-interactive-secondary-darker);--cbp-button-color-dark:var(--cbp-color-interactive-secondary-light);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-button-color-border-hover-dark:var(--cbp-color-interactive-secondary-lighter)}cbp-button[fill=ghost][color=danger]{--cbp-button-color:var(--cbp-color-danger-dark);--cbp-button-color-hover:var(--cbp-color-text-lightest);--cbp-button-color-bg-hover:var(--cbp-color-danger-dark);--cbp-button-color-border-hover:var(--cbp-color-danger-dark);--cbp-button-color-dark:var(--cbp-color-danger-light);--cbp-button-color-hover-dark:var(--cbp-color-text-darkest);--cbp-button-color-bg-hover-dark:var(--cbp-color-danger-light);--cbp-button-color-border-hover-dark:var(--cbp-color-danger-light)}cbp-button[fill=ghost]:has(button:disabled),cbp-button[fill=ghost]:has(a[aria-disabled=true]){--cbp-button-color:var(--cbp-color-interactive-disabled-dark);--cbp-button-color-hover:var(--cbp-button-color);--cbp-button-color-focus:var(--cbp-button-color);--cbp-button-color-active:var(--cbp-button-color);--cbp-button-color-bg-hover:transparent;--cbp-button-color-bg-focus:transparent;--cbp-button-color-bg-active:transparent;--cbp-button-color-border-hover:transparent;--cbp-button-color-border-focus:transparent;--cbp-button-color-border-active:transparent;--cbp-button-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-button-color-hover-dark:var(--cbp-button-color-dark);--cbp-button-color-focus-dark:var(--cbp-button-color-dark);--cbp-button-color-active-dark:var(--cbp-button-color-dark);--cbp-button-color-bg-hover-dark:transparent;--cbp-button-color-bg-focus-dark:transparent;--cbp-button-color-bg-active-dark:transparent;--cbp-button-color-border-hover-dark:transparent;--cbp-button-color-border-focus-dark:transparent;--cbp-button-color-border-active-dark:transparent}cbp-button[variant=square] button,cbp-button[variant=square] a{--cbp-button-height:2.25rem;--cbp-button-width:var(--cbp-button-height);padding:unset;letter-spacing:unset}cbp-button[variant=cta] button,cbp-button[variant=cta] a{font-size:var(--cbp-font-size-heading-sm);padding-left:var(--cbp-space-4x);padding-right:var(--cbp-space-4x);min-height:3.25rem}cbp-button button:disabled,cbp-button a[aria-disabled=true]{font-style:italic;outline:0;cursor:not-allowed}";const i=l;const p=o(class o extends r{constructor(){super();this.__registerHost();this.buttonClick=t(this,"buttonClick",7);this.componentLoad=t(this,"componentLoad",7);this.tag="button";this.type="button";this.fill="solid";this.color="primary";this.variant=undefined;this.controlId=a("cbp-button");this.name=undefined;this.value=undefined;this.href=undefined;this.rel=undefined;this.target=undefined;this.download=undefined;this.width=undefined;this.height=undefined;this.pressed=undefined;this.expanded=undefined;this.controls=undefined;this.targetProp=undefined;this.accessibilityText=undefined;this.disabled=undefined;this.context=undefined;this.sx={}}handleClick(o){var r;if(this.controls){if(!this.controlTarget)this.controlTarget=document.querySelector(`#${this.controls}`);if(this.controlTarget){this.controlTarget[this.targetProp]=!this.controlTarget[this.targetProp]}else{console.warn("cbp-button configuration error: the control target referenced by ID by the `control` property could not be found.")}}(r=this.buttonClick)===null||r===void 0?void 0:r.emit({host:this.host,nativeElement:this.button,nativeEvent:o,controls:this.controls?this.controls:null,pressed:this.pressed,expanded:this.expanded,name:this.button.tagName=="BUTTON"?this.button.name:null,value:this.button.tagName=="BUTTON"?this.button.value:null})}componentWillLoad(){this.controlTarget=this.controls?document.querySelector(`#${this.controls}`):undefined;if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}e(this.host,Object.assign({},this.sx));let o=n(this.host);this.persistedAttrs=Object.fromEntries(Object.entries(o).filter((([o])=>o.includes("aria-")||o=="role")))}componentDidLoad(){if(!this.button){const o=this.button=this.host.querySelector("button,a");if(o){this.button=o;this.button.addEventListener("click",this.handleClick)}}if(this.button){this.button.getAttribute("id")?this.controlId=this.button.getAttribute("id"):this.button.setAttribute("id",`${this.controlId}`);if(this.disabled)this.button.setAttribute("disabled","")}e(this.button,{"min-width":this.width,"min-height":this.height});for(const[o]of Object.entries(this.persistedAttrs)){this.host.removeAttribute(o)}this.componentLoad.emit({host:this.host,nativeElement:this.button,name:this.button.tagName=="BUTTON"?this.button.name:null,value:this.button.tagName=="BUTTON"?this.button.value:null})}render(){const{type:o,name:r,value:t,disabled:a,rel:e,target:n,href:l,download:i}=this;const p=this.tag==="button"?{type:o,name:r,value:t,disabled:a}:{download:i,href:l,rel:e,target:n};if(this.host.querySelector("[slot=cbp-button-custom]")){if(this.disabled)this.button.setAttribute("disabled","");return c(b,{onClick:o=>this.handleClick(o)},c("slot",{name:"cbp-button-custom"}))}else if(this.tag==="button"){return c(b,{onClick:o=>this.handleClick(o)},c("button",Object.assign({},this.persistedAttrs,p,{disabled:this.disabled,"aria-label":this.accessibilityText,"aria-pressed":this.pressed,"aria-expanded":this.expanded,"aria-controls":this.controls,ref:o=>this.button=o}),c("slot",null)))}else{return c(b,{onClick:o=>this.handleClick(o)},c("a",Object.assign({},this.persistedAttrs,p,{"aria-label":this.accessibilityText,"aria-pressed":this.pressed,"aria-expanded":this.expanded,"aria-controls":this.controls,role:a?"link":null,"aria-disabled":a?"true":null,ref:o=>this.button=o}),c("slot",null)))}}get host(){return this}static get style(){return i}},[4,"cbp-button",{tag:[1],type:[1],fill:[513],color:[513],variant:[513],controlId:[1,"control-id"],name:[1],value:[1],href:[1],rel:[1],target:[1],download:[4],width:[1],height:[1],pressed:[513],expanded:[513],controls:[1],targetProp:[1,"target-prop"],accessibilityText:[1,"accessibility-text"],disabled:[516],context:[513],sx:[8]}]);function d(){if(typeof customElements==="undefined"){return}const o=["cbp-button"];o.forEach((o=>{switch(o){case"cbp-button":if(!customElements.get(o)){customElements.define(o,p)}break}}))}export{p as C,d};
//# sourceMappingURL=p-c79ac5f9.js.map