@crowdstrike/glide-core 0.26.0 → 0.27.0

package/dist/dropdown.styles.js

@@ -126,21 +126,22 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       padding: 0;
       position: absolute;
 
-      &.no-results {
+      &.optionless {
         font-family: var(--glide-core-typography-family-primary);
         font-size: var(--glide-core-typography-size-body-default);
         font-weight: var(--glide-core-typography-weight-regular);
         padding: var(--glide-core-spacing-base-xxs)
           var(--glide-core-spacing-base-sm);
-        text-transform: capitalize;
       }
 
-      &:not(.no-results) {
+      &:not(.optionless) {
         min-inline-size: var(--private-min-inline-size);
       }
     }
 
     .options {
+      --private-option-height: 1.75rem;
+
       box-sizing: border-box;
       max-block-size: calc(
         var(--private-option-height) * 9 + var(--glide-core-spacing-base-xxxs) *
@@ -149,14 +150,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       overflow: auto;
       scroll-behavior: smooth;
 
-      &.large {
-        --private-option-height: 1.75rem;
-      }
-
-      &.small {
-        --private-option-height: 1.25rem;
-      }
-
       &.hidden {
         display: none;
       }
@@ -186,35 +179,23 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .add-button {
+      --private-size: 1rem;
+
       align-items: center;
       background-color: transparent;
       border: none;
       border-radius: var(--glide-core-rounding-base-radius-md);
+      column-gap: 0.625rem;
       display: flex;
       font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
       font-weight: var(--glide-core-typography-weight-regular);
       inline-size: 100%;
       line-height: 100%;
+      padding-block: 0.375rem;
+      padding-inline: var(--glide-core-spacing-base-sm);
       text-align: start;
 
-      &.large {
-        --private-size: 1rem;
-
-        column-gap: 0.625rem;
-        font-size: var(--glide-core-typography-size-body-default);
-        padding-block: 0.375rem;
-        padding-inline: var(--glide-core-spacing-base-sm);
-      }
-
-      &.small {
-        --private-size: 0.875rem;
-
-        column-gap: var(--glide-core-spacing-base-xs);
-        font-size: var(--glide-core-typography-size-body-small);
-        padding-block: var(--glide-core-spacing-base-xxxs);
-        padding-inline: var(--glide-core-spacing-base-xs);
-      }
-
       &:focus {
         outline: none;
       }

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

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-form-controls-layout': GlideCoreFormControlsLayout;
+        'glide-core-form-controls-layout': FormControlsLayout;
     }
 }
 /**
@@ -10,9 +10,9 @@ declare global {
  * @readonly
  * @attr {string} [version]
  *
- * @slot {GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreRadioGroup | GlideCoreInput | GlideCoreTextArea}
+ * @slot {Checkbox | CheckboxGroup | Dropdown | RadioGroup | Input | TextArea}
  */
-export default class GlideCoreFormControlsLayout extends LitElement {
+export default class FormControlsLayout extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/form-controls-layout.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(o,e,t,r){var i,l=arguments.length,s=l<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(o,e,t,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(s=(l<3?i(s):l>3?i(e,t,s):i(e,t))||s);return l>3&&s&&Object.defineProperty(e,t,s),s};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreCheckbox from"./checkbox.js";import GlideCoreCheckboxGroup from"./checkbox-group.js";import GlideCoreDropdown from"./dropdown.js";import GlideCoreRadioGroup from"./radio-group.js";import GlideCoreInput from"./input.js";import GlideCoreTextArea from"./textarea.js";import styles from"./form-controls-layout.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreFormControlsLayout=class GlideCoreFormControlsLayout extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#o=createRef(),this.#e="left"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get split(){return this.#e}set split(o){if(this.#e=o,this.#o.value)for(const o of this.#o.value.assignedElements())"privateSplit"in o&&(o.privateSplit=this.split)}render(){return html`<div class="component"><slot @slotchange="${this.#t}" ${assertSlot([GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreRadioGroup,GlideCoreInput,GlideCoreTextArea])} ${ref(this.#o)}></slot></div>`}#o;#e;#t(){if(this.#o.value)for(const o of this.#o.value.assignedElements())if("privateSplit"in o&&(o.privateSplit=this.split),"orientation"in o&&"horizontal"!==o.orientation)throw new TypeError("Only horizontal controls are supported.")}};__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"split",null),__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"version",void 0),GlideCoreFormControlsLayout=__decorate([customElement("glide-core-form-controls-layout"),final],GlideCoreFormControlsLayout);export default GlideCoreFormControlsLayout;
+var __decorate=this&&this.__decorate||function(t,o,e,r){var s,i=arguments.length,l=i<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,o,e,r);else for(var n=t.length-1;n>=0;n--)(s=t[n])&&(l=(i<3?s(l):i>3?s(o,e,l):s(o,e))||l);return i>3&&l&&Object.defineProperty(o,e,l),l};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import Checkbox from"./checkbox.js";import CheckboxGroup from"./checkbox-group.js";import Dropdown from"./dropdown.js";import RadioGroup from"./radio-group.js";import Input from"./input.js";import TextArea from"./textarea.js";import styles from"./form-controls-layout.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let FormControlsLayout=class FormControlsLayout extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#o="left"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get split(){return this.#o}set split(t){if(this.#o=t,this.#t.value)for(const t of this.#t.value.assignedElements())"privateSplit"in t&&(t.privateSplit=this.split)}render(){return html`<div class="component"><slot @slotchange="${this.#e}" ${assertSlot([Checkbox,CheckboxGroup,Dropdown,RadioGroup,Input,TextArea])} ${ref(this.#t)}></slot></div>`}#t;#o;#e(){if(this.#t.value)for(const t of this.#t.value.assignedElements())if("privateSplit"in t&&(t.privateSplit=this.split),"orientation"in t&&"horizontal"!==t.orientation)throw new TypeError("Only horizontal controls are supported.")}};__decorate([property({reflect:!0})],FormControlsLayout.prototype,"split",null),__decorate([property({reflect:!0})],FormControlsLayout.prototype,"version",void 0),FormControlsLayout=__decorate([customElement("glide-core-form-controls-layout"),final],FormControlsLayout);export default FormControlsLayout;

package/dist/icon-button.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-icon-button': GlideCoreIconButton;
+        'glide-core-icon-button': IconButton;
     }
 }
 /**
@@ -18,7 +18,7 @@ declare global {
  *
  * @slot {Element} - An icon
  */
-export default class GlideCoreIconButton extends LitElement {
+export default class IconButton extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#t=null,this.#e=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#o)}></slot></button>`}#t;#e;#o};__decorate([property({reflect:!0}),required],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreIconButton.prototype,"ariaDescription",null),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button"),final],GlideCoreIconButton);export default GlideCoreIconButton;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let IconButton=class IconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#t=null,this.#e=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><slot class="default-slot" ${assertSlot()} ${ref(this.#o)}></slot></button>`}#t;#e;#o};__decorate([property({reflect:!0}),required],IconButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],IconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],IconButton.prototype,"ariaDescription",null),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],IconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],IconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],IconButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],IconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],IconButton.prototype,"version",void 0),IconButton=__decorate([customElement("glide-core-icon-button"),final],IconButton);export default IconButton;

package/dist/icon-button.styles.js

@@ -128,4 +128,33 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
         }
       }
     }
+
+    .default-slot {
+      &::slotted(*) {
+        /*
+          So that teams clicking Icon Button using Playwright don't have to use "force: true".
+          Playwright uses "elementsFromPoint()" internally to locate elements. But there's a
+          Chromium bug¹ where that method returns content slotted into the element clicked
+          instead of the element itself.
+
+          Or it may² be a specification issue. Either way, to reproduce it, use the "getByRole"
+          locator to locate and click Icon Button: "page.getByRole('button').click()". The
+          click will fail with a Playwright "intercepts pointer events" error related to the
+          slotted content.
+
+          It's not clear if Playwright can work around it like it has³ other "elementsFromPoint()"
+          problems or if the fix needs to come from Chromium. I'll file a bug with Playwright and
+          update this comment if I find out.
+
+          In the meantime, disabling pointer events on the slotted content prevents it from being
+          included in the array returned by "elementsFromPoint()". As a result, Playwright won't
+          falsely believe it's intercepting events.
+
+          1. https://issues.chromium.org/issues/40755138
+          2. https://github.com/w3c/csswg-drafts/issues/556
+          3. https://github.com/microsoft/playwright/blob/00429efc4ac67ece5d9ba220d7470ea97c0ca265/packages/injected/src/injectedScript.ts#L962-L968
+        */
+        pointer-events: none;
+      }
+    }
   `];

package/dist/inline-alert.d.ts

@@ -1,7 +1,7 @@
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-inline-alert': GlideCoreInlineAlert;
+        'glide-core-inline-alert': InlineAlert;
     }
 }
 /**
@@ -12,7 +12,7 @@ declare global {
  *
  * @slot {Element | string} - The content of the alert
  */
-export default class GlideCoreInlineAlert extends LitElement {
+export default class InlineAlert extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/inline-alert.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,a=n<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 s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./inline-alert.styles.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.version=packageJson.version,this.#e=100,this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div></div>`}#e;#t};__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};
+var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,a=n<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 s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./inline-alert.styles.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let InlineAlert=class InlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.version=packageJson.version,this.#e=100,this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div></div>`}#e;#t};__decorate([property({reflect:!0,useDefault:!0})],InlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0})],InlineAlert.prototype,"version",void 0),InlineAlert=__decorate([customElement("glide-core-inline-alert"),final],InlineAlert);export default InlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};

