Patch Changes

• #350 68fa69b Thanks @clintcs! - The weight of Dropdown's button font is no longer bold when variant="quiet".

• #351 cda0918 Thanks @ynotdraw! - Updated Dropdown and Menu open animations to align with Tooltip.

• #345 c7d13aa Thanks @clintcs! - Dropdown Option's checkmark icon is now on the right to match new design requirements.

• #354 0cc1af3 Thanks @dylankcrwd! - glide-core-tab-group active tab indicator is reevaluated on tab slot changes.

• #338 c72aa3f Thanks @clintcs! - - Button's type attribute is now reflected.

  • Button now supports the full set of native <button> attributes such as formenctype, name, popovertarget, and others.

Patch Changes

• #344 4a23547 Thanks @ynotdraw! - Design Tokens were synced with Figma.

  • --glide-core-surface-base-gray-lighter was added.
  • --glide-core-surface-white-1percent's value was updated for Dark Mode to add an opacity.

• #337 5a13414 Thanks @clintcs! - Form controls except Textarea now submit their form on Enter to match native controls and to improve accessibility.

• #335 18567fb Thanks @dylankcrwd! - - Updates glide-core-tab-group to align with new design changes relating to overflow button behavior and styling.

• #333 1ee4297 Thanks @ynotdraw! - Checkbox's checkmark now animates. The animation is disabled when the relevant reduced motion system preference is enabled.

• #343 ddd3103 Thanks @ynotdraw! - Textarea's resize handle was removed when the component is in the readonly state to align with the latest designs.

• #339 28c0b34 Thanks @clintcs! - - Menu's target now emits a "click" event when clicked.

  • Menu's active option remains active after being clicked and Menu is reopened.
  • Button emits a "click" event on Enter.
  • Buttons with type="button" no longer reset forms.
  • Button's click() method now submits or resets the form when type="submit" or type="reset".

• #319 2f03a51 Thanks @ynotdraw! - Menu and Dropdown now animate when opening. The animations are disabled when the relevant reduced motion system preference is enabled.

• #336 03e795a Thanks @clintcs! - Drawer's "open" and "close" events now bubble.

• #332 d02058e Thanks @danwenzel! - Add newly-translated Japanese and French strings

• #328 784d455 Thanks @danwenzel! - Add intellisense info for Toasts.add() toast.duration param

• #334 8e9c233 Thanks @clintcs! - Clicking a Dropdown option's icon now selects the option.

• #340 0fc9fa5 Thanks @ynotdraw! - The latest Toast message appears at the top of the list rather than the bottom.

• #308 289ba3d Thanks @dylankcrwd! - - Adds an animated active tab indicator to glide-core-tab-group that respects prefers-reduced-motion.

  • Aligns the width of the active tab indicator to the width of the tab's text.
  • Slightly decreases the height of the tab bar.

• #342 d18df39 Thanks @ynotdraw! - Subtle hover transitions were added to Dropdown, Dropdown Option, Menu Button, Menu Link, and Tree components.

• #330 986976d Thanks @clintcs! - - When filterable and an option is selected, Dropdown now sets the underlying <input>'s value instead of placeholder to match the updated interaction specification.

  • Pressing Meta + Backspace when the insertion point is at the beginning of a filterable Dropdown now removes every non-overflowing, selected option.
  • Dropdown now has a click() method.
  • Dropdown no longer shows an empty menu when opened after every option have been filtered out.

• #341 a9ccc70 Thanks @clintcs! - - The height of Dropdown when variant="quiet" has been greatly reduced.

  • Dropdown no longer has a focus outline on focus. Its border color changes instead.

• #331 1db87d8 Thanks @danwenzel! - Border color updates to Input, Textarea, and Dropdown:

  • Default border color updated to a darker gray
  • When hovering, border changes to a more prominent blue color

Patch Changes

• #322 c577f7d Thanks @ynotdraw! - Updated Button Group Button's background color to no longer be transparent so that the background won't bleed through the component.

• #318 b4bedc4 Thanks @danwenzel! - Add click method to Tree Item Menu, allowing programmatic opening of the menu

• #324 83174ce Thanks @clintcs! - Checkbox and Toggle can now be forced checked or unchecked.

  To do this, add a "change" or "input" listener that sets checked to the
  desired state after waiting for the component to update so your checked
  change isn't reverted after the update completes:

  document
    .querySelector('glide-core-toggle')
    .addEventListener('change', async (event) => {
      await event.target.updateComplete;
      event.target.checked = false;
    });

• #318 b4bedc4 Thanks @danwenzel! - Accessibility improvements to Tree:

  • Removes the ability to focus on a Tree Item Menu or Tree Item Icon Button unless the tree item is focused
  • Stops event propagation on click or keyboard events when originating from Tree Item Menu or Tree Item Icon Button
  • Added a label attribute to Tree Item Icon Button and Tree Item Menu for accessibility
  • Prevent keyboard navigation to selected tree item if collapsed

