Minor Changes

• #632 d31dfdc Thanks @clintcs! - Modal Tertiary Icon has been removed. It was only a thin wrapper around Tooltip. Tooltip can be used directly instead.

Patch Changes

• #628 6ba4587 Thanks @clintcs! - Safari no longer leaves full screen when Popover and Tooltip are closed using Escape.

• #615 ca3dc13 Thanks @clintcs! - Accordion now throws in development when its default slot is empty.

• #624 c6109c3 Thanks @clintcs! - Form Controls Layout now supports Radio Group.

• #627 42ff725 Thanks @clintcs! - Component shadow roots are now automatically opened in test environments.

• #626 abf3456 Thanks @clintcs! - Filterable Dropdown's truncation ellipsis now blends in better with Dropdown's background when in dark mode.

Minor Changes

• #607 798a268 Thanks @clintcs! - Tree Item Menu's placement attribute now only supports two values to better align with design requirements: "bottom-start" and "top-start".

• #608 8a6c19d Thanks @clintcs! - <glide-core-radio> has been renamed to <glide-core-radio-group-radio> to match the naming of other subcomponents like <glide-core-button-group-button>;

• #610 934338a Thanks @clintcs! - Tooltip's default slot has been changed to a label attribute to improve accessibility and increase design consistency by restricting usage.

  As part of this change, make sure you're using an appropriate element as Tooltip's target.
  If using a <span>, add role="button" to it or simply use a <button>.
  Otherwise, if you're using an element without an implicit role, make sure to add the appropriate role to it.

Patch Changes

• #604 f9372f2 Thanks @clintcs! - Added a read-only version attribute to every component to help with debugging.

• #606 8678c71 Thanks @clintcs! - Textarea now submits its form on Command + Enter or Control + Enter.

• #603 1d37881 Thanks @clintcs! - Filterable Dropdown's input field is now cleared when Dropdown is closed.

• #613 5831b8b Thanks @ynotdraw! - Checkbox Group, Checkbox, Dropdown, Input, Radio Group, and Textarea now expose resetValidityFeedback(). This method can be used to remove the error styling and validity message from a component while maintaining the state of its validity property.

• #622 b18550e Thanks @clintcs! - Dropdown no longer adds duplicate values to its value when an option is already selected and Select All is clicked.

• #614 6577381 Thanks @clintcs! - - Filterable Dropdown no longer sets the value of its input field to "Select All" when no options are provided.

  • Dropdown no longer opens when no options are provided.

• #600 05e018c Thanks @clintcs! - Safari no longer logs an error about an invalid attribute on a <rect> in Accordion, Dropdown, Split Button Secondary Button, Tab Group, or Tree Item.

• #623 c3a1eb4 Thanks @clintcs! - Dropdown's input field no longer has a minimum width, allowing it contract when its container is sized-constrained.
  Dropdown as a whole still has a total minimum width of 150 pixels.

• #611 3737e3d Thanks @ynotdraw! - Updated Drawer to ensure that higher contrast content behind it no longer bleeds through.

• #605 32c8aa0 Thanks @clintcs! - - Tree's focusedItem, privateTabIndex, and selectedItem properties are now marked as private.

  • Tab Group's selectedTab, isAfterFirstUpdated, isDisableOverflowStartButton, isDisableOverflowEndButton, and isShowOverflowButtons properties are now marked as private.

• #610 934338a Thanks @clintcs! - - Tooltip's placement attribute is now reflected.

  • Tooltip now has a screenreader-hidden attribute for cases where text is truncated and the full text is shown in a tooltip.
    Screenreaders are able to read the entirety of the truncated text without the help of a tooltip if the text is truncated using CSS.
    Use this attribute to hide the tooltip from screenreaders so its text isn't read in duplicate.

• #617 d98dbd6 Thanks @clintcs! - Modal no longer closes when click() is called on a slotted element.

• #601 15f31c4 Thanks @clintcs! - Internal Dropdown "toggle" events no longer propagate.

Patch Changes

• #598 b248269 Thanks @ynotdraw! - Update internal usages of Glide Core Modal Icon Buttons to pass accessibility checks.

Minor Changes

• #592 1517005 Thanks @clintcs! - "change" events are now composed for every component.
  This is unlikely a breaking change for you but may be if you're using event delegation with a "change" listener.

• #577 c2f8678 Thanks @clintcs! - The values in Checkbox Group's value attribute now appear in the order they were selected.

• #586 b1a5203 Thanks @clintcs! - - Modal's showModal() and close() methods have been replaced by an open attribute to make Modal easier to use and to align with our other components.

  • Modal no longer dispatches a "close" event on close. It instead dispatches a "toggle" event on open and close.

