FileMaster

Edit File: sc-pill-option2.js

import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";const scPillOptionCss=".sc-pill-option__wrapper{display:flex;flex-wrap:wrap;gap:var(--sc-pill-option-gap, var(--sc-spacing-x-small))}.sc-pill-option__button{display:inline-block;line-height:1;text-align:center;font-size:var(--sc-pill-option-font-size, var(--sc-font-size-medium));font-weight:var(--sc-pill-option-font-weight, var(--sc-font-weight-semibold));border-color:var(--sc-pill-option-border-color, var(--sc-color-gray-300));border-style:var(--sc-pill-option-border-style, solid);border-width:var(--sc-pill-option-border-width, 1px);color:var(--sc-pill-option-text-color, var(--sc-color-gray-700));background:var(--sc-pill-option-background-color, transparent);border-radius:var(--sc-pill-option-border-radius, var(--sc-border-radius-medium));padding-top:var(--sc-pill-option-padding-top, var(--sc-spacing-small));padding-bottom:var(--sc-pill-option-padding-bottom, var(--sc-spacing-small));padding-left:var(--sc-pill-option-padding-left, var(--sc-spacing-medium));padding-right:var(--sc-pill-option-padding-right, var(--sc-spacing-medium));transition:border var(--sc-transition-medium) ease;cursor:pointer;position:relative;transition:var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow, var(--sc-input-transition, var(--sc-transition-medium)) opacity}.sc-pill-option__button::-moz-focus-inner{border:0}.sc-pill-option__button--disabled{text-decoration:line-through}.sc-pill-option__button--selected,.sc-pill-option__button--selected:focus,.sc-pill-option__button--selected:hover,.sc-pill-option__button--selected:active{background-color:var(--sc-pill-option-active-background-color, var(--sc-color-primary-500));border-color:var(--sc-pill-option-active-background-color, var(--sc-color-primary-500));color:var(--sc-pill-option-active-text-color, white);box-shadow:var(--sc-shadow-small)}.sc-pill-option__button:focus-visible{outline-color:var(--sc-pill-option-active-background-color, var(--sc-color-primary-500));outline-offset:4px;outline-width:2px}.sc-pill-option__button:hover:not(.sc-pill-option__button--selected),.sc-pill-option__button:focus:not(.sc-pill-option__button--selected),.sc-pill-option__button:active:not(.sc-pill-option__button--selected){background-color:var(--sc-button-default-hover-background-color, var(--sc-pill-option-background-color, var(--sc-color-white)));border-color:var(--sc-pill-option-active-background-color, var(--sc-button-default-focus-border-color, var(--primary-background)));color:var(--sc-pill-option-text-color, var(--sc-color-gray-700))}",ScPillOptionStyle0=scPillOptionCss,ScPillOption=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.isSelected=void 0,this.isUnavailable=void 0}render(){return h("button",{key:"177e3e0cb0a5492da542b0b275ce30c85e497d4e",class:{"sc-pill-option__button":!0,"sc-pill-option__button--disabled":this.isUnavailable,"sc-pill-option__button--selected":this.isSelected},tabindex:"0",role:"radio","aria-checked":this.isSelected?"true":"false","aria-disabled":this.isUnavailable?"true":"false"},h("slot",{key:"82b98487404bdee17e334101bfa4ae7b5163e112"}))}static get style(){return ScPillOptionStyle0}},[4,"sc-pill-option",{isSelected:[4,"is-selected"],isUnavailable:[4,"is-unavailable"]}]);function defineCustomElement(){"undefined"!=typeof customElements&&["sc-pill-option"].forEach((o=>{"sc-pill-option"===o&&(customElements.get(o)||customElements.define(o,ScPillOption))}))}export{ScPillOption as S,defineCustomElement as d};

Back