add breadcrumb + breadcrumb item

2026-01-12 04:09:12 +00:00 · 2021-09-01 09:06:19 -04:00
parent 5bd7bfb4ce
commit f5ba173156
11 changed files with 708 additions and 254 deletions
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -14,6 +14,8 @@
  - [Alert](/components/alert)
  - [Avatar](/components/avatar)
  - [Badge](/components/badge)
+  - [Breadcrumb](/components/breadcrumb)
+  - [Breadcrumb Item](/components/breadcrumb-item)
  - [Button](/components/button)
  - [Button Group](/components/button-group)
  - [Card](/components/card)
--- a/docs/components/breadcrumb-item.md
+++ b/docs/components/breadcrumb-item.md
@@ -0,0 +1,20 @@
+# Breadcrumb Item
+
+[component-header:sl-breadcrumb-item]
+
+Breadcrumb Items are used inside breadcrumbs to represent different links.
+
+```html preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
+    Home
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+?> Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
+
+[component-metadata:sl-breadcrumb-item]
--- a/docs/components/breadcrumb.md
+++ b/docs/components/breadcrumb.md
@@ -0,0 +1,132 @@
+# Breadcrumb
+
+[component-header:sl-breadcrumb]
+
+Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
+
+Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
+
+```html preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Women's</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Shirts &amp; Tops</sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+## Examples
+
+### Breadcrumb Links
+
+By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
+
+For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
+
+```html preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item href="https://example.com/home">
+    Homepage
+  </sl-breadcrumb-item>
+
+  <sl-breadcrumb-item href="https://example.com/home/services">
+    Our Services
+  </sl-breadcrumb-item>
+
+  <sl-breadcrumb-item href="https://example.com/home/services/digital">
+    Digital Media
+  </sl-breadcrumb-item>
+
+  <sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">
+    Web Design
+  </sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+### Custom Separators
+
+Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
+
+```html preview
+<sl-breadcrumb>
+  <sl-icon name="dot" slot="separator" id="dotty"></sl-icon>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
+</sl-breadcrumb>
+
+<br>
+
+<sl-breadcrumb>
+  <sl-icon name="arrow-right" slot="separator"></sl-icon>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
+</sl-breadcrumb>
+
+<br>
+
+<sl-breadcrumb>
+  <span slot="separator">/</span>
+  <sl-breadcrumb-item>First</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Third</sl-breadcrumb-item> 
+</sl-breadcrumb>
+```
+
+### Prefixes
+
+Use the `prefix` slot to add content before any breadcrumb item.
+
+```html preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item>
+    <sl-icon slot="prefix" name="house"></sl-icon>
+    Home
+  </sl-breadcrumb-item>
+  <sl-breadcrumb-item>Articles</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+### Suffixes
+
+Use the `suffix` slot to add content after any breadcrumb item.
+
+```html preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
+  <sl-breadcrumb-item>
+    Security
+    <sl-icon slot="suffix" name="shield-lock"></sl-icon>
+  </sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+### With Dropdowns
+
+Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
+
+```html preview
+<sl-breadcrumb>
+  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
+  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
+  <sl-breadcrumb-item>
+    Web Design
+    <sl-dropdown slot="suffix">
+      <sl-button slot="trigger" size="small" circle>
+        <sl-icon label="More options" name="three-dots"></sl-icon>
+      </sl-button>
+      <sl-menu>
+        <sl-menu-item checked>Web Design</sl-menu-item>
+        <sl-menu-item>Web Development</sl-menu-item>
+        <sl-menu-item>Marketing</sl-menu-item>
+      </sl-menu>
+    </sl-dropdown>    
+  </sl-breadcrumb-item>
+</sl-breadcrumb>
+```
+
+[component-metadata:sl-breadcrumb]
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis

 ## Next

+- Added `<sl-breadcrumb>` and `<sl-breadcrumb-item>` 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)

@@ -18,21 +19,21 @@ This release changes the way focus states are applied to elements. In browsers t
 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 `sl-radio-group` (fieldsets are now hidden by default; use `fieldset` to show them)
- 🚨 BREAKING: removed `--focus-ring` custom property from `sl-input`, `sl-select`, `sl-tab` for consistency with other form controls
- Added `--swatch-size` custom property to `sl-color-picker`
- Added `date` to `sl-input` as a supported `type`
+- 🚨 BREAKING: removed the `no-fieldset` property from `<sl-radio-group>` (fieldsets are now hidden by default; use `fieldset` to show them)
+- 🚨 BREAKING: removed `--focus-ring` custom property from `<sl-input>`, `<sl-select>`, `<sl-tab>` for consistency with other form controls
+- Added `--swatch-size` custom property to `<sl-color-picker>`
+- Added `date` to `<sl-input>` 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 `sl-color-picker` where the opacity slider wasn't showing the current color
+- Fixed a bug in `<sl-color-picker>` 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 `sl-tab-group` didn't select the next/previous tab in vertical placements
- Improved size of `sl-color-picker`
- Improved icon contrast in `sl-input`
- Improved contrast of `sl-switch`
+- Fixed a bug where pressing up/down in `<sl-tab-group>` didn't select the next/previous tab in vertical placements
+- Improved size of `<sl-color-picker>`
+- Improved icon contrast in `<sl-input>`
+- Improved contrast of `<sl-switch>`
 - Improved `:focus-visible` behavior in many components
- Removed elevation from `sl-color-picker` when rendered inline
+- Removed elevation from `<sl-color-picker>` 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
@@ -64,27 +65,27 @@ This change applies to all design tokens that implement a color. Refer to the [c
 - 🚨 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 `sl-alert`, `sl-badge`, `sl-button`, and `sl-tag` (use `neutral` instead)
+- 🚨 BREAKING: removed `info` variant from `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` (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 `sl-tab-group` (use `--track-color` instead)
- 🚨 BREAKING: changed the default value for `effect` to `none` in `sl-skeleton` (use `sheen` to restore the original behavior)
+- 🚨 BREAKING: removed `--tabs-border-color` from `<sl-tab-group>` (use `--track-color` instead)
+- 🚨 BREAKING: changed the default value for `effect` to `none` in `<sl-skeleton>` (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 `sl-select`
+- Added a console error that appears when menu items have duplicate values in `<sl-select>`
 - Added CodePen link to code examples
- Added `prefix` and `suffix` slots to `sl-select` [#501](https://github.com/shoelace-style/shoelace/pull/501)
- Added `--indicator-color` custom property to `sl-tab-group`
+- Added `prefix` and `suffix` slots to `<sl-select>` [#501](https://github.com/shoelace-style/shoelace/pull/501)
+- Added `--indicator-color` custom property to `<sl-tab-group>`
 - 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 `sl-menu` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
- Fixed a bug in `sl-radio-group` where clicking a radio button would cause the wrong control to be focused
- Fixed a bug in `sl-button` and `sl-icon-button` where an unintended `ref` attribute was present
+- Fixed a bug in `<sl-menu>` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
+- Fixed a bug in `<sl-radio-group>` where clicking a radio button would cause the wrong control to be focused
+- Fixed a bug in `<sl-button>` and `<sl-icon-button>` 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 `sl-select` where it would erroneously intercept important keyboard shortcuts [#504](https://github.com/shoelace-style/shoelace/issues/504)
+- Fixed a bug in `<sl-select>` 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 `sl-switch` [#490](https://github.com/shoelace-style/shoelace/pull/490)
+- Refactored thumb position logic in `<sl-switch>` [#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
@@ -93,11 +94,11 @@ This release improves how component dependencies are imported. If you've been ch

 - Added "Reflects" column to the properties table
 - Dependencies are now automatically imported for all components
- Fixed a bug where tabbing into `sl-radio-group` would not always focus the checked radio
+- Fixed a bug where tabbing into `<sl-radio-group>` 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 `sl-color-picker` where dragging the grid handle wasn't smooth
+- Fixed a regression in `<sl-color-picker>` where dragging the grid handle wasn't smooth
 - Fixed a bug where slot detection could incorrecly match against slots of child elements [#481](https://github.com/shoelace-style/shoelace/pull/481)
- Fixed a bug in `sl-input` where focus would move to the end of the input when typing in Safari [#480](https://github.com/shoelace-style/shoelace/issues/480)
+- Fixed a bug in `<sl-input>` 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
@@ -108,13 +109,13 @@ This is a lot more intuitive and makes it easier to activate animations imperati

 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 `sl-animation` (use `play` to start and stop the animation instead)
- 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `sl-animation` (use the `currentTime` property instead)
- 🚨 BREAKING: removed the `close-on-select` attribute from `sl-dropdown` (use `stay-open-on-select` instead)
- Added the `currentTime` property to `sl-animation` to control the current time without methods
- Fixed a bug in `sl-range` where the tooltip wasn't showing in Safari [#477](https://github.com/shoelace-style/shoelace/issues/477)
- Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> in a menu didn't work with click handlers
- Reworked `sl-menu` and `sl-menu-item` to use a roving tab index and improve keyboard accessibility
+- 🚨 BREAKING: removed the `pause` attribute from `<sl-animation>` (use `play` to start and stop the animation instead)
+- 🚨 BREAKING: removed `getCurrentTime()` and `setCurrentTime()` from `<sl-animation>` (use the `currentTime` property instead)
+- 🚨 BREAKING: removed the `close-on-select` attribute from `<sl-dropdown>` (use `stay-open-on-select` instead)
+- Added the `currentTime` property to `<sl-animation>` to control the current time without methods
+- Fixed a bug in `<sl-range>` where the tooltip wasn't showing in Safari [#477](https://github.com/shoelace-style/shoelace/issues/477)
+- Fixed a bug in `<sl-menu>` where pressing <kbd>Enter</kbd> in a menu didn't work with click handlers
+- Reworked `<sl-menu>` and `<sl-menu-item>` 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
@@ -127,13 +128,13 @@ Thanks to an amazing effort by [Pascal Schilp](https://twitter.com/passle_), the

 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 `sl-dialog` and `sl-drawer` (use `sl-request-close` instead) [#471](https://github.com/shoelace-style/shoelace/discussions/471)
+- 🚨 BREAKING: removed the `sl-overlay-click` event from `<sl-dialog>` and `<sl-drawer>` (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 `sl-dialog` and `sl-drawer`
+- Added `sl-request-close` event to `<sl-dialog>` and `<sl-drawer>`
 - Added `dialog.denyClose` and `drawer.denyClose` animations
- Fixed a bug in `sl-color-picker` where setting `value` immediately wouldn't trigger an update
- Fixed a bug in `sl-dialog` and `sl-drawer` where setting `open` intially didn't set a focus trap
+- Fixed a bug in `<sl-color-picker>` where setting `value` immediately wouldn't trigger an update
+- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting `open` intially 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)
@@ -144,24 +145,24 @@ The docs have been updated to use the new `custom-elements.json` file. If you're
 - 🚨 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 `sl-checkbox` where `invalid` did not update properly
- Fixed a bug in `sl-dropdown` where a `keydown` listener wasn't cleaned up properly
- Fixed a bug in `sl-select` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
- Fixed a bug in `sl-select` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457)
- Fixed a bug in `sl-select` where `sl-change` was emitted immediately after connecting to the DOM [#458](https://github.com/shoelace-style/shoelace/issues/458)
- Fixed a bug in `sl-select` where non-printable keys would cause the menu to open
- Fixed a bug in `sl-select` where `invalid` was not always updated properly
+- Fixed a bug in `<sl-checkbox>` where `invalid` did not update properly
+- Fixed a bug in `<sl-dropdown>` where a `keydown` listener wasn't cleaned up properly
+- Fixed a bug in `<sl-select>` where `sl-blur` was emitted prematurely [#456](https://github.com/shoelace-style/shoelace/issues/456)
+- Fixed a bug in `<sl-select>` where no selection with `multiple` resulted in an incorrect value [#457](https://github.com/shoelace-style/shoelace/issues/457)
+- Fixed a bug in `<sl-select>` where `sl-change` was emitted immediately after connecting to the DOM [#458](https://github.com/shoelace-style/shoelace/issues/458)
+- Fixed a bug in `<sl-select>` where non-printable keys would cause the menu to open
+- Fixed a bug in `<sl-select>` 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 `sl-textarea` to get/set scroll position
- Added intial tests for `sl-dialog`, `sl-drawer`, `sl-dropdown`, and `sl-tooltip`
- Fixed a bug in `sl-tab-group` where scrollable tab icons were not displaying correctly
- Fixed a bug in `sl-dialog` and `sl-drawer` where preventing clicks on the overlay no longer worked as described [#452](https://github.com/shoelace-style/shoelace/issues/452)
- Fixed a bug in `sl-dialog` and `sl-drawer` where setting initial focus no longer worked as described [#453](https://github.com/shoelace-style/shoelace/issues/453)
- Fixed a bug in `sl-card` where the `slotchange` listener wasn't attached correctly [#454](https://github.com/shoelace-style/shoelace/issues/454)
+- Added the `scrollPosition()` method to `<sl-textarea>` to get/set scroll position
+- Added intial tests for `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
+- Fixed a bug in `<sl-tab-group>` where scrollable tab icons were not displaying correctly
+- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where preventing clicks on the overlay no longer worked as described [#452](https://github.com/shoelace-style/shoelace/issues/452)
+- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where setting initial focus no longer worked as described [#453](https://github.com/shoelace-style/shoelace/issues/453)
+- Fixed a bug in `<sl-card>` 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)

@@ -176,12 +177,12 @@ Technical reasons aside, canceling these events seldom led to a good user experi
 - 🚨 BREAKING: `sl-show` and `sl-hide` events are no longer cancelable
 - Added Iconoir example to the icon docs
 - Added Web Test Runner
- Added intial tests for `sl-alert` and `sl-details`
+- Added intial tests for `<sl-alert>` and `<sl-details>`
 - Changed the `cancelable` default to `false` for the internal `@event` decorator
- Fixed a bug where toggling `open` stopped working in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-dropdown`, and `sl-tooltip`
- Fixed a bug in `sl-range` 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 `sl-dropdown` 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 `sl-details` to measure heights incorrectly [#445](https://github.com/shoelace-style/shoelace/issues/445)
+- Fixed a bug where toggling `open` stopped working in `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>`
+- Fixed a bug in `<sl-range>` 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 `<sl-dropdown>` 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 `<sl-details>` 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
@@ -194,24 +195,24 @@ CSS animations, on the other hand, have a more reliable `animationend` event. Al

 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 `sl-drawer`
- 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `sl-tab-group`
- 🚨 BREAKING: removed `--hide-duration`, `--hide-timing-function`, `--show-duration`, and `--show-timing-function` custom properties from `sl-tooltip` (use the Animation Registry instead)
+- 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `<sl-drawer>`
+- 🚨 BREAKING: changed `left` and `right` placements to `start` and `end` in `<sl-tab-group>`
+- 🚨 BREAKING: removed `--hide-duration`, `--hide-timing-function`, `--show-duration`, and `--show-timing-function` custom properties from `<sl-tooltip>` (use the Animation Registry instead)
 - Added the Animation Registry
- Fixed a bug where removing `sl-dropdown` from the DOM and adding it back destroyed the popover reference [#443](https://github.com/shoelace-style/shoelace/issues/443)
- Updated animations for `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-dropdown`, and `sl-tooltip` to use the Animation Registry instead of CSS transitions
+- Fixed a bug where removing `<sl-dropdown>` from the DOM and adding it back destroyed the popover reference [#443](https://github.com/shoelace-style/shoelace/issues/443)
+- Updated animations for `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-dropdown>`, and `<sl-tooltip>` 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 `sl-tooltip` so they only apply on hover
+- Improved `--show-delay` and `--hide-delay` behavior in `<sl-tooltip>` so they only apply on hover
 - Removed the internal popover utility

 ## 2.0.0-beta.40

- 🚨 BREAKING: renamed `sl-responsive-embed` to `sl-responsive-media` and added support for images and videos [#436](https://github.com/shoelace-style/shoelace/issues/436)
+- 🚨 BREAKING: renamed `<sl-responsive-embed>` to `<sl-responsive-media>` 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 `sl-dialog` on hide causing it to jump [#424](https://github.com/shoelace-style/shoelace/issues/424)
+- Fixed a bug where the scrollbar would reposition `<sl-dialog>` 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 `sl-progress-ring`
+- Improved a11y in `<sl-progress-ring>`
 - 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
@@ -221,67 +222,67 @@ The most elegant solution I found was to use the [Web Animations API](https://de

 ## 2.0.0-beta.39

- Added experimental `sl-qr-code` component
+- Added experimental `<sl-qr-code>` 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: `sl-radio` components must be located inside an `sl-radio-group` for proper accessibility [#218](https://github.com/shoelace-style/shoelace/issues/218)
- Added `sl-radio-group` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
- Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `sl-drawer` and `sl-dialog` [#409](https://github.com/shoelace-style/shoelace/issues/409)
- Fixed a bug where `sl-menu-item` prefix and suffix slots wouldn't always receive the correct spacing
- Fixed a bug where `sl-badge` used `--sl-color-white` instead of the correct design tokens [#407](https://github.com/shoelace-style/shoelace/issues/407)
- Fixed a bug in `sl-dialog` and `sl-drawer` where the escape key would cause parent components to close
- Fixed a race condition bug in `sl-icon` [#410](https://github.com/shoelace-style/shoelace/issues/410)
- Improved focus trap behavior in `sl-dialog` and `sl-drawer`
- Improved a11y in `sl-dialog` and `sl-drawer` by restoring focus to trigger on close
- Improved a11y in `sl-radio` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
- Improved a11y in `sl-select` by preventing the chevron icon from being announced
+- 🚨 BREAKING: `<sl-radio>` components must be located inside an `<sl-radio-group>` for proper accessibility [#218](https://github.com/shoelace-style/shoelace/issues/218)
+- Added `<sl-radio-group>` component [#218](https://github.com/shoelace-style/shoelace/issues/218)
+- Added `--header-spacing`, `--body-spacing`, and `--footer-spacing` custom properties to `<sl-drawer>` and `<sl-dialog>` [#409](https://github.com/shoelace-style/shoelace/issues/409)
+- Fixed a bug where `<sl-menu-item>` prefix and suffix slots wouldn't always receive the correct spacing
+- Fixed a bug where `<sl-badge>` used `--sl-color-white` instead of the correct design tokens [#407](https://github.com/shoelace-style/shoelace/issues/407)
+- Fixed a bug in `<sl-dialog>` and `<sl-drawer>` where the escape key would cause parent components to close
+- Fixed a race condition bug in `<sl-icon>` [#410](https://github.com/shoelace-style/shoelace/issues/410)
+- Improved focus trap behavior in `<sl-dialog>` and `<sl-drawer>`
+- Improved a11y in `<sl-dialog>` and `<sl-drawer>` by restoring focus to trigger on close
+- Improved a11y in `<sl-radio>` with Windows high contrast mode [#215](https://github.com/shoelace-style/shoelace/issues/215)
+- Improved a11y in `<sl-select>` 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 `sl-checkbox`, `sl-radio`, and `sl-switch`
- Added the `activation` attribute to `sl-tab-group` to allow for automatic and manual tab activation
+- Added `click()` method to `<sl-checkbox>`, `<sl-radio>`, and `<sl-switch>`
+- Added the `activation` attribute to `<sl-tab-group>` to allow for automatic and manual tab activation
 - Added `npm run create <tag>` script to scaffold new components faster
- Fixed a bug in `sl-tooltip` where events weren't properly cleaned up on disconnect
- Fixed a bug in `sl-tooltip` 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 `sl-details` where `show()` and `hide()` would toggle the control when disabled
- Fixed a bug in `sl-color-picker` where setting `value` wouldn't update the control
- Fixed a bug in `sl-tab-group` 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 `sl-details`
+- Fixed a bug in `<sl-tooltip>` where events weren't properly cleaned up on disconnect
+- Fixed a bug in `<sl-tooltip>` 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 `<sl-details>` where `show()` and `hide()` would toggle the control when disabled
+- Fixed a bug in `<sl-color-picker>` where setting `value` wouldn't update the control
+- Fixed a bug in `<sl-tab-group>` 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 `<sl-details>`
 - Improved a11y for disabled buttons that are rendered as links
- Improved a11y for `sl-button-group` by adding the correct `role` attribute
- Improved a11y for `sl-input`, `sl-range`, `sl-select`, and `sl-textarea` so labels and helper text are read properly by screen readers
- Removed `sl-show`, `sl-hide`, `sl-after-show`, `sl-after-hide` events from `sl-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-group` so it doesn't require light DOM styles
+- Improved a11y for `<sl-button-group>` by adding the correct `role` attribute
+- Improved a11y for `<sl-input>`, `<sl-range>`, `<sl-select>`, and `<sl-textarea>` so labels and helper text are read properly by screen readers
+- Removed `sl-show`, `sl-hide`, `sl-after-show`, `sl-after-hide` events from `<sl-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-group>` 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 `sl-button`
- Fixed a bug where toggling `open` on `sl-drawer` would skip the transition
- Fixed a bug where `sl-color-picker` could be opened when disabled
- Fixed a bug in `sl-color-picker` 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 `sl-details` wouldn't always render the correct height when open initially [#357](https://github.com/shoelace-style/shoelace/issues/357)
+- Added `click()` method to `<sl-button>`
+- Fixed a bug where toggling `open` on `<sl-drawer>` would skip the transition
+- Fixed a bug where `<sl-color-picker>` could be opened when disabled
+- Fixed a bug in `<sl-color-picker>` 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 `<sl-details>` 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 `sl-animation` where `sl-cancel` and `sl-finish` events would never fire
- Fixed a bug where `sl-alert` wouldn't always transition properly
- Fixed a bug where using `sl-menu` inside a shadow root would break keyboard selections [#382](https://github.com/shoelace-style/shoelace/issues/382)
- Fixed a bug where toggling `multiple` in `sl-select` would lead to a stale display label
- Fixed a bug in `sl-tab-group` where changing `placement` could result in the active tab indicator being drawn a few pixels off
- Fixed a bug in `sl-button` where link buttons threw an error on focus, blur, and click
+- Fixed a bug in `<sl-animation>` where `sl-cancel` and `sl-finish` events would never fire
+- Fixed a bug where `<sl-alert>` wouldn't always transition properly
+- Fixed a bug where using `<sl-menu>` inside a shadow root would break keyboard selections [#382](https://github.com/shoelace-style/shoelace/issues/382)
+- Fixed a bug where toggling `multiple` in `<sl-select>` would lead to a stale display label
+- Fixed a bug in `<sl-tab-group>` where changing `placement` could result in the active tab indicator being drawn a few pixels off
+- Fixed a bug in `<sl-button>` where link buttons threw an error on focus, blur, and click
 - Improved `@watch` decorator to run after update instead of during
- Updated `sl-menu-item` checked icon to `check` instead of `check2`
- Upgraded the status of `sl-resize-observer` from experimental to stable
+- Updated `<sl-menu-item>` checked icon to `check` instead of `check2`
+- Upgraded the status of `<sl-resize-observer>` from experimental to stable

 ## 2.0.0-beta.34

@@ -291,35 +292,35 @@ From now on, importing a component will register it automatically. The caveat is

 - 🚨 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 `sl-select`
- Fixed a bug where dynamically changing menu items in `sl-select` 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 `sl-input` and `sl-textarea` would trigger validation too soon
- Fixed the margin in `sl-menu-label` to align with menu items
- Fixed `autofocus` attributes in `sl-input` and `sl-textarea`
- Improved types for `autocapitalize` in `sl-input` and `sl-textarea`
+- Added `sl-clear` event to `<sl-select>`
+- Fixed a bug where dynamically changing menu items in `<sl-select>` 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 `<sl-input>` and `<sl-textarea>` would trigger validation too soon
+- Fixed the margin in `<sl-menu-label>` to align with menu items
+- Fixed `autofocus` attributes in `<sl-input>` and `<sl-textarea>`
+- Improved types for `autocapitalize` in `<sl-input>` and `<sl-textarea>`
 - Reverted the custom `@tag` decorator in favor of `@customElement` to enable auto-registration

 ## 2.0.0-beta.33

 - Fixed a bug where link buttons could have incorrect `target`, `download`, and `rel` props
- Fixed `aria-label` and `aria-labelledby` props in `sl-dialog` and `sl-drawer`
- Fixed `tabindex` attribute in `sl-menu`
- Fixed a bug in `sl-select` where tags would always render as pills
- Fixed a bug in `sl-button` where calling `setFocus()` would throw an error
+- Fixed `aria-label` and `aria-labelledby` props in `<sl-dialog>` and `<sl-drawer>`
+- Fixed `tabindex` attribute in `<sl-menu>`
+- Fixed a bug in `<sl-select>` where tags would always render as pills
+- Fixed a bug in `<sl-button>` where calling `setFocus()` would throw an error

 ## 2.0.0-beta.32

 - Added tag name maps so TypeScript can identify Shoelace elements [#371](https://github.com/shoelace-style/shoelace/pull/371)
 - Fixed a bug where the active tab indicator wouldn't render properly on tabs styled with `flex-end` [#355](https://github.com/shoelace-style/shoelace/issues/355)
- Fixed a bug where `sl-change` wasn't emitted by `sl-checkbox` or `sl-switch` [#370](https://github.com/shoelace-style/shoelace/issues/370)
- Fixed a bug where some props weren't being watched correctly in `sl-alert` and `sl-color-picker`
+- Fixed a bug where `sl-change` wasn't emitted by `<sl-checkbox>` or `<sl-switch>` [#370](https://github.com/shoelace-style/shoelace/issues/370)
+- Fixed a bug where some props weren't being watched correctly in `<sl-alert>` and `<sl-color-picker>`
 - Improved `@watch` decorator 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](https://github.com/shoelace-style/shoelace/pull/362)
- Fixed a bug where the `open` attribute on `sl-details` would prevent it from opening [#357](https://github.com/shoelace-style/shoelace/issues/357)
+- Add touch support to `<sl-rating>` [#362](https://github.com/shoelace-style/shoelace/pull/362)
+- Fixed a bug where the `open` attribute on `<sl-details>` would prevent it from opening [#357](https://github.com/shoelace-style/shoelace/issues/357)
 - Fixed event detail type parsing so component class names are shown instead of `default`

 ## 2.0.0-beta.30
@@ -331,11 +332,11 @@ From now on, importing a component will register it automatically. The caveat is

 **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 `symbol` property from `sl-rating` and reverted to `getSymbol` for optimal flexibility
+- 🚨 BREAKING: removed the `symbol` property from `<sl-rating>` and reverted to `getSymbol` for optimal flexibility
 - Added `vscode.html-custom-data.json` to the build to support IntelliSense (see [the usage section](/getting-started/usage#code-completion) for details)
 - Added a base style to prevent FOUC before components are defined
 - Fixed bug where TypeScript types weren't being generated [#364](https://github.com/shoelace-style/shoelace/pull/364)
- Improved vertical padding in `sl-tooltip`
+- Improved vertical padding in `<sl-tooltip>`
 - Moved chunk files into a separate folder
 - Reverted menu item active styles
 - Updated esbuild to 0.8.54
@@ -351,16 +352,16 @@ This change in tooling addresses a number of longstanding bugs and limitations.
 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()` and `getEasingNames()` methods from `sl-animation` (you can import them from `utilities/animation.js` instead)
- 🚨 BREAKING: removed the `sl-icon-library` component since it required imperative initialization (you can import the `registerIconLibrary()` function from `utilities/icon-library.js` instead)
- 🚨 BREAKING: removed the experimental `sl-theme` component due to limitations (you should set the `sl-theme-{name}` class on the `<body>` instead)
+- 🚨 BREAKING: removed `getAnimationNames()` and `getEasingNames()` methods from `<sl-animation>` (you can import them from `utilities/animation.js` instead)
+- 🚨 BREAKING: removed the `<sl-icon-library>` component since it required imperative initialization (you can import the `registerIconLibrary()` function from `utilities/icon-library.js` instead)
+- 🚨 BREAKING: removed the experimental `<sl-theme>` component due to technical limitations (you should set the `sl-theme-{name}` class on the `<body>` instead)
 - 🚨 BREAKING: moved the base stylesheet from `dist/shoelace.css` to `dist/themes/base.css`
 - 🚨 BREAKING: moved `icons` into `assets/icons` to make future assets easier to colocate
- 🚨 BREAKING: changed `getSymbol` property in `sl-rating` to `symbol` (it now accepts a string or a function that returns an icon name)
+- 🚨 BREAKING: changed `getSymbol` property in `<sl-rating>` to `symbol` (it now accepts a string or a function that returns an icon name)
 - 🚨 BREAKING: renamed `setAssetPath()` to `setBasePath()` and added the ability to set the library's base path with a `data-shoelace` attribute (`setBasePath()` is exported from `utilities/base-path.js`)
- Fixed `min` and `max` types in `sl-input` to allow numbers and strings [#330](https://github.com/shoelace-style/shoelace/issues/330)
- Fixed a bug where `sl-checkbox`, `sl-radio`, and `sl-switch` controls would shrink with long labels [#325](https://github.com/shoelace-style/shoelace/issues/325)
- Fixed a bug in `sl-select` where the dropdown menu wouldn't reposition when the box resized [#340](https://github.com/shoelace-style/shoelace/issues/340)
+- Fixed `min` and `max` types in `<sl-input>` to allow numbers and strings [#330](https://github.com/shoelace-style/shoelace/issues/330)
+- Fixed a bug where `<sl-checkbox>`, `<sl-radio>`, and `<sl-switch>` controls would shrink with long labels [#325](https://github.com/shoelace-style/shoelace/issues/325)
+- Fixed a bug in `<sl-select>` where the dropdown menu wouldn't reposition when the box resized [#340](https://github.com/shoelace-style/shoelace/issues/340)
 - Fixed a bug where ignoring clicks and clicking the overlay would prevent the escape key from closing the dialog/drawer [#344](https://github.com/shoelace-style/shoelace/pull/344)
 - Removed the lazy loading dist (importing `shoelace.js` will load and register all components now)
 - Switched from Stencil to Shoemaker
@@ -369,17 +370,17 @@ The component API remains the same except for the changes noted below. Thanks fo

 ## 2.0.0-beta.27

- Added `handle-icon` slot to `sl-image-comparer` [#311](https://github.com/shoelace-style/shoelace/issues/311)
- Added `label` and `helpText` props and slots to `sl-range` [#318](https://github.com/shoelace-style/shoelace/issues/318)
+- Added `handle-icon` slot to `<sl-image-comparer>` [#311](https://github.com/shoelace-style/shoelace/issues/311)
+- Added `label` and `helpText` props and slots to `<sl-range>` [#318](https://github.com/shoelace-style/shoelace/issues/318)
 - Added "Integrating with NextJS" tutorial to the docs, courtesy of [crutchcorn](https://github.com/crutchcorn)
- Added `content` slot to `sl-tooltip` [#322](https://github.com/shoelace-style/shoelace/pull/322)
- Fixed a bug in `sl-select` where removing a tag would toggle the dropdown
- Fixed a bug in `sl-input` and `sl-textarea` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
- Fixed a bug in `sl-details` where hidden elements would receive focus when tabbing [#323](https://github.com/shoelace-style/shoelace/issues/323)
- Fixed a bug in `sl-icon` where `sl-error` would only be emitted for network failures [#326](https://github.com/shoelace-style/shoelace/pull/326)
- Reduced the default line-height for `sl-tooltip`
- Updated `sl-menu-item` focus styles
- Updated `sl-select` so tags will wrap when `multiple` is true
+- Added `content` slot to `<sl-tooltip>` [#322](https://github.com/shoelace-style/shoelace/pull/322)
+- Fixed a bug in `<sl-select>` where removing a tag would toggle the dropdown
+- Fixed a bug in `<sl-input>` and `<sl-textarea>` where the input might not exist when the value watcher is called [#313](https://github.com/shoelace-style/shoelace/issues/313)
+- Fixed a bug in `<sl-details>` where hidden elements would receive focus when tabbing [#323](https://github.com/shoelace-style/shoelace/issues/323)
+- Fixed a bug in `<sl-icon>` where `sl-error` would only be emitted for network failures [#326](https://github.com/shoelace-style/shoelace/pull/326)
+- Reduced the default line-height for `<sl-tooltip>`
+- Updated `<sl-menu-item>` focus styles
+- Updated `<sl-select>` so tags will wrap when `multiple` is true
 - Updated to Stencil 2.4.0

 ## 2.0.0-beta.26
@@ -390,16 +391,16 @@ The component API remains the same except for the changes noted below. Thanks fo
  - Animation and easing names are now camelcase (e.g. `easeInOut` instead of `ease-in-out`)
 - Added initial E2E tests [#169](https://github.com/shoelace-style/shoelace/pull/169)
 - Added the `FocusOptions` argument to all components that have a `setFocus()` method
- Added `sl-initial-focus` event to `sl-dialog` and `sl-drawer` so focus can be customized to a specific element
- Added `close-button` part to `sl-tab` so the close button can be customized
- Added `scroll-button` part to `sl-tab-group` so the scroll buttons can be customized
+- Added `sl-initial-focus` event to `<sl-dialog>` and `<sl-drawer>` so focus can be customized to a specific element
+- Added `close-button` part to `<sl-tab>` so the close button can be customized
+- Added `scroll-button` part to `<sl-tab-group>` so the scroll buttons can be customized
 - Fixed a bug where `sl-hide` would be emitted twice when closing an alert with `hide()`
- Fixed a bug in `sl-color-picker` where the toggle button was smaller than the preview button in Safari
- Fixed a bug in `sl-tab-group` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
- Fixed a bug in `sl-tab-group` where removing tabs would throw an error
- Fixed a bug in `sl-alert`, `sl-dialog`, `sl-drawer`, `sl-select`, and `sl-tag` where the close button's base wasn't exported so it couldn't be styled
- Removed `text` type from `sl-badge` as it was erroneously copied and never had styles
- Updated `sl-tab-group` so the `active` property is reflected to its attribute
+- Fixed a bug in `<sl-color-picker>` where the toggle button was smaller than the preview button in Safari
+- Fixed a bug in `<sl-tab-group>` where activating a nested tab group didn't work properly [#299](https://github.com/shoelace-style/shoelace/issues/299)
+- Fixed a bug in `<sl-tab-group>` where removing tabs would throw an error
+- Fixed a bug in `<sl-alert>`, `<sl-dialog>`, `<sl-drawer>`, `<sl-select>`, and `<sl-tag>` where the close button's base wasn't exported so it couldn't be styled
+- Removed `text` type from `<sl-badge>` as it was erroneously copied and never had styles
+- Updated `<sl-tab-group>` so the `active` property is reflected to its 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

@@ -412,103 +413,103 @@ The component API remains the same except for the changes noted below. Thanks fo
  - 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](https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/))
- 🚨 BREAKING: Refactored `sl-select` to improve accessibility [#216](https://github.com/shoelace-style/shoelace/issues/216)
-  - Removed the internal `sl-input` because it was causing problems with a11y and virtual keyboards
+- 🚨 BREAKING: Refactored `<sl-select>` to improve accessibility [#216](https://github.com/shoelace-style/shoelace/issues/216)
+  - Removed the internal `<sl-input>` because it was causing problems with a11y and virtual keyboards
  - Removed `input`, `prefix` and `suffix` parts
- 🚨 BREAKING: Removed `copy-button` part from `sl-color-picker` since copying is now done by clicking the preview
- Added `getFormattedValue()` method to `sl-color-picker` so you can retrieve the current value in any format
- Added visual separators between solid buttons in `sl-button-group`
- Added `help-text` attribute to `sl-input`, `sl-textarea`, and `sl-select`
- Fixed a bug where moving the mouse while `sl-dropdown` is closing would remove focus from the trigger
- Fixed a bug where `sl-menu-item` didn't set a default color in the dark theme
- Fixed a bug where `sl-color-picker` preview wouldn't update in Safari
+- 🚨 BREAKING: Removed `copy-button` part from `<sl-color-picker>` since copying is now done by clicking the preview
+- Added `getFormattedValue()` method to `<sl-color-picker>` so you can retrieve the current value in any format
+- Added visual separators between solid buttons in `<sl-button-group>`
+- Added `help-text` attribute to `<sl-input>`, `<sl-textarea>`, and `<sl-select>`
+- Fixed a bug where moving the mouse while `<sl-dropdown>` is closing would remove focus from the trigger
+- Fixed a bug where `<sl-menu-item>` didn't set a default color in the dark theme
+- Fixed a bug where `<sl-color-picker>` preview wouldn't update in Safari
 - Fixed a bug where removing an icon's `name` or `src` wouldn't remove the previously rendered SVG [#285](https://github.com/shoelace-style/shoelace/issues/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-tooltip` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
- Improved slot detection in `sl-card`, `sl-dialog`, and `sl-drawer`
+- Improved accessibility in `<sl-tooltip>` by allowing escape to dismiss it [#219](https://github.com/shoelace-style/shoelace/issues/219)
+- Improved slot detection in `<sl-card>`, `<sl-dialog>`, and `<sl-drawer>`
 - Made `@types/resize-observer-browser` a 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`, and `sl-select`
- Removed `sl-blur` and `sl-focus` events from `sl-menu` since menus can't have focus as of 2.0.0-beta.22
- Updated `sl-spinner` so the indicator is more obvious
+- Refactored internal label + help text logic into a functional component used by `<sl-input>`, `<sl-textarea>`, and `<sl-select>`
+- Removed `sl-blur` and `sl-focus` events from `<sl-menu>` since menus can't have focus as of 2.0.0-beta.22
+- Updated `<sl-spinner>` so the indicator is more obvious
 - Updated to Bootstrap Icons 1.2.2

 ## 2.0.0-beta.24

- Added `sl-format-date` component
- Added `indeterminate` state to `sl-progress-bar` [#274](https://github.com/shoelace-style/shoelace/issues/274)
- Added `--track-color`, `--indicator-color`, and `--label-color` to `sl-progress-bar` [#276](https://github.com/shoelace-style/shoelace/issues/276)
- Added `allow-scripts` attribute to `sl-include` [#280](https://github.com/shoelace-style/shoelace/issues/280)
- Fixed a bug where `sl-menu-item` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
- Fixed a bug where `sl-dialog` and `sl-drawer` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
- Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `sl-form` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
- Fixed drag handle orientation in `sl-image-comparer`
- Restyled `sl-spinner` so the track is visible and the indicator is smaller.
+- Added `<sl-format-date>` component
+- Added `indeterminate` state to `<sl-progress-bar>` [#274](https://github.com/shoelace-style/shoelace/issues/274)
+- Added `--track-color`, `--indicator-color`, and `--label-color` to `<sl-progress-bar>` [#276](https://github.com/shoelace-style/shoelace/issues/276)
+- Added `allow-scripts` attribute to `<sl-include>` [#280](https://github.com/shoelace-style/shoelace/issues/280)
+- Fixed a bug where `<sl-menu-item>` color variable was incorrect [#272](https://github.com/shoelace-style/shoelace/issues/272)
+- Fixed a bug where `<sl-dialog>` and `<sl-drawer>` would emit the `sl-hide` event twice [#275](https://github.com/shoelace-style/shoelace/issues/275)
+- Fixed a bug where calling `event.preventDefault()` on certain form elements wouldn't prevent `<sl-form>` from submitting [#277](https://github.com/shoelace-style/shoelace/issues/277)
+- Fixed drag handle orientation in `<sl-image-comparer>`
+- Restyled `<sl-spinner>` so the track is visible and the indicator is smaller.
 - Removed `resize-observer-polyfill` in favor of `@types/resize-observer-browser` since all target browsers support `ResizeObserver`
- Upgraded the status of `sl-form`, `sl-image-comparer`, and `sl-include` from experimental to stable
+- Upgraded the status of `<sl-form>`, `<sl-image-comparer>`, and `<sl-include>` from experimental to stable

 ## 2.0.0-beta.23

- Added `sl-format-number` component
- Added `sl-relative-time` component
- Added `closable` attribute to `sl-tab`
- Added experimental `sl-resize-observer` utility
- Added experimental `sl-theme` utility and updated theming documentation
- Fixed a bug where `sl-menu-item` wouldn't render properly in the dark theme
- Fixed a bug where `sl-select` would show an autocomplete menu
+- Added `<sl-format-number>` component
+- Added `<sl-relative-time>` component
+- Added `closable` attribute to `<sl-tab>`
+- Added experimental `<sl-resize-observer>` utility
+- Added experimental `<sl-theme>` utility and updated theming documentation
+- Fixed a bug where `<sl-menu-item>` wouldn't render properly in the dark theme
+- Fixed a bug where `<sl-select>` would 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-menu` and `sl-menu-item` to improve accessibility by using proper focus states [#217](https://github.com/shoelace-style/shoelace/issues/217)
-  - Moved `tabindex` from `sl-menu` to `sl-menu-item`
-  - Removed the `active` attribute from `sl-menu-item` because synthetic focus states are bad for accessibility
-  - Removed the `sl-activate` and `sl-deactivate` events from `sl-menu-item` (listen for `focus` and `blur` instead)
-  - Updated `sl-select` so keyboard navigation still works
- Added `no-scroll-controls` attribute to `sl-tab-group` [#253](https://github.com/shoelace-style/shoelace/issues/253)
- Fixed a bug where setting `open` initially wouldn't show `sl-dialog` or `sl-drawer` [#255](https://github.com/shoelace-style/shoelace/issues/255)
+- 🚨 BREAKING: Refactored `<sl-menu>` and `<sl-menu-item>` to improve accessibility by using proper focus states [#217](https://github.com/shoelace-style/shoelace/issues/217)
+  - Moved `tabindex` from `<sl-menu>` to `<sl-menu-item>`
+  - Removed the `active` attribute from `<sl-menu-item>` because synthetic focus states are bad for accessibility
+  - Removed the `sl-activate` and `sl-deactivate` events from `<sl-menu-item>` (listen for `focus` and `blur` instead)
+  - Updated `<sl-select>` so keyboard navigation still works
+- Added `no-scroll-controls` attribute to `<sl-tab-group>` [#253](https://github.com/shoelace-style/shoelace/issues/253)
+- Fixed a bug where setting `open` initially wouldn't show `<sl-dialog>` or `<sl-drawer>` [#255](https://github.com/shoelace-style/shoelace/issues/255)
 - Fixed a bug where `disabled` could 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](https://github.com/shoelace-style/shoelace/issues/252)
+- Fixed a bug where hoisted dropdowns would render in the wrong position when placed inside `<sl-dialog>` [#252](https://github.com/shoelace-style/shoelace/issues/252)
 - Fixed a bug where boolean aria attributes didn't explicitly set `true|false` string values in the DOM
- Fixed a bug where `aria-describedby` was never set on tooltip targets in `sl-tooltip`
- Fixed a bug where setting `position` on `sl-image-comparer` wouldn'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-button` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers [#220](https://github.com/shoelace-style/shoelace/issues/220)
- Improved `sl-dropdown` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
- Refactored position logic to remove an unnecessary state variable in `sl-image-comparer`
+- Fixed a bug where `aria-describedby` was never set on tooltip targets in `<sl-tooltip>`
+- Fixed a bug where setting `position` on `<sl-image-comparer>` wouldn'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-button>` accessibility by encouraging proper use of `label` and hiding the internal icon from screen readers [#220](https://github.com/shoelace-style/shoelace/issues/220)
+- Improved `<sl-dropdown>` accessibility by attaching `aria-haspopup` and `aria-expanded` to the slotted trigger
+- Refactored position logic to remove an unnecessary state variable in `<sl-image-comparer>`
 - Refactored design tokens to use `rem` instead of `px` for input height and spacing [#221](https://github.com/shoelace-style/shoelace/issues/221)
 - Removed `console.log` from modal utility
 - Updated to Stencil 2.2.0

 ## 2.0.0-beta.21

- Added `label` slot to `sl-input`, `sl-select`, and `sl-textarea` [#248](https://github.com/shoelace-style/shoelace/issues/248)
- Added `label` slot to `sl-dialog` and `sl-drawer`
- Added experimental `sl-include` component
- Added status code to the `sl-error` event in `sl-icon`
- Fixed a bug where initial transitions didn't show in `sl-dialog` and `sl-drawer` [#247](https://github.com/shoelace-style/shoelace/issues/247)
+- Added `label` slot to `<sl-input>`, `<sl-select>`, and `<sl-textarea>` [#248](https://github.com/shoelace-style/shoelace/issues/248)
+- Added `label` slot to `<sl-dialog>` and `<sl-drawer>`
+- Added experimental `<sl-include>` component
+- Added status code to the `sl-error` event in `<sl-icon>`
+- Fixed a bug where initial transitions didn't show in `<sl-dialog>` and `<sl-drawer>` [#247](https://github.com/shoelace-style/shoelace/issues/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-picker` grid and slider handles [#246](https://github.com/shoelace-style/shoelace/issues/246)
- Refactored `sl-icon` request logic and removed unused cache map
- Reworked show/hide logic in `sl-alert`, `sl-dialog`, and `sl-drawer` to not use reflow hacks and the `hidden` attribute
- Reworked slot logic in `sl-card`, `sl-dialog`, and `sl-drawer`
+- Improved `<sl-color-picker>` grid and slider handles [#246](https://github.com/shoelace-style/shoelace/issues/246)
+- Refactored `<sl-icon>` request logic and removed unused cache map
+- Reworked show/hide logic in `<sl-alert>`, `<sl-dialog>`, and `<sl-drawer>` to not use reflow hacks and the `hidden` attribute
+- Reworked slot logic in `<sl-card>`, `<sl-dialog>`, and `<sl-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](#why-did-event-names-change))
- Added support for dropdowns and non-icon elements to `sl-input`
- Added `spellcheck` attribute to `sl-input`
- Added `sl-icon-library` to allow custom icon library registration
- Added `library` attribute to `sl-icon` and `sl-icon-button`
+- Added support for dropdowns and non-icon elements to `<sl-input>`
+- Added `spellcheck` attribute to `<sl-input>`
+- Added `<sl-icon-library>` to allow custom icon library registration
+- Added `library` attribute to `<sl-icon>` and `<sl-icon-button>`
 - Added "Integrating with Rails" tutorial to the docs, courtesy of [ParamagicDev](https://github.com/ParamagicDev)
- Fixed a bug where `sl-progress-ring` rendered incorrectly when zoomed in Safari [#227](https://github.com/shoelace-style/shoelace/issues/227)
- Fixed a bug where tabbing into slotted elements closes `sl-dropdown` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
- Fixed a bug where scroll anchoring caused undesirable scrolling when `sl-details` are grouped
+- Fixed a bug where `<sl-progress-ring>` rendered incorrectly when zoomed in Safari [#227](https://github.com/shoelace-style/shoelace/issues/227>)
+- Fixed a bug where tabbing into slotted elements closes `<sl-dropdown>` when used in a shadow root [#223](https://github.com/shoelace-style/shoelace/issues/223)
+- Fixed a bug where scroll anchoring caused undesirable scrolling when `<sl-details>` are grouped

 ### Why did event names change?

@@ -525,40 +526,40 @@ The following pages demonstrate why this change was necessary.

 ## 2.0.0-beta.19

- Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable
- Added toast notifications through the `toast()` method on `sl-alert`
- Fixed a bug where mouse events would bubble up when `sl-button` was disabled, causing tooltips to erroneously appear
- Fixed a bug where pressing space would open and immediately close `sl-dropdown` panels in Firefox
- Fixed a bug where `sl-tooltip` would throw an error on init
+- Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `<sl-select>` to make the input customizable
+- Added toast notifications through the `toast()` method on `<sl-alert>`
+- Fixed a bug where mouse events would bubble up when `<sl-button>` was disabled, causing tooltips to erroneously appear
+- Fixed a bug where pressing space would open and immediately close `<sl-dropdown>` panels in Firefox
+- Fixed a bug where `<sl-tooltip>` would throw an error on init
 - Fixed a bug in custom keyframes animation example
- Refactored clear logic in `sl-input`
+- Refactored clear logic in `<sl-input>`

 ## 2.0.0-beta.18

- Added `name` and `invalid` attribute to `sl-color-picker`
- Added support for form submission and validation to `sl-color-picker`
+- Added `name` and `invalid` attribute to `<sl-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-embed` component
- 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-select` was disabled
- Fixed a bug where `slblur` and `slfocus` were emitted twice in `sl-select`
- Fixed a bug where clicking on `sl-menu` wouldn't focus it
+- Added `<sl-responsive-embed>` component
+- 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-select>` was disabled
+- Fixed a bug where `slblur` and `slfocus` were emitted twice in `<sl-select>`
+- Fixed a bug where clicking on `<sl-menu>` wouldn't focus it
 - Fixed a bug in the popover utility where `onAfterShow` would fire too soon
- Fixed a bug where `bottom` and `right` placements didn't render properly in `sl-tab-group`
- Improved keyboard logic in `sl-dropdown`, `sl-menu`, and `sl-select`
- Updated `sl-animation` to stable
+- Fixed a bug where `bottom` and `right` placements didn't render properly in `<sl-tab-group>`
+- Improved keyboard logic in `<sl-dropdown>`, `<sl-menu>`, and `<sl-select>`
+- Updated `<sl-animation>` to stable
 - Updated to Stencil 2.0 (you may need to purge `node_modules` and run `npm install` after pulling)
 - Updated entry points in `package.json` to reflect new filenames generated by Stencil 2

 ## 2.0.0-beta.17

- Added `minlength` and `spellcheck` attributes to `sl-textarea`
- Fixed a bug where clicking a tag in `sl-select` wouldn't toggle the menu
- Fixed a bug where options where `sl-select` options weren't always visible or scrollable
- Fixed a bug where setting `null` on `sl-input`, `sl-textarea`, or `sl-select` would throw an error
- Fixed a bug where `role` was on the wrong element and aria attribute weren't explicit in `sl-checkbox`, `sl-switch`, and `sl-radio`
- Fixed a bug where dynamically adding/removing a slot wouldn't work as expected in `sl-card`, `sl-dialog`, and `sl-drawer`
- Fixed a bug where the value wasn't updated and events weren't emitted when using `setRangeText` in `sl-input` and `sl-textarea`
+- Added `minlength` and `spellcheck` attributes to `<sl-textarea>`
+- Fixed a bug where clicking a tag in `<sl-select>` wouldn't toggle the menu
+- Fixed a bug where options where `<sl-select>` options weren't always visible or scrollable
+- Fixed a bug where setting `null` on `<sl-input>`, `<sl-textarea>`, or `<sl-select>` would throw an error
+- Fixed a bug where `role` was on the wrong element and aria attribute weren't explicit in `<sl-checkbox>`, `<sl-switch>`, and `<sl-radio>`
+- Fixed a bug where dynamically adding/removing a slot wouldn't work as expected in `<sl-card>`, `<sl-dialog>`, and `<sl-drawer>`
+- Fixed a bug where the value wasn't updated and events weren't emitted when using `setRangeText` in `<sl-input>` and `<sl-textarea>`
 - Optimized `hasSlot` utility by using a simpler selector
 - Updated Bootstrap Icons to 1.0.0 with many icons redrawn and improved
 - Updated contribution guidelines
@@ -566,65 +567,65 @@ The following pages demonstrate why this change was necessary.
 **Form validation has been reworked and is much more powerful now!**

 - The `invalid` attribute now reflects the control's validity as determined by the browser's constraint validation API
- Added `required` to `sl-checkbox`, `sl-select`, and `sl-switch`
+- Added `required` to `<sl-checkbox>`, `<sl-select>`, and `<sl-switch>`
 - Added `reportValidity()` and `setCustomValidity()` methods to all form controls
- Added validation checking for custom and native form controls to `sl-form`
- Added `novalidate` attribute to `sl-form` to disable validation
+- Added validation checking for custom and native form controls to `<sl-form>`
+- Added `novalidate` attribute to `<sl-form>` to disable validation
 - Removed the `valid` attribute 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

- Added `hoist` attribute to `sl-color-picker`, `sl-dropdown`, and `sl-select` to work around panel clipping
- Added `sl-format-bytes` utility component
- Added `clearable` and `required` props to `sl-select`
- Added `slclear` event to `sl-input`
+- Added `hoist` attribute to `<sl-color-picker>`, `<sl-dropdown>`, and `<sl-select>` to work around panel clipping
+- Added `<sl-format-bytes>` utility component
+- Added `clearable` and `required` props to `<sl-select>`
+- Added `slclear` event to `<sl-input>`
 - Added keyboard support to the preview resizer in the docs
- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
- Fixed a bug where `--sl-input-color-*` custom properties had no effect on `sl-input` and `sl-textarea`
- Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
+- Fixed a bug where the `aria-selected` state was incorrect in `<sl-menu-item>`
+- Fixed a bug where custom properties applied to `<sl-tooltip>` didn't affect show/hide transitions
+- Fixed a bug where `--sl-input-color-*` custom properties had no effect on `<sl-input>` and `<sl-textarea>`
+- Refactored `<sl-dropdown>` and `<sl-tooltip>` to use positioner elements so panels/tooltips can be customized easier

 ## 2.0.0-beta.15

 - Added `image-comparer` component
- Added `--width`, `--height`, and `--thumb-size` custom props to `sl-switch`
+- Added `--width`, `--height`, and `--thumb-size` custom props to `<sl-switch>`
 - Fixed an `aria-labelledby` attribute typo in a number of components
- Fixed a bug where the `change` event wasn't updating the value in `sl-input`
- Fixed a bug where `sl-color-picker` had the wrong border color in the dark theme
- Fixed a bug where `sl-menu-item` had the wrong color in dark mode when disabled
+- Fixed a bug where the `change` event wasn't updating the value in `<sl-input>`
+- Fixed a bug where `<sl-color-picker>` had the wrong border color in the dark theme
+- Fixed a bug where `<sl-menu-item>` had 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`
+- 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-color` and `--sl-panel-border-color` tokens
- Added `--tabs-border-color` custom property to `sl-tab-group`
- Added `--track-color` custom property to `sl-range`
- Added `tag` part to `sl-select`
+- Added `--tabs-border-color` custom property to `<sl-tab-group>`
+- Added `--track-color` custom property to `<sl-range>`
+- Added `tag` part to `<sl-select>`
 - Updated `package.json` so 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 `slshow` and `slhide` would be emitted twice in some components
 - Fixed a bug where `custom-elements/index.d.ts` was 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-bar` used the wrong part name internally for `indicator`
- Removed background color from `sl-menu`
+- Fixed a bug where the text color was being erroneously set in `<sl-progress-ring>`
+- Fixed a bug where `<sl-progress-bar>` used the wrong part name internally for `indicator`
+- Removed background color from `<sl-menu>`
 - Updated to Stencil 1.17.3

 ## 2.0.0-beta.13

- Added `slactivate` and `sldeactivate` events to `sl-menu-item`
- Added experimental `sl-animation` component
+- Added `slactivate` and `sldeactivate` events to `<sl-menu-item>`
+- Added experimental `<sl-animation>` component
 - 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](http://github.com/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-menu` to `sl-dropdown`
+- Moved scrolling logic from `<sl-menu>` to `<sl-dropdown>`

 ## 2.0.0-beta.12

@@ -636,7 +637,7 @@ The following pages demonstrate why this change was necessary.

 - Added button group component
 - Fixed icon button alignment
- Fixed a bug where focus visible observer wasn't removed from `sl-details`
+- Fixed a bug where focus visible observer wasn't removed from `<sl-details>`
 - Replaced the deprecated `componentDidUnload` lifecycle method with `disconnectedCallback` to prevent issues with frameworks

 ## 2.0.0-beta.10
@@ -657,10 +658,10 @@ The following pages demonstrate why this change was necessary.
 - 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
+- Fixed a bug where the color picker wouldn't parse uppercase values
 - Removed the `no-footer` attribute from dialog and drawer (slot detection is automatic, so the attribute is not required)
 - Removed `close-icon` slot from alert
- Replaced make-shift icon buttons with `sl-icon-button` in alert, dialog, drawer, and tag
+- Replaced make-shift icon buttons with `<sl-icon-button>` in alert, dialog, drawer, and tag
 - Updated Stencil to 1.17.1
 - Switched to jsDelivr for better CDN performance

--- a/src/components/breadcrumb-item/breadcrumb-item.styles.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.styles.ts
@@ -0,0 +1,85 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+import { focusVisibleSelector } from '../../internal/focus-visible';
+
+export default css`
+  ${componentStyles}
+
+  :host {
+    display: inline-flex;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--sl-font-sans);
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-semibold);
+    color: rgb(var(--sl-color-neutral-600));
+    line-height: var(--sl-line-height-normal);
+    white-space: nowrap;
+  }
+
+  .breadcrumb-item__label {
+    display: inline-block;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-decoration: none;
+    color: inherit;
+    background: none;
+    border: none;
+    border-radius: var(--sl-border-radius-medium);
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    transition: var(--sl-transition-fast) --color;
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label {
+    color: rgb(var(--sl-color-primary-600));
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {
+    color: rgb(var(--sl-color-primary-500));
+  }
+
+  :host(:not(:last-of-type)) .breadcrumb-item__label:active {
+    color: rgb(var(--sl-color-primary-600));
+  }
+
+  .breadcrumb-item__label${focusVisibleSelector} {
+    outline: none;
+    box-shadow: var(--sl-focus-ring);
+  }
+
+  .breadcrumb-item__prefix,
+  .breadcrumb-item__suffix {
+    display: none;
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {
+    display: inline-flex;
+    margin-right: var(--sl-spacing-x-small);
+  }
+
+  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {
+    display: inline-flex;
+    margin-left: var(--sl-spacing-x-small);
+  }
+
+  :host(:last-of-type) .breadcrumb-item__separator {
+    display: none;
+  }
+
+  .breadcrumb-item__separator {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 var(--sl-spacing-x-small);
+    user-select: none;
+  }
+`;
--- a/src/components/breadcrumb-item/breadcrumb-item.test.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.test.ts
@@ -0,0 +1,13 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+// import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlBreadcrumbItem from './breadcrumb-item';
+
+describe('<sl-breadcrumb-item>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <sl-breadcrumb-item></sl-breadcrumb-item> `);
+
+    expect(el).to.exist;
+  });
+});
--- a/src/components/breadcrumb-item/breadcrumb-item.ts
+++ b/src/components/breadcrumb-item/breadcrumb-item.ts
@@ -0,0 +1,92 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit-html/directives/class-map';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { hasSlot } from '../../internal/slot';
+import styles from './breadcrumb-item.styles';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - The breadcrumb item's label.
+ * @slot prefix - An optional prefix, usually an icon or icon button.
+ * @slot suffix - An optional suffix, usually an icon or icon button.
+ * @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
+ * you want to change it for all items in the group, set the separator on `<sl-breadcrumb>` instead.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The breadcrumb item's label.
+ * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
+ * @csspart separator - The container that wraps the separator slot.
+ */
+@customElement('sl-breadcrumb-item')
+export default class SlBreadcrumbItem extends LitElement {
+  static styles = styles;
+
+  @state() hasPrefix = false;
+  @state() hasSuffix = false;
+
+  /** Optional link to direct the user to when the breadcrumb item is activated. */
+  @property() href: string;
+
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  @property() target: '_blank' | '_parent' | '_self' | '_top';
+
+  handleSlotChange() {
+    this.hasPrefix = hasSlot(this, 'prefix');
+    this.hasSuffix = hasSlot(this, 'suffix');
+  }
+
+  render() {
+    const isLink = this.href ? true : false;
+
+    return html`
+      <div
+        part="base"
+        class=${classMap({
+          'breadcrumb-item': true,
+          'breadcrumb-item--has-prefix': this.hasPrefix,
+          'breadcrumb-item--has-suffix': this.hasSuffix
+        })}
+      >
+        <span part="prefix" class="breadcrumb-item__prefix">
+          <slot name="prefix" @slotchange=${this.handleSlotChange}></slot>
+        </span>
+
+        ${isLink
+          ? html`
+              <a
+                part="label"
+                class="breadcrumb-item__label breadcrumb-item__label--link"
+                href="${this.href}"
+                target="${this.target}"
+                rel=${ifDefined(this.target ? 'noreferrer noopener' : undefined)}
+              >
+                <slot></slot>
+              </a>
+            `
+          : html`
+              <button part="label" type="button" class="breadcrumb-item__label breadcrumb-item__label--button">
+                <slot></slot>
+              </button>
+            `}
+
+        <span part="suffix" class="breadcrumb-item__suffix">
+          <slot name="suffix" @slotchange=${this.handleSlotChange}></slot>
+        </span>
+
+        <span part="separator" class="breadcrumb-item__separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-breadcrumb-item': SlBreadcrumbItem;
+  }
+}
--- a/src/components/breadcrumb/breadcrumb.styles.ts
+++ b/src/components/breadcrumb/breadcrumb.styles.ts
@@ -0,0 +1,12 @@
+import { css } from 'lit';
+import componentStyles from '../../styles/component.styles';
+
+export default css`
+  ${componentStyles}
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+`;
--- a/src/components/breadcrumb/breadcrumb.test.ts
+++ b/src/components/breadcrumb/breadcrumb.test.ts
@@ -0,0 +1,13 @@
+import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+// import sinon from 'sinon';
+
+import '../../../dist/shoelace.js';
+import type SlBreadcrumb from './breadcrumb';
+
+describe('<sl-breadcrumb>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html` <sl-breadcrumb></sl-breadcrumb> `);
+
+    expect(el).to.exist;
+  });
+});
--- a/src/components/breadcrumb/breadcrumb.ts
+++ b/src/components/breadcrumb/breadcrumb.ts
@@ -0,0 +1,82 @@
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import styles from './breadcrumb.styles';
+import type SlBreadcrumbItem from '../breadcrumb-item/breadcrumb-item';
+
+import '../icon/icon';
+
+/**
+ * @since 2.0
+ * @status stable
+ *
+ * @slot - One or more breadcrumb items to display.
+ * @slot separator - The separator to use between breadcrumb items.
+ *
+ * @dependency sl-icon
+ *
+ * @csspart base - The component's base wrapper.
+ */
+@customElement('sl-breadcrumb')
+export default class SlBreadcrumb extends LitElement {
+  static styles = styles;
+
+  @query('slot') defaultSlot: HTMLSlotElement;
+  @query('slot[name="separator"]') separatorSlot: HTMLSlotElement;
+
+  /**
+   * The label to use for the breadcrumb control. This will not be shown, but it will be announced by screen readers and
+   * other assistive devices.
+   */
+  @property() label = 'Breadcrumb';
+
+  // Generates a clone of the separator element to use for each breadcrumb item
+  private getSeparator() {
+    const separator = this.separatorSlot.assignedElements({ flatten: true })[0] as HTMLElement;
+
+    // Clone it, remove ids, and slot it
+    const clone = separator.cloneNode(true) as HTMLElement;
+    [clone, ...clone.querySelectorAll('[id]')].map(el => el.removeAttribute('id'));
+    clone.slot = 'separator';
+
+    return clone;
+  }
+
+  handleSlotChange() {
+    const items = [...this.defaultSlot.assignedElements({ flatten: true })].filter(
+      item => item.tagName.toLowerCase() === 'sl-breadcrumb-item'
+    ) as SlBreadcrumbItem[];
+
+    items.map((item, index) => {
+      // Append separators to each item if they don't already have one
+      const separator = item.querySelector('[slot="separator"]') as HTMLElement;
+      if (!separator) {
+        item.append(this.getSeparator());
+      }
+
+      // The last breadcrumb item is the "current page"
+      if (index === items.length - 1) {
+        item.setAttribute('aria-current', 'page');
+      } else {
+        item.removeAttribute('aria-current');
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <nav part="base" class="breadcrumb" aria-label=${this.label}>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </nav>
+
+      <slot name="separator" hidden aria-hidden="true">
+        <sl-icon name="chevron-right" library="system"></sl-icon>
+      </slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'sl-breadcrumb': SlBreadcrumb;
+  }
+}
--- a/src/shoelace.ts
+++ b/src/shoelace.ts
@@ -3,6 +3,8 @@ export { default as SlAlert } from './components/alert/alert';
 export { default as SlAnimation } from './components/animation/animation';
 export { default as SlAvatar } from './components/avatar/avatar';
 export { default as SlBadge } from './components/badge/badge';
+export { default as SlBreadcrumb } from './components/breadcrumb/breadcrumb';
+export { default as SlBreadcrumbItem } from './components/breadcrumb-item/breadcrumb-item';
 export { default as SlButton } from './components/button/button';
 export { default as SlButtonGroup } from './components/button-group/button-group';
 export { default as SlCard } from './components/card/card';