@crowdstrike/glide-core 0.34.0 → 0.34.1

package/dist/accordion.js

@@ -42,13 +42,13 @@ let Accordion = class Accordion extends LitElement {
         this.#suffixIconsSlotElementRef = createRef();
         this.#summaryElementRef = createRef();
     }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
-    /* c8 ignore end */
+    /* v8 ignore stop */
     static { this.styles = styles; }
     /**
      * @default false
@@ -209,13 +209,13 @@ let Accordion = class Accordion extends LitElement {
         const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
         this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
     }
-    /* v8 ignore end */
+    /* v8 ignore stop */
     /* v8 ignore start */
     #onSuffixIconsSlotChange() {
         const assignedNodes = this.#suffixIconsSlotElementRef.value?.assignedNodes();
         this.hasSuffixIcons = Boolean(assignedNodes && assignedNodes.length > 0);
     }
-    /* v8 ignore end */
+    /* v8 ignore stop */
     #onSummaryClick(event) {
         // Canceling it prevents `details` from immediately showing and hiding
         // the default slot on open and close, letting us animate it when we're ready.

package/dist/button.js

@@ -35,13 +35,13 @@ import required from './library/required.js';
  */
 let Button = class Button extends LitElement {
     static { this.formAssociated = true; }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
-    /* c8 ignore end */
+    /* v8 ignore stop */
     static { this.styles = styles; }
     // A getter and setter because Lit Analzyer doesn't recognize "aria-description"
     // as a valid attribute on the `<button>` and doesn't provide a way to selectively
@@ -162,7 +162,7 @@ let Button = class Button extends LitElement {
         const assignedNodes = this.#prefixIconSlotElementRef.value?.assignedNodes();
         this.hasPrefixIcon = Boolean(assignedNodes && assignedNodes.length > 0);
     }
-    /* v8 ignore end */
+    /* v8 ignore stop */
     /* v8 ignore start */
     #onSuffixIconSlotChange() {
         const assignedNodes = this.#suffixIconSlotElementRef.value?.assignedNodes();

package/dist/checkbox.d.ts

@@ -84,7 +84,11 @@ export default class Checkbox extends LitElement implements FormControl {
     privateDisableLabelTooltip: boolean;
     privateSplit?: 'left' | 'middle' | 'right';
     privateVariant?: 'minimal';
-    required: boolean;
+    /**
+     * @default false
+     */
+    get required(): boolean;
+    set required(isRequired: boolean);
     summary?: string;
     tooltip?: string;
     /**

package/dist/checkbox.js

@@ -68,12 +68,12 @@ import required from './library/required.js';
  */
 let Checkbox = class Checkbox extends LitElement {
     static { this.formAssociated = true; }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
-    /* c8 ignore end */
+    /* v8 ignore stop */
     static { this.styles = styles; }
     /**
      * @default undefined
@@ -99,6 +99,7 @@ let Checkbox = class Checkbox extends LitElement {
     set checked(isChecked) {
         const hasChanged = isChecked !== this.#isChecked;
         this.#isChecked = isChecked;
+        this.#setValidity();
         if (hasChanged) {
             this.dispatchEvent(new Event('private-checked-change', { bubbles: true }));
         }
@@ -113,6 +114,16 @@ let Checkbox = class Checkbox extends LitElement {
         this.#isDisabled = isDisabled;
         this.dispatchEvent(new Event('private-disabled-change', { bubbles: true }));
     }
+    /**
+     * @default false
+     */
+    get required() {
+        return this.#isRequired;
+    }
+    set required(isRequired) {
+        this.#isRequired = isRequired;
+        this.#setValidity();
+    }
     /**
      * @default ''
      */
@@ -166,32 +177,8 @@ let Checkbox = class Checkbox extends LitElement {
         this.form?.removeEventListener('formdata', this.#onFormdata);
         this.#intersectionObserver?.disconnect();
     }
-    /* v8 ignore end */
+    /* v8 ignore stop */
     get validity() {
-        // If we're in a Checkbox Group, `disabled`, `required`, and whether or not
-        // the form has been submitted don't apply because Checkbox Group handles those
-        // states for the group as a whole.
-        if (this.privateVariant === 'minimal') {
-            return this.#internals.validity;
-        }
-        if (this.required && !this.checked) {
-            // A validation message is required but unused because we disable native validation
-            // feedback. And an empty string isn't allowed. Thus a single space.
-            this.#internals.setValidity({ customError: Boolean(this.validityMessage), valueMissing: true }, ' ', this.#inputElementRef.value);
-            return this.#internals.validity;
-        }
-        if (this.required &&
-            this.#internals.validity.valueMissing &&
-            this.checked) {
-            this.#internals.setValidity({});
-            return this.#internals.validity;
-        }
-        if (!this.required &&
-            this.#internals.validity.valueMissing &&
-            !this.checked) {
-            this.#internals.setValidity({});
-            return this.#internals.validity;
-        }
         return this.#internals.validity;
     }
     focus(options) {
@@ -379,6 +366,7 @@ let Checkbox = class Checkbox extends LitElement {
         }
     }
     setValidity(flags, message) {
+        this.#hasCustomValidity = true;
         this.validityMessage = message;
         this.#internals.setValidity(flags, ' ', this.#inputElementRef.value);
     }
@@ -403,16 +391,17 @@ let Checkbox = class Checkbox extends LitElement {
         this.privateShowLabelTooltip = false;
         // Private because it's only meant to be used by Dropdown Option.
         this.privateDisableLabelTooltip = false;
-        this.required = false;
         // Used by Checkbox Group.
         this.privateIsReportValidityOrSubmit = false;
         this.version = packageJson.version;
         this.isBlurring = false;
         this.isCheckingValidity = false;
         this.isLabelOverflow = false;
+        this.#hasCustomValidity = false;
         this.#inputElementRef = createRef();
         this.#isChecked = false;
         this.#isDisabled = false;
+        this.#isRequired = false;
         this.#labelElementRef = createRef();
         this.#value = '';
         // An arrow function field instead of a method so `this` is closed over and
@@ -457,11 +446,13 @@ let Checkbox = class Checkbox extends LitElement {
             }
         });
     }
+    #hasCustomValidity;
     #inputElementRef;
     #internals;
     #intersectionObserver;
     #isChecked;
     #isDisabled;
+    #isRequired;
     #label;
     #labelElementRef;
     #value;
@@ -469,10 +460,9 @@ let Checkbox = class Checkbox extends LitElement {
     // set to the component instead of `document`.
     #onFormdata;
     get #isShowValidationFeedback() {
-        // If minimal, `disabled`, `required`, and whether the form has been submitted
-        // don't apply because the parent component handles those states itself.
+        // When minimal, Checkbox Group handles validation feedback for the group.
         if (this.privateVariant === 'minimal') {
-            return !this.validity.valid && this.privateIsReportValidityOrSubmit;
+            return false;
         }
         return (!this.disabled &&
             !this.validity.valid &&
@@ -525,6 +515,17 @@ let Checkbox = class Checkbox extends LitElement {
             this.form?.requestSubmit();
         }
     }
+    #setValidity() {
+        if (this.#hasCustomValidity) {
+            return;
+        }
+        // When minimal, Checkbox Group handles validation for the group.
+        if (this.required && !this.checked && this.privateVariant !== 'minimal') {
+            this.#internals.setValidity({ customError: Boolean(this.validityMessage), valueMissing: true }, ' ', this.#inputElementRef.value);
+            return;
+        }
+        this.#internals.setValidity({});
+    }
     #updateLabelOverflow() {
         if (this.#labelElementRef.value) {
             this.isLabelOverflow =
@@ -588,7 +589,7 @@ __decorate([
 ], Checkbox.prototype, "privateVariant", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
-], Checkbox.prototype, "required", void 0);
+], Checkbox.prototype, "required", null);
 __decorate([
     property({ reflect: true })
 ], Checkbox.prototype, "summary", void 0);