• #320 2d1c7f4 Thanks @clintcs! - - Input's spellcheck property is now reflected.

  • Form Controls Layout no longer overflows slightly when split="middle".
  • Radio's label is now undefined by default instead of an empty string to match other components.

• #321 69723ab Thanks @clintcs! - Menu buttons and links now emit "click" events when selected via Space or Enter.

Minor Changes

• #309 ffc70d1 Thanks @ynotdraw! - - Breaking Change: The clear-icon slot for Input was removed, as consumers should not be adjusting the clear icon themselves.

• #307 bb18490 Thanks @clintcs! - - Tooltip's setContainingBlock method was removed.

  • library/set-containing-block.js was removed.

• #296 b1cb732 Thanks @clintcs! - Menu, Tree, Tree Item, and Tree Item Menu no longer offer a setContainingBlock method.
  Each component's menu now positions itself correctly without setContainingBlock.

• #289 500ae69 Thanks @clintcs! - - Button Group's ButtonGroupVariant and ButtonGroupOrientation types are not exported.

  • Button Group Button has a label attribute instead of a default slot to restrict arbitrary content.
  • Button Group instead of Button Group Button emits "change" and "input" events.
  • Button Group Button's variant attribute was renamed to privateVariant and should not be used.
  • Button Group Button's vertical renamed to privateOrientation and should not be used.
  • Button Group throws if it only contains one Button Group Button.
  • Button Group dispatches an Event instead of a CustomEvent

Patch Changes

• #314 2364551 Thanks @ynotdraw! - Fixed a bug with Input where if it were disabled or readonly and the value exceeded maxlength, it would be invalid. This is a valid state because the user cannot interact with the element.

• #314 2364551 Thanks @ynotdraw! - Multiple adjustments to Textarea were added:

  • Resolved a bug where if a description was not provided, but maxlength was, the character counter would be in the incorrect position.
  • Textarea now properly updates validity when set as required if value is updated programmatically.
  • Textarea now properly updates validity and its visual error state when required is removed programmatically.
  • Fixed a bug where if Textarea was disabled or readonly and the value exceeded maxlength, it would be invalid. This is a valid state because the user cannot interact with the element.

• #303 9f1ad06 Thanks @ynotdraw! - Radio's checked state is now animated and properly respects the user's prefers-reduced-motion browser preference.

• #291 e8e5799 Thanks @ynotdraw! - - Removed the opacity from the Modal background so that content no longer bleeds into it.

  • Modal is now given a maximum width to prevent it from colliding with the horizontal edges of the browser window as the screen width adjusts.

• #294 107cc02 Thanks @ynotdraw! - Decrease the max-width of Modal.

• #307 bb18490 Thanks @clintcs! - - Tooltip reliably breaks out of containers that have overflow: hidden.

  • Tooltip's :host is now display: inline-block by default so the tooltip remains aligned with its target when its target is less than the full width of its container.
  • There's no longer a small gap between Tooltip's arrow and the tooltip itself when the target is near the edge of the viewport.
  • To better match the mockups, Tooltip's arrow is rounded and larger. And the space between the tooltip and its target has increased.

• #302 ec6a1f8 Thanks @clintcs! - - Checkbox Group's focus() method now focuses the first checkbox that isn't disabled.

  • Menu and Tree Item's focus() methods now accept a FocusOptions argument.

• #311 0a1c3ad Thanks @ynotdraw! - CSS variables were updated to align with the latest designs.

  • Updated the color values for --glide-core-icon-primary, --glide-core-surface-base-gray, --glide-core-surface-selected-disabled, and --glide-core-surface-unselected-disabled to be more dark mode friendly.
  • --glide-core-border-radius-lg was added.

• #312 b3605ab Thanks @ynotdraw! - Textarea now has a progressive enhancement where it'll grow in height as needed up to a maximum of 5 lines in browsers that support field-sizing.

• #310 ba94241 Thanks @danwenzel! - Add popover attribute to Toasts

  Ensures that toasts will appear at the top layer,
  avoiding the need to play z-index wars with other elements

  Also, toasts now get picked up by screenreaders properly

• #296 b1cb732 Thanks @clintcs! - - Menu opens when open and its target is enabled programmatically.

  • Menu more reliably breaks out of containers with overflow: hidden.

• #288 5828515 Thanks @ynotdraw! - Many accessibility enhancements to Textarea:

  • The invalid state is now announced to screenreaders.
  • The character count information is now announced to screenreaders in a more accessible format.

• #292 9e3fdff Thanks @clintcs! - - Dropdown no longer dispatches "change" or "input" events when an option is selected or deselected programmatically.

  • Dropdown no longer closes when Select All is clicked after an option is clicked.
  • Dropdown no longer deselects options on Enter or Space when single-select, matching its behavior on click.
  • Dropdown no longer dispatches "change" and "input" events when single-select and an already selected option is clicked.
  • Dropdown no longer immediately closes when initially open with an option selected.
  • Dropdown no longer dispatches "input" events on input when filtering.
  • Dropdown's focus() method accepts an options object.
  • Dropdown Option's selected and value properties are reflected.

