@coderundebug/ui-web/ui-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 r}from"./ui-tools.js";export class UiGroup extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=UiGroup.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiGroup.uiCssStyleSheet]}}UiGroup.uiCss=":host{display:flex;}:host(:not([inline])){flex-direction:column;& ::slotted(*:first-child){border-top-left-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-top-right-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-top-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-left-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-right-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:not(:first-child):not(:last-child)){border-left-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-right-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:last-child){border-bottom-left-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-bottom-right-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-bottom-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-left-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-right-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:only-child){border-style:var(--ui-group-border-style, var(--ui-border-style, solid));}} :host(:not([inline])[bar]){& ::slotted(*:first-child){border-bottom-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:not(:first-child):not(:last-child)){border-bottom-style:var(--ui-group-border-style, var(--ui-border-style, solid));}} :host([inline]){flex-direction:row;& ::slotted(*:first-child){border-top-left-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-bottom-left-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-top-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-bottom-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-left-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:not(:first-child):not(:last-child)){border-top-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-bottom-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:last-child){border-top-right-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-bottom-right-radius:var(--ui-group-border-radius, var(--ui-border-radius-large, 6px));border-top-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-bottom-style:var(--ui-group-border-style, var(--ui-border-style, solid));border-right-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:only-child){border-style:var(--ui-group-border-style, var(--ui-border-style, solid));}} :host([inline][bar]){& ::slotted(*:first-child){border-right-style:var(--ui-group-border-style, var(--ui-border-style, solid));}& ::slotted(*:not(:first-child):not(:last-child)){border-right-style:var(--ui-group-border-style, var(--ui-border-style, solid));}} ::slotted(*){margin:0 !important;border-color:var(--ui-group-border-color, var(--ui-midground, hsl(0 0% 90% / 1)));border-width:var(--ui-group-border-width, var(--ui-border-width, 1px));border-style:none;}::slotted(*:not(:defined)){display:none;}",UiGroup.uiHtml="<slot></slot>",r.createUi(UiGroup,"ui-group",import.meta.url);