CHANGELOG.md

@crowdstrike/glide-core

0.20.4

Patch Changes

• #756 7defd95 Thanks @clintcs! - - Dropdown now selects options when value is set initially.

  • Radio Group now checks radios when value is set initially.

• #751 507a9f4 Thanks @clintcs! - - Dropdown no longer presents as expanded to screenreaders when open but disabled.

  • Single-select Dropdown now presents to screenreaders as disabled when disabled.
  • Form controls' tooltip icon is no longer presented to screenreaders.
  • Checkbox's indeterminate icon is no longer presented to screenreaders.

0.20.3

Patch Changes

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

  Dark

  Changed

  - --glide-core-surface-empty-state: #ff3b3014;
  + --glide-core-surface-empty-state: #ff3b3026;

0.20.2

Patch Changes

• #725 1e2c38f Thanks @ynotdraw! - Most text is provided by consumers via attributes. But many components have built-in text to help screenreaders. That text has been fully localized for French and Japanese.

• #724 94a66f0 Thanks @ynotdraw! - System CSS variables are no longer overridden by light or dark mode variables.

0.20.1

Patch Changes

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

  Dark

  Added

  + --glide-core-icon-empty-state: #db4743;
  + --glide-core-surface-empty-state: #ff3b3014;
  + --glide-core-text-syntax-aliases: #095341;
  + --glide-core-text-syntax-fields: #7c1faa;
  + --glide-core-text-syntax-formatting: #212121;
  + --glide-core-text-syntax-function: #ff2893;
  + --glide-core-text-syntax-literals: #794d0c;
  + --glide-core-text-syntax-object: #c8095e;
  + --glide-core-text-syntax-operator: #1b51b5;

  Light

  Added

  + --glide-core-icon-empty-state: #db2d24;
  + --glide-core-surface-empty-state: #ff3b3014;
  + --glide-core-text-syntax-aliases: #095341;
  + --glide-core-text-syntax-fields: #7c1faa;
  + --glide-core-text-syntax-formatting: #212121;
  + --glide-core-text-syntax-function: #ff2893;
  + --glide-core-text-syntax-literals: #794d0c;
  + --glide-core-text-syntax-object: #c8095e;
  + --glide-core-text-syntax-operator: #1b51b5;

• #721 434fcc3 Thanks @clintcs! - Tab Groups can now be nested.

• #718 4ed59e1 Thanks @ynotdraw! - Components are no longer stuck in light mode.

0.20.0

Minor Changes

• a06768e Thanks @clintcs! - Components now throw when subclassed. Let's have a conversation if one of our components doesn't meet your needs.

• a06768e Thanks @clintcs! - Required attributes now throw during development when missing. The following are now required:

  • label
    • Accordion
    • Button Group Button
    • Button Group
    • Button
    • Checkbox Group
    • Checkbox
    • Drawer
    • Dropdown Option
    • Dropdown
    • Icon Button
    • Input
    • Menu Button
    • Menu Link
    • Modal Icon Button
    • Modal
    • Radio Group Radio
    • Radio Group
    • Split Button Primary Button
    • Split Button Primary Link
    • Split Button Secondary Button
    • Tag
    • Textarea
    • Toggle
    • Tooltip
    • Tree Item Icon Button
    • Tree Item Menu
    • Tree Item
  • name
    • Tab Panel
  • panel
    • Tab
  • url
    • Split Button Primary Link

• a06768e Thanks @clintcs! - Form controls no longer have a willValidate property. We think it will remain unused.

• a06768e Thanks @clintcs! - Drawer no longer closes when Escape is pressed.

• a06768e Thanks @clintcs! - - Tab Panel no longer has an unused static instanceCount property.

  • Toggle no longer has a name property. name only applies to form controls and was unused.
  • Tree Item's hasChildTreeItems and hasExpandIcon properties and its toggleExpand() method have been marked private.

  Additionally, some internal changes were made to facillitate generating documentation programmatically forced us remove a few exported types and rename some custom properties:

  • Input no longer exports a SUPPORTED_TYPES interface.

  • Toasts no longer exports a Toast interface.

  • Tab Panel's custom properties have been renamed:

    - --panel-padding-inline-end
    + --padding-inline-end
    
    - --panel-padding-inline-start
    + --padding-inline-start

Patch Changes

• a06768e Thanks @clintcs! - Form controls with long labels no longer overflow their containers.

• a06768e Thanks @clintcs! - - A Checkbox or Toggle without a summary no longer has extra space to the right.

• a06768e Thanks @clintcs! - Filterable Dropdown's input field now has a minimum width of 60 pixels.

• a06768e Thanks @clintcs! - SVGs placed in the prefix slot of a Tree Item will no longer shrink at narrow widths.

• a06768e Thanks @clintcs! - The label of a Dropdown Option with a checkbox is now displayed in a tooltip when the label is truncated.

• a06768e Thanks @clintcs! - Single-select Dropdown's input field is now cleared when Dropdown's value is emptied programmatically.

• a06768e Thanks @clintcs! - Modal now allows for an optional severity attribute to render a severity icon in the header. When both severity and back-button are provided, only the severity icon is displayed.

• a06768e Thanks @clintcs! - Added JSDoc @attribute information so that tools like lit-analyzer will properly parse multi-word property names.

• a06768e Thanks @clintcs! - Dropdown's placeholder attribute is now optional.

• a06768e Thanks @clintcs! - - Radio Group no longer immediately deselects a selected Radio Group Radio that does not have a value.

  • Programmatically disabled Radio Groups and Radio Group Radios are no longer tabbable.

• a06768e Thanks @clintcs! - Each component now includes a JSDoc comment at the top with its attributes, slots, custom properties, events, properties, and methods.

• a06768e Thanks @clintcs! - Form control label overflow tooltips now flip to the opposite side in a rare case when they would otherwise overflow the viewport.

• a06768e Thanks @clintcs! - Popover no longer closes when a slotted <label> is clicked.

• a06768e Thanks @clintcs! - Input now supports type="time".

• a06768e Thanks @clintcs! - Input's type attribute is now reflected.

• a06768e Thanks @clintcs! - Form control labels truncate with a tooltip when they overflow. The contents of that tooltip previously didn't reflect changes to form controls' label attribute. Now if you change a form control's label after initial render you'll see the new label in the truncation tooltip.

• 39db6a4 Thanks @clintcs! - @crowdstrike/glide-core now has an NPM provenance statement.

• a06768e Thanks @clintcs! - Input now has a minimum width of 60 pixels.

0.19.5

Patch Changes

• #681 2cf85b2 Thanks @clintcs! - - Filterable Dropdown with a custom filter() method now calls that method when its input field is empty.

0.19.4

Patch Changes

• #678 d62c01e Thanks @clintcs! - - Single-select Dropdown now clears its input field when its selected option is removed.
  • Single-select Dropdown now sets the value of its input field to the label of the selected option on first render.

0.19.3

Patch Changes

• #674 8db5921 Thanks @ynotdraw! - Radio Group Radio labels no longer restrict their width.

0.19.2

Patch Changes

• #658 ca7182b Thanks @clintcs! - Modal no longer closes when a slotted <label> is clicked.

0.19.1

Patch Changes

• #635 c46eda4 Thanks @clintcs! - Form control label tooltips, shown when labels are truncated, are no longer empty.

0.19.0

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.

0.18.0

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.

0.17.1

Patch Changes

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

0.17.0

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.

0.16.0

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.

0.15.1

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.

0.15.0

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.

0.14.1

Patch Changes

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

0.14.0

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.

0.13.1

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.

0.13.0

Minor Changes

• #461 52a9255 Thanks @ynotdraw! - We've adopted the latest iteration of Dark Mode in all of our components and styles including:

  • Accordion received border and box-shadow visual adjustments.
  • Checkbox received a border when hovering and a box-shadow visual adjustment.
  • Dropdown's "select all" and "add" functionality has been updated to use a border rather than background-color.
  • Menu now has a lighter border around the popover to match Dropdown.
  • Consumers previously using --glide-core-surface-base-lightest for app backgrounds should switch to --glide-core-background-fill instead.

