36 KiB
		
	
	
	
	
			
		
		
	
	Changelog
Shoelace follows Semantic Versioning. 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: renamed 
sl-responsive-embedtosl-responsive-mediaand added support for images and videos #436 - Fixed a bug where setting properties before an element was defined would render incorrectly #425
 - Fixed a bug that caused all modules to be imported when cherry picking certain components #439
 - Fixed a bug where the scrollbar would reposition 
sl-dialogon hide causing it to jump #424 - Fixed a bug that prevented the project from being built in a Windows environment
 - Improved a11y in 
sl-progress-ring - Removed 
src/utilities/index.tsto prevent tree-shaking confusion (please import utilities directly from their respective modules) - Updated to Bootstrap Icons 1.5.0
 - Updated React docs to use 
@shoelace-style/react - Updated NextJS docs #434
 - Updated TypeScript to 4.2.4
 
2.0.0-beta.39
- Added experimental 
sl-qr-codecomponent - Added 
systemicon library and updated all components to use this instead of the default icon library #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: 
sl-radiocomponents must be located inside ansl-radio-groupfor proper accessibility #218 - Added 
sl-radio-groupcomponent #218 - Added 
--header-spacing,--body-spacing, and--footer-spacingcustom properties tosl-drawerandsl-dialog#409 - Fixed a bug where 
sl-menu-itemprefix and suffix slots wouldn't always receive the correct spacing - Fixed a bug where 
sl-badgeused--sl-color-whiteinstead of the correct design tokens #407 - Fixed a bug in 
sl-dialogandsl-drawerwhere the escape key would cause parent components to close - Fixed a race condition bug in 
sl-icon#410 - Improved focus trap behavior in 
sl-dialogandsl-drawer - Improved a11y in 
sl-dialogandsl-drawerby restoring focus to trigger on close - Improved a11y in 
sl-radiowith Windows high contrast mode #215 - Improved a11y in 
sl-selectby preventing the chevron icon from being announced - Internal: removed the 
optionsargument from the modal utility as focus trapping is now handled internally 
2.0.0-beta.37
- Added 
click()method tosl-checkbox,sl-radio, andsl-switch - Added the 
activationprop tosl-tab-groupto allow for automatic and manual tab activation - Added 
npm run create <tag>script to scaffold new components faster - Fixed a bug in 
sl-tooltipwhere events weren't properly cleaned up on disconnect - Fixed a bug in 
sl-tooltipwhere they wouldn't display after togglingdisabledoff and on again #391 - Fixed a bug in 
sl-detailswhereshow()andhide()would toggle the control when disabled - Fixed a bug in 
sl-color-pickerwhere settingvaluewouldn't update the control - Fixed a bug in 
sl-tab-groupwhere tabs that are initially disabled wouldn't receive the indicator on activation #403 - Fixed incorrect event names for 
sl-after-showandsl-after-hideinsl-details - Improved a11y for disabled buttons that are rendered as links
 - Improved a11y for 
