@crowdstrike/glide-core 0.9.1 → 0.9.2

package/dist/tree.item.styles.js

@@ -1,4 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
+    ${focusOutline(".label-container:focus-visible")}
+  `,css`
     :host {
       cursor: pointer;
       display: flex;
@@ -50,6 +52,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       font-size: var(--glide-core-body-sm-font-size);
       padding-block: var(--glide-core-spacing-xxs);
       padding-inline: var(--glide-core-spacing-xs);
+      transition: background-color 150ms ease-in-out;
 
       &:hover {
         background-color: var(--glide-core-surface-hover);
@@ -64,13 +67,18 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
       }
 
       &:focus-visible {
-        ${focusOutline};
-
         /* The outline is inside the component since children have overflow hidden */
         outline-offset: -2px;
 
         .component.selected & {
-          outline: 1px solid var(--glide-core-icon-selected);
+          /*
+            We need !important here as we must override the focusVisible mixin
+            that also includes !important.
+            This component is a bit of a unique case as we want to override the
+            default outline styles when a tree item is also focus-visible, but
+            also selected.
+          */
+          outline: 1px solid var(--glide-core-icon-selected) !important;
           outline-offset: -3px;
         }
       }

package/dist/tree.item.test.basics.js

@@ -52,36 +52,6 @@ it('adds label to menu target', async () => {
         ?.querySelector('glide-core-icon-button');
     expect(menuTarget?.label).to.equal('Actions for Item');
 });
-it('adds Japanese label to menu', async () => {
-    document.documentElement.setAttribute('lang', 'ja');
-    const treeItem = await fixture(html `
-    <glide-core-tree-item label="Item">
-      <glide-core-tree-item-menu slot="menu" data-menu>
-        <glide-core-menu-link label="Move" url="/move"> </glide-core-menu-link>
-      </glide-core-tree-item-menu>
-    </glide-core-tree-item>
-  `);
-    const menuTarget = treeItem
-        .querySelector('glide-core-tree-item-menu')
-        ?.shadowRoot?.querySelector('glide-core-menu')
-        ?.querySelector('glide-core-icon-button');
-    expect(menuTarget?.label).to.equal('Actions for Item');
-});
-it('adds French label to menu', async () => {
-    document.documentElement.setAttribute('lang', 'fr');
-    const treeItem = await fixture(html `
-    <glide-core-tree-item label="Item">
-      <glide-core-tree-item-menu slot="menu" data-menu>
-        <glide-core-menu-link label="Move" url="/move"> </glide-core-menu-link>
-      </glide-core-tree-item-menu>
-    </glide-core-tree-item>
-  `);
-    const menuTarget = treeItem
-        .querySelector('glide-core-tree-item-menu')
-        ?.shadowRoot?.querySelector('glide-core-menu')
-        ?.querySelector('glide-core-icon-button');
-    expect(menuTarget?.label).to.equal('Actions for Item');
-});
 it('renders with a suffix slot', async () => {
     await fixture(html `
     <glide-core-tree-item label="Item">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",

package/dist/button.test.form.d.ts

@@ -1 +0,0 @@
-import './button.js';

package/dist/button.test.form.js

@@ -1,50 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import './button.js';
-import { expect, fixture, html, oneEvent } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import GlideCoreButton from './button.js';
-GlideCoreButton.shadowRootOptions.mode = 'open';
-it('participates in a form when type="reset"', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
-        parentNode: form,
-    });
-    const formResetEvent = oneEvent(form, 'reset');
-    component.shadowRoot?.querySelector('button')?.click();
-    const event = await formResetEvent;
-    expect(event instanceof Event).to.be.true;
-});
-it('participates in a form when hitting "enter" and type="reset"', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="reset">Button</glide-core-button> `, {
-        parentNode: form,
-    });
-    const formResetEvent = oneEvent(form, 'reset');
-    component.focus();
-    await sendKeys({ press: 'Enter' });
-    const event = await formResetEvent;
-    expect(event instanceof Event).to.be.true;
-});
-it('participates in a form when type="submit"', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
-        parentNode: form,
-    });
-    form.addEventListener('submit', (event) => event.preventDefault());
-    const formSubmitEvent = oneEvent(form, 'submit');
-    component.shadowRoot?.querySelector('button')?.click();
-    const event = await formSubmitEvent;
-    expect(event instanceof Event).to.be.true;
-});
-it('participates in a form when hitting "enter" and type="submit"', async () => {
-    const form = document.createElement('form');
-    const component = await fixture(html ` <glide-core-button type="submit">Button</glide-core-button> `, {
-        parentNode: form,
-    });
-    form.addEventListener('submit', (event) => event.preventDefault());
-    const formSubmitEvent = oneEvent(form, 'submit');
-    component.focus();
-    await sendKeys({ press: 'Enter' });
-    const event = await formSubmitEvent;
-    expect(event instanceof Event).to.be.true;
-});

