@crowdstrike/glide-core 0.32.2 → 0.33.0

package/dist/styles/opacity-and-scale-animation.js

@@ -16,7 +16,8 @@ export default (selector) => {
 
     ${unsafeCSS(selector)} {
       @media (prefers-reduced-motion: no-preference) {
-        animation: opacity-and-scale 250ms cubic-bezier(0.25, 0, 0.3, 1);
+        animation: opacity-and-scale var(--glide-core-duration-moderate-02)
+          var(--glide-core-animation-swoop);
       }
     }
   `;

package/dist/styles/variables.css

@@ -145,7 +145,7 @@
   --glide-core-private-color-button-stroke-default: #006ad4;
   --glide-core-private-color-button-text-primary: #ffffff;
   --glide-core-private-color-button-icon-primary: #ffffff;
-  --glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;
+  --glide-core-private-color-checkbox-surface-background-selected: #ffffff;
   --glide-core-private-color-checkbox-surface-background-idle: #ffffff;
   --glide-core-private-color-checkbox-icon-default--disabled: #d9d9d9;
   --glide-core-private-color-radio-icon-default--disabled: #d9d9d9;
@@ -306,7 +306,7 @@
   --glide-core-private-color-button-stroke-default: #5394d5;
   --glide-core-private-color-button-text-primary: #f9f9f9;
   --glide-core-private-color-button-icon-primary: #f9f9f9;
-  --glide-core-private-color-checkbox-surface-background-selected--default: #ffffff;
+  --glide-core-private-color-checkbox-surface-background-selected: #ffffff;
   --glide-core-private-color-checkbox-surface-background-idle: #1414144d;
   --glide-core-private-color-checkbox-icon-default--disabled: #434343;
   --glide-core-private-color-radio-icon-default--disabled: #434343;
@@ -394,8 +394,11 @@
   --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";
-  --glide-core-typography-family-monospace: "Oxygen Mono";
+  --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

@@ -18,7 +18,6 @@ import chevronIcon from './icons/chevron.js';
 import onResize from './library/on-resize.js';
 import styles from './tab.group.styles.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 /**
  * @readonly
@@ -47,10 +46,12 @@ let TabGroup = class TabGroup extends LitElement {
         this.#selectedTabIndicatorElementRef = createRef();
         this.#tabListElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     render() {
         return html `<div

package/dist/tab.js

@@ -9,7 +9,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './tab.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 import uniqueId from './library/unique-id.js';
@@ -42,10 +41,12 @@ let Tab = class Tab extends LitElement {
         this.role = 'tab';
         this.#isSelected = false;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false

package/dist/tab.panel.js

@@ -9,7 +9,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { customElement, property } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './tab.panel.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 import uniqueId from './library/unique-id.js';
@@ -38,10 +37,12 @@ let TabPanel = class TabPanel extends LitElement {
         this.id = uniqueId();
         this.#isSelected = false;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     // Private because it's only meant to be used by Tab Group.
     get privateIsSelected() {

package/dist/tag.js

@@ -14,7 +14,6 @@ import { LocalizeController } from './library/localize.js';
 import pencilIcon from './icons/pencil.js';
 import styles from './tag.styles.js';
 import xIcon from './icons/x.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -54,10 +53,11 @@ let Tag = class Tag extends LitElement {
         this.#localize = new LocalizeController(this);
         this.#removalButtonElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
         delegatesFocus: true,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
     static { this.styles = styles; }
     click() {

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

@@ -15,7 +15,6 @@ import { when } from 'lit/directives/when.js';
 import packageJson from '../package.json' with { type: 'json' };
 import { LocalizeController } from './library/localize.js';
 import styles from './textarea.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -40,6 +39,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
@@ -68,11 +68,13 @@ import required from './library/required.js';
  */
 let Textarea = class Textarea extends LitElement {
     static { this.formAssociated = true; }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
         delegatesFocus: true,
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     checkValidity() {
         this.isCheckingValidity = true;
@@ -195,7 +197,7 @@ let Textarea = class Textarea extends LitElement {
     reportValidity() {
         this.isReportValidityOrSubmit = true;
         const isValid = this.#internals.reportValidity();
-        // Ensures that getters referencing `this.validity.valid` are updated.
+        // Ensures getters referencing `this.validity.valid` re-run.
         this.requestUpdate();
         return isValid;
     }
@@ -262,12 +264,12 @@ let Textarea = class Textarea extends LitElement {
             this.isReportValidityOrSubmit = true;
             const isFirstInvalidFormElement = this.form?.querySelector(':invalid') === this;
             if (isFirstInvalidFormElement) {
-                // - `this.#internals.delegatesFocus` is preferred because it's declarative. But
-                //    it's limited to focusing the first focusable element. That doesn't work for
-                //    us because our first focusable element is the tooltip when it's present.
+                // - `delegatesFocus` is preferred because it's declarative. But it's limited to
+                //    focusing the first focusable element. That doesn't work for us because the first
+                //    focusable element is the Tooltip when it's present.
                 //
                 // - Canceling this event means the input won't get focus, even if we were to use
-                //   `this.#internals.delegatesFocus`.
+                //   `delegatesFocus`.
                 //
                 // - The browser will ignore this if Input isn't the first invalid form control.
                 //
@@ -310,14 +312,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/toast.js

@@ -9,7 +9,6 @@ import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import packageJson from '../package.json' with { type: 'json' };
 import Toasts from './toast.toasts.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 import Link from './link.js';
@@ -46,9 +45,10 @@ let Toast = class Toast extends LitElement {
         this.variant = 'informational';
         this.version = packageJson.version;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
     dismiss() {
         this.dispatchEvent(new Event('dismiss', { bubbles: true, composed: true }));

package/dist/toast.toasts.js

@@ -17,7 +17,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import xIcon from './icons/x.js';
 import { LocalizeController } from './library/localize.js';
 import styles from './toast.toasts.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import Toast from './toast.js';
 import Link from './link.js';
@@ -40,10 +39,12 @@ let Toasts = class Toasts extends LitElement {
         this.#componentElementRef = createRef();
         this.#localize = new LocalizeController(this);
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     dismiss(toast) {
         const index = this.toasts.indexOf(toast);

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

@@ -12,7 +12,6 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { when } from 'lit/directives/when.js';
 import packageJson from '../package.json' with { type: 'json' };
 import styles from './toggle.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -30,6 +29,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() {
@@ -41,10 +41,12 @@ let Toggle = class Toggle extends LitElement {
         this.version = packageJson.version;
         this.#inputElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     click() {
         this.#inputElementRef.value?.click();
@@ -136,9 +138,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/dist/tooltip.container.js

@@ -10,7 +10,6 @@ import { classMap } from 'lit/directives/class-map.js';
 import { map } from 'lit/directives/map.js';
 import { when } from 'lit/directives/when.js';
 import styles from './tooltip.container.styles.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import uniqueId from './library/unique-id.js';
 // This component exists because Tooltip's target and its tooltip both need to
@@ -46,10 +45,12 @@ let TooltipContainer = class TooltipContainer extends LitElement {
         this.shortcut = [];
         this.#isDisabled = false;
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default false

package/dist/tooltip.js

@@ -14,7 +14,6 @@ import packageJson from '../package.json' with { type: 'json' };
 import styles from './tooltip.styles.js';
 import './tooltip.container.js';
 import assertSlot from './library/assert-slot.js';
-import shadowRootMode from './library/shadow-root-mode.js';
 import final from './library/final.js';
 import required from './library/required.js';
 /**
@@ -48,10 +47,12 @@ let Tooltip = class Tooltip extends LitElement {
         this.#targetSlotElementRef = createRef();
         this.#tooltipElementRef = createRef();
     }
+    /* c8 ignore start */
     static { this.shadowRootOptions = {
         ...LitElement.shadowRootOptions,
-        mode: shadowRootMode,
+        mode: window.navigator.webdriver ? 'open' : 'closed',
     }; }
+    /* c8 ignore end */
     static { this.styles = styles; }
     /**
      * @default undefined
@@ -265,11 +266,7 @@ let Tooltip = class Tooltip extends LitElement {
         ])}
           </div>
 
-          <div
-            class=${classMap({
-            content: true,
-        })}
-          >
+          <div class="content">
             <slot class="default-slot" name="private">
               <!--
                 @type {TooltipContainer}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.32.2",
+  "version": "0.33.0",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",
@@ -68,7 +68,6 @@
     "@figma/rest-api-spec": "^0.32.0",
     "@html-eslint/eslint-plugin": "^0.41.0",
     "@jridgewell/trace-mapping": "^0.3.29",
-    "@lit-labs/ssr": "^3.3.1",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.54.2",
     "@rollup/plugin-commonjs": "^28.0.2",
@@ -90,8 +89,8 @@
     "@types/istanbul-lib-report": "^3.0.3",
     "@types/istanbul-reports": "^3.0.4",
     "@types/mocha": "^10.0.10",
+    "@types/serialize-javascript": "^5.0.4",
     "@types/sinon": "^17.0.3",
-    "@typescript-eslint/rule-tester": "^8.33.0",
     "@typescript-eslint/types": "^8.33.0",
     "@typescript-eslint/utils": "^8.33.0",
     "@web/dev-server-esbuild": "^1.0.4",
@@ -135,6 +134,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rimraf": "^6.0.1",
+    "serialize-javascript": "^6.0.2",
     "sinon": "^19.0.2",
     "storybook": "^8.6.14",
     "stylelint": "^16.21.1",
@@ -189,7 +189,7 @@
     "test:development:playwright": "npm-run-all --parallel test:development:playwright:coverage test:development:playwright:ui",
     "test:development:playwright:coverage": "http-server ./dist/playwright/coverage-report --port 6008 --silent",
     "test:development:playwright:ui": "playwright test --config ./src/playwright/playwright.config.ts --ui-port 6007 --update-snapshots --update-source-method=overwrite",
-    "test:development:playwright:update": "PLAYWRIGHT_SKIP_COVERAGE=true playwright test --config ./src/playwright/playwright.config.ts --quiet --project accessibility --update-snapshots --update-source-method=overwrite --workers 100%",
+    "test:development:playwright:update": "PLAYWRIGHT_SKIP_COVERAGE=true playwright test --config ./src/playwright/playwright.config.ts --quiet --grep @accessibility --update-snapshots --update-source-method=overwrite --workers 100%",
     "test:development:web-test-runner": "web-test-runner --watch",
     "test:production": "pnpm start:production:esbuild && npm-run-all --aggregate-output --print-label --parallel test:production:*",
     "test:production:playwright": "playwright test --config ./src/playwright/playwright.config.ts --grep 'is accessible|@eslint|@events|@forms|@keyboard|@miscellaneous|@mouse|@stylelint'",

package/dist/library/shadow-root-mode.d.ts

@@ -1,2 +0,0 @@
-declare const _default: "open" | "closed";
-export default _default;

package/dist/library/shadow-root-mode.js

@@ -1,4 +0,0 @@
-// This one-liner exists for code coverage purposes. Components
-// can't inline the ternary because the alternate branch is
-// untestable.
-export default window.navigator.webdriver ? 'open' : 'closed';