@crowdstrike/glide-core 0.27.0 → 0.28.0

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
@@ -140,15 +140,16 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .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) *
           2 + var(--private-border-width) * 2
       );
       overflow: auto;
-      scroll-behavior: smooth;
+
+      @media (prefers-reduced-motion: no-preference) {
+        scroll-behavior: smooth;
+      }
 
       &.hidden {
         display: none;
@@ -157,58 +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 {
-      --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;
-
-      &: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);
       }
     }
 
@@ -374,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

@@ -10,7 +10,7 @@ declare global {
  * @readonly
  * @attr {string} [version]
  *
- * @slot {Checkbox | CheckboxGroup | Dropdown | RadioGroup | Input | TextArea}
+ * @slot {Checkbox | CheckboxGroup | Dropdown | Input | RadioGroup | Slider | TextArea}
  */
 export default class FormControlsLayout extends LitElement {
     #private;

package/dist/form-controls-layout.js

@@ -1 +1 @@
-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;
+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/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/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/library/form-control.d.ts

@@ -10,7 +10,7 @@ export default interface FormControl {
     summary?: string;
     tooltip?: string;
     validity: ValidityState;
-    value: string | string[];
+    value: string | string[] | number[];
     checkValidity(): boolean;
     formAssociatedCallback(): void;
     formResetCallback(): void;

package/dist/library/localize.d.ts

@@ -22,6 +22,7 @@ export interface Translation extends DefaultTranslation {
     error: string;
     informational: string;
     loading: string;
+    add: string;
     announcedCharacterCount: (current: number, maximum: number) => string;
     displayedCharacterCount: (current: number, maximum: number) => string;
     clearEntry: (label: string) => string;
@@ -29,4 +30,8 @@ export interface Translation extends DefaultTranslation {
     editTag: (name: string) => string;
     removeTag: (name: string) => string;
     itemCount: (count: string) => string;
+    maximum: (label: string) => string;
+    setMaximum: (label: string) => string;
+    minimum: (label: string) => string;
+    setMinimum: (label: string) => string;
 }

package/dist/menu.button.styles.js

@@ -6,10 +6,10 @@ import{css}from"lit";export default[css`
       border-radius: var(--glide-core-spacing-base-sm);
       display: flex;
       font: inherit;
-      gap: var(--private-gap);
+      gap: var(--glide-core-spacing-base-sm);
       inline-size: 100%;
-      padding-block: var(--private-padding-block);
-      padding-inline: var(--private-padding-inline);
+      padding-block: var(--glide-core-spacing-base-xxs);
+      padding-inline: var(--glide-core-spacing-base-sm);
       transition: background-color 100ms ease-in-out;
       user-select: none;
 

package/dist/menu.link.styles.js

@@ -7,10 +7,10 @@ import{css}from"lit";export default[css`
       box-sizing: border-box;
       display: flex;
       font: inherit;
-      gap: var(--private-gap);
+      gap: var(--glide-core-spacing-base-sm);
       inline-size: 100%;
-      padding-block: var(--private-padding-block);
-      padding-inline: var(--private-padding-inline);
+      padding-block: var(--glide-core-spacing-base-xxs);
+      padding-inline: var(--glide-core-spacing-base-sm);
       text-decoration: none;
       transition: background-color 100ms ease-in-out;
       user-select: none;

package/dist/menu.options.styles.js

@@ -7,10 +7,6 @@ import{css}from"lit";import skeleton from"./styles/skeleton.js";export default[c
     }
 
     .component {
-      --private-gap: var(--glide-core-spacing-base-sm);
-      --private-padding-inline: var(--glide-core-spacing-base-sm);
-      --private-padding-block: var(--glide-core-spacing-base-xxs);
-
       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);

package/dist/slider.d.ts

@@ -0,0 +1,116 @@
+import './label.js';
+import { LitElement } from 'lit';
+import type FormControl from './library/form-control.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-slider': Slider;
+    }
+}
+/**
+ * @attr {string} label
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [hide-label=false]
+ * @attr {number} [max=100]
+ * @attr {number} [min=0]
+ * @attr {boolean} [multiple=false]
+ * @attr {string} [name='']
+ * @attr {'horizontal'|'vertical'} [orientation='horizontal']
+ * @attr {boolean} [readonly=false]
+ * @attr {boolean} [required=false]
+ * @attr {number} [step=1]
+ * @attr {string} [tooltip]
+ * @attr {number[]} [value=[]]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element | string} [description] - Additional information or context
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ * @fires {Event} invalid
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method resetValidityFeedback
+ *
+ * @method setCustomValidity
+ * @param {string} message
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ * @param {string} [message]
+ */
+export default class Slider extends LitElement implements FormControl {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    name: string;
+    /**
+     * @default []
+     */
+    get value(): number[];
+    set value(value: number[]);
+    label?: string;
+    orientation: 'horizontal' | 'vertical';
+    hideLabel: boolean;
+    required: boolean;
+    readonly: boolean;
+    disabled: boolean;
+    /**
+     * @default 100
+     */
+    get max(): number;
+    set max(max: number);
+    /**
+     * @default 0
+     */
+    get min(): number;
+    set min(min: number);
+    /**
+     * @default false
+     */
+    get multiple(): boolean;
+    set multiple(multiple: boolean);
+    /**
+     * @default 1
+     */
+    get step(): number;
+    set step(step: number);
+    privateSplit?: 'left' | 'middle';
+    readonly version: string;
+    tooltip?: string;
+    get form(): HTMLFormElement | null;
+    get validity(): ValidityState;
+    checkValidity(): boolean;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    resetValidityFeedback(): void;
+    setCustomValidity(message: string): void;
+    setValidity(flags?: ValidityStateFlags, message?: string): void;
+    constructor();
+    private isBlurring;
+    private isCheckingValidity;
+    private isReportValidityOrSubmit;
+    private maximumValue?;
+    private minimumValue?;
+    private validityMessage?;
+}

package/dist/slider.js

@@ -0,0 +1,168 @@
+var __decorate=this&&this.__decorate||function(e,i,t,a){var s,n=arguments.length,l=n<3?i:null===a?a=Object.getOwnPropertyDescriptor(i,t):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,i,t,a);else for(var m=e.length-1;m>=0;m--)(s=e[m])&&(l=(n<3?s(l):n>3?s(i,t,l):s(i,t))||l);return n>3&&l&&Object.defineProperty(i,t,l),l};import"./label.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{ifDefined}from"lit/directives/if-defined.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 styles from"./slider.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Slider=class Slider extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get value(){return this.multiple&&void 0!==this.minimumValue&&void 0!==this.maximumValue?[this.minimumValue,this.maximumValue]:void 0!==this.minimumValue?[this.minimumValue]:[]}set value(e){if(0===e.length){const e=this.max-this.min;return this.minimumValue=this.min+Math.floor(.25*e),this.maximumValue=this.multiple?this.min+Math.ceil(.75*e):void 0,void this.#e()}if(this.multiple&&2===e.length&&void 0!==e[0]&&void 0!==e[1]){if(e[0]>e[1])throw new Error("The first value must be less than the second.");const i=Math.round(e[0]/this.step)*this.step,t=Math.round(e[1]/this.step)*this.step;return this.minimumValue=Math.max(i,this.min),this.maximumValue=Math.min(t,this.max),void this.#e()}if(this.multiple&&e.length>2)throw new Error("Only two values are allowed when `multiple`.");if(!this.multiple&&e.length>0&&void 0!==e[0]){const i=Math.round(e[0]/this.step)*this.step;return this.minimumValue=Math.max(Math.min(i,this.max),this.min),this.maximumValue=void 0,void this.#e()}}get max(){return this.#i}set max(e){this.#i=e,this.maximumValue=Math.min(this.maximumValue??this.#i,e),void 0!==this.minimumValue&&this.minimumValue>e&&(this.minimumValue=this.multiple&&void 0!==this.maximumValue?Math.min(e,this.maximumValue-this.step):e),this.#e()}get min(){return this.#t}set min(e){this.#t=e,this.minimumValue=Math.max(this.minimumValue??this.#t,e),this.multiple?void 0!==this.maximumValue&&this.maximumValue<e&&(this.maximumValue=Math.max(e,this.minimumValue+this.step)):this.maximumValue=void 0,this.#e()}get multiple(){return this.#a}set multiple(e){const i=this.#a;if(this.#a=e,i&&!e)return this.maximumValue=void 0,void this.updateComplete.then((()=>{this.#e()}));if(!i&&e&&void 0!==this.minimumValue){const e=this.max-this.min,i=this.min+Math.ceil(.75*e);this.minimumValue>=i?(this.maximumValue=this.max,this.minimumValue>=this.maximumValue&&(this.minimumValue=this.maximumValue-this.step)):this.maximumValue=i,this.updateComplete.then((()=>{this.#e()}))}}get step(){return this.#s}set step(e){this.#s=e>0?e:1}get form(){return this.#n.form}get validity(){return this.#n.validity}checkValidity(){this.isCheckingValidity=!0;const e=this.#n.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#l),document.removeEventListener("mousemove",this.#m),document.removeEventListener("mouseup",this.#h)}firstUpdated(){if(!this.multiple&&1===this.value.length)return this.minimumValue=this.value.at(0),this.#d=this.value,void this.#e();if(this.multiple&&2===this.value.length)return this.minimumValue=this.value.at(0),this.maximumValue=this.value.at(1),void 0!==this.minimumValue&&void 0!==this.maximumValue&&(this.#d=[this.minimumValue,this.maximumValue]),void this.#e();if(!this.value||0===this.value.length){const e=this.max-this.min;this.minimumValue=this.min+Math.floor(.25*e),this.maximumValue=this.multiple?this.min+Math.ceil(.75*e):void 0,this.#d=this.multiple&&void 0!==this.maximumValue?[this.minimumValue,this.maximumValue]:[this.minimumValue],this.#e()}}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#l.bind(this))}formResetCallback(){this.value=this.#d}render(){return html`
+      <glide-core-private-label
+        class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
+        label=${ifDefined(this.label)}
+        orientation=${this.orientation}
+        split=${ifDefined(this.privateSplit??void 0)}
+        tooltip=${ifDefined(this.tooltip)}
+        ?disabled=${this.disabled}
+        ?error=${this.#u}
+        ?hide=${this.hideLabel}
+        ?required=${this.required}
+      >
+        <label>${this.label}</label>
+
+        <div
+          class=${classMap({"slider-container":!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#u})}
+          slot="control"
+        >
+          ${when(this.multiple,(()=>html`<input
+                  aria-describedby="meta"
+                  aria-label=${this.#r.term("setMinimum",this.label)}
+                  aria-invalid=${this.#u}
+                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  data-test="minimum-input"
+                  max=${ifDefined(this.maximumValue?this.maximumValue-this.step:void 0)}
+                  min=${this.min}
+                  step=${this.step}
+                  type="number"
+                  .value=${this.minimumValue?.toString()??""}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @change=${this.#o.bind(this)}
+                  @input=${this.#p}
+                  @keydown=${this.#c}
+                  ${ref(this.#v)}
+                />
+
+                <div class="track-container">
+                  <div
+                    class=${classMap({"unfilled-track":!0,disabled:this.disabled})}
+                    data-test="slider"
+                    role="group"
+                    @click=${this.#f.bind(this)}
+                    ${ref(this.#b)}
+                  >
+                    <div
+                      class=${classMap({"filled-track":!0,disabled:this.disabled})}
+                      ${ref(this.#g)}
+                    ></div>
+
+                    <div
+                      aria-disabled=${this.disabled}
+                      aria-label=${this.#r.term("minimum",this.label)}
+                      aria-readonly=${this.readonly}
+                      aria-valuemin=${this.min}
+                      aria-valuemax=${this.max}
+                      aria-valuenow=${ifDefined(this.minimumValue)}
+                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      data-test="minimum-handle"
+                      role="slider"
+                      tabindex="0"
+                      @mousedown=${this.#y.bind(this)}
+                      @keydown=${this.#V.bind(this)}
+                      ${ref(this.#x)}
+                    ></div>
+
+                    <div
+                      aria-disabled=${this.disabled}
+                      aria-label=${this.#r.term("maximum",this.label)}
+                      aria-readonly=${this.readonly}
+                      aria-valuemin=${this.min}
+                      aria-valuemax=${this.max}
+                      aria-valuenow=${ifDefined(this.maximumValue)}
+                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      data-test="maximum-handle"
+                      role="slider"
+                      tabindex="0"
+                      @mousedown=${this.#E.bind(this)}
+                      @keydown=${this.#M.bind(this)}
+                      ${ref(this.#$)}
+                    ></div>
+                  </div>
+                </div>
+
+                <input
+                  aria-label=${this.#r.term("setMaximum",this.label)}
+                  aria-invalid=${this.#u}
+                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  data-test="maximum-input"
+                  max=${this.max}
+                  min=${ifDefined(this.minimumValue?this.minimumValue+this.step:void 0)}
+                  step=${this.step}
+                  type="number"
+                  .value=${this.maximumValue?.toString()??""}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @change=${this.#R.bind(this)}
+                  @input=${this.#w}
+                  @keydown=${this.#c}
+                  ${ref(this.#k)}
+                />`),(()=>html`<div class="track-container single">
+                  <div
+                    class=${classMap({"unfilled-track":!0,disabled:this.disabled})}
+                    data-test="slider"
+                    role="group"
+                    @click=${this.#f.bind(this)}
+                    ${ref(this.#b)}
+                  >
+                    <div
+                      class=${classMap({"filled-track":!0,disabled:this.disabled})}
+                      ${ref(this.#g)}
+                    ></div>
+
+                    <div
+                      aria-describedby="meta"
+                      aria-disabled=${this.disabled}
+                      aria-label=${ifDefined(this.label)}
+                      aria-readonly=${this.readonly}
+                      aria-valuemin=${this.min}
+                      aria-valuemax=${this.max}
+                      aria-valuenow=${ifDefined(this.minimumValue)}
+                      class=${classMap({handle:!0,disabled:this.disabled,readonly:this.readonly&&!this.disabled})}
+                      data-test="single-handle"
+                      role="slider"
+                      tabindex="0"
+                      @mousedown=${this.#H.bind(this)}
+                      @keydown=${this.#S.bind(this)}
+                      ${ref(this.#D)}
+                    ></div>
+                  </div>
+                </div>
+
+                <input
+                  aria-label=${ifDefined(this.label)}
+                  aria-invalid=${this.#u}
+                  class=${classMap({input:!0,disabled:this.disabled,error:this.#u,readonly:this.readonly&&!this.disabled})}
+                  data-test="single-input"
+                  max=${this.max}
+                  min=${this.min}
+                  step=${this.step}
+                  type="number"
+                  .value=${this.minimumValue?.toString()??""}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  @change=${this.#_.bind(this)}
+                  @input=${this.#I.bind(this)}
+                  @keydown=${this.#c}
+                  ${ref(this.#A)}
+                />`))}
+        </div>
+
+        <div class="meta" id="meta" slot="description">
+          <slot
+            class=${classMap({description:!0,hidden:Boolean(this.#u&&this.validityMessage)})}
+            name="description"
+          >
+            <!--
+              Additional information or context
+              @type {Element | string}
+            -->
+          </slot>
+
+          ${when(this.#u&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+                >${unsafeHTML(this.validityMessage)}</span
+              >`))}
+        </div>
+      </glide-core-private-label>
+    `}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#n.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#n.setValidity({customError:!1},"",this.#C.value):this.#n.setValidity({customError:!0,patternMismatch:this.#n.validity.patternMismatch,valueMissing:this.#n.validity.valueMissing}," ",this.#C.value)}setValidity(e,i){this.validityMessage=i,this.#n.setValidity(e," ",this.#C.value)}constructor(){super(),this.name="",this.orientation="horizontal",this.hideLabel=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#T=!1,this.#d=[],this.#C=createRef(),this.#r=new LocalizeController(this),this.#i=100,this.#$=createRef(),this.#k=createRef(),this.#t=0,this.#x=createRef(),this.#v=createRef(),this.#a=!1,this.#D=createRef(),this.#A=createRef(),this.#b=createRef(),this.#g=createRef(),this.#s=1,this.#m=e=>{e.preventDefault();const i=this.#b.value;if(i&&this.#F){const{clientX:t}=e;if(void 0!==t){const e=i.getBoundingClientRect();this.#L(t,this.#F,e)}}},this.#h=()=>{this.#F&&(document.removeEventListener("mousemove",this.#m),document.removeEventListener("mouseup",this.#h),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})),this.#T=!0,this.#F=void 0,setTimeout((()=>{this.#T=!1})))},this.#n=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#F;#T;#d;#C;#n;#r;#i;#$;#k;#t;#x;#v;#a;#D;#A;#b;#g;#s;get#u(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#m;#h;#L(e,i,t){const a=(e-t.left)/t.width*(this.max-this.min)+this.min,s=Math.round(a/this.step)*this.step;if(this.multiple){if(i===this.#x.value&&void 0!==this.maximumValue){const e=Math.min(Math.max(s,this.min),this.maximumValue-this.step);if(e!==this.minimumValue)return this.minimumValue=e,this.#e(),void this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}if(i===this.#$.value&&void 0!==this.minimumValue){const e=Math.min(Math.max(s,this.minimumValue+this.step),this.max);if(e!==this.maximumValue)return this.maximumValue=e,this.#e(),void this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}else{const e=Math.min(Math.max(s,this.min),this.max);e!==this.minimumValue&&(this.minimumValue=e,this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})))}}#l(e){this.name&&this.value&&!this.disabled&&e.formData.append(this.name,JSON.stringify(this.value))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#M(e){this.#$.value&&this.#j(e,this.#$.value)}#E(e){this.#$.value&&this.#K(e,this.#$.value)}#R(){if(this.#k.value&&void 0!==this.minimumValue){const e=Number(this.#k.value.value),i=Math.round(e/this.step)*this.step;this.maximumValue=Math.min(Math.max(i,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#w(){if(this.#k.value){const e=Number(this.#k.value.value);void 0!==this.minimumValue&&e>=this.minimumValue&&(this.maximumValue=Math.min(e,this.max),this.#e())}}#V(e){this.#x.value&&this.#j(e,this.#x.value)}#y(e){this.#x.value&&this.#K(e,this.#x.value)}#o(){if(this.#v.value&&void 0!==this.maximumValue){const e=Number(this.#v.value.value),i=Math.round(e/this.step)*this.step;this.minimumValue=Math.min(Math.max(i,this.min),this.maximumValue-this.step),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#p(){if(this.#v.value){const e=Number(this.#v.value.value);void 0!==this.maximumValue&&e<=this.maximumValue&&(this.minimumValue=Math.max(e,this.min),this.#e())}}#j(e,i){if(!this.disabled&&!this.readonly&&void 0!==this.minimumValue&&void 0!==this.maximumValue){const t=i===this.#x.value;let a=t?this.minimumValue:this.maximumValue;switch(e.key){case"ArrowLeft":case"ArrowDown":a-=this.step;break;case"ArrowRight":case"ArrowUp":a+=this.step;break;case"PageDown":a-=10*this.step;break;case"PageUp":a+=10*this.step;break;case"Home":a=t?this.min:this.minimumValue+this.step;break;case"End":a=t?this.maximumValue-this.step:this.max;break;case"Enter":return void this.form?.requestSubmit();default:return}e.preventDefault(),t?this.minimumValue=Math.min(Math.max(a,this.min),this.maximumValue-this.step):this.maximumValue=Math.min(Math.max(a,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#S(e){if(this.disabled||this.readonly)return;if(this.#D.value&&void 0!==this.minimumValue){let i=this.minimumValue;switch(e.key){case"ArrowLeft":case"ArrowDown":i-=this.step;break;case"ArrowRight":case"ArrowUp":i+=this.step;break;case"PageDown":i-=10*this.step;break;case"PageUp":i+=10*this.step;break;case"Home":i=this.min;break;case"End":i=this.max;break;case"Enter":return void this.form?.requestSubmit();default:return}e.preventDefault(),this.minimumValue=Math.min(Math.max(i,this.min),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#H(e){this.#D.value&&this.#K(e,this.#D.value)}#_(){if(this.#A.value){const e=Number(this.#A.value.value),i=Math.round(e/this.step)*this.step;this.minimumValue=Math.min(Math.max(i,this.min),this.max),this.#e(),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#I(){if(this.#A.value){const e=Number(this.#A.value.value);e>=0&&(this.minimumValue=Math.min(e,this.max),this.#e())}}#f(e){if(this.disabled||this.readonly)return;if(e.target===this.#x.value||e.target===this.#$.value||e.target===this.#D.value||this.#T)return;const i=this.#b.value;if(i){const t=i.getBoundingClientRect(),a=(e.clientX-t.left)/t.width*(this.max-this.min)+this.min,s=Math.round(a/this.step)*this.step;if(this.multiple&&void 0!==this.minimumValue&&void 0!==this.maximumValue){return Math.abs(s-this.minimumValue)<=Math.abs(s-this.maximumValue)?this.minimumValue=Math.min(Math.max(s,this.min),this.maximumValue-this.step):this.maximumValue=Math.min(Math.max(s,this.minimumValue+this.step),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}this.minimumValue=Math.min(Math.max(s,this.min),this.max),this.#e(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}#K(e,i){if(this.disabled||this.readonly)return;e.preventDefault();const t=this.#b.value;t&&(this.#F=i,document.addEventListener("mousemove",this.#m),document.addEventListener("mouseup",this.#h),this.#L(e.clientX,i,t.getBoundingClientRect()))}#e(){const e=this.#g.value,i=this.#D.value,t=this.#x.value,a=this.#$.value;if(e&&void 0!==this.minimumValue){if(!this.multiple&&i){const t=this.max-this.min,a=(this.minimumValue-this.min)/t*100;return i.style.left=`${a}%`,e.style.left="0",void(e.style.width=`${a}%`)}if(void 0!==this.maximumValue&&t&&a){const i=this.max-this.min,s=(this.minimumValue-this.min)/i*100,n=(this.maximumValue-this.min)/i*100;t.style.left=`${s}%`,a.style.left=`${n}%`,e.style.left=`${s}%`,e.style.width=n-s+"%"}}}};__decorate([property({reflect:!0,useDefault:!0})],Slider.prototype,"name",void 0),__decorate([property({type:Array})],Slider.prototype,"value",null),__decorate([property({reflect:!0}),required],Slider.prototype,"label",void 0),__decorate([property({reflect:!0,useDefault:!0})],Slider.prototype,"orientation",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],Slider.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Slider.prototype,"required",void 0),__decorate([property({type:Boolean})],Slider.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],Slider.prototype,"disabled",void 0),__decorate([property({reflect:!0,type:Number})],Slider.prototype,"max",null),__decorate([property({reflect:!0,type:Number})],Slider.prototype,"min",null),__decorate([property({type:Boolean})],Slider.prototype,"multiple",null),__decorate([property({reflect:!0,type:Number,useDefault:!0})],Slider.prototype,"step",null),__decorate([property()],Slider.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],Slider.prototype,"version",void 0),__decorate([property({reflect:!0})],Slider.prototype,"tooltip",void 0),__decorate([state()],Slider.prototype,"isBlurring",void 0),__decorate([state()],Slider.prototype,"isCheckingValidity",void 0),__decorate([state()],Slider.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Slider.prototype,"maximumValue",void 0),__decorate([state()],Slider.prototype,"minimumValue",void 0),__decorate([state()],Slider.prototype,"validityMessage",void 0),Slider=__decorate([customElement("glide-core-slider"),final],Slider);export default Slider;

package/dist/slider.styles.d.ts

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