package/dist/input.test.translations.js

@@ -1,38 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreInput from './input.js';
-GlideCoreInput.shadowRootOptions.mode = 'open';
-it('renders dynamic strings in Japanese', async () => {
-    const element = await fixture(html `
-    <glide-core-input
-      label="Test"
-      value="lorem"
-      maxlength="40"
-      clearable
-    ></glide-core-input>
-  `);
-    document.documentElement.setAttribute('lang', 'ja');
-    await elementUpdated(element);
-    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
-    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
-    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
-    expect(element.shadowRoot?.querySelector('[data-test="clear-button"]')?.label).to.equal('Clear Test entry');
-});
-it('renders dynamic strings in French', async () => {
-    const element = await fixture(html `
-    <glide-core-input
-      label="Test"
-      value="lorem"
-      maxlength="40"
-      clearable
-    ></glide-core-input>
-  `);
-    document.documentElement.setAttribute('lang', 'fr');
-    await elementUpdated(element);
-    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
-    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
-    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
-    expect(element.shadowRoot?.querySelector('[data-test="clear-button"]')?.label).to.equal('Clear Test entry');
-});

package/dist/tag.test.translations.d.ts

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

package/dist/tag.test.translations.js

@@ -1,25 +0,0 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreTag from './tag.js';
-GlideCoreTag.shadowRootOptions.mode = 'open';
-it('renders dynamic string in Japanese', async () => {
-    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    document.documentElement.setAttribute('lang', 'ja');
-    await elementUpdated(element);
-    const iconButton = element.shadowRoot?.querySelector('button');
-    expect(iconButton).to.have.attribute('aria-label', `タグを削除: test-aria-label`);
-    expect(iconButton).to.have.attribute('type', 'button');
-});
-it('renders dynamic string in French', async () => {
-    const element = await fixture(html `<glide-core-tag removable-label="test-aria-label"
-      ><span slot="prefix">Prefix</span
-      ><span data-content>Tag</span></glide-core-tag
-    >`);
-    document.documentElement.setAttribute('lang', 'fr');
-    await elementUpdated(element);
-    const iconButton = element.shadowRoot?.querySelector('button');
-    expect(iconButton).to.have.attribute('aria-label', `Supprimer la balise : test-aria-label`);
-    expect(iconButton).to.have.attribute('type', 'button');
-});

package/dist/textarea.test.translations.d.ts

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

package/dist/textarea.test.translations.js

@@ -1,34 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import GlideCoreTextarea from './textarea.js';
-GlideCoreTextarea.shadowRootOptions.mode = 'open';
-it('renders dynamic strings in Japanese', async () => {
-    const element = await fixture(html `
-    <glide-core-textarea
-      label="Test"
-      value="lorem"
-      maxlength="40"
-    ></glide-core-textarea>
-  `);
-    document.documentElement.setAttribute('lang', 'ja');
-    await elementUpdated(element);
-    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
-    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
-    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
-});
-it('renders dynamic strings in French', async () => {
-    const element = await fixture(html `
-    <glide-core-textarea
-      label="Test"
-      value="lorem"
-      maxlength="40"
-    ></glide-core-textarea>
-  `);
-    document.documentElement.setAttribute('lang', 'fr');
-    await elementUpdated(element);
-    const maxCharacterCountText = element.shadowRoot?.querySelector('[data-test="character-count-text"]');
-    expect(maxCharacterCountText?.textContent?.trim()).to.equal('5/40');
-    const maxCharacterCountAnnouncement = element.shadowRoot?.querySelector('[data-test="character-count-announcement"]');
-    expect(maxCharacterCountAnnouncement?.textContent?.trim()).to.equal('Character count 5 of 40');
-});