Merge branch 'next' into lit-a11y-update

docs/pages/getting-started/customizing.md

@@ -6,13 +6,13 @@ meta:
 
 # Customizing
 
-Shoelace components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
+Shoelace components can be customized at a high level through design tokens. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of component parts and custom properties to target individual components.
 
 ## Design Tokens
 
 Shoelace makes use of several design tokens to provide a consistent appearance across components. You can customize them and use them in your own application with pure CSS — no preprocessor required.
 
-Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [CSS Parts](#css-parts).
+Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [Component Parts](#component-parts).
 
 Design tokens are accessed through CSS custom properties that are defined in your theme. Because design tokens live at the page level, they're prefixed with `--sl-` to avoid collisions with other libraries.
 
@@ -37,9 +37,9 @@ To customize a design token, simply override it in your stylesheet using a `:roo
 
 Many design tokens are described further along in this documentation. For a complete list, refer to `src/themes/light.css` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/themes/light.css).
 
-## CSS Parts
+## Component Parts
 
-Whereas design tokens offer a high-level way to customize the library, CSS parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
+Whereas design tokens offer a high-level way to customize the library, component parts offer a low-level way to customize individual components. Again, this is done with pure CSS — no preprocessor required.
 
 Shoelace components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose "parts" that can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
 
@@ -76,7 +76,7 @@ At first glance, this approach might seem a bit verbose or even limiting, but it
 
 - Customizations can be made to components with explicit selectors, such as `::part(icon)`, rather than implicit selectors, such as `.button > div > span + .icon`, that are much more fragile.
 
-- The internal structure of a component will likely change as it evolves. By exposing CSS parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
+- The internal structure of a component will likely change as it evolves. By exposing component parts through an API, the internals can be reworked without fear of breaking customizations as long as its parts remain intact.
 
 - It encourages us to think more about how components are designed and how customizations should be allowed before users can take advantage of them. Once we opt a part into the component's API, it's guaranteed to be supported and can't be removed until a major version of the library is released.
 

docs/pages/tokens/more.md

@@ -18,146 +18,146 @@ Currently, the source of design tokens is considered to be [`light.css`](https:/
 
 Focus ring tokens control the appearance of focus rings. Note that form inputs use `--sl-input-focus-ring-*` tokens instead.
 
-| Token                    | Value                                                                                     |
-| ------------------------ | ----------------------------------------------------------------------------------------- |
-| `--sl-focus-ring-color`  | `var(--sl-color-primary-600)` (light theme)<br>`var(--sl-color-primary-700)` (dark theme) |
-| `--sl-focus-ring-style`  | `solid`                                                                                   |
-| `--sl-focus-ring-width`  | `3px`                                                                                     |
-| `--sl-focus-ring`        | `var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color)`        |
-| `--sl-focus-ring-offset` | `1px`                                                                                     |
+| Token                    | Value                                                                                 |
+| ------------------------ | ------------------------------------------------------------------------------------- |
+| `--sl-focus-ring-color`  | var(--sl-color-primary-600) (light theme)<br>var(--sl-color-primary-700) (dark theme) |
+| `--sl-focus-ring-style`  | solid                                                                                 |
+| `--sl-focus-ring-width`  | 3px                                                                                   |
+| `--sl-focus-ring`        | var(--sl-focus-ring-style) var(--sl-focus-ring-width) var(--sl-focus-ring-color)      |
+| `--sl-focus-ring-offset` | 1px                                                                                   |
 
 ## Buttons
 
 Button tokens control the appearance of buttons. In addition, buttons also currently use some form input tokens such as `--sl-input-height-*` and `--sl-input-border-*`. More button tokens may be added in the future to make it easier to style them more independently.
 
-| Token                          | Value                         |
-| ------------------------------ | ----------------------------- |
-| `--sl-button-font-size-small`  | `var(--sl-font-size-x-small)` |
-| `--sl-button-font-size-medium` | `var(--sl-font-size-small)`   |
-| `--sl-button-font-size-large`  | `var(--sl-font-size-medium)`  |
+| Token                          | Value                       |
+| ------------------------------ | --------------------------- |
+| `--sl-button-font-size-small`  | var(--sl-font-size-x-small) |
+| `--sl-button-font-size-medium` | var(--sl-font-size-small)   |
+| `--sl-button-font-size-large`  | var(--sl-font-size-medium)  |
 
 ## Form Inputs
 
 Form input tokens control the appearance of form controls such as [input](/components/input), [select](/components/select), [textarea](/components/textarea), etc.
 
-| Token                                   | Value                              |
-| --------------------------------------- | ---------------------------------- |
-| `--sl-input-height-small`               | `1.875rem` (30px @ 16px base)      |
-| `--sl-input-height-medium`              | `2.5rem` (40px @ 16px base)        |
-| `--sl-input-height-large`               | `3.125rem` (50px @ 16px base)      |
-| `--sl-input-background-color`           | `var(--sl-color-neutral-0)`        |
-| `--sl-input-background-color-hover`     | `var(--sl-input-background-color)` |
-| `--sl-input-background-color-focus`     | `var(--sl-input-background-color)` |
-| `--sl-input-background-color-disabled`  | `var(--sl-color-neutral-100)`      |
-| `--sl-input-border-color`               | `var(--sl-color-neutral-300)`      |
-| `--sl-input-border-color-hover`         | `var(--sl-color-neutral-400)`      |
-| `--sl-input-border-color-focus`         | `var(--sl-color-primary-500)`      |
-| `--sl-input-border-color-disabled`      | `var(--sl-color-neutral-300)`      |
-| `--sl-input-border-width`               | `1px`                              |
-| `--sl-input-required-content`           | `*`                                |
-| `--sl-input-required-content-offset`    | `-2px`                             |
-| `--sl-input-required-content-color`     | `var(--sl-input-label-color)`      |
-| `--sl-input-border-radius-small`        | `var(--sl-border-radius-medium)`   |
-| `--sl-input-border-radius-medium`       | `var(--sl-border-radius-medium)`   |
-| `--sl-input-border-radius-large`        | `var(--sl-border-radius-medium)`   |
-| `--sl-input-font-family`                | `var(--sl-font-sans)`              |
-| `--sl-input-font-weight`                | `var(--sl-font-weight-normal)`     |
-| `--sl-input-font-size-small`            | `var(--sl-font-size-small)`        |
-| `--sl-input-font-size-medium`           | `var(--sl-font-size-medium)`       |
-| `--sl-input-font-size-large`            | `var(--sl-font-size-large)`        |
-| `--sl-input-letter-spacing`             | `var(--sl-letter-spacing-normal)`  |
-| `--sl-input-color`                      | `var(--sl-color-neutral-700)`      |
-| `--sl-input-color-hover`                | `var(--sl-color-neutral-700)`      |
-| `--sl-input-color-focus`                | `var(--sl-color-neutral-700)`      |
-| `--sl-input-color-disabled`             | `var(--sl-color-neutral-900)`      |
-| `--sl-input-icon-color`                 | `var(--sl-color-neutral-500)`      |
-| `--sl-input-icon-color-hover`           | `var(--sl-color-neutral-600)`      |
-| `--sl-input-icon-color-focus`           | `var(--sl-color-neutral-600)`      |
-| `--sl-input-placeholder-color`          | `var(--sl-color-neutral-500)`      |
-| `--sl-input-placeholder-color-disabled` | `var(--sl-color-neutral-600)`      |
-| `--sl-input-spacing-small`              | `var(--sl-spacing-small)`          |
-| `--sl-input-spacing-medium`             | `var(--sl-spacing-medium)`         |
-| `--sl-input-spacing-large`              | `var(--sl-spacing-large)`          |
-| `--sl-input-focus-ring-color`           | `hsl(198.6 88.7% 48.4% / 40%)`     |
-| `--sl-input-focus-ring-offset`          | `0`                                |
+| Token                                   | Value                            |
+| --------------------------------------- | -------------------------------- |
+| `--sl-input-height-small`               | 1.875rem; (30px @ 16px base)     |
+| `--sl-input-height-medium`              | 2.5rem; (40px @ 16px base)       |
+| `--sl-input-height-large`               | 3.125rem; (50px @ 16px base)     |
+| `--sl-input-background-color`           | var(--sl-color-neutral-0)        |
+| `--sl-input-background-color-hover`     | var(--sl-input-background-color) |
+| `--sl-input-background-color-focus`     | var(--sl-input-background-color) |
+| `--sl-input-background-color-disabled`  | var(--sl-color-neutral-100)      |
+| `--sl-input-border-color`               | var(--sl-color-neutral-300)      |
+| `--sl-input-border-color-hover`         | var(--sl-color-neutral-400)      |
+| `--sl-input-border-color-focus`         | var(--sl-color-primary-500)      |
+| `--sl-input-border-color-disabled`      | var(--sl-color-neutral-300)      |
+| `--sl-input-border-width`               | 1px                              |
+| `--sl-input-required-content`           | "\*"                             |
+| `--sl-input-required-content-offset`    | -2px                             |
+| `--sl-input-required-content-color`     | var(--sl-input-label-color)      |
+| `--sl-input-border-radius-small`        | var(--sl-border-radius-medium)   |
+| `--sl-input-border-radius-medium`       | var(--sl-border-radius-medium)   |
+| `--sl-input-border-radius-large`        | var(--sl-border-radius-medium)   |
+| `--sl-input-font-family`                | var(--sl-font-sans)              |
+| `--sl-input-font-weight`                | var(--sl-font-weight-normal)     |
+| `--sl-input-font-size-small`            | var(--sl-font-size-small)        |
+| `--sl-input-font-size-medium`           | var(--sl-font-size-medium)       |
+| `--sl-input-font-size-large`            | var(--sl-font-size-large)        |
+| `--sl-input-letter-spacing`             | var(--sl-letter-spacing-normal)  |
+| `--sl-input-color`                      | var(--sl-color-neutral-700)      |
+| `--sl-input-color-hover`                | var(--sl-color-neutral-700)      |
+| `--sl-input-color-focus`                | var(--sl-color-neutral-700)      |
+| `--sl-input-color-disabled`             | var(--sl-color-neutral-900)      |
+| `--sl-input-icon-color`                 | var(--sl-color-neutral-500)      |
+| `--sl-input-icon-color-hover`           | var(--sl-color-neutral-600)      |
+| `--sl-input-icon-color-focus`           | var(--sl-color-neutral-600)      |
+| `--sl-input-placeholder-color`          | var(--sl-color-neutral-500)      |
+| `--sl-input-placeholder-color-disabled` | var(--sl-color-neutral-600)      |
+| `--sl-input-spacing-small`              | var(--sl-spacing-small)          |
+| `--sl-input-spacing-medium`             | var(--sl-spacing-medium)         |
+| `--sl-input-spacing-large`              | var(--sl-spacing-large)          |
+| `--sl-input-focus-ring-color`           | hsl(198.6 88.7% 48.4% / 40%)     |
+| `--sl-input-focus-ring-offset`          | 0                                |
 
 ## Filled Form Inputs
 
 Filled form input tokens control the appearance of form controls using the `filled` variant.
 
-| Token                                         | Value                         |
-| --------------------------------------------- | ----------------------------- |
-| `--sl-input-filled-background-color`          | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-background-color-hover`    | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-background-color-focus`    | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-background-color-disabled` | `var(--sl-color-neutral-100)` |
-| `--sl-input-filled-color`                     | `var(--sl-color-neutral-800)` |
-| `--sl-input-filled-color-hover`               | `var(--sl-color-neutral-800)` |
-| `--sl-input-filled-color-focus`               | `var(--sl-color-neutral-700)` |
-| `--sl-input-filled-color-disabled`            | `var(--sl-color-neutral-800)` |
+| Token                                         | Value                       |
+| --------------------------------------------- | --------------------------- |
+| `--sl-input-filled-background-color`          | var(--sl-color-neutral-100) |
+| `--sl-input-filled-background-color-hover`    | var(--sl-color-neutral-100) |
+| `--sl-input-filled-background-color-focus`    | var(--sl-color-neutral-100) |
+| `--sl-input-filled-background-color-disabled` | var(--sl-color-neutral-100) |
+| `--sl-input-filled-color`                     | var(--sl-color-neutral-800) |
+| `--sl-input-filled-color-hover`               | var(--sl-color-neutral-800) |
+| `--sl-input-filled-color-focus`               | var(--sl-color-neutral-700) |
+| `--sl-input-filled-color-disabled`            | var(--sl-color-neutral-800) |
 
 ## Form Labels
 
 Form label tokens control the appearance of labels in form controls.
 
-| Token                               | Value                        |
-| ----------------------------------- | ---------------------------- |
-| `--sl-input-label-font-size-small`  | `var(--sl-font-size-small)`  |
-| `--sl-input-label-font-size-medium` | `var(--sl-font-size-medium`) |
-| `--sl-input-label-font-size-large`  | `var(--sl-font-size-large)`  |
-| `--sl-input-label-color`            | `inherit`                    |
+| Token                               | Value                      |
+| ----------------------------------- | -------------------------- |
+| `--sl-input-label-font-size-small`  | var(--sl-font-size-small)  |
+| `--sl-input-label-font-size-medium` | var(--sl-font-size-medium) |
+| `--sl-input-label-font-size-large`  | var(--sl-font-size-large)  |
+| `--sl-input-label-color`            | inherit                    |
 
 ## Help Text
 
 Help text tokens control the appearance of help text in form controls.
 
