# Changelog
Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the Stable badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
Components with the Experimental badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
?> During the beta period, these restrictions may be relaxed in the event of a mission-critical bug. 🐛
## Next
- Added the `sl-input` event to ``, ``, ``, ``, and ``
- Fixed a bug in `` that sometimes prevented the color from updating when clicking or tapping on the controls
- Fixed a bug in `` that prevented text from being entered in the color input
- Fixed a bug in `` that caused the `sl-change` event to be incorrectly emitted when the value was set programmatically [#917](https://github.com/shoelace-style/shoelace/issues/917)
- Fixed a bug in `` and `` that made it impossible to disable spell checking [#1061](https://github.com/shoelace-style/shoelace/issues/1061)
- Fixed non-modal behaviors in `` when using the `contained` attribute [#1051](https://github.com/shoelace-style/shoelace/issues/1051)
## 2.0.0-beta.86
- 🚨 BREAKING: changed the default value of `date` in `` to the current date instead of the Unix epoch
- 🚨 BREAKING: removed the `handle-icon` part and slot from `` (use `handle` instead)
- 🚨 BREAKING: removed the `handle` slot from `` (use the `divider` slot instead)
- 🚨 BREAKING: removed the `--box-shadow` custom property from `` (apply a box shadow to `::part(base)` instead)
- 🚨 BREAKING: removed the `play-icon` and `pause-icon` parts (use the `play-icon` and `pause-icon` slots instead)
- Added `header-actions` slot to `` and ``
- Added the `expand-icon` and `collapse-icon` slots to `` and refactored the icon animation [#1046](https://github.com/shoelace-style/shoelace/discussions/1046)
- Added the `play-icon` and `pause-icon` slots to `` so you can customize the default icons
- Converted `isTreeItem()` export to a static method of ``
- Fixed a bug in `` where `sl-selection-change` was emitted when the selection didn't change [#1030](https://github.com/shoelace-style/shoelace/pull/1030)
- Fixed a bug in `` that caused the border to render incorrectly when hovering over icons inside buttons [#1035](https://github.com/shoelace-style/shoelace/issues/1035)
- Fixed an incorrect default for `flip-fallback-strategy` in `` that caused the fallback strategy to be `initial` instead of `best-fit`, which is inconsistent with Floating UI's default [#1036](https://github.com/shoelace-style/shoelace/issues/1036)
- Fixed a bug where browser validation tooltips would show up when hovering over form controls [#1037](https://github.com/shoelace-style/shoelace/issues/1037)
- Fixed a bug in `` that sometimes caused the active tab indicator to not animate
- Fixed a bug in `` that caused the expand/collapse icon slot to be out of sync when the node is open initially
- Fixed the mislabeled `handle-icon` slot in `` (it now points to the ``, not the slot's fallback content)
- Fixed the border radius in `` so it matches with nested `` elements
- Fixed a bug that caused all button values to appear in submitted form data even if they weren't the submitter
- Improved IntelliSense in VS Code, courtesy of [Burton's amazing CEM Analyzer plugin](https://github.com/break-stuff/cem-plugin-vs-code-custom-data-generator)
- Improved accessibility of `` so the alert is announced and the close button has a label
- Improved accessibility of `` so slotted labels are announced along with visually hidden labels
- Refactored all styles and animations to use `translate`, `rotate`, and `scale` instead of `transform`
- Removed slot wrappers from many components, allowing better control over user-applied styles
- Removed unused aria attributes from ``
- Replaced the `x` icon in the system icon library with `x-lg` to improve icon consistency
## 2.0.0-beta.85
- Fixed a bug in `` that caused containing dialogs, drawers, etc. to close when pressing Escape while focused [#1024](https://github.com/shoelace-style/shoelace/issues/1024)
- Fixed a bug in `` that allowed lazy nodes to be incorrectly selected [#1023](https://github.com/shoelace-style/shoelace/pull/1023)
- Fixed a typing bug in `` [#1026](https://github.com/shoelace-style/shoelace/pull/1026)
- Updated Floating UI to 1.0.7 to fix a bug that prevented `hoist` from working correctly in `` after a recent update [#1024](https://github.com/shoelace-style/shoelace/issues/1024)
## 2.0.0-beta.84
- 🚨 BREAKING: Removed the `fieldset` property from `` (use CSS parts if you want to keep the border) [#965](https://github.com/shoelace-style/shoelace/issues/965)
- 🚨 BREAKING: Removed `base` and `label` parts from `` (use `form-control` and `form-control__label` instead) [#965](https://github.com/shoelace-style/shoelace/issues/965)
- 🚨 BREAKING: Removed the `base` part from `` (style the host element directly instead)
- 🚨 BREAKING: Removed the `invalid` attribute from form controls (use `[data-invalid]` to target it with CSS)
- Added validation states to all form controls to allow styling based on various validation states [#1011](https://github.com/shoelace-style/shoelace/issues/1011)
- `data-required` - indicates that a value is required
- `data-optional` - indicates that a value is NOT required
- `data-invalid` - indicates that the form control is invalid
- `data-valid` - indicates that the form control is valid
- `data-user-invalid` - indicates the form control is invalid and the user has interacted with it
- `data-user-valid` - indicates the form control is valid and the user has interacted with it
- Added npm exports [#1020](https://github.com/shoelace-style/shoelace/pull/1020)
- Added `checkValidity()` method to all form controls
- Added `reportValidity()` method to ``
- Added `button--checked` to `` and `control--checked` to `` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
- Added tests for ``, ``, ``, ``, ``, ``, `` and `` [#935](https://github.com/shoelace-style/shoelace/pull/935)
[#949](https://github.com/shoelace-style/shoelace/pull/949) [#951](https://github.com/shoelace-style/shoelace/pull/951) [#953](https://github.com/shoelace-style/shoelace/pull/953)
[#956](https://github.com/shoelace-style/shoelace/pull/956) [#984](https://github.com/shoelace-style/shoelace/pull/984) [#991](https://github.com/shoelace-style/shoelace/pull/991)
- Added translations for Hungarian, Turkish, English (United Kingdom) and German (Austria) [#982](https://github.com/shoelace-style/shoelace/pull/982) [#989](https://github.com/shoelace-style/shoelace/pull/989)
- Added `--indicator-transition-duration` custom property to `` [#986](https://github.com/shoelace-style/shoelace/issues/986)
- Added `--sl-input-required-content-color` custom property to all form controls [#948](https://github.com/shoelace-style/shoelace/pull/948)
- Added the ability to cancel `sl-show` and `sl-hide` events in `` [#993](https://github.com/shoelace-style/shoelace/issues/993)
- Added `focus()` and `blur()` methods to ``
- Added `stepUp()` and `stepDown()` methods to `` and `` [#1013](https://github.com/shoelace-style/shoelace/pull/1013)
- Added `showPicker()` method to `` [#1013](https://github.com/shoelace-style/shoelace/pull/1013)
- Added the `handle-icon` part to ``
- Added `caret`, `check`, `grip-vertical`, `indeterminate`, and `radio` icons to the system library and removed `check-lg` [#985](https://github.com/shoelace-style/shoelace/issues/985)
- Added the `loading` attribute to `` to allow lazy loading of image avatars [#1006](https://github.com/shoelace-style/shoelace/pull/1006)
- Added `formenctype` attribute to `` [#1009](https://github.com/shoelace-style/shoelace/pull/1009)
- Added `exports` to `package.json` and removed the `main` and `module` properties [#1007](https://github.com/shoelace-style/shoelace/pull/1007)
- Fixed a bug in `` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
- Fixed a bug in `` where the inner border disappeared on focus [#980](https://github.com/shoelace-style/shoelace/pull/980)
- Fixed a bug that caused prefix/suffix animations in `` to wobble [#996](https://github.com/shoelace-style/shoelace/issues/996)
- Fixed a bug in `` that prevented color from being set on the host element [#999](https://github.com/shoelace-style/shoelace/issues/999)
- Fixed a bug in `` where the `keydown` event erroneously propagated to ancestors when pressing Escape [#990](https://github.com/shoelace-style/shoelace/issues/990)
- Fixed a bug that prevented arrow keys from scrolling content within `` and `` [#925](https://github.com/shoelace-style/shoelace/issues/925)
- Fixed a bug that prevented Escape from closing `` and `` in some cases
- Fixed a bug that caused forms to submit unexpectedly when selecting certain characters [#988](https://github.com/shoelace-style/shoelace/pull/988)
- Fixed a bug in `` that prevented the `invalid` property from correctly reflecting validity sometimes [#992](https://github.com/shoelace-style/shoelace/issues/992)
- Fixed a bug in `` that prevented selections from working correctly on dynamically added tree items [#963](https://github.com/shoelace-style/shoelace/issues/963)
- Fixed module paths in `custom-elements.json` so they point to the dist file instead of the source file [#725](https://github.com/shoelace-style/shoelace/issues/725)
- Fixed an incorrect return value for `reportValidity()` in ``
- Improved `` to improve padding and render relative to the current font size
- Improved how many components display in forced-colors mode / Windows High Contrast mode
- Improved `` so it's usable in forced-colors mode
- Improved `` and `` so the panel is more visible in forced-colors mode
- Improved `` so selections are visible in forced-colors mode
- Improved `` so it's visible in forced-colors mode
- Improved `` so checked states are visible in forced-colors mode
- Improved `` so the thumb, track, and tooltips are visible in forced-colors mode
- Improved `` so icons are visible in forced-colors mode
- Improved `` so the divider is visible in forced-colors mode
- Improved `` so selected items are visible in forced-colors mode
- Improved `` so tabs are cleaner and easier to understand in forced-colors mode
- Improved positioning of the menu in `` so you can customize the menu width [#1018](https://github.com/shoelace-style/shoelace/issues/1018)
- Moved all component descriptions to `@summary` to get them within documentation tools [#962](https://github.com/shoelace-style/shoelace/pull/962)
- Refactored form controls to use the `ShoelaceFormControl` interface to improve type safety and consistency
- Updated Lit to 2.4.1
- Updated `@shoelace-style/localize` t0 3.0.3 to support for extended language codes
- Updated Bootstrap Icons to 1.10.2
- Updated TypeScript to 4.8.4
- Updated esbuild to 0.15.14
- Updated all other dependencies to latest versions
## 2.0.0-beta.83
This release removes the `` component. When this component was introduced, support for [`aspect-ratio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Shoelace's target browsers, making a dedicated component redundant.
- 🚨 BREAKING: Removed `` (use the well-supported `aspect-ratio` CSS property instead)
- 🚨 BREAKING: Changed the `toggle-password` attribute of `` to `password-toggle` for consistency
- Added an expand/collapse animation to ``
- Added `sl-lazy-change` event to ``
- Added `expand-button` part to `` [#893](https://github.com/shoelace-style/shoelace/pull/893)
- Added `password-visible` attribute to `` [#913](https://github.com/shoelace-style/shoelace/issues/913)
- Fixed a bug in `` that didn't account for the arrow's diagonal size
- Fixed a bug in `` that caused arrow placement to be incorrect with RTL
- Fixed a bug in `` that caused the indeterminate animation to stop working in Safari [#891](https://github.com/shoelace-style/shoelace/issues/891)
- Fixed a bug in `` that caused it to overflow a container at 100% width [#905](https://github.com/shoelace-style/shoelace/issues/905)
- Fixed a bug in `` that prevented custom expand/collapse icons from rendering
- Fixed a bug in `` where the `expand-icon` and `collapse-icon` slots were reversed
- Fixed a bug in `` that prevented the keyboard from working after lazy loading [#882](https://github.com/shoelace-style/shoelace/issues/882)
- Fixed a bug in `` that prevented the textarea from resizing automatically when setting the value programmatically [#912](https://github.com/shoelace-style/shoelace/discussions/912)
- Fixed a handful of paths to prevent TypeScript from getting upset [#886](https://github.com/shoelace-style/shoelace/issues/886)
- Fixed a bug in `` where the `button-group__base` part was documented but not exposed [#909](https://github.com/shoelace-style/shoelace/discussions/909)
- Fixed a bug in `` that caused the active track color to render on the wrong side in RTL [#916](https://github.com/shoelace-style/shoelace/issues/916)
- Refactored the internal event emitter to be part of `ShoelaceElement` to reduce imports and improve DX
- Downgraded Floating UI from 1.0.1 to 1.0.0 due to new logic that makes positioning much slower for certain components [#915](https://github.com/shoelace-style/shoelace/issues/915)
- Upgraded the status of ``, ``, and `` from experimental to stable
## 2.0.0-beta.82
- Added the `sync` and `arrow-placement` attributes to ``
- Changed the `auto-size` attribute of the experimental `` component so it accepts `horizontal`, `vertical`, and `both` instead of a boolean value
- Changed the `flip-fallback-placement` attribute of the experimental `` component to `flip-fallback-placements`
- Changed the `flip-fallback-strategy` in the experimental `` component to accept `best-fit` and `initial` instead of `bestFit` and `initialPlacement`
- Fixed a bug in `` that caused the panel to resize horizontally when the trigger is clipped by the viewport [#860](https://github.com/shoelace-style/shoelace/issues/860)
- Fixed a bug in `` where dynamically changing slotted items wouldn't update the tree properly
- Fixed a bug in `` that caused the panel to stack when clicking on the divider in mobile versions of Chrome [#862](https://github.com/shoelace-style/shoelace/issues/862)
- Fixed a bug in `` that prevented flip fallbacks from working as intended
- Fixed a bug that caused concurrent animations to work incorrectly when the durations were different [#867](https://github.com/shoelace-style/shoelace/issues/867)
- Fixed a bug in `` that caused the trigger and color preview to ignore opacity on first render [#869](https://github.com/shoelace-style/shoelace/issues/869)
- Fixed a bug in `` that prevented the keyboard from working when the component was nested in a shadow root [#871](https://github.com/shoelace-style/shoelace/issues/871)
- Fixed a bug in `` that prevented the keyboard from working when the component was nested in a shadow root [#872](https://github.com/shoelace-style/shoelace/issues/872)
- Fixed a bug in `` that allowed disabled tabs to erroneously receive focus
- Improved single selection in `` so nodes expand and collapse and rece
ive selection when clicking on the label
- Renamed `expanded-icon` and `collapsed-icon` slots to `expand-icon` and `collapse-icon` in the experimental `` and `` components
- Improved RTL support for ``
- Refactored components to extend from `ShoelaceElement` to make `dir` and `lang` reactive properties in all components
## 2.0.0-beta.81
- 🚨 BREAKING: removed the `base` part from `` and removed an unnecessary `