@crowdstrike/glide-core 0.30.1 → 0.31.1

package/dist/dropdown.js

@@ -1556,8 +1556,8 @@ let Dropdown = class Dropdown extends LitElement {
                 // Prevent page scroll. When filterable, also prevent the insertion point from
                 // moving to the beginning of the field.
                 event.preventDefault();
-                const firstOption = [...this.#optionElementsNotHiddenIncludingSelectAll]
-                    .reverse()
+                const firstOption = this.#optionElementsNotHiddenIncludingSelectAll
+                    .toReversed()
                     .findLast((option) => !option.disabled);
                 if (firstOption) {
                     this.#previouslyActiveOption = this.activeOption;

package/dist/menu.js

@@ -13,6 +13,7 @@ import { customElement, property } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import { LocalizeController } from './library/localize.js';
 import Options from './options.js';
+import OptionsGroup from './options.group.js';
 import Option from './option.js';
 import Input from './input.js';
 import assertSlot from './library/assert-slot.js';
@@ -54,7 +55,7 @@ let Menu = class Menu extends LitElement {
         // `#onComponentFocusOut()` to decide if Menu should close. Also used in
         // `#onTargetAndDefaultSlotKeyDown()` to decide if we need to move focus.
         this.#hasVoiceOverMovedFocusToOptionsOrAnOption = false;
-        // Set in `#onTargetSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
+        // Set in `#onDefaultSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
         // Menu closing when any number of things that are not an Option are clicked. Those
         // "click" events will be retargeted to Menu's host the moment they bubble out of
         // Menu. So checking in `#onDocumentClick()` if the click's `event.target` came
@@ -67,8 +68,8 @@ let Menu = class Menu extends LitElement {
         // used in `connectedCallback()` to guard against listening for document clicks for
         // sub-Menus.
         this.#isSubMenuOpen = false;
-        // Set in `#onTargetSlotMouseUp()` and `#onDocumentClick()`. Used in
-        // `#onDocumentClick()`:
+        // Similar situation as with `isDefaultSlotClick`. Set in `#onTargetSlotClick()`
+        // and `#onDocumentClick()`. Used in `#onDocumentClick()`:
         //
         // 1. Menu is open.
         // 2. User clicks Menu's target.
@@ -76,19 +77,9 @@ let Menu = class Menu extends LitElement {
         // 4. `#onTargetSlotClick()` sets `open` to true`.
         // 5. Menu never closes.
         //
-        // Setting `#isTargetSlotMouseUp` to `true` in `#onTargetSlotMouseUp()` gives
+        // Setting `#isTargetSlotClick` to `true` in `#onTargetSlotClick()` gives
         // `#onDocumentClick()` the information it needs to not set `open` to `false`.
-        //
-        // The normal approach would be to set an `#isTargetSlotClick` property in
-        // `#onTargetSlotClick()`. But `#onDocumentClick()` listens for "click" events in
-        // their capture phase. So `#onDocumentClick()` would be called before
-        // `#onTargetSlotClick()`.
-        //
-        // Note too that `#onDocumentClick()` sets `#isTargetSlotMouseUp` to `false`
-        // instead of `#onTargetSlotClick()` doing it. That's so `#isTargetSlotMouseUp`
-        // is set to `false` even if the user mouses down on Menu's target then moves the
-        // mouse outside of Menu before mousing up.
-        this.#isTargetSlotMouseUp = false;
+        this.#isTargetSlotClick = false;
         this.#localize = new LocalizeController(this);
         this.#targetSlotElementRef = createRef();
         // An arrow function field instead of a method so `this` is closed over and set to
@@ -98,8 +89,8 @@ let Menu = class Menu extends LitElement {
                 this.#isDefaultSlotClick = false;
                 return;
             }
-            if (this.#isTargetSlotMouseUp) {
-                this.#isTargetSlotMouseUp = false;
+            if (this.#isTargetSlotClick) {
+                this.#isTargetSlotClick = false;
                 return;
             }
             if (this.#optionsElement) {
@@ -175,20 +166,7 @@ let Menu = class Menu extends LitElement {
         // easier to understand because developers don't have to think about sub-Menus when
         // looking at `#onDocumentClick()`.
         if (!this.#isSubMenu) {
-            // 1. The consumer has a "click" handler on an element that isn't Menu's target.
-            // 2. The user clicks that element.
-            // 3. The handler is called. It sets `open` to `true`.
-            // 4. The "click" bubbles up and is handled by `#onDocumentClick()`.
-            // 5. `#onDocumentClick()` sets `open` to `false` because the click came from
-            //    outside Menu.
-            // 6. Menu is opened then immediately closed and so never opens.
-            //
-            // `capture` ensures `#onDocumentClick()` is called before #3, so that `open` set
-            // `true` in the consumer's handler isn't overwritten by `#onDocumentClick()`
-            // handler setting it to `false`.
-            document.addEventListener('click', this.#onDocumentClick, {
-                capture: true,
-            });
+            document.addEventListener('click', this.#onDocumentClick);
         }
     }
     createRenderRoot() {
@@ -197,9 +175,7 @@ let Menu = class Menu extends LitElement {
     }
     disconnectedCallback() {
         super.disconnectedCallback();
-        document.removeEventListener('click', this.#onDocumentClick, {
-            capture: true,
-        });
+        document.removeEventListener('click', this.#onDocumentClick);
     }
     firstUpdated() {
         if (this.#optionsElement && this.#targetElement) {
@@ -293,7 +269,6 @@ let Menu = class Menu extends LitElement {
           name="target"
           @click=${this.#onTargetSlotClick}
           @keydown=${this.#onTargetAndDefaultSlotKeyDown}
-          @mouseup=${this.#onTargetSlotMouseUp}
           @input=${this.#onTargetSlotInput}
           @slotchange=${this.#onTargetSlotChange}
           ${assertSlot([Element])}
@@ -341,7 +316,7 @@ let Menu = class Menu extends LitElement {
     // `#onComponentFocusOut()` to decide if Menu should close. Also used in
     // `#onTargetAndDefaultSlotKeyDown()` to decide if we need to move focus.
     #hasVoiceOverMovedFocusToOptionsOrAnOption;
-    // Set in `#onTargetSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
+    // Set in `#onDefaultSlotMouseUp()`. Used in `#onDocumentClick()` to guard against
     // Menu closing when any number of things that are not an Option are clicked. Those
     // "click" events will be retargeted to Menu's host the moment they bubble out of
     // Menu. So checking in `#onDocumentClick()` if the click's `event.target` came
@@ -354,8 +329,8 @@ let Menu = class Menu extends LitElement {
     // used in `connectedCallback()` to guard against listening for document clicks for
     // sub-Menus.
     #isSubMenuOpen;
-    // Set in `#onTargetSlotMouseUp()` and `#onDocumentClick()`. Used in
-    // `#onDocumentClick()`:
+    // Similar situation as with `isDefaultSlotClick`. Set in `#onTargetSlotClick()`
+    // and `#onDocumentClick()`. Used in `#onDocumentClick()`:
     //
     // 1. Menu is open.
     // 2. User clicks Menu's target.
@@ -363,19 +338,9 @@ let Menu = class Menu extends LitElement {
     // 4. `#onTargetSlotClick()` sets `open` to true`.
     // 5. Menu never closes.
     //
-    // Setting `#isTargetSlotMouseUp` to `true` in `#onTargetSlotMouseUp()` gives
+    // Setting `#isTargetSlotClick` to `true` in `#onTargetSlotClick()` gives
     // `#onDocumentClick()` the information it needs to not set `open` to `false`.
-    //
-    // The normal approach would be to set an `#isTargetSlotClick` property in
-    // `#onTargetSlotClick()`. But `#onDocumentClick()` listens for "click" events in
-    // their capture phase. So `#onDocumentClick()` would be called before
-    // `#onTargetSlotClick()`.
-    //
-    // Note too that `#onDocumentClick()` sets `#isTargetSlotMouseUp` to `false`
-    // instead of `#onTargetSlotClick()` doing it. That's so `#isTargetSlotMouseUp`
-    // is set to `false` even if the user mouses down on Menu's target then moves the
-    // mouse outside of Menu before mousing up.
-    #isTargetSlotMouseUp;
+    #isTargetSlotClick;
     #localize;
     #offset;
     // Used in various situations to reactivate the previously active Option.
@@ -435,7 +400,9 @@ let Menu = class Menu extends LitElement {
                 .flatMap((element) => {
                 return element instanceof HTMLSlotElement
                     ? element.assignedElements({ flatten: true })
-                    : element;
+                    : element instanceof OptionsGroup
+                        ? [...element.children]
+                        : element;
             })
                 ?.filter((element) => {
                 return element instanceof Option;
@@ -451,8 +418,14 @@ let Menu = class Menu extends LitElement {
             // The "content" slot case.
             ':scope > glide-core-options > glide-core-option > [slot="content"] > glide-core-menu'),
             ...this.querySelectorAll(
+            // The "content" slot and Options Group case.
+            ':scope > glide-core-options > glide-core-options-group > glide-core-option > [slot="content"] > glide-core-menu'),
+            ...this.querySelectorAll(
             // The "content" slot fallback case.
             ':scope > glide-core-options > glide-core-option > [slot="submenu"]'),
+            ...this.querySelectorAll(
+            // The "content" slot fallback and Options Group case.
+            ':scope > glide-core-options > glide-core-options-group > glide-core-option > [slot="submenu"]'),
         ];
     }
     get #targetElement() {
@@ -532,6 +505,15 @@ let Menu = class Menu extends LitElement {
         if (this.#isSubMenu && event.target === this.#defaultSlotElementRef.value) {
             event.stopPropagation();
         }
+        // When Menu is in the shadow DOM of another component, `event.target` will be
+        // retargeted to the host of that component the moment the event bubbles out of
+        // it.
+        //
+        // So, when the timeout callback below is called, `event.target` will have been
+        // retargeted and the `instanceof` check will wrongly fail when an Option is
+        // clicked, and Menu will never close. So we store a reference to the original
+        // `event.target` and use it in the `instanceof` condition.
+        const originalEventTarget = event.target;
         // The timeout gives consumers a chance to cancel the event to prevent Menu from
         // closing.
         setTimeout(() => {
@@ -546,7 +528,7 @@ let Menu = class Menu extends LitElement {
             //
             // When the default slot's padding is clicked, Menu should remain open because the
             // user most likely meant to click an Option but missed.
-            if (!event.defaultPrevented && event.target instanceof Option) {
+            if (!event.defaultPrevented && originalEventTarget instanceof Option) {
                 this.open = false;
             }
         });
@@ -1117,6 +1099,7 @@ let Menu = class Menu extends LitElement {
         }
     }
     #onTargetSlotClick(event) {
+        this.#isTargetSlotClick = true;
         const closestOption = event.target instanceof Element &&
             event.target.closest('glide-core-option');
         const isSubMenuTarget = event.target instanceof Element && Boolean(closestOption);
@@ -1179,9 +1162,6 @@ let Menu = class Menu extends LitElement {
     #onTargetSlotInput() {
         this.open = true;
     }
-    #onTargetSlotMouseUp() {
-        this.#isTargetSlotMouseUp = true;
-    }
     #show() {
         this.#cleanUpFloatingUi?.();
         if (this.#previouslyActiveOption &&

package/dist/option.styles.js

@@ -15,9 +15,11 @@ export default [
       font-weight: var(--glide-core-typography-weight-regular);
       inline-size: 100%;
       max-inline-size: 21.875rem;
+      min-block-size: 1.75rem;
       padding-block: var(--glide-core-spacing-base-xxs);
       padding-inline: var(--glide-core-spacing-base-sm);
-      transition: background-color var(--glide-core-duration-fast-02) ease-in-out;
+      transition: background-color var(--glide-core-duration-fast-02)
+        ease-in-out;
       user-select: none;
 
       &.active {

package/dist/options.group.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'glide-core-options-group': OptionsGroup;
+    }
+}
+/**
+ * @attr {string} label
+ * @attr {boolean} [hide-label=false]
+ * @attr {'group'|'optgroup'} [role='group']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Option}
+ */
+export default class OptionsGroup extends LitElement {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    /**
+     * @default undefined
+     */
+    get label(): string | undefined;
+    set label(label: string);
+    hideLabel: boolean;
+    role: 'group' | 'optgroup';
+    readonly version: string;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/options.group.js

@@ -0,0 +1,84 @@
+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 { 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';
+import required from './library/required.js';
+/**
+ * @attr {string} label
+ * @attr {boolean} [hide-label=false]
+ * @attr {'group'|'optgroup'} [role='group']
+ *
+ * @readonly
+ * @attr {string} [version]
+ *
+ * @slot {Option}
+ */
+let OptionsGroup = class OptionsGroup extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.hideLabel = false;
+        this.role = 'group';
+        this.version = packageJson.version;
+    }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        mode: shadowRootMode,
+    }; }
+    static { this.styles = styles; }
+    /**
+     * @default undefined
+     */
+    get label() {
+        return this.#label;
+    }
+    set label(label) {
+        this.#label = label;
+        this.ariaLabel = label;
+    }
+    render() {
+        return html `
+      <div class="component">
+        <div
+          aria-hidden="true"
+          class=${classMap({ label: true, 'visually-hidden': this.hideLabel })}
+        >
+          ${this.label}
+        </div>
+
+        <slot ${assertSlot([Option])}>
+          <!-- @type {Option} -->
+        </slot>
+      </div>
+    `;
+    }
+    #label;
+};
+__decorate([
+    property({ reflect: true }),
+    required
+], OptionsGroup.prototype, "label", null);
+__decorate([
+    property({ attribute: 'hide-label', reflect: true, type: Boolean })
+], OptionsGroup.prototype, "hideLabel", void 0);
+__decorate([
+    property({ reflect: true })
+], OptionsGroup.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true })
+], OptionsGroup.prototype, "version", void 0);
+OptionsGroup = __decorate([
+    customElement('glide-core-options-group'),
+    final
+], OptionsGroup);
+export default OptionsGroup;

package/dist/options.group.styles.d.ts

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

package/dist/options.group.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+import visuallyHidden from './styles/visually-hidden.js';
+export default [
+    css `
+    ${visuallyHidden('.label.visually-hidden')}
+  `,
+    css `
+    :host(:not(:last-of-type)) .component::after {
+      background-color: var(--glide-core-color-static-stroke-secondary);
+      block-size: 1px;
+      border-radius: var(--glide-core-rounding-base-radius-sm);
+      content: '';
+      display: block;
+      margin-block: var(--glide-core-spacing-base-xxxs);
+    }
+
+    .label {
+      block-size: 1.75rem;
+      box-sizing: border-box;
+      font-family: var(--glide-core-typography-family-primary);
+      font-size: var(--glide-core-typography-size-body-small);
+      font-weight: var(--glide-core-typography-weight-bold);
+      max-inline-size: 21.875rem;
+      overflow: hidden;
+      padding-block: var(--glide-core-spacing-base-xxs);
+      padding-inline: var(--glide-core-spacing-base-sm);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  `,
+];

package/dist/options.js

@@ -17,6 +17,7 @@ import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 import assertSlot from './library/assert-slot.js';
 import Option from './option.js';
+import OptionsGroup from './options.group.js';
 // This component exists because Menu's target and its menu (`"role="menu"` or
 // `role="listbox"`) both need to be in the light DOM so the target and menu can
 // reference each other's IDs in ARIA attributes.
@@ -82,7 +83,7 @@ let Options = class Options extends LitElement {
             loading: this.privateLoading,
         })}
         @slotchange=${this.#onDefaultSlotChange}
-        ${assertSlot([Option, Text], true)}
+        ${assertSlot([OptionsGroup, Option, Text], true)}
       >
         <!-- @type {Option | Text} -->
       </slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.30.1",
+  "version": "0.31.1",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -94,13 +94,13 @@
     "comment-parser": "^1.4.1",
     "custom-elements-manifest": "^2.1.0",
     "esbuild": "^0.25.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.31.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-sort-class-members": "^1.21.0",
-    "eslint-plugin-unicorn": "^58.0.0",
+    "eslint-plugin-unicorn": "^60.0.0",
     "globals": "^15.13.0",
     "globby": "^14.0.2",
     "husky": "^8.0.3",