sl-button-groupby adding the correctroleattribute - Improved a11y for 
sl-input,sl-range,sl-select, andsl-textareaso labels and helper text are read properly by screen readers - Removed 
sl-show,sl-hide,sl-after-show,sl-after-hideevents fromsl-color-picker(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 
sl-button-groupso it doesn't require light DOM styles 
2.0.0-beta.36
- 🚨 BREAKING: renamed 
setFocus()tofocus()in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab - 🚨 BREAKING: renamed 
removeFocus()toblur()in button, checkbox, input, menu item, radio, range, rating, select, switch, and tab - Added 
click()method tosl-button - Fixed a bug where toggling 
openonsl-drawerwould skip the transition - Fixed a bug where 
sl-color-pickercould be opened when disabled - Fixed a bug in 
sl-color-pickerthat caused erratic slider behaviors #388 #389 - Fixed a bug where 
sl-detailswouldn't always render the correct height when open initially #357 - Renamed 
components.jsontometadata.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 
sl-animationwheresl-cancelandsl-finishevents would never fire - Fixed a bug where 
sl-alertwouldn't always transition properly - Fixed a bug where using 
sl-menuinside a shadow root would break keyboard selections #382 - Fixed a bug where toggling 
multipleinsl-selectwould lead to a stale display label - Fixed a bug in 
sl-tab-groupwhere changingplacementcould result in the active tab indicator being drawn a few pixels off - Fixed a bug in 
sl-buttonwhere link buttons threw an error on focus, blur, and click - Improved 
@watchdecorator to run after update instead of during - Updated 
sl-menu-itemchecked icon tocheckinstead ofcheck2 - Upgraded the status of 
sl-resize-observerfrom experimental to stable 
2.0.0-beta.34
This release changes the way components are registered if you're cherry picking or using a bundler. 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(useshoelace.jsinstead) - 🚨 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 for more details and how to update) - Added 
sl-clearevent tosl-select - Fixed a bug where dynamically changing menu items in 
sl-selectwould cause the display label to be blank #374 - Fixed a bug where setting the 
valueattribute or property onsl-inputandsl-textareawould trigger validation too soon - Fixed the margin in 
sl-menu-labelto align with menu items - Fixed 
autofocusattributes insl-inputandsl-textarea - Improved types for 
autocapitalizeinsl-inputandsl-textarea - Reverted the custom 
@tagdecorator in favor of@customElementto enable auto-registration 
2.0.0-beta.33
- Fixed a bug where link buttons could have incorrect 
target,download, andrelprops - Fixed 
aria-labelandaria-labelledbyprops insl-dialogandsl-drawer - Fixed 
tabindexprop insl-menu - Fixed a bug in 
sl-selectwhere tags would always render as pills - Fixed a bug in 
sl-buttonwhere callingsetFocus()would throw an error 
2.0.0-beta.32
- Added tag name maps so TypeScript can identify Shoelace elements #371
 - Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with 
flex-end#355 - Fixed a bug where 
sl-changewasn't emitted bysl-checkboxorsl-switch#370 - Fixed a bug where some props weren't being watched correctly in 
sl-alertandsl-color-picker - Improved 
@watchdecorator so watch handlers don't run before the first render - Removed guards that were added due to previous watch handler behavior
 
2.0.0-beta.31
- Add touch support to 
sl-rating#362 - Fixed a bug where the 
openattribute onsl-detailswould prevent it from opening #357 - Fixed event detail type parsing so component class names are shown instead of 
default 
2.0.0-beta.30
- Fix default exports for all components so cherry picking works again #365
 - Revert FOUC base style because it interferes with some framework and custom element use cases
 
2.0.0-beta.29
This release migrates component implementations from Shoemaker to LitElement. Due to feedback from the community, Shoelace will rely on a more heavily tested library for component implementations. This gives you a more solid foundation and reduces my maintenance burden. Thank you for all your comments, concerns, and encouragement! Aside from that, everything else from beta.28 still applies plus the following.
- 🚨 BREAKING: removed the 
symbolprop fromsl-ratingand reverted togetSymbolfor optimal flexibility - Added 
vscode.html-custom-data.jsonto the build to support IntelliSense (see the usage section for details) - Added a base style to prevent FOUC before components are defined
 - Fixed bug where TypeScript types weren't being generated #364
 - Improved vertical padding in 
sl-tooltip - Moved chunk files into a separate folder
 - Reverted menu item active styles
 - Updated esbuild to 0.8.54
 
2.0.0-beta.28
This release includes a major under the hood overhaul of the library and how it's distributed. Until now, Shoelace was developed with Stencil. This release moves to a lightweight tool called Shoemaker, a homegrown utility that provides declarative templating and data binding while reducing the boilerplate required for said features.
This change in tooling addresses a number of longstanding bugs and limitations. It also gives us more control over the library and build process while streamlining development and maintenance. Instead of two different distributions, Shoelace now offers a single, standards-compliant collection of ES modules. This may affect how you install and use the library, so please refer to the installation page for details.
!> Due to the large number of internal changes, I would consider this update to be less stable than previous ones. If you're using Shoelace in a production app, consider holding off until the next beta to allow for more exhaustive testing from the community. Please report any bugs you find on the issue tracker.
The component API remains the same except for the changes noted below. Thanks for your patience as I work diligently to make Shoelace more stable and future-proof. 🙌
- 🚨 BREAKING: removed the custom elements bundle (you can import ES modules directly)
 - 🚨 BREAKING: removed 
getAnimationNames()andgetEasingNames()methods fromsl-animation(you can import them fromutilities/animation.jsinstead) - 🚨 BREAKING: removed the 
sl-icon-librarycomponent since it required imperative initialization (you can import theregisterIconLibrary()function fromutilities/icon-library.jsinstead) - 🚨 BREAKING: removed the experimental 
sl-themecomponent due to limitations (you should set thesl-theme-[name]class on the<body>instead) - 🚨 BREAKING: moved the base stylesheet from 
dist/shoelace.csstodist/themes/base.css - 🚨 BREAKING: moved 
iconsintoassets/iconsto make future assets easier to colocate - 🚨 BREAKING: changed 
getSymbolprop insl-ratingtosymbol(it now accepts a string or a function that returns an icon name) - 🚨 BREAKING: renamed 
setAssetPath()tosetBasePath()and added the ability to set the library's base path with adata-shoelaceattribute (setBasePath()is exported fromutilities/base-path.js) - Fixed 
minandmaxtypes insl-inputto allow numbers and strings #330 - Fixed a bug where 
sl-checkbox,sl-radio, andsl-switchcontrols would shrink with long labels #325 - Fixed a bug in 
sl-selectwhere the dropdown menu wouldn't reposition when the box resized #340 - Fixed a bug where ignoring clicks and clicking the overlay would prevent the escape key from closing the dialog/drawer #344
 - Removed the lazy loading dist (importing 
shoelace.jswill load and register all components now) - Switched from Stencil to Shoemaker
 - Switched to a custom build powered by esbuild
 - Updated to Bootstrap Icons 1.4.0
 
2.0.0-beta.27
- Added 
handle-iconslot tosl-image-comparer#311 - Added 
labelandhelpTextprops and slots tosl-range#318 - Added "Integrating with NextJS" tutorial to the docs, courtesy of crutchcorn
 - Added 
contentslot tosl-tooltip#322 - Fixed a bug in 
sl-selectwhere removing a tag would toggle the dropdown - Fixed a bug in 
sl-inputandsl-textareawhere the input might not exist when the value watcher is called #313 - Fixed a bug in 
sl-detailswhere hidden elements would receive focus when tabbing #323 - Fixed a bug in 
sl-iconwheresl-errorwould only be emitted for network failures #326 - Reduced the default line-height for 
sl-tooltip - Updated 
sl-menu-itemfocus styles - Updated 
sl-selectso tags will wrap whenmultipleis true - Updated to Stencil 2.4.0
 
2.0.0-beta.26
- 🚨 BREAKING: Fixed animations bloat
- Removed ~400 baked-in Animista animations because they were causing ~200KB of bloat (they can still be used with custom keyframes)
 - Reworked animations into a separate module (
@shoelace-style/animations) so it's more maintainable and animations are sync with the latest version of animate.css - Animation and easing names are now camelcase (e.g. 
easeInOutinstead ofease-in-out) 
 - Added initial E2E tests #169
 - Added the 