package/dist/input.d.ts

@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
 import type FormControl from './library/form-control.js';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-input': GlideCoreInput;
+        'glide-core-input': Input;
     }
 }
 /**
@@ -62,7 +62,7 @@ declare global {
  * @param {ValidityStateFlags} [flags]
  * @param {string} [message]
  */
-export default class GlideCoreInput extends LitElement implements FormControl {
+export default class Input extends LitElement implements FormControl {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;

package/dist/input.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{html,LitElement,nothing}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{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern&&this.pattern.length>0?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:Boolean(this.value&&!new RegExp(`^(?:${this.pattern})$`,"v").test(this.value)),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
+var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{html,LitElement,nothing}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{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Input=class Input extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern&&this.pattern.length>0?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:Boolean(this.value&&!new RegExp(`^(?:${this.pattern})$`,"v").test(this.value)),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
       <glide-core-private-label
         class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
         label=${ifDefined(this.label)}
@@ -118,7 +118,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length
               `:nothing}
         </div>
       </glide-core-private-label>
-    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.autocapitalize="on",this.autocomplete="on",this.clearable=!1,this.disabled=!1,this.hideLabel=!1,this.name="",this.orientation="horizontal",this.passwordToggle=!1,this.pattern="",this.readonly=!1,this.required=!1,this.spellcheck=!1,this.type="text",this.value="",this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#o(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property({reflect:!0}),required],GlideCoreInput.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({attribute:"password-toggle",reflect:!0,type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean,useDefault:!0})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInput.prototype,"type",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"version",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input"),final],GlideCoreInput);export default GlideCoreInput;const icons={eye:html`<svg
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.autocapitalize="on",this.autocomplete="on",this.clearable=!1,this.disabled=!1,this.hideLabel=!1,this.name="",this.orientation="horizontal",this.passwordToggle=!1,this.pattern="",this.readonly=!1,this.required=!1,this.spellcheck=!1,this.type="text",this.value="",this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#o(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property({reflect:!0}),required],Input.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"autocomplete",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Input.prototype,"hideLabel",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],Input.prototype,"maxlength",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"orientation",void 0),__decorate([property({attribute:"password-toggle",reflect:!0,type:Boolean})],Input.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0})],Input.prototype,"placeholder",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"pattern",void 0),__decorate([property()],Input.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],Input.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean,useDefault:!0})],Input.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],Input.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],Input.prototype,"type",void 0),__decorate([property()],Input.prototype,"value",void 0),__decorate([property({reflect:!0})],Input.prototype,"version",void 0),__decorate([state()],Input.prototype,"hasFocus",void 0),__decorate([state()],Input.prototype,"isBlurring",void 0),__decorate([state()],Input.prototype,"isCheckingValidity",void 0),__decorate([state()],Input.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Input.prototype,"passwordVisible",void 0),__decorate([state()],Input.prototype,"validityMessage",void 0),Input=__decorate([customElement("glide-core-input"),final],Input);export default Input;const icons={eye:html`<svg
     aria-hidden="true"
     style=${styleMap({height:"1rem",width:"1rem"})}
     fill="none"

package/dist/label.d.ts

@@ -2,7 +2,7 @@ import './tooltip.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
-        'glide-core-private-label': GlideCoreLabel;
+        'glide-core-private-label': Label;
     }
 }
 /**
@@ -20,7 +20,7 @@ declare global {
  * @slot {Element | string} [description] - Additional information or context
  * @slot {Element | string} [summary] - Additional information or context
  */
-export default class GlideCoreLabel extends LitElement {
+export default class Label extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];

package/dist/label.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var l,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(s=(r<3?l(s):r>3?l(t,o,s):l(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import"./tooltip.js";import{html,LitElement}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{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";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.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" ${ref(this.#o)}><slot @slotchange="${this.#r}" ${assertSlot()} ${ref(this.#e)}></slot>${this.required?html`<span aria-hidden="true" class="required-symbol">*</span>`:""}</div></glide-core-tooltip></div><div class="control-and-summary" part="private-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" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#t)}></slot></div>`}#e;#t;#o;#i;#l;#r(){const e=this.#e.value?.assignedElements().at(0),t=new ResizeObserver((()=>{e&&this.#o.value&&(this.isLabelTooltip=e.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}));this.#o.value&&t.observe(this.#o.value)}#a(){this.hasDescription=Boolean(this.#t.value&&this.#t.value.offsetHeight>0)}#s(){const e=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=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,useDefault:!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([property()],GlideCoreLabel.prototype,"tooltip",void 0),__decorate([property()],GlideCoreLabel.prototype,"label",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasDescription",void 0),__decorate([state()],GlideCoreLabel.prototype,"hasSummarySlot",void 0),__decorate([state()],GlideCoreLabel.prototype,"isLabelTooltip",void 0),GlideCoreLabel=__decorate([customElement("glide-core-private-label"),final],GlideCoreLabel);export default GlideCoreLabel;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><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"/></svg>`};
+var __decorate=this&&this.__decorate||function(t,e,o,i){var l,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(l=t[a])&&(s=(r<3?l(s):r>3?l(e,o,s):l(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s};import"./tooltip.js";import{html,LitElement}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{styleMap}from"lit/directives/style-map.js";import{ifDefined}from"lit/directives/if-defined.js";import{when}from"lit/directives/when.js";import styles from"./label.styles.js";import{LocalizeController}from"./library/localize.js";import assertSlot from"./library/assert-slot.js";import onResize from"./library/on-resize.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let Label=class Label extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.error=!1,this.hide=!1,this.orientation="horizontal",this.required=!1,this.hasDescription=!1,this.hasSummarySlot=!1,this.isLabelTooltip=!1,this.#t=createRef(),this.#e=createRef(),this.#o=createRef(),this.#i=new LocalizeController(this),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split,"hidden-label":this.hide})}"><div class="${classMap({tooltips:!0,hidden:this.hide,left:"left"===this.split,middle:"middle"===this.split,right:"right"===this.split})}" part="private-tooltips">${when(this.tooltip,(()=>html`<glide-core-tooltip class="${classMap({"optional-tooltip":!0,vertical:"vertical"===this.orientation,visible:!!this.tooltip})}" label="${ifDefined(this.tooltip)}" placement="${"vertical"===this.orientation?"right":"bottom"}"><button aria-label="${this.#i.term("tooltip")}" class="optional-tooltip-target" slot="target" type="button">${icons.information}</button></glide-core-tooltip>`))}<glide-core-tooltip class="label-tooltip" data-test="label-tooltip" label="${this.label??""}" placement="right" ?disabled="${!this.isLabelTooltip}" screenreader-hidden><div class="${classMap({label:!0,disabled:this.disabled})}" data-test="label" slot="target" @mouseover="${this.#r}" ${ref(this.#o)}><slot ${assertSlot()} ${ref(this.#t)}></slot></div></glide-core-tooltip>${this.required?html`<span aria-hidden="true" class="required-symbol" data-test="required-symbol">*</span>`:""}</div><div class="control-and-summary" part="private-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" ${assertSlot()}></slot><slot class="${classMap({summary:!0,error:this.error})}" name="summary" @slotchange="${this.#s}" ${ref(this.#l)}></slot></div><slot class="${classMap({description:!0,content:this.hasDescription,error:this.error,tooltip:!!this.tooltip})}" id="description" name="description" ${onResize(this.#a.bind(this))} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#i;#l;#a(){this.hasDescription=Boolean(this.#e.value&&this.#e.value.offsetHeight>0)}#r(){const t=this.#t.value?.assignedElements().at(0);t&&this.#o.value&&(this.isLabelTooltip=t.getBoundingClientRect().width>this.#o.value.getBoundingClientRect().width)}#s(){const t=this.#l.value?.assignedNodes({flatten:!0});this.hasSummarySlot=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"error",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"hide",void 0),__decorate([property({reflect:!0,useDefault:!0})],Label.prototype,"orientation",void 0),__decorate([property({reflect:!0,type:Boolean})],Label.prototype,"required",void 0),__decorate([property()],Label.prototype,"split",void 0),__decorate([property()],Label.prototype,"tooltip",void 0),__decorate([property()],Label.prototype,"label",void 0),__decorate([state()],Label.prototype,"hasDescription",void 0),__decorate([state()],Label.prototype,"hasSummarySlot",void 0),__decorate([state()],Label.prototype,"isLabelTooltip",void 0),Label=__decorate([customElement("glide-core-private-label"),final],Label);export default Label;const icons={information:html`<svg aria-hidden="true" style="${styleMap({height:"1rem",width:"1rem"})}" viewBox="0 0 24 24" fill="none"><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"/></svg>`};

package/dist/label.styles.js

@@ -38,7 +38,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     .tooltips {
       align-items: center;
-      column-gap: var(--glide-core-spacing-base-xs);
+      column-gap: var(--glide-core-spacing-base-xxs);
       display: flex;
 
       /*
@@ -129,6 +129,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     .required-symbol {
       color: var(--glide-core-color-advisory-stroke-error-primary);
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      font-weight: var(--glide-core-typography-weight-bold);
+      line-height: 100%;
     }
 
     .control-and-summary {

package/dist/library/assert-slot.d.ts

@@ -10,7 +10,7 @@ declare class AssertSlot extends Directive {
 }
 /**
  * @param {(Element | Text)[] | null } nodes - An array of node constructors allowed in the slot or `null` is any constructor is allowed
- * @param {boolean} [isOptional] - `false` by default. Set o `true` if the slot is optional
+ * @param {boolean} [isOptional] - `false` by default. Set to `true` if the slot is optional
  */
 declare const _default: (slotted?: ({
     new (): Element;

package/dist/library/assert-slot.test.js

@@ -10,7 +10,7 @@ import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 import sinon from 'sinon';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import assertSlot from './assert-slot.js';
-let GlideCoreWithSlot = class GlideCoreWithSlot extends LitElement {
+let WithSlot = class WithSlot extends LitElement {
     constructor() {
         super(...arguments);
         this.optional = false;
@@ -25,32 +25,32 @@ let GlideCoreWithSlot = class GlideCoreWithSlot extends LitElement {
 };
 __decorate([
     property()
-], GlideCoreWithSlot.prototype, "name", void 0);
+], WithSlot.prototype, "name", void 0);
 __decorate([
     property({ type: Boolean })
-], GlideCoreWithSlot.prototype, "optional", void 0);
+], WithSlot.prototype, "optional", void 0);
 __decorate([
     property({ type: Array })
-], GlideCoreWithSlot.prototype, "slotted", void 0);
-GlideCoreWithSlot = __decorate([
+], WithSlot.prototype, "slotted", void 0);
+WithSlot = __decorate([
     customElement('glide-core-with-slot')
-], GlideCoreWithSlot);
-let GlideCoreWhenNotUsedOnSlot = class GlideCoreWhenNotUsedOnSlot extends LitElement {
+], WithSlot);
+let WhenNotUsedOnSlot = class WhenNotUsedOnSlot extends LitElement {
     render() {
         return html `<div ${assertSlot()}></div>`;
     }
 };
-GlideCoreWhenNotUsedOnSlot = __decorate([
+WhenNotUsedOnSlot = __decorate([
     customElement('glide-core-when-not-used-on-slot')
-], GlideCoreWhenNotUsedOnSlot);
-let GlideCorewhenNotUsedInsideTag = class GlideCorewhenNotUsedInsideTag extends LitElement {
+], WhenNotUsedOnSlot);
+let WhenNotUsedInsideATag = class WhenNotUsedInsideATag extends LitElement {
     render() {
         return html `<slot>${assertSlot()}</slot>`;
     }
 };
-GlideCorewhenNotUsedInsideTag = __decorate([
+WhenNotUsedInsideATag = __decorate([
     customElement('glide-core-when-not-used-inside-tag')
-], GlideCorewhenNotUsedInsideTag);
+], WhenNotUsedInsideATag);
 it('throws when a required default slot is empty', async () => {
     const stub = sinon.stub(console, 'error');
     const spy = sinon.spy();
@@ -59,7 +59,7 @@ it('throws when a required default slot is empty', async () => {
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
-    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithSlot to have a default slot.');
+    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected WithSlot to have a default slot.');
     stub.restore();
 });
 it('throws when a required default slot is emptied', async () => {
@@ -87,7 +87,7 @@ it('throws when a required named slot is empty', async () => {
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
-    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithSlot to have a "test" slot.');
+    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected WithSlot to have a "test" slot.');
     stub.restore();
 });
 it('throws when a required named slot is emptied', async () => {
@@ -117,7 +117,7 @@ it('throws when a typed and required default slot is empty', async () => {
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
-    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
+    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected WithSlot to have a slotted element that extends HTMLButtonElement.');
     stub.restore();
 });
 it('throws when a typed and required default slot is emptied', async () => {
@@ -132,7 +132,7 @@ it('throws when a typed and required default slot is emptied', async () => {
     host.innerHTML = '';
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
-    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected WithSlot to have a slotted element that extends HTMLButtonElement.');
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = onerror;
     stub.restore();
@@ -149,7 +149,7 @@ it('throws when a typed and required default slot has the wrong element', async
       <a href="/">Link</a>
     </glide-core-with-slot>`);
     expect(spy.callCount).to.equal(1);
-    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected WithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = onerror;
     stub.restore();
@@ -164,7 +164,7 @@ it('throws when a typed and required default slot only contains text', async ()
       Text
     </glide-core-with-slot>`);
     expect(spy.callCount).to.equal(1);
-    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected WithSlot to have a slotted element that extends HTMLButtonElement.');
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = onerror;
     stub.restore();
@@ -180,7 +180,7 @@ it('throws when a typed and required named slot is empty', async () => {
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0) instanceof PromiseRejectionEvent).to.be.true;
-    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
+    expect(spy.args.at(0)?.at(0).reason.message).to.equal('Expected the "test" slot of WithSlot to have a slotted element that extends HTMLButtonElement.');
     stub.restore();
 });
 it('throws when a typed and required named slot is emptied', async () => {
@@ -195,7 +195,7 @@ it('throws when a typed and required named slot is emptied', async () => {
     host.innerHTML = '';
     await waitUntil(() => spy.callCount);
     expect(spy.callCount).to.equal(1);
-    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement.');
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of WithSlot to have a slotted element that extends HTMLButtonElement.');
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = onerror;
     stub.restore();
@@ -213,7 +213,7 @@ it('throws when a typed and required named slot has the wrong element', async ()
       <a slot="test" href="/">Link</a>
     </glide-core-with-slot>`);
     expect(spy.callCount).to.equal(1);
-    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected the "test" slot of WithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = onerror;
     stub.restore();
@@ -254,7 +254,7 @@ it('throws when a typed optional slot has the wrong element', async () => {
       <a href="/">Link</a>
     </glide-core-with-slot>`);
     expect(spy.callCount).to.equal(1);
-    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected GlideCoreWithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
+    expect(spy.args.at(0)?.at(0)).to.equal('Uncaught TypeError: Expected WithSlot to have a slotted element that extends HTMLButtonElement or HTMLDivElement or Text. Extends HTMLAnchorElement instead.');
     // eslint-disable-next-line unicorn/prefer-add-event-listener
     window.onerror = onerror;
     stub.restore();

package/dist/library/expect-window-error.js

@@ -1 +1 @@
-import{expect,waitUntil}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const t=sinon.stub(console,"error"),n=sinon.spy(),r=window.onerror;window.onerror=n,await o.call(context),await waitUntil((()=>n.callCount)),expect(n.callCount).to.be.greaterThan(0),expect(n.args.at(0)?.at(4)instanceof TypeError).to.be.true,window.onerror=r,t.restore()}
+import{expect,waitUntil}from"@open-wc/testing";import sinon from"sinon";export default async function(o){const t=sinon.stub(console,"error"),n=sinon.spy(),r=window.onerror;window.onerror=n,await o.call(context),await waitUntil((()=>n.callCount)),expect(n.callCount).to.be.greaterThan(0),expect(n.args.at(0)?.at(4)instanceof Error).to.be.true,window.onerror=r,t.restore()}

package/dist/library/final.test.js

@@ -9,33 +9,33 @@ import { customElement } from 'lit/decorators.js';
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 import final from './final.js';
-let GlideCoreFinal = class GlideCoreFinal extends LitElement {
+let Final = class Final extends LitElement {
 };
-GlideCoreFinal = __decorate([
+Final = __decorate([
     customElement('glide-core-final'),
     final
-], GlideCoreFinal);
-let GlideCoreSubclassed = class GlideCoreSubclassed extends GlideCoreFinal {
+], Final);
+let Subclassed = class Subclassed extends Final {
 };
-GlideCoreSubclassed = __decorate([
+Subclassed = __decorate([
     customElement('glide-core-subclassed')
-], GlideCoreSubclassed);
+], Subclassed);
 it('throws when a class is extended', async () => {
     const spy = sinon.spy();
     try {
-        new GlideCoreSubclassed();
+        new Subclassed();
     }
     catch (error) {
         spy(error);
     }
     expect(spy.callCount).to.equal(1);
     expect(spy.args.at(0)?.at(0) instanceof TypeError).to.be.true;
-    expect(spy.args.at(0)?.at(0).message).to.equal(`GlideCoreFinal doesn't allow extension. Please talk to us if a component doesn't meet your needs.`);
+    expect(spy.args.at(0)?.at(0).message).to.equal(`Final doesn't allow extension. Please talk to us if a component doesn't meet your needs.`);
 });
 it('does not throw when a class is not extended', () => {
     const spy = sinon.spy();
     try {
-        new GlideCoreFinal();
+        new Final();
     }
     catch (error) {
         spy(error);

package/dist/library/localize.d.ts

@@ -12,7 +12,8 @@ export interface Translation extends DefaultTranslation {
     notifications: string;
     nextTab: string;
     previousTab: string;
-    noResults: string;
+    noAvailableOptions: string;
+    noMatchingOptions: string;
     tooltip: string;
     severityInformational: string;
     severityCritical: string;

package/dist/library/localize.test.js

@@ -9,17 +9,17 @@ import { customElement } from 'lit/decorators.js';
 import { expect, fixture, html } from '@open-wc/testing';
 import en from '../translations/en.js';
 import { LocalizeController } from './localize.js';
-let GlideCoreMockComponent = class GlideCoreMockComponent extends LitElement {
+let Component = class Component extends LitElement {
     constructor() {
         super(...arguments);
         this.localize = new LocalizeController(this);
     }
 };
-GlideCoreMockComponent = __decorate([
-    customElement('mock-host')
-], GlideCoreMockComponent);
+Component = __decorate([
+    customElement('glide-core-component')
+], Component);
 it('can call any term from en translation if locale is Japanese', async () => {
-    const host = await fixture(html `<mock-host></mock-host>`);
+    const host = await fixture(html `<glide-core-component></glide-core-component>`);
     host.lang = 'ja';
     expect(host.localize.lang()).to.equal('ja');
     const keys = Object.keys(en);
@@ -28,7 +28,7 @@ it('can call any term from en translation if locale is Japanese', async () => {
     }
 });
 it('can call any term from en translation if locale is French', async () => {
-    const host = await fixture(html `<mock-host></mock-host>`);
+    const host = await fixture(html `<glide-core-component></glide-core-component>`);
     host.lang = 'fr';
     expect(host.localize.lang()).to.equal('fr');
     const keys = Object.keys(en);