@crowdstrike/glide-core 0.32.3 → 0.33.0

package/dist/select.d.ts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+import type FormControl from './library/form-control.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-select': Select;
+    }
+}
+/**
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [loading=false]
+ * @attr {string} [name='']
+ * @attr {number} [offset=4]
+ * @attr {boolean} [open=false]
+ * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start'] - Select will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
+ * @attr {boolean} [required=false]
+ * @attr {string[]} [value=[]]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element}
+ * @slot {Element} target - The element to which Select will anchor. Can be any focusable element. If you want Select to be filterable, put an Input in this slot. Listen for Input's "input" event, then add and remove Option(s) from Select's default slot based on Input's value.
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ */
+export default class Select extends LitElement implements Omit<FormControl, 'hideLabel' | 'orientation' | 'resetValidityFeedback' | 'setCustomValidity'> {
+    #private;
+    static formAssociated: boolean;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    loading: boolean;
+    name: string;
+    /**
+     * @default 4
+     */
+    get offset(): number;
+    set offset(offset: number);
+    /**
+     * @default false
+     */
+    get open(): boolean;
+    set open(isOpen: boolean);
+    /**
+     * Select will try to move itself to the opposite of this value if not doing so would result in overflow.
+     * For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
+     */
+    placement: 'bottom' | 'left' | 'right' | 'top' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' | 'top-start' | 'top-end';
+    /**
+     * @default false
+     */
+    get required(): boolean;
+    set required(isRequired: boolean);
+    /**
+     * @default []
+     */
+    get value(): string[];
+    set value(value: string[]);
+    readonly version: string;
+    get form(): HTMLFormElement | null;
+    checkValidity(): boolean;
+    firstUpdated(): void;
+    formAssociatedCallback(): void;
+    formResetCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+    reportValidity(): boolean;
+    setValidity(flags?: ValidityStateFlags): void;
+    get validity(): ValidityState;
+    constructor();
+    private isCheckingValidity;
+}

package/dist/select.js

