@crowdstrike/glide-core 0.32.1 → 0.32.3

package/dist/accordion.js

@@ -135,7 +135,6 @@ let Accordion = class Accordion extends LitElement {
             active: this.open || this.isClosing,
             open: this.open,
         })}
-        data-test="summary"
         @click=${this.#onSummaryClick}
         ${ref(this.#summaryElementRef)}
       >
@@ -181,7 +180,6 @@ let Accordion = class Accordion extends LitElement {
             'default-slot': true,
             indented: this.hasPrefixIcon,
         })}
-        data-test="default-slot"
         style=${styleMap({
             '--private-close-duration': 'var(--glide-core-duration-fast-02)',
             '--private-easing': 'var(--glide-core-animation-swoop)',

package/dist/button.d.ts

@@ -14,7 +14,7 @@ declare global {
  * @attr {string} [tooltip]
  * @attr {'button'|'submit'|'reset'} [type='button']
  * @attr {string} [value='']
- * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
+ * @attr {'primary'|'secondary'|'tertiary'|'link'} [variant='primary']
  *
  * @readonly
  * @attr {string} [version]
@@ -42,7 +42,7 @@ export default class Button extends LitElement {
     tooltip?: string;
     type: 'button' | 'submit' | 'reset';
     value: string;
-    variant: 'primary' | 'secondary' | 'tertiary';
+    variant: 'primary' | 'secondary' | 'tertiary' | 'link';
     readonly version: string;
     get form(): HTMLFormElement | null;
     click(): void;

package/dist/button.js

@@ -23,7 +23,7 @@ import required from './library/required.js';
  * @attr {string} [tooltip]
  * @attr {'button'|'submit'|'reset'} [type='button']
  * @attr {string} [value='']
- * @attr {'primary'|'secondary'|'tertiary'} [variant='primary']
+ * @attr {'primary'|'secondary'|'tertiary'|'link'} [variant='primary']
  *
  * @readonly
  * @attr {string} [version]
@@ -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}
     >
@@ -80,18 +81,22 @@ let Button = class Button extends LitElement {
             primary: this.variant === 'primary',
             secondary: this.variant === 'secondary',
             tertiary: this.variant === 'tertiary',
+            link: this.variant === 'link',
             large: this.size === 'large',
             small: this.size === 'small',
             disabled: this.disabled,
             'prefix-icon': this.hasPrefixIcon,
             'suffix-icon': this.hasSuffixIcon,
         })}
-        data-test="button"
         slot="target"
         @click=${this.#onClick}
         ${ref(this.#buttonElementRef)}
       >
         <slot
+          class=${classMap({
+            'prefix-icon-slot': true,
+            hidden: this.variant === 'link',
+        })}
           name="prefix-icon"
           @slotchange=${this.#onPrefixIconSlotChange}
           ${ref(this.#prefixIconSlotElementRef)}
@@ -102,9 +107,13 @@ let Button = class Button extends LitElement {
           -->
         </slot>
 
-        ${this.label}
+        <span class="label">${this.label}</span>
 
         <slot
+          class=${classMap({
+            'suffix-icon-slot': true,
+            hidden: this.variant === 'link',
+        })}
           name="suffix-icon"
           @slotchange=${this.#onSuffixIconSlotChange}
           ${ref(this.#suffixIconSlotElementRef)}

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);
@@ -135,17 +136,61 @@ export default [
         }
       }
 
-      &.large {
+      &.link {
+        background-color: initial;
+        border: none;
+        border-radius: var(--glide-core-rounding-base-radius-xxs);
+        color: var(--glide-core-color-interactive-text-link);
+        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);
+        }
+
+        &:not(:active):hover:not(.disabled) {
+          color: var(--glide-core-color-interactive-text-link--hover);
+          text-decoration: underline;
+        }
+      }
+
+      &.large:not(.link) {
         block-size: 2.125rem;
         font-size: var(--glide-core-typography-size-body-large);
         min-inline-size: 2.75rem;
       }
 
-      &.small {
+      &.small:not(.link) {
         block-size: 1.75rem;
         font-size: var(--glide-core-typography-size-body-small);
         min-inline-size: 2.5625rem;
       }
     }
+
+    .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
@@ -158,11 +159,13 @@ let Checkbox = class Checkbox extends LitElement {
         });
         this.#intersectionObserver.observe(this);
     }
+    /* v8 ignore start */
     disconnectedCallback() {
         super.disconnectedCallback();
         this.form?.removeEventListener('formdata', this.#onFormdata);
         this.#intersectionObserver?.disconnect();
     }
+    /* v8 ignore end */
     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
@@ -201,7 +204,7 @@ let Checkbox = class Checkbox extends LitElement {
         this.indeterminate = this.getAttribute('indeterminate') === '';
     }
     render() {
-        return html `<div class="component" data-test="component">
+        return html `<div class="component">
       ${when(this.privateVariant === 'minimal', () => html `
           <label
             class="label-and-input-and-checkbox"
@@ -289,7 +292,6 @@ let Checkbox = class Checkbox extends LitElement {
                 aria-describedby="summary description"
                 aria-invalid=${this.#isShowValidationFeedback}
                 class="input"
-                data-test="input"
                 id="input"
                 type="checkbox"
                 .checked=${this.checked}
@@ -343,8 +345,9 @@ let Checkbox = class Checkbox extends LitElement {
               ${when(this.#isShowValidationFeedback && this.validityMessage, () => html `<span
                     class="validity-message"
                     data-test="validity-message"
-                    >${unsafeHTML(this.validityMessage)}</span
-                  >`)}
+                  >
+                    ${unsafeHTML(this.validityMessage)}
+                  </span>`)}
             </div>
           </glide-core-private-label>`)}
     </div>`;
@@ -478,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
@@ -493,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 is interacted with it's no longer indeterminate.
+        // 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.1",
+  "version": "0.32.3",
   "description": "A Web Component design system",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",

package/dist/library/localize.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/library/localize.test.js

@@ -1,38 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { expect, fixture, html } from '@open-wc/testing';
-import en from '../translations/en.js';
-import { LocalizeController } from './localize.js';
-let Component = class Component extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.localize = new LocalizeController(this);
-    }
-};
-Component = __decorate([
-    customElement('glide-core-component')
-], Component);
-it('can call any term from en translation if locale is Japanese', async () => {
-    const host = await fixture(html `<glide-core-component></glide-core-component>`);
-    host.lang = 'ja';
-    expect(host.localize.lang()).to.equal('ja');
-    const keys = Object.keys(en);
-    for (const key of keys) {
-        expect(host.localize.term(key)).to.be.ok;
-    }
-});
-it('can call any term from en translation if locale is French', async () => {
-    const host = await fixture(html `<glide-core-component></glide-core-component>`);
-    host.lang = 'fr';
-    expect(host.localize.lang()).to.equal('fr');
-    const keys = Object.keys(en);
-    for (const key of keys) {
-        expect(host.localize.term(key)).to.be.ok;
-    }
-});