@crowdstrike/glide-core 0.6.2 → 0.6.3

package/dist/button.styles.js

@@ -38,7 +38,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       /* We remove spacing using negative margin when an icon is present to help with empty space balancing */
-      &.has-prefx,
+      &.has-prefix,
       ::slotted([slot='prefix']) {
         margin-inline-start: -0.125rem;
       }

package/dist/checkbox-group.d.ts

@@ -22,6 +22,7 @@ export default class GlideCoreCheckboxGroup extends LitElement {
     hideLabel: boolean;
     label?: string;
     name?: string;
+    privateSplit?: 'left' | 'middle';
     get required(): boolean;
     set required(isRequired: boolean);
     summary?: string;

package/dist/checkbox-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,l=arguments.length,s=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,i,s):r(t,i))||s);return l>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}checkValidity(){return this.isCheckingValidity=!0,this.#o.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox]),this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal"}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e?this.#o.setValidity({valueMissing:!0}," ",this.#s.value):this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){this.#t.at(0)?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#s)}><glide-core-label ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#a}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${this.#d}" @slotchange="${this.#c}" ${ref(this.#l)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#o.reportValidity()}constructor(){super(),this.hideLabel=!1,this.value=[],this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#s=createRef(),this.#l=createRef(),this.#e=!1,this.#i=!1,this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#s;#l;#o;#e;#i;get#t(){return this.#l.value?this.#l.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#a(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#d(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#c(){owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,l=arguments.length,s=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(s=(l<3?r(s):l>3?r(t,i,s):r(t,i))||s);return l>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}checkValidity(){return this.isCheckingValidity=!0,this.#o.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox]),this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal"}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e?this.#o.setValidity({valueMissing:!0}," ",this.#s.value):this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){this.#t.at(0)?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div class="component" data-test="component" ${ref(this.#s)}><glide-core-label split="${ifDefined(this.privateSplit??void 0)}" ?hide="${this.hideLabel}" ?disabled="${this.disabled}" ?error="${this.#a}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label id="label">${this.label}</label><div aria-labelledby="label description" role="group" slot="control"><slot class="checkboxes" @change="${this.#d}" @slotchange="${this.#c}" ${ref(this.#l)}></slot></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#o.reportValidity()}constructor(){super(),this.hideLabel=!1,this.value=[],this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#s=createRef(),this.#l=createRef(),this.#e=!1,this.#i=!1,this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#s;#l;#o;#e;#i;get#t(){return this.#l.value?this.#l.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#a(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#d(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#c(){owSlot(this.#l.value),owSlotType(this.#l.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({type:Array})],GlideCoreCheckboxGroup.prototype,"value",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox-group.styles.js

@@ -7,7 +7,7 @@ import{css}from"lit";export default[css`
       }
     }
 
-    glide-core-label::part(tooltip-and-label-container) {
+    glide-core-label::part(tooltips-and-label) {
       align-items: flex-start;
     }
 

package/dist/checkbox.d.ts

@@ -27,6 +27,7 @@ export default class GlideCoreCheckbox extends LitElement {
     label?: string;
     orientation: 'horizontal' | 'vertical';
     name?: string;
+    privateSplit?: 'left' | 'middle';
     privateVariant?: 'minimal';
     required: boolean;
     summary?: string;

package/dist/checkbox.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(a<3?r(s):a>3?r(t,i,s):r(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{svg}from"lit/static-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=svg`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="indeterminate-icon"><rect x="0.5" y="0.5" width="13" height="13" rx="3.5"/><path d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z" fill="currentColor"/></svg>`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get form(){return this.#e.form}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}click(){this.#t.value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#e.setValidity({valueMissing:!0}," ",this.#t.value):this.#e.setValidity({})),this.#e.validity}focus(e){this.#t.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">${when("minimal"===this.privateVariant,(()=>html`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#o}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div>${this.label}</label>`),(()=>html`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#o}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${this.#o}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-label>`))}</div>`}reportValidity(){return this.#e.reportValidity()}setValidity(e,t,i){return this.#e.setValidity(e,t,i)}get willValidate(){return this.#e.willValidate}updated(){this.#t.value&&(this.#t.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#t=createRef(),this.#i=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#t;#e;#i;get#o(){return"minimal"===this.privateVariant?!this.validity.valid:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#r(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,s=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(s=(a<3?r(s):a>3?r(t,i,s):r(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import ow from"./library/ow.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`<svg width="14" height="14" viewBox="0 0 14 14" fill="none" class="indeterminate-icon"><rect x="0.5" y="0.5" width="13" height="13" rx="3.5"/><path d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z" fill="currentColor"/></svg>`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get form(){return this.#e.form}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}click(){this.#t.value?.click()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}get validity(){return"minimal"===this.privateVariant||(this.required&&!this.checked?this.#e.setValidity({valueMissing:!0}," ",this.#t.value):this.#e.setValidity({})),this.#e.validity}focus(e){this.#t.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">${when("minimal"===this.privateVariant,(()=>html`<label class="label-and-input-and-checkbox" part="private-label-and-input-and-checkbox"><div class="input-and-checkbox"><input aria-invalid="${this.#o}" data-test="input" type="checkbox" .checked="${this.checked}" .inert="${this.internallyInert}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div>${this.label}</label>`),(()=>html`<glide-core-label orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#o}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="input-and-checkbox" slot="control"><input aria-describedby="summary description" aria-invalid="${this.#o}" data-test="input" id="input" type="checkbox" .checked="${this.checked}" ?disabled="${this.disabled}" ?required="${this.required}" @change="${this.#r}" ${ref(this.#t)}><div class="${classMap({checkbox:!0,disabled:this.disabled,error:this.#o})}"><div class="checked-icon">${checkedIcon}</div>${indeterminateIcon}</div></div><div id="summary" slot="summary">${this.summary}</div><slot id="description" name="description" slot="description"></slot></glide-core-label>`))}</div>`}reportValidity(){return this.#e.reportValidity()}setValidity(e,t,i){return this.#e.setValidity(e,t,i)}get willValidate(){return this.#e.willValidate}updated(){ow(this.#t.value,ow.object.instanceOf(HTMLInputElement)),this.#t.value.indeterminate=this.indeterminate}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.required=!1,this.value="",this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#t=createRef(),this.#i=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#t;#e;#i;get#o(){return"minimal"===this.privateVariant?!this.validity.valid:this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#r(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,this.dispatchEvent(new Event(e.type,e))}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -29,6 +29,9 @@ when browsers support them.
 
     .input-and-checkbox {
       block-size: 0.875rem;
+
+      /* Prevent shrinkage when the summary wraps. */
+      flex-shrink: 0;
       inline-size: 0.875rem;
       position: relative;
     }

package/dist/dropdown.d.ts

@@ -29,6 +29,7 @@ export default class GlideCoreDropdown extends LitElement {
     open: boolean;
     orientation: 'horizontal' | 'vertical';
     placeholder?: string;
+    privateSplit?: 'left' | 'middle';
     readonly: boolean;
     selectAll: boolean;
     get size(): 'small' | 'large';

package/dist/dropdown.js

@@ -1 +1 @@
-var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{svg}from"lit/static-html.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get size(){return this.#e}set size(e){if(this.#e=e,this.#t)for(const t of this.#t)t.privateSize=e}get multiple(){return this.#i}set multiple(e){const t=this.#i&&!e,i=!this.#i&&e;this.#i=e;for(const i of this.#l)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#o=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#o}set value(e){this.#o=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#l)this.#s=!0,t.selected=e.some((e=>e&&e===t.value));this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}get selectedOptions(){return this.#l.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#l.findLast((e=>e.selected))}get isAllSelected(){return this.#l.filter((({selected:e})=>e)).length===this.#l.length}get isSomeSelected(){return this.#l.some((({selected:e})=>e))}get activeOption(){return this.#t?.find((({privateActive:e})=>e))}get internalLabel(){return this.isFilterable||0!==this.selectedOptions.length?this.multiple||this.isFilterable||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}checkValidity(){return this.isCheckingValidity=!0,this.#n.checkValidity()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#r=super.createRenderRoot(),this.#r}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#d),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){owSlotType(this.#c.value,[GlideCoreDropdownOption,Text])}focus(){this.isFilterable?this.#p.value?.focus():this.#h.value?.focus()}get form(){return this.#n.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#n.setValidity({valueMissing:!0}," ",this.#p.value):this.#n.setValidity({}),this.#n.validity}get willValidate(){return this.#n.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#d)}formResetCallback(){for(const e of this.#l){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#l.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#o=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#u}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#v}" @keydown="${this.#m}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#u,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#f}" @mousedown="${this.#g}"><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#b)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#E-1})}" data-test="tag-container" data-test-hidden="${i>this.#E-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#w.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="${classMap({input:!0,selection:Boolean(this.selectedOptions.at(0)),single:!this.multiple})}" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":this.selectedOptions.at(-1)?.label??""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#y}" @keydown="${this.#O}" ${ref(this.#p)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))} ${when(this.selectedOptions.length>this.#E,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#E} </span>more</div>`))} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>svg`<svg aria-label="${this.#A.term("open")}" class="${classMap({"caret-icon":!0,disabled:this.disabled,readonly:this.readonly})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="${classMap({options:!0,visible:this.open&&!this.disabled&&!this.isEveryOptionFilteredOut})}" data-test="options" data-test-visible="${this.open&&!this.disabled&&!this.isEveryOptionFilteredOut}" id="options" role="listbox" @focusin="${this.#S}" @mousedown="${this.#C}" @mouseover="${this.#R}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#A.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${this.#D}" ${ref(this.#$)}></glide-core-dropdown-option><slot @private-selected-change="${this.#G}" @private-value-change="${this.#_}" @slotchange="${this.#k}" ${ref(this.#c)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#n.reportValidity()}constructor(){super(),this.disabled=!1,this.hideLabel=!1,this.open=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isCheckingValidity=!1,this.isEveryOptionFilteredOut=!1,this.isFilterable=!1,this.isFiltering=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#c=createRef(),this.#p=createRef(),this.#s=!1,this.#I=!1,this.#i=!1,this.#F=!1,this.#x=!1,this.#A=new LocalizeController(this),this.#$=createRef(),this.#e="large",this.#E=3,this.#b=createRef(),this.#o=[],this.#a=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?(this.open=!1,this.ariaActivedescendant=""):this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1,this.ariaActivedescendant="")},this.#d=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#n=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#h;#c;#p;#n;#s;#I;#i;#F;#x;#A;#$;#r;#e;#E;#b;#o;#a;#d;get#l(){return this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#t(){const e=this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#$.value)return[this.#$.value,...e]}get#V(){return this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#L(){const e=this.#c.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#$.value&&!this.#$.value.hidden&&e?[this.#$.value,...e]:e}#M(){if(this.#t)for(const e of this.#t)e.privateActive=!1}get#u(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#k(){if(owSlotType(this.#c.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#l.length>10,this.#t)for(const e of this.#t)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#L?.at(0);this.lastSelectedOption?(this.#M(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#$.value&&(this.#I=!0,this.#$.value.selected=this.isAllSelected,this.#$.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.multiple?this.#o=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#o=[this.lastSelectedOption.value]),this.requestUpdate()}#v(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.shadowRoot?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#F&&(this.open=!1,this.ariaActivedescendant="")}#m(e){if(this.disabled||this.readonly)return;if("Escape"===e.key)return this.open=!1,this.ariaActivedescendant="",void this.focus();const t=e.target===this.#h.value||e.target===this.#p.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),this.open=!0,void(this.ariaActivedescendant=this.activeOption.id);if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.#x=!0,"Enter"===e.key)return void(this.activeOption.selected=!this.activeOption?.selected);if(" "===e.key&&!this.isFilterable)return void(this.activeOption.selected=!this.activeOption?.selected)}const t=this.#L?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#L&&"number"==typeof t){e.preventDefault();const i=this.#L.at(t-1);return void(i&&0!==t&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#L&&"number"==typeof t){e.preventDefault();const i=this.#L.at(t+1);return void(i&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#L){e.preventDefault();const t=this.#L.at(0);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#L){e.preventDefault();const t=this.#L.at(-1);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}}}}#f(e){this.disabled||this.readonly||(this.#F?this.#F=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#x&&this.open?(this.open=!1,this.ariaActivedescendant=""):!this.open&&0!==e.detail&&this.activeOption&&(this.open=!0,this.ariaActivedescendant=this.activeOption.id))}#g(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#y(){if(this.#p.value&&this.activeOption){this.open=!0,this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#p.value.value.trim();for(const e of this.#l)e.hidden=!e.label?.toLowerCase().includes(this.#p.value?.value.toLowerCase().trim());const e=this.#V?.at(0);e&&this.activeOption?.hidden&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=e.id),this.isEveryOptionFilteredOut=!this.#V||0===this.#V.length}}#O(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#E-1)).at(-1);t&&"Backspace"===e.key&&this.multiple&&this.#p.value&&0===this.#p.value.selectionStart&&(t.selected=!1)}#S(e){e.target instanceof GlideCoreDropdownOption&&(this.#M(),e.target.privateActive=!0)}#C(e){this.isFilterable&&e.preventDefault()}#R(e){if(e.target instanceof GlideCoreDropdownOption&&this.#L){this.#M(),e.target.privateActive=!0;for(const e of this.#L)e.privateActive&&(this.ariaActivedescendant=e.id)}}#G(e){if(this.#$.value&&e.target!==this.#$.value&&(this.#I=!0,this.#$.value.selected=this.isAllSelected,this.#$.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.isFilterable&&this.#p.value){this.#p.value.value="",this.isFiltering=!1;for(const e of this.#l)e.hidden=!1}e.target instanceof GlideCoreDropdownOption&&(this.multiple?(this.#o=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#s||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))):!this.multiple&&e.target.selected&&(this.#o=e.target.value?[e.target.value]:[],this.open=!1,this.ariaActivedescendant="",this.focus(),this.isFilterable&&this.#p.value&&(this.isFiltering=!1),this.#s||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))))),this.requestUpdate()}#_(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#o=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#o=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#o=e.target.value?[e.target.value]:[])}#D(){if(this.#I)return void(this.#I=!1);this.#s=!0;const e=this.isAllSelected;for(const t of this.#l)t.selected=!e;this.#s=!1,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}async#w(e){this.#F=!0;for(const t of this.#l)t.id===e&&(t.selected=!1,this.#o=this.value.filter((e=>e!==t.value)));const t=this.#b.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus()}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isEveryOptionFilteredOut",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;
+var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{svg}from"lit/static-html.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get size(){return this.#e}set size(e){if(this.#e=e,this.#t)for(const t of this.#t)t.privateSize=e}get multiple(){return this.#i}set multiple(e){const t=this.#i&&!e,i=!this.#i&&e;this.#i=e;for(const i of this.#l)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#o=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#o}set value(e){this.#o=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#l)this.#s=!0,t.selected=e.some((e=>e&&e===t.value));this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}get selectedOptions(){return this.#l.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#l.findLast((e=>e.selected))}get isAllSelected(){return this.#l.filter((({selected:e})=>e)).length===this.#l.length}get isSomeSelected(){return this.#l.some((({selected:e})=>e))}get activeOption(){return this.#t?.find((({privateActive:e})=>e))}get internalLabel(){return this.isFilterable||0!==this.selectedOptions.length?this.multiple||this.isFilterable||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}checkValidity(){return this.isCheckingValidity=!0,this.#n.checkValidity()}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#a,{capture:!0})}createRenderRoot(){return this.#r=super.createRenderRoot(),this.#r}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#d),document.removeEventListener("click",this.#a,{capture:!0})}firstUpdated(){owSlotType(this.#p.value,[GlideCoreDropdownOption,Text])}focus(){this.isFilterable?this.#c.value?.focus():this.#h.value?.focus()}get form(){return this.#n.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#n.setValidity({valueMissing:!0}," ",this.#c.value):this.#n.setValidity({}),this.#n.validity}get willValidate(){return this.#n.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#d)}formResetCallback(){for(const e of this.#l){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#l.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#o=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><glide-core-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#u}" ?hide="${this.hideLabel}" ?required="${this.required}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#v}" @keydown="${this.#f}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#u,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#m}" @mousedown="${this.#g}"><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#b)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#E-1})}" data-test="tag-container" data-test-hidden="${i>this.#E-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#w.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="${classMap({input:!0,selection:Boolean(this.selectedOptions.at(0)),single:!this.multiple})}" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":this.selectedOptions.at(-1)?.label??""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#y}" @keydown="${this.#O}" ${ref(this.#c)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))} ${when(this.selectedOptions.length>this.#E,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#E} </span>more</div>`))} <button aria-hidden="${this.isFilterable}" aria-expanded="${this.open}" aria-haspopup="listbox" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>svg`<svg aria-label="${this.#A.term("open")}" class="${classMap({"caret-icon":!0,disabled:this.disabled,readonly:this.readonly})}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div><div aria-labelledby="${this.isFilterable?"input":"button"}" class="${classMap({options:!0,visible:this.open&&!this.disabled&&!this.isEveryOptionFilteredOut})}" data-test="options" data-test-visible="${this.open&&!this.disabled&&!this.isEveryOptionFilteredOut}" id="options" role="listbox" @focusin="${this.#S}" @mousedown="${this.#C}" @mouseover="${this.#D}"><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#A.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" @private-selected-change="${this.#R}" ${ref(this.#$)}></glide-core-dropdown-option><slot @private-selected-change="${this.#G}" @private-value-change="${this.#_}" @slotchange="${this.#k}" ${ref(this.#p)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-label></div>`}reportValidity(){return this.#n.reportValidity()}constructor(){super(),this.disabled=!1,this.hideLabel=!1,this.open=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isCheckingValidity=!1,this.isEveryOptionFilteredOut=!1,this.isFilterable=!1,this.isFiltering=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#p=createRef(),this.#c=createRef(),this.#s=!1,this.#I=!1,this.#i=!1,this.#F=!1,this.#x=!1,this.#A=new LocalizeController(this),this.#$=createRef(),this.#e="large",this.#E=3,this.#b=createRef(),this.#o=[],this.#a=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?(this.open=!1,this.ariaActivedescendant=""):this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1,this.ariaActivedescendant="")},this.#d=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#n=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#h;#p;#c;#n;#s;#I;#i;#F;#x;#A;#$;#r;#e;#E;#b;#o;#a;#d;get#l(){return this.#p.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#t(){const e=this.#p.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#$.value)return[this.#$.value,...e]}get#V(){return this.#p.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#L(){const e=this.#p.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#$.value&&!this.#$.value.hidden&&e?[this.#$.value,...e]:e}#M(){if(this.#t)for(const e of this.#t)e.privateActive=!1}get#u(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#k(){if(owSlotType(this.#p.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#l.length>10,this.#t)for(const e of this.#t)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#L?.at(0);this.lastSelectedOption?(this.#M(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#$.value&&(this.#I=!0,this.#$.value.selected=this.isAllSelected,this.#$.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.multiple?this.#o=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#o=[this.lastSelectedOption.value]),this.requestUpdate()}#v(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.shadowRoot?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#F&&(this.open=!1,this.ariaActivedescendant="")}#f(e){if(this.disabled||this.readonly)return;if("Escape"===e.key)return this.open=!1,this.ariaActivedescendant="",void this.focus();const t=e.target===this.#h.value||e.target===this.#c.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),this.open=!0,void(this.ariaActivedescendant=this.activeOption.id);if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.#x=!0,"Enter"===e.key)return void(this.activeOption.selected=!this.activeOption?.selected);if(" "===e.key&&!this.isFilterable)return void(this.activeOption.selected=!this.activeOption?.selected)}const t=this.#L?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#L&&"number"==typeof t){e.preventDefault();const i=this.#L.at(t-1);return void(i&&0!==t&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#L&&"number"==typeof t){e.preventDefault();const i=this.#L.at(t+1);return void(i&&(this.#M(),i.privateActive=!0,this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#L){e.preventDefault();const t=this.#L.at(0);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#L){e.preventDefault();const t=this.#L.at(-1);return void(t&&(this.#M(),t.privateActive=!0,this.ariaActivedescendant=t.id))}}}}#m(e){this.disabled||this.readonly||(this.#F?this.#F=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#x&&this.open?(this.open=!1,this.ariaActivedescendant=""):!this.open&&0!==e.detail&&this.activeOption&&(this.open=!0,this.ariaActivedescendant=this.activeOption.id))}#g(e){e.target instanceof GlideCoreTag||!this.isFilterable?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#y(){if(ow(this.#c.value,ow.object.instanceOf(HTMLInputElement)),this.activeOption){this.open=!0,this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#c.value.value.trim();for(const e of this.#l)e.hidden=!e.label?.toLowerCase().includes(this.#c.value?.value.toLowerCase().trim());const e=this.#V?.at(0);e&&this.activeOption?.hidden&&(this.#M(),e.privateActive=!0,this.ariaActivedescendant=e.id),this.isEveryOptionFilteredOut=!this.#V||0===this.#V.length}}#O(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#E-1)).at(-1);t&&"Backspace"===e.key&&this.multiple&&this.#c.value&&0===this.#c.value.selectionStart&&(t.selected=!1)}#S(e){e.target instanceof GlideCoreDropdownOption&&(this.#M(),e.target.privateActive=!0)}#C(e){this.isFilterable&&e.preventDefault()}#D(e){if(e.target instanceof GlideCoreDropdownOption&&this.#L){this.#M(),e.target.privateActive=!0;for(const e of this.#L)e.privateActive&&(this.ariaActivedescendant=e.id)}}#G(e){if(this.#$.value&&e.target!==this.#$.value&&(this.#I=!0,this.#$.value.selected=this.isAllSelected,this.#$.value.privateIndeterminate=this.isSomeSelected&&!this.isAllSelected),this.isFilterable&&this.#c.value){this.#c.value.value="",this.isFiltering=!1;for(const e of this.#l)e.hidden=!1}e.target instanceof GlideCoreDropdownOption&&(this.multiple?(this.#o=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#s||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))):!this.multiple&&e.target.selected&&(this.#o=e.target.value?[e.target.value]:[],this.open=!1,this.ariaActivedescendant="",this.focus(),this.isFilterable&&this.#c.value&&(this.isFiltering=!1),this.#s||(this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))))),this.requestUpdate()}#_(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#o=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#o=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#o=e.target.value?[e.target.value]:[])}#R(){if(this.#I)return void(this.#I=!1);this.#s=!0;const e=this.isAllSelected;for(const t of this.#l)t.selected=!e;this.#s=!1,this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}async#w(e){this.#F=!0;for(const t of this.#l)t.id===e&&(t.selected=!1,this.#o=this.value.filter((e=>e!==t.value)));const t=this.#b.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus()}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isEveryOptionFilteredOut",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;

package/dist/dropdown.styles.js

@@ -33,7 +33,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       gap: var(--glide-core-spacing-xs);
       justify-content: space-between;
       min-inline-size: var(--min-inline-size);
-      padding-inline: var(--glide-core-spacing-xs);
+      padding-inline: var(--glide-core-spacing-sm);
       text-align: start;
       user-select: none;
       white-space: nowrap;

package/dist/form-controls-layout.d.ts

@@ -0,0 +1,23 @@
+import './checkbox.js';
+import './dropdown.option.js';
+import './label.js';
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-form-controls-layout': GlideCoreFormControlsLayout;
+    }
+}
+/**
+ * @description Aligns form control labels and the controls themselves in two columns. Only horizontally oriented controls are supported.
+ *
+ * @slot - GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreInput | GlideCoreTextArea.
+ */
+export default class GlideCoreFormControlsLayout extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    get split(): 'left' | 'middle';
+    set split(split: 'left' | 'middle');
+    firstUpdated(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/form-controls-layout.js

@@ -0,0 +1 @@
+var __decorate=this&&this.__decorate||function(e,o,t,r){var l,s=arguments.length,i=s<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,o,t,r);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(i=(s<3?l(i):s>3?l(o,t,i):l(o,t))||i);return s>3&&i&&Object.defineProperty(o,t,i),i};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreCheckbox from"./checkbox.js";import GlideCoreCheckboxGroup from"./checkbox-group.js";import GlideCoreDropdown from"./dropdown.js";import GlideCoreInput from"./input.js";import GlideCoreTextArea from"./textarea.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./form-controls-layout.styles.js";let GlideCoreFormControlsLayout=class GlideCoreFormControlsLayout extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get split(){return this.#e}set split(e){this.#e=e,owSlot(this.#o.value);for(const e of this.#o.value.assignedElements())"privateSplit"in e&&(e.privateSplit=this.split)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreInput,GlideCoreTextArea]),this.#t()}render(){return html`<div class="component"><slot @slotchange="${this.#r}" ${ref(this.#o)}></slot></div>`}#o=createRef();#e="left";#t(){owSlot(this.#o.value);for(const e of this.#o.value.assignedElements())"orientation"in e&&ow("horizontal"===e.orientation,ow.boolean.true.message("Only horizontal controls are supported."))}#r(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreInput,GlideCoreTextArea]),this.#t();for(const e of this.#o.value.assignedElements())"privateSplit"in e&&(e.privateSplit=this.split)}};__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"split",null),GlideCoreFormControlsLayout=__decorate([customElement("glide-core-form-controls-layout")],GlideCoreFormControlsLayout);export default GlideCoreFormControlsLayout;

package/dist/form-controls-layout.stories.d.ts

@@ -0,0 +1,10 @@
+import './checkbox-group.js';
+import './dropdown';
+import './form-controls-layout.js';
+import './input.js';
+import './radio-group.js';
+import './radio.js';
+import type { Meta, StoryObj } from '@storybook/web-components';
+declare const meta: Meta;
+export default meta;
+export declare const SingleSelectionHorizontal: StoryObj;

package/dist/form-controls-layout.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/form-controls-layout.styles.js

@@ -0,0 +1,7 @@
+import{css}from"lit";export default[css`
+    .component {
+      display: flex;
+      flex-direction: column;
+      row-gap: 0.625rem;
+    }
+  `];

package/dist/form-controls-layout.test.basics.d.ts

@@ -0,0 +1,2 @@
+import './checkbox.js';
+import './input.js';

package/dist/form-controls-layout.test.basics.js

@@ -0,0 +1,74 @@
+import './checkbox.js';
+import './input.js';
+import { ArgumentError } from 'ow';
+import { expect, fixture, html } from '@open-wc/testing';
+import GlideCoreFormControlsLayout from './form-controls-layout.js';
+import expectArgumentError from './library/expect-argument-error.js';
+import sinon from 'sinon';
+it('registers', async () => {
+    expect(window.customElements.get('glide-core-form-controls-layout')).to.equal(GlideCoreFormControlsLayout);
+});
+it('has defaults', async () => {
+    const component = await fixture(html `
+    <glide-core-form-controls-layout>
+      <glide-core-input
+        label="Label"
+        placeholder="Placeholder"
+      ></glide-core-input>
+    </glide-core-form-controls-layout>
+  `);
+    expect(component.getAttribute('split')).to.equal('left');
+    expect(component.split).to.equal('left');
+});
+it('sets `privateActive` on each control', async () => {
+    const component = await fixture(html `
+    <glide-core-form-controls-layout>
+      <glide-core-input
+        label="Label"
+        placeholder="Placeholder"
+      ></glide-core-input>
+
+      <glide-core-checkbox label="Label"></glide-core-checkbox>
+    </glide-core-form-controls-layout>
+  `);
+    const input = component.querySelector('glide-core-input');
+    const checkbox = component.querySelector('glide-core-checkbox');
+    expect(input?.privateSplit).to.equal('left');
+    expect(checkbox?.privateSplit).to.equal('left');
+});
+it('throws if it does not have a default slot', async () => {
+    const spy = sinon.spy();
+    try {
+        await fixture(html `
+      <glide-core-form-controls-layout></glide-core-form-controls-layout>
+    `);
+    }
+    catch (error) {
+        if (error instanceof ArgumentError) {
+            spy();
+        }
+    }
+    expect(spy.called).to.be.true;
+});
+it('throws if its default slot is the incorrect type', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-form-controls-layout>
+        <input />
+      </glide-core-form-controls-layout>
+    `);
+    });
+});
+it('throws if a vertical control is present', async () => {
+    await expectArgumentError(() => {
+        return fixture(html `
+      <glide-core-form-controls-layout>
+        <glide-core-input
+          label="Label"
+          placeholder="Placeholder"
+          orientation="vertical"
+        ></glide-core-input>
+      </glide-core-form-controls-layout>
+    `);
+    });
+});

package/dist/form-controls-layout.test.interactions.d.ts

@@ -0,0 +1,2 @@
+import './checkbox.js';
+import './input.js';

package/dist/form-controls-layout.test.interactions.js

@@ -0,0 +1,26 @@
+import './checkbox.js';
+import './input.js';
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import GlideCoreFormControlsLayout from './form-controls-layout.js';
+it('sets `privateActive` on each control when `split` is changed programmatically', async () => {
+    const component = await fixture(html `
+    <glide-core-form-controls-layout>
+      <glide-core-input
+        label="Label"
+        placeholder="Placeholder"
+      ></glide-core-input>
+
+      <glide-core-checkbox label="Label"></glide-core-checkbox>
+    </glide-core-form-controls-layout>
+  `);
+    // Why isn't it a `GlideCoreFormControlsLayout` instance yet? No idea!
+    // It should be fully rendered by this point. Nothing to do with the
+    // component itself, which is quite simple. And no other test behaves
+    // like this.
+    await waitUntil(() => component instanceof GlideCoreFormControlsLayout);
+    component.split = 'middle';
+    const input = component.querySelector('glide-core-input');
+    const checkbox = component.querySelector('glide-core-checkbox');
+    expect(input?.privateSplit).to.equal('middle');
+    expect(checkbox?.privateSplit).to.equal('middle');
+});

package/dist/input.d.ts

@@ -39,6 +39,7 @@ export default class GlideCoreInput extends LitElement {
     required: boolean;
     readonly: boolean;
     disabled: boolean;
+    privateSplit?: 'left' | 'middle';
     maxlength?: number;
     descriptionNodes: NodeListOf<HTMLElement>;
     prefixIconNodes: NodeListOf<HTMLElement>;

package/dist/input.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedNodes,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#e.form}get validity(){return this.#e.validity}get willValidate(){return this.#e.willValidate}blur(){this.#t?.blur()}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}firstUpdated(){this.#o()}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}get isTypeSearch(){return"search"===this.type}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-label orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#s||this.#r}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-box":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#s||this.#r})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" id="input" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${ifDefined(this.placeholder)}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#a}" @blur="${this.#l}" @change="${this.#n}" @input="${this.#d}" ${ref(this.#p)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" aria-label="${this.#h.term("clearEntry")}" @click="${this.#c}" tabindex="-1"><slot name="clear-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></slot></glide-core-icon-button>`:""} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" aria-label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#u}" tabindex="-1">${this.passwordVisible?html`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:html`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:""}<div class="suffix">${this.isTypeSearch?magnifyingGlassIcon:html`<slot name="suffix"></slot>`}</div></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#r})}">${this.valueCharacterCount}/${this.maxlength}</div>`:nothing}</div></glide-core-label>`}reportValidity(){return this.#e.reportValidity()}get valueCharacterCount(){return this.value.length}constructor(){super(),this.type="text",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#p=createRef(),this.#h=new LocalizeController(this),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#p;#e;#h;#i;get#r(){return Boolean(this.maxlength&&this.valueCharacterCount>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}get#t(){return this.#p.value}#l(){this.hasFocus=!1}#n(e){this.value=this.#t.value,this.#o(),this.dispatchEvent(new Event(e.type,e))}#c(e){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#t?.focus(),this.#o(),e.stopPropagation()}#a(){this.hasFocus=!0}#d(){const e=this.#t.value;this.value=e,this.#o()}#u(){this.passwordVisible=!this.passwordVisible}async#o(){await this.updateComplete,this.#e.setValidity(this.#t?.validity,this.#t?.validationMessage,this.#t)}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property()],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property()],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([queryAssignedNodes({slot:"description"})],GlideCoreInput.prototype,"descriptionNodes",void 0),__decorate([queryAssignedNodes({slot:"prefix"})],GlideCoreInput.prototype,"prefixIconNodes",void 0),__decorate([queryAssignedNodes({slot:"suffix"})],GlideCoreInput.prototype,"suffixIconNodes",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,i,a):r(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./icon-button.js";import"./label.js";import{LitElement,html,nothing}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,queryAssignedNodes,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow from"./library/ow.js";import styles from"./input.styles.js";export const SUPPORTED_TYPES=["email","number","password","search","tel","text","url"];let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed",delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#e.form}get validity(){return this.#e.validity}get willValidate(){return this.#e.willValidate}blur(){this.#t?.blur()}checkValidity(){return this.isCheckingValidity=!0,this.#e.checkValidity()}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}firstUpdated(){this.#o()}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}get isTypeSearch(){return"search"===this.type}get hasClearIcon(){return this.clearable&&!this.disabled&&!this.readonly}get isClearIconVisible(){return this.hasClearIcon&&this.value.length>0}render(){return html`<glide-core-label class="${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}" orientation="${this.orientation}" split="${ifDefined(this.privateSplit??void 0)}" ?disabled="${this.disabled}" ?error="${this.#r||this.#s}" ?hide="${this.hideLabel}" ?required="${this.required}"><slot name="tooltip" slot="tooltip"></slot><label for="input">${this.label}</label><div class="${classMap({"input-box":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#r||this.#s})}" slot="control"><slot name="prefix"></slot><input aria-describedby="meta" id="input" type="${"password"===this.type&&this.passwordVisible?"text":this.type}" .value="${this.value}" placeholder="${ifDefined(this.placeholder)}" autocapitalize="${ifDefined(this.autocapitalize)}" spellcheck="${this.spellcheck}" ?required="${this.required}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" @focus="${this.#a}" @blur="${this.#l}" @change="${this.#n}" @input="${this.#d}" ${ref(this.#p)}> ${this.hasClearIcon?html`<glide-core-icon-button variant="tertiary" class="${classMap({"clear-icon-button":!0,"clear-icon-button--visible":this.isClearIconVisible})}" aria-label="${this.#h.term("clearEntry")}" @click="${this.#c}" tabindex="-1"><slot name="clear-icon"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></slot></glide-core-icon-button>`:""} ${"password"===this.type&&this.passwordToggle&&!this.disabled?html`<glide-core-icon-button variant="tertiary" class="password-toggle" aria-label="${this.passwordVisible?"Hide password":"Show password"}" aria-controls="input" aria-expanded="${this.passwordVisible?"true":"false"}" @click="${this.#u}" tabindex="-1">${this.passwordVisible?html`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>`:html`<svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>`}</glide-core-icon-button>`:""}<div class="suffix">${this.isTypeSearch?magnifyingGlassIcon:html`<slot name="suffix"></slot>`}</div></div><div class="meta" id="meta" slot="description"><slot class="description" name="description"></slot>${this.maxlength?html`<div class="${classMap({"character-count":!0,error:this.#s})}">${this.valueCharacterCount}/${this.maxlength}</div>`:nothing}</div></glide-core-label>`}reportValidity(){return this.#e.reportValidity()}get valueCharacterCount(){return this.value.length}constructor(){super(),this.type="text",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.hasFocus=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#p=createRef(),this.#h=new LocalizeController(this),this.#i=({formData:e})=>{this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#e=this.attachInternals(),this.addEventListener("invalid",(e=>{e?.preventDefault(),this.isCheckingValidity||(this.isReportValidityOrSubmit=!0,this.focus())}))}#p;#e;#h;#i;get#s(){return Boolean(this.maxlength&&this.valueCharacterCount>this.maxlength)}get#r(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}get#t(){return this.#p.value}#l(){this.hasFocus=!1}#n(e){ow(this.#t,ow.object.instanceOf(HTMLInputElement)),this.value=this.#t.value,this.#o(),this.dispatchEvent(new Event(e.type,e))}#c(e){this.value="",this.dispatchEvent(new Event("clear",{bubbles:!0})),this.#t?.focus(),this.#o(),e.stopPropagation()}#a(){this.hasFocus=!0}#d(){ow(this.#t,ow.object.instanceOf(HTMLInputElement)),this.value=this.#t.value,this.#o()}#u(){this.passwordVisible=!this.passwordVisible}async#o(){await this.updateComplete,this.#e.setValidity(this.#t?.validity,this.#t?.validationMessage,this.#t)}};__decorate([property()],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property()],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property()],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property()],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:e=>e&&Number.parseInt(e,10)})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([queryAssignedNodes({slot:"description"})],GlideCoreInput.prototype,"descriptionNodes",void 0),__decorate([queryAssignedNodes({slot:"prefix"})],GlideCoreInput.prototype,"prefixIconNodes",void 0),__decorate([queryAssignedNodes({slot:"suffix"})],GlideCoreInput.prototype,"suffixIconNodes",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),GlideCoreInput=__decorate([customElement("glide-core-input")],GlideCoreInput);export default GlideCoreInput;

package/dist/input.test.basics.js

@@ -5,6 +5,12 @@ GlideCoreInput.shadowRootOptions.mode = 'open';
 it('registers', async () => {
     expect(window.customElements.get('glide-core-input')).to.equal(GlideCoreInput);
 });
+it('is accessible', async () => {
+    const element = await fixture(html `
+    <glide-core-input label="Test" value="lorem"></glide-core-input>
+  `);
+    await expect(element).to.be.accessible();
+});
 it('accepts and contains "value" attribute', async () => {
     const element = await fixture(html `
     <glide-core-input label="Test" value="lorem"></glide-core-input>

package/dist/label.d.ts

@@ -25,9 +25,12 @@ export default class GlideCoreLabel extends LitElement {
     hide: boolean;
     orientation: 'horizontal' | 'vertical';
     required: boolean;
+    split?: 'left' | 'middle';
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
     private hasDescriptionSlot;
     private hasSummarySlot;
     private hasTooltipSlot;
+    private isLabelTooltip;
+    private label;
 }

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,l){var i,r=arguments.length,s=r<3?e:null===l?l=Object.getOwnPropertyDescriptor(e,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,l);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(s=(r<3?i(s):r>3?i(e,o,s):i(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import styles from"./label.styles.js";import{svg}from"lit";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#l=new LocalizeController(this),this.#i=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#e.value),owSlot(this.#t.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,"hidden-label":this.hide})}"><div class="${classMap({"tooltip-and-label":!0,hidden:this.hide})}" part="tooltip-and-label-container"><div class="tooltip-and-label"><glide-core-tooltip class="${classMap({tooltip:!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#l.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot class="${classMap({tooltip:!0,visible:this.hasTooltipSlot})}" name="tooltip" @slotchange="${this.#s}" ${ref(this.#r)}></slot></glide-core-tooltip><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label"><slot @slotchange="${this.#a}" ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></div></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#n}" ${ref(this.#t)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#i)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#d}" ${ref(this.#o)}></slot></div>`}#t;#e;#o;#l;#i;#r;#n(){owSlot(this.#t.value)}#a(){owSlot(this.#e.value)}#d(){const t=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(t&&t.length>0)}#c(){const t=this.#i.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}#s(){const t=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),GlideCoreLabel=__decorate([customElement("glide-core-label")],GlideCoreLabel);export default GlideCoreLabel;
+var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,r=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,l);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import ow,{owSlot}from"./library/ow.js";import styles from"./label.styles.js";import{svg}from"lit";const infoCircleIcon=svg`<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"><path d="M12 16L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="8" r="1" fill="currentColor">`;let GlideCoreLabel=class GlideCoreLabel extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescriptionSlot=!1,this.hasSummarySlot=!1,this.hasTooltipSlot=!1,this.isLabelTooltip=!1,this.label="",this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=new LocalizeController(this),this.#s=createRef(),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#t.value),owSlot(this.#e.value)}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,"hidden-label":this.hide})}"><div class="${classMap({"tooltips-and-label":!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split})}" part="tooltips-and-label"><glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:this.hasTooltipSlot})}" placement="${"vertical"===this.orientation?"right":"bottom"}"><span class="optional-tooltip-target" slot="target" tabindex="0"><svg aria-label="${this.#i.term("moreInformation")}" width="16" height="16" viewBox="0 0 24 24" fill="none">${infoCircleIcon}</svg></span><slot name="tooltip" @slotchange="${this.#a}" ${ref(this.#r)}></slot></glide-core-tooltip><glide-core-tooltip class="label-overflow-tooltip" placement="right" ?disabled="${!this.isLabelTooltip}"><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#l)}><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div><div aria-hidden="true">${this.label}</div></glide-core-tooltip></div><div class="control-and-summary"><slot class="${classMap({control:!0,error:this.error,disabled:this.disabled,vertical:"vertical"===this.orientation,summaryless:!this.hasSummarySlot,"hidden-label":this.hide})}" name="control" @slotchange="${this.#d}" ${ref(this.#e)}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#c}" ${ref(this.#s)}></slot></div><slot class="${classMap({description:!0,visible:this.hasDescriptionSlot,error:this.error,tooltip:this.hasTooltipSlot})}" id="description" name="description" @slotchange="${this.#h}" ${ref(this.#o)}></slot></div>`}#e;#t;#o;#l;#i;#s;#r;#d(){owSlot(this.#e.value)}#n(){owSlot(this.#t.value);const e=this.#t.value?.assignedElements().at(0),t=this.#l.value;ow(e,ow.object.instanceOf(Element)),ow(t,ow.object.instanceOf(HTMLElement)),e.textContent&&(this.label=e.textContent);new ResizeObserver((()=>{this.isLabelTooltip=e.getBoundingClientRect().width>t.getBoundingClientRect().width})).observe(t)}#h(){const e=this.#o.value?.assignedNodes({flatten:!0});this.hasDescriptionSlot=Boolean(e&&e.length>0)}#c(){const e=this.#s.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(e&&e.length>0)}#a(){const e=this.#r.value?.assignedNodes({flatten:!0});this.hasTooltipSlot=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"hide",void 0),__decorate([property({reflect:!0})],GlideCoreLabel.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreLabel.prototype,"required",void 0),__decorate([property()],GlideCoreLabel.prototype,"split",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescriptionSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasTooltipSlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),__decorate([state()],GlideCoreLabel.prototype,"label",void 0),GlideCoreLabel=__decorate([customElement("glide-core-label")],GlideCoreLabel);export default GlideCoreLabel;

package/dist/label.styles.js

@@ -17,23 +17,35 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         flex-direction: column;
       }
 
+      &.left {
+        grid-template-columns: calc(100% / 3) 1fr;
+      }
+
+      &.middle {
+        grid-template-columns: 1fr 1fr;
+      }
+
       &.hidden-label {
         display: flex;
         flex-direction: column;
       }
     }
 
-    .tooltip-and-label {
+    .tooltips-and-label {
       align-items: center;
       column-gap: var(--glide-core-spacing-xs);
       display: flex;
+      justify-content: flex-end;
+
+      /* Prevent it from growing larger than its column percentage when a child of Form Controls Layout. */
+      min-inline-size: 0;
 
       &.hidden {
         ${visuallyHidden};
       }
     }
 
-    glide-core-tooltip {
+    .optional-tooltip {
       display: none;
 
       &.vertical {
@@ -49,7 +61,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .tooltip-target {
+    .optional-tooltip-target {
       background-color: transparent;
       border: none;
       border-radius: 0.0625rem;
@@ -78,7 +90,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       font-variant: var(--glide-core-heading-xxxs-font-variant);
       font-weight: var(--glide-core-heading-xxxs-font-weight);
       line-height: 100%;
+      margin-inline-start: auto;
+      overflow: hidden;
+      text-align: end;
+      text-overflow: ellipsis;
       user-select: none;
+      white-space: nowrap;
 
       &.disabled ::slotted(*) {
         cursor: not-allowed;
@@ -93,6 +110,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .label-overflow-tooltip {
+      inline-size: 100%;
+    }
+
     .required-symbol {
       color: var(--glide-core-status-error);
     }