@@ -0,0 +1,532 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { customElement, property, state } from 'lit/decorators.js';
+import packageJson from '../package.json' with { type: 'json' };
+import assertSlot from './library/assert-slot.js';
+import styles from './menu.styles.js';
+import final from './library/final.js';
+import Menu from './menu.js';
+import Option from './option.js';
+import Options from './options.js';
+import OptionsGroup from './options.group.js';
+/**
+ * @attr {boolean} [disabled=false]
+ * @attr {boolean} [loading=false]
+ * @attr {string} [name='']
+ * @attr {number} [offset=4]
+ * @attr {boolean} [open=false]
+ * @attr {'bottom'|'left'|'right'|'top'|'bottom-start'|'bottom-end'|'left-start'|'left-end'|'right-start'|'right-end'|'top-start'|'top-end'} [placement='bottom-start'] - Select will try to move itself to the opposite of this value if not doing so would result in overflow. For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
+ * @attr {boolean} [required=false]
+ * @attr {string[]} [value=[]]
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Element}
+ * @slot {Element} target - The element to which Select will anchor. Can be any focusable element. If you want Select to be filterable, put an Input in this slot. Listen for Input's "input" event, then add and remove Option(s) from Select's default slot based on Input's value.
+ *
+ * @fires {Event} change
+ * @fires {Event} input
+ *
+ * @readonly
+ * @prop {HTMLFormElement | null} form
+ *
+ * @readonly
+ * @prop {ValidityState} validity
+ *
+ * @method checkValidity
+ * @returns boolean
+ *
+ * @method formAssociatedCallback
+ * @method formResetCallback
+ *
+ * @method reportValidity
+ * @returns boolean
+ *
+ * @method setValidity
+ * @param {ValidityStateFlags} [flags]
+ */
+let Select = class Select extends LitElement {
+    static { this.formAssociated = true; }
+    /* c8 ignore start */
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
+    }; }
+    /* c8 ignore end */
+    static { this.styles = styles; }
+    /**
+     * @default 4
+     */
+    get offset() {
+        return (this.#offset ??
+            Number.parseFloat(window
+                .getComputedStyle(document.body)
+                .getPropertyValue('--glide-core-spacing-base-xxs')) *
+                Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize));
+    }
+    /* v8 ignore start */
+    set offset(offset) {
+        this.#offset = offset;
+    }
+    /* v8 ignore end */
+    /**
+     * @default false
+     */
+    get open() {
+        return this.#isOpen;
+    }
+    set open(isOpen) {
+        this.#isOpen = isOpen;
+        if (this.#menuElementRef.value) {
+            this.#menuElementRef.value.open = isOpen;
+        }
+    }
+    /**
+     * @default false
+     */
+    get required() {
+        return this.#isRequired;
+    }
+    set required(isRequired) {
+        this.#isRequired = isRequired;
+        this.#setValidity();
+    }
+    /**
+     * @default []
+     */
+    get value() {
+        return this.#value;
+    }
+    set value(value) {
+        if (value.length > 1) {
+            throw this.#tooManySelectedOptionsError;
+        }
+        this.#value = value;
+        if (this.#optionElements) {
+            for (const option of this.#optionElements) {
+                this.#isSelectionFromValueSetter = true;
+                option.selected = false;
+                this.#isSelectionFromValueSetter = false;
+            }
+        }
+        for (const value$ of value) {
+            const option = this.#optionElements?.find((option) => option.value === value$);
+            if (option) {
+                this.#isSelectionFromValueSetter = true;
+                option.selected = true;
+                this.#isSelectionFromValueSetter = false;
+            }
+        }
+        this.#setValidity();
+    }
+    get form() {
+        return this.#internals.form;
+    }
+    checkValidity() {
+        this.isCheckingValidity = true;
+        const isValid = this.#internals.checkValidity();
+        this.isCheckingValidity = false;
+        return isValid;
+    }
+    firstUpdated() {
+        const options = this.querySelector('glide-core-options');
+        if (options) {
+            options.role = 'listbox';
+        }
+        const hasNoSelectedOptions = this.#optionElements?.every(({ selected }) => !selected);
+        // When `value` is set on initial render, its setter is called before
+        // `connectedCallback()` and thus before the default slot has any assigned
+        // elements. So we select options here after the initial render is complete
+        // and `this.#optionElements` isn't empty.
+        //
+        // Additionally, `#onDefaultSlotSlotChange()` is called after `firstUpdated()`
+        // and sets `value` based on which options are selected. And the initial `value`
+        // may conflict with the one derived from which options are selected.
+        //
+        // So we have a decision to make. On first render, do we defer to the initial
+        // `value` and select and deselect options below? Or do we defer to
+        // `#onDefaultSlotSlotChange()` and let that method change `value` from its initial
+        // value?
+        //
+        // It's largely a toss-up. But the latter seems like the logical choice given
+        // `#onDefaultSlotSlotChange()` is called after `firstUpdated()`. In other words,
+        // we defer to the lifecycle. `#onDefaultSlotSlotChange()` is called second. So
+        // it gets to override what `value` was initially.
+        //
+        // If no options are selected, then it's obvious that the consumer's intention is
+        // to select options based on the initial `value`. So we proceed.
+        if (hasNoSelectedOptions) {
+            if (this.value.length > 1) {
+                throw this.#tooManySelectedOptionsError;
+            }
+            for (const value of this.value) {
+                const option = this.#optionElements?.find((option) => option.value === value);
+                if (option) {
+                    option.selected = true;
+                }
+            }
+        }
+        if (this.open && this.#menuElementRef.value) {
+            // Simply passing `this.open` to Menu in the template below would be more
+            // convenient. But, when an attribute's value is an expression, Lit will set the
+            // attribute on a slight delay, and that's a problem when a sub-Menu is also
+            // initially open because it means the sub-Menu wil be opened before the top-level
+            // Menu. So the top-level Menu below will be positioned underneath the sub-Menu.
+            this.#menuElementRef.value.open = true;
+        }
+    }
+    formAssociatedCallback() {
+        this.form?.addEventListener('formdata', this.#onFormdata);
+    }
+    formResetCallback() {
+        if (this.#optionElements) {
+            for (const option of this.#optionElements) {
+                option.selected = option.hasAttribute('selected');
+                if (option.selected) {
+                    this.#value = [option.value];
+                }
+            }
+        }
+    }
+    render() {
+        // Lit-a11y doesn't know that we're not interested in certain keys being pressed.
+        //
+        /* eslint-disable lit-a11y/click-events-have-key-events */
+        return html `<glide-core-menu
+      offset=${this.offset}
+      placement=${this.placement}
+      ?loading=${this.loading}
+      @toggle=${this.#onMenuToggle}
+      ${ref(this.#menuElementRef)}
+    >
+      <slot
+        name="target"
+        slot="target"
+        @click=${this.#onTargetSlotClick}
+        @keydown=${this.#onTargetSlotKeyDown}
+        @slotchange=${this.#onTargetSlotChange}
+        ${assertSlot([Element])}
+        ${ref(this.#targetSlotElementRef)}
+      >
+        <!--
+          The element to which Select will anchor. Can be any focusable element.
+
+          If you want Select to be filterable, put an Input in this slot. Listen for Input's
+          "input" event, then add and remove Option(s) from Select's default slot based on
+          Input's value.
+
+          @required
+          @type {Element}
+        -->
+      </slot>
+
+      <slot
+        @click=${this.#onDefaultSlotClick}
+        @deselected=${this.#onDefaultSlotDeselected}
+        @disabled=${this.#onDefaultSlotDisabled}
+        @selected=${this.#onDefaultSlotSelected}
+        @slotchange=${this.#onDefaultSlotSlotChange}
+        ${ref(this.#defaultSlotElementRef)}
+      >
+        <!--
+          @required
+          @type {Element}
+        -->
+      </slot>
+    </glide-core-menu>`;
+    }
+    reportValidity() {
+        return this.#internals.reportValidity();
+    }
+    setValidity(flags) {
+        this.#hasCustomValidity = true;
+        this.#internals.setValidity(flags, ' ', 
+        // `setValidity()` isn't typed for an SVG. But an SVG is valid as long as it's
+        // focusable. Thus the cast.
+        this.#targetElement);
+    }
+    get validity() {
+        return this.#internals.validity;
+    }
+    constructor() {
+        super();
+        this.disabled = false;
+        this.loading = false;
+        this.name = '';
+        /**
+         * Select will try to move itself to the opposite of this value if not doing so would result in overflow.
+         * For example, if "bottom" results in overflow Menu will try "top" but not "right" or "left".
+         */
+        this.placement = 'bottom-start';
+        this.version = packageJson.version;
+        this.isCheckingValidity = false;
+        this.#defaultSlotElementRef = createRef();
+        this.#hasCustomValidity = false;
+        this.#hasEmittedAnInvalidEvent = false;
+        this.#isOpen = false;
+        this.#isRequired = false;
+        this.#isSelectionFromValueSetter = false;
+        this.#isTargetClickViaEnter = false;
+        this.#menuElementRef = createRef();
+        this.#targetSlotElementRef = createRef();
+        this.#tooManySelectedOptionsError = new Error('Only one option may be selected at a time.');
+        this.#value = [];
+        // An arrow function field instead of a method so `this` is closed over and
+        // set to the component instead of the form.
+        this.#onFormdata = ({ formData }) => {
+            if (this.name && this.value.length > 0 && !this.disabled) {
+                formData.append(this.name, JSON.stringify(this.value));
+            }
+        };
+        this.#internals = this.attachInternals();
+        // Event handlers on the host aren't great because consumers can remove them.
+        // Unfortunately, the host is the only thing on which this event is dispatched
+        // because it's the host that is form-associated.
+        this.addEventListener('invalid', (event) => {
+            // Canceled so the native validation message isn't shown.
+            event.preventDefault();
+            if (this.isCheckingValidity) {
+                return;
+            }
+            this.#hasEmittedAnInvalidEvent = true;
+            const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
+            if (isFirstInvalidFormElement) {
+                // Canceling the event means the target won't get focus, even if we were to use
+                // `delegatesFocus`. So we have to it focus manually.
+                this.#targetElement?.focus();
+            }
+            if (this.#targetElement) {
+                this.#targetElement.ariaInvalid = this.validity.valid
+                    ? 'false'
+                    : 'true';
+            }
+        });
+    }
+    #defaultSlotElementRef;
+    #hasCustomValidity;
+    #hasEmittedAnInvalidEvent;
+    #internals;
+    #isOpen;
+    #isRequired;
+    #isSelectionFromValueSetter;
+    #isTargetClickViaEnter;
+    #menuElementRef;
+    #offset;
+    #targetSlotElementRef;
+    #tooManySelectedOptionsError;
+    #value;
+    get #optionElements() {
+        if (this.#optionsElement) {
+            return [...this.#optionsElement.children]
+                .filter((element) => {
+                return element instanceof Option || element instanceof OptionsGroup;
+            })
+                .flatMap((element) => {
+                return element instanceof OptionsGroup
+                    ? [
+                        ...element.querySelectorAll(':scope > glide-core-option'),
+                    ]
+                    : element;
+            });
+        }
+    }
+    get #optionsElement() {
+        const firstAssignedElement = this.#defaultSlotElementRef.value
+            ?.assignedElements({ flatten: true })
+            .at(0);
+        return firstAssignedElement instanceof Options
+            ? firstAssignedElement
+            : null;
+    }
+    // An arrow function field instead of a method so `this` is closed over and
+    // set to the component instead of the form.
+    #onFormdata;
+    #onDefaultSlotClick(event) {
+        const isSubMenuOption = this.#optionElements?.every((option) => option !== event.target);
+        if (isSubMenuOption) {
+            return;
+        }
+        if (event.target instanceof Option && !event.target.selected) {
+            if (this.#optionElements) {
+                for (const option of this.#optionElements) {
+                    if (option.selected) {
+                        option.selected = false;
+                    }
+                }
+            }
+            if (this.#menuElementRef.value) {
+                // Menu waits a tick or so before closing after an Option is clicked to give its
+                // consumers a chance to cancel the event and prevent Menu from closing.
+                //
+                // When `selected` is set below, the Option will rerender to include a checkmark.
+                // If the Option has a sub-Menu, the Option will also move its sub-Menu target so
+                // it's to the left of the checkmark.
+                //
+                // Because Menu doesn't close immediately, the user will see the checkmark suddenly
+                // appear and the sub-Menu's target move moments before Menu closes.
+                //
+                // To avoid all that, we close Menu ourselves before setting `selected`.
+                this.#menuElementRef.value.open = false;
+            }
+            event.target.selected = true;
+            this.#value = [event.target.value];
+            this.dispatchEvent(new Event('input', {
+                bubbles: true,
+                composed: true,
+            }));
+            this.dispatchEvent(new Event('change', {
+                bubbles: true,
+                composed: true,
+            }));
+        }
+    }
+    #onDefaultSlotDeselected() {
+        if (this.#isSelectionFromValueSetter) {
+            return;
+        }
+        this.#value = [];
+        this.#setValidity();
+    }
+    #onDefaultSlotDisabled(event) {
+        if (event.target instanceof Option && event.target.selected) {
+            event.target.selected = false;
+        }
+    }
+    #onDefaultSlotSelected(event) {
+        if (this.#targetElement) {
+            // The `label` of the selected Option(s) should actually be read before the label
+            // or text content of the target. But we don't always know what the target's label
+            // is because the target is an arbitrary element.
+            //
+            // For example, it could be a custom element without `textContent`. Button is like
+            // this. Button doesn't have any `textContent` because nothing gets slotted into
+            // it. Yet it is labeled.
+            //
+            // So the best we can do is set `ariaDescription`.
+            this.#targetElement.ariaDescription = this.#optionElements
+                ? this.#optionElements
+                    .filter(({ selected }) => selected)
+                    .map(({ label }) => label)
+                    .join(',')
+                : '';
+        }
+        if (this.#isSelectionFromValueSetter) {
+            return;
+        }
+        if (event.target instanceof Option && this.#optionElements) {
+            for (const option of this.#optionElements) {
+                if (option !== event.target) {
+                    option.selected = false;
+                }
+            }
+            this.#value = [event.target.value];
+        }
+        this.#setValidity();
+    }
+    #onDefaultSlotSlotChange() {
+        const selectedOptions = this.#optionElements &&
+            this.#optionElements.filter(({ selected }) => selected);
+        if (selectedOptions && selectedOptions.length > 1) {
+            throw this.#tooManySelectedOptionsError;
+        }
+        const selectedOption = selectedOptions?.at(0);
+        if (selectedOption) {
+            this.#value = [selectedOption.value];
+        }
+        if (this.#optionElements) {
+            for (const option of this.#optionElements) {
+                option.role = 'option';
+            }
+        }
+        this.#setValidity();
+    }
+    #onMenuToggle(event) {
+        if (event.target instanceof Menu &&
+            event.target === this.#menuElementRef.value) {
+            this.open = event.target.open;
+        }
+    }
+    #onTargetSlotChange() {
+        if (this.#targetElement) {
+            this.#targetElement.ariaInvalid =
+                !this.#hasEmittedAnInvalidEvent || this.validity.valid
+                    ? 'false'
+                    : 'true';
+        }
+    }
+    #onTargetSlotClick(event) {
+        if (this.#isTargetClickViaEnter) {
+            this.#isTargetClickViaEnter = false;
+            event.preventDefault(); // Prevent Menu from opening.
+        }
+    }
+    #onTargetSlotKeyDown(event) {
+        if (event.key === 'Enter' && !this.open) {
+            this.#isTargetClickViaEnter = true;
+            this.form?.requestSubmit();
+        }
+    }
+    #setValidity() {
+        if (this.#hasCustomValidity) {
+            return;
+        }
+        if (this.required && this.value.length === 0) {
+            this.#internals.setValidity({ valueMissing: true }, ' ', 
+            // `setValidity()` isn't typed for an SVG. But an SVG is valid as long as it's
+            // focusable. Thus the cast.
+            this.#targetElement);
+            return;
+        }
+        this.#internals.setValidity({});
+    }
+    get #targetElement() {
+        const element = this.#targetSlotElementRef.value
+            ?.assignedElements({ flatten: true })
+            .at(0);
+        if (element instanceof HTMLElement || element instanceof SVGElement) {
+            return element;
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Select.prototype, "loading", void 0);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Select.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true, type: Number })
+], Select.prototype, "offset", null);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Select.prototype, "open", null);
+__decorate([
+    property({ reflect: true, useDefault: true })
+], Select.prototype, "placement", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], Select.prototype, "required", null);
+__decorate([
+    property({ type: Array })
+], Select.prototype, "value", null);
+__decorate([
+    property({ reflect: true })
+], Select.prototype, "version", void 0);
+__decorate([
+    state()
+], Select.prototype, "isCheckingValidity", void 0);
+Select = __decorate([
+    customElement('glide-core-select'),
+    final
+], Select);
+export default Select;

