@crowdstrike/glide-core

A Web Component design system

Usage

1. Install the dependencies

pnpm install @crowdstrike/glide-core lit

2. Import the fonts and variables

@import '@crowdstrike/glide-core/styles/fonts.css';
@import '@crowdstrike/glide-core/styles/variables.css';

3. Import your component

import '@crowdstrike/glide-core/button.js';

4. Render your component

<glide-core-button label="Button"></glide-core-button>

Changelog

0.34.1

Patch Changes

• #1117 cd0fd8a Thanks @clintcs! - Toast's label and variant are no longer announced twice by screenreaders.

• #1144 d15a70e Thanks @clintcs! - The minimum width of filterable Dropdown's input field has been moderately decreased.

• #1142 63b9cf6 Thanks @ynotdraw! - Dropdown, Input, and Textarea focus states were updated so their shadows aren't clipped when in a container without padding.

• #1143 dbbbf09 Thanks @clintcs! - - Multiselect Dropdown's tags now have a slightly longer minimum width.

  • Tag now has a --max-inline-size CSS custom property.

• #1141 b4d8800 Thanks @ynotdraw! - Fixed an issue where the overflow buttons would appear when transitioning from a Tab with many characters to one with few.

• #1139 6fe1c44 Thanks @ynotdraw! - Menu options are now keyboard navigable when the target is wrapped in a Tooltip.

  <glide-core-menu>
    <glide-core-tooltip label="Label" slot="target">
      <glide-core-icon-button label="Toggle" slot="target">
        <glide-core-example-icon name="three-dots"></glide-core-example-icon>
      </glide-core-icon-button>
    </glide-core-tooltip>
  
    <glide-core-options>
      <glide-core-option label="One"></glide-core-option>
      <glide-core-option label="Two"></glide-core-option>
    </glide-core-options>
  </glide-core-menu>