• #587 c0e6911 Thanks @clintcs! - - Drawers's show() and close() methods have been removed.
  Drawer's open attribute can be used instead.
  open has the functionality of both methods and is easier to use in templates.

  • Drawer no longer dispatches a "close" event on close.
    It instead dispatches a "toggle" event on open and close.

• #582 8802391 Thanks @clintcs! - Radio Group no longer has a description property, which was unused internally and undocumented.
  Radio Group still has a "description" slot you can use to add a description.

Patch Changes

• #587 c0e6911 Thanks @clintcs! - Drawer's label and pinned attributes are now reflected.

• #579 dee76c0 Thanks @clintcs! - Arrowing through Tree no longer scrolls the page.

• #582 8802391 Thanks @clintcs! - - Form control tooltip focus outlines now hug their "ⓘ" icons.

  • Tab Group's overflow buttons are now vertically centered.

• #586 b1a5203 Thanks @clintcs! - - Modal now closes on "click" instead of "mousedown" when its backdrop is clicked.

  • Modal's close button is now vertically aligned.
  • Modal now has a focus outline when opened via keyboard.

• #589 0b8a7ae Thanks @clintcs! - - Dropdown, Menu, Popover, Split Button, and Tooltip now dispatch a "toggle" event when opened and closed.

  • Accordion's "toggle" event is now composed.

Minor Changes

• #553 ebd5137 Thanks @clintcs! - - Tab Group's panelElements and tabElements properties have been removed.

  • Tree's slotElements property has been removed.
  • Tree Item's slotElements and suffixSlotAssignedElements properties have been removed.

  These properties were used internally and undocumented.
  So your code should continue to work without any changes.

• #541 4c8ab62 Thanks @ynotdraw! - Radio's import path has been updated to match our subcomponent naming conventions elsewhere.

  - import '@crowdstrike/glide-core/radio.js';
  + import '@crowdstrike/glide-core/radio-group.radio.js';

  Radio Group no longer reflects its value attribute. To determine the current value of Radio Group, use its value property instead.

  - document.querySelector('glide-core-radio-group').getAttribute('value');
  + document.querySelector('glide-core-radio-group').value;

  Radio's required property has been renamed to privateRequired to deter external use. Set required on the Radio Group directly and it'll apply to all child Radios.

  Radio's invalid property has been renamed to privateInvalid to deter external use. The Radio Group must be marked as invalid using required, setValidity(), or setCustomValidity().

  Additional updates have been made to match existing patterns in our other form elements:

  • Radio Group now respects programmatic changes to value.
  • Radio Group now updates its value property when the checked attribute of a child Radio changes.
  • Radio Group now updates its validity state when required is changed programmatically.
  • When a Radio's value updates, Radio Group's value also updates to reflect the newly provided Radio value.

• #543 4ace46d Thanks @clintcs! - - Button Group Button, to match Tab Group and Tree, now emits a "selected" event instead of "change" and "input" events.

  • Button Group Button, to match native, no longer emits a "selected" event when selected programmatically.
  • Button Group Button no longer emits an event when already selected and space is pressed.

• #544 376e6c3 Thanks @clintcs! - Button no longer supports aria-controls, aria-expanded, aria-haspopup, formaction, formenctype, formmethod, formnovalidate, formtarget, popovertarget, and popovertargetaction.
  We added these attributes to match native.
  But we suspect they won't be used.
  And they visually complicate Storybook's controls table.

  Let us know if you have a use case for one.
  We're happy to add them back as needed.

Patch Changes

• #546 ca1412f Thanks @ynotdraw! - Toggle no longer appears unchecked when both checked and disabled.

• #550 55915f7 Thanks @clintcs! - Filterable Dropdown's input field's bottom padding has been removed to match non-filterable Dropdown.

• #542 48bda6c Thanks @ynotdraw! - - Drawer, Inline Alert, Tag, Toast, and Tree Item now respect reduced motion preferences.

  • Drawer now respects the open attribute on initial render.

• #537 5d03c7d Thanks @clintcs! - Added a Popover component.

  Popover, unlike an upcoming version of Tooltip, allows for arbitrary content.
  It also has a distinct visual design, opens on click instead of hover, and doesn't support a shortcut attribute.
  Check with Design if you're unsure which component to use.

Patch Changes

• #539 c426ff3 Thanks @danwenzel! - The background color for a pinned Drawer now has a slightly less transparent background.

