@crowdstrike/glide-core 0.32.3 → 0.34.0

package/dist/option.js

@@ -15,7 +15,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import styles from './option.styles.js';
 import assertSlot from './library/assert-slot.js';
 import checkedIcon from './icons/checked.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 import Menu from './menu.js';
@@ -45,6 +44,11 @@ import required from './library/required.js';
  * @slot {Element | Text} [content] - This is the unhappy path. It's the escape hatch where you can render arbitrary content and lay it out however you need to. If you go this route, `slot="icon"` and `slot="submenu"` will become unavailable. And the `label` and `description` attributes won't be rendered. The `label` attribute is still required. We'll show it in a tooltip when your content overflows. If you need a second line of text in the tooltip, provide you can provide it via the `description` attribute.
  * @slot {Element} [icon]
  * @slot {Menu} [submenu]
+ *
+ * @fires {Event} deselected
+ * @fires {Event} disabled
+ * @fires {Event} enabled
+ * @fires {Event} selected
  */
 let Option = class Option extends LitElement {
     constructor() {
@@ -61,8 +65,8 @@ let Option = class Option extends LitElement {
         this.hasIconSlot = false;
         this.hasSubMenuSlot = false;
         this.isContentSlotOverflow = false;
-        // Set in `#onSubmenuToggle()`. Used to toggle the sub-Menu's target as open
-        // or closed visually.
+        // Set in `#onSubmenuToggle()`. Used to toggle the sub-Menu's target as open or
+        // closed visually.
         this.isSubmenuOpen = false;
         this.#containerElementRef = createRef();
         this.#contentSlotElementRef = createRef();
@@ -73,10 +77,12 @@ let Option = class Option extends LitElement {
         this.#labelElementRef = createRef();
         this.#tooltipElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     // Consumers may chose not to take the happy path and instead use the "content"
     // slot. In that case, we don't render `label`. But `label` still needs to be
@@ -116,9 +122,15 @@ let Option = class Option extends LitElement {
         return this.#isDisabled;
     }
     set disabled(isDisabled) {
+        const hasChanged = isDisabled !== this.#isDisabled;
         this.#isDisabled = isDisabled;
         this.ariaDisabled = isDisabled ? 'true' : 'false';
-        this.dispatchEvent(new Event('private-disabled-change', { bubbles: true }));
+        if (hasChanged && isDisabled) {
+            this.dispatchEvent(new Event('disabled', { bubbles: true }));
+        }
+        else if (hasChanged) {
+            this.dispatchEvent(new Event('enabled', { bubbles: true }));
+        }
     }
     get privateActive() {
         return this.#isActive;
@@ -142,8 +154,19 @@ let Option = class Option extends LitElement {
         return this.#isSelected;
     }
     set selected(isSelected) {
+        const hasChanged = isSelected !== this.#isSelected;
         this.ariaSelected = isSelected.toString();
         this.#isSelected = isSelected;
+        if (hasChanged && isSelected) {
+            this.dispatchEvent(new Event('selected', {
+                bubbles: true,
+            }));
+        }
+        else if (hasChanged) {
+            this.dispatchEvent(new Event('deselected', {
+                bubbles: true,
+            }));
+        }
     }
     click() {
         // You'd think this condition wouldn't be needed because `#onTooltipClick()` has a

package/dist/options.d.ts

@@ -20,6 +20,8 @@ declare global {
  * @attr {string} [version]
  *
  * @slot {Option | Text}
+ *
+ * @fires {Event} slotchange
  */
 export default class Options extends LitElement {
     #private;

package/dist/options.group.js

@@ -9,7 +9,6 @@ import { customElement, property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './options.group.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import assertSlot from './library/assert-slot.js';
 import Option from './option.js';
@@ -31,10 +30,12 @@ let OptionsGroup = class OptionsGroup extends LitElement {
         this.role = 'group';
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default undefined

package/dist/options.js

@@ -5,14 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 import { range } from 'lit/directives/range.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './options.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 import assertSlot from './library/assert-slot.js';
@@ -47,6 +45,8 @@ import OptionsGroup from './options.group.js';
  * @attr {string} [version]
  *
  * @slot {Option | Text}
+ *
+ * @fires {Event} slotchange
  */
 let Options = class Options extends LitElement {
     constructor() {
@@ -66,10 +66,12 @@ let Options = class Options extends LitElement {
         this.tabIndex = -1;
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         // Without `role="none"` VoiceOver doesn't announce how many options are available.
@@ -78,10 +80,7 @@ let Options = class Options extends LitElement {
         // `role="option"`).
         return html `<div class="component" role="none">
       <slot
-        class=${classMap({
-            'default-slot': true,
-            loading: this.privateLoading,
-        })}
+        ?hidden=${this.privateLoading}
         @slotchange=${this.#onDefaultSlotChange}
         ${assertSlot([OptionsGroup, Option, Text], true)}
       >
@@ -96,7 +95,7 @@ let Options = class Options extends LitElement {
     </div>`;
     }
     #onDefaultSlotChange() {
-        this.dispatchEvent(new Event('private-slot-change', { bubbles: true }));
+        this.dispatchEvent(new Event('slotchange', { bubbles: true }));
     }
 };
 __decorate([

package/dist/options.styles.js

@@ -11,11 +11,5 @@ export default [
       */
       display: block;
     }
-
-    .default-slot {
-      &.loading {
-        display: none;
-      }
-    }
   `,
 ];

package/dist/popover.js

@@ -13,7 +13,6 @@ import { customElement, property, state } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './popover.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @attr {boolean} [disabled=false]
@@ -76,10 +75,12 @@ let Popover = class Popover extends LitElement {
             this.open = false;
         };
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false

package/dist/radio-group.js

@@ -17,7 +17,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import RadioGroupRadio from './radio-group.radio.js';
 import styles from './radio-group.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';
 /**
@@ -64,10 +63,12 @@ import required from './library/required.js';
  */
 let RadioGroup = class RadioGroup extends LitElement {
     static { this.formAssociated = true; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false
@@ -334,7 +335,7 @@ let RadioGroup = class RadioGroup 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/radio-group.radio.js

@@ -9,7 +9,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property, state } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './radio-group.radio.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -34,10 +33,12 @@ let RadioGroupRadio = class RadioGroupRadio extends LitElement {
         this.#privateRequired = false;
         this.#value = '';
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default undefined

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;
+}