-| Token                                   | Value                         |
-| --------------------------------------- | ----------------------------- |
-| `--sl-input-help-text-font-size-small`  | `var(--sl-font-size-x-small)` |
-| `--sl-input-help-text-font-size-medium` | `var(--sl-font-size-small)`   |
-| `--sl-input-help-text-font-size-large`  | `var(--sl-font-size-medium)`  |
-| `--sl-input-help-text-color`            | `var(--sl-color-neutral-500)` |
+| Token                                   | Value                       |
+| --------------------------------------- | --------------------------- |
+| `--sl-input-help-text-font-size-small`  | var(--sl-font-size-x-small) |
+| `--sl-input-help-text-font-size-medium` | var(--sl-font-size-small)   |
+| `--sl-input-help-text-font-size-large`  | var(--sl-font-size-medium)  |
+| `--sl-input-help-text-color`            | var(--sl-color-neutral-500) |
 
 ## Toggles
 
 Toggle tokens control the appearance of toggles such as [checkbox](/components/checkbox), [radio](/components/radio), [switch](/components/switch), etc.
 
-| Token                     | Value                         |
-| ------------------------- | ----------------------------- |
-| `--sl-toggle-size-small`  | `0.875rem` (14px @ 16px base) |
-| `--sl-toggle-size-medium` | `1.125rem` (18px @ 16px base) |
-| `--sl-toggle-size-large`  | `1.375rem` (22px @ 16px base) |
+| Token                     | Value                       |
+| ------------------------- | --------------------------- |
+| `--sl-toggle-size-small`  | 0.875rem (14px @ 16px base) |
+| `--sl-toggle-size-medium` | 1.125rem (18px @ 16px base) |
+| `--sl-toggle-size-large`  | 1.375rem (22px @ 16px base) |
 
 ## Overlays
 
 Overlay tokens control the appearance of overlays as used in [dialog](/components/dialog), [drawer](/components/drawer), etc.
 