package/dist/slider.js

@@ -15,7 +15,6 @@ 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';
 /**
@@ -68,9 +67,10 @@ import required from './library/required.js';
  */
 let Slider = class Slider extends LitElement {
     static { this.formAssociated = true; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
         delegatesFocus: true,
     }; }
     static { this.styles = styles; }
@@ -592,7 +592,7 @@ let Slider = class Slider extends LitElement {
     reportValidity() {
         this.isReportValidityOrSubmit = true;
         const isValid = this.#internals.reportValidity();
-        // Ensures that getters referencing `this.validity.valid` are updated.
+        // Ensures getters referencing `this.validity.valid` re-run.
         this.requestUpdate();
         return isValid;
     }

package/dist/spinner.js

@@ -10,7 +10,6 @@ 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 './spinner.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -26,10 +25,11 @@ let Spinner = class Spinner extends LitElement {
         this.size = 'medium';
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
     static { this.styles = styles; }
     render() {

package/dist/split-button.js

@@ -13,7 +13,6 @@ import SplitButtonPrimaryLink from './split-button.primary-link.js';
 import SplitButtonSecondaryButton from './split-button.secondary-button.js';
 import styles from './split-button.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @attr {'primary'|'secondary'} [variant='primary']
@@ -32,10 +31,12 @@ let SplitButton = class SplitButton extends LitElement {
         this.#secondaryButtonSlotElementRef = createRef();
         this.#variant = 'primary';
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default 'primary'