• #295 a69b0ed Thanks @dylankcrwd! - - Fixes incorrect values for aria-controls and aria-labelledby for glide-core-tab and glide-core-tab-panel, respectively

  • Tabbing to the tablist now lands only on the active tab.
  • glide-core-tab-panel is tabbable

• #299 bd5c143 Thanks @clintcs! - - Dropdown now breaks out of Modal instead of expanding it.

  • Dropdown now closes when open and disabled and opens when open and enabled.
  • Dropdown now waits to open until its menu has been positioned, preventing a flicker in some cases.

• #288 5828515 Thanks @ynotdraw! - Updated Input to set itself as invalid when the value exceeds maxlength.

  Many accessibility enhancements to Input:

  • The invalid state is now announced to screenreaders.
  • The character count information is now announced to screenreaders in a more accessible format.
  • The cl...

Minor Changes

• #253 51f14b0 Thanks @dylankcrwd! - Adjustments were made to the Tab components to remove all existing variants in favor of a single design. Overflow buttons are added to glide-core-tab-group when the tabs overflow their container.

  See the example below.

  + <glide-core-tab-group>
  - <glide-core-tab-group variant="secondary">

• #290 e2bf2ff Thanks @clintcs! - Dropdown doesn't dispatch events when value is changed programmatically.

Patch Changes

• #282 7441afb Thanks @ynotdraw! - Checkbox's indeterminate state works with both light and dark modes.

• #286 1ace9d0 Thanks @clintcs! - Checkbox no longer throws locally on render.

• #290 e2bf2ff Thanks @clintcs! - Dropdown's readonly attribute is reflected.

Minor Changes

• #232 e7538c0 Thanks @danwenzel! - Change form elements to start validating on blur

Patch Changes

• #250 d76b8d3 Thanks @ynotdraw! - Adjusted the open and closing animations to use a cubic ease out timing function for Drawer to better align with designs.

• #281 b06705c Thanks @clintcs! - Dropdown no longer steals focus when an option is selected.

• #284 fb8ff76 Thanks @danwenzel! - 2 new attributes have been added to Tree Item:

  • Allow tree items without an expand icon to have that indentation removed via the remove-indentation attribute.
  • Added a non-collapsible attribute for tree item. For such tree items:
    • Child tree items remain expanded
    • Expand/collapse caret will not be shown
    • Clicking on the parent will select it

• #283 b41d20d Thanks @clintcs! - Dropdown now emits "change" and "input" events after value is changed programmatically.

Patch Changes

• #277 cc02368 Thanks @ynotdraw! - Updated the Icon Button secondary variant background color to be transparent.

Patch Changes

• #275 0ae63be Thanks @clintcs! - Prevent Form Controls Layout from throwing on rerender.

Patch Changes

• #243 c2ad82b Thanks @clintcs! - Remove the left margin on Button when a prefix icon is present to improve visual balancing.

• #243 c2ad82b Thanks @clintcs! - Form control labels now truncate with an ellipsis when too long, and they show a tooltip when the truncated label is hovered.

• #273 007e4ad Thanks @clintcs! - Menu no longer opens, showing an empty menu, when no options are provided.

• #261 e6f5415 Thanks @clintcs! - Menu no longer opens when its target is disabled programmatically.

• #243 c2ad82b Thanks @clintcs! - Add a Form Controls Layout component.

  Form Controls Layout accepts any number of Glide Core form controls in its default slot.
  It supports a single attribute, split, whose value can be "left" or "middle":

  • "left", the default, puts the controls' labels into a one-third column and the controls themselves into a two-thirds column.
  • "middle" puts the controls' labels and controls into two equal-width columns.

  <glide-core-form-controls-layout split="left">
    <glide-core-input label="Label" placeholder="Placeholder" />
    <glide-core-checkbox label="Label" />
  </glide-core-form-controls-layout>

• #243 c2ad82b Thanks @clintcs! - Add a disabled attribute to Tooltip.

• #243 c2ad82b Thanks @clintcs! - Prevent Checkbox's checkbox from shrinking when its summary wraps.

• #270 16e5625 Thanks @ynotdraw! - Adjusted the padding of Dropdown to match Input and Textarea.

• #269 281628c Thanks @ynotdraw! - Updated the color value of --glide-core-icon-display-light for improved dark mode support. Increased the rounding value of --glide-core-border-radius-round which adjusted the Tag's border radius.

• #272 86a012a Thanks @ynotdraw! - Added position: relative to the Split Container component so that the menu is properly positioned.

• #271 8f1859d Thanks @ynotdraw! - Updated the set-containing-block export so that it can be imported properly by consumers.

  import { setContainingBlock } from '@crowdstrike/glide-core/library/set-containing-block.js';

Patch Changes

• #267 b2c6e25 Thanks @clintcs! - Dropdown no longer dispatches multiple "change" and "input" events when value is changed programmatically.

• #266 a8c7aa7 Thanks @danwenzel! - Allow setting the placement of tree item menu

• #264 e2d5f7c Thanks @clintcs! - Fix Menu options not responding to hover and closing without calling the target's click handler.