FocusOptionsargument to all components that have asetFocus()method - Added 
sl-initial-focusevent tosl-dialogandsl-drawerso focus can be customized to a specific element - Added 
close-buttonpart tosl-tabso the close button can be customized - Added 
scroll-buttonpart tosl-tab-groupso the scroll buttons can be customized - Fixed a bug where 
sl-hidewould be emitted twice when closing an alert withhide() - Fixed a bug in 
sl-color-pickerwhere the toggle button was smaller than the preview button in Safari - Fixed a bug in 
sl-tab-groupwhere activating a nested tab group didn't work properly #299 - Fixed a bug in 
sl-tab-groupwhere removing tabs would throw an error - Fixed a bug in 
sl-alert,sl-dialog,sl-drawer,sl-select, andsl-tagwhere the close button's base wasn't exported so it couldn't be styled - Removed 
texttype fromsl-badgeas it was erroneously copied and never had styles - Updated 
sl-tab-groupso theactiveprop is reflected to the attribute - Updated the docs to show dependencies instead of dependents which is much more useful when working with the custom elements bundle
 - Updated to Bootstrap Icons 1.3.0
 
2.0.0-beta.25
- 🚨 BREAKING: Reworked color tokens
- Theme colors are now inspired by Tailwind's professionally-designed color palette
 - Color token variations now range from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
 - Color token variations were inverted, e.g. 50 is lightest and 950 is darkest
 - All component styles were adapted to use the new color tokens, but visual changes are subtle
 - The dark theme was adapted use the new color tokens
 - HSL is no longer used because it is not perceptually uniform (this may be revisited when all browsers support LCH colors)
 
 - 🚨 BREAKING: Refactored 
