@crowdstrike/glide-core 0.33.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) {
@@ -238,7 +225,8 @@ let Checkbox = class Checkbox extends LitElement {
             disabled: this.disabled,
         })}
               >
-                <div class="checked-icon">${checkedIcon}</div>
+                <div class="checked-icon" role="none">${checkedIcon}</div>
+
                 ${icons.indeterminate}
               </div>
             </div>
@@ -288,7 +276,7 @@ let Checkbox = class Checkbox extends LitElement {
               Screenreaders will come across the tooltip naturally as focus moves toward
               the Checkbox.
             -->
-            <div class="input-and-checkbox" slot="control">
+            <div class="input-and-checkbox" slot="control" role="none">
               <input
                 aria-describedby="summary description"
                 aria-invalid=${this.#isShowValidationFeedback}
@@ -378,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);
     }
@@ -402,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
@@ -456,11 +446,13 @@ let Checkbox = class Checkbox extends LitElement {
             }
         });
     }
+    #hasCustomValidity;
     #inputElementRef;
     #internals;
     #intersectionObserver;
     #isChecked;
     #isDisabled;
+    #isRequired;
     #label;
     #labelElementRef;
     #value;
@@ -468,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 &&
@@ -524,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 =
@@ -587,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,8 +566,10 @@ 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}
                           @edit=${this.#onTagEdit}
                           @remove=${this.#onTagRemove.bind(this, option)}
                         >
@@ -598,7 +600,11 @@ let Dropdown = class Dropdown extends LitElement {
             this.selectedAndEnabledOptions.length > this.tagOverflowLimit, () => {
             return html `<div
                   aria-hidden="true"
-                  class="tag-overflow-text"
+                  class=${classMap({
+                'tag-overflow-text': true,
+                disabled: this.disabled,
+                readonly: this.readonly,
+            })}
                   id="tag-overflow-text"
                 >
                   +
@@ -650,6 +656,7 @@ let Dropdown = class Dropdown extends LitElement {
             .isCommunicateItemCountToScreenreaders
             ? 'item-count'
             : ''}"
+                  aria-required=${this.required}
                   autocapitalize="off"
                   autocomplete="off"
                   class=${classMap({
@@ -755,32 +762,31 @@ let Dropdown = class Dropdown extends LitElement {
                     ${pencilIcon}
                   </glide-core-icon-button>`;
         })}
-
-              <button
-                aria-controls="options"
-                aria-describedby="description"
-                aria-expanded=${this.open && !this.disabled}
-                aria-haspopup="listbox"
-                aria-hidden=${this.filterable || this.isFilterable}
-                aria-labelledby="selected-option-labels label loading-feedback"
-                class="primary-button"
-                data-test="primary-button"
-                id="primary-button"
-                tabindex=${this.filterable || this.isFilterable || this.disabled
-            ? '-1'
-            : '0'}
-                type="button"
-                ?disabled=${this.disabled}
-                @focusin=${this.#onPrimaryButtonFocusin}
-                @focusout=${this.#onPrimaryButtonFocusout}
-                ${ref(this.#primaryButtonElementRef)}
-              >
-                ${when(this.isFiltering, () => {
-            return html `<div data-test="magnifying-glass-icon">
-                      ${magnifyingGlassIcon}
-                    </div>`;
-        }, () => chevronIcon)}
-              </button>
+              ${when(!(this.disabled || this.readonly), () => {
+            return html `<button
+                  aria-controls="options"
+                  aria-describedby="description"
+                  aria-expanded=${this.open}
+                  aria-haspopup="listbox"
+                  aria-hidden=${this.filterable || this.isFilterable}
+                  aria-labelledby="selected-option-labels label loading-feedback"
+                  aria-required=${this.required}
+                  class="primary-button"
+                  data-test="primary-button"
+                  id="primary-button"
+                  tabindex=${this.filterable || this.isFilterable ? '-1' : '0'}
+                  type="button"
+                  @focusin=${this.#onPrimaryButtonFocusin}
+                  @focusout=${this.#onPrimaryButtonFocusout}
+                  ${ref(this.#primaryButtonElementRef)}
+                >
+                  ${when(this.isFiltering, () => {
+                return html `<div data-test="magnifying-glass-icon">
+                        ${magnifyingGlassIcon}
+                      </div>`;
+            }, () => chevronIcon)}
+                </button>`;
+        })}
             </div>
           </div>
 

package/dist/dropdown.styles.js

@@ -93,9 +93,10 @@ export default [
       }
 
       &.readonly {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border-color: transparent;
-        padding-inline-start: 0;
       }
 
       &.quiet {
@@ -123,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);
         }
       }
     }
@@ -214,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;
@@ -249,6 +241,14 @@ export default [
       align-content: center;
       color: var(--glide-core-color-interactive-text-link);
       white-space: nowrap;
+
+      &.disabled {
+        color: var(--glide-core-color-interactive-text-link--disabled);
+      }
+
+      &.readonly {
+        color: var(--glide-core-color-interactive-text-default);
+      }
     }
 
     .single-select-icon-slot {
@@ -329,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/inline-alert.d.ts

@@ -11,6 +11,9 @@ declare global {
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the alert
+ *
+ * @readonly
+ * @prop {string} ariaLabel
  */
 export default class InlineAlert extends LitElement {
     #private;
@@ -18,6 +21,7 @@ export default class InlineAlert extends LitElement {
     static styles: import("lit").CSSResult[];
     variant: 'informational' | 'medium' | 'high' | 'critical';
     readonly version: string;
+    get ariaLabel(): string;
     firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/inline-alert.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './inline-alert.styles.js';
@@ -16,6 +16,7 @@ import severityMediumIcon from './icons/severity-medium.js';
 import severityCriticalIcon from './icons/severity-critical.js';
 import assertSlot from './library/assert-slot.js';
 import final from './library/final.js';
+import { LocalizeController } from './library/localize.js';
 /**
  * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
  *
@@ -23,6 +24,9 @@ import final from './library/final.js';
  * @attr {string} [version]
  *
  * @slot {Element | string} - The content of the alert
+ *
+ * @readonly
+ * @prop {string} ariaLabel
  */
 let InlineAlert = class InlineAlert extends LitElement {
     constructor() {
@@ -31,6 +35,7 @@ let InlineAlert = class InlineAlert extends LitElement {
         this.version = packageJson.version;
         this.#animationDuration = 100;
         this.#componentElementRef = createRef();
+        this.#localize = new LocalizeController(this);
     }
     /* c8 ignore start */
     static { this.shadowRootOptions = {
@@ -39,6 +44,15 @@ let InlineAlert = class InlineAlert extends LitElement {
     }; }
     /* c8 ignore end */
     static { this.styles = styles; }
+    get ariaLabel() {
+        return this.#localize.term(this.variant === 'informational'
+            ? 'severityInformational'
+            : this.variant === 'medium'
+                ? 'severityMedium'
+                : this.variant === 'high'
+                    ? 'severityHigh'
+                    : 'severityCritical');
+    }
     firstUpdated() {
         this.#componentElementRef.value?.addEventListener('animationend', () => {
             this.#componentElementRef.value?.classList.remove('added');
@@ -47,14 +61,14 @@ let InlineAlert = class InlineAlert extends LitElement {
     render() {
         return html `
       <div
+        aria-label=${this.ariaLabel}
         class=${classMap({
             component: true,
             added: true,
             [this.variant]: true,
         })}
-        role="alert"
-        aria-labelledby="label"
         data-test="component"
+        role="alert"
         style="--private-animation-duration: ${this.#animationDuration}ms"
         ${ref(this.#componentElementRef)}
       >
@@ -68,7 +82,7 @@ let InlineAlert = class InlineAlert extends LitElement {
           ${icons[this.variant]}
         </div>
 
-        <div id="label" class="content">
+        <div class="content">
           <slot ${assertSlot()}>
             <!--
               The content of the alert
@@ -82,6 +96,7 @@ let InlineAlert = class InlineAlert extends LitElement {
     }
     #animationDuration;
     #componentElementRef;
+    #localize;
 };
 __decorate([
     property({ reflect: true, useDefault: true })
@@ -89,6 +104,9 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], InlineAlert.prototype, "version", void 0);
+__decorate([
+    state()
+], InlineAlert.prototype, "ariaLabel", null);
 InlineAlert = __decorate([
     customElement('glide-core-inline-alert'),
     final

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);
         }
       }
 
@@ -86,9 +83,10 @@ export default [
         with ":read-only": https://bugs.chromium.org/p/chromium/issues/detail?id=1519649
       */
       &.readonly {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border: 1px solid transparent;
-        padding-inline-start: 0;
       }
 
       &.disabled {

package/dist/library/localize.d.ts

@@ -18,6 +18,7 @@ export interface Translation extends DefaultTranslation {
     severityInformational: string;
     severityCritical: string;
     severityMedium: string;
+    severityHigh: string;
     success: string;
     error: string;
     informational: string;

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/slider.styles.js

@@ -118,9 +118,7 @@ export default [
     }
 
     .handle {
-      background-color: var(
-        --glide-core-private-color-slider-and-scrollbar-surface-handle
-      );
+      background-color: var(--glide-core-private-color-slider-surface-handle);
       block-size: 1.5rem;
       border: 2px solid var(--glide-core-color-interactive-stroke-active);
       border-radius: var(--glide-core-rounding-base-radius-round);

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/styles/variables.css

@@ -123,7 +123,7 @@
   --glide-core-color-severity-stroke-high: #ffbf66;
   --glide-core-color-severity-stroke-medium: #ffcc00;
   --glide-core-color-severity-stroke-low: #c9c9c9;
-  --glide-core-color-severity-text-citical: #2c0907;
+  --glide-core-color-severity-text-critical: #2c0907;
   --glide-core-color-severity-text-high: #331e00;
   --glide-core-color-severity-text-medium: #332900;
   --glide-core-color-severity-text-low: #212121;
@@ -153,7 +153,7 @@
   --glide-core-private-color-dialog-and-modal-surface-overlay: #0000008c;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #0000000d;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #0000001a;
-  --glide-core-private-color-slider-and-scrollbar-surface-handle: #f0f0f0;
+  --glide-core-private-color-slider-surface-handle: #f0f0f0;
   --glide-core-private-color-tabs-stroke-underline: #e3e3e3;
   --glide-core-private-color-template-surface-container-detail: #ffffffe5;
   --glide-core-private-color-tooltip-surface-container: #212121;
@@ -284,7 +284,7 @@
   --glide-core-color-severity-stroke-high: #e7a649;
   --glide-core-color-severity-stroke-medium: #f0cf4f;
   --glide-core-color-severity-stroke-low: #727272;
-  --glide-core-color-severity-text-citical: #e67873;
+  --glide-core-color-severity-text-critical: #e67873;
   --glide-core-color-severity-text-high: #ffb64f;
   --glide-core-color-severity-text-medium: #f0cf4f;
   --glide-core-color-severity-text-low: #f9f9f9;
@@ -314,7 +314,7 @@
   --glide-core-private-color-dialog-and-modal-surface-overlay: #141414d9;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-sides: #ffffff0d;
   --glide-core-private-color-skeleton-loader-surface-linear-gradient-middle: #ffffff1a;
-  --glide-core-private-color-slider-and-scrollbar-surface-handle: #2c2c2c;
+  --glide-core-private-color-slider-surface-handle: #2c2c2c;
   --glide-core-private-color-tabs-stroke-underline: #ffffff26;
   --glide-core-private-color-template-surface-container-detail: #222222;
   --glide-core-private-color-tooltip-surface-container: #dcdcdc;
@@ -337,12 +337,18 @@
   --glide-core-duration-fast-02: 100ms;
   --glide-core-duration-moderate-01: 150ms;
   --glide-core-duration-moderate-02: 250ms;
+  --glide-core-duration-moderate-03: 325ms;
   --glide-core-duration-slow-01: 400ms;
   --glide-core-duration-slow-02: 900ms;
 }
 
 /* src/styles/variables/miscellaneous.css */
 :root {
+  --glide-core-typography-family-primary: "Nunito", system-ui;
+  --glide-core-typography-family-monospace:
+    "Oxygen Mono",
+    ui-monospace,
+    monospace;
   --glide-core-effect-hovered: 0px 0px 2px 0px var(--glide-core-color-effect-color-elevation-hovered);
   --glide-core-effect-lifted: 0px 2px 8px 0px var(--glide-core-color-effect-color-elevation-lifted);
   --glide-core-effect-raised: 0px 3px 1px 0px var(--glide-core-color-effect-color-elevation-raised-1), 0px 3px 8px 0 var(--glide-core-color-effect-color-elevation-raised-2);
@@ -394,11 +400,6 @@
   --glide-core-typography-size-body-default: 0.875rem;
   --glide-core-typography-size-body-small: 0.75rem;
   --glide-core-typography-size-component-chartlabel-md: 0.625rem;
-  --glide-core-typography-family-primary: "Nunito", system-ui;
-  --glide-core-typography-family-monospace:
-    "Oxygen Mono",
-    ui-monospace,
-    monospace;
   --glide-core-typography-weight-light: 300;
   --glide-core-typography-weight-regular: 400;
   --glide-core-typography-weight-semibold: 600;

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
  */
@@ -24,6 +26,7 @@ export default class Tag extends LitElement {
     label?: string;
     disabled: boolean;
     privateEditable: boolean;
+    privateReadonly: boolean;
     removable: boolean;
     readonly version: string;
     click(): void;

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
  */
@@ -35,6 +37,8 @@ let Tag = class Tag extends LitElement {
         this.disabled = false;
         // Private because it's only meant to be used by Dropdown.
         this.privateEditable = false;
+        // Private because it's only meant to be used by Dropdown.
+        this.privateReadonly = false;
         this.removable = false;
         this.version = packageJson.version;
         this.#animationDuration = 100;
@@ -53,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();
@@ -78,6 +83,7 @@ let Tag = class Tag extends LitElement {
             component: true,
             added: true,
             disabled: this.disabled,
+            readonly: this.privateReadonly,
         })}
         data-test="component"
         data-animation-duration=${this.#animationDuration}
@@ -194,6 +200,9 @@ __decorate([
 __decorate([
     property({ attribute: 'private-editable', reflect: true, type: Boolean })
 ], Tag.prototype, "privateEditable", void 0);
+__decorate([
+    property({ attribute: 'private-readonly', reflect: true, type: Boolean })
+], Tag.prototype, "privateReadonly", void 0);
 __decorate([
     property({ reflect: true, type: Boolean })
 ], Tag.prototype, "removable", void 0);

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);
 
@@ -54,11 +58,19 @@ export default [
       }
 
       &.disabled {
-        background: var(--glide-core-color-static-surface-container-secondary);
+        background-color: var(
+          --glide-core-color-static-surface-container-secondary
+        );
         border-color: var(--glide-core-color-interactive-stroke-primary);
         color: var(--glide-core-color-interactive-icon-default--disabled);
       }
 
+      &.readonly {
+        background-color: var(--glide-core-color-static-surface-container);
+        border-color: var(--glide-core-color-interactive-stroke-primary);
+        color: var(--glide-core-color-interactive-text-default);
+      }
+
       &.removed {
         @media (prefers-reduced-motion: no-preference) {
           animation-duration: var(--private-animation-duration);
@@ -71,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);
         }
       }
 
@@ -114,10 +111,11 @@ export default [
       }
 
       &[readonly] {
-        background-color: transparent;
+        background-color: var(
+          --glide-core-color-interactive-surface-container--disabled
+        );
         border-color: transparent;
         outline: none;
-        padding-inline-start: 0;
         resize: none;
         transition: none;
       }

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/dist/tooltip.js

@@ -330,8 +330,8 @@ let Tooltip = class Tooltip extends LitElement {
     #onTargetSlotChange() {
         const container = this.querySelector('glide-core-private-tooltip-container');
         const target = this.#targetSlotElementRef.value?.assignedElements().at(0);
-        if (container && target && !this.disabled && !this.screenreaderHidden) {
-            target.setAttribute('aria-describedby', container.id);
+        if (container && !this.disabled && !this.screenreaderHidden) {
+            target?.setAttribute('aria-describedby', container.id);
         }
     }
     #onTargetSlotFocusIn() {

package/dist/translations/en.js

@@ -16,6 +16,7 @@ const translation = {
     severityInformational: 'Severity: Informational',
     severityCritical: 'Severity: Critical',
     severityMedium: 'Severity: Medium',
+    severityHigh: 'Severity: High',
     success: 'Success:',
     error: 'Error:',
     informational: 'Informational:',

package/dist/translations/fr.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "severityHigh", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/fr.js

@@ -2,6 +2,7 @@ export const PENDING_STRINGS = [
     'severityInformational',
     'severityCritical',
     'severityMedium',
+    'severityHigh',
     'success',
     'error',
     'informational',

package/dist/translations/ja.d.ts

@@ -1,5 +1,5 @@
 import type { Translation } from '../library/localize.js';
-export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
+export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "severityHigh", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions", "maximum", "setMaximum", "minimum", "setMinimum", "add"];
 type PendingTranslation = (typeof PENDING_STRINGS)[number];
 declare const translation: Omit<Translation, PendingTranslation>;
 export default translation;

package/dist/translations/ja.js

@@ -2,6 +2,7 @@ export const PENDING_STRINGS = [
     'severityInformational',
     'severityCritical',
     'severityMedium',
+    'severityHigh',
     'success',
     'error',
     'informational',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.33.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"