@crowdstrike/glide-core 0.26.1 → 0.28.0

package/dist/dropdown.option.styles.js

@@ -23,29 +23,15 @@ import{css}from"lit";export default[css`
       color: var(--glide-core-color-static-text-default);
       display: flex;
       flex-grow: 1;
+      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);
       overflow: hidden;
+      padding-inline-start: 0.625rem;
       user-select: none;
 
-      &.large {
-        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-inline-start: 0.625rem;
-
-        &:not(.count, .editable) {
-          padding-inline-end: var(--glide-core-spacing-base-sm);
-        }
-      }
-
-      &.small {
-        font-family: var(--glide-core-typography-family-primary);
-        font-size: var(--glide-core-typography-size-body-small);
-        font-weight: var(--glide-core-typography-weight-regular);
-        padding-inline-start: var(--glide-core-spacing-base-sm);
-
-        &:not(.count, .editable) {
-          padding-inline-end: var(--glide-core-spacing-base-xs);
-        }
+      &:not(.count, .editable) {
+        padding-inline-end: var(--glide-core-spacing-base-sm);
       }
 
       &.disabled {
@@ -57,33 +43,16 @@ import{css}from"lit";export default[css`
       flex-grow: 1;
       overflow: hidden;
 
-      &.large {
-        &::part(private-label-and-input-and-checkbox) {
-          padding-inline-start: var(--glide-core-spacing-base-sm);
-        }
-
-        &:not(.count, .editable) {
-          &::part(private-label-and-input-and-checkbox) {
-            padding-inline-end: var(--glide-core-spacing-base-sm);
-          }
-        }
+      &::part(private-label-and-input-and-checkbox) {
+        block-size: var(--private-option-height);
+        padding-inline-start: var(--glide-core-spacing-base-sm);
       }
 
-      &.small {
+      &:not(.count, .editable) {
         &::part(private-label-and-input-and-checkbox) {
-          padding-inline-start: var(--glide-core-spacing-base-xs);
-        }
-
-        &:not(.count, .editable) {
-          &::part(private-label-and-input-and-checkbox) {
-            padding-inline-end: var(--glide-core-spacing-base-xs);
-          }
+          padding-inline-end: var(--glide-core-spacing-base-sm);
         }
       }
-
-      &::part(private-label-and-input-and-checkbox) {
-        block-size: var(--private-option-height);
-      }
     }
 
     .indeterminate-icon {
@@ -91,47 +60,21 @@ import{css}from"lit";export default[css`
     }
 
     .icon-slot {
-      &.large {
-        &::slotted(*) {
-          block-size: 1rem;
-          inline-size: 1rem;
-        }
-      }
-
-      &.small {
-        &::slotted(*) {
-          block-size: 0.75rem;
-          inline-size: 0.75rem;
-        }
-      }
-
       &::slotted(*) {
         align-items: center;
+        block-size: 1rem;
         display: flex;
+        inline-size: 1rem;
         padding-inline-end: var(--glide-core-spacing-base-xs);
       }
     }
 
     .checkbox-icon-slot {
-      &.large {
-        &::slotted(*) {
-          block-size: 1rem;
-          inline-size: 1rem;
-        }
-      }
-
-      &.small {
-        &::slotted(*) {
-          block-size: 0.75rem;
-          inline-size: 0.75rem;
-        }
-      }
-
       &::slotted(*) {
         align-items: center;
-        block-size: 0.75rem;
+        block-size: 1rem;
         display: flex;
-        inline-size: 0.75rem;
+        inline-size: 1rem;
       }
     }
 
@@ -178,13 +121,7 @@ import{css}from"lit";export default[css`
       }
 
       &:not(.count) {
-        &.large {
-          padding-inline-end: var(--glide-core-spacing-base-sm);
-        }
-
-        &.small {
-          padding-inline-end: var(--glide-core-spacing-base-xs);
-        }
+        padding-inline-end: var(--glide-core-spacing-base-sm);
       }
 
       &:focus {

package/dist/dropdown.styles.js

@@ -1,6 +1,5 @@
-import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";import skeleton from"./styles/skeleton.js";export default[css`
-    ${focusOutline(".add-button:focus-visible")}
-    ${opacityAndScaleAnimation(".options-and-footer:popover-open")}
+import{css}from"lit";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";import skeleton from"./styles/skeleton.js";export default[css`
+    ${opacityAndScaleAnimation(".options-and-feedback:popover-open")}
     ${skeleton(".loading-feedback")}
     ${visuallyHidden(".item-count")}
     ${visuallyHidden(".selected-option-labels")}
@@ -112,8 +111,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .options-and-footer {
+    .options-and-feedback {
       --private-border-width: 1px;
+      --private-option-height: 1.75rem;
 
       background-color: var(
         --glide-core-private-color-dialog-and-modal-surface-container
@@ -146,14 +146,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
           2 + var(--private-border-width) * 2
       );
       overflow: auto;
-      scroll-behavior: smooth;
 
-      &.large {
-        --private-option-height: 1.75rem;
-      }
-
-      &.small {
-        --private-option-height: 1.25rem;
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
       }
 
       &.hidden {
@@ -163,70 +158,9 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
 
     .default-slot {
       display: block;
-      padding: var(--glide-core-spacing-base-xxxs);
-    }
-
-    .footer {
-      background-color: var(--glide-core-color-static-surface-header);
-      display: none;
-      inline-size: calc(100% - var(--glide-core-spacing-base-xxxs) * 2);
-      inset-block-end: 0;
-      padding: var(--glide-core-spacing-base-xxxs);
-
-      /*
-        "sticky" is a little hack so that footer is absolutely positioned but
-        its space in layout is preserved, so it doesn't overlap the last option.
-      */
-      position: sticky;
-
-      &.visible {
-        display: block;
-      }
-    }
-
-    .add-button {
-      align-items: center;
-      background-color: transparent;
-      border: none;
-      border-radius: var(--glide-core-rounding-base-radius-md);
-      display: flex;
-      font-family: var(--glide-core-typography-family-primary);
-      font-weight: var(--glide-core-typography-weight-regular);
-      inline-size: 100%;
-      line-height: 100%;
-      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;
-      }
-
-      &:focus-visible {
-        outline-offset: -2px;
-      }
 
-      &:focus,
-      &:hover {
-        background-color: var(
-          --glide-core-color-interactive-surface-container--hover
-        );
+      &:not(.optionless) {
+        padding: var(--glide-core-spacing-base-xxxs);
       }
     }
 
@@ -392,6 +326,55 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .add-button-container {
+      padding: var(--glide-core-spacing-base-xxxs);
+
+      /*
+        "sticky" is a little hack so it's absolutely positioned but its space
+        in layout is preserved, so it doesn't overlap the last option.
+      */
+      position: sticky;
+
+      &.bordered {
+        border-block-start: 1px solid
+          var(--glide-core-color-static-stroke-secondary);
+        padding-block-start: var(--glide-core-spacing-base-xxxs);
+      }
+    }
+
+    .add-button {
+      align-items: center;
+      background-color: transparent;
+      block-size: var(--private-option-height);
+      border-radius: var(--glide-core-spacing-base-sm);
+      border-width: 0;
+      display: flex;
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-default);
+      inline-size: 100%;
+      max-inline-size: 21.875rem;
+      padding-inline: 0.625rem;
+      transition: background-color 100ms ease-in-out;
+      user-select: none;
+      white-space: nowrap;
+
+      &.active {
+        background-color: var(
+          --glide-core-color-interactive-surface-container--hover
+        );
+      }
+    }
+
+    .add-button-label {
+      font-weight: var(--glide-core-typography-weight-bold);
+      overflow-x: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .add-button-description {
+      color: var(--glide-core-color-interactive-text-placeholder);
+    }
+
     .description {
       display: block;
 

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 | Input | RadioGroup | Slider | 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 Input from"./input.js";import RadioGroup from"./radio-group.js";import Slider from"./slider.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,Input,RadioGroup,Slider,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 class="default-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/icons/checked.js

@@ -1 +1 @@
-import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="${styleMap({height:"var(--private-size, 0.875rem)",width:"var(--private-size, 0.875rem)"})}"><path class="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" fill="none" viewBox="0 0 24 24" style="${styleMap({height:"var(--private-size, 0.875rem)",width:"var(--private-size, 0.875rem)"})}"><path class="check" data-test="check" d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

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/input.styles.js

@@ -42,17 +42,19 @@ import{css}from"lit";import visuallyHidden from"./styles/visually-hidden.js";exp
       display: flex;
       min-inline-size: 3.75rem;
       padding-inline: var(--glide-core-spacing-base-sm);
+      transition: border-color 200ms ease-in-out;
 
-      &.focused,
-      &:has(.input:hover) {
+      &.focused {
         border-color: var(--glide-core-color-interactive-stroke-focus);
-        transition: border-color 200ms ease-in-out;
       }
 
-      &:hover,
-      &:has(.input:hover) {
-        border-color: var(--glide-core-color-interactive-stroke-primary--hover);
-        transition: border-color 200ms ease-in-out;
+      &:not(.disabled, .error, .readonly) {
+        &:hover,
+        &:has(.input:hover) {
+          border-color: var(
+            --glide-core-color-interactive-stroke-primary--hover
+          );
+        }
       }
 
       &.error {

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;