sl-selectto improve accessibility #216- Removed the internal 
sl-inputbecause it was causing problems with a11y and virtual keyboards - Removed 
input,prefixandsuffixparts 
 - Removed the internal 
 - 🚨 BREAKING: Removed 
copy-buttonpart fromsl-color-pickersince copying is now done by clicking the preview - Added 
getFormattedValue()method tosl-color-pickerso you can retrieve the current value in any format - Added visual separators between solid buttons in 
sl-button-group - Added 
help-textprop tosl-input,sl-textarea, andsl-select - Fixed a bug where moving the mouse while 
sl-dropdownis closing would remove focus from the trigger - Fixed a bug where 
sl-menu-itemdidn't set a default color in the dark theme - Fixed a bug where 
sl-color-pickerpreview wouldn't update in Safari - Fixed a bug where removing an icon's 
nameorsrcwouldn't remove the previously rendered SVG #285 - Fixed a bug where disabled link buttons didn't appear disabled
 - Improved button spacings and added split button example
 - Improved elevation tokens in dark theme
 - Improved accessibility in 
sl-tooltipby allowing escape to dismiss it #219 - Improved slot detection in 
sl-card,sl-dialog, andsl-drawer - Made 
@types/resize-observer-browsera dependency so users don't have to install it manually - Refactored internal label + help text logic into a functional component used by 
sl-input,sl-textarea, andsl-select - Removed 
sl-blurandsl-focusevents fromsl-menusince menus can't have focus as of 2.0.0-beta.22 - Updated 
sl-spinnerso the indicator is more obvious - Updated to Bootstrap Icons 1.2.2
 
2.0.0-beta.24
- Added 
sl-format-datecomponent - Added 
indeterminatestate tosl-progress-bar#274 - Added 
--track-color,--indicator-color, and--label-colortosl-progress-bar#276 - Added 
allow-scriptsprop tosl-include#280 - Fixed a bug where 
sl-menu-itemcolor variable was incorrect #272 - Fixed a bug where 
sl-dialogandsl-drawerwould emit thesl-hideevent twice #275 - Fixed a bug where calling 
event.preventDefault()on certain form elements wouldn't preventsl-formfrom submitting #277 - Fixed drag handle orientation in 
sl-image-comparer - Restyled 
sl-spinnerso the track is visible and the indicator is smaller. - Removed 
resize-observer-polyfillin favor of@types/resize-observer-browsersince all target browsers supportResizeObserver - Upgraded the status of 
sl-form,sl-image-comparer, andsl-includefrom experimental to stable 
2.0.0-beta.23
- Added 
sl-format-numbercomponent - Added 
sl-relative-timecomponent - Added 
closableprop tosl-tab - Added experimental 
sl-resize-observerutility - Added experimental 
sl-themeutility and updated theming documentation - Fixed a bug where 
sl-menu-itemwouldn't render properly in the dark theme - Fixed a bug where 
sl-selectwould show an autocomplete menu - Improved placeholder contrast in dark theme
 - Updated to Boostrap Icons 1.1.0
 - Updated to Stencil 2.3.0
 
2.0.0-beta.22
- 🚨 BREAKING: Refactored 
sl-menuandsl-menu-itemto improve accessibility by using proper focus states #217- Moved 
tabindexfromsl-menutosl-menu-item - Removed the 
activeprop fromsl-menu-itembecause synthetic focus states are bad for accessibility - Removed the 
sl-activateandsl-deactivateevents fromsl-menu-item(listen forfocusandblurinstead) - Updated 
sl-selectso keyboard navigation still works 
 - Moved 
 - Added 
