@cbpds/web-components/dist/components/cbp-tab.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 c,h as t,c as b}from"./p-9caf8482.js";import{s as a}from"./p-9c1b2f31.js";const e="[data-cbp-theme=light] cbp-tabs[context*=dark] cbp-tab,[data-cbp-theme=dark] cbp-tabs:not([context=dark-inverts]):not([context=light-always]) cbp-tab{--cbp-tab-color:var(--cbp-tab-color-dark);--cbp-tab-color-hover:var(--cbp-tab-color-hover-dark);--cbp-tab-color-focus:var(--cbp-tab-color-focus-dark);--cbp-tab-color-active:var(--cbp-tab-color-active-dark);--cbp-tab-color-selected:var(--cbp-tab-color-selected-dark);--cbp-tab-color-bg:var(--cbp-tab-color-bg-dark);--cbp-tab-color-bg-hover:var(--cbp-tab-color-bg-hover-dark);--cbp-tab-color-bg-focus:var(--cbp-tab-color-bg-focus-dark);--cbp-tab-color-bg-active:var(--cbp-tab-color-bg-active-dark);--cbp-tab-color-bg-selected:var(--cbp-tab-color-bg-selected-dark);--cbp-tab-color-border:var(--cbp-tab-color-border-dark);--cbp-tab-color-border-hover:var(--cbp-tab-color-border-hover-dark);--cbp-tab-color-border-focus:var(--cbp-tab-color-border-focus-dark);--cbp-tab-color-border-active:var(--cbp-tab-color-border-active-dark);--cbp-tab-color-border-selected:var(--cbp-tab-color-border-selected-dark);--cbp-tab-color-outline-focus:var(--cbp-tab-color-outline-focus-dark)}cbp-tab button{all:unset;display:inline-flex;gap:var(--cbp-space-2x);align-items:center;color:var(--cbp-tab-color);background-color:var(--cbp-tab-color-bg);box-sizing:border-box;min-height:var(--cbp-space-14x);padding:0 var(--cbp-space-3x);font-size:var(--cbp-font-size-heading-xs);font-weight:var(--cbp-font-weight-medium);white-space:nowrap;border-bottom:var(--cbp-border-size-xl) solid var(--cbp-tab-color-border);border-radius:var(--cbp-tab-border-radius);outline-width:var(--cbp-border-size-md);outline-style:none;outline-color:var(--cbp-button-color-outline-focus);outline-offset:calc(-1 * var(--cbp-space-1x))}cbp-tab button:hover{--cbp-tab-color:var(--cbp-tab-color-hover);--cbp-tab-color-bg:var(--cbp-tab-color-bg-hover);--cbp-tab-color-border:var(--cbp-tab-color-border-hover)}cbp-tab button[aria-selected=true]{--cbp-tab-color:var(--cbp-tab-color-selected);--cbp-tab-color-bg:var(--cbp-tab-color-bg-selected);--cbp-tab-color-border:var(--cbp-tab-color-border-selected);font-style:italic}cbp-tab button:focus{--cbp-tab-color:var(--cbp-tab-color-focus);--cbp-tab-color-bg:var(--cbp-tab-color-bg-focus);--cbp-tab-color-border:var(--cbp-tab-color-border-focus);--cbp-button-color-outline-focus:var(--cbp-tab-color-outline-focus);outline-style:solid}cbp-tab button:active{--cbp-tab-color:var(--cbp-tab-color-active);--cbp-tab-color-bg:var(--cbp-tab-color-bg-active);--cbp-tab-color-border:var(--cbp-tab-color-border-active);outline:none}cbp-tab[color=danger]{--cbp-tab-color:var(--cbp-color-danger-dark);--cbp-tab-color-dark:var(--cbp-color-danger-light);--cbp-tab-color-hover:var(--cbp-color-danger-base);--cbp-tab-color-hover-dark:var(--cbp-color-danger-lighter);--cbp-tab-color-bg-hover:var(--cbp-color-danger-lighter);--cbp-tab-color-bg-hover-dark:var(--cbp-color-danger-darker);--cbp-tab-color-border-hover:var(--cbp-color-danger-dark);--cbp-tab-color-border-hover-dark:var(--cbp-color-danger-lighter)}";const l=e;const s=o(class o extends r{constructor(){super();this.__registerHost();this.tabLoaded=c(this,"tabLoaded",7);this.tabClicked=c(this,"tabClicked",7);this.name=undefined;this.selected=undefined;this.color=undefined;this.accessibilityText=undefined;this.sx={}}handleTabClick(o=undefined){this.selected=true;this.tabClicked.emit({host:this.host,tab:this.button,name:this.name,nativeEvent:o})}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(this.host,Object.assign({},this.sx));this.selected&&this.handleTabClick()}componentDidLoad(){this.tabLoaded.emit({host:this.host,tab:this.button,parent:this.parent})}render(){return t(b,{key:"abf5445faf3fc0919dc396855adbbd4f258b8716",role:"presentation"},t("button",{key:"9c8784e1d56f2226e0ee90651017587ce4d7e565",type:"button",role:"tab",id:`${this.name}_tab`,"aria-label":this.accessibilityText,"aria-selected":this.selected?"true":"false","aria-controls":this.name,tabindex:this.selected?0:-1,ref:o=>this.button=o,onClick:o=>this.handleTabClick(o)},t("slot",{key:"ccb5e67272336a4eb7d18a803e453fec04dd49fd"})))}get host(){return this}static get style(){return l}},[4,"cbp-tab",{name:[1],selected:[516],color:[513],accessibilityText:[1,"accessibility-text"],sx:[8]}]);function p(){if(typeof customElements==="undefined"){return}const o=["cbp-tab"];o.forEach((o=>{switch(o){case"cbp-tab":if(!customElements.get(o)){customElements.define(o,s)}break}}))}const i=s;const d=p;export{i as CbpTab,d as defineCustomElement};
//# sourceMappingURL=cbp-tab.js.map