• #463 7017a73 Thanks @clintcs! - Dropdown no longer dispatches a "filter" event when filtering.

  The "filter" event wasn't fully thought through and had a few shortcomings:

  • There was no way for consumers to override Dropdown's default and synchronous filtering predicate.
  • It required consumers to add and remove options from the DOM on "filter". And the removal of a selected option when filtering a multiselect Dropdown meant the option's corresponding tag was also removed.

  Replacing the event is filter() and its default implementation:

  async filter(query: string): Promise<GlideCoreDropdownOption[]> {
    const options = [...this.querySelectorAll('glide-core-dropdown-option')];
  
    return options.filter(({ label }) => {
      return label.toLowerCase().includes(query.toLowerCase().trim()),
    });
  }

  • You can override filter() with whatever filtering logic you need.
  • The options you return in filter() will be shown. All others will be hidden.
  • filter() must return a promise. Dropdown will wait for it to resolve before showing and hiding options in case you're fetching them or your filtering logic lives on the server.

• #476 16db0bd Thanks @danwenzel! - CSS flex attributes for Tab Group have been moved to the host element.

  Having a separate, intermediate flex container inside the closed shadow root made it difficult to impossible for consumers to control their flex layout.

• #468 97d8c20 Thanks @clintcs! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

  Light

  Removed

  -  --glide-core-surface-tag-default: #00000012;

  Added

  +  --glide-core-surface-base-gray-lightest: #00000008;

  Changed

  - --glide-core-surface-base-gray-lighter: #00000008;
  + --glide-core-surface-base-gray-lighter: #0000000d;

  Dark

  Removed

  -  --glide-core-surface-tag-default: #ffffff1a;

  Changed

  -  --glide-core-surface-white-1percent: #000000e5;
  +  --glide-core-surface-white-1percent: #ffffff03;

  System

  Removed

  -  --glide-core-page-size-height: 46.875rem;

• #475 7ccebe3 Thanks @clintcs! - Button Group's "change" event's target property is now set to the selected button.

• #464 fd6c79d Thanks @ynotdraw! - The sticky attribute for Tab Group wasn't fully thought through. It was decided it is safe to remove it in favor of making the Tab Panel scroll when needed instead.

  - <glide-core-tab-group sticky>
  + <glide-core-tab-group>

  <glide-core-tab-panel style="overflow-y: auto"></glide-core-tab-panel>

Patch Changes

• #477 054ae33 Thanks @clintcs! - Safari no longer leaves full screen on Escape in Menu, Modal, and Split Button.

• #469 634ce71 Thanks @clintcs! - The duration of Tag's animation when it is added or removed has been reduced from 200 to 100 milliseconds.

• #466 603fc71 Thanks @clintcs! - Filterable Dropdown now relays to screenreaders the number of results upon filtering.

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

  Light

  Added

  + --glide-core-background-fill: #15141400;
  + --glide-core-effects-shadow-large-background-blur: 12.5rem;
  + --glide-core-effects-shadow-large-blur: 0.875rem;
  + --glide-core-effects-shadow-large-fill: #00000040;
  + --glide-core-effects-shadow-large-spread: 0rem;
  + --glide-core-effects-shadow-large-x: 0rem;
  + --glide-core-effects-shadow-large-y: 0.25rem;
  + --glide-core-effects-shadow-xlarge-background-blur: 6.25rem;
  + --glide-core-effects-shadow-xlarge-blur: 3.75rem;
  + --glide-core-effects-shadow-xlarge-fill: #adadad;
  + --glide-core-effects-shadow-xlarge-spread: 0rem;
  + --glide-core-effects-shadow-xlarge-x: 0rem;
  + --glide-core-effects-shadow-xlarge-y: 0.25rem;

  Dark

  Added

  + --glide-core-background-fill: #151414f7;
  + --glide-core-effects-shadow-large-background-blur: 12.5rem;
  + --glide-core-effects-shadow-large-blur: 3.125rem;
  + --glide-core-effects-shadow-large-fill: #00000080;
  + --glide-core-effects-shadow-large-spread: 0rem;
  + --glide-core-effects-shadow-large-x: 0rem;
  + --glide-core-effects-shadow-large-y: 0.625rem;
  + --glide-core-effects-shadow-xlarge-background-blur: 0rem;
  + --glide-core-effects-shadow-xlarge-blur: 4rem;
  + --glide-core-effects-shadow-xlarge-fill: #000000f7;
  + --glide-core-effects-shadow-xlarge-spread: 0rem;
  + --glide-core-effects-shadow-xlarge-x: 0rem;
  + --glide-core-effects-shadow-xlarge-y: 0.25rem;
  + --glide-core-surface-base-gray-lightest: #ffffff0d;

  Changed

  - --glide-core-border-action: #0073e6;
  + --glide-core-border-action: #3989da;
  
  - --glide-core-border-base: #6d6d6d;
  + --glide-core-border-base: #585858;
  
  - --glide-core-border-base-dark: #c9c9c9;
  + --glide-core-border-base-dark: #8a8a8a;
  
  - --glide-core-border-base-darker: #e3e3e3;
  + --glide-core-border-base-darker: #424242;
  
  - --glide-core-border-base-light: #212121;
  + --glide-core-border-base-light: #424242;
  
  - --glide-core-border-base-lighter: #212121;
  + --glide-core-border-base-lighter: #424242;
  
  - --glide-core-border-base-lightest: #424242;
  + --glide-core-border-base-lightest: #c9c9c9;
  
  - --glide-core-border-base-transparent: #0000001a;
  + --glide-core-border-base-transparent: #ffffff1a;
  
  - --glide-core-border-focus: #0073e6;
  + --glide-core-border-focus: #3989da;
  
  - --glide-core-border-primary: #ffffff;
  + --glide-core-border-primary: #424242;
  
  - --glide-core-border-primary-hover: #0461cf;
  + --glide-core-border-primary-hover: #3989da;
  
  - --glide-core-icon-active: #0073e6;
  + --glide-core-icon-active: #3989da;
  
  - --glide-core-icon-default: #ffffff;
  + --glide-core-icon-default: #f0f0f0;
  
  - --glide-core-icon-default2: #212121;
  + --glide-core-icon-default2: #8a8a8a;
  
  - --glide-core-icon-display: #ffffff;
  + --glide-core-icon-display: #f0f0f0;
  
  - --glide-core-icon-display-light: #d7e7ff;
  + --glide-core-icon-display-light: #8a8a8a;
  
  - --glide-core-icon-primary: #ffffff;
  + --glide-core-icon-primary: #73b2f3;
  
  - --glide-core-icon-primary-hover: #d7e7ff;
  + --glide-core-icon-primary-hover: #4d99e7;
  
  - --glide-core-icon-secondary-disabled: #d7e7ff;
  + --glide-core-icon-secondary-disabled: #c9c9c9;
  
  - --glide-core-icon-selected: #ffffff;
  + --glide-core-icon-selected: #f0f0f0;
  
  - --glide-core-icon-selected-disabled: #eef5ff;
  + --glide-core-icon-selected-disabled: #c9c9c9;
  
  - --glide-core-icon-selected2: #424242;
  + --glide-core-icon-selected2: #f0f0f0;
  
  - --glide-core-icon-tertiary-disabled: #6d6d6d;
  + --glide-core-icon-tertiary-disabled: #ffffff8c;
  
  - --glide-core-status-error: #ff3b30;
  + --glide-core-status-error: #db4743;
  
  - --glide-core-status-expired: #ff3b30;
  + --glide-core-status-expired: #db4743;
  
  - --glide-core-status-failed: #ff3b30;
  + --glide-core-status-failed: #db4743;
  
  - --glide-core-status-in-progress: #ffcc00;
  + --glide-core-status-in-progress: #fad232;
  
  - --glide-core-status-queued: #5ac8fa;
  + --glide-core-status-queued: #63a8c7;
  
  - --glide-core-status-scheduled: #af52de;
  + --glide-core-status-scheduled: #ae73cd;
  
  - --glide-core-status-success: #34c759;
  + --glide-core-status-success: #51bc6f;
  
  - --glide-core-status-unknown: #6d6d6d;
  + --glide-core-status-unknown: #686868;
  
  - --glide-core-status-warning-critical: #ff3b30;
  + --glide-core-status-warning-critical: #db4743;
  
  - --glide-core-status-warning-high: #ff9500;
  + --glide-core-status-warning-high: #e3901d;
  
  - --glide-core-status-warning-informational: #0073e6;
  + --glide-core-status-warning-informational: #3989da;
  
  - --glide-core-status-warning-low: #607d8b;
  + --glide-core-status-warning-low: #607c89;
  
  - --glide-core-status-warning-medium: #ffcc00;
  + --glide-core-status-warning-medium: #fad232;
  
  - --glide-core-surface-active: #ffffff;
  + --glide-core-surface-active: #ffffffe5;
  
  - --glide-core-surface-base: #424242;
  + --glide-core-surface-base: #ffffff26;
  
  - --glide-core-surface-base-dark: #f0f0f0;
  + --glide-core-surface-base-dark: #625c5c;
  
  - --glide-core-surface-base-gray: #00000066;
  + --glide-core-surface-base-gray: #ffffff1a;
  
  - --glide-core-surface-base-gray-dark: #ffffff8c;
  + --glide-core-surface-base-gray-dark: #ffffff1a;
  
  - --glide-core-surface-base-gray-light: #00000066;
  + --glide-core-surface-base-gray-light: #ffffff12;
  
  - --glide-core-surface-base-gray-lighter: #ffffff1a;
  + --glide-core-surface-base-gray-lighter: #ffffff0d;
  
  - --glide-core-surface-base-light: #0000008c;
  + --glide-core-surface-base-light: #ffffff08;
  
  - --glide-core-surface-base-lighter: #000000bf;
  + --glide-core-surface-base-lighter: #ffffff12;
  
  - --glide-core-surface-base-lightest: #000000cc;
  + --glide-core-surface-base-lightest: #ffffff0d;
  
  - --glide-core-surface-base-xlightest: #000000e5;
  + --glide-core-surface-base-xlightest: #333030;
  
  - --glide-core-surface-disabled: #424242;
  + --glide-core-surface-disabled: #6d6d6d;
  
  - --glide-core-surface-focus: #0073e6;
  + --glide-core-surface-focus: #3989da;
  
  - --glide-core-surface-hover: #0461cf;
  + --glide-core-surface-hover: #567a9e75;
  
  - --glide-core-surface-modal: #151515;
  + --glide-core-surface-modal: #464242;
  
  - --glide-core-surface-primary: #0073e6;
  + --glide-core-surface-primary: #3989da;
  
  - --glide-core-surface-primary-disabled: #6d6d6d;
  + --glide-core-surface-primary-disabled: #3989da99;
  
  - --glide-core-surface-selected: #0073e6;
  + --glide-core-surface-selected: #3989da;
  
  - --glide-core-surface-selected-disabled: #8a8a8a;
  + --glide-core-surface-selected-disabled: #c9c9c9;
  
  - --glide-core-surface-selected-hover: #054fb9;
  + --glide-core-surface-selected-hover: #256db7;
  
  - --glide-core-surface-unselected-disabled: #e3e3e3;
  + --glide-core-surface-unselected-disabled: #6d6d6d;
  
  - --glide-core-text-body-1: #ffffff;
  + --glide-core-text-body-1: #f0f0f0;
  
  - --glide-core-text-body-light: #ffffff;
  + --glide-core-text-body-light: #f0f0f0;
  
  - --glide-core-text-body-lighter: #8a8a8a;
  + --glide-core-text-body-lighter: #f0f0f0;
  
  - --glide-core-text-disabled: #f0f0f0;
  + --glide-core-text-disabled: #c9c9c9;
  
  - --glide-core-text-header-1: #ffffff;
  + --glide-core-text-header-1: #f0f0f0;
  
  - --glide-core-text-header-2: #d7e7ff;
  + --glide-core-text-header-2: #f0f0f0;
  
  - --glide-core-text-link: #8babf1;
  + --glide-core-text-link: #73b2f3;
  
  - --glide-core-text-link-dark-surface: #8babf1;
  + --glide-core-text-link-dark-surface: #73b2f3;
  
  - --glide-core-text-link-table: #d0e8f2;
  + --glide-core-text-link-table: #73b2f3;
  
  - --glide-core-text-primary: #ffffff;
  + --glide-core-text-primary: #73b2f3;
  
  - --glide-core-text-primary-hover: #d7e7ff;
  + --glide-core-text-primary-hover: #4d99e7;
  
  - --glide-core-text-secondary: #8babf1;
  + --glide-core-text-secondary: #3989da;
  
  - --glide-core-text-selected: #ffffff;
  + --glide-core-text-selected: #f0f0f0;
  
  - --glide-core-text-selected-2: #424242;
  + --glide-core-text-selected-2: #f0f0f0;
  
  - --glide-core-text-tertiary: #ffffff;
  + --glide-core-text-tertiary: #f0f0f0;
  
  - --glide-core-text-tertiary-disabled: #6d6d6d;
  + --glide-core-text-tertiary-disabled: #ffffff8c;

  Miscellaneous

  Added

  + --glide-core-shadow-checkbox: 0px 0px 7px 0px #5ba4ee;
  + --glide-core-shadow-md: 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 3px 1px 0px rgba(0, 0, 0, 0.06);

  Changed

  - --glide-core-shadow-lg: 0px 4px 14px 0px #00000040;
  + --glide-core-shadow-lg: var(--glide-core-effects-shadow-large-x) var(--glide-core-effects-shadow-large-y) var(--glide-core-effects-shadow-large-blur) var(--glide-core-effects-shadow-large-spread) var(--glide-core-effects-shadow-large-fill);
  - --glide-core-shadow-xl: 0px 4px 60px 0px #adadad;
  
  + --glide-core-shadow-xl: var(--glide-core-effects-shadow-xlarge-x) var(--glide-core-effects-shadow-xlarge-y) var(--glide-core-effects-shadow-xlarge-blur) var(--glide-core-effects-shadow-xlarge-spread) var(--glide-core-effects-shadow-xlarge-fill);

  System

  Removed

  - --glide-core-page-size-width: 83.3125rem;