no-scroll-controlsprop tosl-tab-group#253 - Fixed a bug where setting 
openinitially wouldn't showsl-dialogorsl-drawer#255 - Fixed a bug where 
disabledcould be set when buttons are rendered as links - Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside 
sl-dialog#252 - Fixed a bug where boolean aria attributes didn't explicitly set 
true|falsestring values in the DOM - Fixed a bug where 
aria-describedbywas never set on tooltip targets insl-tooltip - Fixed a bug where setting 
positiononsl-image-comparerwouldn't update the divider's position - Fixed a bug where the check icon was announced to screen readers in 
sl-menu-item - Improved 
sl-icon-buttonaccessibility by encouraging proper use oflabeland hiding the internal icon from screen readers #220 - Improved 
sl-dropdownaccessibility by attachingaria-haspopupandaria-expandedto the slotted trigger - Refactored position logic to remove an unnecessary state variable in 
sl-image-comparer - Refactored design tokens to use 
reminstead ofpxfor input height and spacing #221 - Removed 
console.logfrom modal utility - Updated to Stencil 2.2.0
 
2.0.0-beta.21
- Added 
labelslot tosl-input,sl-select, andsl-textarea#248 - Added 
labelslot tosl-dialogandsl-drawer - Added experimental 
sl-includecomponent - Added status code to the 
sl-errorevent insl-icon - Fixed a bug where initial transitions didn't show in 
sl-dialogandsl-drawer#247 - Fixed a bug where indeterminate checkboxes would maintain the indeterminate state when toggled
 - Fixed a bug where concurrent active modals (i.e. dialog, drawer) would try to steal focus from each other
 - Improved 
sl-color-pickergrid and slider handles #246 - Refactored 
sl-iconrequest logic and removed unused cache map - Reworked show/hide logic in 
sl-alert,sl-dialog, andsl-drawerto not use reflow hacks and thehiddenattribute - Reworked slot logic in 
sl-card,sl-dialog, andsl-drawer - Updated to Popper 2.5.3 to address a fixed position bug in Firefox
 
2.0.0-beta.20
- 🚨 BREAKING: Transformed all Shoelace events to lowercase (details)
 - Added support for dropdowns and non-icon elements to 
sl-input - Added 
spellcheckprop tosl-input - Added 
sl-icon-libraryto allow custom icon library registration - Added 
libraryprop tosl-iconandsl-icon-button - Added "Integrating with Rails" tutorial to the docs, courtesy of ParamagicDev
 - Fixed a bug where 
sl-progress-ringrendered incorrectly when zoomed in Safari #227 - Fixed a bug where tabbing into slotted elements closes 
sl-dropdownwhen used in a shadow root #223 - Fixed a bug where scroll anchoring caused undesirable scrolling when 
sl-detailsare grouped 
Why did event names change?
Shoelace events were updated to use a lowercase, kebab-style naming convention. Instead of event names such as slChange and slAfterShow, you'll need to use sl-change and sl-after-show now.
This change was necessary to address a critical issue in frameworks that use DOM templates with declarative event bindings such as <sl-button @slChange="handler">. Due to HTML's case-insensitivity, browsers translate attribute names to lowercase, turning @slChange into @slchange, making it impossible to listen to slChange.
While declarative event binding is a non-standard feature, not supporting it would make Shoelace much harder to use in popular frameworks. To accommodate those users and provide a better developer experience, we decided to change the naming convention while Shoelace is still in beta.
The following pages demonstrate why this change was necessary.
2.0.0-beta.19
- Added 
input,label,prefix,clear-button,suffix,help-textexported parts tosl-selectto make the input customizable - Added toast notifications through the 
toast()method onsl-alert - Fixed a bug where mouse events would bubble up when 
sl-buttonwas disabled, causing tooltips to erroneously appear - Fixed a bug where pressing space would open and immediately close 
sl-dropdownpanels in Firefox - Fixed a bug where 
sl-tooltipwould throw an error on init - Fixed a bug in custom keyframes animation example
 - Refactored clear logic in 
sl-input 
2.0.0-beta.18
- Added 
nameandinvalidprop tosl-color-picker - Added support for form submission and validation to 
sl-color-picker - Added touch support to demo resizers in the docs
 - Added 
