@crowdstrike/glide-core 0.32.1 → 0.32.2

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]
@@ -80,18 +80,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)}
@@ -105,6 +109,10 @@ let Button = class Button extends LitElement {
         ${this.label}
 
         <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

@@ -135,17 +135,48 @@ 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;
+
+        &.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;
       }
     }
+
+    .prefix-icon-slot {
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .suffix-icon-slot {
+      &.hidden {
+        display: none;
+      }
+    }
   `,
 ];

package/dist/checkbox.js

@@ -158,11 +158,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 +203,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 +291,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 +344,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>`;
@@ -500,7 +502,7 @@ let Checkbox = class Checkbox extends LitElement {
         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;
         if (event.type === 'change') {
             // Unlike "input" events, "change" events aren't composed. So we have to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.32.1",
+  "version": "0.32.2",
   "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;
-    }
-});