• #538 bc6ed78 Thanks @danwenzel! - 2 new shadows have been added to @crowdstrike/glide-core/styles/variables.css, shadow-footer and shadow-nav:

  Light

  + --glide-core-effects-shadow-footer-blur: 0.5rem;
  + --glide-core-effects-shadow-footer-fill: #b5b5b540;
  + --glide-core-effects-shadow-footer-spread: -0.5rem;
  + --glide-core-effects-shadow-footer-x: 0rem;
  + --glide-core-effects-shadow-footer-y: -0.5rem;
  
  + --glide-core-effects-shadow-nav-background-blur: 6.25rem;
  + --glide-core-effects-shadow-nav-blur: 0.25rem;
  + --glide-core-effects-shadow-nav-fill: #00000040;
  + --glide-core-effects-shadow-nav-spread: 0rem;
  + --glide-core-effects-shadow-nav-x: 0rem;
  + --glide-core-effects-shadow-nav-y: 0.25rem;

  Dark

  + --glide-core-effects-shadow-footer-background-blur: 1rem;
  + --glide-core-effects-shadow-footer-blur: 0.5rem;
  + --glide-core-effects-shadow-footer-fill: #b5b5b540;
  + --glide-core-effects-shadow-footer-spread: -0.5rem;
  + --glide-core-effects-shadow-footer-x: 0rem;
  + --glide-core-effects-shadow-footer-y: -0.5rem;
  
  + --glide-core-effects-shadow-nav-background-blur: 6.25rem;
  + --glide-core-effects-shadow-nav-blur: 0.25rem;
  + --glide-core-effects-shadow-nav-fill: #00000040;
  + --glide-core-effects-shadow-nav-spread: 0rem;
  + --glide-core-effects-shadow-nav-x: 0rem;
  + --glide-core-effects-shadow-nav-y: 0.25rem;

• #532 f5ee762 Thanks @clintcs! - - Multiselect Dropdown no longer adds duplicate values to value when value is set programmatically and the options corresponding to those values are already selected.

  • Filterable single-select Dropdown now sets the value of its input field to the label of the selected option on first render.
  • Filterable Dropdown now clears its input field when multiple is set programmatically and an option is selected.

Minor Changes

• #506 e16d257 Thanks @clintcs! - Checkbox's isReportValidityOrSubmit property has been renamed to privateIsReportValidityOrSubmit to deter external use.

• #515 f330380 Thanks @ynotdraw! - Tab Group and Tab Panel are now set to 100% height. There aren't any use cases at the moment where this doesn't make sense, so if you find one, let us know!

• #517 8b5ab64 Thanks @ynotdraw! - Tab Panel's isSelected property has been renamed to privateIsSelected to deter external use.

• #483 9fd8263 Thanks @clintcs! - - Tab's active attribute has been renamed to selected to align with Tree Item.

  • Tab Group no longer dispatches a "tab-show" event.
    It instead dispatches a bubbling "selected" event from the activated Tab.
    The event's target property is set to that Tab.

    - tabGroup.addEventListener('tab-show', (event) => {
    -   console.log(event.detail.panel)
    - })
    
    + tabGroup.addEventListener('selected', (event) => {
    +   console.log(event.target)
    + })

  • Tree no longer dispatches an "item-selected" event.
    It instead dispatches a bubbling "selected" event from the selected Tree Item.
    The event's target property is set to that Tree Item.

    - tree.addEventListener('item-selected', (event) => {
    -   console.log(event.detail.item)
    - })
    
    + tree.addEventListener('selected', (event) => {
    +   console.log(event.target)
    + })

• #500 b2e1619 Thanks @clintcs! - - Input no longer dispatches a "clear" event when cleared. It now dispatches an ordinary "input" event instead.

  • Input's hasClearButton and isClearButtonVisible fields are now private.

Patch Changes

• #518 e9b489f Thanks @clintcs! - - Filterable Dropdown no longer closes when its input field is clicked.
  This prevents Dropdown from closing when the user is selecting text in the field.

  • Filterable Dropdown's insertion point no longer jumps around in certain cases when the user is editing the input field.

• #512 8417f84 Thanks @clintcs! - - Filterable single-select Dropdown now shows a tooltip when its input field is hovered and the selected option's label is overflowing.

  • Filterable Dropdown's magnifying glass icon is now vertically centered.
  • Tag's label no longer wraps.

• #483 9fd8263 Thanks @clintcs! - Most component events are now composed.
  "change", "close", and "toggle" events are still not composed to match native.
  We're happy to deviate from native and make them composed.
  Let us know if you have a use case.