-| Token                           | Value                       |
-| ------------------------------- | --------------------------- |
-| `--sl-overlay-background-color` | `hsl(240 3.8% 46.1% / 33%)` |
+| Token                           | Value                     |
+| ------------------------------- | ------------------------- |
+| `--sl-overlay-background-color` | hsl(240 3.8% 46.1% / 33%) |
 
 ## Panels
 
 Panel tokens control the appearance of panels such as those used in [dialog](/components/dialog), [drawer](/components/drawer), [menu](/components/menu), etc.
 
-| Token                         | Value                         |
-| ----------------------------- | ----------------------------- |
-| `--sl-panel-background-color` | `var(--sl-color-neutral-0)`   |
-| `--sl-panel-border-color`     | `var(--sl-color-neutral-200)` |
-| `--sl-panel-border-width`     | `1px`                         |
+| Token                         | Value                       |
+| ----------------------------- | --------------------------- |
+| `--sl-panel-background-color` | var(--sl-color-neutral-0)   |
+| `--sl-panel-border-color`     | var(--sl-color-neutral-200) |
+| `--sl-panel-border-width`     | 1px                         |
 
 ## Tooltips
 
 Tooltip tokens control the appearance of tooltips. This includes the [tooltip](/components/tooltip) component as well as other implementations, such [range tooltips](/components/range).
 