• #474 eb20733 Thanks @dylankcrwd! - Adds type="date" support to Input.

• #478 06c022a Thanks @clintcs! - Dropdown and Input now appear hovered visually when their labels are hovered.

• #471 66d7164 Thanks @clintcs! - Dropdown's menu icons are now horizontally aligned with the icon of the selected option that's in Dropdown's button.

• #467 22c8479 Thanks @clintcs! - - Single-select Dropdown now reliably unhides every option when reopened after filtering.

  • Dropdown now falls back to "No Results Found" if every option has been filtered out.

0.12.3

Patch Changes

• #456 72ebc6f Thanks @clintcs! - Multiselect Dropdown now correctly applies focus to the next tag when its corresponding option doesn't have a value.

• #451 f186857 Thanks @clintcs! - - Filterable Dropdown no longer clears its filter when a tag is removed.

  • Dropdown has a new add-button-label attribute for labeling and adding a button to the bottom of Dropdown's menu. An "add" event, which you can use to show a modal, is emitted when the button is clicked.

• #459 2f31b54 Thanks @clintcs! - Single-select Dropdown now truncates the selected option's label when it would otherwise overflow.

0.12.2

Patch Changes

• #453 196a880 Thanks @clintcs! - - Menu nows reacts to options added dynamically to Menu Options.

  • Menu no longer activates the first option when another option is already active and a new option is dynamically added.

• #454 d6f150f Thanks @ynotdraw! - Tab Group supports the following CSS custom properties:

  • --panel-padding-inline-end
  • --panel-padding-inline-start
  • --tabs-padding-block-end
  • --tabs-padding-block-start
  • --tabs-padding-inline-end
  • --tabs-padding-inline-start

• #437 dd67616 Thanks @clintcs! - - Dropdown Options are now editable via the editable attribute, which will add a button with a pencil icon to the option. An "edit" event, which you can use to show a modal, is emitted when the button is clicked.

  • Multiselect Dropdown no longer submits its form when Enter is pressed on a tag removal button.
  • Multiselect Dropdown's tags can no longer be removed when Dropdown is disabled or read-only.

0.12.1

Patch Changes

• #449 505d9da Thanks @ynotdraw! - Tab Group sets the background-color only when it is provided with the sticky attribute to prevent content from bleeding into the background while a user scrolls.

0.12.0

Minor Changes

• #443 5d6a013 Thanks @ynotdraw! - Checkbox's setValidity() no longer accepts a third anchor argument due to it not being utilized. The anchor is automatically set to itself.

• #443 5d6a013 Thanks @ynotdraw! - Input and Textarea are no longer invalid when maxlength is exceeded to match native's behavior.

Patch Changes

• #440 deeca7a Thanks @clintcs! - Menu now has an offset attribute for changing the distance between its menu and target.

