@coderundebug/ui-web/ui-button-group.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as o}from"./ui-tools.js";export class UiButtonGroup extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0,slotAssignment:"manual"}),this.shadowRoot.innerHTML=UiButtonGroup.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiButtonGroup.uiCssStyleSheet],this.o=this.shadowRoot.querySelector(".base"),this.t=this.t.bind(this),this.i=this.i.bind(this),this.u=this.u.bind(this),this.l=[],this.h=0,this.p=null}get selected(){return this.h}set selected(o){this.h=o,this.p=null;for(let r=0;r<this.l.length;r++){const t=this.l[r];t.removeAttribute("selected"),r+1===o&&(t.setAttribute("selected",""),this.p=t.v)}}get selectedElement(){return this.p}connectedCallback(){this.k=new MutationObserver(this.u),this.k.observe(this,{childList:!0}),this.o.addEventListener("keydown",this.i),!1===this.hasAttribute("vertical")?this.o.setAttribute("aria-orientation","horizontal"):this.o.setAttribute("aria-orientation","vertical"),this.m()}disconnectedCallback(){this.k.disconnect(),this.k=void 0,this.o.removeEventListener("keydown",this.i),this.l.forEach((o=>{o.removeEventListener("click",this.t)})),this.l=[]}u(o,r){this.m()}t(o){this.l.forEach((o=>{o.removeAttribute("selected"),o.removeAttribute("aria-selected")})),o.currentTarget.setAttribute("selected",""),o.currentTarget.setAttribute("aria-selected","true"),this.p=o.currentTarget.v,this.h=o.currentTarget.U}i(o){if("ArrowRight"===o.key&&!1===this.hasAttribute("vertical")||"ArrowDown"===o.key&&!0===this.hasAttribute("vertical")){if(!this.shadowRoot.activeElement)return;let r=this.shadowRoot.activeElement.nextSibling;for(;r;){if(!1===r.hasAttribute("disabled")){r.focus();break}r=r.nextSibling}o.preventDefault(),o.stopPropagation()}if("ArrowLeft"===o.key&&!1===this.hasAttribute("vertical")||"ArrowUp"===o.key&&!0===this.hasAttribute("vertical")){if(!this.shadowRoot.activeElement)return;let r=this.shadowRoot.activeElement.previousSibling;for(;r;){if(!1===r.hasAttribute("disabled")){r.focus();break}r=r.previousSibling}o.preventDefault(),o.stopPropagation()}if("Home"===o.key){if(0===this.l.length)return;let r=this.l[0];for(;r;){if(!1===r.hasAttribute("disabled")){r.focus();break}r=r.nextSibling}o.preventDefault(),o.stopPropagation()}if("End"===o.key){if(0===this.l.length)return;let r=this.l[this.l.length-1];for(;r;){if(!1===r.hasAttribute("disabled")){r.focus();break}r=r.previousSibling}o.preventDefault(),o.stopPropagation()}}m(){this.o.innerHTML="";this.l.forEach((o=>{o.removeEventListener("click",this.t)})),this.l=[];let o=1;for(const r of this.children){0;const t=document.createElement("button");!0===r.hasAttribute("success")&&t.setAttribute("success",""),!0===r.hasAttribute("warning")&&t.setAttribute("warning",""),!0===r.hasAttribute("danger")&&t.setAttribute("danger",""),!0===r.hasAttribute("info")&&t.setAttribute("info",""),!0===r.hasAttribute("highlight")&&t.setAttribute("highlight",""),!0===r.hasAttribute("disabled")&&t.setAttribute("disabled",""),t.setAttribute("role","tab");const i=document.createElement("slot");t.appendChild(i),this.o.appendChild(t),i.assign(r),t.v=r,t.U=o,o===this.h&&(t.setAttribute("selected",""),this.p=t.v),o++,t.addEventListener("click",this.t),this.l.push(t)}}}UiButtonGroup.uiCss=':host{display:inline-flex;justify-content:center;max-width:100%;pointer-events:none;--ui-button-group-background:var(--ui-button-group-default-background, var(--ui-default-background, hsl(0 0% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-default-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-button-group-font-size:var(--ui-button-group-normal-font-size, var(--ui-font-size-normal, 16px));--ui-button-group-padding:var(--ui-button-group-normal-padding, 8px 16px);--ui-button-group-icon-size:var(--ui-button-group-normal-icon-size, 16px);--ui-button-group-border-radius:var(--ui-button-group-border-normal-radius, var(--ui-border-radius-normal, 4px));--ui-button-group-box-radius:var(--ui-button-group-box-normal-radius, 6px);}.base{display:flex;flex-direction:row;--ui-bg-br:var(--ui-button-group-border-radius);--ui-bg-bs:var(--ui-button-group-border-style, solid);--ui-bg-bw:var(--ui-button-group-border-width, var(--ui-border-width, 1px));--ui-bg-bc:var(--ui-button-group-border-color, var(--ui-button-group-foreground));min-width:0;min-height:24px;padding:0;box-sizing:content-box;box-shadow:var(--ui-button-group-box-shadow, none);}button{display:grid;align-items:center;justify-items:center;pointer-events:all;font-family:inherit;font-size:var(--ui-button-group-font-size);font-weight:var(--ui-button-group-font-weight, var(--ui-font-weight-bold, 600));line-height:150%;text-shadow:inherit;text-overflow:inherit;user-select:none;-webkit-user-select:none;border-style:none;box-shadow:none;outline:none;padding:var(--ui-button-group-padding);background:var(--ui-button-group-background);color:var(--ui-button-group-foreground);--ui-icon-primary-color:var(--ui-button-group-foreground);transition:filter var(--ui-animation-duration-default, 200ms) ease-in-out;-webkit-tap-highlight-color:transparent;}button{border:none;border-radius:0;}::slotted([slot="icon"]){padding:var(--ui-button-group-icon-padding);height:var(--ui-button-group-icon-size);width:var(--ui-button-group-icon-size);}:host(:not([vertical])){& .base{& button:first-child{border-start-start-radius:var(--ui-bg-br);border-end-start-radius:var(--ui-bg-br);}& button:last-child{border-start-end-radius:var(--ui-bg-br);border-end-end-radius:var(--ui-bg-br);}}}:host([vertical]){& .base{& button:first-child{border-start-start-radius:var(--ui-bg-br);border-start-end-radius:var(--ui-bg-br);}& button:last-child{border-end-end-radius:var(--ui-bg-br);border-end-start-radius:var(--ui-bg-br);}}}:host([outline]:not([vertical]):not([boxed])), :host([bar]:not([vertical]):not([boxed])){& .base{& button:not(:last-child){border-inline-end-style:var(--ui-bg-bs);border-inline-end-width:var(--ui-bg-bw);border-inline-end-color:var(--ui-bg-bc);}& button:not([selected]):has(+ button[selected]){border-inline-end-width:0;}& button[selected]:not(:first-child){border-inline-start-style:var(--ui-bg-bs);border-inline-start-width:var(--ui-bg-bw);border-inline-start-color:var(--ui-bg-bc);}}}:host([outline]:not([vertical]):not([boxed])){& .base{& button{border-block-start-style:var(--ui-bg-bs);border-block-end-style:var(--ui-bg-bs);border-block-start-width:var(--ui-bg-bw);border-block-start-color:var(--ui-bg-bc);border-block-end-width:var(--ui-bg-bw);border-block-end-color:var(--ui-bg-bc);}& button:first-child{border-inline-start-style:var(--ui-bg-bs);border-inline-start-width:var(--ui-bg-bw);border-inline-start-color:var(--ui-bg-bc);}& button:last-child{border-inline-end-style:var(--ui-bg-bs);border-inline-end-width:var(--ui-bg-bw);border-inline-end-color:var(--ui-bg-bc);}}}:host([outline][vertical]:not([boxed])), :host([bar][vertical]:not([boxed])){& .base{& button:not(:last-child){border-block-end-style:var(--ui-bg-bs);border-block-end-width:var(--ui-bg-bw);border-block-end-color:var(--ui-bg-bc);}& button:not([selected]):has(+ button[selected]){border-block-end-width:0;}& button[selected]:not(:first-child){border-block-start-style:var(--ui-bg-bs);border-block-start-width:var(--ui-bg-bw);border-block-start-color:var(--ui-bg-bc);}}}:host([outline][vertical]:not([boxed])){& .base{& button{border:none;border-radius:0;border-inline-start-style:var(--ui-bg-bs);border-inline-end-style:var(--ui-bg-bs);border-inline-start-width:var(--ui-bg-bw);border-inline-start-color:var(--ui-bg-bc);border-inline-end-width:var(--ui-bg-bw);border-inline-end-color:var(--ui-bg-bc);}& button:first-child{border-start-start-radius:var(--ui-bg-br);border-start-end-radius:var(--ui-bg-br);border-block-start-style:var(--ui-bg-bs);border-block-start-width:var(--ui-bg-bw);border-block-start-color:var(--ui-bg-bc);}& button:last-child{border-end-end-radius:var(--ui-bg-br);border-end-start-radius:var(--ui-bg-br);border-block-end-style:var(--ui-bg-bs);border-block-end-width:var(--ui-bg-bw);border-block-end-color:var(--ui-bg-bc);}}}:host([pill]:not([vertical])) .base{--ui-bg-br:10rem;}:host([success]), button[success]{--ui-button-group-background:var(--ui-button-group-success-background, var(--ui-success-background, hsl(104 50% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-success-foreground, var(--ui-success-foreground, hsl(104 50% 30% / 1)));}:host([warning]), button[warning]{--ui-button-group-background:var(--ui-button-group-warning-background, var(--ui-warning-background, hsl(45 50% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-warning-foreground, var(--ui-warning-foreground, hsl(45 50% 30% / 1)));}:host([danger]), button[danger]{--ui-button-group-background:var(--ui-button-group-danger-background, var(--ui-danger-background, hsl(0 50% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-danger-foreground, var(--ui-danger-foreground, hsl(0 50% 30% / 1)));}:host([info]), button[info]{--ui-button-group-background:var(--ui-button-group-info-background, var(--ui-info-background, hsl(190 50% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-info-foreground, var(--ui-info-foreground, hsl(190 90% 30% / 1)));}:host([highlight]), button[highlight]{--ui-button-group-background:var(--ui-button-group-highlight-background, var(--ui-highlight-background, hsl(302 50% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-highlight-foreground, var(--ui-highlight-foreground, hsl(302 50% 30% / 1)));}:host([selected]), :host([success]) button[selected], :host([warning]) button[selected], :host([danger]) button[selected], :host([info]) button[selected], :host([highlight]) button[selected], button[selected]{--ui-button-group-background:var(--ui-button-group-selected-background, var(--ui-selected-background, hsl(215 50% 90% / 1)));--ui-button-group-foreground:var(--ui-button-group-selected-foreground, var(--ui-selected-foreground, hsl(215 50% 30% / 1)));}button[selected]{outline-style:var(--ui-button-group-outline-style, solid);outline-width:var(--ui-button-group-outline-width, 2px);outline-offset:calc(var(--ui-button-group-outline-width, 2px) * -1);outline-color:var(--ui-button-group-foreground);}button{background:var(--ui-button-group-background);color:var(--ui-button-group-foreground);--ui-icon-primary-color:var(--ui-button-group-foreground);}:host([blank]){& button:not([selected]){background-color:transparent;color:var(--ui-button-group-foreground);--ui-icon-primary-color:var(--ui-button-group-foreground);transition:background-color var(--ui-animation-duration-default, 200ms) ease-in-out;}& button:not([disabled]):hover{background-color:var(--ui-button-group-background);color:var(--ui-button-group-foreground);--ui-icon-primary-color:var(--ui-button-group-foreground);}& button:not([disabled]):active, button:focus-visible{background-color:var(--ui-button-group-background);color:var(--ui-button-group-foreground);}} button:not([selected]){cursor:pointer;}:host([fill-width]) .base{width:100%;justify-content:center;}:host([fill-width]) button{flex-grow:1;}:host([small]){--ui-button-group-font-size:var(--ui-button-group-small-font-size, var(--ui-font-size-small, 12px));--ui-button-group-padding:var(--ui-button-group-small-padding, 4px 8px);--ui-button-group-icon-padding:var(--ui-button-group-small-icon-padding, 4px 0);--ui-button-group-icon-size:var(--ui-button-group-small-icon-size, 12px);--ui-button-group-border-radius:var(--ui-button-group-border-small-radius, var(--ui-border-radius-small, 3px));--ui-button-group-box-radius:var(--ui-button-group-box-small-radius, 5px;);}:host([large]){--ui-button-group-font-size:var(--ui-button-group-large-font-size, var(--ui-font-size-large, 24px));--ui-button-group-padding:var(--ui-button-group-large-padding, 12px 24px);--ui-button-group-icon-padding:var(--ui-button-group-large-icon-padding, 4px 0);--ui-button-group-icon-size:var(--ui-button-group-large-icon-size, 24px);--ui-button-group-border-radius:var(--ui-button-group-border-large-radius, var(--ui-border-radius-large, 6px));--ui-button-group-box-radius:var(--ui-button-group-box-large-radius, 8px);}:host([vertical]){& .base{flex-direction:column;}} :host([boxed]){& .base{gap:var(--ui-button-group-box-gap, 4px);border-radius:var(--ui-button-group-box-radius);border-style:var(--ui-bg-bs);border-width:var(--ui-bg-bw);border-color:var(--ui-bg-bc);padding:var(--ui-button-group-box-padding, 4px);}& button{border-radius:var(--ui-bg-br);}} :host([boxed][pill]) .base{border-radius:10rem;}button[disabled]{cursor:not-allowed;filter:brightness(75%);}button:not([selected]):focus-visible{outline-style:none;background:var(--ui-button-group-foreground);color:var(--ui-button-group-background);--ui-icon-primary-color:var(--ui-button-group-background);}button[selected]:focus-visible{outline-offset:-3px;outline-style:solid;outline-width:3px;outline-color:var(--ui-bg-sf);}:host(:not([blank])) button:not([disabled]):hover{filter:brightness(85%);}:host(:not([blank])) button:not([disabled]):active{filter:brightness(65%);}button:not([selected]):not([disabled]):active{filter:brightness(65%);}::slotted(*:not(:defined)){display:none;}@media (forced-colors:active) or (prefers-contrast:more){button{border-style:solid;border-width:2px;border-color:var(--ui-button-group-foreground);box-shadow:none;}.base{--ui-bg-bs:solid;--ui-bg-bw:2px;--ui-bg-bc:var(--ui-button-group-foreground);}} @media (prefers-reduced-motion){button{transition:none;}} ',UiButtonGroup.uiHtml='<div class="base" role="tablist"></div> ',o.createUi(UiButtonGroup,"ui-button-group",import.meta.url);