Move device pickers to context data

* Use space tokens

* Fix overflow issue on entities

* Enforce narrow mode on target selectors

* Add action to full width selectors

* Function signature typing

.github/copilot-instructions.md

@@ -8,6 +8,7 @@ You are an assistant helping with development of the Home Assistant frontend. Th
 
 - [Quick Reference](#quick-reference)
 - [Core Architecture](#core-architecture)
+- [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
 - [Development Standards](#development-standards)
 - [Component Library](#component-library)
 - [Common Patterns](#common-patterns)
@@ -40,7 +41,7 @@ script/develop     # Development server
 ```typescript
 import type { HomeAssistant } from "../types";
 import { fireEvent } from "../common/dom/fire_event";
-import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
+import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 ```
 
 ## Core Architecture
@@ -52,13 +53,64 @@ The Home Assistant frontend is a modern web application that:
 - Communicates with the backend via WebSocket API
 - Provides comprehensive theming and internationalization
 
+## State Access: Contexts Instead of `hass`
+
+Every component used to take the whole `hass: HomeAssistant` object — a god-object that re-renders on any unrelated `hass` change, forces tests to mock everything, and hides what a component actually reads. We're moving leaf components to **fine-grained [Lit context](https://lit.dev/docs/data/context/)**: consume only the slice you need and re-render only when it changes.
+
+For new code, consume the matching context instead of adding a `hass` property. `hass` stays for container components that own it and feed the providers; the canonical migration is [`hui-button-card.ts`](src/panels/lovelace/cards/hui-button-card.ts). Infrastructure: contexts in [`src/data/context/index.ts`](src/data/context/index.ts), the `consume…` helpers in [`src/common/decorators/consume-context-entry.ts`](src/common/decorators/consume-context-entry.ts), and `@transform` in [`src/common/decorators/transform.ts`](src/common/decorators/transform.ts). Providers are wired automatically by `contextMixin` on `HassBaseEl` — you only consume.
+
+### Contexts
+
+Consume the narrowest context that covers your reads:
+
+| Context                                                                 | Replaces                                                                                  |
+| ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `statesContext`                                                         | `hass.states`                                                                             |
+| `entitiesContext` / `devicesContext` / `areasContext` / `floorsContext` | `hass.entities` / `.devices` / `.areas` / `.floors` (or `registriesContext` for all four) |
+| `servicesContext`                                                       | `hass.services`                                                                           |
+| `internationalizationContext`                                           | `hass.localize`, `hass.locale`, `hass.language`                                           |
+| `formattersContext`                                                     | `hass.formatEntityName`, `hass.formatEntityState`, `hass.formatEntityAttributeName`, …    |
+| `configContext`                                                         | `hass.config`, `hass.user`, `hass.auth`, `hass.userData`                                  |
+| `connectionContext`                                                     | `hass.connection`, `hass.connected`, `hass.hassUrl`                                       |
+| `apiContext`                                                            | `hass.callService`, `hass.callApi`, `hass.callWS`, `hass.sendWS`, `hass.fetchWithAuth`    |
+| `uiContext`                                                             | `hass.themes`, `hass.selectedTheme`, `hass.panels`, `hass.dockedSidebar`, …               |
+| `narrowViewportContext`                                                 | narrow-layout boolean                                                                     |
+
+Lazy contexts (subscribe on first consumer, tear down after the last): `labelsContext`, `fullEntitiesContext`, `configEntriesContext`, `manifestsContext`. The single-field contexts (`localizeContext`, `themesContext`, `userContext`, …) are **deprecated** — use the grouped ones above.
+
+### Consuming
+
+Use the `consume…` helpers for entity-scoped and `localize` reads. `entityIdPath` is resolved against `this`, so these watch `this._config.entity`:
+
+```ts
+@state() @consumeEntityState({ entityIdPath: ["_config", "entity"] })
+private _stateObj?: HassEntity; // consumeEntityStates(...) for a record of several
+
+@state() @consumeEntityRegistryEntry({ entityIdPath: ["_config", "entity"] })
+private _entity?: EntityRegistryDisplayEntry;
+
+@state() @consumeLocalize()
+private _localize!: LocalizeFunc;
+```
+
+For any other single field, pair `@consume` with `@transform`:
+
+```ts
+@state()
+@consume({ context: uiContext, subscribe: true })
+@transform<HomeAssistantUI, Themes>({ transformer: ({ themes }) => themes })
+private _themes!: Themes;
+```
+
+`@transform`'s `watch` option re-runs the transformer when a host prop changes — needed when an entity id is computed, since `consumeEntityState` only watches the first path segment. To consume a whole group untransformed, drop `@transform` and type it `ContextType<typeof statesContext>`.
+
 ## Development Standards
 
 ### Code Quality Requirements
 
 **Linting and Formatting (Enforced by Tools)**
 
-- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
+- ESLint config (flat config) extends TypeScript strict, Lit, Web Components, Accessibility (lit-a11y), and import-x
 - Prettier with ES5 trailing commas enforced
 - No console statements (`no-console: "error"`) - use proper logging
 - Import organization: No unused imports, consistent type imports
@@ -136,6 +188,7 @@ export class HaMyComponent extends LitElement {
 ### Data Management
 
 - **Use WebSocket API**: All backend communication via home-assistant-js-websocket
+- **Prefer contexts over `hass`**: For state reads, consume the relevant Lit context instead of taking the whole `hass` object — see [State Access: Contexts Instead of `hass`](#state-access-contexts-instead-of-hass)
 - **Cache appropriately**: Use collections and caching for frequently accessed data
 - **Handle errors gracefully**: All API calls should have error handling
 - **Update real-time**: Subscribe to state changes for live updates
@@ -160,7 +213,7 @@ try {
   - Defined in `src/resources/theme/core.globals.ts`
   - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
-- **Follow Material Design**: Use Material Web Components where appropriate
+- **Prefer `ha-*` components**: Build on the Home Assistant component library (many now wrap Web Awesome components); avoid new use of legacy Material Web Components (`mwc-*`), which are being phased out
 - **Support RTL**: Ensure all layouts work in RTL languages
 
 ```typescript
@@ -267,15 +320,22 @@ fireEvent(this, "show-dialog", {
 
 **Dialog Sizing:**
 
-- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
+- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (580px - default), `"large"` (1024px), or `"full"`
 - Custom sizing is NOT recommended - use the standard width presets
 
 **Button Appearance Guidelines:**
 
-- **Primary action buttons**: Default appearance (no appearance attribute) or omit for standard styling
-- **Secondary action buttons**: Use `appearance="plain"` for cancel/dismiss actions
-- **Destructive actions**: Use `appearance="filled"` for delete/remove operations (combined with appropriate semantic styling)
-- **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
+`ha-button` (wraps the Web Awesome button — see `src/components/ha-button.ts`) has two independent axes plus size:
+
+- **`variant`** (color): `"brand"` (default), `"neutral"`, `"danger"`, `"warning"`, `"success"`
+- **`appearance`** (fill style): `"accent"`, `"filled"`, `"outlined"`, `"plain"`
+- **`size`**: `"xs"` (extra small, 40px), `"s"` (small, 32px), `"m"` (medium, 40px - default), `"l"` (large, 48px), `"xl"` (extra large, 40px)
+
+Common patterns:
+
+- **Primary action**: `appearance="filled"` for emphasis (or the default appearance for a lighter look)
+- **Secondary action**: `appearance="plain"` for cancel/dismiss actions
+- **Destructive actions**: `variant="danger"` for delete/remove operations (the generic confirmation dialog uses `variant="danger"` for its confirm button — see `src/dialogs/generic/dialog-box.ts`)
 - Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
 
 **Gallery Documentation:**
@@ -308,7 +368,8 @@ fireEvent(this, "show-dialog", {
 ### Alert Component (ha-alert)
 
 - Types: `error`, `warning`, `info`, `success`
-- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
+- Properties: `title`, `alert-type`, `dismissable`, `narrow`
+- Slots: `icon` (override the leading icon), `action` (custom action content)
 - Content announced by screen readers when dynamically displayed
 
 ```html
@@ -449,7 +510,7 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 
 ### Common Pitfalls to Avoid
 
-- Don't use `querySelector` - Use refs or component properties
+- Don't manually query the DOM with `querySelector` - use the `@query`/`@queryAll` decorators or component properties
 - Don't manipulate DOM directly - Let Lit handle rendering
 - Don't use global styles - Scope styles to components
 - Don't block the main thread - Use web workers for heavy computation
@@ -540,35 +601,24 @@ When creating a pull request, you **must** use the PR template located at `.gith
 
 #### Translation Considerations
 
-- **Add translation keys**: All user-facing text must be translatable
-- **Use placeholders**: Support dynamic content in translations
+All user-facing text must be translatable — see the **Internationalization** section (under Common Patterns) for the `localize` API and placeholder usage. From a copy perspective:
+
 - **Keep context**: Provide enough context for translators
-
-```typescript
-// Good
-this.hass.localize("ui.panel.config.automation.delete_confirm", {
-  name: automation.alias,
-});
-
-// Bad - hardcoded text
-("Are you sure you want to delete this automation?");
-```
+- **Avoid concatenation**: Prefer full localized strings with placeholders over stitching translated fragments together
 
 ### Common Review Issues (From PR Analysis)
 
+Recurring, easy-to-miss problems surfaced in real PR reviews. These complement the standards above rather than repeating them — items already covered earlier (loading states, error handling, mobile layout, theming, import hygiene) are intentionally not duplicated here.
+
 #### User Experience and Accessibility
 
 - **Form validation**: Always provide proper field labels and validation feedback
 - **Form accessibility**: Prevent password managers from incorrectly identifying fields
-- **Loading states**: Show clear progress indicators during async operations
-- **Error handling**: Display meaningful error messages when operations fail
-- **Mobile responsiveness**: Ensure components work well on small screens
 - **Hit targets**: Make clickable areas large enough for touch interaction
-- **Visual feedback**: Provide clear indication of interactive states
+- **Visual feedback**: Provide clear indication of interactive states (hover, active, focus)
 
 #### Dialog and Modal Patterns
 
-- **Dialog width constraints**: Respect minimum and maximum width requirements
 - **Interview progress**: Show clear progress for multi-step operations
 - **State persistence**: Handle dialog state properly during background operations
 - **Cancel behavior**: Ensure cancel/close buttons work consistently
@@ -580,15 +630,12 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 - **Visual hierarchy**: Ensure proper font sizes and spacing ratios
 - **Grid alignment**: Components should align to the design grid system
 - **Badge placement**: Position badges and indicators consistently
-- **Color theming**: Respect theme variables and design system colors
 
 #### Code Quality Issues
 
 - **Null checking**: Always check if entities exist before accessing properties
 - **TypeScript safety**: Handle potentially undefined array/object access
-- **Import organization**: Remove unused imports and use proper type imports
-- **Event handling**: Properly subscribe and unsubscribe from events
-- **Memory leaks**: Clean up subscriptions and event listeners
+- **Event handling and cleanup**: Subscribe/unsubscribe correctly and remove listeners to avoid memory leaks
 
 #### Configuration and Props
 
@@ -599,39 +646,12 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 
 ## Review Guidelines
 
-### Core Requirements Checklist
+Final pre-submission checklist. Linting and formatting are enforced by tooling, so this focuses on what tools can't catch rather than restating every rule above.
 
-- [ ] TypeScript strict mode passes (`yarn lint:types`)
-- [ ] No ESLint errors or warnings (`yarn lint:eslint`)
-- [ ] Prettier formatting applied (`yarn lint:prettier`)
-- [ ] Lit analyzer passes (`yarn lint:lit`)
-- [ ] Component follows Lit best practices
-- [ ] Proper error handling implemented
-- [ ] Loading states handled
-- [ ] Mobile responsive
-- [ ] Theme variables used
-- [ ] Translations added
-- [ ] Accessible to screen readers
-- [ ] Tests added (where applicable)
-- [ ] No console statements (use proper logging)
-- [ ] Unused imports removed
-- [ ] Proper naming conventions
-
-### Text and Copy Checklist
-
-- [ ] Follows terminology guidelines (Delete vs Remove, Create vs Add)
-- [ ] Localization keys added for all user-facing text
-- [ ] Uses "Home Assistant" (never "HA" or "HASS")
-- [ ] Sentence case for ALL text (titles, headings, buttons, labels)
-- [ ] American English spelling
-- [ ] Friendly, informational tone
-- [ ] Avoids abbreviations and jargon
-- [ ] Correct terminology (integration not component)
-
-### Component-Specific Checks
-
-- [ ] ha-alert used correctly for messages
-- [ ] ha-form uses proper schema structure
+- [ ] `yarn lint` passes (TypeScript, ESLint, Prettier, Lit analyzer) and `yarn test` is green
+- [ ] Tests added for new data processing/utilities (where applicable)
+- [ ] All user-facing text is localized and follows the Text and Copy guidelines (sentence case, "Home Assistant" in full, Delete/Remove + Create/Add)
 - [ ] Components handle all states (loading, error, unavailable)
 - [ ] Entity existence checked before property access
-- [ ] Event subscriptions properly cleaned up
+- [ ] Event/subscription listeners cleaned up (no memory leaks)
+- [ ] Accessible to screen readers and keyboard

.github/workflows/cast_deployment.yaml

@@ -46,7 +46,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --alias dev
+          npx -y netlify-cli deploy --dir=cast/dist --alias dev
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}
@@ -82,7 +82,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=cast/dist --prod
+          npx -y netlify-cli deploy --dir=cast/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_CAST_SITE_ID }}

.github/workflows/codeql-analysis.yml

@@ -41,14 +41,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/init@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/autobuild@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -62,4 +62,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/analyze@7211b7c8077ea37d8641b6271f6a365a22a5fbfa # v4.36.0

.github/workflows/demo_deployment.yaml

@@ -47,7 +47,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_DEV_SITE_ID }}
@@ -83,7 +83,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=demo/dist --prod
+          npx -y netlify-cli deploy --dir=demo/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_DEMO_SITE_ID }}

.github/workflows/design_deployment.yaml

@@ -40,7 +40,7 @@ jobs:
       - name: Deploy to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --prod
+          npx -y netlify-cli deploy --dir=gallery/dist --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_GALLERY_SITE_ID }}

.github/workflows/design_preview.yaml

@@ -45,7 +45,7 @@ jobs:
       - name: Deploy preview to Netlify
         id: deploy
         run: |
-          npx -y netlify-cli@23.7.3 deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
+          npx -y netlify-cli deploy --dir=gallery/dist --alias "deploy-preview-${{ github.event.number }}" \
             --json > deploy_output.json
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

.github/workflows/lock.yml

@@ -13,13 +13,11 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
+      - uses: dessant/lock-threads@89ae32b08ed1a541efecbab17912962a5e38981c # v6.0.2
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"
-          issue-lock-inactive-days: "30"
-          issue-exclude-created-before: "2020-10-01T00:00:00Z"
+          issue-inactive-days: "30"
           issue-lock-reason: ""
-          pr-lock-inactive-days: "1"
-          pr-exclude-created-before: "2020-11-01T00:00:00Z"
+          pr-inactive-days: "1"
           pr-lock-reason: ""

.github/workflows/release.yaml

@@ -36,7 +36,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
+        uses: home-assistant/actions/helpers/verify-version@868e6cb4607727d764341a158d98872cd63fa658 # master
 
       - name: Setup Node
         uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
@@ -77,9 +77,22 @@ jobs:
         env:
           GITHUB_REF: ${{ github.ref }}
         run: |
-          # Sleep to give pypi time to populate the new version across mirrors
-          sleep 240
           version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
+          # Wait for the package to become available on PyPI
+          echo "Waiting for home-assistant-frontend==$version to appear on PyPI..."
+          for i in $(seq 1 30); do
+            status=$(curl -s -o /dev/null -w "%{http_code}" "https://pypi.org/pypi/home-assistant-frontend/$version/json")
+            if [ "$status" = "200" ]; then
+              echo "Package is available on PyPI!"
+              break
+            fi
+            if [ "$i" = "30" ]; then
+              echo "Timed out waiting for package to appear on PyPI"
+              exit 1
+            fi
+            echo "Not available yet (HTTP $status), retrying in 30 seconds... ($i/30)"
+            sleep 30
+          done
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       # home-assistant/wheels doesn't support SHA pinning

.github/workflows/stale.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+        uses: actions/stale@eb5cf3af3ac0a1aa4c9c45633dd1ae542a27a899 # v10.3.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch

@@ -0,0 +1,86 @@
+diff --git a/dist/tinykeys.cjs b/dist/tinykeys.cjs
+index 08c98b6eff3b8fb4b727fe8e6b096951d6ef6347..9c44f14862f582766ea1733b6dc0e97f962800d8 100644
+--- a/dist/tinykeys.cjs
++++ b/dist/tinykeys.cjs
+@@ -61,6 +61,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
++function splitKeybindingPress(press) {
++	let parts = [];
++	let start = 0;
++	for (let index = 0; index < press.length; index++) {
++		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
++			parts.push(press.slice(start, index));
++			start = index + 1;
++		}
++	}
++	parts.push(press.slice(start));
++	return parts;
++}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -76,10 +88,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
++		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
++		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -201,5 +213,3 @@ exports.defaultKeybindingsHandlerIgnore = defaultKeybindingsHandlerIgnore;
+ exports.matchKeybindingPress = matchKeybindingPress;
+ exports.parseKeybinding = parseKeybinding;
+ exports.tinykeys = tinykeys;
+-
+-//# sourceMappingURL=tinykeys.cjs.map
+\ No newline at end of file
+diff --git a/dist/tinykeys.mjs b/dist/tinykeys.mjs
+index c289972d2728e03d9b272268c38fd3392e8845bf..e22897b00aae6cdb0dbbb971445227c07be52918 100644
+--- a/dist/tinykeys.mjs
++++ b/dist/tinykeys.mjs
+@@ -60,6 +60,18 @@ function defaultKeybindingsHandlerIgnore(event) {
+ function getModifierState(event, mod) {
+ 	return typeof event.getModifierState === "function" ? event.getModifierState(mod) || ALT_GRAPH_ALIASES.includes(mod) && event.getModifierState("AltGraph") : false;
+ }
++function splitKeybindingPress(press) {
++	let parts = [];
++	let start = 0;
++	for (let index = 0; index < press.length; index++) {
++		if (press[index] === "+" && /[\w\]]/.test(press[index - 1] || "")) {
++			parts.push(press.slice(start, index));
++			start = index + 1;
++		}
++	}
++	parts.push(press.slice(start));
++	return parts;
++}
+ /**
+ * Parses a keybinding string into its parts.
+ *
+@@ -75,10 +87,10 @@ function getModifierState(event, mod) {
+ */
+ function parseKeybinding(str) {
+ 	return str.trim().split(" ").map((press) => {
+-		let parts = press.split(/(?<=\w|\])\+/);
++		let parts = splitKeybindingPress(press);
+ 		let last = parts.pop();
+ 		let regex = last.match(/^\((.+)\)$/);
+-		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "iv") : last;
++		let key = regex ? new RegExp(`^(?:${regex[1]})$`, "i") : last;
+ 		let requiredModifiers = [];
+ 		let optionalModifiers = [];
+ 		for (const part of parts) {
+@@ -196,5 +208,3 @@ function tinykeys(target, keybindingMap, options = {}) {
+ }
+ //#endregion
+ export { createKeybindingsHandler, defaultKeybindingsHandlerIgnore, matchKeybindingPress, parseKeybinding, tinykeys };
+-
+-//# sourceMappingURL=tinykeys.mjs.map
+\ No newline at end of file

build-scripts/gulp/gallery.js

@@ -57,7 +57,9 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
       if (descriptionContent === "") {
         hasDescription = false;
       } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+        descriptionContent = marked(descriptionContent)
+          .replace(/\\/g, "\\\\")
+          .replace(/`/g, "\\`");
         fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
         fs.writeFileSync(
           path.resolve(galleryBuild, `${pageId}-description.ts`),

build-scripts/gulp/licenses.js

@@ -29,7 +29,7 @@ const LICENSE_OVERRIDES = [
     // type-fest ships two license files (MIT for code, CC0 for types).
     // We use the MIT license since that covers the bundled code.
     packageName: "type-fest",
-    version: "5.6.0",
+    version: "5.7.0",
     licensePath: path.resolve(
       paths.root_dir,
       "node_modules/type-fest/license-mit"

gallery/src/pages/components/ha-alert.ts

@@ -78,13 +78,13 @@ const alerts: {
     title: "Error with action",
     description: "This is a test error alert with action",
     type: "error",
-    actionSlot: html`<ha-button size="small" slot="action">restart</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">restart</ha-button>`,
   },
   {
     title: "Unsaved data",
     description: "You have unsaved data",
     type: "warning",
-    actionSlot: html`<ha-button size="small" slot="action">save</ha-button>`,
+    actionSlot: html`<ha-button size="s" slot="action">save</ha-button>`,
   },
   {
     title: "Slotted icon",

gallery/src/pages/components/ha-button.markdown

@@ -26,7 +26,7 @@ title: Button
     filled button
   </ha-button>
 
-  <ha-button size="small">
+  <ha-button size="s">
     small
   </ha-button>
 </div>
@@ -34,7 +34,7 @@ title: Button
 ```html
 <ha-button> simple button </ha-button>
 
-<ha-button size="small"> small </ha-button>
+<ha-button size="s"> small </ha-button>
 ```
 
 ### API
@@ -57,7 +57,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
 | appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
-| size       | "small"/"medium"/"large"                       | "medium" | Sets the button size.                                                             |
+| size       | "xs"/"s"/"m"/"l"/"xl"                          | "m"      | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
 | disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |
 

gallery/src/pages/components/ha-button.ts

@@ -49,7 +49,7 @@ export class DemoHaButton extends LitElement {
                           <ha-button
                             .appearance=${appearance}
                             .variant=${variant}
-                            size="small"
+                            size="s"
                           >
                             ${titleCase(`${variant} ${appearance}`)}
                           </ha-button>
@@ -100,7 +100,7 @@ export class DemoHaButton extends LitElement {
                           <ha-button
                             .variant=${variant}
                             .appearance=${appearance}
-                            size="small"
+                            size="s"
                             disabled
                           >
                             ${titleCase(`${appearance}`)}

gallery/src/pages/components/ha-dialogs.markdown

@@ -13,7 +13,7 @@ Our dialogs are based on the latest version of Material Design. Please note that
 
 - Dialogs have a max width of 560px. Alert and confirmation dialogs have a fixed width of 320px. If you need more width, consider a dedicated page instead.
 - The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guidelines.
-- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
+- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user **has made changes to**. Instead it will animate "no" by a little shake.
 - Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
 - The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
 - Keep the labels short, for example `Save`, `Delete`, `Enable`.

gallery/src/pages/components/ha-list.markdown

@@ -62,10 +62,11 @@ host reflects `aria-multiselectable`.
 
 **Events**
 
-- `ha-list-selected` — selection changed. Detail
-  `{ index: number | Set<number>, diff: { added: Set<number>, removed: Set<number> } }`.
-  `index` is a `number` in single mode (`-1` when nothing selected) and a
-  `Set<number>` in multi mode.
+- `ha-list-item-selected` — an option was selected. Detail is the option's
+  index (`number`). In single mode this is the only selection event; in multi
+  mode it fires for each option added to the selection.
+- `ha-list-item-deselected` — an option was deselected (multi mode only). Detail
+  is the option's index (`number`).
 
 **Methods / getters**
 

gallery/src/pages/components/ha-list.ts

@@ -20,7 +20,6 @@ import "../../../../src/components/item/ha-list-item-option";
 import "../../../../src/components/list/ha-list-base";
 import "../../../../src/components/list/ha-list-nav";
 import "../../../../src/components/list/ha-list-selectable";
-import type { HaListSelectedDetail } from "../../../../src/components/list/types";
 
 type Appearance = "line" | "checkbox";
 type Position = "start" | "end";
@@ -185,7 +184,7 @@ export class DemoHaList extends LitElement {
       <ha-card header="Single select, appearance=line">
         <ha-list-selectable
           aria-label="Single select"
-          @ha-list-selected=${this._onSingle}
+          @ha-list-item-selected=${this._onSingle}
         >
           ${this._options.map(
             (o, i) => html`
@@ -205,7 +204,8 @@ export class DemoHaList extends LitElement {
         <ha-list-selectable
           multi
           aria-label="Multi select line"
-          @ha-list-selected=${this._onMultiLine}
+          @ha-list-item-selected=${this._onMultiLineSelected}
+          @ha-list-item-deselected=${this._onMultiLineDeselected}
         >
           ${this._options.map(
             (o, i) => html`
@@ -227,7 +227,8 @@ export class DemoHaList extends LitElement {
         <ha-list-selectable
           multi
           aria-label="Multi checkbox start"
-          @ha-list-selected=${this._onMultiCheckStart}
+          @ha-list-item-selected=${this._onMultiCheckStartSelected}
+          @ha-list-item-deselected=${this._onMultiCheckStartDeselected}
         >
           ${this._options.map(
             (o, i) => html`
@@ -253,7 +254,8 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
         <ha-list-selectable
           multi
           aria-label="Multi checkbox end"
-          @ha-list-selected=${this._onMultiCheckEnd}
+          @ha-list-item-selected=${this._onMultiCheckEndSelected}
+          @ha-list-item-deselected=${this._onMultiCheckEndDeselected}
         >
           ${this._options.map(
             (o, i) => html`
@@ -347,20 +349,58 @@ selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
     this._buttonClicks++;
   };
 
-  private _onSingle = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._single = ev.detail.index;
+  private _withIndex(
+    value: number | Set<number>,
+    index: number,
+    selected: boolean
+  ): Set<number> {
+    const next = new Set(value instanceof Set ? value : []);
+    if (selected) {
+      next.add(index);
+    } else {
+      next.delete(index);
+    }
+    return next;
+  }
+
+  private _onSingle = (ev: CustomEvent<number>) => {
+    this._single = ev.detail;
   };
 
-  private _onMultiLine = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._multiLine = ev.detail.index;
+  private _onMultiLineSelected = (ev: CustomEvent<number>) => {
+    this._multiLine = this._withIndex(this._multiLine, ev.detail, true);
   };
 
-  private _onMultiCheckStart = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._multiCheckStart = ev.detail.index;
+  private _onMultiLineDeselected = (ev: CustomEvent<number>) => {
+    this._multiLine = this._withIndex(this._multiLine, ev.detail, false);
   };
 
-  private _onMultiCheckEnd = (ev: CustomEvent<HaListSelectedDetail>) => {
-    this._multiCheckEnd = ev.detail.index;
+  private _onMultiCheckStartSelected = (ev: CustomEvent<number>) => {
+    this._multiCheckStart = this._withIndex(
+      this._multiCheckStart,
+      ev.detail,
+      true
+    );
+  };
+
+  private _onMultiCheckStartDeselected = (ev: CustomEvent<number>) => {
+    this._multiCheckStart = this._withIndex(
+      this._multiCheckStart,
+      ev.detail,
+      false
+    );
+  };
+
+  private _onMultiCheckEndSelected = (ev: CustomEvent<number>) => {
+    this._multiCheckEnd = this._withIndex(this._multiCheckEnd, ev.detail, true);
+  };
+
+  private _onMultiCheckEndDeselected = (ev: CustomEvent<number>) => {
+    this._multiCheckEnd = this._withIndex(
+      this._multiCheckEnd,
+      ev.detail,
+      false
+    );
   };
 
   static styles = css`

gallery/src/pages/components/ha-slider.markdown

@@ -17,13 +17,13 @@ subtitle: A slider component for selecting a value from a range.
 ### Example Usage
 
 <div class="wrapper">
-  <ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-  <ha-slider size="medium"></ha-slider>
+  <ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+  <ha-slider size="m"></ha-slider>
 </div>
 
 ```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
+<ha-slider size="s" with-markers min="0" max="8" value="4"></ha-slider>
+<ha-slider size="m"></ha-slider>
 ```
 
 ### API

gallery/src/pages/components/ha-slider.ts

@@ -29,7 +29,7 @@ export class DemoHaSlider extends LitElement {
                 ></ha-slider>
                 <span>Small</span>
                 <ha-slider
-                  size="small"
+                  size="s"
                   min="0"
                   max="8"
                   value="4"
@@ -37,7 +37,7 @@ export class DemoHaSlider extends LitElement {
                 ></ha-slider>
                 <span>Medium</span>
                 <ha-slider
-                  size="medium"
+                  size="m"
                   min="0"
                   max="8"
                   value="4"

package.json

@@ -27,7 +27,7 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.2",
+    "@babel/runtime": "7.29.7",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.2",
     "@codemirror/commands": "6.10.3",
@@ -40,15 +40,15 @@
     "@codemirror/view": "6.43.0",
     "@date-fns/tz": "1.5.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.4.6",
-    "@formatjs/intl-displaynames": "7.3.8",
-    "@formatjs/intl-durationformat": "0.10.12",
+    "@formatjs/intl-datetimeformat": "7.4.7",
+    "@formatjs/intl-displaynames": "7.3.9",
+    "@formatjs/intl-durationformat": "0.10.13",
     "@formatjs/intl-getcanonicallocales": "3.2.9",
-    "@formatjs/intl-listformat": "8.3.8",
+    "@formatjs/intl-listformat": "8.3.9",
     "@formatjs/intl-locale": "5.3.8",
-    "@formatjs/intl-numberformat": "9.3.9",
-    "@formatjs/intl-pluralrules": "6.3.8",
-    "@formatjs/intl-relativetimeformat": "12.3.8",
+    "@formatjs/intl-numberformat": "9.3.10",
+    "@formatjs/intl-pluralrules": "6.3.9",
+    "@formatjs/intl-relativetimeformat": "12.3.9",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
@@ -62,41 +62,40 @@
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
     "@lit/reactive-element": "2.1.2",
-    "@material/mwc-base": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/web": "2.4.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.21",
+    "@swc/helpers": "0.5.23",
     "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.0.5",
-    "@tsparticles/preset-links": "4.0.5",
+    "@tsparticles/engine": "4.1.2",
+    "@tsparticles/preset-links": "4.1.2",
     "@vibrant/color": "4.0.4",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
-    "barcode-detector": "3.1.3",
+    "barcode-detector": "3.2.0",
     "cally": "0.9.2",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
     "core-js": "3.49.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
-    "date-fns": "4.3.0",
+    "date-fns": "4.4.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
     "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
-    "fuse.js": "7.3.0",
+    "fuse.js": "7.4.1",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "7.0.0",
     "hls.js": "1.6.16",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.4",
     "intl-messageformat": "11.2.7",
-    "js-yaml": "4.1.1",
+    "js-yaml": "4.2.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
@@ -115,7 +114,7 @@
     "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
-    "tinykeys": "4.0.0",
+    "tinykeys": "patch:tinykeys@npm%3A4.0.0#~/.yarn/patches/tinykeys-npm-4.0.0-a6ca3fd771.patch",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.4.1",
     "workbox-core": "7.4.1",
@@ -126,21 +125,20 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.29.7",
     "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.5",
-    "@bundle-stats/plugin-webpack-filter": "4.22.1",
+    "@babel/plugin-transform-runtime": "7.29.7",
+    "@babel/preset-env": "7.29.7",
+    "@bundle-stats/plugin-webpack-filter": "4.22.2",
     "@eslint/js": "10.0.1",
     "@html-eslint/eslint-plugin": "0.61.0",
     "@lokalise/node-api": "16.0.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.11",
-    "@rspack/core": "2.0.4",
-    "@rspack/dev-server": "2.0.1",
-    "@types/babel__plugin-transform-runtime": "7.9.5",
+    "@rsdoctor/rspack-plugin": "1.5.12",
+    "@rspack/core": "2.0.5",
+    "@rspack/dev-server": "2.0.3",
     "@types/chromecast-caf-receiver": "6.0.26",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
@@ -152,17 +150,15 @@
     "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
-    "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
     "@types/tar": "7.0.87",
-    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.7",
+    "@vitest/coverage-v8": "4.1.8",
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
     "del": "8.0.1",
-    "eslint": "10.4.0",
+    "eslint": "10.4.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.11",
     "eslint-plugin-import-x": "4.16.2",
@@ -183,8 +179,8 @@
     "husky": "9.1.7",
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
-    "license-checker-rseidelsohn": "4.4.2",
-    "lint-staged": "17.0.5",
+    "license-checker-rseidelsohn": "5.0.1",
+    "lint-staged": "17.0.7",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",
@@ -194,13 +190,13 @@
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.6",
     "sinon": "22.0.0",
-    "tar": "7.5.15",
-    "terser-webpack-plugin": "5.6.0",
+    "tar": "7.5.16",
+    "terser-webpack-plugin": "5.6.1",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.59.4",
+    "typescript-eslint": "8.60.1",
     "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.7",
+    "vitest": "4.1.8",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260527.4"
+version      = "20260527.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/decorators/consume-context-entry.ts

@@ -11,6 +11,7 @@ import {
 } from "../../data/context";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { LocalizeFunc } from "../translations/localize";
+import { ensureArray } from "../array/ensure-array";
 import { transform } from "./transform";
 
 interface ConsumeEntryConfig {
@@ -26,6 +27,28 @@ const resolveAtPath = (host: unknown, path: readonly string[]) => {
   return cur;
 };
 
+/** Reuse `previous` when every entry still references the same `HassEntity`. */
+export const preserveUnchangedEntityStatesRecord = <
+  T extends Record<string, HassEntity | undefined>,
+>(
+  previous: T | undefined,
+  next: T
+): T => {
+  if (!previous) {
+    return next;
+  }
+  const nextKeys = Object.keys(next);
+  if (Object.keys(previous).length !== nextKeys.length) {
+    return next;
+  }
+  for (const key of nextKeys) {
+    if (previous[key] !== next[key]) {
+      return next;
+    }
+  }
+  return previous;
+};
+
 const composeDecorator = <T, V>(
   context: Parameters<typeof consume>[0]["context"],
   watchKey: string | undefined,
@@ -63,27 +86,52 @@ export const consumeEntityState = (config: ConsumeEntryConfig) =>
   );
 
 /**
- * Like {@link consumeEntityState} but for an array of entity IDs at
- * `entityIdPath`. Resolves to a `HassEntity[]` containing one entry per
- * currently-available entity (missing entities and non-string IDs are
- * filtered out; original order is preserved).
+ * Like {@link consumeEntityState} but for one or more entity IDs at
+ * `entityIdPath` (a string or string array; wrapped with {@link ensureArray}).
+ * Resolves to a record keyed by entity ID containing the currently-available
+ * entities (missing entities and non-string IDs are filtered out). Returns the
+ * previous record when none of the selected entities changed.
  */
-export const consumeEntityStates = (config: ConsumeEntryConfig) =>
-  composeDecorator<HassEntities, HassEntity[]>(
-    statesContext,
-    config.entityIdPath[0],
-    function (states) {
-      const ids = resolveAtPath(this, config.entityIdPath);
-      if (!Array.isArray(ids) || !states) return undefined;
-      const result: HassEntity[] = [];
-      for (const id of ids) {
-        if (typeof id !== "string") continue;
-        const state = states[id];
-        if (state !== undefined) result.push(state);
-      }
-      return result;
+export const consumeEntityStates = (config: ConsumeEntryConfig) => {
+  const watchKey = config.entityIdPath[0];
+  const buildRecord = function (this: unknown, states: HassEntities) {
+    const ids = ensureArray(resolveAtPath(this, config.entityIdPath));
+    if (!ids || !states) return undefined;
+    const result: Record<string, HassEntity> = {};
+    for (const id of ids) {
+      if (typeof id !== "string") continue;
+      const state = states[id];
+      if (state !== undefined) result[id] = state;
     }
-  );
+    return result;
+  };
+
+  return (proto: unknown, propertyKey: string) => {
+    const key = String(propertyKey);
+    const transformDec = transform<
+      HassEntities,
+      Record<string, HassEntity> | undefined
+    >({
+      transformer: function (this: unknown, states: HassEntities) {
+        const next = buildRecord.call(this, states);
+        if (next === undefined) {
+          return undefined;
+        }
+        const previous = (this as Record<string, unknown>)[
+          `__transform_${key}`
+        ] as Record<string, HassEntity> | undefined;
+        return preserveUnchangedEntityStatesRecord(previous, next);
+      },
+      watch: watchKey ? [watchKey] : [],
+    });
+    const consumeDec = consume<any>({
+      context: statesContext,
+      subscribe: true,
+    });
+    transformDec(proto as never, propertyKey);
+    consumeDec(proto as never, propertyKey);
+  };
+};
 
 /**
  * Consumes `entitiesContext` and narrows it to the

src/common/entity/get_entity_location.ts

@@ -0,0 +1,59 @@
+import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
+import { computeStateDomain } from "./compute_state_domain";
+
+export interface EntityLocation {
+  latitude: number;
+  longitude: number;
+  gpsAccuracy?: number;
+}
+
+const findFirstActiveZone = (
+  inZones: readonly string[],
+  states: HassEntities
+): HassEntity | undefined => {
+  for (const zoneId of inZones) {
+    const zone = states[zoneId];
+    if (
+      zone &&
+      !zone.attributes.passive &&
+      typeof zone.attributes.latitude === "number" &&
+      typeof zone.attributes.longitude === "number"
+    ) {
+      return zone;
+    }
+  }
+  return undefined;
+};
+
+export const getEntityLocation = (
+  stateObj: HassEntity,
+  states: HassEntities
+): EntityLocation | undefined => {
+  const {
+    latitude,
+    longitude,
+    gps_accuracy: gpsAccuracy,
+  } = stateObj.attributes;
+  if (typeof latitude === "number" && typeof longitude === "number") {
+    return { latitude, longitude, gpsAccuracy };
+  }
+
+  if (computeStateDomain(stateObj) !== "person") {
+    return undefined;
+  }
+
+  const inZones = stateObj.attributes.in_zones;
+  if (!Array.isArray(inZones) || inZones.length === 0) {
+    return undefined;
+  }
+
+  const zone = findFirstActiveZone(inZones, states);
+  if (!zone) {
+    return undefined;
+  }
+
+  return {
+    latitude: zone.attributes.latitude,
+    longitude: zone.attributes.longitude,
+  };
+};

src/common/search/related-context.ts

@@ -0,0 +1,37 @@
+import type { PickerComboBoxItem } from "../../components/ha-picker-combo-box";
+import type { RelatedResult } from "../../data/search";
+
+export interface RelatedIdSets {
+  areas: Set<string>;
+  devices: Set<string>;
+  entities: Set<string>;
+}
+
+/**
+ * Build a set of related IDs for a given related result.
+ * @param related - The related result to build the sets from.
+ * @returns The related ID sets.
+ */
+export const buildRelatedIdSets = (related?: RelatedResult): RelatedIdSets => ({
+  areas: new Set(related?.area || []),
+  devices: new Set(related?.device || []),
+  entities: new Set(related?.entity || []),
+});
+
+/**
+ * Stable partition sort: related items float to the top,
+ * preserving relative order (e.g. Fuse score) within each group.
+ * @param items - The items to sort.
+ * @returns The sorted items.
+ */
+export const sortRelatedFirst = (
+  items: PickerComboBoxItem[]
+): PickerComboBoxItem[] =>
+  [...items].sort((a, b) => {
+    const aRelated = Boolean(a.isRelated);
+    const bRelated = Boolean(b.isRelated);
+    if (aRelated === bRelated) {
+      return 0;
+    }
+    return aRelated ? -1 : 1;
+  });

src/components/chart/ha-sunburst-chart.ts

@@ -6,7 +6,6 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import type { HaECOption } from "../../resources/echarts/echarts";
-import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
 import "./ha-chart-tooltip-marker";
 
@@ -25,8 +24,6 @@ export interface SunburstNode {
 
 @customElement("ha-sunburst-chart")
 export class HaSunburstChart extends LitElement {
-  public hass!: HomeAssistant;
-
   @property({ attribute: false }) public data?: SunburstNode;
 
   @property({ attribute: false }) public valueFormatter?: (

src/components/chart/state-history-charts.ts

@@ -167,7 +167,7 @@ export class StateHistoryCharts extends LitElement {
           )}`}
       ${this.syncCharts && this._hasZoomedCharts
         ? html`<ha-button
-            size="large"
+            size="l"
             class="reset-button"
             @click=${this._handleGlobalZoomReset}
           >

src/components/device/ha-device-picker.ts

@@ -1,25 +1,40 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import { consume, type ContextType } from "@lit/context";
 import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, nothing, type PropertyValues } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceArea } from "../../common/entity/context/get_device_context";
-import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
+import {
+  configEntriesToLookup,
+  type ConfigEntry,
+} from "../../data/config_entries";
+import {
+  configContext,
+  configEntriesContext,
+  internationalizationContext,
+  registriesContext,
+  statesContext,
+  uiContext,
+} from "../../data/context";
 import {
   deviceComboBoxKeys,
   getDevices,
+  type DevicePickerData,
   type DevicePickerItem,
 } from "../../data/device/device_picker";
 import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
-import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 
+const EMPTY_CONFIG_ENTRY_LOOKUP: Record<string, ConfigEntry> = {};
+
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
@@ -28,8 +43,6 @@ export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
 
@@ -93,11 +106,36 @@ export class HaDevicePicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
+  @consume({ context: registriesContext, subscribe: true })
+  private _registries!: ContextType<typeof registriesContext>;
+
+  @consume({ context: statesContext, subscribe: true })
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @consume({ context: uiContext, subscribe: true })
+  private _ui!: ContextType<typeof uiContext>;
+
+  @consume({ context: configContext, subscribe: true })
+  private _config!: ContextType<typeof configContext>;
+
+  @state()
+  @consume({ context: configEntriesContext, subscribe: true })
+  @transform<
+    ContextType<typeof configEntriesContext>,
+    Record<string, ConfigEntry>
+  >({
+    transformer: configEntriesToLookup,
+  })
+  private _configEntryLookup?: Record<string, ConfigEntry>;
 
   private _getDevicesMemoized = memoizeOne(
     (
-      _devices: HomeAssistant["devices"],
+      states: ContextType<typeof statesContext>,
+      registries: ContextType<typeof registriesContext>,
+      i18n: ContextType<typeof internationalizationContext>,
       configEntryLookup: Record<string, ConfigEntry>,
       includeDomains?: string[],
       excludeDomains?: string[],
@@ -108,34 +146,32 @@ export class HaDevicePicker extends LitElement {
       value?: string
     ) =>
       getDevices(
-        this.hass,
+        {
+          ...registries,
+          states,
+          localize: i18n.localize,
+          language: i18n.language,
+          translationMetadata: i18n.translationMetadata,
+        } satisfies DevicePickerData,
         configEntryLookup,
-        includeDomains,
-        excludeDomains,
-        includeDeviceClasses,
-        deviceFilter,
-        entityFilter,
-        excludeDevices,
-        value
+        {
+          includeDomains,
+          excludeDomains,
+          includeDeviceClasses,
+          deviceFilter,
+          entityFilter,
+          excludeDevices,
+          value,
+        }
       )
   );
 
-  protected firstUpdated(_changedProperties: PropertyValues<this>): void {
-    super.firstUpdated(_changedProperties);
-    this._loadConfigEntries();
-  }
-
-  private async _loadConfigEntries() {
-    const configEntries = await getConfigEntries(this.hass);
-    this._configEntryLookup = Object.fromEntries(
-      configEntries.map((entry) => [entry.entry_id, entry])
-    );
-  }
-
   private _getItems = () =>
     this._getDevicesMemoized(
-      this.hass.devices,
-      this._configEntryLookup,
+      this._states,
+      this._registries,
+      this._i18n,
+      this._configEntryLookup ?? EMPTY_CONFIG_ENTRY_LOOKUP,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
@@ -146,47 +182,54 @@ export class HaDevicePicker extends LitElement {
     );
 
   private _valueRenderer = memoizeOne(
-    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
-      const deviceId = value;
-      const device = this.hass.devices[deviceId];
+    (
+      devices: ContextType<typeof registriesContext>["devices"],
+      areas: ContextType<typeof registriesContext>["areas"],
+      darkMode: boolean,
+      hassUrl: string,
+      configEntriesLookup: Record<string, ConfigEntry>
+    ) =>
+      (value: string) => {
+        const deviceId = value;
+        const device = devices[deviceId];
 
-      if (!device) {
-        return html`<span slot="headline">${deviceId}</span>`;
+        if (!device) {
+          return html`<span slot="headline">${deviceId}</span>`;
+        }
+
+        const area = getDeviceArea(device, areas);
+
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const primary = deviceName;
+        const secondary = areaName;
+
+        const configEntry = device.primary_config_entry
+          ? configEntriesLookup[device.primary_config_entry]
+          : undefined;
+
+        return html`
+          ${configEntry
+            ? html`<img
+                slot="start"
+                alt=""
+                crossorigin="anonymous"
+                referrerpolicy="no-referrer"
+                src=${brandsUrl(
+                  {
+                    domain: configEntry.domain,
+                    type: "icon",
+                    darkOptimized: darkMode,
+                  },
+                  hassUrl
+                )}
+              />`
+            : nothing}
+          <span slot="headline">${primary}</span>
+          <span slot="supporting-text">${secondary}</span>
+        `;
       }
-
-      const area = getDeviceArea(device, this.hass.areas);
-
-      const deviceName = device ? computeDeviceName(device) : undefined;
-      const areaName = area ? computeAreaName(area) : undefined;
-
-      const primary = deviceName;
-      const secondary = areaName;
-
-      const configEntry = device.primary_config_entry
-        ? configEntriesLookup[device.primary_config_entry]
-        : undefined;
-
-      return html`
-        ${configEntry
-          ? html`<img
-              slot="start"
-              alt=""
-              crossorigin="anonymous"
-              referrerpolicy="no-referrer"
-              src=${brandsUrl(
-                {
-                  domain: configEntry.domain,
-                  type: "icon",
-                  darkOptimized: this.hass.themes?.darkMode,
-                },
-                this.hass.auth.data.hassUrl
-              )}
-            />`
-          : nothing}
-        <span slot="headline">${primary}</span>
-        <span slot="supporting-text">${secondary}</span>
-      `;
-    }
   );
 
   private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
@@ -202,9 +245,9 @@ export class HaDevicePicker extends LitElement {
                 {
                   domain: item.domain,
                   type: "icon",
-                  darkOptimized: this.hass.themes.darkMode,
+                  darkOptimized: this._ui.themes.darkMode,
                 },
-                this.hass.auth.data.hassUrl
+                this._config.auth.data.hassUrl
               )}
             />
           `
@@ -227,20 +270,25 @@ export class HaDevicePicker extends LitElement {
   protected render() {
     const placeholder =
       this.placeholder ??
-      this.hass.localize("ui.components.device-picker.placeholder");
+      this._i18n.localize("ui.components.device-picker.placeholder");
 
-    const valueRenderer = this._valueRenderer(this._configEntryLookup);
+    const valueRenderer = this._valueRenderer(
+      this._registries.devices,
+      this._registries.areas,
+      this._ui.themes.darkMode,
+      this._config.auth.data.hassUrl,
+      this._configEntryLookup ?? EMPTY_CONFIG_ENTRY_LOOKUP
+    );
 
     return html`
       <ha-generic-picker
-        .hass=${this.hass}
         .autofocus=${this.autofocus}
         .disabled=${this.disabled}
         .helper=${this.helper}
         .label=${this.label}
         .searchLabel=${this.searchLabel}
         .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
+        .emptyLabel=${this._i18n.localize(
           "ui.components.device-picker.no_devices"
         )}
         .placeholder=${placeholder}
@@ -250,7 +298,7 @@ export class HaDevicePicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
         .searchKeys=${deviceComboBoxKeys}
-        .unknownItemText=${this.hass.localize(
+        .unknownItemText=${this._i18n.localize(
           "ui.components.device-picker.unknown"
         )}
         @value-changed=${this._valueChanged}
@@ -272,7 +320,7 @@ export class HaDevicePicker extends LitElement {
   }
 
   private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.device-picker.no_match", {
+    this._i18n.localize("ui.components.device-picker.no_match", {
       term: html`<b>‘${search}’</b>`,
     });
 }

src/components/device/ha-devices-picker.ts

@@ -1,7 +1,7 @@
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { ValueChangedEvent } from "../../types";
 import "./ha-device-picker";
 import type {
   HaDevicePickerDeviceFilterFunc,
@@ -10,8 +10,6 @@ import type {
 
 @customElement("ha-devices-picker")
 class HaDevicesPicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ type: Array }) public value?: string[];
 
   @property() public helper?: string;
@@ -51,10 +49,6 @@ class HaDevicesPicker extends LitElement {
   public entityFilter?: HaDevicePickerEntityFilterFunc;
 
   protected render() {
-    if (!this.hass) {
-      return nothing;
-    }
-
     const currentDevices = this._currentDevices;
     return html`
       ${currentDevices.map(
@@ -62,7 +56,6 @@ class HaDevicesPicker extends LitElement {
           <div>
             <ha-device-picker
               .curValue=${entityId}
-              .hass=${this.hass}
               .deviceFilter=${this.deviceFilter}
               .entityFilter=${this.entityFilter}
               .includeDomains=${this.includeDomains}
@@ -78,7 +71,6 @@ class HaDevicesPicker extends LitElement {
       )}
       <div>
         <ha-device-picker
-          .hass=${this.hass}
           .helper=${this.helper}
           .deviceFilter=${this.deviceFilter}
           .entityFilter=${this.entityFilter}

src/components/entity/ha-entities-picker.ts

@@ -2,12 +2,17 @@ import { mdiDragHorizontalVariant } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
+import {
+  fireEvent,
+  type HASSDomCurrentTargetEvent,
+  type HASSDomEvent,
+} from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
+import type { HaEntityPicker } from "./ha-entity-picker";
 
 @customElement("ha-entities-picker")
 class HaEntitiesPicker extends LitElement {
@@ -151,7 +156,7 @@ class HaEntitiesPicker extends LitElement {
     `;
   }
 
-  private _entityMoved(e: CustomEvent) {
+  private _entityMoved(e: HASSDomEvent<HASSDomEvents["item-moved"]>) {
     e.stopPropagation();
     const { oldIndex, newIndex } = e.detail;
     const currentEntities = this._currentEntities;
@@ -178,7 +183,7 @@ class HaEntitiesPicker extends LitElement {
     return this.value || [];
   }
 
-  private async _updateEntities(entities) {
+  private async _updateEntities(entities: string[]) {
     this.value = entities;
 
     fireEvent(this, "value-changed", {
@@ -186,9 +191,12 @@ class HaEntitiesPicker extends LitElement {
     });
   }
 
-  private _entityChanged(event: ValueChangedEvent<string>) {
+  private _entityChanged(
+    event: ValueChangedEvent<string> &
+      HASSDomCurrentTargetEvent<HaEntityPicker & { curValue: string }>
+  ) {
     event.stopPropagation();
-    const curValue = (event.currentTarget as any).curValue;
+    const curValue = event.currentTarget.curValue;
     const newValue = event.detail.value;
     if (
       newValue === curValue ||
@@ -206,13 +214,15 @@ class HaEntitiesPicker extends LitElement {
     );
   }
 
-  private async _addEntity(event: ValueChangedEvent<string>) {
+  private _addEntity(
+    event: ValueChangedEvent<string> & HASSDomCurrentTargetEvent<HaEntityPicker>
+  ) {
     event.stopPropagation();
     const toAdd = event.detail.value;
     if (!toAdd) {
       return;
     }
-    (event.currentTarget as any).value = "";
+    event.currentTarget.value = "";
     if (!toAdd) {
       return;
     }
@@ -239,6 +249,7 @@ class HaEntitiesPicker extends LitElement {
     }
     .entity ha-entity-picker {
       flex: 1;
+      min-width: var(--ha-entities-picker-entity-min-width, auto);
     }
     .entity-handle {
       padding: 8px;

src/components/entity/ha-entity-name-picker.ts

@@ -117,7 +117,7 @@ export class HaEntityNamePicker extends LitElement {
         <div class="header">
           ${this.label ? html`<label>${this.label}</label>` : nothing}
           <ha-button-toggle-group
-            size="small"
+            size="s"
             .buttons=${modeButtons}
             .active=${this._mode}
             .disabled=${this.disabled}

src/components/entity/ha-entity-picker.ts

@@ -309,7 +309,29 @@ export class HaEntityPicker extends LitElement {
     }
   );
 
-  private _getEntitiesMemoized = memoizeOne(getEntities);
+  private _getEntitiesMemoized = memoizeOne(
+    (
+      hass: HomeAssistant,
+      includeDomains?: string[],
+      excludeDomains?: string[],
+      entityFilter?: HaEntityPickerEntityFilterFunc,
+      includeDeviceClasses?: string[],
+      includeUnitOfMeasurement?: string[],
+      includeEntities?: string[],
+      excludeEntities?: string[],
+      value?: string
+    ) =>
+      getEntities(hass, {
+        includeDomains,
+        excludeDomains,
+        entityFilter,
+        includeDeviceClasses,
+        includeUnitOfMeasurement,
+        includeEntities,
+        excludeEntities,
+        value,
+      })
+  );
 
   private _getItems = () => {
     const items = this._getEntitiesMemoized(

src/components/entity/ha-statistic-picker.ts

@@ -1,11 +1,16 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiChartLine, mdiHelpCircleOutline, mdiShape } from "@mdi/js";
+import {
+  mdiChartLine,
+  mdiHelpCircleOutline,
+  mdiPencil,
+  mdiShape,
+} from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
-import { fireEvent } from "../../common/dom/fire_event";
+import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
 import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -53,6 +58,16 @@ const SEARCH_KEYS = [
   { name: "id", weight: 2 },
 ];
 
+export interface StatisticElementChangedEvent {
+  statisticId: string;
+}
+
+declare global {
+  interface HASSDomEvents {
+    "edit-statistics-element": StatisticElementChangedEvent;
+  }
+}
+
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -130,6 +145,8 @@ export class HaStatisticPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
+  @property({ attribute: "can-edit", type: Boolean }) public canEdit?: boolean;
+
   public willUpdate(changedProps: PropertyValues<this>) {
     if (
       (!this.hasUpdated && !this.statisticIds) ||
@@ -341,6 +358,15 @@ export class HaStatisticPicker extends LitElement {
       ${item.secondary
         ? html`<span slot="supporting-text">${item.secondary}</span>`
         : nothing}
+      ${this.canEdit
+        ? html`<ha-icon-button
+            slot="end"
+            .value=${statisticId}
+            .label=${this.hass.localize("ui.common.edit")}
+            .path=${mdiPencil}
+            @click=${this._editItem}
+          ></ha-icon-button>`
+        : nothing}
     `;
   }
 
@@ -350,6 +376,12 @@ export class HaStatisticPicker extends LitElement {
 
   private _valueRenderer: PickerValueRenderer = this._makeValueRenderer();
 
+  private _editItem(ev: HASSDomEvent<StatisticElementChangedEvent>) {
+    ev.stopPropagation();
+    const statisticId = (ev.currentTarget as any).value;
+    fireEvent(this, "edit-statistics-element", { statisticId });
+  }
+
   private _computeItem(statisticId: string): StatisticComboBoxItem {
     const stateObj = this.hass.states[statisticId];
 

src/components/entity/ha-statistics-picker.ts

@@ -1,9 +1,10 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { fireEvent } from "../../common/dom/fire_event";
+import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
 import type { ValueChangedEvent, HomeAssistant } from "../../types";
 import "./ha-statistic-picker";
+import type { StatisticElementChangedEvent } from "./ha-statistic-picker";
 
 @customElement("ha-statistics-picker")
 class HaStatisticsPicker extends LitElement {
@@ -59,6 +60,8 @@ class HaStatisticsPicker extends LitElement {
   })
   public ignoreRestrictionsOnFirstStatistic = false;
 
+  @property({ attribute: "can-edit", type: Boolean }) public canEdit?;
+
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -99,7 +102,9 @@ class HaStatisticsPicker extends LitElement {
               .statisticIds=${this.statisticIds}
               .excludeStatistics=${this.value}
               .allowCustomEntity=${this.allowCustomEntity}
+              .canEdit=${this.canEdit}
               @value-changed=${this._statisticChanged}
+              @edit-statistics-element=${this._editItem}
             ></ha-statistic-picker>
           </div>
         `
@@ -122,6 +127,17 @@ class HaStatisticsPicker extends LitElement {
     `;
   }
 
+  private _editItem(ev: HASSDomEvent<StatisticElementChangedEvent>) {
+    const statisticId = ev.detail.statisticId;
+    const index = this._currentStatistics!.findIndex((e) => e === statisticId);
+    fireEvent(this, "edit-detail-element", {
+      subElementConfig: {
+        index,
+        type: "row",
+      },
+    });
+  }
+
   private get _currentStatistics() {
     return this.value || [];
   }

src/components/entity/state-badge.ts

@@ -21,6 +21,8 @@ import "../ha-state-icon";
 export class StateBadge extends LitElement {
   public hass?: HomeAssistant;
 
+  @property({ attribute: false }) public hassUrl?: HomeAssistant["hassUrl"];
+
   @property({ attribute: false }) public stateObj?: HassEntity;
 
   @property({ attribute: false }) public overrideIcon?: string;
@@ -136,8 +138,9 @@ export class StateBadge extends LitElement {
           let imageUrl =
             stateObj.attributes.entity_picture_local ||
             stateObj.attributes.entity_picture;
-          if (this.hass) {
-            imageUrl = this.hass.hassUrl(imageUrl);
+          const hassUrl = this.hass?.hassUrl ?? this.hassUrl;
+          if (hassUrl) {
+            imageUrl = hassUrl(imageUrl);
           }
           if (domain === "camera") {
             imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
@@ -180,8 +183,9 @@ export class StateBadge extends LitElement {
         }
       } else if (this.overrideImage) {
         let imageUrl = this.overrideImage;
-        if (this.hass) {
-          imageUrl = this.hass.hassUrl(imageUrl);
+        const hassUrl = this.hass?.hassUrl ?? this.hassUrl;
+        if (hassUrl) {
+          imageUrl = hassUrl(imageUrl);
         }
         backgroundImage = `url(${imageUrl})`;
         this.icon = false;

src/components/entity/state-info.ts

@@ -43,7 +43,6 @@ class StateInfo extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
-                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_changed}
                     capitalize
                   ></ha-relative-time>
@@ -55,7 +54,6 @@ class StateInfo extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
-                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_updated}
                     capitalize
                   ></ha-relative-time>
@@ -63,7 +61,6 @@ class StateInfo extends LitElement {
               </ha-tooltip>
               <ha-relative-time
                 id="relative-time"
-                .hass=${this.hass}
                 .datetime=${this.stateObj.last_changed}
                 capitalize
               ></ha-relative-time>

src/components/ha-absolute-time.ts

@@ -1,18 +1,34 @@
+import { consume } from "@lit/context";
 import { addDays, differenceInMilliseconds, startOfDay } from "date-fns";
+import type { HassConfig } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { transform } from "../common/decorators/transform";
 import { absoluteTime } from "../common/datetime/absolute_time";
-import type { HomeAssistant } from "../types";
+import { configContext, internationalizationContext } from "../data/context";
+import type {
+  HomeAssistantConfig,
+  HomeAssistantInternationalization,
+} from "../types";
 
 const SAFE_MARGIN = 5 * 1000;
 
 @customElement("ha-absolute-time")
 class HaAbsoluteTime extends ReactiveElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public datetime?: string | Date;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: HomeAssistantInternationalization;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<HomeAssistantConfig, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
   private _timeout?: number;
 
   public disconnectedCallback(): void {
@@ -62,13 +78,17 @@ class HaAbsoluteTime extends ReactiveElement {
   }
 
   private _updateAbsolute(): void {
+    if (!this._i18n || !this._config) {
+      return;
+    }
+
     if (!this.datetime) {
-      this.innerHTML = this.hass.localize("ui.components.absolute_time.never");
+      this.innerHTML = this._i18n.localize("ui.components.absolute_time.never");
     } else {
       this.innerHTML = absoluteTime(
         new Date(this.datetime),
-        this.hass.locale,
-        this.hass.config
+        this._i18n.locale,
+        this._config
       );
     }
   }

src/components/ha-area-picker.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { LitElement, html, nothing } from "lit";
@@ -10,9 +11,19 @@ import { computeFloorName } from "../common/entity/compute_floor_name";
 import { getAreaContext } from "../common/entity/context/get_area_context";
 import { areaComboBoxKeys, getAreas } from "../data/area/area_picker";
 import { createAreaRegistryEntry } from "../data/area/area_registry";
+import {
+  apiContext,
+  areasContext,
+  devicesContext,
+  entitiesContext,
+  floorsContext,
+  internationalizationContext,
+  statesContext,
+} from "../data/context";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
+import type { ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-combo-box-item";
 import "./ha-generic-picker";
@@ -26,8 +37,6 @@ const ADD_NEW_ID = "___ADD_NEW___";
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public label?: string;
 
   @property() public value?: string;
@@ -83,16 +92,37 @@ export class HaAreaPicker extends LitElement {
 
   @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
 
+  @consume({ context: apiContext, subscribe: true })
+  private _api!: ContextType<typeof apiContext>;
+
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: statesContext, subscribe: true })
+  private _states!: ContextType<typeof statesContext>;
+
+  @consume({ context: entitiesContext, subscribe: true })
+  private _entities!: ContextType<typeof entitiesContext>;
+
+  @consume({ context: devicesContext, subscribe: true })
+  private _devices!: ContextType<typeof devicesContext>;
+
+  @consume({ context: areasContext, subscribe: true })
+  private _areas!: ContextType<typeof areasContext>;
+
+  @consume({ context: floorsContext, subscribe: true })
+  private _floors!: ContextType<typeof floorsContext>;
+
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
   @state() private _pendingAreaId?: string;
 
-  protected willUpdate(changedProperties: PropertyValues<this>) {
+  protected willUpdate(changedProperties: PropertyValues) {
     if (
       this._pendingAreaId &&
-      changedProperties.has("hass") &&
-      this.hass.areas !== changedProperties.get("hass")?.areas &&
-      this.hass.areas[this._pendingAreaId]
+      changedProperties.has("_areas") &&
+      this._areas[this._pendingAreaId]
     ) {
       this._setValue(this._pendingAreaId);
       this._pendingAreaId = undefined;
@@ -104,13 +134,35 @@ export class HaAreaPicker extends LitElement {
     await this._picker?.open();
   }
 
-  private _getAreasMemoized = memoizeOne(getAreas);
+  private _getAreasMemoized = memoizeOne(
+    (
+      haAreas: ContextType<typeof areasContext>,
+      haFloors: ContextType<typeof floorsContext>,
+      haDevices: ContextType<typeof devicesContext>,
+      haEntities: ContextType<typeof entitiesContext>,
+      haStates: ContextType<typeof statesContext>,
+      includeDomains?: string[],
+      excludeDomains?: string[],
+      includeDeviceClasses?: string[],
+      deviceFilter?: HaDevicePickerDeviceFilterFunc,
+      entityFilter?: HaEntityPickerEntityFilterFunc,
+      excludeAreas?: string[]
+    ) =>
+      getAreas(haAreas, haFloors, haDevices, haEntities, haStates, {
+        includeDomains,
+        excludeDomains,
+        includeDeviceClasses,
+        deviceFilter,
+        entityFilter,
+        excludeAreas,
+      })
+  );
 
   // Recompute value renderer when the areas change
   private _computeValueRenderer = memoizeOne(
-    (_haAreas: HomeAssistant["areas"]): PickerValueRenderer =>
+    (haAreas: ContextType<typeof areasContext>): PickerValueRenderer =>
       (value) => {
-        const area = this.hass.areas[value];
+        const area = haAreas[value];
 
         if (!area) {
           return html`
@@ -119,7 +171,7 @@ export class HaAreaPicker extends LitElement {
           `;
         }
 
-        const { floor } = getAreaContext(area, this.hass.floors);
+        const { floor } = getAreaContext(area, this._floors);
 
         const areaName = area ? computeAreaName(area) : undefined;
         const floorName = floor ? computeFloorName(floor) : undefined;
@@ -143,11 +195,11 @@ export class HaAreaPicker extends LitElement {
 
   private _getItems = () =>
     this._getAreasMemoized(
-      this.hass.areas,
-      this.hass.floors,
-      this.hass.devices,
-      this.hass.entities,
-      this.hass.states,
+      this._areas,
+      this._floors,
+      this._devices,
+      this._entities,
+      this._states,
       this.includeDomains,
       this.excludeDomains,
       this.includeDeviceClasses,
@@ -157,7 +209,7 @@ export class HaAreaPicker extends LitElement {
     );
 
   private _allAreaNames = memoizeOne(
-    (areas: HomeAssistant["areas"]) =>
+    (areas: ContextType<typeof areasContext>) =>
       Object.values(areas)
         .map((area) => computeAreaName(area)?.toLowerCase())
         .filter(Boolean) as string[]
@@ -170,13 +222,13 @@ export class HaAreaPicker extends LitElement {
       return [];
     }
 
-    const allAreas = this._allAreaNames(this.hass.areas);
+    const allAreas = this._allAreaNames(this._areas);
 
     if (searchString && !allAreas.includes(searchString.toLowerCase())) {
       return [
         {
           id: ADD_NEW_ID + searchString,
-          primary: this.hass.localize(
+          primary: this._i18n.localize(
             "ui.components.area-picker.add_new_suggestion",
             {
               name: searchString,
@@ -190,7 +242,7 @@ export class HaAreaPicker extends LitElement {
     return [
       {
         id: ADD_NEW_ID,
-        primary: this.hass.localize("ui.components.area-picker.add_new"),
+        primary: this._i18n.localize("ui.components.area-picker.add_new"),
         icon_path: mdiPlus,
       },
     ];
@@ -198,15 +250,17 @@ export class HaAreaPicker extends LitElement {
 
   protected render(): TemplateResult {
     const baseLabel =
-      this.label ?? this.hass.localize("ui.components.area-picker.area");
-    const valueRenderer = this._computeValueRenderer(this.hass.areas);
+      this.label ?? this._i18n.localize("ui.components.area-picker.area");
+    const areas = this._areas;
+    const floors = this._floors;
+    const valueRenderer = this._computeValueRenderer(areas);
 
     // Only show label if there's no floor
     let label: string | undefined = baseLabel;
     if (this.value && baseLabel) {
-      const area = this.hass.areas[this.value];
+      const area = areas[this.value];
       if (area) {
-        const { floor } = getAreaContext(area, this.hass.floors);
+        const { floor } = getAreaContext(area, floors);
         if (floor) {
           label = undefined;
         }
@@ -215,12 +269,11 @@ export class HaAreaPicker extends LitElement {
 
     return html`
       <ha-generic-picker
-        .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${label}
         .helper=${this.helper}
         .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize("ui.components.area-picker.no_areas")}
+        .emptyLabel=${this._i18n.localize("ui.components.area-picker.no_areas")}
         .disabled=${this.disabled}
         .required=${this.required}
         .value=${this.value}
@@ -229,7 +282,7 @@ export class HaAreaPicker extends LitElement {
         .valueRenderer=${valueRenderer}
         .addButtonLabel=${this.addButtonLabel}
         .searchKeys=${areaComboBoxKeys}
-        .unknownItemText=${this.hass.localize(
+        .unknownItemText=${this._i18n.localize(
           "ui.components.area-picker.unknown"
         )}
         @value-changed=${this._valueChanged}
@@ -248,7 +301,7 @@ export class HaAreaPicker extends LitElement {
     }
 
     if (value.startsWith(ADD_NEW_ID)) {
-      this.hass.loadFragmentTranslation("config");
+      this._i18n.loadFragmentTranslation("config");
 
       const suggestedName = value.substring(ADD_NEW_ID.length);
 
@@ -256,15 +309,15 @@ export class HaAreaPicker extends LitElement {
         suggestedName: suggestedName,
         createEntry: async (values) => {
           try {
-            const area = await createAreaRegistryEntry(this.hass, values);
-            if (this.hass.areas[area.area_id]) {
+            const area = await createAreaRegistryEntry(this._api, values);
+            if (this._areas[area.area_id]) {
               this._setValue(area.area_id);
             } else {
               this._pendingAreaId = area.area_id;
             }
           } catch (err: any) {
             showAlertDialog(this, {
-              title: this.hass.localize(
+              title: this._i18n.localize(
                 "ui.components.area-picker.failed_create_area"
               ),
               text: err.message,
@@ -285,7 +338,7 @@ export class HaAreaPicker extends LitElement {
   }
 
   private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.area-picker.no_match", {
+    this._i18n.localize("ui.components.area-picker.no_match", {
       term: html`<b>‘${search}’</b>`,
     });
 }

src/components/ha-areas-picker.ts

@@ -85,7 +85,6 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
                 <ha-area-picker
                   .curValue=${area}
                   .noAdd=${this.noAdd}
-                  .hass=${this.hass}
                   .value=${area}
                   .label=${this.pickedAreaLabel}
                   .includeDomains=${this.includeDomains}
@@ -112,7 +111,6 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
       <div>
         <ha-area-picker
           .noAdd=${this.noAdd}
-          .hass=${this.hass}
           .label=${this.pickAreaLabel}
           .helper=${this.helper}
           .includeDomains=${this.includeDomains}

src/components/ha-button-toggle-group.ts

@@ -15,7 +15,7 @@ import "./ha-svg-icon";
  *
  * @attr {ToggleButton[]} buttons - the button config
  * @attr {string} active - The value of the currently active button.
- * @attr {("small"|"medium")} size - The size of the buttons in the group.
+ * @attr {("s"|"m")} size - The size of the buttons in the group.
  * @attr {("brand"|"neutral"|"success"|"warning"|"danger")} variant - The variant of the buttons in the group.
  *
  * @fires value-changed - Dispatched when the active button changes.
@@ -26,7 +26,7 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property() public active?: string;
 
-  @property({ reflect: true }) size: "small" | "medium" = "medium";
+  @property({ reflect: true }) size: "s" | "m" = "m";
 
   @property({ type: Boolean, reflect: true, attribute: "no-wrap" })
   public nowrap = false;

src/components/ha-button.ts

@@ -27,7 +27,7 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @cssprop --ha-button-height - The height of the button.
  * @cssprop --ha-button-border-radius - The border radius of the button. defaults to `var(--ha-border-radius-pill)`.
  *
- * @attr {("small"|"medium"|"large")} size - Sets the button size.
+ * @attr {("xs"|"s"|"m"|"l"|"xl")} size - Sets the button size.
  * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default.
  * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
@@ -65,7 +65,7 @@ export class HaButton extends Button {
           box-shadow: var(--ha-button-box-shadow);
         }
 
-        :host([size="small"]) .button {
+        :host([size="s"]) .button {
           --wa-form-control-height: var(
             --ha-button-height,
             var(--button-height, 32px)
@@ -74,7 +74,7 @@ export class HaButton extends Button {
           --wa-form-control-padding-inline: var(--ha-space-3);
         }
 
-        :host([size="large"]) .button {
+        :host([size="l"]) .button {
           --wa-form-control-height: var(
             --ha-button-height,
             var(--button-height, 48px)

src/components/ha-condition-icon.ts

@@ -11,12 +11,15 @@ import {
   mdiStateMachine,
   mdiWeatherSunny,
 } from "@mdi/js";
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import type { HassConfig, Connection } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
 import { conditionIcon, FALLBACK_DOMAIN_ICONS } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -36,12 +39,24 @@ export const CONDITION_ICONS = {
 
 @customElement("ha-condition-icon")
 export class HaConditionIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public condition?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -51,13 +66,13 @@ export class HaConditionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
     const icon = conditionIcon(
-      this.hass.connection,
-      this.hass.config,
+      this._connection,
+      this._config,
       this.condition
     ).then((icn) => {
       if (icn) {

src/components/ha-duration-input.ts

@@ -61,7 +61,7 @@ export class HaDurationInput extends LitElement {
         ${this.allowNegative
           ? html`
               <ha-button-toggle-group
-                size="small"
+                size="s"
                 .buttons=${[
                   { label: "+", iconPath: mdiPlusThick, value: "+" },
                   { label: "-", iconPath: mdiMinusThick, value: "-" },

src/components/ha-expansion-panel.ts

@@ -107,6 +107,7 @@ export class HaExpansionPanel extends LitElement {
     }
     const newExpanded = !this.expanded;
     fireEvent(this, "expanded-will-change", { expanded: newExpanded });
+
     this._container.style.overflow = "hidden";
 
     if (newExpanded) {

src/components/ha-file-upload.ts

@@ -120,7 +120,7 @@ export class HaFileUpload extends LitElement {
             @dragend=${this._handleDragEnd}
             >${!this.value
               ? html`<ha-button
-                    size="small"
+                    size="s"
                     appearance="filled"
                     @click=${this._openFilePicker}
                   >

src/components/ha-filter-blueprints.ts

@@ -3,6 +3,8 @@ import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import { deepEqual } from "../common/util/deep-equal";
 import type { Blueprints } from "../data/blueprint";
@@ -20,6 +22,10 @@ import "./ha-list";
 export class HaFilterBlueprints extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   @property({ attribute: false }) public value?: string[];
 
   @property() public type?: "automation" | "script";
@@ -54,7 +60,7 @@ export class HaFilterBlueprints extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.blueprint.caption")}
+          ${this._localize("ui.panel.config.blueprint.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

src/components/ha-filter-devices.ts

@@ -1,5 +1,5 @@
 import { mdiFilterVariantRemove } from "@mdi/js";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -9,14 +9,18 @@ import { stringCompare } from "../common/string/compare";
 import { deepEqual } from "../common/util/deep-equal";
 import type { RelatedResult } from "../data/search";
 import { findRelated } from "../data/search";
-import { haStyleScrollbar } from "../resources/styles";
-import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
-import "./ha-check-list-item";
 import "./ha-expansion-panel";
-import "./ha-list";
 import "./input/ha-input-search";
 import type { HaInputSearch } from "./input/ha-input-search";
+import "./item/ha-list-item-option";
+import "./list/ha-list-selectable-virtualized";
+import type { HaListSelectableVirtualized } from "./list/ha-list-selectable-virtualized";
+import type { HaListVirtualizedItem } from "./list/ha-list-virtualized";
+
+interface HaFilterDevicesItem extends HaListVirtualizedItem {
+  name: string;
+}
 
 @customElement("ha-filter-devices")
 export class HaFilterDevices extends LitElement {
@@ -34,15 +38,12 @@ export class HaFilterDevices extends LitElement {
 
   @state() private _filter?: string;
 
-  @query("ha-list") private _list?: HTMLElement;
+  @query("ha-list-selectable-virtualized")
+  private _listElement?: HaListSelectableVirtualized;
 
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
 
-    if (!this.hasUpdated) {
-      loadVirtualizer();
-    }
-
     if (
       properties.has("value") &&
       !deepEqual(this.value, properties.get("value"))
@@ -51,6 +52,20 @@ export class HaFilterDevices extends LitElement {
     }
   }
 
+  protected updated(changed: PropertyValues<this>) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded || !this._listElement) {
+          return;
+        }
+        this._listElement.style.height = `${this.clientHeight - 49 - 4 - 38}px`;
+        // 49px - height of a header + 1px
+        // 4px - padding-top of the search-input
+        // 38px - height of the search input
+      }, 300);
+    }
+  }
+
   protected render() {
     return html`
       <ha-expansion-panel
@@ -66,6 +81,7 @@ export class HaFilterDevices extends LitElement {
                 <ha-icon-button
                   .path=${mdiFilterVariantRemove}
                   @click=${this._clearFilter}
+                  @keydown=${this._handleClearFilterKeydown}
                 ></ha-icon-button>`
             : nothing}
         </div>
@@ -74,75 +90,45 @@ export class HaFilterDevices extends LitElement {
                 appearance="outlined"
                 .value=${this._filter}
                 @input=${this._handleSearchChange}
+                @keydown=${this._handleSearchKeydown}
               >
               </ha-input-search>
-              <ha-list class="ha-scrollbar" multi>
-                <lit-virtualizer
-                  .items=${this._devices(
-                    this.hass.devices,
-                    this._filter || "",
-                    this.value
-                  )}
-                  .keyFunction=${this._keyFunction}
-                  .renderItem=${this._renderItem}
-                  @click=${this._handleItemClick}
-                  @keydown=${this._handleItemKeydown}
-                >
-                </lit-virtualizer>
-              </ha-list>`
+              <ha-list-selectable-virtualized
+                multi
+                .rows=${this._devices(this.hass.devices, this._filter || "")}
+                .rowRenderer=${this._renderItem}
+                @ha-list-item-selected=${this._handleAdded}
+                @ha-list-item-deselected=${this._handleRemoved}
+              ></ha-list-selectable-virtualized>`
           : nothing}
       </ha-expansion-panel>
     `;
   }
 
-  private _keyFunction = (device) => device?.id;
-
-  private _renderItem = (device) =>
-    !device
+  private _renderItem = (item?: HaFilterDevicesItem) =>
+    !item
       ? nothing
-      : html`<ha-check-list-item
-          tabindex="0"
-          .value=${device.id}
-          .selected=${this.value?.includes(device.id) ?? false}
+      : html`<ha-list-item-option
+          style="width: 100%;"
+          appearance="checkbox"
+          selection-position="end"
+          .value=${item.id}
+          .selected=${this.value?.includes(item.id) ?? false}
         >
-          ${computeDeviceNameDisplay(
-            device,
-            this.hass.localize,
-            this.hass.states
-          )}
-        </ha-check-list-item>`;
+          <span slot="headline">${item.name}</span>
+        </ha-list-item-option>`;
 
-  private _handleItemKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.preventDefault();
-      this._handleItemClick(ev);
-    }
+  private _handleAdded(ev: CustomEvent<number>) {
+    this.value = [
+      ...(this.value ?? []),
+      this._devices(this.hass.devices, this._filter || "")[ev.detail].id,
+    ];
   }
 
-  private _handleItemClick(ev) {
-    const listItem = ev.target.closest("ha-check-list-item");
-    const value = listItem?.value;
-    if (!value) {
-      return;
-    }
-    if (this.value?.includes(value)) {
-      this.value = this.value?.filter((val) => val !== value);
-    } else {
-      this.value = [...(this.value || []), value];
-    }
-    listItem.selected = this.value?.includes(value);
-  }
-
-  protected updated(changed: PropertyValues<this>) {
-    if (changed.has("expanded") && this.expanded) {
-      setTimeout(() => {
-        if (!this.expanded) return;
-        this._list!.style.height = `${this.clientHeight - 49 - 4 - 32}px`;
-        // 49px - height of a header + 1px
-        // 4px - padding-top of the search-input
-        // 32px - height of the search input
-      }, 300);
-    }
+  private _handleRemoved(ev: CustomEvent<number>) {
+    const id = this._devices(this.hass.devices, this._filter || "")[ev.detail]
+      .id;
+    this.value = (this.value ?? []).filter((deviceId) => deviceId !== id);
   }
 
   private _expandedWillChange(ev) {
@@ -155,30 +141,38 @@ export class HaFilterDevices extends LitElement {
 
   private _handleSearchChange(ev: InputEvent) {
     const target = ev.target as HaInputSearch;
-    this._filter = (target.value ?? "").toLowerCase();
+    this._filter = target.value ?? "";
+  }
+
+  private _handleSearchKeydown(ev: KeyboardEvent) {
+    if (ev.key === "ArrowDown" && this._listElement) {
+      ev.preventDefault();
+      this._listElement.focus();
+    }
   }
 
   private _devices = memoizeOne(
-    (devices: HomeAssistant["devices"], filter: string, _value) => {
+    (
+      devices: HomeAssistant["devices"],
+      filter: string
+    ): HaFilterDevicesItem[] => {
       const values = Object.values(devices);
       return values
+        .map((device) => ({
+          id: device.id,
+          interactive: true,
+          name: computeDeviceNameDisplay(
+            device,
+            this.hass.localize,
+            this.hass.states
+          ),
+        }))
         .filter(
-          (device) =>
-            !filter ||
-            computeDeviceNameDisplay(
-              device,
-              this.hass.localize,
-              this.hass.states
-            )
-              .toLowerCase()
-              .includes(filter)
+          ({ name }) =>
+            !filter || name.toLowerCase().includes(filter.toLowerCase())
         )
         .sort((a, b) =>
-          stringCompare(
-            computeDeviceNameDisplay(a, this.hass.localize, this.hass.states),
-            computeDeviceNameDisplay(b, this.hass.localize, this.hass.states),
-            this.hass.locale.language
-          )
+          stringCompare(a.name, b.name, this.hass.locale.language)
         );
     }
   );
@@ -217,6 +211,13 @@ export class HaFilterDevices extends LitElement {
     });
   }
 
+  private _handleClearFilterKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._clearFilter(ev);
+    }
+  }
+
   private _clearFilter(ev) {
     ev.preventDefault();
     this.value = undefined;
@@ -224,58 +225,61 @@ export class HaFilterDevices extends LitElement {
       value: undefined,
       items: undefined,
     });
+    this._listElement?.clearSelection();
   }
 
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleScrollbar,
-      css`
-        :host {
-          border-bottom: 1px solid var(--divider-color);
-        }
-        :host([expanded]) {
-          flex: 1;
-          height: 0;
-        }
+  static styles = css`
+    :host {
+      border-bottom: 1px solid var(--divider-color);
+    }
+    :host([expanded]) {
+      flex: 1;
+      height: 0;
+      display: flex;
+      flex-direction: column;
+    }
 
-        ha-expansion-panel {
-          --ha-card-border-radius: var(--ha-border-radius-square);
-          --expansion-panel-content-padding: 0;
-        }
-        .header {
-          display: flex;
-          align-items: center;
-        }
-        .header ha-icon-button {
-          margin-inline-start: auto;
-          margin-inline-end: 8px;
-        }
-        .badge {
-          display: inline-block;
-          margin-left: 8px;
-          margin-inline-start: 8px;
-          margin-inline-end: 0;
-          min-width: 16px;
-          box-sizing: border-box;
-          border-radius: var(--ha-border-radius-circle);
-          font-size: var(--ha-font-size-xs);
-          font-weight: var(--ha-font-weight-normal);
-          background-color: var(--primary-color);
-          line-height: var(--ha-line-height-normal);
-          text-align: center;
-          padding: 0px 2px;
-          color: var(--text-primary-color);
-        }
-        ha-check-list-item {
-          width: 100%;
-        }
-        ha-input-search {
-          display: block;
-          padding: var(--ha-space-1) var(--ha-space-2) 0;
-        }
-      `,
-    ];
-  }
+    ha-expansion-panel {
+      --ha-card-border-radius: var(--ha-border-radius-square);
+      --expansion-panel-content-padding: 0;
+    }
+    :host([expanded]) ha-expansion-panel {
+      flex: 1;
+      min-height: 0;
+    }
+    ha-list-selectable-virtualized {
+      flex: 1;
+      min-height: 0;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+    }
+    .header ha-icon-button {
+      margin-inline-start: auto;
+      margin-inline-end: 8px;
+    }
+    .badge {
+      display: inline-block;
+      margin-left: 8px;
+      margin-inline-start: 8px;
+      margin-inline-end: 0;
+      min-width: 16px;
+      box-sizing: border-box;
+      border-radius: var(--ha-border-radius-circle);
+      font-size: var(--ha-font-size-xs);
+      font-weight: var(--ha-font-weight-normal);
+      background-color: var(--primary-color);
+      line-height: var(--ha-line-height-normal);
+      text-align: center;
+      padding: 0px 2px;
+      color: var(--text-primary-color);
+    }
+    ha-input-search {
+      display: block;
+      padding: var(--ha-space-1) var(--ha-space-2) 0;
+    }
+  `;
 }
 
 declare global {

src/components/ha-filter-floor-areas.ts

@@ -23,7 +23,6 @@ import "./item/ha-list-item-option";
 import type { HaListItemOption } from "./item/ha-list-item-option";
 import "./list/ha-list-selectable";
 import type { HaListSelectable } from "./list/ha-list-selectable";
-import type { HaListSelectedDetail } from "./list/types";
 
 @customElement("ha-filter-floor-areas")
 export class HaFilterFloorAreas extends LitElement {
@@ -42,7 +41,7 @@ export class HaFilterFloorAreas extends LitElement {
 
   @state() private _shouldRender = false;
 
-  @query("ha-list-selectable") private _list?: HTMLElement;
+  @query("ha-list-selectable") private _list?: HaListSelectable;
 
   public willUpdate(properties: PropertyValues<this>) {
     super.willUpdate(properties);
@@ -75,6 +74,7 @@ export class HaFilterFloorAreas extends LitElement {
                 <ha-icon-button
                   .path=${mdiFilterVariantRemove}
                   @click=${this._clearFilter}
+                  @keydown=${this._handleClearFilterKeydown}
                 ></ha-icon-button>`
             : nothing}
         </div>
@@ -83,7 +83,8 @@ export class HaFilterFloorAreas extends LitElement {
               <ha-list-selectable
                 class="ha-scrollbar"
                 multi
-                @ha-list-selected=${this._handleListChanged}
+                @ha-list-item-selected=${this._handleAdded}
+                @ha-list-item-deselected=${this._handleRemoved}
                 aria-label=${this.hass.localize(
                   "ui.panel.config.areas.caption"
                 )}
@@ -163,46 +164,47 @@ export class HaFilterFloorAreas extends LitElement {
     `;
   }
 
-  private _handleListChanged(ev: CustomEvent<HaListSelectedDetail>) {
-    if (!ev.detail.diff?.added.size && !ev.detail.diff?.removed.size) {
+  private _handleAdded(ev: CustomEvent<number>) {
+    if (!this.value) {
+      this.value = {};
+    }
+
+    const addedItem = (ev.currentTarget as HaListSelectable).items[
+      ev.detail
+    ] as HaListItemOption & { type: string; value: string };
+
+    if (!addedItem) {
       return;
     }
 
-    if (ev.detail.diff?.added.size) {
-      const addedIndex = ev.detail.diff.added.values().next().value;
-      if (addedIndex === undefined) {
-        return;
-      }
-      const addedItem = (ev.currentTarget as HaListSelectable).items[
-        addedIndex
-      ] as HaListItemOption & { type: string; value: string };
+    this.value = {
+      ...this.value,
+      [addedItem.type]: [
+        ...(this.value[addedItem.type] || []),
+        addedItem.value,
+      ],
+    };
+  }
 
-      if (!this.value) {
-        this.value = {};
-      }
-      this.value = {
-        ...this.value,
-        [addedItem.type]: [
-          ...(this.value[addedItem.type] || []),
-          addedItem.value,
-        ],
-      };
-    } else {
-      const removedIndex = ev.detail.diff?.removed.values().next().value;
-      if (removedIndex === undefined) {
-        return;
-      }
-      const removedItem = (ev.currentTarget as HaListSelectable).items[
-        removedIndex
-      ] as HaListItemOption & { type: string; value: string };
-
-      this.value = {
-        ...this.value,
-        [removedItem.type]: this.value![removedItem.type].filter(
-          (val) => val !== removedItem.value
-        ),
-      };
+  private _handleRemoved(ev: CustomEvent<number>) {
+    if (!this.value) {
+      return;
     }
+
+    const removedItem = (ev.currentTarget as HaListSelectable).items[
+      ev.detail
+    ] as HaListItemOption & { type: string; value: string };
+
+    if (!removedItem) {
+      return;
+    }
+
+    this.value = {
+      ...this.value,
+      [removedItem.type]: this.value![removedItem.type].filter(
+        (val) => val !== removedItem.value
+      ),
+    };
   }
 
   protected updated(changed: PropertyValues<this>) {
@@ -286,6 +288,13 @@ export class HaFilterFloorAreas extends LitElement {
     });
   }
 
+  private _handleClearFilterKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._clearFilter(ev);
+    }
+  }
+
   private _clearFilter(ev) {
     ev.preventDefault();
     this.value = undefined;
@@ -293,6 +302,7 @@ export class HaFilterFloorAreas extends LitElement {
       value: undefined,
       items: undefined,
     });
+    this._list?.clearSelection();
   }
 
   static get styles(): CSSResultGroup {

src/components/ha-filter-integrations.ts

@@ -1,17 +1,19 @@
 import type { SelectedDetail } from "@material/mwc-list";
+import { consume, type ContextType } from "@lit/context";
 import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
 import type { LocalizeFunc } from "../common/translations/localize";
+import { internationalizationContext, manifestsContext } from "../data/context";
 import type { IntegrationManifest } from "../data/integration";
-import { domainToName, fetchIntegrationManifests } from "../data/integration";
+import { domainToName } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
 import "./ha-domain-icon";
 import "./ha-expansion-panel";
@@ -21,15 +23,26 @@ import type { HaInputSearch } from "./input/ha-input-search";
 
 @customElement("ha-filter-integrations")
 export class HaFilterIntegrations extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public value?: string[];
 
   @property({ type: Boolean }) public narrow = false;
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _manifests?: IntegrationManifest[];
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
+  @consume({ context: manifestsContext, subscribe: true })
+  @state()
+  private _manifests?: ContextType<typeof manifestsContext>;
+
+  private _manifestList = memoizeOne(
+    (manifests: ContextType<typeof manifestsContext>) =>
+      Object.values(manifests)
+  );
 
   @state() private _shouldRender = false;
 
@@ -38,6 +51,10 @@ export class HaFilterIntegrations extends LitElement {
   @query("ha-list") private _list?: HTMLElement;
 
   protected render() {
+    const manifests = this._manifests
+      ? this._manifestList(this._manifests)
+      : undefined;
+
     return html`
       <ha-expansion-panel
         left-chevron
@@ -46,7 +63,7 @@ export class HaFilterIntegrations extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize("ui.panel.config.integrations.caption")}
+          ${this._localize("ui.panel.config.integrations.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button
@@ -55,7 +72,7 @@ export class HaFilterIntegrations extends LitElement {
                 ></ha-icon-button>`
             : nothing}
         </div>
-        ${this._manifests && this._shouldRender
+        ${manifests && this._shouldRender
           ? html`<ha-input-search
                 appearance="outlined"
                 .value=${this._filter}
@@ -69,10 +86,11 @@ export class HaFilterIntegrations extends LitElement {
               >
                 ${repeat(
                   this._integrations(
-                    this.hass.localize,
-                    this._manifests,
+                    this._localize,
+                    manifests,
                     this._filter,
-                    this.value
+                    this.value,
+                    this._i18n.locale.language
                   ),
                   (i) => i.domain,
                   (integration) =>
@@ -117,9 +135,8 @@ export class HaFilterIntegrations extends LitElement {
     this.expanded = ev.detail.expanded;
   }
 
-  protected async firstUpdated() {
-    this._manifests = await fetchIntegrationManifests(this.hass);
-    this.hass.loadBackendTranslation("title");
+  protected firstUpdated() {
+    this._i18n.loadBackendTranslation("title");
   }
 
   private _integrations = memoizeOne(
@@ -127,7 +144,8 @@ export class HaFilterIntegrations extends LitElement {
       localize: LocalizeFunc,
       manifest: IntegrationManifest[],
       filter: string | undefined,
-      _value
+      _value: string[] | undefined,
+      language: string
     ) =>
       manifest
         .map((mnfst) => ({
@@ -144,17 +162,20 @@ export class HaFilterIntegrations extends LitElement {
               mnfst.name.toLowerCase().includes(filter) ||
               mnfst.domain.toLowerCase().includes(filter))
         )
-        .sort((a, b) =>
-          stringCompare(a.name, b.name, this.hass.locale.language)
-        )
+        .sort((a, b) => stringCompare(a.name, b.name, language))
   );
 
   private _itemSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
+    if (!this._manifests) {
+      return;
+    }
+
     const integrations = this._integrations(
-      this.hass.localize,
-      this._manifests!,
+      this._localize,
+      this._manifestList(this._manifests),
       this._filter,
-      this.value
+      this.value,
+      this._i18n.locale.language
     );
 
     const visibleDomains = new Set(integrations.map((i) => i.domain));

src/components/ha-filter-voice-assistants.ts

@@ -4,6 +4,8 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -22,6 +24,10 @@ import "../panels/config/voice-assistants/expose/expose-assistant-icon";
 export class HaFilterVoiceAssistants extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   // the list of selected voiceAssistantIds
   @property({ attribute: false }) public value: string[] = [];
 
@@ -44,9 +50,7 @@ export class HaFilterVoiceAssistants extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this.hass.localize(
-            "ui.panel.config.dashboard.voice_assistants.main"
-          )}
+          ${this._localize("ui.panel.config.dashboard.voice_assistants.main")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

src/components/ha-form/ha-form-optional_actions.ts

@@ -129,7 +129,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
               @wa-select=${this._handleAddAction}
               @closed=${stopPropagation}
             >
-              <ha-button slot="trigger" appearance="filled" size="small">
+              <ha-button slot="trigger" appearance="filled" size="s">
                 <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
                 ${this.localize?.("ui.components.form-optional-actions.add") ||
                 "Add interaction"}

src/components/ha-generic-picker.ts

@@ -174,7 +174,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
           <slot name="field">
             ${this.addButtonLabel && !this.value
               ? html`<ha-button
-                  size="small"
+                  size="s"
                   appearance="filled"
                   @click=${this.open}
                   .disabled=${this.disabled}

src/components/ha-icon-button-arrow-prev.ts

@@ -3,13 +3,12 @@ import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mainWindow } from "../common/dom/get_main_window";
-import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 
 @customElement("ha-icon-button-arrow-prev")
 export class HaIconButtonArrowPrev extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ type: Boolean }) public disabled = false;
 
   @property() public label?: string;
@@ -25,11 +24,15 @@ export class HaIconButtonArrowPrev extends LitElement {
   @state() private _icon =
     mainWindow.document.dir === "rtl" ? mdiArrowRight : mdiArrowLeft;
 
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   protected render(): TemplateResult {
     return html`
       <ha-icon-button
         .disabled=${this.disabled}
-        .label=${this.label || this.hass?.localize("ui.common.back") || "Back"}
+        .label=${this.label || this._localize("ui.common.back") || "Back"}
         .path=${this._icon}
         .href=${this.href}
         .target=${this.target}

src/components/ha-label.ts

@@ -50,7 +50,9 @@ class HaLabel extends LitElement {
       <div class="container" .id=${this._elementId}>
         <span class="content">
           <slot name="icon"></slot>
-          <slot></slot>
+          <span class="label-content">
+            <slot></slot>
+          </span>
         </span>
       </div>
     `;
@@ -113,6 +115,10 @@ class HaLabel extends LitElement {
           display: inline-flex;
         }
 
+        .label-content {
+          display: contents;
+        }
+
         :host([dense]) {
           height: 20px;
           border-radius: var(--ha-border-radius-md);
@@ -126,6 +132,29 @@ class HaLabel extends LitElement {
           margin-inline-start: -4px;
           margin-inline-end: 4px;
         }
+
+        :host(.text-ellipsis) {
+          max-width: 100%;
+          min-width: 0;
+        }
+        :host(.text-ellipsis) .container {
+          min-width: 0;
+          overflow: hidden;
+        }
+        :host(.text-ellipsis) span.content {
+          display: flex;
+          width: 100%;
+          min-width: 0;
+        }
+        :host(.text-ellipsis) .label-content {
+          display: block;
+          flex: 1;
+          min-width: 0;
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       `,
     ];
   }

src/components/ha-labels-picker.ts

@@ -171,7 +171,7 @@ export class HaLabelsPicker extends LitElement {
             : nothing}
           <ha-button
             id="picker"
-            size="small"
+            size="s"
             appearance="filled"
             @click=${this._openPicker}
             .disabled=${this.disabled}

src/components/ha-lawn_mower-action-button.ts

@@ -53,7 +53,7 @@ class HaLawnMowerActionButton extends LitElement {
           appearance="plain"
           @click=${this.callService}
           .service=${action.service}
-          size="small"
+          size="s"
         >
           ${this.hass.localize(`ui.card.lawn_mower.actions.${action.action}`)}
         </ha-button>

src/components/ha-picture-upload.ts

@@ -102,7 +102,7 @@ export class HaPictureUpload extends LitElement {
         <div>
           <ha-button
             appearance="plain"
-            size="small"
+            size="s"
             variant="danger"
             @click=${this._handleChangeClick}
           >

src/components/ha-relative-time.ts

@@ -1,19 +1,23 @@
+import { consume } from "@lit/context";
 import { parseISO } from "date-fns";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { relativeTime } from "../common/datetime/relative_time";
 import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
-import type { HomeAssistant } from "../types";
+import { internationalizationContext } from "../data/context";
+import type { HomeAssistantInternationalization } from "../types";
 
 @customElement("ha-relative-time")
 class HaRelativeTime extends ReactiveElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public datetime?: string | Date;
 
   @property({ type: Boolean }) public capitalize = false;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n?: HomeAssistantInternationalization;
+
   private _interval?: number;
 
   public disconnectedCallback(): void {
@@ -57,15 +61,19 @@ class HaRelativeTime extends ReactiveElement {
   }
 
   private _updateRelative(): void {
+    if (!this._i18n) {
+      return;
+    }
+
     if (!this.datetime) {
-      this.innerHTML = this.hass.localize("ui.components.relative_time.never");
+      this.innerHTML = this._i18n.localize("ui.components.relative_time.never");
     } else {
       const date =
         typeof this.datetime === "string"
           ? parseISO(this.datetime)
           : this.datetime;
 
-      const relTime = relativeTime(date, this.hass.locale);
+      const relTime = relativeTime(date, this._i18n.locale);
       this.innerHTML = this.capitalize
         ? capitalizeFirstLetter(relTime)
         : relTime;

src/components/ha-selector/ha-selector-area.ts

@@ -91,7 +91,6 @@ export class HaAreaSelector extends LitElement {
     if (!this.selector.area?.multiple) {
       return html`
         <ha-area-picker
-          .hass=${this.hass}
           .value=${this.value}
           .label=${this.label}
           .helper=${this.helper}

src/components/ha-selector/ha-selector-attribute.ts

@@ -1,11 +1,13 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { ensureArray } from "../../common/array/ensure-array";
+import { consumeEntityStates } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { AttributeSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../entity/ha-entity-attribute-picker";
-import { ensureArray } from "../../common/array/ensure-array";
 
 @customElement("ha-selector-attribute")
 export class HaSelectorAttribute extends LitElement {
@@ -27,6 +29,10 @@ export class HaSelectorAttribute extends LitElement {
     filter_entity?: string | string[];
   };
 
+  @state()
+  @consumeEntityStates({ entityIdPath: ["context", "filter_entity"] })
+  private _filterEntityStates?: Record<string, HassEntity>;
+
   protected render() {
     return html`
       <ha-entity-attribute-picker
@@ -73,7 +79,7 @@ export class HaSelectorAttribute extends LitElement {
       const entityIds = ensureArray(this.context.filter_entity);
 
       invalid = !entityIds.some((entityId) => {
-        const stateObj = this.hass.states[entityId];
+        const stateObj = this._filterEntityStates?.[entityId];
         return (
           stateObj &&
           this.value in stateObj.attributes &&

src/components/ha-selector/ha-selector-boolean.ts

@@ -1,15 +1,12 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-switch";
 import "../ha-input-helper-text";
 
 @customElement("ha-selector-boolean")
 export class HaBooleanSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ type: Boolean }) public value = false;
 
   @property() public placeholder?: any;

src/components/ha-selector/ha-selector-button-toggle.ts

@@ -1,14 +1,26 @@
+import { consume } from "@lit/context";
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { transform } from "../../common/decorators/transform";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import type { ButtonToggleSelector, SelectOption } from "../../data/selector";
-import type { HomeAssistant, ToggleButton } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type {
+  HomeAssistantInternationalization,
+  ToggleButton,
+} from "../../types";
 import "../ha-button-toggle-group";
 
 @customElement("ha-selector-button_toggle")
 export class HaButtonToggleSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: ButtonToggleSelector;
 
@@ -48,11 +60,7 @@ export class HaButtonToggleSelector extends LitElement {
 
     if (this.selector.button_toggle?.sort) {
       options.sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a.label,
-          b.label,
-          this.hass.locale.language
-        )
+        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
       );
     }
 

src/components/ha-selector/ha-selector-choose.ts

@@ -2,10 +2,12 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isTemplate } from "../../common/string/has-template";
 import type { ChooseSelector, Selector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-button-toggle-group";
 import "./ha-selector";
 
@@ -28,6 +30,9 @@ export class HaChooseSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   @state() public _activeChoice?: string;
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
@@ -58,11 +63,11 @@ export class HaChooseSelector extends LitElement {
     return html`<div class="multi-header">
         <span>${this.label}${this.required ? "*" : ""}</span>
         <ha-button-toggle-group
-          size="small"
+          size="s"
           .buttons=${this._toggleButtons(
             this.selector.choose.choices,
             this.selector.choose.translation_key,
-            this.hass.localize
+            this._localize
           )}
           .active=${this._activeChoice}
           @value-changed=${this._choiceChanged}
@@ -83,7 +88,7 @@ export class HaChooseSelector extends LitElement {
     (
       choices: ChooseSelector["choose"]["choices"],
       translationKey?: string,
-      _localize?: HomeAssistant["localize"]
+      _localize?: LocalizeFunc
     ) =>
       Object.keys(choices).map((choice) => ({
         label:

src/components/ha-selector/ha-selector-date.ts

@@ -1,13 +1,22 @@
+import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { transform } from "../../common/decorators/transform";
 import type { DateSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type { HomeAssistantInternationalization } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 
 @customElement("ha-selector-date")
 export class HaDateSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: DateSelector;
 
@@ -31,7 +40,7 @@ export class HaDateSelector extends LitElement {
     return html`
       <ha-date-input
         .label=${this.label}
-        .locale=${this.hass.locale}
+        .locale=${this._locale}
         .disabled=${this.disabled}
         .value=${typeof this.value === "string" ? this.value : undefined}
         .required=${this.required}

src/components/ha-selector/ha-selector-datetime.ts

@@ -1,8 +1,12 @@
+import { consume } from "@lit/context";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { transform } from "../../common/decorators/transform";
 import type { DateTimeSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type { HomeAssistantInternationalization } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 import "../ha-time-input";
@@ -11,7 +15,12 @@ import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: DateTimeSelector;
 
@@ -41,7 +50,7 @@ export class HaDateTimeSelector extends LitElement {
       <div class="input">
         <ha-date-input
           .label=${this.label}
-          .locale=${this.hass.locale}
+          .locale=${this._locale}
           .disabled=${this.disabled}
           .required=${this.required}
           .value=${values?.[0]}
@@ -51,7 +60,7 @@ export class HaDateTimeSelector extends LitElement {
         <ha-time-input
           enable-second
           .value=${values?.[1] || "00:00:00"}
-          .locale=${this.hass.locale}
+          .locale=${this._locale}
           .disabled=${this.disabled}
           .required=${this.required}
           @value-changed=${this._valueChanged}

src/components/ha-selector/ha-selector-device.ts

@@ -96,7 +96,6 @@ export class HaDeviceSelector extends LitElement {
     if (!this.selector.device?.multiple) {
       return html`
         <ha-device-picker
-          .hass=${this.hass}
           .value=${this.value}
           .label=${this.label}
           .helper=${this.helper}
@@ -114,7 +113,6 @@ export class HaDeviceSelector extends LitElement {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : ""}
       <ha-devices-picker
-        .hass=${this.hass}
         .value=${this.value}
         .helper=${this.helper}
         .deviceFilter=${this._filterDevices}

src/components/ha-selector/ha-selector-duration.ts

@@ -2,14 +2,11 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { DurationSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-duration-input";
 import type { HaDurationData, HaDurationInput } from "../ha-duration-input";
 
 @customElement("ha-selector-duration")
 export class HaTimeDuration extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public selector!: DurationSelector;
 
   @property({ attribute: false }) public value?:

src/components/ha-selector/ha-selector-file.ts

@@ -3,10 +3,12 @@ import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { removeFile, uploadFile } from "../../data/file_upload";
 import type { FileSelector } from "../../data/selector";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-file-upload";
 
 @customElement("ha-selector-file")
@@ -25,6 +27,9 @@ export class HaFileSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   @state() private _filename?: { fileId: string; name: string };
 
   @state() private _busy = false;
@@ -42,7 +47,7 @@ export class HaFileSelector extends LitElement {
         .uploading=${this._busy}
         .value=${this.value
           ? this._filename?.name ||
-            this.hass.localize("ui.components.selectors.file.unknown_file")
+            this._localize!("ui.components.selectors.file.unknown_file")
           : undefined}
         @file-picked=${this._uploadFile}
         @change=${this._removeFile}
@@ -72,7 +77,7 @@ export class HaFileSelector extends LitElement {
       fireEvent(this, "value-changed", { value: fileId });
     } catch (err: any) {
       showAlertDialog(this, {
-        text: this.hass.localize("ui.components.selectors.file.upload_failed", {
+        text: this._localize!("ui.components.selectors.file.upload_failed", {
           reason: err.message || err,
         }),
       });

src/components/ha-selector/ha-selector-media.ts

@@ -190,7 +190,7 @@ export class HaMediaSelector extends LitElement {
               ? html`<div>
                   <ha-button
                     appearance="plain"
-                    size="small"
+                    size="s"
                     variant="danger"
                     @click=${this._clearValue}
                   >

src/components/ha-selector/ha-selector-numeric-threshold.ts

@@ -307,7 +307,7 @@ export class HaNumericThresholdSelector extends LitElement {
               >`
             : nothing}
           <ha-button-toggle-group
-            size="small"
+            size="s"
             .buttons=${choiceToggleButtons}
             .active=${activeChoice}
             .disabled=${this.disabled}

src/components/ha-selector/ha-selector-period.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { PeriodKey, PeriodSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
@@ -41,6 +42,9 @@ export class HaPeriodSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   private _schema = memoizeOne(
     (
       selectedPeriodKey: PeriodKey | undefined,
@@ -78,7 +82,7 @@ export class HaPeriodSelector extends LitElement {
     const schema = this._schema(
       typeof data.period === "string" ? (data.period as PeriodKey) : undefined,
       this.selector,
-      this.hass.localize
+      this._localize!
     );
 
     return html`

src/components/ha-selector/ha-selector-select.ts

@@ -1,13 +1,20 @@
 import { mdiDragHorizontalVariant } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consume } from "@lit/context";
 import { ensureArray } from "../../common/array/ensure-array";
+import { transform } from "../../common/decorators/transform";
 import { fireEvent } from "../../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { internationalizationContext } from "../../data/context";
 import type { SelectOption, SelectSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import type { FrontendLocaleData } from "../../data/translation";
+import type {
+  HomeAssistant,
+  HomeAssistantInternationalization,
+} from "../../types";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-checkbox";
@@ -25,6 +32,13 @@ import "../radio/ha-radio-option";
 export class HaSelectSelector extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
+
   @property({ attribute: false }) public selector!: SelectSelector;
 
   @property() public value?: string | string[];
@@ -75,11 +89,7 @@ export class HaSelectSelector extends LitElement {
 
     if (this.selector.select?.sort) {
       options.sort((a, b) =>
-        caseInsensitiveStringCompare(
-          a.label,
-          b.label,
-          this.hass.locale.language
-        )
+        caseInsensitiveStringCompare(a.label, b.label, this._locale.language)
       );
     }
 

src/components/ha-selector/ha-selector-selector.ts

@@ -2,6 +2,7 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   LocalizeFunc,
@@ -168,6 +169,9 @@ export class HaSelectorSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   private _yamlMode = false;
 
   protected shouldUpdate(changedProps: PropertyValues<this>) {
@@ -236,7 +240,7 @@ export class HaSelectorSelector extends LitElement {
       };
     }
 
-    const schema = this._schema(type, this.hass.localize);
+    const schema = this._schema(type, this._localize!);
 
     return html`<div>
       <p>${this.label ? this.label : ""}</p>
@@ -290,7 +294,7 @@ export class HaSelectorSelector extends LitElement {
   }
 
   private _computeLabelCallback = (schema: any): string =>
-    this.hass.localize(
+    this._localize!(
       `ui.components.selectors.selector.${schema.name}` as LocalizeKeys
     ) || schema.name;
 

src/components/ha-selector/ha-selector-time.ts

@@ -1,13 +1,22 @@
+import { consume } from "@lit/context";
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { transform } from "../../common/decorators/transform";
 import type { TimeSelector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { internationalizationContext } from "../../data/context";
+import type { FrontendLocaleData } from "../../data/translation";
+import type { HomeAssistantInternationalization } from "../../types";
 import "../ha-time-input";
 import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  @transform<HomeAssistantInternationalization, FrontendLocaleData>({
+    transformer: ({ locale }) => locale,
+  })
+  private _locale!: FrontendLocaleData;
 
   @property({ attribute: false }) public selector!: TimeSelector;
 
@@ -31,7 +40,7 @@ export class HaTimeSelector extends LitElement {
     return html`
       <ha-time-input
         .value=${typeof this.value === "string" ? this.value : undefined}
-        .locale=${this.hass.locale}
+        .locale=${this._locale}
         .disabled=${this.disabled}
         .required=${this.required}
         clearable

src/components/ha-service-control.ts

@@ -9,7 +9,11 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../common/array/ensure-array";
-import { fireEvent } from "../common/dom/fire_event";
+import {
+  fireEvent,
+  type HASSDomCurrentTargetEvent,
+  type HASSDomEvent,
+} from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { supportsFeature } from "../common/entity/supports-feature";
@@ -32,9 +36,11 @@ import {
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-icon-button";
 import "./ha-markdown";
 import "./ha-selector/ha-selector";
+import type { HaSelector } from "./ha-selector/ha-selector";
 import "./ha-service-picker";
 import "./ha-service-section-icon";
 import "./ha-settings-row";
@@ -56,6 +62,22 @@ const showOptionalToggle = (field) =>
   !field.required &&
   !("boolean" in field.selector && field.default);
 
+const FULL_WIDTH_SELECTOR_TYPES = new Set([
+  "action",
+  "area",
+  "device",
+  "entity",
+  "floor",
+  "label",
+  "target",
+]);
+
+const isFullWidthSelector = (selector?: Selector): boolean =>
+  !!selector &&
+  Object.keys(selector).some((selectorType) =>
+    FULL_WIDTH_SELECTOR_TYPES.has(selectorType)
+  );
+
 interface Field extends Omit<HassService["fields"][string], "selector"> {
   key: string;
   selector?: Selector;
@@ -475,6 +497,14 @@ export class HaServiceControl extends LitElement {
         )) ||
       serviceData?.description;
 
+    const targetSelector =
+      serviceData && "target" in serviceData
+        ? this._targetSelector(
+            serviceData.target as TargetSelector,
+            this._value?.target
+          )
+        : undefined;
+
     return html`${this.hidePicker
       ? nothing
       : html`<ha-service-picker
@@ -512,16 +542,15 @@ export class HaServiceControl extends LitElement {
           </div>
         `}
     ${serviceData && "target" in serviceData
-      ? html`<ha-settings-row .narrow=${this.narrow}>
+      ? html`<ha-settings-row
+          .narrow=${this.narrow || isFullWidthSelector(targetSelector)}
+        >
           <span slot="heading"
             >${this.hass.localize("ui.components.service-control.target")}</span
           >
           <ha-selector
             .hass=${this.hass}
-            .selector=${this._targetSelector(
-              serviceData.target as TargetSelector,
-              this._value?.target
-            )}
+            .selector=${targetSelector}
             .disabled=${this.disabled}
             @value-changed=${this._targetChanged}
             .value=${this._value?.target}
@@ -664,7 +693,9 @@ export class HaServiceControl extends LitElement {
         : undefined;
 
     return dataField.selector
-      ? html`<ha-settings-row .narrow=${this.narrow}>
+      ? html`<ha-settings-row
+          .narrow=${this.narrow || isFullWidthSelector(selector)}
+        >
           ${!showOptional
             ? hasOptional
               ? html`<div slot="prefix" class="checkbox-spacer"></div>`
@@ -737,14 +768,16 @@ export class HaServiceControl extends LitElement {
     );
   };
 
-  private _toggleCheckbox(ev: Event) {
+  private _toggleCheckbox(ev: HASSDomCurrentTargetEvent<HTMLElement>) {
     const checkbox = (
       ev.currentTarget as HTMLElement
     )?.parentElement?.querySelector("ha-checkbox");
     checkbox?.click();
   }
 
-  private _checkboxChanged(ev) {
+  private _checkboxChanged(
+    ev: HASSDomCurrentTargetEvent<HaCheckbox & { key: string }>
+  ) {
     const checked = ev.currentTarget.checked;
     const key = ev.currentTarget.key;
     let data;
@@ -867,7 +900,7 @@ export class HaServiceControl extends LitElement {
     });
   }
 
-  private _entityPicked(ev: CustomEvent) {
+  private _entityPicked(ev: HASSDomEvent<{ value: string | undefined }>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
     if (this._value?.data?.entity_id === newValue) {
@@ -888,7 +921,12 @@ export class HaServiceControl extends LitElement {
     });
   }
 
-  private _targetChanged(ev: CustomEvent) {
+  private _targetChanged(
+    ev: HASSDomEvent<{
+      value: HassServiceTarget | undefined;
+      isValid?: boolean;
+    }>
+  ) {
     ev.stopPropagation();
     if (ev.detail.isValid === false) {
       // Don't clear an object selector that returns invalid YAML
@@ -910,13 +948,16 @@ export class HaServiceControl extends LitElement {
     });
   }
 
-  private _serviceDataChanged(ev: CustomEvent) {
+  private _serviceDataChanged(
+    ev: HASSDomEvent<{ value: unknown; isValid?: boolean }> &
+      HASSDomCurrentTargetEvent<HaSelector & { key: string }>
+  ) {
     ev.stopPropagation();
     if (ev.detail.isValid === false) {
       // Don't clear an object selector that returns invalid YAML
       return;
     }
-    const key = (ev.currentTarget as any).key;
+    const key = ev.currentTarget.key;
     const value = ev.detail.value;
     if (
       this._value?.data?.[key] === value ||
@@ -931,7 +972,9 @@ export class HaServiceControl extends LitElement {
     if (
       value === "" ||
       value === undefined ||
-      (typeof value === "object" && !Object.keys(value).length)
+      (value !== null &&
+        typeof value === "object" &&
+        !Object.keys(value).length)
     ) {
       delete data[key];
       delete this._stickySelector[key];
@@ -945,7 +988,12 @@ export class HaServiceControl extends LitElement {
     });
   }
 
-  private _dataChanged(ev: CustomEvent) {
+  private _dataChanged(
+    ev: HASSDomEvent<{
+      value: NonNullable<HaServiceControl["value"]>["data"];
+      isValid?: boolean;
+    }>
+  ) {
     ev.stopPropagation();
     if (!ev.detail.isValid) {
       return;
@@ -969,14 +1017,15 @@ export class HaServiceControl extends LitElement {
 
   static styles = css`
     ha-settings-row {
-      padding: var(--service-control-padding, 0 16px);
+      padding: var(--service-control-padding, 0 var(--ha-space-4));
     }
     ha-settings-row[narrow] {
-      padding-bottom: 8px;
+      padding-bottom: var(--ha-space-2);
     }
     ha-settings-row {
       --settings-row-content-width: 100%;
       --settings-row-prefix-display: contents;
+      --ha-entities-picker-entity-min-width: 0;
       border-top: var(
         --service-control-items-border-top,
         1px solid var(--divider-color)
@@ -986,20 +1035,20 @@ export class HaServiceControl extends LitElement {
     ha-entity-picker,
     ha-yaml-editor {
       display: block;
-      margin: var(--service-control-padding, 0 16px);
+      margin: var(--service-control-padding, 0 var(--ha-space-4));
     }
     ha-yaml-editor {
-      padding: 16px 0;
+      padding: var(--ha-space-4) 0;
     }
     p {
-      margin: var(--service-control-padding, 0 16px);
-      padding: 16px 0;
+      margin: var(--service-control-padding, 0 var(--ha-space-4));
+      padding: var(--ha-space-4) 0;
     }
     :host([hide-picker]) p {
       padding-top: 0;
     }
     .checkbox-spacer {
-      width: 32px;
+      width: var(--ha-space-8);
     }
     .clickable {
       cursor: pointer;
@@ -1020,7 +1069,7 @@ export class HaServiceControl extends LitElement {
     }
     ha-expansion-panel {
       --ha-card-border-radius: var(--ha-border-radius-square);
-      --expansion-panel-summary-padding: 0 16px;
+      --expansion-panel-summary-padding: 0 var(--ha-space-4);
       --expansion-panel-content-padding: 0;
     }
   `;

src/components/ha-service-icon.ts

@@ -1,24 +1,39 @@
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
 import {
   DEFAULT_SERVICE_ICON,
   FALLBACK_DOMAIN_ICONS,
   serviceIcon,
 } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
 @customElement("ha-service-icon")
 export class HaServiceIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public service?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -28,20 +43,18 @@ export class HaServiceIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
-    const icon = serviceIcon(
-      this.hass.connection,
-      this.hass.config,
-      this.service
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
+    const icon = serviceIcon(this._connection, this._config, this.service).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
       }
-      return this._renderFallback();
-    });
+    );
 
     return html`${until(icon)}`;
   }

src/components/ha-service-section-icon.ts

@@ -1,21 +1,36 @@
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
-import type { HomeAssistant } from "../types";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
+import { serviceSectionIcon } from "../data/icons";
 import "./ha-icon";
 import "./ha-svg-icon";
-import { serviceSectionIcon } from "../data/icons";
 
 @customElement("ha-service-section-icon")
 export class HaServiceSectionIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public service?: string;
 
   @property() public section?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -25,13 +40,13 @@ export class HaServiceSectionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
     const icon = serviceSectionIcon(
-      this.hass.connection,
-      this.hass.config,
+      this._connection,
+      this._config,
       this.service,
       this.section
     ).then((icn) => {

src/components/ha-sidebar.ts

@@ -539,11 +539,7 @@ class HaSidebar extends SubscribeMixin(ScrollableFadeMixin(LitElement)) {
           rtl: isRTL,
         })}
       >
-        <ha-user-badge
-          slot="start"
-          .user=${this.hass.user}
-          .hass=${this.hass}
-        ></ha-user-badge>
+        <ha-user-badge slot="start" .user=${this.hass.user}></ha-user-badge>
         <span class="item-text" slot="headline"
           >${this.hass.user ? this.hass.user.name : ""}</span
         >

src/components/ha-slider.ts

@@ -5,7 +5,7 @@ import { mainWindow } from "../common/dom/get_main_window";
 
 @customElement("ha-slider")
 export class HaSlider extends Slider {
-  @property({ reflect: true }) size: "small" | "medium" = "small";
+  @property({ reflect: true }) size: "s" | "m" = "s";
 
   @property({ type: Boolean, attribute: "with-tooltip" }) withTooltip = true;
 
@@ -110,12 +110,12 @@ export class HaSlider extends Slider {
           );
         }
 
-        :host([size="medium"]) {
+        :host([size="m"]) {
           --thumb-width: 20px;
           --thumb-height: 20px;
         }
 
-        :host([size="small"]) {
+        :host([size="s"]) {
           --thumb-width: 16px;
           --thumb-height: 16px;
         }

src/components/ha-target-picker.ts

@@ -130,11 +130,56 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _newTarget?: TargetItem;
 
-  private _getDevicesMemoized = memoizeOne(getDevices);
+  private _getDevicesMemoized = memoizeOne(
+    (
+      hass: HomeAssistant,
+      configEntryLookup: Record<string, ConfigEntry>,
+      includeDomains?: string[],
+      includeDeviceClasses?: string[],
+      deviceFilter?: HaDevicePickerDeviceFilterFunc,
+      entityFilter?: HaEntityPickerEntityFilterFunc,
+      excludeDevices?: string[],
+      value?: string,
+      idPrefix?: string
+    ) =>
+      getDevices(hass, configEntryLookup, {
+        includeDomains,
+        includeDeviceClasses,
+        deviceFilter,
+        entityFilter,
+        excludeDevices,
+        value,
+        idPrefix,
+      })
+  );
 
   private _getLabelsMemoized = memoizeOne(getLabels);
 
-  private _getEntitiesMemoized = memoizeOne(getEntities);
+  private _getEntitiesMemoized = memoizeOne(
+    (
+      hass: HomeAssistant,
+      includeDomains?: string[],
+      excludeDomains?: string[],
+      entityFilter?: HaEntityPickerEntityFilterFunc,
+      includeDeviceClasses?: string[],
+      includeUnitOfMeasurement?: string[],
+      includeEntities?: string[],
+      excludeEntities?: string[],
+      value?: string,
+      idPrefix?: string
+    ) =>
+      getEntities(hass, {
+        includeDomains,
+        excludeDomains,
+        entityFilter,
+        includeDeviceClasses,
+        includeUnitOfMeasurement,
+        includeEntities,
+        excludeEntities,
+        value,
+        idPrefix,
+      })
+  );
 
   private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
 
@@ -919,7 +964,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           this.hass,
           configEntryLookup,
           includeDomains,
-          undefined,
           includeDeviceClasses,
           deviceFilter,
           entityFilter,

src/components/ha-trace-picker.ts

@@ -43,7 +43,7 @@ class HaTracePicker extends LitElement {
         slot="field"
         appearance="filled"
         variant="neutral"
-        size="small"
+        size="s"
         @click=${this._openPicker}
       >
         ${this._renderTracePickerValue(this.value!)}

src/components/ha-trigger-icon.ts

@@ -17,13 +17,16 @@ import {
   mdiWeatherSunny,
   mdiWebhook,
 } from "@mdi/js";
+import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
+import type { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
+import { transform } from "../common/decorators/transform";
+import { configContext, connectionContext } from "../data/context";
 import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -50,12 +53,24 @@ export const TRIGGER_ICONS = {
 
 @customElement("ha-trigger-icon")
 export class HaTriggerIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public trigger?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  @transform<{ config: HassConfig }, HassConfig>({
+    transformer: ({ config }) => config,
+  })
+  private _config?: HassConfig;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  @transform<{ connection: Connection }, Connection>({
+    transformer: ({ connection }) => connection,
+  })
+  private _connection?: Connection;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -65,20 +80,18 @@ export class HaTriggerIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
-    const icon = triggerIcon(
-      this.hass.connection,
-      this.hass.config,
-      this.trigger
-    ).then((icn) => {
-      if (icn) {
-        return html`<ha-icon .icon=${icn}></ha-icon>`;
+    const icon = triggerIcon(this._connection, this._config, this.trigger).then(
+      (icn) => {
+        if (icn) {
+          return html`<ha-icon .icon=${icn}></ha-icon>`;
+        }
+        return this._renderFallback();
       }
-      return this._renderFallback();
-    });
+    );
 
     return html`${until(icon)}`;
   }

src/components/ha-vacuum-segment-area-mapper.ts

@@ -108,7 +108,6 @@ export class HaVacuumSegmentAreaMapper extends LitElement {
         <span class="segment-name">${segment.name}</span>
         <ha-svg-icon class="arrow" .path=${mdiArrowRightThin}></ha-svg-icon>
         <ha-area-picker
-          .hass=${this.hass}
           .value=${mappedAreas}
           .label=${this.hass.localize(
             "ui.dialogs.vacuum_segment_mapping.area_label"

src/components/ha-vacuum-state.ts

@@ -58,7 +58,7 @@ export class HaVacuumState extends LitElement {
     return html`
       <ha-button
         appearance="plain"
-        size="small"
+        size="s"
         @click=${this._callService}
         .disabled=${!interceptable}
       >

src/components/input/ha-input-copy.ts

@@ -99,7 +99,7 @@ export class HaInputCopy extends LitElement {
               : nothing}
           </ha-input>
         </div>
-        <ha-button @click=${this._copy} appearance="plain" size="small">
+        <ha-button @click=${this._copy} appearance="plain" size="s">
           <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
           ${this.label || this._i18n.localize("ui.common.copy")}
         </ha-button>

src/components/input/ha-input-multi.ts

@@ -130,7 +130,7 @@ class HaInputMulti extends LitElement {
       </ha-sortable>
       <div class="layout horizontal">
         <ha-button
-          size="small"
+          size="s"
           appearance="filled"
           @click=${this._addItem}
           .disabled=${this.disabled ||

src/components/item/ha-list-item-base.ts

@@ -38,6 +38,9 @@ export class HaListItemBase extends HaRowItem {
 
   public connectedCallback(): void {
     super.connectedCallback();
+    if (!this.hasAttribute("ha-list-item")) {
+      this.setAttribute("ha-list-item", "");
+    }
     if (!this.hasAttribute("role")) {
       this.setAttribute("role", this.defaultRole);
     }

src/components/list/ha-list-base.ts

@@ -1,9 +1,9 @@
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type nothing, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { tinykeys } from "tinykeys";
 import { compareNodeOrder } from "../../common/dom/compare-node-order";
 import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
+import { haStyleScrollbar } from "../../resources/styles";
 import type { HaListItemBase } from "../item/ha-list-item-base";
 import "./types";
 import type { HaListItemRegistrationDetail } from "./types";
@@ -45,13 +45,13 @@ export class HaListBase extends LitElement {
   /** Host `role` attribute. Empty string means no role is set. */
   protected readonly hostRole: string = "list";
 
-  private _activeItemIndex = -1;
+  protected activeItemIndex = -1;
 
-  private _firstFocusableIndex = -1;
+  protected firstFocusableIndex = -1;
 
-  private _lastFocusableIndex = -1;
+  protected lastFocusableIndex = -1;
 
-  private _hasFocusableItem = false;
+  protected hasFocusableItem = false;
 
   private _unbindKeys?: () => void;
 
@@ -63,22 +63,28 @@ export class HaListBase extends LitElement {
     if (!this.hasAttribute("role") && this.hostRole) {
       this.setAttribute("role", this.hostRole);
     }
-    this._unbindKeys = tinykeys(this, {
-      ArrowDown: this._onForward,
-      ArrowUp: this._onBack,
-      Home: this._onHome,
-      End: this._onEnd,
-      Enter: this._onActivate,
-      Space: this._onActivate,
-    });
-    this.addEventListener("focusin", this._onFocusIn);
+    this._unbindKeys = tinykeys(
+      this,
+      {
+        ArrowDown: this._onForward,
+        ArrowUp: this._onBack,
+        Home: this._onHome,
+        End: this._onEnd,
+        PageDown: this._onPageDown,
+        PageUp: this._onPageUp,
+        Enter: this.onActivate,
+        Space: this.onActivate,
+      },
+      { ignore: this._ignoreKeyEvent }
+    );
+    this.addEventListener("focusin", this.onFocusIn);
     this.addEventListener(
       "ha-list-item-register",
-      this._onItemRegister as EventListener
+      this.onItemRegister as EventListener
     );
     this.addEventListener(
       "ha-list-item-unregister",
-      this._onItemUnregister as EventListener
+      this.onItemUnregister as EventListener
     );
   }
 
@@ -86,25 +92,23 @@ export class HaListBase extends LitElement {
     super.disconnectedCallback();
     this._unbindKeys?.();
     this._unbindKeys = undefined;
-    this.removeEventListener("focusin", this._onFocusIn);
+    this.removeEventListener("focusin", this.onFocusIn);
     this.removeEventListener(
       "ha-list-item-register",
-      this._onItemRegister as EventListener
+      this.onItemRegister as EventListener
     );
     this.removeEventListener(
       "ha-list-item-unregister",
-      this._onItemUnregister as EventListener
+      this.onItemUnregister as EventListener
     );
   }
 
   public focus(options?: FocusOptions) {
-    if (!this.items.length) {
+    if (!this.itemCount) {
       super.focus(options);
       return;
     }
-    this.focusItemAtIndex(
-      this._activeItemIndex >= 0 ? this._activeItemIndex : 0
-    );
+    this.focusItemAtIndex(this.activeItemIndex >= 0 ? this.activeItemIndex : 0);
   }
 
   public focusItemAtIndex(index: number) {
@@ -115,19 +119,19 @@ export class HaListBase extends LitElement {
   }
 
   public getActiveItemIndex(): number {
-    return this._activeItemIndex;
+    return this.activeItemIndex;
   }
 
   public setActiveItemIndex(index: number, focusItem = false) {
-    if (!this._hasFocusableItem) {
-      this._activeItemIndex = -1;
+    if (!this.hasFocusableItem) {
+      this.activeItemIndex = -1;
       return;
     }
-    this._activeItemIndex = Math.max(0, Math.min(this.items.length - 1, index));
-    if (!this._isFocusable(this._activeItemIndex)) {
-      this._activeItemIndex = this._firstFocusableIndex;
+    this.activeItemIndex = Math.max(0, Math.min(this.itemCount - 1, index));
+    if (!this.isFocusable(this.activeItemIndex)) {
+      this.activeItemIndex = this.firstFocusableIndex;
     }
-    this._applyActive(focusItem);
+    this.applyActive(focusItem);
   }
 
   /**
@@ -135,18 +139,18 @@ export class HaListBase extends LitElement {
    * to layer in extra bookkeeping (e.g. selection state sync).
    */
   public updateListItems() {
-    this._recomputeFocusableIndexes();
+    this.recomputeFocusableIndexes();
     if (
-      this._activeItemIndex >= this.items.length ||
-      !this._hasFocusableItem ||
-      this._activeItemIndex < 0
+      this.activeItemIndex >= this.itemCount ||
+      !this.hasFocusableItem ||
+      this.activeItemIndex < 0
     ) {
-      this._activeItemIndex = this._firstFocusableIndex;
+      this.activeItemIndex = this.firstFocusableIndex;
     }
-    this._applyActive(false);
+    this.applyActive(false);
   }
 
-  private _onItemRegister = (
+  protected onItemRegister = (
     ev: HASSDomEvent<HaListItemRegistrationDetail>
   ) => {
     ev.stopPropagation();
@@ -160,7 +164,7 @@ export class HaListBase extends LitElement {
     this.updateListItems();
   };
 
-  private _onItemUnregister = (
+  protected onItemUnregister = (
     ev: HASSDomEvent<HaListItemRegistrationDetail>
   ) => {
     ev.stopPropagation();
@@ -172,136 +176,190 @@ export class HaListBase extends LitElement {
     this.updateListItems();
   };
 
-  private _recomputeFocusableIndexes() {
+  protected recomputeFocusableIndexes() {
     let first = -1;
     let last = -1;
-    for (let i = 0; i < this.items.length; i++) {
-      if (this._isFocusable(i)) {
+    for (let i = 0; i < this.itemCount; i++) {
+      if (this.isFocusable(i)) {
         if (first === -1) {
           first = i;
         }
         last = i;
       }
     }
-    this._firstFocusableIndex = first;
-    this._lastFocusableIndex = last;
-    this._hasFocusableItem = first !== -1;
+    this.firstFocusableIndex = first;
+    this.lastFocusableIndex = last;
+    this.hasFocusableItem = first !== -1;
   }
 
-  protected render(): TemplateResult {
-    return html`<div part="base" class="base">
+  protected render(): TemplateResult | typeof nothing {
+    return html`<div part="base" class="base ha-scrollbar">
       <slot></slot>
     </div>`;
   }
 
-  private _isFocusable(index: number): boolean {
+  protected isFocusable(index: number): boolean {
     const item = this.items[index];
     return !!item && item.interactive && !item.disabled;
   }
 
-  private _applyActive(focusItem: boolean) {
+  protected applyActive(focusItem: boolean) {
     this.items.forEach((item, i) => {
       if (!item.interactive || item.disabled) {
         item.removeAttribute("tabindex");
         return;
       }
-      item.tabIndex = i === this._activeItemIndex ? 0 : -1;
+      item.tabIndex = i === this.activeItemIndex ? 0 : -1;
     });
-    if (focusItem && this._activeItemIndex >= 0) {
-      this.items[this._activeItemIndex]?.focus();
+    if (focusItem && this.activeItemIndex >= 0) {
+      this.items[this.activeItemIndex]?.focus();
     }
   }
 
-  private _onFocusIn = (ev: FocusEvent) => {
+  protected onFocusIn = (ev: FocusEvent) => {
     const path = ev.composedPath();
     for (let i = 0; i < this.items.length; i++) {
       if (path.includes(this.items[i])) {
-        if (i !== this._activeItemIndex) {
-          this._activeItemIndex = i;
-          this._applyActive(false);
+        if (i !== this.activeItemIndex) {
+          this.activeItemIndex = i;
+          this.applyActive(false);
         }
         return;
       }
     }
   };
 
+  private _ignoreKeyEvent = (ev: KeyboardEvent): boolean => {
+    if (ev.repeat && (ev.key === "Enter" || ev.key === " ")) {
+      return true;
+    }
+    if (ev.isComposing) {
+      return true;
+    }
+    const target = ev.target as HTMLElement | null;
+    // Allow held arrow/Home/End to repeat for continuous navigation
+    return (
+      !!target &&
+      target !== ev.currentTarget &&
+      target.matches("[contenteditable],input,select,textarea")
+    );
+  };
+
   private _onForward = (ev: KeyboardEvent) => {
-    this._moveFocus(ev, this._stepIndex(this._activeItemIndex, 1));
+    this.moveFocus(ev, this._stepIndex(this.activeItemIndex, 1));
   };
 
   private _onBack = (ev: KeyboardEvent) => {
-    this._moveFocus(ev, this._stepIndex(this._activeItemIndex, -1));
+    this.moveFocus(ev, this._stepIndex(this.activeItemIndex, -1));
   };
 
   private _onHome = (ev: KeyboardEvent) => {
-    this._moveFocus(ev, this._firstFocusableIndex);
+    this.moveFocus(ev, this.firstFocusableIndex);
   };
 
   private _onEnd = (ev: KeyboardEvent) => {
-    this._moveFocus(ev, this._lastFocusableIndex);
+    this.moveFocus(ev, this.lastFocusableIndex);
   };
 
-  private _onActivate = (ev: KeyboardEvent) => {
-    if (!this._isFocusable(this._activeItemIndex)) {
+  private _onPageDown = (ev: KeyboardEvent) => {
+    this.moveFocus(
+      ev,
+      this._stepIndex(this.activeItemIndex, 1, this.getPageSize())
+    );
+  };
+
+  private _onPageUp = (ev: KeyboardEvent) => {
+    this.moveFocus(
+      ev,
+      this._stepIndex(this.activeItemIndex, -1, this.getPageSize())
+    );
+  };
+
+  /**
+   * Number of items to jump for PageUp/PageDown. Defaults to 10 (per WAI-ARIA
+   * Authoring Practices: "moves focus a manageable number of nodes,
+   * typically 10"). Subclasses with a known viewport (e.g. virtualized lists)
+   * can override to use the visible page size.
+   */
+  protected getPageSize(): number {
+    return 10;
+  }
+
+  protected onActivate = (ev: KeyboardEvent) => {
+    if (!this.isFocusable(this.activeItemIndex)) {
       return;
     }
     ev.preventDefault();
-    const active = this.items[this._activeItemIndex];
+    const active = this.items[this.activeItemIndex];
     active.activate();
     fireEvent(this, "ha-list-activated", {
-      index: this._activeItemIndex,
+      index: this.activeItemIndex,
       item: active,
     });
   };
 
-  private _moveFocus(ev: KeyboardEvent, next: number) {
-    if (!this._hasFocusableItem || next < 0 || next === this._activeItemIndex) {
+  protected moveFocus(ev: KeyboardEvent, next: number) {
+    if (!this.hasFocusableItem) {
       return;
     }
     ev.preventDefault();
-    this._activeItemIndex = next;
-    this._applyActive(true);
+    if (next < 0 || next === this.activeItemIndex) {
+      return;
+    }
+    this.activeItemIndex = next;
+    this.applyActive(true);
+  }
+
+  protected get itemCount(): number {
+    return this.items.length;
   }
 
   /**
    * Step from `from` by `delta`, skipping non-interactive and disabled items.
-   * Returns `from` when no other focusable item can be reached (honouring
-   * `wrapFocus`).
+   * Pass `count` > 1 to advance by multiple focusable items (PageUp/Down).
+   * Returns the last focusable index reached, or `from` when none is.
    */
-  private _stepIndex(from: number, delta: 1 | -1): number {
-    const n = this.items.length;
-    if (!n || !this._hasFocusableItem) {
+  private _stepIndex(from: number, delta: 1 | -1, count = 1): number {
+    const n = this.itemCount;
+    if (!n || !this.hasFocusableItem) {
       return from;
     }
+    let last = from;
     let i = from;
-    for (let step = 0; step < n; step++) {
+    let landed = 0;
+    for (let step = 0; step < n && landed < count; step++) {
       i += delta;
       if (i < 0 || i >= n) {
         if (!this.wrapFocus) {
-          return from;
+          return last;
         }
         i = (i + n) % n;
       }
-      if (this._isFocusable(i)) {
-        return i;
+      if (this.isFocusable(i)) {
+        last = i;
+        landed++;
       }
     }
-    return from;
+    return last;
   }
 
-  static styles: CSSResultGroup = css`
-    :host {
-      display: block;
-    }
-    .base {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-list-gap, 0);
-      padding: var(--ha-list-padding, 0);
-      margin: 0;
-      list-style: none;
-    }
-  `;
+  static styles = [
+    haStyleScrollbar,
+    css`
+      :host {
+        display: block;
+      }
+      .base {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ha-list-gap, 0);
+        padding: var(--ha-list-padding, 0);
+        margin: 0;
+        list-style: none;
+        overflow-x: hidden;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/list/ha-list-nav.ts

@@ -30,7 +30,7 @@ export class HaListNav extends HaListBase {
       part="nav"
       aria-label=${ifDefined(this.ariaLabel ?? undefined)}
     >
-      <div part="base" class="base" role="list">
+      <div part="base" class="base ha-scrollbar" role="list">
         <slot></slot>
       </div>
     </nav>`;

src/components/list/ha-list-selectable-mixin.ts

@@ -0,0 +1,85 @@
+import { property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { Constructor } from "../../types";
+import { HaListItemOption } from "../item/ha-list-item-option";
+import type { HaListBase } from "./ha-list-base";
+
+export const SelectableMixin = <T extends Constructor<HaListBase>>(
+  superClass: T
+) => {
+  class SelectableClass extends superClass {
+    @property({ type: Boolean, reflect: true }) public multi = false;
+
+    protected override readonly hostRole = "listbox";
+
+    public connectedCallback(): void {
+      super.connectedCallback();
+      this.addEventListener("click", this._onOptionClick);
+      this.setAttribute("aria-multiselectable", this.multi ? "true" : "false");
+    }
+
+    public disconnectedCallback(): void {
+      super.disconnectedCallback();
+      this.removeEventListener("click", this._onOptionClick);
+    }
+
+    public updated(changed: Map<string, unknown>) {
+      super.updated(changed);
+      if (changed.has("multi")) {
+        this.setAttribute(
+          "aria-multiselectable",
+          this.multi ? "true" : "false"
+        );
+      }
+    }
+
+    /** Hook: index of a clicked option element, or `-1` if it's not ours. */
+    protected optionIndexOf(opt: HaListItemOption): number {
+      return this.items.indexOf(opt);
+    }
+
+    public clearSelection() {
+      (this.items as HaListItemOption[]).forEach((opt) => {
+        if (opt.selected) {
+          opt.toggleAttribute("selected", false);
+        }
+      });
+    }
+
+    private _onOptionClick = (ev: Event) => {
+      const path = ev.composedPath();
+      for (const el of path) {
+        if (el === this) {
+          return;
+        }
+        if (el instanceof HaListItemOption) {
+          if (el.disabled) {
+            return;
+          }
+          const index = this.optionIndexOf(el);
+          if (index < 0) {
+            return;
+          }
+
+          if (this.multi) {
+            fireEvent(
+              this,
+              `ha-list-item-${el.selected ? "deselected" : "selected"}`,
+              index
+            );
+            el.toggleAttribute("selected");
+            return;
+          }
+
+          if (!el.selected) {
+            fireEvent(this, "ha-list-item-selected", index);
+            // deselect the other optional selected item
+            this.clearSelection();
+            el.toggleAttribute("selected", true);
+          }
+        }
+      }
+    };
+  }
+  return SelectableClass;
+};

src/components/list/ha-list-selectable-virtualized.ts

@@ -0,0 +1,66 @@
+import { customElement } from "lit/decorators";
+import { HaListItemOption } from "../item/ha-list-item-option";
+import { SelectableMixin } from "./ha-list-selectable-mixin";
+import { HaListVirtualized } from "./ha-list-virtualized";
+
+/**
+ * @element ha-list-selectable-virtualized
+ * @extends {HaListVirtualized}
+ *
+ * @summary
+ * Virtualized selection list (role `listbox`). Rows must render
+ * `<ha-list-item-option>` as their top-level element. Selection is index-based:
+ * clicking a row fires `ha-list-item-selected` / `ha-list-item-deselected` with
+ * the row's index, and the row's `selected` attribute is toggled. Consumers own
+ * the source of truth — set each row's `selected` from their own state (for
+ * example, keyed by the option's `value`) and update it in the event handlers.
+ *
+ * Because selection is tracked per-row by the consumer, filtering the visible
+ * `rows` doesn't affect selections for items outside the current view.
+ *
+ * @attr {boolean} multi - Whether multiple options can be selected at once. In
+ *   single-select mode, selecting a row clears any previous selection.
+ *
+ * @fires ha-list-item-selected - Fires when the user selects a row.
+ *   `detail` is the row's index (number).
+ * @fires ha-list-item-deselected - Fires when the user deselects a row (multi-select only).
+ *   `detail` is the row's index (number).
+ */
+@customElement("ha-list-selectable-virtualized")
+export class HaListSelectableVirtualized extends SelectableMixin(
+  HaListVirtualized
+) {
+  /**
+   * Hook: maps a clicked option to its absolute index by offsetting its
+   * position among the rendered (virtualized) children by `rangeStart`.
+   * Returns `-1` if it's not one of our rows or nothing is rendered yet.
+   */
+  protected optionIndexOf(opt: HaListItemOption): number {
+    if (!this.virtualizerElement || this.rangeStart === -1) {
+      return -1;
+    }
+    const index = Array.from(this.virtualizerElement.children).indexOf(opt);
+    if (index === -1) {
+      return -1;
+    }
+    return this.rangeStart + index;
+  }
+
+  /** Deselects every currently rendered (visible) option. */
+  public clearSelection() {
+    if (!this.virtualizerElement || this.rangeStart === -1) {
+      return;
+    }
+    Array.from(this.virtualizerElement.children).forEach((opt) => {
+      if (opt instanceof HaListItemOption && opt.selected) {
+        opt.toggleAttribute("selected", false);
+      }
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-selectable-virtualized": HaListSelectableVirtualized;
+  }
+}

src/components/list/ha-list-selectable.ts

@@ -1,8 +1,6 @@
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HaListItemOption } from "../item/ha-list-item-option";
+import { customElement } from "lit/decorators";
 import { HaListBase } from "./ha-list-base";
-import type { HaListSelectedDetail } from "./types";
+import { SelectableMixin } from "./ha-list-selectable-mixin";
 
 /**
  * @element ha-list-selectable
@@ -14,196 +12,11 @@ import type { HaListSelectedDetail } from "./types";
  *
  * @attr {boolean} multi - Whether multiple options can be selected at once.
  *
- * @fires ha-list-selected - Fired when the selection changes. `detail: HaListSelectedDetail`.
+ * @fires ha-list-item-selected - An option was selected. `detail: number` (option index).
+ * @fires ha-list-item-deselected - An option was deselected (multi mode only). `detail: number` (option index).
  */
 @customElement("ha-list-selectable")
-export class HaListSelectable extends HaListBase {
-  @property({ type: Boolean, reflect: true }) public multi = false;
-
-  protected override readonly hostRole = "listbox";
-
-  private _selectedIndices?: Set<number>;
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this.addEventListener("click", this._onOptionClick);
-    this.setAttribute("aria-multiselectable", this.multi ? "true" : "false");
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.removeEventListener("click", this._onOptionClick);
-  }
-
-  public updated(changed: Map<string, unknown>) {
-    super.updated(changed);
-    if (changed.has("multi")) {
-      this.setAttribute("aria-multiselectable", this.multi ? "true" : "false");
-      if (!this.multi && (this._selectedIndices?.size ?? 0) > 1) {
-        const first = Math.min(...this._selectedIndices!);
-        this._setSelection(new Set([first]));
-      }
-    }
-  }
-
-  /**
-   * Returns the current selection. `number` (or `-1` if nothing) when single,
-   * `Set<number>` when multi.
-   */
-  public get selected(): number | Set<number> {
-    if (this.multi) {
-      return new Set(this._selectedIndices);
-    }
-    return (this._selectedIndices?.size ?? 0) === 0
-      ? -1
-      : this._selectedIndices!.values().next().value!;
-  }
-
-  public get selectedItems(): HaListItemOption[] {
-    return this._sortedSelectedIndices()
-      .map((i) => this.items[i] as HaListItemOption | undefined)
-      .filter((it): it is HaListItemOption => !!it);
-  }
-
-  /** Replace the entire selection. */
-  public setSelected(indices: number | number[] | Set<number>): void {
-    const next =
-      typeof indices === "number"
-        ? indices < 0
-          ? new Set<number>()
-          : new Set([indices])
-        : new Set(indices);
-    if (!this.multi && next.size > 1) {
-      const first = Math.min(...next);
-      this._setSelection(new Set([first]));
-      return;
-    }
-    this._setSelection(next);
-  }
-
-  public select(index: number): void {
-    if (index < 0) {
-      return;
-    }
-    if (this.multi) {
-      const next = new Set(this._selectedIndices);
-      next.add(index);
-      this._setSelection(next);
-    } else {
-      this._setSelection(new Set([index]));
-    }
-  }
-
-  public toggle(index: number, force?: boolean): void {
-    if (index < 0) {
-      return;
-    }
-    if (this.multi) {
-      const next = new Set(this._selectedIndices);
-      const isSelected = next.has(index);
-      const shouldSelect = force !== undefined ? force : !isSelected;
-      if (shouldSelect) {
-        next.add(index);
-      } else {
-        next.delete(index);
-      }
-      this._setSelection(next);
-    } else {
-      const isSelected = this._selectedIndices!.has(index);
-      const shouldSelect = force !== undefined ? force : !isSelected;
-      this._setSelection(shouldSelect ? new Set([index]) : new Set());
-    }
-  }
-
-  public clearSelection(): void {
-    this._setSelection(new Set());
-  }
-
-  public updateListItems() {
-    super.updateListItems();
-    this._syncItemSelectedState(true);
-  }
-
-  private _sortedSelectedIndices(): number[] {
-    return [...this._selectedIndices!].sort((a, b) => a - b);
-  }
-
-  private _syncItemSelectedState(reset = false): void {
-    if (!this._selectedIndices || reset) {
-      this._selectedIndices = new Set<number>();
-      this.items.forEach((item, i) => {
-        const opt = item as HaListItemOption;
-        if (opt.selected) {
-          this._selectedIndices!.add(i);
-        }
-      });
-      return;
-    }
-
-    this.items.forEach((item, i) => {
-      const opt = item as HaListItemOption;
-      const shouldBe = this._selectedIndices!.has(i);
-      if (opt.selected !== shouldBe) {
-        opt.selected = shouldBe;
-      }
-    });
-  }
-
-  private _setSelection(next: Set<number>): void {
-    const prev = this._selectedIndices!;
-    const added = new Set<number>();
-    const removed = new Set<number>();
-    next.forEach((i) => {
-      if (!prev.has(i)) {
-        added.add(i);
-      }
-    });
-    prev.forEach((i) => {
-      if (!next.has(i)) {
-        removed.add(i);
-      }
-    });
-    if (!added.size && !removed.size) {
-      return;
-    }
-
-    this._selectedIndices = next;
-    this._syncItemSelectedState();
-
-    const detail: HaListSelectedDetail = this.multi
-      ? { index: new Set(next), diff: { added, removed } }
-      : {
-          index: next.size === 0 ? -1 : next.values().next().value!,
-          diff: { added, removed },
-        };
-    fireEvent(this, "ha-list-selected", detail);
-  }
-
-  private _onOptionClick = (ev: Event) => {
-    const path = ev.composedPath();
-    for (const el of path) {
-      if (el === this) {
-        return;
-      }
-      if (el instanceof HaListItemOption) {
-        const index = this.items.indexOf(el);
-        if (index < 0) {
-          return;
-        }
-        const item = this.items[index];
-        if (item.disabled) {
-          return;
-        }
-        if (this.multi) {
-          this.toggle(index);
-        } else {
-          this.select(index);
-        }
-        return;
-      }
-    }
-  };
-}
+export class HaListSelectable extends SelectableMixin(HaListBase) {}
 
 declare global {
   interface HTMLElementTagNameMap {

src/components/list/ha-list-virtualized.ts

@@ -0,0 +1,356 @@
+import type { LitVirtualizer } from "@lit-labs/virtualizer";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize.js";
+import {
+  css,
+  html,
+  nothing,
+  type PropertyValues,
+  type TemplateResult,
+} from "lit";
+import {
+  customElement,
+  eventOptions,
+  property,
+  query,
+  state,
+} from "lit/decorators";
+import { fireEvent, type HASSDomEvent } from "../../common/dom/fire_event";
+import { loadVirtualizer } from "../../resources/virtualizer";
+import { HaListItemBase } from "../item/ha-list-item-base";
+import { HaListBase } from "./ha-list-base";
+import type { HaListItemRegistrationDetail } from "./types";
+
+/**
+ * A single row in a {@link HaListVirtualized}. Identified by a stable `id`
+ * used as the virtualizer key. Extra fields are passed through to the
+ * `rowRenderer`.
+ */
+export interface HaListVirtualizedItem {
+  /** Stable key used by the virtualizer to track the row across re-renders. */
+  id: string;
+  /** Whether the row can be focused and activated. Defaults to `false`. */
+  interactive?: boolean;
+  disabled?: boolean;
+  [key: string]: unknown;
+}
+
+/**
+ * @element ha-list-virtualized
+ * @extends {HaListBase}
+ *
+ * @summary
+ * Virtualized list. Renders only the rows currently in view to keep large
+ * lists performant, while preserving the roving-tabindex keyboard navigation
+ * of {@link HaListBase}.
+ *
+ * @csspart base - The scrollable outer container (`<div>`).
+ *
+ * @attr {number} pin-index - Row index to scroll to when the list first
+ * renders. Cleared once the user scrolls.
+ * @attr {string} pin-block - Block alignment for `pin-index`: `start`,
+ * `center` (default), `end`, or `nearest`.
+ *
+ * @fires ha-list-activated - Fired when a row is activated via Enter/Space. `detail: { index, item }`.
+ */
+@customElement("ha-list-virtualized")
+export class HaListVirtualized extends HaListBase {
+  @state() private _virtualizerReady = false;
+
+  /**
+   * The list data. Each item is rendered by `rowRenderer`; its `interactive`
+   * and `disabled` flags determine whether the row is focusable.
+   */
+  @property({ attribute: false })
+  public rows!: HaListVirtualizedItem[];
+
+  /** Renders a single row from its data and index. */
+  @property({ attribute: false })
+  public rowRenderer?: RenderItemFunction<HaListVirtualizedItem>;
+
+  /** Row index to scroll to on first render (the "pinned" row). */
+  @property({ attribute: "pin-index", type: Number }) public pinIndex?: number;
+
+  /** Block alignment used when scrolling to `pinIndex`. */
+  @property({ attribute: "pin-block" }) public pinBlock:
+    | "start"
+    | "center"
+    | "end"
+    | "nearest" = "center";
+
+  @state() private _unpinned = false;
+
+  @query("lit-virtualizer")
+  protected virtualizerElement?: LitVirtualizer<HaListVirtualizedItem>;
+
+  protected rangeStart = -1;
+  protected rangeEnd = -1;
+  private _activeItemFocus = false;
+  private _scrollToActiveItem = false;
+
+  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hasUpdated) {
+      this._loadVirtualizer();
+    }
+
+    if (changedProps.has("rows")) {
+      this.recomputeFocusableIndexes();
+      this.activeItemIndex = this.firstFocusableIndex;
+    }
+  }
+
+  private async _loadVirtualizer() {
+    await loadVirtualizer();
+    this._virtualizerReady = true;
+  }
+
+  protected override render(): TemplateResult | typeof nothing {
+    if (!this._virtualizerReady) {
+      return nothing;
+    }
+
+    return html`<div part="base" class="base ha-scrollbar">
+      <lit-virtualizer
+        .keyFunction=${this._keyFunction}
+        tabindex="-1"
+        scroller
+        .items=${this.rows}
+        .renderItem=${this.rowRenderer}
+        style="min-height: 36px; height: 100%;"
+        .layout=${!this._unpinned && this.pinIndex !== undefined
+          ? {
+              pin: {
+                index: this.pinIndex,
+                block: this.pinBlock,
+              },
+            }
+          : undefined}
+        @unpinned=${this._handleUnpinned}
+        @rangeChanged=${this._handleRangeChanged}
+      >
+      </lit-virtualizer>
+    </div>`;
+  }
+
+  /**
+   * Sets the active (roving-tabindex) row. If the row is outside the rendered
+   * range it is scrolled into view first, then activated/focused once the
+   * virtualizer has laid it out.
+   * @param index - Row index to make active; clamped to the valid range.
+   * @param focusItem - Whether to move DOM focus to the row.
+   */
+  public setActiveItemIndex(index: number, focusItem = false) {
+    if (!this.hasFocusableItem) {
+      this.activeItemIndex = -1;
+      return;
+    }
+    this.activeItemIndex = Math.max(0, Math.min(this.rows.length - 1, index));
+    if (!this.isFocusable(this.activeItemIndex)) {
+      this.activeItemIndex = this.firstFocusableIndex;
+    }
+    if (
+      this.activeItemIndex >= this.rangeStart &&
+      this.activeItemIndex <= this.rangeEnd
+    ) {
+      this.applyActive(focusItem);
+    } else {
+      this._activeItemFocus = focusItem;
+      this._scrollToActiveItem = true;
+      this.virtualizerElement
+        ?.element(index)
+        ?.scrollIntoView({ block: "nearest" });
+    }
+  }
+
+  /**
+   * Focuses the row at `index`, scrolling it into view if needed. No-op until
+   * the virtualizer is ready or when `index` is negative.
+   */
+  public override focusItemAtIndex(index: number) {
+    if (!this._virtualizerReady || index < 0) {
+      return;
+    }
+    this.setActiveItemIndex(index, true);
+  }
+
+  protected override applyActive(focusItem: boolean) {
+    if (this.virtualizerElement && this.rangeStart > -1) {
+      Array.from(this.virtualizerElement.children).forEach((child, index) => {
+        const el = child as HTMLElement;
+        if (index + this.rangeStart === this.activeItemIndex) {
+          el.tabIndex = 0;
+          if (focusItem) {
+            el.focus();
+          }
+        } else {
+          el.removeAttribute("tabindex");
+        }
+      });
+    }
+  }
+
+  @eventOptions({ passive: true })
+  private async _handleRangeChanged(ev: { first: number; last: number }) {
+    this.rangeStart = ev.first;
+    this.rangeEnd = ev.last;
+
+    await this.virtualizerElement?.layoutComplete;
+    this._applySetSize();
+
+    if (!this.virtualizerElement) {
+      return;
+    }
+    const inRange =
+      this.activeItemIndex >= this.rangeStart &&
+      this.activeItemIndex <= this.rangeEnd;
+    const focus = this._scrollToActiveItem && inRange && this._activeItemFocus;
+    this.applyActive(focus);
+    if (this._scrollToActiveItem && inRange) {
+      this._activeItemFocus = false;
+      this._scrollToActiveItem = false;
+    }
+  }
+
+  // Expose total count + position to assistive tech, since only a slice of
+  // items is in the DOM at any time.
+  private _applySetSize() {
+    if (!this.virtualizerElement || this.rangeStart < 0) {
+      return;
+    }
+    const total = this.rows?.length ?? 0;
+    Array.from(this.virtualizerElement.children).forEach((child, index) => {
+      const el = child as HTMLElement;
+      el.setAttribute("aria-setsize", String(total));
+      el.setAttribute("aria-posinset", String(this.rangeStart + index + 1));
+    });
+  }
+
+  protected onFocusIn = (ev: FocusEvent) => {
+    if (
+      !this.virtualizerElement ||
+      this.rangeStart === -1 ||
+      this.rangeEnd === -1
+    ) {
+      return;
+    }
+    const path = ev.composedPath();
+    const children = Array.from(this.virtualizerElement.children);
+    for (let i = this.rangeStart; i <= this.rangeEnd; i++) {
+      if (path.includes(children[i - this.rangeStart])) {
+        if (i !== this.activeItemIndex) {
+          this.activeItemIndex = i;
+          if (i < this.rangeStart || i > this.rangeEnd) {
+            this._activeItemFocus = true;
+            this._scrollToActiveItem = true;
+            this.virtualizerElement
+              ?.element(this.activeItemIndex)
+              ?.scrollIntoView({ block: "nearest" });
+          } else {
+            this.applyActive(false);
+          }
+        }
+        return;
+      }
+    }
+  };
+
+  protected override onActivate = (ev: KeyboardEvent) => {
+    if (!this.isFocusable(this.activeItemIndex)) {
+      return;
+    }
+    if (
+      this.virtualizerElement &&
+      this.activeItemIndex >= this.rangeStart &&
+      this.activeItemIndex <= this.rangeEnd
+    ) {
+      const active = this.virtualizerElement?.children[
+        this.activeItemIndex - this.rangeStart
+      ] as HaListItemBase | undefined;
+      if (active && active instanceof HaListItemBase) {
+        ev.preventDefault();
+        active.activate();
+        fireEvent(this, "ha-list-activated", {
+          index: this.activeItemIndex,
+          item: active,
+        });
+      }
+    }
+  };
+
+  protected isFocusable(index: number): boolean {
+    const item = this.rows[index];
+    if (!item) {
+      return false;
+    }
+    const { disabled = false, interactive = false } = this.rows[index];
+    return interactive && !disabled;
+  }
+
+  protected override get itemCount(): number {
+    return this.rows?.length ?? 0;
+  }
+
+  protected override moveFocus(ev: KeyboardEvent, next: number) {
+    if (!this.hasFocusableItem) {
+      return;
+    }
+    ev.preventDefault();
+    if (next < 0 || next === this.activeItemIndex) {
+      return;
+    }
+    this.activeItemIndex = next;
+    if (next < this.rangeStart || next > this.rangeEnd) {
+      this._activeItemFocus = true;
+      this._scrollToActiveItem = true;
+      this.virtualizerElement?.element(this.activeItemIndex)?.scrollIntoView({
+        block: "nearest",
+      });
+    } else {
+      this.applyActive(true);
+    }
+  }
+
+  protected override getPageSize(): number {
+    if (this.rangeStart < 0 || this.rangeEnd < 0) {
+      return super.getPageSize();
+    }
+    return Math.max(1, this.rangeEnd - this.rangeStart + 1);
+  }
+
+  private _keyFunction = (item: HaListVirtualizedItem) => item.id;
+
+  @eventOptions({ passive: true })
+  private _handleUnpinned() {
+    this._unpinned = true;
+  }
+
+  protected override onItemRegister = (
+    ev: HASSDomEvent<HaListItemRegistrationDetail>
+  ) => {
+    ev.stopPropagation();
+  };
+
+  protected override onItemUnregister = (
+    ev: HASSDomEvent<HaListItemRegistrationDetail>
+  ) => {
+    ev.stopPropagation();
+    // ignore
+  };
+
+  static styles = [
+    ...HaListBase.styles,
+    css`
+      .base {
+        height: 100%;
+      }
+      [ha-list-item] {
+        width: 100%;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-list-virtualized": HaListVirtualized;
+  }
+}

src/components/list/types.ts

@@ -1,11 +1,5 @@
 import type { HaListItemBase } from "../item/ha-list-item-base";
 
-export interface HaListSelectedDetail {
-  index: number | Set<number>;
-  diff?: { added: Set<number>; removed: Set<number> };
-  value?: string | string[];
-}
-
 export interface HaListActivatedDetail {
   index: number;
   item: HaListItemBase;
@@ -17,7 +11,8 @@ export interface HaListItemRegistrationDetail {
 
 declare global {
   interface HASSDomEvents {
-    "ha-list-selected": HaListSelectedDetail;
+    "ha-list-item-selected": number;
+    "ha-list-item-deselected": number;
     "ha-list-activated": HaListActivatedDetail;
     "ha-list-item-register": HaListItemRegistrationDetail;
     "ha-list-item-unregister": HaListItemRegistrationDetail;

src/components/map/ha-map.ts

@@ -23,6 +23,7 @@ import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
+import { getEntityLocation } from "../../common/entity/get_entity_location";
 import { DecoratedMarker } from "../../common/map/decorated_marker";
 import { filterXSS } from "../../common/util/xss";
 import type { HomeAssistant, ThemeMode } from "../../types";
@@ -584,18 +585,17 @@ export class HaMap extends ReactiveElement {
       const customTitle = typeof entity !== "string" ? entity.name : undefined;
       const title = customTitle ?? computeStateName(stateObj);
       const {
-        latitude,
-        longitude,
         passive,
         icon,
         radius,
         entity_picture: entityPicture,
-        gps_accuracy: gpsAccuracy,
       } = stateObj.attributes;
 
-      if (!(latitude && longitude)) {
+      const location = getEntityLocation(stateObj, hass.states);
+      if (!location) {
         continue;
       }
+      const { latitude, longitude, gpsAccuracy } = location;
 
       if (computeStateDomain(stateObj) === "zone") {
         // DRAW ZONE

src/components/media-player/ha-media-manage-button.ts

@@ -38,7 +38,7 @@ class MediaManageButton extends LitElement {
       return nothing;
     }
     return html`
-      <ha-button appearance="filled" size="small" @click=${this._manage}>
+      <ha-button appearance="filled" size="s" @click=${this._manage}>
         <ha-svg-icon .path=${mdiFolderEdit} slot="start"></ha-svg-icon>
         ${this.hass.localize(
           "ui.components.media-browser.file_management.manage"

src/components/trace/ha-trace-logbook.ts

@@ -1,6 +1,8 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import type { LogbookEntry } from "../../data/logbook";
 import type { HomeAssistant } from "../../types";
 import "./hat-logbook-note";
@@ -17,6 +19,9 @@ export class HaTraceLogbook extends LitElement {
 
   @property({ attribute: false }) public logbookEntries!: LogbookEntry[];
 
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   protected render(): TemplateResult {
     return this.logbookEntries.length
       ? html`
@@ -26,13 +31,10 @@ export class HaTraceLogbook extends LitElement {
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
           ></ha-logbook-renderer>
-          <hat-logbook-note
-            .hass=${this.hass}
-            .domain=${this.trace.domain}
-          ></hat-logbook-note>
+          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">
-          ${this.hass.localize(
+          ${this._localize(
             "ui.panel.config.automation.trace.path.no_logbook_entries"
           )}
         </div>`;

src/components/trace/ha-trace-path-details.ts

@@ -150,8 +150,15 @@ export class HaTracePathDetails extends LitElement {
 
       parts.push(
         data.map((trace, idx) => {
-          const { path, timestamp, result, error, changed_variables, ...rest } =
-            trace as any;
+          const {
+            path,
+            timestamp,
+            result,
+            error,
+            template_errors,
+            changed_variables,
+            ...rest
+          } = trace as any;
 
           if (result?.enabled === false) {
             return html`${this.hass!.localize(
@@ -240,6 +247,18 @@ export class HaTracePathDetails extends LitElement {
                   )}
                 </div>`
               : nothing}
+            ${template_errors?.length
+              ? html`<div class="error">
+                  ${this.hass!.localize(
+                    "ui.panel.config.automation.trace.path.template_errors"
+                  )}
+                  <ul>
+                    ${template_errors.map(
+                      (templateError: string) => html`<li>${templateError}</li>`
+                    )}
+                  </ul>
+                </div>`
+              : nothing}
             ${result
               ? html`${this.hass!.localize(
                     "ui.panel.config.automation.trace.path.result"
@@ -374,10 +393,7 @@ export class HaTracePathDetails extends LitElement {
             .entries=${entries}
             .narrow=${this.narrow}
           ></ha-logbook-renderer>
-          <hat-logbook-note
-            .hass=${this.hass}
-            .domain=${this.trace.domain}
-          ></hat-logbook-note>
+          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
         `
       : html`<div class="padded-box">
           ${this.hass!.localize(
@@ -409,6 +425,11 @@ export class HaTracePathDetails extends LitElement {
           color: var(--error-color);
         }
 
+        .error ul {
+          margin: var(--ha-space-1) 0;
+          padding-left: var(--ha-space-6);
+        }
+
         ha-tab-group {
           background-color: var(--primary-background-color);
           border-top: 1px solid var(--divider-color);

src/components/trace/ha-trace-timeline.ts

@@ -28,10 +28,7 @@ export class HaTraceTimeline extends LitElement {
         allow-pick
       >
       </hat-trace-timeline>
-      <hat-logbook-note
-        .hass=${this.hass}
-        .domain=${this.trace.domain}
-      ></hat-logbook-note>
+      <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
     `;
   }
 

src/components/trace/hat-logbook-note.ts

@@ -1,20 +1,22 @@
 import { css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../../types";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../../common/translations/localize";
 
 @customElement("hat-logbook-note")
 class HatLogbookNote extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public domain: "automation" | "script" = "automation";
 
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
+
   render() {
     if (this.domain === "script") {
-      return this.hass.localize(
+      return this._localize(
         "ui.panel.config.automation.trace.messages.not_all_entries_are_related_script_note"
       );
     }
-    return this.hass.localize(
+    return this._localize(
       "ui.panel.config.automation.trace.messages.not_all_entries_are_related_automation_note"
     );
   }