-| Token                           | Value                                                  |
-| ------------------------------- | ------------------------------------------------------ |
-| `--sl-tooltip-border-radius`    | `var(--sl-border-radius-medium)`                       |
-| `--sl-tooltip-background-color` | `var(--sl-color-neutral-800)`                          |
-| `--sl-tooltip-color`            | `var(--sl-color-neutral-0)`                            |
-| `--sl-tooltip-font-family`      | `var(--sl-font-sans)`                                  |
-| `--sl-tooltip-font-weight`      | `var(--sl-font-weight-normal)`                         |
-| `--sl-tooltip-font-size`        | `var(--sl-font-size-small)`                            |
-| `--sl-tooltip-line-height`      | `var(--sl-line-height-dense)`                          |
-| `--sl-tooltip-padding`          | `var(--sl-spacing-2x-small) var(--sl-spacing-x-small)` |
-| `--sl-tooltip-arrow-size`       | `6px`                                                  |
+| Token                           | Value                                                |
+| ------------------------------- | ---------------------------------------------------- |
+| `--sl-tooltip-border-radius`    | var(--sl-border-radius-medium)                       |
+| `--sl-tooltip-background-color` | var(--sl-color-neutral-800)                          |
+| `--sl-tooltip-color`            | var(--sl-color-neutral-0)                            |
+| `--sl-tooltip-font-family`      | var(--sl-font-sans)                                  |
+| `--sl-tooltip-font-weight`      | var(--sl-font-weight-normal)                         |
+| `--sl-tooltip-font-size`        | var(--sl-font-size-small)                            |
+| `--sl-tooltip-line-height`      | var(--sl-line-height-dense)                          |
+| `--sl-tooltip-padding`          | var(--sl-spacing-2x-small) var(--sl-spacing-x-small) |
+| `--sl-tooltip-arrow-size`       | 6px                                                  |

src/components/tree/tree.ts

@@ -87,7 +87,7 @@ export default class SlTree extends ShoelaceElement {
   // A collection of all the items in the tree, in the order they appear. The collection is live, meaning it is
   // automatically updated when the underlying document is changed.
   //
-  private lastFocusedItem: SlTreeItem | null;
+  private lastFocusedItem: SlTreeItem;
   private readonly localize = new LocalizeController(this);
   private mutationObserver: MutationObserver;
   private clickTarget: SlTreeItem | null = null;
@@ -159,13 +159,8 @@ export default class SlTree extends ShoelaceElement {
   private handleTreeChanged = (mutations: MutationRecord[]) => {
     for (const mutation of mutations) {
       const addedNodes: SlTreeItem[] = [...mutation.addedNodes].filter(SlTreeItem.isTreeItem) as SlTreeItem[];
-      const removedNodes = [...mutation.removedNodes].filter(SlTreeItem.isTreeItem) as SlTreeItem[];
 
       addedNodes.forEach(this.initTreeItem);
-
-      if (this.lastFocusedItem && removedNodes.includes(this.lastFocusedItem)) {
-        this.lastFocusedItem = null;
-      }
     }
   };