package/dist/dropdown.js

@@ -566,6 +566,7 @@ let Dropdown = class Dropdown extends LitElement {
                           data-id=${option.id}
                           label=${ifDefined(option.label)}
                           removable
+                          style="--max-inline-size: none"
                           ?disabled=${this.disabled || this.readonly}
                           ?private-editable=${option.editable}
                           ?private-readonly=${this.readonly}

package/dist/dropdown.styles.js

@@ -124,16 +124,13 @@ export default [
         ) {
         &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
-            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-interactive-stroke-focus);
         }
 
         &.error {
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
-            1px 1px 4px -1px
-              var(--glide-core-color-advisory-stroke-error-primary);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-advisory-stroke-error-primary);
         }
       }
     }
@@ -215,17 +212,11 @@ export default [
       gap: var(--glide-core-spacing-base-xs);
 
       /*
-        Tags will shrink down to zero and never overflow if they don't have a minimum
-        width. If they don't overflow, they'll remain visible and additionally won't be
-        included in the overflow count text. Thus a minimum width.
-
-        "3.5rem" is the size of a tag with only a single character. Ideally, its
-        minimum would be wider so a few characters are always visible. But a single-
-        character tag is possible and even likely. Setting a higher minimum width
-        would mean single or double-character tags would have whitespace between them.
-        It's equally unfortunate that Dropdown has to know anything about Tag's width.
+        Tags will overflow their columns if they don't have a minimum width. "5.5rem"
+        is roughly the size of a Tag with a few characters in it. That Dropdown has
+        to know anything about Tag's internal width is unfortunate.
       */
-      grid-auto-columns: minmax(3.5rem, auto);
+      grid-auto-columns: minmax(5.5rem, auto);
       grid-auto-flow: column;
       list-style-type: none;
       margin-block: 0;
@@ -338,7 +329,7 @@ export default [
       font-family: var(--glide-core-typography-family-primary);
       font-size: inherit;
       inline-size: 100%;
-      min-inline-size: 3.75rem;
+      min-inline-size: 3.125rem;
       padding-block-end: 0;
       padding-inline: 0;
 

package/dist/icon-button.js

@@ -41,12 +41,13 @@ let IconButton = class IconButton extends LitElement {
         this.#buttonElementRef = createRef();
         this.#defaultSlotElementRef = createRef();
     }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* v8 ignore stop */
     static { this.styles = styles; }
     // A getter and setter because Lit Analzyer doesn't recognize "aria-description"
     // as a valid attribute on the `<button>` and doesn't provide a way to selectively

package/dist/input.styles.js

@@ -68,16 +68,13 @@ export default [
       &.focused:not(.readonly) {
         &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
-            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-interactive-stroke-focus);
         }
 
         &.error {
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
-            1px 1px 4px -1px
-              var(--glide-core-color-advisory-stroke-error-primary);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-advisory-stroke-error-primary);
         }
       }
 