• #446 5746d95 Thanks @clintcs! - - Tag's background color when disabled has been updated to improve Tag's visibility when placed on another disabled component.

  • @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

    Light

    - --glide-core-surface-primary-disabled: #1d7afc26;
    + --glide-core-surface-primary-disabled: #d7e7ff;
    
    + --glide-core-generic-border-active: #6d6d6d;
    + --glide-core-surface-tag-default: #00000012;

    Dark

    + --glide-core-generic-border-active: #6d6d6d;
    + --glide-core-surface-tag-default: #ffffff1a;

    System

    + --glide-core-number-14: 0.875rem;
    + --glide-core-number-16: 1rem;

• #444 b6d24ce Thanks @clintcs! - Dropdown now opens and closes when any part of it is clicked. Previously, it would only close from a click outside of itself or one on the button with the caret icon.

• #443 5d6a013 Thanks @ynotdraw! - Input now supports a pattern attribute like the native input element. Unlike native, pattern validation occurs independently of the required attribute, allowing optional fields to be marked invalid if the pattern isn't matched.

  <glide-core-input label="Label" pattern="[a-z]{4,8}"></glide-core-input>

  // Returns `false`.
  document.querySelector('glide-core-input').checkValidity();

• #443 5d6a013 Thanks @ynotdraw! - Updated Checkbox so that removing the required attribute returns it to a valid state.

• #441 a6d3e61 Thanks @clintcs! - Menu now supports <span>s and <div>s as its target. If you're currently using a <span> or <div> and are handling keyboard events from it or setting tabindex on it, you can remove that code.

• #443 5d6a013 Thanks @ynotdraw! - Checkbox, Checkbox Group, Dropdown, Input, Radio Group, and Textarea now support setValidity() and setCustomValidity() methods like their native counterparts to allow for triggering validation with user-provided error messages.

  const input = document.querySelector('glide-core-input');
  
  // `setCustomValidity()` sets the validity message on the element
  // and places the element in an invalid state.
  input.setCustomValidity(
    'Please enter a name that is greater than 1 character.',
  );
  
  // The element is now marked as invalid.
  // Returns `false`.
  input.checkValidity();
  
  // Displays the validity message to the user.
  // Returns `false`.
  input.reportValidity();
  
  // Like native, provide an empty string to change
  // the validity state to valid.
  input.setCustomValidity('');

  const input = document.querySelector('glide-core-input');
  
  // `setValidity()` accepts ValidityStateFlags as the first
  // argument and a string for the validity message as the second
  // argument
  input.setValidity(
    { customError: true },
    'Please enter a name that is greater than 1 character.',
  );
  
  // The element is now marked as invalid.
  // Returns `false`.
  input.checkValidity();
  
  // Displays the validity message to the user.
  // Returns `false`.
  input.reportValidity();
  
  // Like native, provide an empty object for ValidityStateFlags
  // to change the validity state to valid.
  input.setValidity({});

• #445 a219f5a Thanks @clintcs! - Single-select Dropdown now closes when an already selected option is clicked.

0.11.0

Minor Changes

• #435 438afa2 Thanks @clintcs! - Tag no longer has a textContent getter. You can use Tag's label attribute instead.

Patch Changes

• #436 4cc7003 Thanks @clintcs! - Dropdown now emits a custom "filter" event when filtering. The event's detail property is the value filtered.

• #433 a73866c Thanks @clintcs! - When an option is selected and that option's label is changed programmatically, Dropdown now updates the label of its button when single-select, the label of its tags when multiselect, and the value of its input field when filterable.

• #439 a57249b Thanks @ynotdraw! - Tooltip was updated to have a higher contrast in dark mode.

• #428 42d162f Thanks @danwenzel! - Allow custom target icon for Tree Item Menu.

• #432 38b7c7d Thanks @clintcs! - Checkbox Group no longer unchecks Checkboxes whose value is changed programmatically.

• #438 79c4cce Thanks @clintcs! - Tag now has a disabled attribute that changes its color and disables its removal button.

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

  System

  + --glide-core-page-size-details-panel: 27.375rem;
  + --glide-core-page-size-height: 46.875rem;
  + --glide-core-page-size-width: 83.3125rem;

  Dark

  - --glide-core-surface-base-dark: #212121;
  + --glide-core-surface-base-dark: #f0f0f0;

• #435 438afa2 Thanks @clintcs! - Dropdown no longer shows a tooltip on the first option when it has overflowing text and Dropdown is opened via click. Dropdown still shows a tooltip when the option is arrowed to or hovered.

• #431 42c6b45 Thanks @ynotdraw! - Tab Group now supports a sticky attribute, enabling the group to remain fixed at the top of the panel even when the panel content is scrolled.

0.10.0

Minor Changes

• #392 01b3c80 Thanks @clintcs! - Split Button Container has a new API to accommodate a new design requirement for its buttons to disabled independently of one another. See Storybook for the full API.

  Before

  <script>
    import '@crowdstrike/glide-core/split-container.js';
    import '@crowdstrike/glide-core/split-button.js';
    import '@crowdstrike/glide-core/menu.link.js';
    import '@crowdstrike/glide-core/menu.button.js';
  </script>
  
  <glide-core-split-container
    menu-label="Label"
    menu-placement="top-end"
    open
    disabled
  >
    <glide-core-split-button slot="primary-action">
      Button
      <glide-core-example-icon slot="prefix"></glide-core-example-icon>
    </glide-core-split-button>
  
    <glide-core-menu-button label="Label"></glide-core-menu-button>
  </glide-core-split-container>

  After

  <script>
    import '@crowdstrike/glide-core/split-button.js';
    import '@crowdstrike/glide-core/split-button.primary-button.js';
    import '@crowdstrike/glide-core/split-button.secondary-button.js';
    import '@crowdstrike/glide-core/menu.button.js';
  </script>
  
  <glide-core-split-button>
    <glide-core-split-button-primary-button label="Label" disabled>
      <glide-core-example-icon slot="icon"></glide-core-example-icon>
    </glide-core-split-button-primary-button>
  
    <glide-core-split-button-secondary-button
      slot="secondary-button"
      label="Label"
      menu-placement="top-end"
      disabled
      menu-open
    >
      <glide-core-menu-button label="Label"></glide-core-menu-button>
    </glide-core-split-button-secondary-button>
  </glide-core-split-button>

• #413 6abae27 Thanks @clintcs! - Input's "prefix" and "suffix" slots have been renamed to "prefix-icon" and "suffix-icon".

  <glide-core-input label="Label" placeholder="Placeholder">
    <glide-core-example-icon
  -   slot="prefix"
  +   slot="prefix-icon"
      name="edit"
    ></glide-core-example-icon>
    <glide-core-example-icon
  -   slot="suffix"
  +   slot="suffix-icon"
      name="share"
    ></glide-core-example-icon>
  </glide-core-input>

• #400 ee0aa37 Thanks @clintcs! - Tooltip's default slot no longer supports a shortcut. Use the new shortcut attribute instead. This change is to support a new design requirement restricting the width of non-shortcut content.

  <glide-core-tooltip shortcut='["CMD","K"]'> Tooltip </glide-core-tooltip>

• #407 c9d9655 Thanks @clintcs! - @crowdstrike/glide-core/styles/variables.css has been updated with the latest from Figma:

  Light

  - --glide-core-text-syntax-blue: #0000ff;
  - --glide-core-text-syntax-dark: #151515;
  - --glide-core-text-syntax-green: #116644;
  - --glide-core-text-syntax-purple: #770088;
  - --glide-core-text-syntax-red-dark: #95150e;
  - --glide-core-text-syntax-red-light: #ee4400;
  
  - --glide-core-text-body-lighter: #c9c9c9;
  + --glide-core-text-body-lighter: #8a8a8a;
  
  + --glide-core-border-base-transparent: #0000001a;
  + --glide-core-surface-table-row-hover: #1d7afc26;

  Dark

  - --glide-core-text-syntax-blue: #0000ff;
  - --glide-core-text-syntax-dark: #ffffff;
  - --glide-core-text-syntax-green: #116644;
  - --glide-core-text-syntax-purple: #770088;
  - --glide-core-text-syntax-red-dark: #95150e;
  - --glide-core-text-syntax-red-light: #ee4400;
  
  - --glide-core-text-body-lighter: #c9c9c9;
  + --glide-core-text-body-lighter: #8a8a8a;
  
  - --glide-core-text-placeholder: #d7e7ff;
  + --glide-core-text-placeholder: #c9c9c9;
  
  + --glide-core-border-base-transparent: #0000001a;
  + --glide-core-surface-table-row-hover: #1d7afc26;

