# 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.
_During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
## Next
- 🚨 BREAKING: changed the `alt` attribute to `label` in `` for consistency with other components
- Added `role="status"` to ``
- Added `valueAsDate` and `valueAsNumber` properties to `` [#570](https://github.com/shoelace-style/shoelace/issues/570)
- Added `start`, `end`, and `panel` parts to `` [#639](https://github.com/shoelace-style/shoelace/issues/639)
- Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633)
- Fixed an a11y bug in `` where `aria-describedby` referenced an id in the shadow root
- Fixed a bug in `` where tabbing didn't work properly in Firefox [#596](https://github.com/shoelace-style/shoelace/issues/596)
- Fixed a bug in `` where clicking the left/right edge of the control wouldn't focus it
- Improved `` track color when used on various backgrounds
- Improved a11y in `` so VoiceOver announces radios properly in a radio group
- Improved the API for the experimental `` component by making `position` accept a percentage and adding the `position-in-pixels` attribute
- Refactored ``, ``, ``, ``, ``, ``, ``, ``, and `` to use a Reactive Controller for slot detection
- Refactored internal id usage in ``, ``, ``, and ``
- Removed `position: relative` from the common component stylesheet
- Updated all dependencies to latest versions
## 2.0.0-beta.63
- 🚨 BREAKING: changed the `type` attribute to `variant` in ``, ``, ``, and `` since it's more appropriate and to disambiguate from other `type` attributes
- 🚨 BREAKING: removed `base` part from `` to simplify the styling API
- Added experimental `` component
- Added `focus()` and `blur()` methods to `` [#625](https://github.com/shoelace-style/shoelace/pull/625)
- Fixed a bug where setting `tooltipFormatter` on `` in JSX causes React@experimental to error out
- Fixed a bug where clicking on a slotted icon in `` wouldn't submit forms [#626](https://github.com/shoelace-style/shoelace/issues/626)
- Added the `sl-` prefix to generated ids for `` and ``
- Refactored `` to use Lit's static expressions to reduce code
- Simplified `` animation
## 2.0.0-beta.62
- 🚨 BREAKING: changed the `locale` attribute to `lang` in ``, ``, ``, and `` to be consistent with how localization is handled
- Added localization support including translations for English, German, German (Switzerland), Spanish, French, Hebrew, Japanese, Dutch, Polish, Portuguese, and Russian translations [#419](https://github.com/shoelace-style/shoelace/issues/419)
- CodePen examples will now open in light or dark depending on your current preference
- Fixed a bug where tag names weren't being generated in `vscode.html-custom-data.json` [#593](https://github.com/shoelace-style/shoelace/pull/593)
- Fixed a bug in `` where the tooltip wouldn't reposition when content changed
- Fixed a bug in `` where focusing on a filled control showed the wrong focus ring
- Fixed a bug where setting `value` initially on `` didn't work in React [#602](https://github.com/shoelace-style/shoelace/issues/602)
- Updated filled inputs to have the same appearance when focused
- Updated `color` dependency from 3.1.3 to 4.0.2
- Updated ``, ``, ``, and `` to work like other localized components
- Upgraded the status of `` from experimental to stable
- Updated to Bootstrap Icons to 1.7.2
- Upgraded color to 4.1.0
## 2.0.0-beta.61
This release improves the dark theme by shifting luminance in both directions, slightly condensing the spectrum. This results in richer colors in dark mode. It also reduces theme stylesheet sizes by eliminating superfluous gray palette variations.
In [beta.48](#_200-beta48), I introduced a change to color tokens that allowed you to access alpha values at the expense of a verbose, non-standard syntax. After considering feedback from the community, I've decided to revert this change so the `rgb()` function is no longer required. Many users reported never using it for alpha, and even more reported having trouble remembering to use `rgb()` and that it was causing more harm than good.
Furthermore, both Safari and Firefox have implemented [`color-mix()`]() behind a flag, so access to alpha channels and other capabilities are coming to the browser soon.
If you're using color tokens in your own stylesheet, simply remove the `rgb()` to update to this version.
```css
.your-styles {
/* change this */
color: rgb(var(--sl-color-primary-500));
/* to this */
color: var(--sl-color-primary-500);
}
```
Thank you for your help and patience with testing Shoelace. I promise, we're not far from a stable release!
- 🚨 BREAKING: removed blue gray, cool gray, true gray, and warm gray color palettes
- 🚨 BREAKING: removed `--sl-focus-ring-color`, and `--sl-focus-ring-alpha` (use `--sl-focus-ring` instead)
- 🚨 BREAKING: removed `--sl-surface-base` and `--sl-surface-base-alt` tokens (use the neutral palette instead)
- Added experimental `` component
- Added `clear-icon` slot to `` [#591](https://github.com/shoelace-style/shoelace/issues/591)
- Fixed a bug in `` where the label would show in the default slot
- Improved the dark theme palette so colors are bolder and don't appear washed out
- Improved a11y of `` by representing it as an image with an `alt` [#579](https://github.com/shoelace-style/shoelace/issues/579)
- Improved a11y of the scroll buttons in ``
- Improved a11y of the close button in ``
- Improved a11y of `` by removing an invalid `aria-selected` attribute [#579](https://github.com/shoelace-style/shoelace/issues/579)
- Improved a11y of `` by not using a variation of the `name` attribute for labels (use the `label` prop instead)
- Moved `role` from the shadow root to the host element in ``
- Removed redundant `role="menu"` in ``
- Slightly faster animations for showing and hiding ``
- Updated to Bootstrap Icons to 1.7.1
- Upgraded the status of `` from experimental to stable
## 2.0.0-beta.60
- Added React examples and CodePen links to all components
- Changed the `attr` in experimental `` to require `"*"` instead of `""` to target all attributes
- Fixed a bug in `` where the `label` attribute didn't set the label
- Fixed a bug in `` that caused disabled and readonly controls to transition on hover
- The `panel` property of `` is now reflected
- The `name` property of `` is now reflected
## 2.0.0-beta.59
- Added React wrappers as first-class citizens
- Added eye dropper to `` when the browser supports the [EyeDropper API](https://wicg.github.io/eyedropper-api/)
- Fixed a bug in `` where buttons groups with only one button would have an incorrect border radius
- Improved the `` trigger's border in dark mode
- Switched clearable icon from `x-circle` to `x-circle-fill` to make it easier to recognize
- Updated to Bootstrap Icons to 1.7.0
- Updated to Lit 2.0.2
## 2.0.0-beta.58
This version once again restores the bundled distribution because the unbundled + CDN approach is currently confusing and [not working properly](https://github.com/shoelace-style/shoelace/issues/559#issuecomment-949662331). Unbundling the few dependencies Shoelace has is still a goal of the project, but [this jsDelivr bug](https://github.com/jsdelivr/jsdelivr/issues/18337) needs to be resolved before we can achieve it.
I sincerely apologize for the instability of the last few beta releases as a result of this effort.
- Added experimental `` component
- Added `label` attribute to `` and `` to improve a11y
- Fixed a bug where the tooltip would show briefly when clicking a disabled ``
- Fixed a bug that caused a console error when `` was used
- Fixed a bug where the `nav` part in `` was on the incorrect element [#563](https://github.com/shoelace-style/shoelace/pull/563)
- Fixed a bug where non-integer aspect ratios were calculated incorrectly in ``
- Fixed a bug in `` where setting `value` wouldn't update the active and inactive portion of the track [#572](https://github.com/shoelace-style/shoelace/pull/572)
- Reverted to publishing the bundled dist and removed `/+esm` links from the docs
- Updated to Bootstrap Icons to 1.6.1
## 2.0.0-beta.57
- Fix CodePen links and CDN links
## 2.0.0-beta.56
This release is the second attempt at unbundling dependencies. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected, but note the URLs for modules on the CDN must have the `/+esm` now.
- Added the `hoist` attribute to `` [#564](https://github.com/shoelace-style/shoelace/issues/564)
- Unbundled dependencies and configured external imports to be packaged with bare module specifiers
## 2.0.0-beta.55
- Revert unbundling due to issues with the CDN not handling bare module specifiers as expected
## 2.0.0-beta.54
Shoelace doesn't have a lot of dependencies, but this release unbundles most of them so you can potentially save some extra kilobytes. This will be a breaking change only if your configuration _does not_ support bare module specifiers. CDN users and bundler users will be unaffected.
- 🚨 BREAKING: renamed the `sl-clear` event to `sl-remove`, the `clear-button` part to `remove-button`, and the `clearable` property to `removable` in ``
- Added the `disabled` prop to ``
- Fixed a bug in `` where setting `disabled` initially didn't work
- Unbundled dependencies and configured external imports to be packaged with bare module specifiers
## 2.0.0-beta.53
- 🚨 BREAKING: removed `` (use `` instead)
- 🚨 BREAKING: removed `percentage` attribute from `` and `` (use `value` instead)
- 🚨 BREAKING: switched the default `type` of `` from `primary` to `neutral`
- Added the experimental `` component
- Added the `` component
- Added `--sl-color-neutral-0` and `--sl-color-neutral-50` as early surface tokens to improve the appearance of alert, card, and panels in dark mode
- Added the `--sl-panel-border-width` design token
- Added missing background color to ``
- Added the `--padding` custom property to ``
- Added the `outline` variation to `` [#522](https://github.com/shoelace-style/shoelace/issues/522)
- Added the `filled` variation to ``, ``, and `` and supporting design tokens
- Added the `control` part to `` so you can target the main control with CSS [#538](https://github.com/shoelace-style/shoelace/issues/538)
- Added a border to `` to improve contrast when drawn on various background colors
- Added `--track-color-active` and `--track-color-inactive` custom properties to `` [#550](https://github.com/shoelace-style/shoelace/issues/550)
- Added the undocumented custom properties `--thumb-size`, `--tooltip-offset`, `--track-height` on ``
- Changed the default `distance` in `` from `2` to `0` [#538](https://github.com/shoelace-style/shoelace/issues/538)
- Fixed a bug where `` would be larger than the viewport when it had lots of options [#544](https://github.com/shoelace-style/shoelace/issues/544)
- Fixed a bug where `` wouldn't animate in Safari
- Updated the default height of `` from `16px` to `1rem` and added a subtle shadow to indicate depth
- Removed the `lit-html` dependency and moved corresponding imports to `lit` [#546](https://github.com/shoelace-style/shoelace/issues/546)
## 2.0.0-beta.52
- 🚨 BREAKING: changed the `--stroke-width` custom property of `` to `--track-width` for consistency
- 🚨 BREAKING: removed the `size` and `stroke-width` attributes from `` so it's fully customizable with CSS (use the `--size` and `--track-width` custom properties instead)
- Added the `--speed` custom property to ``
- Added the `--size` and `--track-width` custom properties to ``
- Added tests for `` [#530](https://github.com/shoelace-style/shoelace/pull/530)
- Fixed a bug where `` wasn't using a border radius token [#523](https://github.com/shoelace-style/shoelace/issues/523)
- Fixed a bug in the Remix Icons example where some icons would 404 [#528](https://github.com/shoelace-style/shoelace/issues/528)
- Updated `` to use only CSS for styling
- Updated `` to use an SVG and improved the indicator animation
- Updated to Lit 2.0 and lit-html 2.0 🔥
## 2.0.0-beta.51
A number of users had trouble counting characters that repeat, so this release improves design token patterns so that "t-shirt sizes" are more accessible. For example, `--sl-font-size-xxx-large` has become `--sl-font-size-3x-large`. This change applies to all design tokens that use this scale.
- 🚨 BREAKING: all t-shirt size design tokens now use `2x`, `3x`, `4x` instead of `xx`, `xxx`, `xxxx`
- Added missing `--sl-focus-ring-*` tokens to dark theme
- Added an "Importing" section to all components with copy/paste code to make cherry picking easier
- Improved the documentation search with a custom plugin powered by [Lunr](https://lunrjs.com/)
- Improved the `--sl-shadow-x-small` elevation
- Improved visibility of elevations and overlays in dark theme
- Reduced the size of `` slightly to better accommodate mobile devices
- Removed `` dependency from `` and improved the copy animation
## 2.0.0-beta.50
- Added `` and `` components
- Added `--sl-letter-spacing-denser`, `--sl-letter-spacing-looser`, `--sl-line-height-denser`, and `--sl-line-height-looser` design tokens
- Fixed a bug where form controls would error out when the value was set to `undefined` [#513](https://github.com/shoelace-style/shoelace/pull/513)
## 2.0.0-beta.49
This release changes the way focus states are applied to elements. In browsers that support [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible), it will be used. In unsupportive browsers ([currently only Safari](https://caniuse.com/mdn-css_selectors_focus-visible)), `:focus` will be used instead. This means the browser will determine whether a focus ring should be shown based on how the user interacts with the page.
This release also fixes a critical bug in the color scale where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were reversed.
- 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
- 🚨 BREAKING: removed the `no-fieldset` property from `` (fieldsets are now hidden by default; use `fieldset` to show them)
- 🚨 BREAKING: removed `--focus-ring` custom property from ``, ``, `` for consistency with other form controls
- Added `--swatch-size` custom property to ``
- Added `date` to `` as a supported `type`
- Added the `--sl-focus-ring` design token for a more convenient way to apply focus ring styles
- Adjusted elevation tokens to use neutral in light mode and black in dark mode
- Adjusted `--sl-overlay-background-color` in dark theme to be black instead of gray
- Fixed a bug in `` where the opacity slider wasn't showing the current color
- Fixed a bug where Edge in Windows would show the native password toggle next to the custom password toggle [#508](https://github.com/shoelace-style/shoelace/issues/508)
- Fixed a bug where pressing up/down in `` didn't select the next/previous tab in vertical placements
- Improved size of ``
- Improved icon contrast in ``
- Improved contrast of ``
- Improved `:focus-visible` behavior in many components
- Removed elevation from `` when rendered inline
- Removed custom `:focus-visible` logic in favor of a directive that outputs `:focus-visible` or `:focus` depending on browser support
- Updated to Lit 2.0.0-rc.3
- Updated to lit-html 2.0.0-rc.4
## 2.0.0-beta.48
This release improves theming by offering both light and dark themes that can be used autonomously. It also improves contrast in most components, adds a variety of new color primitives, and changes the way color tokens are consumed.
Previously, color tokens were in hexadecimal format. Now, Shoelace now uses an `R G B` format that requires you to use the `rgb()` function in your CSS.
```css
.example {
/* rgb() is required now */
color: var(--sl-color-neutral-500);
}
```
This is more verbose than previous versions, but it has the advantage of letting you set the alpha channel of any color token.
```css
.example-with-alpha {
/* easily adjust opacity for any color token */
color: rgb(var(--sl-color-neutral-500) / 50%);
}
```
This change applies to all design tokens that implement a color. Refer to the [color tokens](/tokens/color) page for more details.
- 🚨 BREAKING: all design tokens that implement colors have been converted to `R G B` and must be used with the `rgb()` function
- 🚨 BREAKING: removed `--sl-color-black|white` color tokens (use `--sl-color-neutral-0|1000` instead)
- 🚨 BREAKING: removed `--sl-color-primary|success|warning|info|danger-text` design tokens (use theme or primitive colors instead)
- 🚨 BREAKING: removed `info` variant from ``, ``, ``, and `` (use `neutral` instead)
- 🚨 BREAKING: removed `--sl-color-info-*` design token (use `--sl-color-neutral-*` instead)
- 🚨 BREAKING: renamed `dist/themes/base.css` to `dist/themes/light.css`
- 🚨 BREAKING: removed `--sl-focus-ring-color-primary` tokens (use color tokens and `--sl-focus-ring-width|alpha` instead)
- 🚨 BREAKING: removed `--tabs-border-color` from `` (use `--track-color` instead)
- 🚨 BREAKING: changed the default value for `effect` to `none` in `` (use `sheen` to restore the original behavior)
- Added new color primitives to the base set of design tokens
- Added `--sl-color-*-950` swatches to all color palettes
- Added a console error that appears when menu items have duplicate values in ``
- Added CodePen link to code examples
- Added `prefix` and `suffix` slots to `` [#501](https://github.com/shoelace-style/shoelace/pull/501)
- Added `--indicator-color` custom property to ``
- Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
- Fixed a bug in `` where pressing Enter after using type to select would result in the wrong value
- Fixed a bug in `` where clicking a radio button would cause the wrong control to be focused
- Fixed a bug in `` and `` where an unintended `ref` attribute was present
- Fixed a bug in the focus-visible utility that failed to respond to mouseup events
- Fixed a bug where clicking on a menu item would persist its hover/focus state
- Fixed a bug in `` where it would erroneously intercept important keyboard shortcuts [#504](https://github.com/shoelace-style/shoelace/issues/504)
- Improved contrast throughout all components [#128](https://github.com/shoelace-style/shoelace/issues/128)
- Refactored thumb position logic in `` [#490](https://github.com/shoelace-style/shoelace/pull/490)
- Reworked the dark theme to use an inverted + shifted design token approach instead of component-specific selectors
## 2.0.0-beta.47
This release improves how component dependencies are imported. If you've been cherry picking, you no longer need to import component dependencies manually. This significantly improves developer experience, making Shoelace even easier to use. For transparency, component dependencies will continue to be listed in the docs.
- Added "Reflects" column to the properties table
- Dependencies are now automatically imported for all components
- Fixed a bug where tabbing into `` would not always focus the checked radio
- Fixed a bug in component styles that prevented the box sizing reset from being applied
- Fixed a regression in `` where dragging the grid handle wasn't smooth
- Fixed a bug where slot detection could incorrectly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
- Fixed a bug in `` where focus would move to the end of the input when typing in Safari [#480](https://github.com/shoelace-style/shoelace/issues/480)
- Improved base path utility logic
## 2.0.0-beta.46
This release improves the developer experience of ``. Previously, an animation was assumed to be playing unless the `pause` attribute was set. This behavior has been reversed and `pause` has been removed. Now, animations will not play until the new `play` attribute is applied.
This is a lot more intuitive and makes it easier to activate animations imperatively. In addition, the `play` attribute is automatically removed automatically when the animation finishes or cancels, making it easier to restart finite animations. Lastly, the animation's timing is now accessible through the new `currentTime` property instead of `getCurrentTime()` and `setCurrentTime()`.
In addition, Shoelace no longer uses Sass. Component styles now use Lit's template literal styles and theme files use pure CSS.
- 🚨 BREAKING: removed the `pause` attribute from `` (use `play` to start and stop the animation instead)
- 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `` (use the `currentTime` property instead)
- 🚨 BREAKING: removed the `close-on-select` attribute from `` (use `stay-open-on-select` instead)
- Added the `currentTime` property to `` to control the current time without methods
- Fixed a bug in `` where the tooltip wasn't showing in Safari [#477](https://github.com/shoelace-style/shoelace/issues/477)
- Fixed a bug in `` where pressing Enter in a menu didn't work with click handlers
- Reworked `` and `` to use a roving tab index and improve keyboard accessibility
- Reworked tabbable logic to be more performant [#466](https://github.com/shoelace-style/shoelace/issues/466)
- Switched component stylesheets from Sass to Lit's template literal styles
- Switched theme stylesheets from Sass to CSS
## 2.0.0-beta.45
This release changes the way component metadata is generated. Previously, the project used TypeDoc to analyze components and generate a very large file with type data. The data was then parsed and converted to an easier-to-consume file called `metadata.json`. Alas, TypeDoc is expensive to run and the metadata format wasn't standard.
Thanks to an amazing effort by [Pascal Schilp](https://twitter.com/passle_), the world has a simpler, faster way to gather metadata using the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest). Not only is this tool faster, but the data follows the evolving `custom-elements.json` format. This is exciting because a standard format for custom elements opens the door for many potential uses, including documentation generation, framework adapters, IDE integrations, third-party uses, and more. [Check out Pascal's great article](https://dev.to/open-wc/introducing-custom-elements-manifest-gkk) for more info about `custom-elements.json` and the new analyzer.
The docs have been updated to use the new `custom-elements.json` file. If you're relying on the old `metadata.json` file for any purpose, this will be a breaking change for you.
- 🚨 BREAKING: removed the `sl-overlay-click` event from `` and `` (use `sl-request-close` instead) [#471](https://github.com/shoelace-style/shoelace/discussions/471)
- 🚨 BREAKING: removed `metadata.json` (use `custom-elements.json` instead)
- Added `custom-elements.json` for component metadata
- Added `sl-request-close` event to `` and ``
- Added `dialog.denyClose` and `drawer.denyClose` animations
- Fixed a bug in `` where setting `value` immediately wouldn't trigger an update
- Fixed a bug in `` and `` where setting `open` initially didn't set a focus trap
- Fixed a bug that resulted in form controls having incorrect validity when `disabled` was initially set [#473](https://github.com/shoelace-style/shoelace/issues/473)
- Fixed a bug in the docs that caused the metadata file to be requested twice
- Fixed a bug where tabbing out of a modal would cause the browser to lag [#466](https://github.com/shoelace-style/shoelace/issues/466)
- Updated the docs to use the new `custom-elements.json` for component metadata
## 2.0.0-beta.44
- 🚨 BREAKING: all `invalid` props on form controls now reflect validity before interaction [#455](https://github.com/shoelace-style/shoelace/issues/455)
- Allow `null` to be passed to disable animations in `setDefaultAnimation()` and `setAnimation()`
- Converted build scripts to ESM
- Fixed a bug in `` where `invalid` did not update properly
- Fixed a bug in `` where a `keydown` listener wasn't cleaned up properly
- Fixed a bug in `` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
- Fixed a bug in `` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457)
- Fixed a bug in `` where `sl-change` was emitted immediately after connecting to the DOM [#458](https://github.com/shoelace-style/shoelace/issues/458)
- Fixed a bug in `` where non-printable keys would cause the menu to open
- Fixed a bug in `` where `invalid` was not always updated properly
- Reworked the `@watch` decorator to use `update` instead of `updated` resulting in better performance and flexibility
## 2.0.0-beta.43
- Added `?` to optional arguments in methods tables in the docs
- Added the `scrollPosition()` method to `` to get/set scroll position
- Added initial tests for ``, ``, ``, and ``
- Fixed a bug in `` where scrollable tab icons were not displaying correctly
- Fixed a bug in `` and `` where preventing clicks on the overlay no longer worked as described [#452](https://github.com/shoelace-style/shoelace/issues/452)
- Fixed a bug in `` and `` where setting initial focus no longer worked as described [#453](https://github.com/shoelace-style/shoelace/issues/453)
- Fixed a bug in `` where the `slotchange` listener wasn't attached correctly [#454](https://github.com/shoelace-style/shoelace/issues/454)
- Fixed lifecycle bugs in a number of components [#451](https://github.com/shoelace-style/shoelace/issues/451)
- Removed `fill: both` from internal animate utility so styles won't "stick" by default [#450](https://github.com/shoelace-style/shoelace/issues/450)
## 2.0.0-beta.42
This release addresses an issue with the `open` attribute no longer working in a number of components, as a result of the changes in beta.41. It also removes a small but controversial feature that complicated show/hide logic and led to a poor experience for developers and end users.
There are two ways to show/hide affected components: by calling `show() | hide()` and by toggling the `open` prop. Previously, it was possible to call `event.preventDefault()` in an `sl-show | sl-hide ` handler to stop the component from showing/hiding. The problem becomes obvious when you set `el.open = false`, the event gets canceled, and in the next cycle `el.open` has reverted to `true`. Not only is this unexpected, but it also doesn't play nicely with frameworks. Additionally, this made it impossible to await `show() | hide()` since there was a chance they'd never resolve.
Technical reasons aside, canceling these events seldom led to a good user experience, so the decision was made to no longer allow `sl-show | sl-hide` to be cancelable.
- 🚨 BREAKING: `sl-show` and `sl-hide` events are no longer cancelable
- Added Iconoir example to the icon docs
- Added Web Test Runner
- Added initial tests for `` and ``
- Changed the `cancelable` default to `false` for the internal `@event` decorator
- Fixed a bug where toggling `open` stopped working in ``, ``, ``, ``, and ``
- Fixed a bug in `` where setting a value outside the default `min` or `max` would clamp the value [#448](https://github.com/shoelace-style/shoelace/issues/448)
- Fixed a bug in `` where placement wouldn't adjust properly when shown [#447](https://github.com/shoelace-style/shoelace/issues/447)
- Fixed a bug in the internal `shimKeyframesHeightAuto` utility that caused `` to measure heights incorrectly [#445](https://github.com/shoelace-style/shoelace/issues/445)
- Fixed a number of imports that should have been type imports
- Updated Lit to 2.0.0-rc.2
- Updated esbuild to 0.12.4
## 2.0.0-beta.41
This release changes how components animate. In previous versions, CSS transitions were used for most show/hide animations. Transitions are problematic due to the way `transitionend` works. This event fires once _per transition_, and it's impossible to know which transition to look for when users can customize any possible CSS property. Because of this, components previously required the `opacity` property to transition. If a user were to prevent `opacity` from transitioning, the component wouldn't hide properly and the `sl-after-show|hide` events would never emit.
CSS animations, on the other hand, have a more reliable `animationend` event. Alas, `@keyframes` don't cascade and can't be injected into a shadow DOM via CSS, so there would be no good way to customize them.
The most elegant solution I found was to use the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offers more control over animations at the expense of customizations being done in JavaScript. Fortunately, through the [Animation Registry](/getting-started/customizing#animations), you can customize animations globally and/or per component with a minimal amount of code.
- 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in ``
- 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in ``
- 🚨 BREAKING: removed `--hide-duration`, `--hide-timing-function`, `--show-duration`, and `--show-timing-function` custom properties from `` (use the Animation Registry instead)
- Added the Animation Registry
- Fixed a bug where removing `` from the DOM and adding it back destroyed the popover reference [#443](https://github.com/shoelace-style/shoelace/issues/443)
- Updated animations for ``, ``, ``, ``, and `` to use the Animation Registry instead of CSS transitions
- Improved a11y by respecting `prefers-reduced-motion` for all show/hide animations
- Improved `--show-delay` and `--hide-delay` behavior in `` so they only apply on hover
- Removed the internal popover utility
## 2.0.0-beta.40
- 🚨 BREAKING: renamed `` to `` and added support for images and videos [#436](https://github.com/shoelace-style/shoelace/issues/436)
- Fixed a bug where setting properties before an element was defined would render incorrectly [#425](https://github.com/shoelace-style/shoelace/issues/425)
- Fixed a bug that caused all modules to be imported when cherry picking certain components [#439](https://github.com/shoelace-style/shoelace/issues/439)
- Fixed a bug where the scrollbar would reposition `` on hide causing it to jump [#424](https://github.com/shoelace-style/shoelace/issues/424)
- Fixed a bug that prevented the project from being built in a Windows environment
- Improved a11y in ``
- Removed `src/utilities/index.ts` to prevent tree-shaking confusion (please import utilities directly from their respective modules)
- Removed global `[hidden]` styles so they don't affect anything outside of components
- Updated to Bootstrap Icons 1.5.0
- Updated React docs to use [`@shoelace-style/react`](https://github.com/shoelace-style/react)
- Updated NextJS docs [#434](https://github.com/shoelace-style/shoelace/pull/434)
- Updated TypeScript to 4.2.4
## 2.0.0-beta.39
- Added experimental `` component
- Added `system` icon library and updated all components to use this instead of the default icon library [#420](https://github.com/shoelace-style/shoelace/issues/420)
- Updated to esbuild 0.8.57
- Updated to Lit 2.0.0-rc.1 and lit-html 2.0.0-rc.2
## 2.0.0-beta.38
- 🚨 BREAKING: `` components must be located inside an `` for proper accessibility [#218](https://github.com/shoelace-style/shoelace/issues/218)
- Added `` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
- Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `` and `` [#409](https://github.com/shoelace-style/shoelace/issues/409)
- Fixed a bug where `` prefix and suffix slots wouldn't always receive the correct spacing
- Fixed a bug where `` used `--sl-color-white` instead of the correct design tokens [#407](https://github.com/shoelace-style/shoelace/issues/407)
- Fixed a bug in `` and `` where the escape key would cause parent components to close
- Fixed a race condition bug in `` [#410](https://github.com/shoelace-style/shoelace/issues/410)
- Improved focus trap behavior in `` and ``
- Improved a11y in `` and `` by restoring focus to trigger on close
- Improved a11y in `` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
- Improved a11y in `` by preventing the chevron icon from being announced
- Internal: removed the `options` argument from the modal utility as focus trapping is now handled internally
## 2.0.0-beta.37
- Added `click()` method to ``, ``, and ``
- Added the `activation` attribute to `` to allow for automatic and manual tab activation
- Added `npm run create ` script to scaffold new components faster
- Fixed a bug in `` where events weren't properly cleaned up on disconnect
- Fixed a bug in `` where they wouldn't display after toggling `disabled` off and on again [#391](https://github.com/shoelace-style/shoelace/issues/391)
- Fixed a bug in `` where `show()` and `hide()` would toggle the control when disabled
- Fixed a bug in `` where setting `value` wouldn't update the control
- Fixed a bug in `` where tabs that are initially disabled wouldn't receive the indicator on activation [#403](https://github.com/shoelace-style/shoelace/issues/403)
- Fixed incorrect event names for `sl-after-show` and `sl-after-hide` in ``
- Improved a11y for disabled buttons that are rendered as links
- Improved a11y for `` by adding the correct `role` attribute
- Improved a11y for ``, ``, ``, and `` so labels and helper text are read properly by screen readers
- Removed `sl-show`, `sl-hide`, `sl-after-show`, `sl-after-hide` events from `` (the color picker's visibility cannot be controlled programmatically so these shouldn't have been exposed; the dropdown events now bubble up so you can listen for those instead)
- Reworked `` so it doesn't require light DOM styles
## 2.0.0-beta.36
- 🚨 BREAKING: renamed `setFocus()` to `focus()` in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab
- 🚨 BREAKING: renamed `removeFocus()` to `blur()` in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab
- Added `click()` method to ``
- Fixed a bug where toggling `open` on `` would skip the transition
- Fixed a bug where `` could be opened when disabled
- Fixed a bug in `` that caused erratic slider behaviors [#388](https://github.com/shoelace-style/shoelace/issues/388) [#389](https://github.com/shoelace-style/shoelace/issues/389)
- Fixed a bug where `` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
- Renamed `components.json` to `metadata.json`
- Updated to the prerelease versions of LitElement and lit-html
- Updated to Bootstrap Icons 1.4.1
## 2.0.0-beta.35
- Fixed a bug in `` where `sl-cancel` and `sl-finish` events would never fire
- Fixed a bug where `` wouldn't always transition properly
- Fixed a bug where using `` inside a shadow root would break keyboard selections [#382](https://github.com/shoelace-style/shoelace/issues/382)
- Fixed a bug where toggling `multiple` in `` would lead to a stale display label
- Fixed a bug in `` where changing `placement` could result in the active tab indicator being drawn a few pixels off
- Fixed a bug in `` where link buttons threw an error on focus, blur, and click
- Improved `@watch` decorator to run after update instead of during
- Updated `` checked icon to `check` instead of `check2`
- Upgraded the status of `` from experimental to stable
## 2.0.0-beta.34
This release changes the way components are registered if you're [cherry picking](/getting-started/installation?id=cherry-picking) or [using a bundler](/getting-started/installation?id=bundling). This recommendation came from the LitElement team and simplifies Shoelace's dependency graph. It also eliminates the need to call a `register()` function before using each component.
From now on, importing a component will register it automatically. The caveat is that bundlers may not tree shake the library properly if you import from `@shoelace-style/shoelace`, so the recommendation is to import components and utilities from their corresponding files instead.
- 🚨 BREAKING: removed `all.shoelace.js` (use `shoelace.js` instead)
- 🚨 BREAKING: component modules now have a side effect, so bundlers may not tree shake properly when importing from `@shoelace-style/shoelace` (see the [installation page](/getting-started/installation?id=bundling) for more details and how to update)
- Added `sl-clear` event to ``
- Fixed a bug where dynamically changing menu items in `` would cause the display label to be blank [#374](https://github.com/shoelace-style/shoelace/discussions/374)
- Fixed a bug where setting the `value` attribute or property on `` and `