• #522 58507c4 Thanks @ynotdraw! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

  Light

  Changed

  - --glide-core-status-warning-low: #607d8b;
  + --glide-core-status-warning-low: #6d6d6d;

  Dark

  Changed

  - --glide-core-icon-tertiary-disabled: #ffffff8c;
  + --glide-core-icon-tertiary-disabled: #ffffff33;
  
  - --glide-core-status-unknown: #686868;
  + --glide-core-status-unknown: #6d6d6d;
  
  - --glide-core-status-warning-low: #607c89;
  + --glide-core-status-warning-low: #6d6d6d;

• #505 f735a31 Thanks @clintcs! - - Dropdown Options now support a disabled attribute.

  • Dropdown now dispatches "input" events before "change" to match native.

• #496 c7af097 Thanks @mayuri-todkar! - Added the Inline Alert component.

• #514 115dafb Thanks @clintcs! - - Menu Button and Menu Link now support a disabled attribute.

  • Menu no longer closes when the border or padding around its menu is clicked.

Patch Changes

• #507 26f48e0 Thanks @dylankcrwd! - Addresses an issue where Drawer could have an incorrect open or closed state.

Minor Changes

• #493 5b81698 Thanks @ynotdraw! - The following CSS variables were renamed:

  - --glide-core-background-fill
  + --glide-core-surface-background-image
  
  - --glide-core-border-radius-none
  + --glide-core-border-radius-zero
  
  - --glide-core-border-width-none
  + --glide-core-border-width-zero

• #493 5b81698 Thanks @ynotdraw! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

  Light

  Added

  + --glide-core-border-attention: #f8f0d1;
  + --glide-core-border-error: #ffdcda;
  + --glide-core-border-informational: #d7e7ff;
  + --glide-core-border-warning: #ffebce;
  
  + --glide-core-effects-shadow-small-blur: 0.5rem;
  + --glide-core-effects-shadow-small-fill: #b5b5b540;
  + --glide-core-effects-shadow-small-spread: 0rem;
  + --glide-core-effects-shadow-small-x: 0rem;
  + --glide-core-effects-shadow-small-y: 0.125rem;
  
  + --glide-core-effects-shadow-switcher-blur: 0.125rem;
  + --glide-core-effects-shadow-switcher-fill: #ffffff59;
  + --glide-core-effects-shadow-switcher-spread: 0rem;
  + --glide-core-effects-shadow-switcher-x: 0.0625rem;
  + --glide-core-effects-shadow-switcher-y: 0.0625rem;
  
  +  --glide-core-surface-background-image: #00000000;

  Removed

  - --glide-core-background-fill: #15141400;
  - --glide-core-generic-border-active: #6d6d6d;

  Dark

  Added

  + --glide-core-border-attention: #f8f0d1;
  + --glide-core-border-error: #ffdcda;
  + --glide-core-border-informational: #d7e7ff;
  + --glide-core-border-warning: #ffebce;
  
  + --glide-core-effects-shadow-small-blur: 0.5rem;
  + --glide-core-effects-shadow-small-fill: #00000040;
  + --glide-core-effects-shadow-small-spread: 0rem;
  + --glide-core-effects-shadow-small-x: 0rem;
  + --glide-core-effects-shadow-small-y: 0.125rem;
  
  + --glide-core-effects-shadow-switcher-blur: 0.125rem;
  + --glide-core-effects-shadow-switcher-fill: #0000000d;
  + --glide-core-effects-shadow-switcher-spread: 0rem;
  + --glide-core-effects-shadow-switcher-x: 0.0625rem;
  + --glide-core-effects-shadow-switcher-y: 0.0625rem;
  
  + --glide-core-surface-background-image: #151414f7;

  Removed

  - --glide-core-background-fill: #151414f7;
  - --glide-core-generic-border-active: #6d6d6d;

  Changed

  - --glide-core-effects-shadow-large-blur: 3.125rem;
  + --glide-core-effects-shadow-large-blur: 0.75rem;
  
  - --glide-core-effects-shadow-large-y: 0.625rem;
  + --glide-core-effects-shadow-large-y: 0.125rem;

  System

  Added

  + --glide-core-border-radius-zero: 0rem;
  + --glide-core-border-width-zero: 0rem;

  Removed

  - --glide-core-border-radius-none: 0rem;
  - --glide-core-border-width-none: 0rem;
  - --glide-core-number-14: 0.875rem;
  - --glide-core-page-size-details-panel: 27.375rem;

  Miscellaneous

  Changed

  - --glide-core-shadow-sm: 0px 2.275px 8.342px 0px rgba(181, 181, 181, 0.25);
  + --glide-core-shadow-sm: var(--glide-core-effects-shadow-small-x) var(--glide-core-effects-shadow-small-y) var(--glide-core-effects-shadow-small-blur) var(--glide-core-effects-shadow-small-spread) var(--glide-core-effects-shadow-small-fill);