• #401 7231487 Thanks @ynotdraw! - Removed Status Indicator. It was only used by Toast. Moved it to the consuming application.

• #387 37841e9 Thanks @clintcs! - Modal's show-back-button attribute has been renamed to back-button for brevity.

  - <glide-core-modal label="Label" show-back-button>
  + <glide-core-modal label="Label" back-button>

  Drawer's open() method has been renamed to show() to match <dialog>.

  const drawer = document.querySelector('glide-core-modal');
  
  - drawer.open();
  + drawer.show();

  Modal no longer emits an "open" event on open to match <dialog>. You can instead listen for a "click" event on the button that opens your Modal.

• #385 b3e8efd Thanks @clintcs! - Menu no longer offers a focus() method, which focused its target. Simply call focus() on your target directly.

• #388 5a0f3a2 Thanks @clintcs! - Button's "prefix" and "suffix" slots have been renamed to "prefix-icon" and "suffix-icon".

  <glide-core-button label="Label">
    <glide-core-example-icon
  -   slot="prefix"
  +   slot="prefix-icon"
      name="calendar"
    ></glide-core-example-icon>
    <glide-core-example-icon
  -   slot="suffix"
  +   slot="suffix-icon"
      name="edit"
    ></glide-core-example-icon>
  </glide-core-button>

  Button Group Button's "prefix" slot has been renamed to "icon".

  <glide-core-button-group label="Label">
  
    <glide-core-button-group-button label="One">
      <glide-core-example-icon
  -     slot="prefix"
  +     slot="icon"
        name="calendar"
      ></glide-core-example-icon>
    </glide-core-button-group-button>
  </glide-core-button-group>

  Accordion's "prefix" and "suffix" slots have been renamed to "prefix-icon" and "suffix-icons".

  <glide-core-accordion label="Label">
    Content
  
    <glide-core-example-icon
  -   slot="prefix"
  +   slot="prefix-icon"
      name="share"
    ></glide-core-example-icon>
    <glide-core-example-icon
  -   slot="suffix"
  +   slot="suffix-icons"
      name="edit"
    ></glide-core-example-icon>
    <glide-core-example-icon
  -   slot="suffix"
  +   slot="suffix-icons"
      name="settings"
    ></glide-core-example-icon>
  </glide-core-accordion>

  Accordion no longer dispaches a custom event. Accordion's state, which was available via the custom event's detail property, can be accessed via the open property.

  - $0.addEventListener('toggle', (e) => console.log(e.detail.newState === 'open'))
  + $0.addEventListener('toggle', (e) => console.log(e.target.open))

• #377 a3381d8 Thanks @clintcs! - Tag's default slot has been replaced by a label attribute to restrict its content to enforce visual consistency.

  - <glide-core-tag>Label</glide-core-tag>
  + <glide-core-tag label="Label"></glide-core-tag>

  Tag's removable-label attribute has been renamed to removable and is now boolean. Tag will use label instead to describe its removal button to screenreaders.

  - <glide-core-tag removable-label="remove">Tag</glide-core-tag>
  + <glide-core-tag label="Label" removable></glide-core-tag>

  Tag's "prefix" slot has been renamed "icon".

  <glide-core-tag label="Label">
    <glide-core-example-icon
      name="drag-dots"
  -   slot="prefix"
  +   slot="icon"
    ></glide-core-example-icon>
  </glide-core-tag>

• #397 efe4812 Thanks @clintcs! - Button now has a label attribute instead of a default slot to restrict its content to increase design consistency.

  - <glide-core-button>Label</glide-core-button>
  + <glide-core-button label="Label"></glide-core-button>

• #386 1438848 Thanks @clintcs! - The order of the values in Dropdown's value array no longer changes when the value of a selected Dropdown Option is changed programmatically.

Patch Changes

• #430 26e0a8e Thanks @clintcs! - - When inside another web component and open, Menu now closes when its target is clicked.

  • Dropdown can now be navigated using ArrowUp and ArrowDown when opened via click.

• #400 ee0aa37 Thanks @clintcs! - Tooltips with a shortcut now display the shortcut on the left when their tooltip is positioned to the left of its target.

• #408 be4a2f4 Thanks @clintcs! - Toggle's focus outline offset has been reduced.

• #399 5b95fa2 Thanks @danwenzel! - Design updates to Checkbox and Checkbox Group:

  • More prominent background and border colors for disabled checkboxes
  • Increased vertical spacing between Checkbox Group Checkboxes
  • A Checkbox Group in error state now shows red border around the group, rather than a red border for each individual checkbox

• #421 2f5875c Thanks @clintcs! - Multiselect Dropdown previously moved selected option tags into an overflow menu when they exceeded 3. It now dynamically adds tags to the overflow menu based on available space.

• #427 6b0451d Thanks @danwenzel! - Ensure correct gap between Tree Item prefix icon and label

  We were previously targeting the slotted element, which wasn't working if that slotted element had display:contents.

• #413 6abae27 Thanks @clintcs! - - Input and Textarea now have an autocomplete attribute.

  • Input's autocapitalize, disabled, label, maxlength, and placeholder attributes are now reflected.
  • Textareas's autocapitalize, disabled, hide-label, label, maxlength, placeholder, readonly, required, and spellcheck attributes are now reflected.

• #420 f0fe466 Thanks @clintcs! - When disabled, Toggle's background color is now darker in a light theme and lighter in a dark theme.

• #391 d2b0278 Thanks @dylankcrwd! - - Button icon slots no longer have negative margins, and Button horizontal padding is slightly decreased when icons are present. This resolves an issue where negative margins caused horizontal overflow in the parent container.

• #411 d435fe5 Thanks @clintcs! - Dropdown Option's label is now vertically centered and shorter when Dropdown's size is "small".

• #395 4bfde01 Thanks @clintcs! - - Accordion respects the user's system preference for reduced motion.

  • Accordion waits to dispatch "toggle" on open until its animation is complete.
  • Accordion animates when open is set programmatically.
  • Accordion's "toggle" event bubbles.
  • Accordion's open property is set to true when Accordion is opened via click.
  • Accordion has a click() method.
  • Setting Accordion's open property to false closes Accordion.

• #393 cb66eba Thanks @danwenzel! - Fixes a bug where programmatically-added tree items weren't correctly indented.

• #419 241f21f Thanks @clintcs! - - Tooltip no longer has extraneous inner whitespace when it's without a shortcut.

  • Dropdown Option now supports icons when Dropdown is multiselect.
  • Dropdown's "icon:<value>" slot is now supported when multiselect.

• #377 a3381d8 Thanks @clintcs! - Tag's "remove" event now bubbles.

• #429 53bbba4 Thanks @ynotdraw! - The Modal header buttons are now vertically centered with the surrounding content.

• #426 53641cb Thanks @clintcs! - When inside another web component, multiselect Dropdown no longer closes when an option is selected.

• #414 13642b7 Thanks @clintcs! - Dropdown no longer prevents the user from setting the insertion point inside the input field.

• #406 a87e11c Thanks @clintcs! - Form controls no longer have a small amount of extra whitespace below them when they lack a description.

• #416 4ff8874 Thanks @clintcs! - - Dropdown Option's optional icon is now limited in height and width to 16 pixels.

  • Dropdown now has an "icon:<value>" slot for showing an icon in Dropdown's button when an option is selected. "<value>" should be equal to the value of each option. Dropdown will show the correct icon in its button based on which option is selected. See Storybook for a live example.

    <glide-core-dropdown label="Label" placeholder="Placeholder">
      <svg slot="icon:edit">Edit</svg>
      <svg slot="icon:move">Move</svg>
      <svg slot="icon:share">Share</svg>
    
      <glide-core-dropdown-option label="Edit" value="edit">
        <svg slot="icon">Edit</svg>
      </glide-core-dropdown-option>
    
      <glide-core-dropdown-option label="Move" value="move">
        <svg slot="icon">Move</svg>
      </glide-core-dropdown-option>
    
      <glide-core-dropdown-option label="Share" value="share">
        <svg slot="icon">Share</svg>
      </glide-core-dropdown-option>
    </glide-core-dropdown>

