@crowdstrike/glide-core 0.31.0 → 0.31.2

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';
@@ -399,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;
@@ -415,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() {
@@ -496,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(() => {
@@ -510,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;
             }
         });
@@ -553,59 +571,41 @@ let Menu = class Menu extends LitElement {
         event.preventDefault();
     }
     #onDefaultSlotMouseOver(event) {
-        // Chrome has this funky Popover API bug where the popover is, for about 10
-        // milliseconds, rendered above where it's supposed to be whenever `showPopover()`
-        // is called.
-        //
-        // It's not clear if the popover is invisible during that time, or if it's visible
-        // and 10 milliseconds isn't enough to be noticable. Either way, it's effectively
-        // invisible but still picks up "mouseover" events.
-        //
-        // If the user's mouse happens to be over one of the Option(s) that's inside our
-        // invisible, mispositioned popover, then the Option is activated. Thus this
-        // variable and the guard below it.
-        //
-        // There's no mention of the above issue in it. But this bug is probably a good one
-        // to keep an eye on: https://issues.chromium.org/issues/364669918.
-        const isOutOfBounds = this.#componentElementRef.value &&
-            event.y < this.#componentElementRef.value.getBoundingClientRect().y;
-        if (!isOutOfBounds) {
-            const option = event.target instanceof Element &&
-                event.target.closest('glide-core-option');
-            const isSubMenuTarget = event.target instanceof Element &&
-                event.target.closest('[slot="target"]');
-            const isOwnOption = option && this.#optionElements?.includes(option);
-            // This handler is also called when a sub-Menu Option is hovered because sub-Menu
-            // Option(s) are children of their super-Menu's default slot. And hovering a
-            // sub-Menu Option shouldn't deactivate the super-Menu's active Option. Thus
-            // `isOwnOption`.
-            if (isOwnOption && !isSubMenuTarget && !option.disabled) {
-                this.#previouslyActiveOption = this.#activeOption;
-                if (this.#activeOption) {
-                    this.#activeOption.privateActive = false;
-                }
-                option.privateActive = true;
-                if (this.#optionsElement) {
-                    this.#optionsElement.ariaActivedescendant = event.target.id;
-                }
-            }
-            if (this.#isSubMenu) {
-                // Allowing the event to propagate from a sub-Menu's parent Option means it would
-                // get picked up by the super-Menu Option's Tooltip "mouseover" handler. Then it
-                // would open the super-Menu's tooltip.
-                event.stopPropagation();
+        const option = event.target instanceof Element &&
+            event.target.closest('glide-core-option');
+        const isSubMenuTarget = event.target instanceof Element &&
+            event.target.closest('[slot="target"]');
+        const isOwnOption = option && this.#optionElements?.includes(option);
+        // This handler is also called when a sub-Menu Option is hovered because sub-Menu
+        // Option(s) are children of their super-Menu's default slot. And hovering a
+        // sub-Menu Option shouldn't deactivate the super-Menu's active Option. Thus
+        // `isOwnOption`.
+        if (isOwnOption && !isSubMenuTarget && !option.disabled) {
+            this.#previouslyActiveOption = this.#activeOption;
+            if (this.#activeOption) {
+                this.#activeOption.privateActive = false;
             }
-            if (isSubMenuTarget && this.#activeOption) {
-                // When the cursor is already inside an Option and the user mouses to the Option's
-                // sub-Menu target, the browser will dispatch "mouseout" followed by "mouseover".
-                //
-                // The Option's tooltip will pick up both events and will remain open because the
-                // tooltip will be closed then immediately reopened. But we want the tooltip to
-                // close when a sub-Menu target is hovered. Canceling the event stops the tooltip
-                // from reopening.
-                event.preventDefault();
+            option.privateActive = true;
+            if (this.#optionsElement) {
+                this.#optionsElement.ariaActivedescendant = event.target.id;
             }
         }
+        if (this.#isSubMenu) {
+            // Allowing the event to propagate from a sub-Menu's parent Option means it would
+            // get picked up by the super-Menu Option's Tooltip "mouseover" handler. Then it
+            // would open the super-Menu's tooltip.
+            event.stopPropagation();
+        }
+        if (isSubMenuTarget && this.#activeOption) {
+            // When the cursor is already inside an Option and the user mouses to the Option's
+            // sub-Menu target, the browser will dispatch "mouseout" followed by "mouseover".
+            //
+            // The Option's tooltip will pick up both events and will remain open because the
+            // tooltip will be closed then immediately reopened. But we want the tooltip to
+            // close when a sub-Menu target is hovered. Canceling the event stops the tooltip
+            // from reopening.
+            event.preventDefault();
+        }
     }
     #onDefaultSlotMouseUp() {
         this.#isDefaultSlotClick = true;

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.31.0",
+  "version": "0.31.2",
   "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",