38 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
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 sl-after-show|hide events would never emit.
CSS animations, on the other hand, have a more reliable animationend event. Alas, we can't use them because @keyframes don't cascade and can't be injected into a shadow DOM via CSS.
The most elegant solution I found was to use the Web Animations API, which offers more control over animations at the expense of customizations being done in JavaScript. Fortunately, through the Animation Registry, you can customize animations globally and/or per component with a minimal amount of code.
- 🚨 BREAKING: changed
leftandrightplacements tostartandendinsl-drawer - 🚨 BREAKING: changed
leftandrightplacements tostartandendinsl-tab-group - Added the Animation Registry
- Fixed a bug where removing
sl-dropdownfrom the DOM and adding it back destroyed the popover reference #443 - Updated animations for
sl-alert,sl-dialog,sl-drawerto use the Animation Registry instead of CSS transitions - Improved a11y by respecting
prefers-reduced-motionfor all show/hide animations
2.0.0-beta.40
- 🚨 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) - 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 - 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