• #380 7df50b6 Thanks @dylankcrwd! - Button Group Button no longer has a hover style when selected.

• #361 96a441b Thanks @clintcs! - - Tree Item's properties are now reflected.

  • Split Container (now Split Button) supports dynamic replacement of Split Button Primary Button with Split Button Primary Link and vice versa.
  • Split Button Secondary Button's menu-open attribute and menuOpen property are synchronized with the state of the underlying Menu.
  • Split Button Secondary Button retains its visual hover state on click.

• #378 4ceeda8 Thanks @dylankcrwd! - Tree Items now have a fixed line-height to address an issue where they'd inherit different line-heights leading to unexpected sizing issues.

• #405 1d27913 Thanks @clintcs! - - Radio Group's name attribute is now reflected.

  • Checkbox, Checkbox Group, Dropdown, Input, and Textarea's name attribute is now an empty string by default to match native.

• #410 882cfb3 Thanks @ynotdraw! - Tertiary slotted content in a Modal now properly vertically center-aligns itself.

• #422 bfc4073 Thanks @clintcs! - - Dropdown when filterable and multiselect now clears its input field when an option is selected.

  • Dropdown now unhides previously filtered options when the filterable attribute is removed.
  • Single-select dropdown now sets the value of its input field to the label of the selected option when the filterable attribute is added.

• #382 4b95507 Thanks @clintcs! - Menu Link now navigates when selected via Space or Enter.

• #386 1438848 Thanks @clintcs! - - Checkbox Group's value property is no longer read-only.

  • Checkbox Group now updates its value when the value of an underlying Checkbox has changed.

• #392 01b3c80 Thanks @clintcs! - - Split Button's "primary" variant has a refreshed visual design.

  • Split Button's secondary button has an "active" visual treatment when its menu is open.

• #385 b3e8efd Thanks @clintcs! - - Accordion now has a focus() method.

  • Icon Button now has a click() method.

0.9.6

Patch Changes

• #374 2906848 Thanks @ynotdraw! - Tooltip now inserts line breaks into long strings to allow wrapping and prevent overflow.

0.9.5

Patch Changes

• #372 b7167c3 Thanks @clintcs! - Dropdown when filterable and single-select now sets the value of its <input> when an option is selected on initial render.

0.9.4

Patch Changes

• #362 16e14de Thanks @ynotdraw! - Updated Dropdown's placeholder color to align with Input and Textarea. This is improves Dark Mode support.

• #366 739dc82 Thanks @ynotdraw! - Updated Dropdown to use the proper font when filtering.

• #352 57d3b26 Thanks @clintcs! - - Tooltip's content is now shown in two columns to better support the appearance of keyboard shortcuts when non-shortcut content wraps.

  • The font size of Tooltip's content has been slightly reduced.
  • The gap between Tooltip's shortcut content and non-shortcut content has been slightly reduced.

• #360 8c7841c Thanks @dylankcrwd! - Button Group Buttons are now rounded in Safari.

• #357 03e30d6 Thanks @ynotdraw! - Updated --glide-core-surface-base-gray's color value to have better Dark Mode support.

• #356 bd2696e Thanks @clintcs! - Dropdown now has a filterable attribute. Use it to force Dropdown to be filterable when there are fewer than 11 options. When there are 11 or more options, Dropdown will be filterable regardless of filterable.

0.9.3

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.

0.9.2

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

0.9.1

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.

0.9.0

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 clear button is added as a tab stop to clear the input value.

• #280 ca0faec Thanks @ynotdraw! - Tooltip only appears when hovered for 300ms.

• #309 ffc70d1 Thanks @ynotdraw! - Multiple adjustments to Input were added:

  • Input now properly updates validity when set as required if value is updated programmatically.
  • Input now properly updates validity and its visual error state when required is removed programmatically.
  • The password toggle is now keyboard accessible.

• #315 3bb3ffc Thanks @clintcs! - - Tooltip now supports an offset attribute for adjusting the space between the tooltip and its target.

  • Tooltip now supports an open attribute to force its visibility.
  • Dropdown now scrolls when it contains more than nine options.
  • Dropdown options now truncate with an ellipsis and tooltip when they exceed a certain width.

• #314 2364551 Thanks @ynotdraw! - Input now transitions its border-color to align with Textarea.

• #317 1acb546 Thanks @clintcs! - Dropdown's input field now expands to fill the available space.

• #289 500ae69 Thanks @clintcs! - - Button Group reacts to default slot changes.

  • Button Group's label, orientation, and variant are reflected.
  • Button Group Buttons are not misaligned when vertical with an icon.
  • Button Group Buttons have a click() method.
  • Button Group Button's value is reflected.

• #303 9f1ad06 Thanks @ynotdraw! - Modal now properly respects the user's prefers-reduced-motion browser preference.

• #316 9a53f3b Thanks @clintcs! - - Dropdown's label and tooltip are now left-aligned instead of right-aligned when Dropdown is vertical.

  • Dropdown's button now maintains its minimum width instead of shrinking when Dropdown is width-constrained.
  • Form Controls Layout's columns no longer shrink when split="middle" when width-constrained.
  • Form Controls Layout's label column is now right-aligned instead of left-aligned.

0.8.0

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.

0.7.0

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.

0.6.5

Patch Changes

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

0.6.4

Patch Changes

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

0.6.3

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';

0.6.2

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.

0.6.1

Patch Changes

• #262 8ec777a Thanks @clintcs! - Prevent components from throwing window.crypto.randomUUID is not a function when they're served through HTTP instead of HTTPS.

0.6.0

Minor Changes

• #254 a307053 Thanks @ynotdraw! - Removed the --glide-core-text-link-2 CSS custom property.

• #230 66a529a Thanks @clintcs! - Menu's target button is now accessibly associated with its options. To make the association possible, Menu options must now be wrapped in <glide-core-menu-options> so that the ID of Menu's target is available to the options (aria-labelledby) and vice versa (aria-controls).

  <glide-core-menu>
   <glide-core-button slot="target"></glide-core-button>
  
  - <glide-core-menu-link></glide-core-menu-link>
  - <glide-core-menu-link></glide-core-menu-link>
  + <glide-core-menu-options>
  +    <glide-core-menu-link></glide-core-menu-link>
  +    <glide-core-menu-link></glide-core-menu-link>
  +  </glide-core-menu.options>
  </glide-core-menu>

Patch Changes

• #234 eeb727b Thanks @clintcs! - - Icon Button support for aria-controls.

  • Icon Button's ariaExpanded and ariaHasPopup properties are correctly reflected as aria-expanded and aria-haspopup instead of ariaexpanded and ariahaspopup.
  • Split Button support for aria-controls, aria-expanded, and aria-haspopup.
  • All three attributes are passed to each component's underlying <button> for better compatibility with screen readers.

• #230 66a529a Thanks @clintcs! - - Button supports aria-controls.

  • Button's ariaExpanded and ariaHasPopup properties are correctly reflected as aria-expanded and aria-haspopup instead of ariaexpanded and ariahaspopup.
  • All three attributes are passed to the underlying <button> for better compatibility with screen readers.

• #260 a73e56a Thanks @clintcs! - Fix Dropdown not closing when it loses focus.

• #256 c577453 Thanks @ynotdraw! - Updated the Tooltip offset to be closer to the target.

• #231 aa2fa81 Thanks @ynotdraw! - Tooltips now have a max-width and overflow wrap the provided text rather than growing for eternity in length.

• #237 9f08a14 Thanks @ynotdraw! - Increases the size of the Radio circle from 14px to 16px. Adjusts the spacing between radio elements.

• #244 3657dc7 Thanks @dylankcrwd! - Updates glide-core-tree-item text to use ellipses on overflow.

• #238 b436d86 Thanks @ynotdraw! - Improves screenreader support for Toggle so that it is announced as a switch rather than a checkbox.

• #255 afd65e9 Thanks @danwenzel! - Fix alignment for tooltips inside backdrop-filter elements

• #252 72fbb47 Thanks @danwenzel! - Add Japanese and French translations

• #236 67be392 Thanks @clintcs! - Button, Button Group Button, Icon Button, Split Button, Tab, and Radio Group have a "not-allowed" cursor when disabled to match other components.

• #222 32b1d6f Thanks @dylankcrwd! - Updates glide-core-icon-button styling.

• #246 ea133fa Thanks @dylankcrwd! - Updates glide-core-input and glide-core-textarea styling.