Patch Changes

• #493 5b81698 Thanks @ynotdraw! - @crowdstrike/glide-core/styles/variables.css has been updated with the data-viz colors from Figma:

  Light

  Added

  + --glide-core-data-viz-cobalt-cobalt: #5183df;
  + --glide-core-data-viz-cyan-cyan: #299ed1;
  + --glide-core-data-viz-gold-gold: #cc8519;
  + --glide-core-data-viz-gray-dark: #424242;
  + --glide-core-data-viz-gray-darker: #212121;
  + --glide-core-data-viz-gray-default: #6d6d6d;
  + --glide-core-data-viz-gray-light: #8a8a8a;
  + --glide-core-data-viz-gray-lighter: #c9c9c9;
  + --glide-core-data-viz-gray-lightest: #f0f0f0;
  + --glide-core-data-viz-gray-x-lighter: #e3e3e3;
  + --glide-core-data-viz-indigo-indigo: #6563d9;
  + --glide-core-data-viz-lilac-lilac: #ce66e5;
  + --glide-core-data-viz-magenta-magenta: #f9338b;
  + --glide-core-data-viz-moss-moss: #959328;
  + --glide-core-data-viz-olive-olive: #7f994d;
  + --glide-core-data-viz-red-red: #db2d24;
  + --glide-core-data-viz-rose-rose: #ea5da3;
  + --glide-core-data-viz-teal-teal: #39a288;
  + --glide-core-data-viz-turquoise-turqoise: #339da3;
  + --glide-core-data-viz-violet-violet: #af52de;

  Dark

  Added

  + --glide-core-data-viz-cobalt-cobalt: #6e8ec4;
  + --glide-core-data-viz-cyan-cyan: #4b98b9;
  + --glide-core-data-viz-gold-gold: #b98d4b;
  + --glide-core-data-viz-gray-dark: #424242;
  + --glide-core-data-viz-gray-darker: #212121;
  + --glide-core-data-viz-gray-default: #6d6d6d;
  + --glide-core-data-viz-gray-light: #8a8a8a;
  + --glide-core-data-viz-gray-lighter: #c9c9c9;
  + --glide-core-data-viz-gray-lightest: #000000e5;
  + --glide-core-data-viz-gray-x-lighter: #e3e3e3;
  + --glide-core-data-viz-indigo-indigo: #7574e5;
  + --glide-core-data-viz-lilac-lilac: #b37cc5;
  + --glide-core-data-viz-magenta-magenta: #c2678f;
  + --glide-core-data-viz-moss-moss: #949151;
  + --glide-core-data-viz-olive-olive: #7a845c;
  + --glide-core-data-viz-red-red: #db4743;
  + --glide-core-data-viz-rose-rose: #be7e9f;
  + --glide-core-data-viz-teal-teal: #5c9d8c;
  + --glide-core-data-viz-turquoise-turqoise: #639d9f;
  + --glide-core-data-viz-violet-violet: #a66dc3;

• #487 208f8fb Thanks @ynotdraw! - Dropdown, Input, and Textarea now follow the same design patterns when in the readonly state by removing inline-start padding, removing the border, and having a transparent background.

• #497 37df083 Thanks @dylankcrwd! - Drawer now supports an open attribute.

• #498 39af7af Thanks @ynotdraw! - Toast now supports an error variant.

• #493 5b81698 Thanks @ynotdraw! - Tree Item's selected hover background color was updated for more contrast.

• #504 a2d8bc8 Thanks @danwenzel! - Minor visual updates to Drawer:

  • Background color's opacity slightly increased
  • backdrop-filter blur reduced by 50%

• #493 5b81698 Thanks @ynotdraw! - Dropdown's visual design for "select all" and "add" were reverted back to the previous state after additional design review.

Patch Changes

• #485 8791ada Thanks @ynotdraw! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

  Dark

  Changed

  - --glide-core-surface-primary-disabled: #3989da99
  + --glide-core-surface-primary-disabled: #3888d999;
  
  - --glide-core-text-link-table: #73b2f3;
  + --glide-core-text-link-table: #93c4f6;
  
  - --glide-core-text-placeholder: #c9c9c9;
  + --glide-core-text-placeholder: #9e9e9e;

• #485 8791ada Thanks @ynotdraw! - Dropdown, Input, and Textarea placeholder states were updated to use a new placeholder variable.