package/dist/link.js

@@ -37,6 +37,7 @@ let Link = class Link extends LitElement {
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     click() {
         this.#componentElementRef.value?.click();

package/dist/menu.js

@@ -665,7 +665,8 @@ let Menu = class Menu extends LitElement {
     // On both slots because VoiceOver can focus Options, causing them to emit
     // "keydown" events.
     #onTargetAndDefaultSlotKeyDown(event) {
-        const isOwnTarget = event.target === this.#targetElement;
+        const isOwnTarget = event.target instanceof Element &&
+            this.#targetElement?.contains(event.target);
         const isChildOfOptions = event.target instanceof Element &&
             event.target.closest('glide-core-options');
         const isArbitraryContent = !isOwnTarget && !isChildOfOptions;

package/dist/select.js

@@ -54,12 +54,12 @@ import OptionsGroup from './options.group.js';
  */
 let Select = class Select extends LitElement {
     static { this.formAssociated = true; }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
-    /* c8 ignore end */
+    /* v8 ignore end */
     static { this.styles = styles; }
     /**
      * @default 4

package/dist/slider.js

@@ -73,6 +73,7 @@ let Slider = class Slider extends LitElement {
         mode: window.navigator.webdriver ? 'open' : 'closed',
         delegatesFocus: true,
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     // Intentionally not reflected to match native.
     /**

package/dist/spinner.js

@@ -25,12 +25,13 @@ let Spinner = class Spinner extends LitElement {
         this.size = 'medium';
         this.version = packageJson.version;
     }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* v8 ignore stop */
     static { this.styles = styles; }
     render() {
         return html `<div

package/dist/split-button.primary-button.js

@@ -41,6 +41,7 @@ let SplitButtonPrimaryButton = class SplitButtonPrimaryButton extends LitElement
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         return html `<button

package/dist/split-button.primary-link.js

@@ -36,6 +36,7 @@ let SplitButtonPrimaryLink = class SplitButtonPrimaryLink extends LitElement {
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         if (this.disabled) {

package/dist/split-button.secondary-button.js

@@ -47,6 +47,7 @@ let SplitButtonSecondaryButton = class SplitButtonSecondaryButton extends LitEle
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     click() {
         this.#buttonElementRef.value?.click();

package/dist/tab.group.js

@@ -103,6 +103,7 @@ let TabGroup = class TabGroup extends LitElement {
             animated: this.hasUpdated,
         })}
             data-test="selected-tab-indicator"
+            @transitionstart=${this.#onSelectedTabIndicatorTransition}
             ${ref(this.#selectedTabIndicatorElementRef)}
           ></div>
         </div>
@@ -260,6 +261,9 @@ let TabGroup = class TabGroup extends LitElement {
             });
         }
     }
+    #onSelectedTabIndicatorTransition() {
+        this.#setOverflowButtonsState();
+    }
     #onTabListFocusout() {
         // Set the last selected tab as tabbable so that when pressing Shift + Tab on the
         // Tab Panel focus goes back to the last selected tab.

package/dist/tag.d.ts

@@ -14,6 +14,8 @@ declare global {
  *
  * @slot {Element} [icon]
  *
+ * @cssprop [--max-inline-size=max-content]
+ *
  * @fires {Event} edit
  * @fires {Event} remove
  */

package/dist/tag.js

@@ -26,6 +26,8 @@ import required from './library/required.js';
  *
  * @slot {Element} [icon]
  *
+ * @cssprop [--max-inline-size=max-content]
+ *
  * @fires {Event} edit
  * @fires {Event} remove
  */
@@ -55,12 +57,13 @@ let Tag = class Tag extends LitElement {
         this.#localize = new LocalizeController(this);
         this.#removalButtonElementRef = createRef();
     }
-    /* c8 ignore start */
+    /* v8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
         mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* v8 ignore stop */
     static { this.styles = styles; }
     click() {
         this.#removalButtonElementRef.value?.click();

package/dist/tag.styles.js

@@ -26,6 +26,10 @@ export default [
       }
     }
 
+    :host {
+      --max-inline-size: max-content;
+    }
+
     .component {
       align-items: center;
       background-color: var(
@@ -43,7 +47,7 @@ export default [
       font-weight: var(--glide-core-typography-weight-regular);
       justify-content: center;
       line-height: 1;
-      max-inline-size: max-content;
+      max-inline-size: var(--max-inline-size);
       opacity: 1;
       padding-inline: var(--glide-core-spacing-base-sm);
 
@@ -79,6 +83,7 @@ export default [
 
     .label {
       overflow: hidden;
+      text-align: center;
       text-overflow: ellipsis;
       white-space: nowrap;
     }

package/dist/textarea.styles.js

@@ -88,16 +88,13 @@ export default [
       &:focus-visible:not([readonly]) {
         &:not(.error) {
           border-color: var(--glide-core-color-interactive-stroke-focus);
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-interactive-stroke-focus),
-            1px 1px 4px -1px var(--glide-core-color-interactive-stroke-focus);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-interactive-stroke-focus);
         }
 
         &.error {
-          box-shadow:
-            0 0 0 1px var(--glide-core-color-advisory-stroke-error-primary),
-            1px 1px 4px -1px
-              var(--glide-core-color-advisory-stroke-error-primary);
+          box-shadow: inset 0 0 0 1px
+            var(--glide-core-color-advisory-stroke-error-primary);
         }
       }
 

package/dist/toast.toasts.js

@@ -80,7 +80,7 @@ let Toasts = class Toasts extends LitElement {
       <div class="toasts">
         ${repeat(this.toasts, (toast) => toast.privateId, (toast) => {
             return html `<div
-              aria-labelledby="prefix label description"
+              aria-describedby="description"
               class=${classMap({
                 toast: true,
                 error: toast.variant === 'error',
@@ -96,7 +96,7 @@ let Toasts = class Toasts extends LitElement {
               @mouseout=${this.#onToastMouseOut.bind(this, toast)}
               @transitionend=${this.#onToastTransitionEnd.bind(this, toast)}
             >
-              <span class="prefix" id="prefix">
+              <span class="prefix">
                 ${this.#localize.term(toast.variant)}
               </span>
 
@@ -105,9 +105,7 @@ let Toasts = class Toasts extends LitElement {
                 ['error', () => icons.error],
             ], () => icons.warningInformational)}
 
-              <div class="label" data-test="label" id="label">
-                ${toast.label}
-              </div>
+              <div class="label" data-test="label">${toast.label}</div>
 
               <glide-core-icon-button
                 class="dismiss-button"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -91,8 +91,8 @@
     "@types/mocha": "^10.0.10",
     "@types/serialize-javascript": "^5.0.4",
     "@types/sinon": "^17.0.3",
-    "@typescript-eslint/types": "^8.33.0",
-    "@typescript-eslint/utils": "^8.33.0",
+    "@typescript-eslint/types": "^8.42.0",
+    "@typescript-eslint/utils": "^8.42.0",
     "@web/dev-server-esbuild": "^1.0.4",
     "@web/dev-server-rollup": "^0.6.4",
     "@web/test-runner": "^0.20.2",
@@ -114,7 +114,7 @@
     "globals": "^15.13.0",
     "globby": "^14.0.2",
     "http-server": "^14.1.1",
-    "husky": "^8.0.3",
+    "husky": "^9.1.7",
     "is-ci": "^4.1.0",
     "istanbul-lib-coverage": "^3.2.2",
     "istanbul-lib-report": "^3.0.1",
@@ -125,7 +125,7 @@
     "matcher": "^5.0.0",
     "minify-literals": "^1.0.10",
     "node-html-parser": "^7.0.1",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0.4",
     "per-env": "^1.0.2",
     "playwright": "^1.54.2",
     "postcss": "^8.5.6",
@@ -144,10 +144,10 @@
     "stylelint-use-logical": "^2.1.2",
     "stylelint-use-nesting": "^6.0.0",
     "ts-lit-plugin": "^2.0.2",
-    "ts-morph": "^25.0.1",
+    "ts-morph": "^26.0.0",
     "tsx": "^4.19.2",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.0",
+    "typescript-eslint": "^8.42.0",
     "v8-to-istanbul": "^9.3.0",
     "vite": "^6.3.2",
     "yocto-spinner": "^0.2.0"