• #240 6746d64 Thanks @danwenzel! - Localize all static strings within glide core

• #259 ea910d6 Thanks @danwenzel! - Apply backdrop-filter fix for all floating components

  Including Menu, and Tree Item Menu

• #239 223fe2b Thanks @clintcs! - Improve Dropdown accessibility by setting aria-activedescendant to an empty string on close.

• #255 afd65e9 Thanks @danwenzel! - Add backdrop-filter to the Modal component as the designs call for to fix the background from bleeding into the Modal content.

• #254 a307053 Thanks @ynotdraw! - Updated CSS custom property values for dark mode to be more accessible. Added --glide-core-icon-display-light, --glide-core-text-link-dark-surface, --glide-core-text-link-table, and --glide-core-text-placeholder.

• #249 0ad7c77 Thanks @dylankcrwd! - Updates glide-core-dropdown to be consistent with glide-core-input and glide-core-textarea.

• #235 6fa171e Thanks @dylankcrwd! - Updates focus ring styling.

0.5.2

Patch Changes

• #226 94322e6 Thanks @clintcs! - Dropdown no longer dispatches multiple "change" and "input" events when Select All is clicked or when single-select and an option is already selected.

• #221 4c7326c Thanks @ynotdraw! - Add the -webkit prefix for backdrop-filter in Drawer

• #214 74405bc Thanks @clintcs! - - Dropdown now has a readonly attribute.

  • Dropdown is no longer tabbable when disabled.
  • Dropdown no longer opens on ArrowDown, ArrowUp, and Space when disabled.
  • The background color of the filtering field now matches the rest of Dropdown when disabled.

• #207 b5d9180 Thanks @dylankcrwd! - Adds glide-core-split-container, glide-core-split-button, and glide-core-split-link.

• #228 2f6fa05 Thanks @ynotdraw! - Updated Accordion's suffix color to work with dark mode.

• #216 c1e75fa Thanks @clintcs! - Class names are no longer minified in slot error messages.

• #212 6ab566d Thanks @clintcs! - Dropdown options are now announced and selectable via VoiceOver when Dropdown is filterable. Additionally, selected options are announced when Dropdown receives focus.

• #225 3cc3d4d Thanks @clintcs! - Dropdown's value is no longer read-only.

• #199 868f6a2 Thanks @dylankcrwd! - Refactor glide-core-drawer to use aside rather than dialog. Includes a "pinned" attribute to apply styling specific to when the drawer is "pinned".

• #223 045947b Thanks @clintcs! - - Menu no longer opens when its target is disabled or aria-disabled.

  • Menu options are now announced and selectable via VoiceOver.

• #228 2f6fa05 Thanks @ynotdraw! - Updated Toast's text color to work with dark mode.

• #218 a070949 Thanks @clintcs! - Dropdown. Activate the last initially selected option on first open instead of the first option. Activate the first option only if no options are selected.

• #228 2f6fa05 Thanks @ynotdraw! - Updated the Radio's circle color to work with dark mode.

0.5.1

Patch Changes

• #208 4504393 Thanks @ynotdraw! - Updated the CSS import paths in the package.json exports field so the CSS files can be imported properly by applications.

• #211 28be29b Thanks @clintcs! - Prevent Menus from overlapping when two or more are stacked vertically.

• #210 0eb453f Thanks @ynotdraw! - Adjusted Drawer to contain a blurred backdrop filter.

• #211 28be29b Thanks @clintcs! - Remove the opacity from Menu's background to match Dropdown.

• #211 28be29b Thanks @clintcs! - Dropdown Option no longer throws in Ember applications.

0.5.0

Minor Changes

• #189 7bf0fc7 Thanks @ynotdraw! - All component prefixes were changed from cs- to glide-core-. Component imports were not adjusted. To migrate your existing code to the new format, replace any <cs- prefix with <glide-core- instead.

  -  <cs-button>Button</cs-button>
  +  <glide-core-button>Button</glide-core-button>

• #196 49e227d Thanks @ynotdraw! - Refactored max-character-count to maxlength for Input and Textarea to align closer to the platform's maxlength attribute.

  -  <glide-core-input max-character-count="20"></glide-core-input>
  -  <glide-core-textarea max-character-count="20"></glide-core-textarea>
  +  <glide-core-input maxlength="20"></glide-core-input>
  +  <glide-core-textarea maxlength="20"></glide-core-textarea>

• #188 41185e9 Thanks @ynotdraw! - The package has been renamed to @crowdstrike/glide-core for simplicity. Components and styles are now contained in a single package.

• #191 7ef0db7 Thanks @clintcs! - Dropdown no longer dispatches "change" and "input" events with a detail property to align with Checkbox, Dropdown, Radio Group, and Toggle.

• #202 2d8c562 Thanks @ynotdraw! - Updated all CSS custom properties to have a --glide-core- prefix rather than --cs- to align with our latest naming conventions.

  -  background-color: var(--cs-surface-primary)
  +  background-color: var(--glide-core-surface-primary);

• #198 ceb0363 Thanks @clintcs! - Removed .glide-lock-scroll from variables.css and marked it as private.

• #133 b169ae5 Thanks @clintcs! - Replace @crowdstrike/glide-core-styles with @crowdstrike/glide-core/styles/variables.css.

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

Patch Changes

• #187 c43e741 Thanks @danwenzel! - Fix up layout of tree item menu

• #133 b169ae5 Thanks @clintcs! - Add @crowdstrike/glide-core/styles/fonts.css containing a @font-face rule and inlined Nunito for easier inclusion.

  If your project added the Nunito font manually, you can replace it with a single import:

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

• #190 c7f3f63 Thanks @danwenzel! - Add tree item icon button

• #206 4293e4c Thanks @clintcs! - Dropdown no longer closes when a tag is removed.

• #191 7ef0db7 Thanks @clintcs! - Add multiselection and filtering to Dropdown.

• #152 bdc55b2 Thanks @camskene! - Our CSS custom properties are now generated from Figma automatically. This change introduced a few underlying color value changes you may notice; however, they now match exactly what design calls for.

• #205 1f5caf2 Thanks @clintcs! - Dropdown now expands to fill its container.

• #195 3db2398 Thanks @danwenzel! - Remove outline-offset for tertiary icon buttons

0.4.6

Patch Changes

• #174 bba992f Thanks @danwenzel! - Ensure tooltip remains open when hovered

0.4.5

Patch Changes

• #181 fe08a0e Thanks @ynotdraw! - Adjust types order defined in the package.json exports to come first. The "exports" field is order-based. For example, a scenario where both the "types" and "import" condition could be active, "types" should be first so that it matches and returns a .d.ts file, rather than a .js file from the "import" condition.

0.4.4

Patch Changes

• #179 507a5ed Thanks @ynotdraw! - After an accessibility audit of Accordion, it was determined that aria-labelledby, role="region", and tabindex="0" could be removed from the inner content area. These attributes were removed.

• #169 aa63ea1 Thanks @ynotdraw! - Adjusted padding of cs-button

• #151 f45c9d5 Thanks @dylankcrwd! - Adds cs-radio-group and cs-radio.

0.4.3

Patch Changes

• #176 77f5727 Thanks @clintcs! - Fix Checkbox, Checkbox Group, and Dropdown not resetting with their form.

• #175 a3460e3 Thanks @clintcs! - Allow Dropdown and Menu's default slots to contain only whitespace to accommodate asychronously rendered options.

• #157 aa7d760 Thanks @ynotdraw! - Adjusted color variables for Button, Button Group Button, Dropdown, Input, Tab, and Textarea.

• #173 abb0914 Thanks @ynotdraw! - Remove display: flex; from the Modal body content to default to display: block; instead.

• #168 32fcac8 Thanks @ynotdraw! - Fixed a bug in Modal where a mousedown event would happen somewhere inside the modal, but the mouseup event would occur outside of the Modal. This would cause the Modal to close, which is not the expected behavior. By switching from a click event to a mousedown event, we get the expected behavior of remaining open.

• #171 e8eba6b Thanks @clintcs! - Input and Textarea now expand to the full width of their container.

0.4.2

Patch Changes

• #145 c8a8dfe Thanks @danwenzel! - Add Toasts

• #160 a3f9a47 Thanks @clintcs! - Checkbox Group error feedback no longer shows when the control is valid.

