UNPKG

@cbpds/web-components

Version:
5 lines 6.34 kB
/*! * CPB Design System web components - built with Stencil */ import{p as e,H as c,h as o,c as t}from"./p-9caf8482.js";import{s as r}from"./p-9c1b2f31.js";const n=":root{--cbp-menu-item-color:var(--cbp-color-text-lightest);--cbp-menu-item-color-dark:var(--cbp-color-text-darkest);--cbp-menu-item-color-bg:transparent;--cbp-menu-item-color-bg-dark:transparent;--cbp-menu-item-color-hover:var(--cbp-color-text-darkest);--cbp-menu-item-color-hover-dark:var(--cbp-color-text-lightest);--cbp-menu-item-color-bg-hover:var(--cbp-color-interactive-secondary-lighter);--cbp-menu-item-color-bg-hover-dark:var(--cbp-color-interactive-secondary-darker);--cbp-menu-item-color-focus:var(--cbp-color-text-darkest);--cbp-menu-item-color-focus-dark:var(--cbp-color-text-lightest);--cbp-menu-item-color-bg-focus:var(--cbp-color-interactive-focus-light);--cbp-menu-item-color-bg-focus-dark:var(--cbp-color-interactive-focus-dark);--cbp-menu-item-color-active:var(--cbp-color-text-darkest);--cbp-menu-item-color-active-dark:var(---cbp-color-text-lightest);--cbp-menu-item-color-bg-active:var(--cbp-color-interactive-active-light);--cbp-menu-item-color-bg-active-dark:var(--cbp-color-interactive-active-dark);--cbp-menu-item-color-outline:var(--cbp-color-black);--cbp-menu-item-color-outline-dark:var(--cbp-color-white);--cpb-menu-item-indent:0px}[data-cbp-theme=light] cbp-menu[context*=dark] cbp-menu-item,[data-cbp-theme=dark] cbp-menu:not([context=dark-inverts]):not([context=light-always]) cbp-menu-item{--cbp-menu-item-color:var(--cbp-menu-item-color-dark);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-dark);--cbp-menu-item-color-hover:var(--cbp-menu-item-color-hover-dark);--cbp-menu-item-color-bg-hover:var(--cbp-menu-item-color-bg-hover-dark);--cbp-menu-item-color-focus:var(--cbp-menu-item-color-focus-dark);--cbp-menu-item-color-bg-focus:var(--cbp-menu-item-color-bg-focus-dark);--cbp-menu-item-color-active:var(--cbp-menu-item-color-active-dark);--cbp-menu-item-color-bg-active:var(--cbp-menu-item-color-bg-active-dark);--cbp-menu-item-color-outline:var(--cbp-menu-item-color-outline-dark)}cbp-menu-item{--cbp-button-width:100%;--cbp-button-border-radius:0;display:flex;align-items:stretch;margin-bottom:0;width:100%;height:var(--cbp-space-9x);background:var(-cbp-menu-item-color-bg);}cbp-menu-item:first-child,cbp-menu-item:first-child a,cbp-menu-item:first-child button{border-radius:var(--cbp-border-radius-softer) var(--cbp-border-radius-softer) 0 0}cbp-menu-item:last-child,cbp-menu-item:last-child a,cbp-menu-item:last-child button{border-radius:0 0 var(--cbp-border-radius-softer) var(--cbp-border-radius-softer)}cbp-menu-item cbp-button,cbp-menu-item cbp-link{display:block;width:100%;height:100%}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId),cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId){--cbp-button-gap:var(--cbp-space-1x);--cbp-link-gap:var(--cbp-space-1x);display:flex;align-items:center;justify-content:left;width:100%;height:100%;padding-block:0;padding-inline-start:calc(var(--cbp-space-3x) + var(--cpb-menu-item-indent));padding-inline-end:var(--cbp-space-3x);font-weight:var(--cbp-font-weight-regular);line-height:var(--cbp-space-5x);color:var(--cbp-menu-item-color);background:var(--cbp-menu-item-color-bg);border:0;outline-width:0;outline-style:solid;outline-color:var(--cbp-menu-item-color-outline);outline-offset:calc(var(--cbp-space-1x) * -1);text-decoration:none;letter-spacing:normal;text-transform:none}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):focus,cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):focus{--cbp-menu-item-color:var(--cbp-menu-item-color-focus);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-focus);--cbp-menu-item-color-dark:var(--cbp-menu-item-color-focus-dark);--cbp-menu-item-color-bg-dark:var(--cbp-menu-item-color-bg-focus-dark);outline-width:var(--cbp-border-size-md)}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):hover,cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):hover{--cbp-menu-item-color:var(--cbp-menu-item-color-hover);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-hover);--cbp-menu-item-color-dark:var(--cbp-menu-item-color-hover-dark);--cbp-menu-item-color-bg-dark:var(--cbp-menu-item-color-bg-hover-dark);outline:0}cbp-menu-item:not(.cbp-menu__close-btn) a:not(#fakeId):active,cbp-menu-item:not(.cbp-menu__close-btn) button:not(#fakeId):active{--cbp-menu-item-color:var(--cbp-menu-item-color-active);--cbp-menu-item-color-bg:var(--cbp-menu-item-color-bg-active);--cbp-menu-item-color-dark:var(--cbp-menu-item-color-active-dark);--cbp-menu-item-color-bg-dark:var(--cbp-menu-item-color-bg-active-dark)}cbp-menu-item[color=danger]{--cbp-menu-item-color:var(--cbp-color-danger-light);--cbp-menu-item-color-dark:var(--cbp-color-danger-base);--cbp-menu-item-color-bg-hover:var(--cbp-color-danger-light);--cbp-menu-item-color-bg-hover-dark:var(--cbp-color-danger-dark)}cbp-menu-item.cbp-menu__close-btn{width:100%;justify-content:center;font-weight:var(--cbp-font-weight-bold);background-color:var(--cbp-color-interactive-primary-base);border:0;cursor:pointer}cbp-menu-item.cbp-menu__close-btn:hover{background-color:var(--cbp-color-interactive-primary-dark)}cbp-menu-item.cbp-menu__close-btn:focus{background-color:var(--cbp-color-interactive-focus-dark)}";const i=n;const b=e(class e extends c{constructor(){super();this.__registerHost();this.indentLevel=0;this.color=undefined;this.host.slot="cbp-menu-items"}componentWillLoad(){r(this.host,{"--cpb-menu-item-indent":this.indentLevel>0?`var(--cbp-space-${this.indentLevel*2}x)`:"0px"})}componentDidLoad(){var e,c;this.menuItem=this.host.querySelector("a,button");(e=this.menuItem)===null||e===void 0?void 0:e.setAttribute("role","menuitem");(c=this.menuItem)===null||c===void 0?void 0:c.setAttribute("tabindex","-1")}render(){return o(t,{key:"c35b14f6f6203a5caaa41acbe9110d2347c0ca30",role:"presentation"},o("slot",{key:"68b2cc5660e5e74be55203fce2aa653a84006303"}))}get host(){return this}static get style(){return i}},[4,"cbp-menu-item",{indentLevel:[514,"indent-level"],color:[513]}]);function a(){if(typeof customElements==="undefined"){return}const e=["cbp-menu-item"];e.forEach((e=>{switch(e){case"cbp-menu-item":if(!customElements.get(e)){customElements.define(e,b)}break}}))}export{b as C,a as d}; //# sourceMappingURL=p-698b57d9.js.map