@crowdstrike/glide-core 0.32.2 → 0.32.3

package/dist/button.js

@@ -70,6 +70,7 @@ let Button = class Button extends LitElement {
     }
     render() {
         return html `<glide-core-tooltip
+      class="tooltip"
       label=${this.tooltip ?? ''}
       ?disabled=${!this.disabled || !this.tooltip}
     >
@@ -106,7 +107,7 @@ let Button = class Button extends LitElement {
           -->
         </slot>
 
-        ${this.label}
+        <span class="label">${this.label}</span>
 
         <slot
           class=${classMap({

package/dist/button.styles.js

@@ -22,6 +22,7 @@ export default [
       font-weight: var(--glide-core-typography-weight-bold);
       gap: var(--glide-core-spacing-base-xs);
       justify-content: center;
+      max-inline-size: 100%;
       padding-block: var(--glide-core-spacing-base-xs);
       padding-inline: var(--glide-core-spacing-base-md);
       transition-duration: var(--glide-core-duration-moderate-02);
@@ -143,6 +144,7 @@ export default [
         font-size: var(--glide-core-typography-size-body-default);
         font-weight: var(--glide-core-typography-weight-regular);
         padding: 0;
+        text-align: start;
 
         &.disabled {
           color: var(--glide-core-color-interactive-text-link--disabled);
@@ -167,12 +169,24 @@ export default [
       }
     }
 
+    .tooltip {
+      max-inline-size: 100%;
+      white-space: inherit;
+    }
+
     .prefix-icon-slot {
       &.hidden {
         display: none;
       }
     }
 
+    .label {
+      min-inline-size: 3ch;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: inherit;
+    }
+
     .suffix-icon-slot {
       &.hidden {
         display: none;

package/dist/checkbox.d.ts

@@ -27,6 +27,7 @@ declare global {
  * @slot {Element} [private-icon]
  *
  * @fires {Event} change
+ * @fires {Event} input
  * @fires {Event} invalid
  *
  * @readonly

package/dist/checkbox.js

@@ -40,6 +40,7 @@ import required from './library/required.js';
  * @slot {Element} [private-icon]
  *
  * @fires {Event} change
+ * @fires {Event} input
  * @fires {Event} invalid
  *
  * @readonly
@@ -480,12 +481,12 @@ let Checkbox = class Checkbox extends LitElement {
         this.reportValidity();
         this.isBlurring = false;
     }
-    // Only "change" would need to be handled if not for some consumers needing
-    // to force Checkbox checked or unchecked until the user has completed some action.
+    // Only "change" would need to be handled if not for some consumers needing to
+    // force Checkbox checked or unchecked until the user has completed some action.
     //
-    // The way to force Checkbox checked or unchecked is to add an "input" or
-    // "change" handler and then immediately set `checked` back to its desired
-    // state inside that handler.
+    // The way they can force Checkbox to be checked or unchecked is to add an "input"
+    // or "change" handler and then immediately set `checked` back to its desired state
+    // inside that handler.
     //
     // To do that, consumers need to await `this.updateComplete` so `checked` isn't
     // immediately reverted after Checkbox updates, which happens asynchronously and
@@ -495,18 +496,25 @@ let Checkbox = class Checkbox extends LitElement {
     // why we're handling "input" as well: so that "input", like "change", results
     // in an update that can be awaited.
     //
-    // If "input" events were dispatched after "change" events, only handling
-    // "change" here would suffice because an update from "change" would already
-    // be pending by the time "input" is dispatched.
+    // If "input" events were dispatched after "change" events, only handling "change"
+    // here would suffice because an update from "change" would already be pending by
+    // the time "input" is dispatched.
     #onInputChangeOrInput(event) {
         if (event.target instanceof HTMLInputElement) {
             this.checked = event.target.checked;
         }
         // If the input has been interacted with it's no longer indeterminate.
         this.indeterminate = false;
+        // Our analyzer plugin (`add-events.ts`) doesn't and can't account for events that
+        // are implicitly dispatched by a native form control in a component. So we stop
+        // the original event and dispatch our own.
+        if (event.type === 'input') {
+            event.stopPropagation();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }
         if (event.type === 'change') {
-            // Unlike "input" events, "change" events aren't composed. So we have to
-            // manually dispatch them.
+            // Unlike "input" events, "change" events aren't composed. So we have to manually
+            // dispatch them.
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
     }

package/dist/input.js

@@ -453,8 +453,8 @@ let Input = class Input extends LitElement {
         if (this.#inputElementRef.value?.value) {
             this.value = this.#inputElementRef.value?.value;
         }
-        // Unlike "input" events, "change" events aren't composed. So we have to
-        // manually dispatch them.
+        // Unlike "input" events, "change" events aren't composed. So we have to manually
+        // dispatch them.
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     #onInputFocus() {

package/dist/menu.js

@@ -416,20 +416,28 @@ let Menu = class Menu extends LitElement {
         return this.closest('glide-core-option');
     }
     get #subMenus() {
-        return [
-            ...this.querySelectorAll(
-            // 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"]'),
-        ];
+        const assignedElements = this.#defaultSlotElementRef.value?.assignedElements({ flatten: true });
+        if (!assignedElements) {
+            return [];
+        }
+        return assignedElements
+            .filter((element) => element instanceof Options)
+            .flatMap((element) => {
+            return [
+                ...element.querySelectorAll(
+                // The "content" slot case.
+                ':scope > glide-core-option > [slot="content"] > glide-core-menu'),
+                ...element.querySelectorAll(
+                // The "content" slot and Options Group case.
+                ':scope > glide-core-options-group > glide-core-option > [slot="content"] > glide-core-menu'),
+                ...element.querySelectorAll(
+                // The "content" slot fallback case.
+                ':scope > glide-core-option > [slot="submenu"]'),
+                ...element.querySelectorAll(
+                // The "content" slot fallback and Options Group case.
+                ':scope > glide-core-options-group > glide-core-option > [slot="submenu"]'),
+            ];
+        });
     }
     get #targetElement() {
         const element = this.#targetSlotElementRef.value

package/dist/slider.js

@@ -801,8 +801,8 @@ let Slider = class Slider extends LitElement {
             const normalizedValue = Math.round(inputValue / this.step) * this.step;
             this.maximumValue = Math.min(Math.max(normalizedValue, this.minimumValue + this.step), this.max);
             this.#updateHandlesAndTrack();
-            // Unlike "input" events, "change" events aren't composed. So
-            // we have to manually dispatch them.
+            // Unlike "input" events, "change" events aren't composed. So we have to manually
+            // dispatch them.
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
     }
@@ -842,8 +842,8 @@ let Slider = class Slider extends LitElement {
             // can't go higher than 70 (75-5).
             this.maximumValue - this.step);
             this.#updateHandlesAndTrack();
-            // Unlike "input" events, "change" events aren't composed. So
-            // we have to manually dispatch them.
+            // Unlike "input" events, "change" events aren't composed. So we have to manually
+            // dispatch them.
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
     }

package/dist/textarea.d.ts

@@ -28,6 +28,7 @@ declare global {
  * @slot {Element | string} [description] - Additional information or context
  *
  * @fires {Event} change
+ * @fires {Event} input
  * @fires {Event} invalid
  *
  * @readonly

package/dist/textarea.js

@@ -40,6 +40,7 @@ import required from './library/required.js';
  * @slot {Element | string} [description] - Additional information or context
  *
  * @fires {Event} change
+ * @fires {Event} input
  * @fires {Event} invalid
  *
  * @readonly
@@ -310,14 +311,21 @@ let Textarea = class Textarea extends LitElement {
         if (this.#textareaElementRef.value) {
             this.value = this.#textareaElementRef.value.value;
         }
-        // Unlike "input" events, "change" events aren't composed. So we have to
-        // manually dispatch them.
+        // Unlike "input" events, "change" events aren't composed. So we have to manually
+        // dispatch them.
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
-    #onTextareaInput() {
+    #onTextareaInput(event) {
         if (this.#textareaElementRef.value) {
             this.value = this.#textareaElementRef.value.value;
         }
+        // Our analyzer plugin (`add-events.ts`) doesn't and can't account for events that
+        // are implicitly dispatched by a native form control in a component. So we stop
+        // the original event and dispatch our own.
+        if (event.type === 'input') {
+            event.stopPropagation();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }
     }
     #onTextareaKeydown(event) {
         if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {

package/dist/toggle.d.ts

@@ -20,6 +20,7 @@ declare global {
  * @slot {Element | string} [description] - Additional information or context
  *
  * @fires {Event} change
+ * @fires {Event} input
  */
 export default class Toggle extends LitElement {
     #private;

package/dist/toggle.js

@@ -30,6 +30,7 @@ import required from './library/required.js';
  * @slot {Element | string} [description] - Additional information or context
  *
  * @fires {Event} change
+ * @fires {Event} input
  */
 let Toggle = class Toggle extends LitElement {
     constructor() {
@@ -136,9 +137,16 @@ let Toggle = class Toggle extends LitElement {
         if (event.target instanceof HTMLInputElement) {
             this.checked = event.target.checked;
         }
+        // Our analyzer plugin (`add-events.ts`) doesn't and can't account for events that
+        // are implicitly dispatched by a native form control in a component. So we stop
+        // the original event and dispatch our own.
+        if (event.type === 'input') {
+            event.stopPropagation();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }
         if (event.type === 'change') {
-            // Unlike "input" events, "change" events aren't composed. So we have to
-            // manually dispatch them.
+            // Unlike "input" events, "change" events aren't composed. So we have to manually
+            // dispatch them.
             this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.32.2",
+  "version": "0.32.3",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",