sl-responsive-embedcomponent - Fixed a bug where swapping an animated element wouldn't restart the animation in 
sl-animation - Fixed a bug where the cursor was incorrect when 
sl-selectwas disabled - Fixed a bug where 
slblurandslfocuswere emitted twice insl-select - Fixed a bug where clicking on 
sl-menuwouldn't focus it - Fixed a bug in the popover utility where 
onAfterShowwould fire too soon - Fixed a bug where 
bottomandrightplacements didn't render properly insl-tab-group - Improved keyboard logic in 
sl-dropdown,sl-menu, andsl-select - Updated 
sl-animationto stable - Updated to Stencil 2.0 (you may need to purge 
node_modulesand runnpm installafter pulling) - Updated entry points in 
package.jsonto reflect new filenames generated by Stencil 2 
2.0.0-beta.17
- Added 
minlengthandspellcheckattributes tosl-textarea - Fixed a bug where clicking a tag in 
sl-selectwouldn't toggle the menu - Fixed a bug where options where 
sl-selectoptions weren't always visible or scrollable - Fixed a bug where setting 
nullonsl-input,sl-textarea, orsl-selectwould throw an error - Fixed a bug where 
rolewas on the wrong element and aria attribute weren't explicit insl-checkbox,sl-switch, andsl-radio - Fixed a bug where dynamically adding/removing a slot wouldn't work as expected in 
sl-card,sl-dialog, andsl-drawer - Fixed a bug where the value wasn't updated and events weren't emitted when using 
setRangeTextinsl-inputandsl-textarea - Optimized 
hasSlotutility by using a simpler selector - Updated Bootstrap Icons to 1.0.0 with many icons redrawn and improved
 - Updated contribution guidelines
 
Form validation has been reworked and is much more powerful now!
- The 
invalidprop now reflects the control's validity as determined by the browser's constraint validation API - Added 
requiredtosl-checkbox,sl-select, andsl-switch - Added 
reportValidity()andsetCustomValidity()methods to all form controls - Added validation checking for custom and native form controls to 
sl-form - Added 
novalidateprop tosl-formto disable validation - Removed the 
validprop from all form controls - Removed valid and invalid design tokens and related styles (you can use your own custom styles to achieve this)
 
2.0.0-beta.16
- Add 
hoistprop tosl-color-picker,sl-dropdown, andsl-selectto work around panel clipping - Add 
sl-format-bytesutility component - Add 
clearableandrequiredprops tosl-select - Add 
slclearevent tosl-input - Added keyboard support to the preview resizer in the docs
 - Fixed a bug where the 
aria-selectedstate was incorrect insl-menu-item - Fixed a bug where custom properties applied to 
sl-tooltipdidn't affect show/hide transitions - Fixed a bug where 
--sl-input-color-*custom properties had no effect onsl-inputandsl-textarea - Refactored 
sl-dropdownandsl-tooltipto use positioner elements so panels/tooltips can be customized easier 
2.0.0-beta.15
- Added 
image-comparercomponent - Added 
--width,--height, and--thumb-sizecustom props tosl-switch - Fixed an 
aria-labelledbyattribute typo in a number of components - Fixed a bug where the 
changeevent wasn't updating the value insl-input - Fixed a bug where 
sl-color-pickerhad the wrong border color in the dark theme - Fixed a bug where 
sl-menu-itemhad the wrong color in dark mode when disabled - Fixed a bug where WebKit's autocomplete styles made inputs looks broken
 - Fixed a bug where aria labels were wrong in 
sl-select - Fixed a bug where clicking the label wouldn't focus the control in 
sl-select 
2.0.0-beta.14
- Added dark theme
 - Added 
--sl-panel-background-colorand--sl-panel-border-colortokens - Added 
--tabs-border-colorcustom property tosl-tab-group - Added 
--track-colorcustom property tosl-range - Added 
tagpart tosl-select - Updated 
package.jsonso custom elements imports can be consumed from the root - Fixed a bug where scrolling dialogs didn't resize properly in Safari
 - Fixed a bug where 
slshowandslhidewould be emitted twice in some components - Fixed a bug where 
custom-elements/index.d.tswas broken due to an unclosed comment (fixed in Stencil 1.17.3) - Fixed bug where inputs were not using border radius tokens
 - Fixed a bug where the text color was being erroneously set in 
sl-progress-ring - Fixed a bug where 
sl-progress-barused the wrong part name internally forindicator - Removed background color from 
sl-menu - Updated to Stencil 1.17.3
 
2.0.0-beta.13
- Added 
slactivateandsldeactivateevents tosl-menu-item - Added experimental 
sl-animationcomponent - Added shields to documentation
 - Fixed a bug where link buttons would have 