• #164 11ee00c Thanks @ynotdraw! - Update ifDefined, ref, and when imports to be from lit rather than lit-html

• #166 b6f6e42 Thanks @clintcs! - Don't throw when Dropdown's default slot is empty so options can be provided asynchronously.

• #160 a3f9a47 Thanks @clintcs! - Add a hide-label attribute to Checkbox, Checkbox Group, and Toggle.

• #159 9db6539 Thanks @clintcs! - Use "not-allowed" cursor consistently with form controls when disabled.

• #162 c266dcb Thanks @clintcs! - Menu no longer opens then closes immediately when used in another web component.

• #156 80802c9 Thanks @clintcs! - Don't render Toggle summary when empty.

0.4.1

Patch Changes

• #154 eae9f49 Thanks @clintcs! - Dropdown no longer opens then closes immediately when used in another web component.

0.4.0

Minor Changes

• #153 73cc661 Thanks @clintcs! - Rename Textarea's label-position attribute to orientation to match other components.

• #150 3dfee94 Thanks @clintcs! - Rename Input's label-position attribute to orientation to match other components.

• #144 17d9c34 Thanks @clintcs! - Throw with all components when slots are missing or invalid.

• #139 cee64b3 Thanks @clintcs! - Replace Dropdown's setCustomValidity method and validation message, shown when Dropdown is invalid, with a "description" slot shown always.

• #140 0c91037 Thanks @clintcs! - Dialog's "close" and Accordion's "toggle" event no longer bubble.

Patch Changes

• #136 36f832f Thanks @ynotdraw! - Minor color adjustments to cs-tag and cs-tree.item components

• #149 f616b0b Thanks @clintcs! - Fix Tooltip not being announced by VoiceOver.

• #107 50e40d6 Thanks @dylankcrwd! - Adds cs-modal.

0.3.3

Patch Changes

• #121 b1f0bcb Thanks @danwenzel! - Switch to a fixed position strategy for tooltip

• #130 b30a9f3 Thanks @clintcs! - Add Tooltip support to Textarea.

• #124 1515e64 Thanks @clintcs! - Prevent Tooltip from getting a line height.

• #91 a5cb2ea Thanks @danwenzel! - Add menu to Tree Item

• #110 bd69ab8 Thanks @clintcs! - Add Checkbox Group.

• #127 52c1234 Thanks @clintcs! - Add Tooltip support to Input.

0.3.2

Patch Changes

• #119 fc9bfeb Thanks @clintcs! - Fixes for Tooltip for an overflowing "target" and a misaligned tooltip.

• #114 da5e41e Thanks @clintcs! - Expose Menu's placement as an attribute.

• #116 79ebcf0 Thanks @clintcs! - Don't run Floating UI when Tooltip is hidden.

• #120 2b269d8 Thanks @dylankcrwd! - Fixes styling issue with button-group-button

• #122 31c7791 Thanks @ynotdraw! - Adds a fix preventing cs-menu options from wrapping

0.3.1

Patch Changes

• #112 abef2fb Thanks @ynotdraw! - Resolved a bug preventing input from being imported in projects

0.3.0

Minor Changes

• #99 24967eb Thanks @ynotdraw! - Renamed cs-drawer's --cs-drawer-width CSS property to --width.

  -    <cs-drawer style="--cs-drawer-width: 20rem;">
  +    <cs-drawer style="--width: 20rem;">
        <div style="padding: 0.5rem">Width of 20rem</div>
      </cs-drawer>

• #87 c9b5e87 Thanks @clintcs! - Disallow importing from library/ and styles/.

• #89 529c963 Thanks @clintcs! - tree-item.js → tree.item.js

Patch Changes

• #79 df8203e Thanks @clintcs! - Components now throw in development when slots contain unsupported elements or required slots are missing.

• #52 2f3dbc3 Thanks @dylankcrwd! - Adds cs-button-group and cs-button-group-button

• #97 752e1a1 Thanks @gfig-cs! - Button a11y fixes

• #106 558e01e Thanks @ynotdraw! - Adjusted the height of the cs-button for both large and small variants.

• #81 2525e41 Thanks @dylankcrwd! - Adds cs-tag

• #94 663115f Thanks @dylankcrwd! - Adds a "size" css variable to ExampleIcon and is applied in Tag

• #96 6835819 Thanks @clintcs! - Add Dropdown variant?: "quiet" and hide-label: boolean arguments.

• #104 7fc9e90 Thanks @danwenzel! - Add Textarea

• #90 e58d27f Thanks @gfig-cs! - Checkbox a11y fixes

• #78 85215fa Thanks @clintcs! - Add Toggle

• #48 4bc3b10 Thanks @dylankcrwd! - Adds cs-tab, cs-tab-panel, and cs-tab-group

• #88 720dd83 Thanks @ynotdraw! - Adds cs-status-indicator

• #83 a21640c Thanks @danwenzel! - Add Input

0.2.0

Minor Changes

• #47 986c359 Thanks @clintcs! - Add Checkbox

• #20 253ef2e Thanks @clintcs! - Reflect Button's ariaExpanded and ariaHasPopup properties.

• #19 a7cdf8e Thanks @ynotdraw! - Close the shadow root for cs-button.

Patch Changes

• #32 e389618 Thanks @ynotdraw! - Added transitions to <cs-button> to match <cs-icon-button>.

• #35 d921857 Thanks @ynotdraw! - Added the <cs-accordion> component.

  <cs-accordion label="Accordion Label"> Inner content </cs-accordion>

• #53 58c7a9a Thanks @clintcs! - Add Dropdown

• #25 338e64b Thanks @ynotdraw! - Updated <cs-button to default to a closed shadow root, removing the webdriver workaround.

  You can reopen the shadow root in tests if needed:

  // test.ts
  import Button from '@crowdstrike/glide-core-components/button.js';

• #30 286786c Thanks @ynotdraw! - Updated CSS Variables in @glide-core-styles to align with Figma.

  • Removed --cs-icon-display.
  • Added --cs-icon-active, --cs-icon-primary-hover, and --cs-icon-tertiary-disabled.
  • Updated --cs-icon-default and --cs-icon-primary color values.

  Added the <cs-icon-button> component.

• #26 b04fdfa Thanks @ynotdraw! - Added the <cs-drawer component.

  The Drawer can be opened via the open method:

  <script>
    const drawer = context.canvasElement.querySelector('cs-drawer');
    drawer?.open();
  </script>
  
  <cs-drawer>Content</cs-drawer>

  It is closed via the close method:

  <script>
    const drawer = context.canvasElement.querySelector('cs-drawer');
    drawer?.close();
  </script>
  
  <cs-drawer>Content</cs-drawer>

  A custom width can be set via the --cs-drawer-width CSS custom property:

  <cs-drawer style="--cs-drawer-width: 20rem;">Content</cs-drawer>

• #28 91b51bc Thanks @danwenzel! - Added the <cs-menu> component.

  <cs-menu>
    <cs-menu-link label="One" url="/one"> </cs-menu-link>
    <cs-menu-link label="Two" url="/two"> </cs-menu-link>
    <!--
      If an option does not have an associated url,
      you can use <cs-menu-button> and provide your own click handler
    -->
    <cs-menu-button label="Three"> </cs-menu-button>
  
    <cs-button slot="target" variant="secondary">Target</cs-button>
  </cs-menu>

• #33 efff38b Thanks @ynotdraw! - Added delegatesFocus: true to both button components.

• #39 df88685 Thanks @danwenzel! - Add Tree

0.1.3

Patch Changes

• #15 a5de76b Thanks @ynotdraw! - Updated <cs-button to properly participate in forms when type="submit" or type="reset".

0.1.2

Patch Changes

• #9 8f0a126 Thanks @ynotdraw! - Update engines in the package.json files to allow for a wider range for node and pnpm.

0.1.1

Patch Changes

• #5 e3154d5 Thanks @ynotdraw! - Updated the package.json to include files: ["dist"] so that it gets included in publishing.

0.1.0

Minor Changes

• #2 60d206e Thanks @ynotdraw! - Initial release of packages. To use these packages:

  Add the packages as dependencies in your project:

  pnpm i --save @crowdstrike/glide-core-styles @crowdstrike/glide-core-components

  Import the styles in your project:

  import '@crowdstrike/glide-core-styles';

  Import the component you'd like to render:

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

  Render the component in your markup:

  <cs-button size="small">Button</cs-button>