type="button" - Fixed a bug where button groups with tooltips experienced an odd spacing issue in Safari
 - Fixed a bug where scrolling in dropdowns/selects didn't work properly on Windows (special thanks to Trendy for helping troubleshoot!)
 - Fixed a bug where selecting a menu item in a dropdown would cause Safari to scroll
 - Fixed a bug where type to select wouldn't accept symbols
 - Moved scrolling logic from 
sl-menutosl-dropdown 
2.0.0-beta.12
- Added support for 
href,target, anddownloadto buttons - Fixed a bug where buttons would have horizontal spacing in Safari
 - Fixed a bug that caused an import resolution error when using Shoelace in a Stencil app
 
2.0.0-beta.11
- Added button group component
 - Fixed icon button alignment
 - Fixed a bug where focus visible observer wasn't removed from 
sl-details - Replaced the deprecated 
componentDidUnloadlifecycle method withdisconnectedCallbackto prevent issues with frameworks 
2.0.0-beta.10
- Added community page to the docs
 - Fixed a bug where many components would erroneously receive an 
idwhen using the custom elements bundle - Fixed a bug where tab groups weren't scrollable with the mouse
 
2.0.0-beta.9
- Added the icon button component
 - Added the skeleton component
 - Added the 
typeToSelectmethod to menu so type-to-select behavior can be controlled externally - Added the 
pulseprop to badge - Fixed a bug where hovering over select showed the wrong cursor
 - Fixed a bug where tabbing into a select control would highlight the label
 - Fixed a bug where tabbing out of a select control wouldn't close it
 - Fixed a bug where closing dropdowns wouldn't give focus back to the trigger
 - Fixed a bug where type-to-select wasn't working after the first letter
 - Fixed a bug where clicking on menu items and dividers would steal focus from the menu
 - Fix a bug where the color picker wouldn't parse uppercase values
 - Removed 
noFooterprop from dialog and drawer (slot detection is automatic, so the prop is not required) - Removed 
close-iconslot from alert - Replaced make-shift icon buttons with 
sl-icon-buttonin alert, dialog, drawer, and tag - Updated Stencil to 1.17.1
 - Switched to jsDelivr for better CDN performance
 
2.0.0-beta.8
- Added the card component
 - Added 
--focus-ringcustom property to tab - Fixed a bug where range tooltips didn't appear on iOS
 - Fixed constructor bindings so they don't break the custom elements bundle
 - Fixed tag color contrast to be AA compliant
 - Fixed a bug that made it difficult to vertically align rating
 - Fixed a bug where dropdowns would always close on mousedown when inside a shadow root
 - Made tag text colors AA compliant
 - Promoted badge to stable
 - Refactored 
:hostvariables and moved non-display props to base elements - Refactored event handler bindings to occur in 
connectedCallbackinstead of the constructor - Refactored scroll locking logic to use 
Setinstead of an array - Updated the custom elements bundle documentation and added bundler examples
 - Upgraded Stencil to 1.17.0-0 (next) to fix custom elements bundle
 
2.0.0-beta.7
- Added links to version 1 resources to the docs
 - Added rating component
 - Fixed a bug where some build files were missing
 - Fixed clearable tags demo
 - Fixed touch icon size in docs
 
2.0.0-beta.6
- Enabled the 
dist-custom-elements-bundleoutput target - Fixed a bug where nested form controls were ignored in 
<sl-form> 
2.0.0-beta.5
- Fixed bug where 
npm installwould fail due to postinstall script - Removed unused dependency
 
2.0.0-beta.4
- Added 
pillvariation to badges - Fixed a bug where all badges had 
pointer-events: none - Fixed 
@sinceprops to show 2.0 instead of 1.0 - Fixed giant cursors in inputs in Safari
 - Fixed color picker input width in Safari
 - Fixed initial transitions for drawer, dialog, and popover consumers
 - Fixed a bug where dialog, dropdown, and drawer would sometimes not transition in on the first open
 - Fixed various documentation typos
 
2.0.0-beta.3
- Fix version in docs
 - Remove custom elements bundle
 
2.0.0-beta.2
- Fix quick start and installation URLs
 - Switch Docsify theme
 - Update line heights tokens
 
2.0.0-beta.1
- Initial release