Improve strategy edit mode

.github/copilot-instructions.md

@@ -2,8 +2,6 @@
 
 You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
 
-**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
-
 ## Table of Contents
 
 - [Quick Reference](#quick-reference)
@@ -153,10 +151,6 @@ try {
 ### Styling Guidelines
 
 - **Use CSS custom properties**: Leverage the theme system
-- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
-  - 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
 - **Support RTL**: Ensure all layouts work in RTL languages
@@ -165,68 +159,21 @@ try {
 static get styles() {
   return css`
     :host {
-      padding: var(--ha-space-4);
+      --spacing: 16px;
+      padding: var(--spacing);
       color: var(--primary-text-color);
       background-color: var(--card-background-color);
     }
 
-    .content {
-      gap: var(--ha-space-2);
-    }
-
     @media (max-width: 600px) {
       :host {
-        padding: var(--ha-space-2);
+        --spacing: 8px;
       }
     }
   `;
 }
 ```
 
-### View Transitions
-
-The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
-
-**Core Resources:**
-
-- **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
-- **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
-- **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
-- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-base-duration` (350ms, respects `prefers-reduced-motion`)
-
-**Implementation Guidelines:**
-
-1. Always use `withViewTransition()` wrapper for automatic fallback
-2. Keep transitions simple (subtle crossfades and fades work best)
-3. Use `--ha-animation-base-duration` CSS variable for consistent timing
-4. Assign unique `view-transition-name` to elements (must be unique at any given time)
-5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
-
-**Default Root Transition:**
-
-By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
-
-**Important Constraints:**
-
-- Each `view-transition-name` must be unique at any given time
-- Only one view transition can run at a time
-- **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
-
-**Current Usage & Planned Applications:**
-
-- Launch screen fade out (implemented)
-- Automation sidebar transitions (planned - #27238)
-- More info dialog content changes (planned - #27672)
-- Toolbar navigation, ha-spinner transitions (planned)
-
-**Specification & Documentation:**
-
-For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
-
-- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
-- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
-- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
-
 ### Performance Best Practices
 
 - **Code split**: Split code at the panel/dialog level
@@ -248,9 +195,8 @@ For browser support, API details, and current specifications, refer to these aut
 
 **Available Dialog Types:**
 
-- `ha-wa-dialog` - Preferred for new dialogs (Web Awesome based)
-- `ha-md-dialog` - Material Design 3 dialog component
-- `ha-dialog` - Legacy component (still widely used)
+- `ha-md-dialog` - Preferred for new code (Material Design 3)
+- `ha-dialog` - Legacy component still widely used
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**
 
@@ -265,45 +211,15 @@ fireEvent(this, "show-dialog", {
 **Dialog Implementation Requirements:**
 
 - Implement `HassDialog<T>` interface
-- Use `@state() private _open = false` to control dialog visibility
-- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
+- Use `createCloseHeading()` for standard headers
+- Import `haStyleDialog` for consistent styling
 - Return `nothing` when no params (loading state)
-- Fire `dialog-closed` event in `_dialogClosed()` handler
-- Use `header-title` attribute for simple titles
-- Use `header-subtitle` attribute for simple subtitles
-- Use slots for custom content where the standard attributes are not enough
-- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
-- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
+- Fire `dialog-closed` event when closing
+- Add `dialogInitialFocus` for accessibility
 
-**Dialog Sizing:**
-
-- Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
-- Custom sizing is NOT recommended - use the standard width presets
-- Example: `<ha-wa-dialog width="small">` for alert/confirmation dialogs
-
-**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)
-- Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
-
-**Recent Examples:**
-
-See these files for current patterns:
-
-- `src/panels/config/repairs/dialog-repairs-issue.ts`
-- `src/dialogs/restart/dialog-restart.ts`
-- `src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts`
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-wa-dialog.markdown`
-- `gallery/src/pages/components/ha-dialogs.markdown`
+````
 
 ### Form Component (ha-form)
-
 - Schema-driven using `HaFormSchema[]`
 - Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
 - Built-in validation with error display
@@ -319,11 +235,7 @@ See these files for current patterns:
   .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
   @value-changed=${this._valueChanged}
 ></ha-form>
-```
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-form.markdown`
+````
 
 ### Alert Component (ha-alert)
 
@@ -337,35 +249,6 @@ See these files for current patterns:
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```
 
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-alert.markdown`
-
-### Keyboard Shortcuts (ShortcutManager)
-
-The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
-
-**Key Features:**
-
-- Automatically blocks shortcuts when input fields are focused
-- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
-- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
-
-**Implementation:**
-
-- **Class definition**: `src/common/keyboard/shortcuts.ts`
-- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
-
-### Tooltip Component (ha-tooltip)
-
-The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
-
-**Implementation:**
-
-- **Component definition**: `src/components/ha-tooltip.ts`
-- **Usage example**: `src/components/ha-label.ts`
-- **Gallery documentation**: `gallery/src/pages/components/ha-tooltip.markdown`
-
 ## Common Patterns
 
 ### Creating a Panel
@@ -406,19 +289,11 @@ export class DialogMyFeature
   @state()
   private _params?: MyDialogParams;
 
-  @state()
-  private _open = false;
-
   public async showDialog(params: MyDialogParams): Promise<void> {
     this._params = params;
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -429,27 +304,23 @@ export class DialogMyFeature
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._params.title}
-        header-subtitle=${this._params.subtitle}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, this._params.title)}
       >
-        <p>Dialog content</p>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this._submit}>
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <!-- Dialog content -->
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button @click=${this._submit} slot="primaryAction">
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,7 +42,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 }}
@@ -56,12 +56,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -77,7 +77,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/ci.yaml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@v4.2.4
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -76,9 +76,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -100,9 +100,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/init@v3
         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@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/autobuild@v3
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@014f16e7ab1402f30e7c3329d33797e7948572db # v4.31.3
+        uses: github/codeql-action/analyze@v3

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -43,7 +43,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 }}
@@ -57,12 +57,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,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

@@ -16,10 +16,10 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -35,7 +35,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

@@ -21,10 +21,10 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -40,7 +40,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/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
+        uses: actions/labeler@v5.0.0
         with:
           sync-labels: true

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
+      - uses: dessant/lock-threads@v5.0.1
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"

.github/workflows/nightly.yaml

@@ -20,15 +20,15 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@v4.6.2
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@feb19ddc698445db27401f1490f6ac182da0816f # v3.2.0
+        uses: relative-ci/agent-action@v3.0.1
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@b1476f6e6eb133afa41ed8589daba6dc69b4d3f5 # v6.1.0
+      - uses: release-drafter/release-drafter@v6.1.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -23,10 +23,10 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
+        uses: actions/setup-python@v5
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -34,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@v2.3.2
         with:
           files: |
             dist/*.whl
@@ -73,9 +73,8 @@ jobs:
           version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
-      # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.10.0
+        uses: home-assistant/wheels@2025.07.0
         with:
           abi: cp313
           tag: musllinux_1_2
@@ -91,9 +90,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -108,7 +107,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@v2.3.2
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -120,9 +119,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
       - name: Setup Node
-        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
+        uses: actions/setup-node@v4.4.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -137,6 +136,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@v2.3.2
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/restrict-task-creation.yml

@@ -9,10 +9,10 @@ jobs:
   check-authorization:
     runs-on: ubuntu-latest
     # Only run if this is a Task issue type (from the issue form)
-    if: github.event.issue.type.name == 'Task'
+    if: github.event.issue.issue_type == 'Task'
     steps:
       - name: Check if user is authorized
-        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
+        uses: actions/github-script@v7
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
+        uses: actions/stale@v9.1.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+        uses: actions/checkout@v4.2.2
 
       - name: Upload Translations
         run: |

.nvmrc

@@ -1 +1 @@
-22.21.1
+lts/iron

.yarnrc.yml

@@ -6,4 +6,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.11.0.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

AGENTS.md

@@ -1 +0,0 @@
-.github/copilot-instructions.md

build-scripts/bundle.cjs

@@ -18,16 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
     require.resolve("@vaadin/vaadin-material-styles/typography.js"),
     require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
-    (isHassioBuild || isLandingPageBuild) &&
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    (isHassioBuild || isLandingPageBuild) &&
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -183,6 +183,7 @@ module.exports.babelOptions = ({
       include: /\/node_modules\//,
       exclude: [
         "element-internals-polyfill",
+        "@shoelace-style",
         "@?lit(?:-labs|-element|-html)?",
       ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },
@@ -337,7 +338,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      isLandingPageBuild: true,
     };
   },
 };

build-scripts/rspack.cjs

@@ -41,7 +41,6 @@ const createRspackConfig = ({
   isStatsBuild,
   isTestBuild,
   isHassioBuild,
-  isLandingPageBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -169,9 +168,7 @@ const createRspackConfig = ({
         },
       }),
       new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
         path.resolve(paths.root_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),
@@ -260,6 +257,7 @@ const createRspackConfig = ({
       ),
     },
     experiments: {
+      layers: true,
       outputModule: true,
     },
   };

cast/public/manifest.json

@@ -14,5 +14,5 @@
   "name": "Home Assistant Cast",
   "short_name": "HA Cast",
   "start_url": "/?homescreen=1",
-  "theme_color": "#009ac7"
+  "theme_color": "#03A9F4"
 }

cast/src/launcher/layout/hc-cast.ts

@@ -16,9 +16,9 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -28,6 +28,7 @@ import {
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
 
 @customElement("hc-cast")
@@ -95,9 +96,7 @@ class HcCast extends LitElement {
                 <ha-list @action=${this._handlePickView} activatable>
                   ${(
                     this.lovelaceViews ?? [
-                      {
-                        title: "Home",
-                      },
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                     ]
                   ).map(
                     (view, idx) => html`
@@ -243,7 +242,7 @@ class HcCast extends LitElement {
     }
 
     .question:before {
-      border-radius: var(--ha-border-radius-sm);
+      border-radius: 4px;
       position: absolute;
       top: 0;
       right: 0;

cast/src/launcher/layout/hc-layout.ts

@@ -95,8 +95,7 @@ class HcLayout extends LitElement {
     }
 
     .hero {
-      border-radius: var(--ha-border-radius-sm) var(--ha-border-radius-sm)
-        var(--ha-border-radius-square) var(--ha-border-radius-square);
+      border-radius: 4px 4px 0 0;
     }
     .subtitle {
       font-size: var(--ha-font-size-m);

cast/src/receiver/demo/cast-demo-entities.ts

@@ -75,7 +75,7 @@ export const castDemoEntities: () => Entity[] = () =>
         longitude: 4.8903147,
         radius: 100,
         friendly_name: "Home",
-        icon: "mdi:home",
+        icon: "hass:home",
       },
     },
     "input_number.harmonyvolume": {
@@ -88,7 +88,7 @@ export const castDemoEntities: () => Entity[] = () =>
         step: 1,
         mode: "slider",
         friendly_name: "Volume",
-        icon: "mdi:volume-high",
+        icon: "hass:volume-high",
       },
     },
     "climate.upstairs": {

cast/src/receiver/demo/cast-demo-lovelace.ts

@@ -56,7 +56,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/climate",
                 name: "Climate controls",
-                icon: "mdi:arrow-right",
+                icon: "hass:arrow-right",
               },
             ],
           },
@@ -76,7 +76,7 @@ export const castDemoLovelace: () => LovelaceConfig = () => {
                 type: "weblink",
                 url: "/lovelace/overview",
                 name: "Back",
-                icon: "mdi:arrow-left",
+                icon: "hass:arrow-left",
               },
             ],
           },

demo/public/manifest.json

@@ -75,5 +75,5 @@
   "name": "Home Assistant Demo",
   "short_name": "HA Demo",
   "start_url": "/?homescreen=1",
-  "theme_color": "#009ac7"
+  "theme_color": "#03A9F4"
 }

demo/src/configs/arsaboo/entities.ts

@@ -143,7 +143,7 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
       state: "on",
       attributes: {
         friendly_name: "Home Automation",
-        icon: "mdi:home-automation",
+        icon: "hass:home-automation",
       },
     },
     "input_boolean.tvtime": {

demo/src/configs/arsaboo/lovelace.ts

@@ -4,7 +4,7 @@ export const demoLovelaceArsaboo: DemoConfig["lovelace"] = (localize) => ({
   title: "Home Assistant",
   views: [
     {
-      icon: "mdi:home-assistant",
+      icon: "hass:home-assistant",
       id: "home",
       title: "Home",
       cards: [

demo/src/configs/jimpower/lovelace.ts

@@ -1236,7 +1236,7 @@ export const demoLovelaceJimpower: DemoConfig["lovelace"] = () => ({
         },
       ],
       path: "security",
-      icon: "mdi:shield-home",
+      icon: "hass:shield-home",
       name: "Security",
       background:
         'center / cover no-repeat url("/assets/jimpower/background-15.jpg") fixed',

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

gallery/src/components/demo-more-info.ts

@@ -1,11 +1,10 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
-import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
@@ -22,13 +21,11 @@ class DemoMoreInfo extends LitElement {
       <div class="root">
         <div id="card">
           <ha-card>
-            ${!computeShowNewMoreInfo(state)
-              ? html`<state-card-content
-                  .stateObj=${state}
-                  .hass=${this.hass}
-                  in-dialog
-                ></state-card-content>`
-              : nothing}
+            <state-card-content
+              .stateObj=${state}
+              .hass=${this.hass}
+              in-dialog
+            ></state-card-content>
 
             <more-info-content
               .hass=${this.hass}

gallery/src/data/demo_states.js

@@ -1106,7 +1106,7 @@ export default {
       friendly_name: "Philips Hue",
       entity_picture: null,
       description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
       submit_caption: "I have pressed the button",
     },
     last_changed: "2018-07-19T10:44:46.515160+00:00",

gallery/src/data/media_players.ts

@@ -17,10 +17,6 @@ export const createMediaPlayerEntities = () => [
       new Date().getTime() - 23000
     ).toISOString(),
     volume_level: 0.5,
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    source: "AirPlay",
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    sound_mode: "Music",
   }),
   getEntity("media_player", "music_playing", "playing", {
     friendly_name: "Playing The Music",
@@ -28,8 +24,8 @@ export const createMediaPlayerEntities = () => [
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
     // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + Grouping
-    supported_features: 784959,
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    supported_features: 195135,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
     media_position: 0,
@@ -38,9 +34,6 @@ export const createMediaPlayerEntities = () => [
       new Date().getTime() - 23000
     ).toISOString(),
     volume_level: 0.5,
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    sound_mode: "Music",
-    group_members: ["media_player.playing", "media_player.stream_playing"],
   }),
   getEntity("media_player", "stream_playing", "playing", {
     friendly_name: "Playing the Stream",
@@ -156,18 +149,15 @@ export const createMediaPlayerEntities = () => [
   }),
   getEntity("media_player", "receiver_on", "on", {
     source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
     volume_level: 0.63,
     is_volume_muted: false,
     source: "TV",
-    sound_mode: "Movie",
     friendly_name: "Receiver (selectable sources)",
     // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
     supported_features: 84364,
   }),
   getEntity("media_player", "receiver_off", "off", {
     source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
     friendly_name: "Receiver (selectable sources)",
     // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
     supported_features: 84364,

gallery/src/ha-gallery.ts

@@ -208,7 +208,7 @@ class HaGallery extends LitElement {
       }
 
       .sidebar a[active]::before {
-        border-radius: var(--ha-border-radius-lg);
+        border-radius: 12px;
         position: absolute;
         top: 0;
         right: 2px;
@@ -241,7 +241,7 @@ class HaGallery extends LitElement {
         text-align: center;
         margin: 16px;
         padding: 16px;
-        border-radius: var(--ha-border-radius-lg);
+        border-radius: 12px;
         background-color: var(--primary-background-color);
       }
 

gallery/src/pages/automation/describe-trigger.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
-import type { LegacyTrigger } from "../../../../src/data/automation";
+import type { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -66,7 +66,7 @@ const triggers = [
   },
 ];
 
-const initialTrigger: LegacyTrigger = {
+const initialTrigger: Trigger = {
   trigger: "state",
   entity_id: "light.kitchen",
 };

gallery/src/pages/automation/editor-action.ts

@@ -18,6 +18,7 @@ import { HaDeviceAction } from "../../../../src/panels/config/automation/action/
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
 import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
+import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
 import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
@@ -31,6 +32,7 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Service", actions: [HaServiceAction.defaultConfig] },
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
+  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
   { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },

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

@@ -117,7 +117,7 @@ export class DemoHaBadge extends LitElement {
     }
     .card-content {
       display: flex;
-      gap: var(--ha-space-6);
+      gap: 24px;
     }
   `;
 }

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

@@ -155,11 +155,11 @@ export class DemoHaButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: var(--ha-space-6);
+      gap: 24px;
     }
     .card-content div {
       display: flex;
-      gap: var(--ha-space-2);
+      gap: 8px;
     }
   `;
 }

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

@@ -9,10 +9,10 @@ import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-button";
-import "../../../../src/components/ha-control-button-group";
+import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-control-button-group";
 
 interface Button {
   label: string;
@@ -156,17 +156,17 @@ export class DemoHaBarButton extends LitElement {
       --control-button-icon-color: var(--primary-color);
       --control-button-background-color: var(--primary-color);
       --control-button-background-opacity: 0.2;
-      --control-button-border-radius: var(--ha-border-radius-xl);
+      --control-button-border-radius: 18px;
       height: 100px;
       width: 100px;
     }
     .custom-group {
       --control-button-group-thickness: 100px;
-      --control-button-group-border-radius: var(--ha-border-radius-6xl);
+      --control-button-group-border-radius: 36px;
       --control-button-group-spacing: 20px;
     }
     .custom-group ha-control-button {
-      --control-button-border-radius: var(--ha-border-radius-xl);
+      --control-button-border-radius: 18px;
       --mdc-icon-size: 32px;
     }
     .vertical-buttons {

gallery/src/pages/components/ha-control-number-buttons.ts

@@ -1,10 +1,10 @@
 import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { repeat } from "lit/directives/repeat";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-number-buttons";
+import { repeat } from "lit/directives/repeat";
+import { ifDefined } from "lit/directives/if-defined";
 
 const buttons: {
   id: string;
@@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement {
       --control-number-buttons-background-color: #2196f3;
       --control-number-buttons-background-opacity: 0.1;
       --control-number-buttons-thickness: 100px;
-      --control-number-buttons-border-radius: var(--ha-border-radius-6xl);
+      --control-number-buttons-border-radius: 36px;
     }
   `;
 }

gallery/src/pages/components/ha-control-select-menu.ts

@@ -131,7 +131,7 @@ export class DemoHaControlSelectMenu extends LitElement {
       --control-button-icon-color: var(--primary-color);
       --control-button-background-color: var(--primary-color);
       --control-button-background-opacity: 0.2;
-      --control-button-border-radius: var(--ha-border-radius-xl);
+      --control-button-border-radius: 18px;
       height: 100px;
       width: 100px;
     }

gallery/src/pages/components/ha-control-select.ts

@@ -187,7 +187,7 @@ export class DemoHaControlSelect extends LitElement {
       --mdc-icon-size: 24px;
       --control-select-color: var(--state-fan-active-color);
       --control-select-thickness: 130px;
-      --control-select-border-radius: var(--ha-border-radius-6xl);
+      --control-select-border-radius: 36px;
     }
     .vertical-selects {
       height: 300px;

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

@@ -3,8 +3,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-slider";
+import "../../../../src/components/ha-card";
 
 const sliders: {
   id: string;
@@ -151,7 +151,7 @@ export class DemoHaBarSlider extends LitElement {
       --control-slider-background: #ffcf4c;
       --control-slider-background-opacity: 0.2;
       --control-slider-thickness: 130px;
-      --control-slider-border-radius: var(--ha-border-radius-6xl);
+      --control-slider-border-radius: 36px;
     }
     .vertical-sliders {
       height: 300px;

gallery/src/pages/components/ha-control-switch.ts

@@ -9,8 +9,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-switch";
+import "../../../../src/components/ha-card";
 
 const switches: {
   id: string;
@@ -118,7 +118,7 @@ export class DemoHaControlSwitch extends LitElement {
       --control-switch-on-color: var(--green-color);
       --control-switch-off-color: var(--red-color);
       --control-switch-thickness: 130px;
-      --control-switch-border-radius: var(--ha-border-radius-6xl);
+      --control-switch-border-radius: 36px;
       --control-switch-padding: 6px;
       --mdc-icon-size: 24px;
     }

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

@@ -5,14 +5,14 @@ subtitle: Dialogs provide important prompts in a user flow.
 
 # Material Design 3
 
-Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guidelines. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guideliness. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
 
 # Guidelines
 
 ## Design
 
-- 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 have a max width of 560px. Alert and confirmation dialogs got 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 guideliness.
 - 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.
 - 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.
@@ -26,7 +26,7 @@ Our dialogs are based on the latest version of Material Design. Please note that
 
 - A best practice is to always use a title, even if it is optional by Material guidelines.
 - People mainly read the title and a button. Put the most important information in those two.
-- Try to avoid user generated content in the title, this could make the title unreadably long.
+- Try to avoid user generated content in the title, this could make the title unreadable long.
 - If users become unsure, they read the description. Make sure this explains what will happen.
 - Strive for minimalism.
 

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

@@ -1,55 +0,0 @@
----
-title: Dropdown
----
-
-# Dropdown `<ha-dropdown>`
-
-## Implementation
-
-A compact, accessible dropdown menu for choosing actions or settings. `ha-dropdown` supports composed menu items (`<ha-dropdown-item>`) for icons, submenus, checkboxes, disabled entries, and destructive variants. Use composition with `slot="trigger"` to control the trigger button and use `<ha-dropdown-item>` for rich item content.
-
-### Example usage (composition)
-
-```html
-<ha-dropdown open>
-  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-  <ha-dropdown-item>
-    <ha-svg-icon .path="mdiContentCut" slot="icon"></ha-svg-icon>
-    Cut
-  </ha-dropdown-item>
-
-  <ha-dropdown-item>
-    <ha-svg-icon .path="mdiContentCopy" slot="icon"></ha-svg-icon>
-    Copy
-  </ha-dropdown-item>
-
-  <ha-dropdown-item disabled>
-    <ha-svg-icon .path="mdiContentPaste" slot="icon"></ha-svg-icon>
-    Paste
-  </ha-dropdown-item>
-
-  <ha-dropdown-item>
-    Show images
-    <ha-dropdown-item slot="submenu" value="show-all-images"
-      >Show all images</ha-dropdown-item
-    >
-    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-      >Show thumbnails</ha-dropdown-item
-    >
-  </ha-dropdown-item>
-
-  <ha-dropdown-item type="checkbox" checked>Emoji shortcuts</ha-dropdown-item>
-  <ha-dropdown-item type="checkbox" checked>Word wrap</ha-dropdown-item>
-
-  <ha-dropdown-item variant="danger">
-    <ha-svg-icon .path="mdiDelete" slot="icon"></ha-svg-icon>
-    Delete
-  </ha-dropdown-item>
-</ha-dropdown>
-```
-
-### API
-
-This component is based on the webawesome dropdown component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/dropdown/) for more details.

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

@@ -1,133 +0,0 @@
-import "@home-assistant/webawesome/dist/components/button/button";
-import "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import "@home-assistant/webawesome/dist/components/icon/icon";
-import "@home-assistant/webawesome/dist/components/popup/popup";
-import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentPaste,
-  mdiDelete,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-dropdown";
-import "../../../../src/components/ha-dropdown-item";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-svg-icon";
-
-@customElement("demo-components-ha-dropdown")
-export class DemoHaDropdown extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
-              <div class="card-content">
-                <ha-dropdown open>
-                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCut}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Cut
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCopy}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Copy
-                  </ha-dropdown-item>
-                  <ha-dropdown-item disabled>
-                    <ha-svg-icon
-                      .path=${mdiContentPaste}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Paste
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    Show images
-                    <ha-dropdown-item slot="submenu" value="show-all-images"
-                      >Show All Images</ha-dropdown-item
-                    >
-                    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-                      >Show Thumbnails</ha-dropdown-item
-                    >
-                  </ha-dropdown-item>
-                  <ha-dropdown-item type="checkbox" checked
-                    >Emoji Shortcuts</ha-dropdown-item
-                  >
-                  <ha-dropdown-item type="checkbox" checked
-                    >Word Wrap</ha-dropdown-item
-                  >
-                  <ha-dropdown-item variant="danger">
-                    <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-                    Delete
-                  </ha-dropdown-item>
-                </ha-dropdown>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    .button {
-      padding: unset;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .card-content div {
-      display: flex;
-      gap: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-dropdown": DemoHaDropdown;
-  }
-}

gallery/src/pages/components/ha-marquee-text.markdown

@@ -1,37 +0,0 @@
----
-title: Marquee Text
----
-
-# Marquee Text `<ha-marquee-text>`
-
-Marquee text component scrolls text horizontally if it overflows its container. It supports pausing on hover and customizable speed and pause duration.
-
-## Implementation
-
-### Example Usage
-
-<ha-marquee-text style="width: 200px;">
-    This is a long text that will scroll horizontally if it overflows the container.
-</ha-marquee-text>
-
-```html
-<ha-marquee-text style="width: 200px;">
-  This is a long text that will scroll horizontally if it overflows the
-  container.
-</ha-marquee-text>
-```
-
-### API
-
-**Slots**
-
-- default slot: The text content to be displayed and scrolled.
-  - no default
-
-**Properties/Attributes**
-
-| Name           | Type    | Default | Description                                                                  |
-| -------------- | ------- | ------- | ---------------------------------------------------------------------------- |
-| speed          | number  | `15`    | The speed of the scrolling animation. Higher values result in faster scroll. |
-| pause-on-hover | boolean | `true`  | Whether to pause the scrolling animation when                                |
-| pause-duration | number  | `1000`  | The delay in milliseconds before the scrolling animation starts/restarts.    |

gallery/src/pages/components/ha-marquee-text.ts

@@ -1,25 +0,0 @@
-import { css, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-marquee-text";
-
-@customElement("demo-components-ha-marquee-text")
-export class DemoHaMarqueeText extends LitElement {
-  static styles = css`
-    ha-card {
-      max-width: 600px;
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-marquee-text": DemoHaMarqueeText;
-  }
-}

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

@@ -123,11 +123,11 @@ export class DemoHaProgressButton extends LitElement {
     .card-content {
       display: flex;
       flex-direction: column;
-      gap: var(--ha-space-6);
+      gap: 24px;
     }
     .card-content div {
       display: flex;
-      gap: var(--ha-space-2);
+      gap: 8px;
     }
   `;
 }

gallery/src/pages/components/ha-select-box.ts

@@ -131,7 +131,7 @@ export class DemoHaSelectBox extends LitElement {
       --mdc-icon-size: 24px;
       --control-select-color: var(--state-fan-active-color);
       --control-select-thickness: 130px;
-      --control-select-border-radius: var(--ha-border-radius-6xl);
+      --control-select-border-radius: 36px;
     }
 
     p.title {

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

@@ -1,38 +0,0 @@
----
-title: Slider
-subtitle: A slider component for selecting a value from a range.
----
-
-<style>
-  .wrapper {
-    display: flex;
-    gap: 24px;
-  }
-</style>
-
-# Slider `<ha-slider>`
-
-## Implementation
-
-### 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>
-</div>
-
-```html
-<ha-slider size="small" with-markers min="0" max="8" value="4"></ha-slider>
-<ha-slider size="medium"></ha-slider>
-```
-
-### API
-
-This component is based on the webawesome slider component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/slider/) for more details.
-
-**CSS Custom Properties**
-
-- `--ha-slider-track-size` - Height of the slider track. Defaults to `4px`.
-- `--ha-slider-thumb-color` - Color of the slider thumb. Defaults to `var(--primary-color)`.
-- `--ha-slider-indicator-color` - Color of the filled portion of the slider track. Defaults to `var(--primary-color)`.

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

@@ -1,100 +0,0 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-bar";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-spinner";
-import "../../../../src/components/ha-slider";
-import type { HomeAssistant } from "../../../../src/types";
-
-@customElement("demo-components-ha-slider")
-export class DemoHaSlider extends LitElement {
-  @property({ attribute: false }) hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-slider ${mode} demo">
-              <div class="card-content">
-                <span>Default (disabled)</span>
-                <ha-slider
-                  disabled
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Small</span>
-                <ha-slider
-                  size="small"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-                <span>Medium</span>
-                <ha-slider
-                  size="medium"
-                  min="0"
-                  max="8"
-                  value="4"
-                  with-markers
-                ></ha-slider>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-      margin: 16px;
-      border-radius: var(--ha-border-radius-md);
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--ha-space-6);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-slider": DemoHaSlider;
-  }
-}

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

@@ -61,7 +61,7 @@ export class DemoHaSpinner extends LitElement {
       background-color: var(--primary-background-color);
       padding: 0 50px;
       margin: 16px;
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 8px;
     }
     ha-card {
       margin: 24px auto;
@@ -70,7 +70,7 @@ export class DemoHaSpinner extends LitElement {
       display: flex;
       flex-direction: column;
       align-items: center;
-      gap: var(--ha-space-6);
+      gap: 24px;
     }
   `;
 }

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

@@ -6,23 +6,21 @@ A tooltip's target is its _first child element_, so you should only wrap one ele
 
 Tooltips use `display: contents` so they won't interfere with how elements are positioned in a flex or grid layout.
 
-<ha-button id="hover">Hover Me</ha-button>
-<ha-tooltip for="hover">
-This is a tooltip
+<ha-tooltip content="This is a tooltip">
+  <ha-button>Hover Me</ha-button>
 </ha-tooltip>
 
 ```
-<ha-button id="hover">Hover Me</ha-button>
-<ha-tooltip for="hover">
-This is a tooltip
+<ha-tooltip content="This is a tooltip">
+  <ha-button>Hover Me</ha-button>
 </ha-tooltip>
 ```
 
 ## Documentation
 
-This element is based on webawesome `wa-tooltip` it only sets some css tokens and has a custom show/hide animation.
+This element is based on shoelace `sl-tooltip` it only sets some css tokens and has a custom show/hide animation.
 
-<a href="https://webawesome.com/docs/components/tooltip/" target="_blank" rel="noopener noreferrer">Webawesome documentation</a>
+<a href="https://shoelace.style/components/tooltip" target="_blank" rel="noopener noreferrer">Shoelace documentation</a>
 
 ### HA style tokens
 
@@ -30,7 +28,7 @@ In your theme settings use this without the prefixed `--`.
 
 - `--ha-tooltip-border-radius` (Default: 4px)
 - `--ha-tooltip-arrow-size` (Default: 8px)
-- `--wa-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
+- `--sl-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
 - `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
-- `--wa-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
-- `--wa-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
+- `--sl-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
+- `--sl-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)

gallery/src/pages/components/ha-wa-dialog.markdown

@@ -1,3 +0,0 @@
----
-title: Dialog (ha-wa-dialog)
----

gallery/src/pages/components/ha-wa-dialog.ts

@@ -1,523 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { mdiCog, mdiHelp } from "@mdi/js";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-dialog-footer";
-import "../../../../src/components/ha-form/ha-form";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-wa-dialog";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-
-const SCHEMA: HaFormSchema[] = [
-  { type: "string", name: "Name", default: "", autofocus: true },
-  { type: "string", name: "Email", default: "" },
-];
-
-type DialogType =
-  | false
-  | "basic"
-  | "basic-subtitle-below"
-  | "basic-subtitle-above"
-  | "form"
-  | "actions";
-
-@customElement("demo-components-ha-wa-dialog")
-export class DemoHaWaDialog extends LitElement {
-  @state() private _openDialog: DialogType = false;
-
-  protected render() {
-    return html`
-      <div class="content">
-        <h1>Dialog <code>&lt;ha-wa-dialog&gt;</code></h1>
-
-        <p class="subtitle">Dialog component built with WebAwesome.</p>
-
-        <h2>Demos</h2>
-
-        <div class="buttons">
-          <ha-button @click=${this._handleOpenDialog("basic")}
-            >Basic dialog</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-below")}
-            >Basic dialog with subtitle below</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-above")}
-            >Basic dialog with subtitle above</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("form")}
-            >Dialog with form</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("actions")}
-            >Dialog with actions</ha-button
-          >
-        </div>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "basic"}
-          header-title="Basic dialog"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "basic-subtitle-below"}
-          header-title="Basic dialog with subtitle"
-          header-subtitle="This is a basic dialog with a subtitle below"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "basic-subtitle-above"}
-          header-title="Dialog with subtitle above"
-          header-subtitle="This is a basic dialog with a subtitle above"
-          header-subtitle-position="above"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "form"}
-          header-title="Dialog with form"
-          header-subtitle="This is a dialog with a form and a footer"
-          prevent-scrim-close
-          @closed=${this._handleClosed}
-        >
-          <ha-form autofocus .schema=${SCHEMA}></ha-form>
-          <ha-dialog-footer slot="footer">
-            <ha-button
-              data-dialog="close"
-              slot="secondaryAction"
-              variant="plain"
-              >Cancel</ha-button
-            >
-            <ha-button data-dialog="close" slot="primaryAction" variant="accent"
-              >Submit</ha-button
-            >
-          </ha-dialog-footer>
-        </ha-wa-dialog>
-
-        <ha-wa-dialog
-          .open=${this._openDialog === "actions"}
-          header-title="Dialog with actions"
-          header-subtitle="This is a dialog with header actions"
-          @closed=${this._handleClosed}
-        >
-          <div slot="headerActionItems">
-            <ha-icon-button label="Settings" path=${mdiCog}></ha-icon-button>
-            <ha-icon-button label="Help" path=${mdiHelp}></ha-icon-button>
-          </div>
-
-          <div>Dialog content</div>
-        </ha-wa-dialog>
-
-        <h2>Design</h2>
-
-        <h3>Width</h3>
-
-        <p>There are multiple widths available for the dialog.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>small</code></td>
-              <td><code>min(320px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>medium</code></td>
-              <td><code>min(580px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>large</code></td>
-              <td><code>min(720px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>full</code></td>
-              <td><code>var(--full-width)</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <p>
-          <code>--full-width</code> is calculated based on the available width
-          of the screen. 95vw is the maximum width of the dialog on a large
-          screen, while on a small screen it is 100vw minus the safe area
-          insets.
-        </p>
-
-        <p>Dialogs have a default width of <code>medium</code>.</p>
-
-        <h3>Prevent scrim close</h3>
-
-        <p>
-          You can prevent the dialog from being closed by clicking the
-          scrim/overlay. This is allowed by default.
-        </p>
-
-        <h3>Header</h3>
-
-        <p>The header contains a title, a subtitle and action items.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>header</code></td>
-              <td>The entire header area.</td>
-            </tr>
-            <tr>
-              <td><code>headerTitle</code></td>
-              <td>The header title text.</td>
-            </tr>
-            <tr>
-              <td><code>headerSubtitle</code></td>
-              <td>The header subtitle text.</td>
-            </tr>
-            <tr>
-              <td><code>headerActionItems</code></td>
-              <td>The header action items.</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Header title</h4>
-
-        <p>The header title is a text string.</p>
-
-        <h4>Header subtitle</h4>
-
-        <p>The header subtitle is a text string.</p>
-
-        <h4>Header action items</h4>
-
-        <p>
-          The header action items usually containing icon buttons and/or menu
-          buttons.
-        </p>
-
-        <h3>Body</h3>
-
-        <p>The body is the content of the dialog.</p>
-
-        <h3>Footer</h3>
-
-        <p>The footer is the footer of the dialog.</p>
-
-        <p>
-          It is recommended to use the <code>ha-dialog-footer</code> component
-          for the footer and to style the buttons inside the footer as so:
-        </p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-              <th>Variant to use</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>secondaryAction</code></td>
-              <td>The secondary action button(s).</td>
-              <td><code>plain</code></td>
-            </tr>
-            <tr>
-              <td><code>primaryAction</code></td>
-              <td>The primary action button(s).</td>
-              <td><code>accent</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h2>Implementation</h2>
-
-        <h3>Example Usage</h3>
-
-        <pre><code>&lt;ha-wa-dialog
-  open
-  header-title="Dialog title"
-  header-subtitle="Dialog subtitle"
-  prevent-scrim-close
-&gt;
-  &lt;div slot="headerActionItems"&gt;
-    &lt;ha-icon-button label="Settings" path="mdiCog"&gt;&lt;/ha-icon-button&gt;
-    &lt;ha-icon-button label="Help" path="mdiHelp"&gt;&lt;/ha-icon-button&gt;
-  &lt;/div&gt;
-  &lt;div&gt;Dialog content&lt;/div&gt;
-  &lt;ha-dialog-footer slot="footer"&gt;
-    &lt;ha-button data-dialog="close" slot="secondaryAction" variant="plain"
-      &gt;Cancel&lt;/ha-button
-    &gt;
-    &lt;ha-button slot="primaryAction" variant="accent"&gt;Submit&lt;/ha-button&gt;
-  &lt;/ha-dialog-footer&gt;
-&lt;/ha-wa-dialog&gt;</code></pre>
-
-        <h3>API</h3>
-
-        <p>
-          This component is based on the webawesome dialog component. Check the
-          <a
-            href="https://webawesome.com/docs/components/dialog/"
-            target="_blank"
-            rel="noopener noreferrer"
-            >webawesome documentation</a
-          >
-          for more details.
-        </p>
-
-        <h4>Attributes</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Attribute</th>
-              <th>Description</th>
-              <th>Default</th>
-              <th>Options</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>open</code></td>
-              <td>Controls the dialog open state.</td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>width</code></td>
-              <td>Preferred dialog width preset.</td>
-              <td><code>medium</code></td>
-              <td>
-                <code>small</code>, <code>medium</code>, <code>large</code>,
-                <code>full</code>
-              </td>
-            </tr>
-            <tr>
-              <td><code>prevent-scrim-close</code></td>
-              <td>
-                Prevents closing the dialog by clicking the scrim/overlay.
-              </td>
-              <td><code>false</code></td>
-              <td><code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>header-title</code></td>
-              <td>Header title text when no custom title slot is provided.</td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle</code></td>
-              <td>
-                Header subtitle text when no custom subtitle slot is provided.
-              </td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle-position</code></td>
-              <td>Position of the subtitle relative to the title.</td>
-              <td><code>below</code></td>
-              <td><code>above</code>, <code>below</code></td>
-            </tr>
-            <tr>
-              <td><code>flexcontent</code></td>
-              <td>
-                Makes the dialog body a flex container for flexible layouts.
-              </td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>CSS Custom Properties</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>CSS Property</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>--dialog-content-padding</code></td>
-              <td>Padding for dialog content sections.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-show-duration</code></td>
-              <td>Show animation duration.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-hide-duration</code></td>
-              <td>Hide animation duration.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-surface-background</code></td>
-              <td>Dialog background color.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-border-radius</code></td>
-              <td>Border radius of the dialog surface.</td>
-            </tr>
-            <tr>
-              <td><code>--dialog-z-index</code></td>
-              <td>Z-index for the dialog.</td>
-            </tr>
-            <tr>
-              <td><code>--dialog-surface-position</code></td>
-              <td>CSS position of the dialog surface.</td>
-            </tr>
-            <tr>
-              <td><code>--dialog-surface-margin-top</code></td>
-              <td>Top margin for the dialog surface.</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Events</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Event</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>opened</code></td>
-              <td>Fired when the dialog is shown.</td>
-            </tr>
-            <tr>
-              <td><code>closed</code></td>
-              <td>Fired after the dialog is hidden.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    `;
-  }
-
-  private _handleOpenDialog = (dialog: DialogType) => () => {
-    this._openDialog = dialog;
-  };
-
-  private _handleClosed = () => {
-    this._openDialog = false;
-  };
-
-  static styles = [
-    css`
-      :host {
-        display: block;
-        padding: var(--ha-space-4);
-      }
-
-      .content {
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        margin-top: 0;
-        margin-bottom: var(--ha-space-2);
-      }
-
-      h2 {
-        margin-top: var(--ha-space-6);
-        margin-bottom: var(--ha-space-3);
-      }
-
-      h3,
-      h4 {
-        margin-top: var(--ha-space-4);
-        margin-bottom: var(--ha-space-2);
-      }
-
-      p {
-        margin: var(--ha-space-2) 0;
-        line-height: 1.6;
-      }
-
-      .subtitle {
-        color: var(--secondary-text-color);
-        font-size: 1.1em;
-        margin-bottom: var(--ha-space-4);
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: var(--ha-space-3) 0;
-      }
-
-      th,
-      td {
-        text-align: left;
-        padding: var(--ha-space-2);
-        border-bottom: 1px solid var(--divider-color);
-      }
-
-      th {
-        font-weight: 500;
-      }
-
-      code {
-        background-color: var(--secondary-background-color);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: monospace;
-        font-size: 0.9em;
-      }
-
-      pre {
-        background-color: var(--secondary-background-color);
-        padding: var(--ha-space-3);
-        border-radius: 8px;
-        overflow-x: auto;
-        margin: var(--ha-space-3) 0;
-      }
-
-      pre code {
-        background-color: transparent;
-        padding: 0;
-      }
-
-      .buttons {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: var(--ha-space-2);
-        margin: var(--ha-space-4) 0;
-      }
-
-      a {
-        color: var(--primary-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-wa-dialog": DemoHaWaDialog;
-  }
-}

gallery/src/pages/lovelace/tile-card.ts

@@ -101,14 +101,11 @@ const ENTITIES = [
       ClimateEntityFeature.FAN_MODE +
       ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
   }),
-  getEntity("fan", "fan_demo", "on", {
+  getEntity("fan", "fan_direction", "on", {
     friendly_name: "Ceiling fan",
     device_class: "fan",
     direction: "reverse",
-    supported_features:
-      FanEntityFeature.DIRECTION +
-      FanEntityFeature.SET_SPEED +
-      FanEntityFeature.OSCILLATE,
+    supported_features: [FanEntityFeature.DIRECTION],
   }),
 ];
 
@@ -275,29 +272,11 @@ const CONFIGS = [
     heading: "Fan direction feature",
     config: `
 - type: tile
-  entity: fan.fan_demo
+  entity: fan.fan_direction
   features:
   - type: fan-direction
     `,
   },
-  {
-    heading: "Fan speed feature",
-    config: `
-- type: tile
-  entity: fan.fan_demo
-  features:
-  - type: fan-speed
-    `,
-  },
-  {
-    heading: "Fan oscillate feature",
-    config: `
-- type: tile
-  entity: fan.fan_demo
-  features:
-  - type: fan-oscillate
-    `,
-  },
 ];
 
 @customElement("demo-lovelace-tile-card")

gallery/src/pages/misc/entity-state.ts

@@ -5,13 +5,13 @@ import type {
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { computeDomain } from "../../../../src/common/entity/compute_domain";
 import { computeStateDisplay } from "../../../../src/common/entity/compute_state_display";
 import "../../../../src/components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
 import "../../../../src/components/entity/state-badge";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
 import type { HomeAssistant } from "../../../../src/types";
 
 const SENSOR_DEVICE_CLASSES = [
@@ -39,7 +39,6 @@ const SENSOR_DEVICE_CLASSES = [
   "pm1",
   "pm10",
   "pm25",
-  "pm4",
   "power_factor",
   "power",
   "precipitation",
@@ -435,7 +434,7 @@ export class DemoEntityState extends LitElement {
       display: block;
       height: 20px;
       width: 20px;
-      border-radius: var(--ha-border-radius-md);
+      border-radius: 10px;
       background-color: rgb(--color);
     }
   `;

gallery/src/pages/more-info/fan.markdown

@@ -1,3 +0,0 @@
----
-title: Fan
----

gallery/src/pages/more-info/fan.ts

@@ -1,50 +0,0 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
-import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import "../../components/demo-more-infos";
-import { FanEntityFeature } from "../../../../src/data/fan";
-
-const ENTITIES = [
-  getEntity("fan", "fan", "on", {
-    friendly_name: "Fan",
-    device_class: "fan",
-    supported_features:
-      FanEntityFeature.OSCILLATE +
-      FanEntityFeature.DIRECTION +
-      FanEntityFeature.SET_SPEED,
-  }),
-];
-
-@customElement("demo-more-info-fan")
-class DemoMoreInfoFan extends LitElement {
-  @property({ attribute: false }) public hass!: MockHomeAssistant;
-
-  @query("demo-more-infos") private _demoRoot!: HTMLElement;
-
-  protected render(): TemplateResult {
-    return html`
-      <demo-more-infos
-        .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
-      ></demo-more-infos>
-    `;
-  }
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    const hass = provideHass(this._demoRoot);
-    hass.updateTranslations(null, "en");
-    hass.addEntities(ENTITIES);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-more-info-fan": DemoMoreInfoFan;
-  }
-}

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -11,10 +11,7 @@ import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-form/ha-form";
-import type {
-  HaFormSchema,
-  HaFormDataContainer,
-} from "../../../../src/components/ha-form/types";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-list-item";
@@ -36,7 +33,6 @@ import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
-import type { ObjectSelector, Selector } from "../../../../src/data/selector";
 
 const SUPPORTED_UI_TYPES = [
   "string",
@@ -82,125 +78,78 @@ class HassioAddonConfig extends LitElement {
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
-  private _getTranslationEntry(
-    language: string,
-    entry: HaFormSchema,
-    options?: { path?: string[] }
-  ) {
-    let parent = this.addon.translations[language]?.configuration;
-    if (!parent) return undefined;
-    if (options?.path) {
-      for (const key of options.path) {
-        parent = parent[key]?.fields;
-        if (!parent) return undefined;
-      }
-    }
-    return parent[entry.name];
-  }
-
-  public computeLabel = (
-    entry: HaFormSchema,
-    _data: HaFormDataContainer,
-    options?: { path?: string[] }
-  ): string =>
-    this._getTranslationEntry(this.hass.language, entry, options)?.name ||
-    this._getTranslationEntry("en", entry, options)?.name ||
+  public computeLabel = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.name ||
+    this.addon.translations.en?.configuration?.[entry.name]?.name ||
     entry.name;
 
-  public computeHelper = (
-    entry: HaFormSchema,
-    options?: { path?: string[] }
-  ): string =>
-    this._getTranslationEntry(this.hass.language, entry, options)
+  public computeHelper = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
       ?.description ||
-    this._getTranslationEntry("en", entry, options)?.description ||
+    this.addon.translations.en?.configuration?.[entry.name]?.description ||
     "";
 
   private _convertSchema = memoizeOne(
     // Convert supervisor schema to selectors
-    (schema: readonly HaFormSchema[]): HaFormSchema[] =>
-      this._convertSchemaElements(schema)
+    (schema: Record<string, any>): HaFormSchema[] =>
+      schema.map((entry) =>
+        entry.type === "select"
+          ? {
+              name: entry.name,
+              required: entry.required,
+              selector: { select: { options: entry.options } },
+            }
+          : entry.type === "string"
+            ? entry.multiple
+              ? {
+                  name: entry.name,
+                  required: entry.required,
+                  selector: {
+                    select: { options: [], multiple: true, custom_value: true },
+                  },
+                }
+              : {
+                  name: entry.name,
+                  required: entry.required,
+                  selector: {
+                    text: {
+                      type: entry.format
+                        ? entry.format
+                        : MASKED_FIELDS.includes(entry.name)
+                          ? "password"
+                          : "text",
+                    },
+                  },
+                }
+            : entry.type === "boolean"
+              ? {
+                  name: entry.name,
+                  required: entry.required,
+                  selector: { boolean: {} },
+                }
+              : entry.type === "schema"
+                ? {
+                    name: entry.name,
+                    required: entry.required,
+                    selector: { object: {} },
+                  }
+                : entry.type === "float" || entry.type === "integer"
+                  ? {
+                      name: entry.name,
+                      required: entry.required,
+                      selector: {
+                        number: {
+                          mode: "box",
+                          step: entry.type === "float" ? "any" : undefined,
+                        },
+                      },
+                    }
+                  : entry
+      )
   );
 
-  private _convertSchemaElements(
-    schema: readonly HaFormSchema[]
-  ): HaFormSchema[] {
-    return schema.map((entry) => this._convertSchemaElement(entry));
-  }
-
-  private _convertSchemaElement(entry: any): HaFormSchema {
-    if (entry.type === "schema" && !entry.multiple) {
-      return {
-        name: entry.name,
-        type: "expandable",
-        required: entry.required,
-        schema: this._convertSchemaElements(entry.schema),
-      };
-    }
-    const selector = this._convertSchemaElementToSelector(entry, false);
-    if (selector) {
-      return {
-        name: entry.name,
-        required: entry.required,
-        selector,
-      };
-    }
-    return entry;
-  }
-
-  private _convertSchemaElementToSelector(
-    entry: any,
-    force: boolean
-  ): Selector | null {
-    if (entry.type === "select") {
-      return { select: { options: entry.options } };
-    }
-    if (entry.type === "string") {
-      return entry.multiple
-        ? { select: { options: [], multiple: true, custom_value: true } }
-        : {
-            text: {
-              type: entry.format
-                ? entry.format
-                : MASKED_FIELDS.includes(entry.name)
-                  ? "password"
-                  : "text",
-            },
-          };
-    }
-    if (entry.type === "boolean") {
-      return { boolean: {} };
-    }
-    if (entry.type === "schema") {
-      const fields: NonNullable<ObjectSelector["object"]>["fields"] = {};
-      for (const child_entry of entry.schema) {
-        fields[child_entry.name] = {
-          required: child_entry.required,
-          selector: this._convertSchemaElementToSelector(child_entry, true)!,
-        };
-      }
-      return {
-        object: {
-          multiple: entry.multiple,
-          fields,
-        },
-      };
-    }
-    if (entry.type === "float" || entry.type === "integer") {
-      return {
-        number: {
-          mode: "box",
-          step: entry.type === "float" ? "any" : undefined,
-        },
-      };
-    }
-    if (force) {
-      return { object: {} };
-    }
-    return null;
-  }
-
-  private _filteredSchema = memoizeOne(
+  private _filteredShchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
   );
@@ -212,7 +161,7 @@ class HassioAddonConfig extends LitElement {
       showForm &&
       JSON.stringify(this.addon.schema) !==
         JSON.stringify(
-          this._filteredSchema(this.addon.options, this.addon.schema!)
+          this._filteredShchema(this.addon.options, this.addon.schema!)
         );
     return html`
       <h1>${this.addon.name}</h1>
@@ -250,7 +199,6 @@ class HassioAddonConfig extends LitElement {
         <div class="card-content">
           ${showForm
             ? html`<ha-form
-                .hass=${this.hass}
                 .disabled=${this.disabled}
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
@@ -259,7 +207,7 @@ class HassioAddonConfig extends LitElement {
                 .schema=${this._convertSchema(
                   this._showOptional
                     ? this.addon.schema!
-                    : this._filteredSchema(
+                    : this._filteredShchema(
                         this.addon.options,
                         this.addon.schema!
                       )

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -781,7 +781,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card class="long-description" outlined>
+            <ha-card outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
@@ -1333,9 +1333,6 @@ class HassioAddonInfo extends LitElement {
         .description a {
           color: var(--primary-color);
         }
-        .long-description {
-          direction: ltr;
-        }
         ha-assist-chip {
           --md-sys-color-primary: var(--text-primary-color);
           --md-sys-color-on-surface: var(--text-primary-color);

hassio/src/components/hassio-card-content.ts

@@ -121,7 +121,7 @@ class HassioCardContent extends LitElement {
       height: 12px;
       top: 8px;
       right: 8px;
-      border-radius: var(--ha-border-radius-circle);
+      border-radius: 50%;
     }
     .topbar {
       position: absolute;

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -164,7 +164,7 @@ class HassioHardwareDialog extends LitElement {
         pre,
         code {
           background-color: var(--markdown-code-background-color, none);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 3px;
         }
         pre {
           padding: 16px;

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -15,8 +15,6 @@ import "../../../../src/components/ha-list";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-password-field";
 import "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-tab-group";
-import "../../../../src/components/ha-tab-group-tab";
 import "../../../../src/components/ha-textfield";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -38,6 +36,7 @@ import type { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import type { HassioNetworkDialogParams } from "./show-dialog-network";
+import "../../../../src/components/sl-tab-group";
 
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
@@ -115,19 +114,19 @@ export class DialogHassioNetwork
             ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
-            ? html`<ha-tab-group @wa-tab-show=${this._handleTabActivated}
+            ? html`<sl-tab-group @sl-tab-show=${this._handleTabActivated}
                 >${this._interfaces.map(
                   (device, index) =>
-                    html`<ha-tab-group-tab
+                    html`<sl-tab
                       slot="nav"
                       .id=${device.interface}
                       .panel=${index.toString()}
                       .active=${this._curTabIndex === index}
                     >
                       ${device.interface}
-                    </ha-tab-group-tab>`
+                    </sl-tab>`
                 )}
-              </ha-tab-group>`
+              </sl-tab-group>`
             : ""}
         </div>
         ${cache(this._renderTab())}
@@ -628,10 +627,10 @@ export class DialogHassioNetwork
           --mdc-list-side-padding: 10px;
         }
 
-        ha-tab-group-tab {
+        sl-tab {
           flex: 1;
         }
-        ha-tab-group-tab::part(base) {
+        sl-tab::part(base) {
           width: 100%;
           justify-content: center;
         }

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -228,7 +228,7 @@ class HassioRegistriesDialog extends LitElement {
       css`
         .registry {
           border: 1px solid var(--divider-color);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
           margin-top: 4px;
         }
         .action {

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -119,27 +119,26 @@ class HassioRepositoriesDialog extends LitElement {
                         <div>${repo.url}</div>
                       </div>
                       <ha-tooltip
-                        .for="icon-button-${repo.slug}"
                         class="delete"
                         slot="end"
-                      >
-                        ${this._dialogParams!.supervisor.localize(
+                        .content=${this._dialogParams!.supervisor.localize(
                           usedRepositories.includes(repo.slug)
                             ? "dialog.repositories.used"
                             : "dialog.repositories.remove"
                         )}
+                      >
+                        <div>
+                          <ha-icon-button
+                            .disabled=${usedRepositories.includes(repo.slug)}
+                            .slug=${repo.slug}
+                            .path=${usedRepositories.includes(repo.slug)
+                              ? mdiDeleteOff
+                              : mdiDelete}
+                            @click=${this._removeRepository}
+                          >
+                          </ha-icon-button>
+                        </div>
                       </ha-tooltip>
-                      <div .id="icon-button-${repo.slug}">
-                        <ha-icon-button
-                          .disabled=${usedRepositories.includes(repo.slug)}
-                          .slug=${repo.slug}
-                          .path=${usedRepositories.includes(repo.slug)
-                            ? mdiDeleteOff
-                            : mdiDelete}
-                          @click=${this._removeRepository}
-                        >
-                        </ha-icon-button>
-                      </div>
                     </ha-md-list-item>
                   `
                 )
@@ -193,7 +192,7 @@ class HassioRepositoriesDialog extends LitElement {
         }
         .option {
           border: 1px solid var(--divider-color);
-          border-radius: var(--ha-border-radius-sm);
+          border-radius: 4px;
           margin-top: 4px;
         }
         ha-button {

hassio/src/dialogs/system-managed/dialog-system-managed.ts

@@ -159,7 +159,7 @@ class HassioSystemManagedDialog extends LitElement {
           display: flex;
           justify-content: center;
           align-items: center;
-          gap: var(--ha-space-4);
+          gap: 16px;
           --mdc-icon-size: 48px;
           margin-bottom: 32px;
         }

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -3,7 +3,7 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import { goBack, navigate } from "../../../src/common/navigate";
+import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import { nextRender } from "../../../src/common/util/render-status";
 import "../../../src/components/ha-icon-button";
@@ -193,7 +193,7 @@ class HassioIngressView extends LitElement {
         title: addon.name,
       });
       await nextRender();
-      goBack();
+      history.back();
       return;
     }
 
@@ -275,7 +275,7 @@ class HassioIngressView extends LitElement {
         title: addon.name,
       });
       await nextRender();
-      goBack();
+      history.back();
       return;
     }
 

hassio/src/resources/hassio-style.ts

@@ -31,7 +31,7 @@ export const hassioStyle = css`
   .card-group {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    grid-gap: var(--ha-space-2);
+    grid-gap: 8px;
   }
   @media screen and (min-width: 640px) {
     .card-group {

hassio/src/update-available/update-available-dashboard.ts

@@ -2,7 +2,6 @@ import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { goBack } from "../../../src/common/navigate";
 import "../../../src/layouts/hass-subpage";
 import type { HomeAssistant, Route } from "../../../src/types";
 import "./update-available-card";
@@ -36,7 +35,7 @@ class UpdateAvailableDashboard extends LitElement {
   }
 
   private _updateComplete() {
-    goBack();
+    history.back();
   }
 
   static styles = css`

landing-page/src/components/landing-page-logs.ts

@@ -302,7 +302,7 @@ class LandingPageLogs extends LitElement {
         max-height: 300px;
         overflow: auto;
         border: 1px solid var(--divider-color);
-        border-radius: var(--ha-border-radius-sm);
+        border-radius: 4px;
         padding: 4px;
       }
 

landing-page/src/ha-landing-page.ts

@@ -1,25 +1,22 @@
 import "@material/mwc-linear-progress";
-import { mdiOpenInNew } from "@mdi/js";
-import { css, html, nothing, type PropertyValues } from "lit";
+import { type PropertyValues, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { extractSearchParam } from "../../src/common/url/search-params";
 import "../../src/components/ha-alert";
-import "../../src/components/ha-button";
 import "../../src/components/ha-fade-in";
 import "../../src/components/ha-spinner";
-import "../../src/components/ha-svg-icon";
-import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import "../../src/onboarding/onboarding-welcome-links";
-import { onBoardingStyles } from "../../src/onboarding/styles";
 import { haStyle } from "../../src/resources/styles";
-import "./components/landing-page-logs";
+import "../../src/onboarding/onboarding-welcome-links";
 import "./components/landing-page-network";
+import "./components/landing-page-logs";
+import { extractSearchParam } from "../../src/common/url/search-params";
+import { onBoardingStyles } from "../../src/onboarding/styles";
+import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
+import { LandingPageBaseElement } from "./landing-page-base-element";
 import {
   getSupervisorNetworkInfo,
   pingSupervisor,
   type NetworkInfo,
 } from "./data/supervisor";
-import { LandingPageBaseElement } from "./landing-page-base-element";
 
 export const ASSUME_CORE_START_SECONDS = 60;
 const SCHEDULE_CORE_CHECK_SECONDS = 1;
@@ -97,21 +94,16 @@ class HaLandingPage extends LandingPageBaseElement {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
-          button-style
           native-name
           @value-changed=${this._languageChanged}
           inline-arrow
         ></ha-language-picker>
-        <ha-button
-          appearance="plain"
-          variant="neutral"
+        <a
           href="https://www.home-assistant.io/getting-started/onboarding/"
           target="_blank"
           rel="noreferrer noopener"
+          >${this.localize("ui.panel.page-onboarding.help")}</a
         >
-          ${this.localize("ui.panel.page-onboarding.help")}
-          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
-        </ha-button>
       </div>
     `;
   }
@@ -221,13 +213,31 @@ class HaLandingPage extends LandingPageBaseElement {
       ha-card .card-content {
         display: flex;
         flex-direction: column;
-        gap: var(--ha-space-4);
+        gap: 16px;
       }
       ha-alert p {
         text-align: unset;
       }
-      .footer ha-svg-icon {
-        --mdc-icon-size: var(--ha-space-5);
+      ha-language-picker {
+        display: block;
+        width: 200px;
+        border-radius: 4px;
+        overflow: hidden;
+        --ha-select-height: 40px;
+        --mdc-select-fill-color: none;
+        --mdc-select-label-ink-color: var(--primary-text-color, #212121);
+        --mdc-select-ink-color: var(--primary-text-color, #212121);
+        --mdc-select-idle-line-color: transparent;
+        --mdc-select-hover-line-color: transparent;
+        --mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
+        --mdc-shape-small: 0;
+      }
+      a {
+        text-decoration: none;
+        color: var(--primary-text-color);
+        margin-right: 16px;
+        margin-inline-end: 16px;
+        margin-inline-start: initial;
       }
       ha-fade-in {
         min-height: calc(100vh - 64px - 88px);

landing-page/src/html/index.html.template

@@ -19,9 +19,8 @@
         height: auto;
         padding: 32px 0;
       }
-
       .content {
-        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
+        max-width: 560px;
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;

lint-staged.config.js

@@ -1,6 +1,6 @@
 export default {
   "*.?(c|m){js,ts}": [
-    "eslint --flag v10_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
+    "eslint --flag unstable_config_lookup_from_file --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --fix",
     "prettier --cache --write",
     "lit-analyzer --quiet",
   ],

package.json

@@ -8,8 +8,8 @@
   "version": "1.0.0",
   "scripts": {
     "build": "script/build_frontend",
-    "lint:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
-    "format:eslint": "eslint --flag v10_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
+    "lint:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --max-warnings=0",
+    "format:eslint": "eslint --flag unstable_config_lookup_from_file \"**/src/**/*.{js,ts,html}\" --cache --cache-strategy=content --cache-location=node_modules/.cache/eslint/.eslintcache --ignore-pattern=.gitignore --fix",
     "lint:prettier": "prettier . --cache --check",
     "format:prettier": "prettier . --cache --write",
     "lint:types": "tsc",
@@ -26,34 +26,33 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.28.4",
+    "@awesome.me/webawesome": "3.0.0-beta.4",
+    "@babel/runtime": "7.28.2",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.19.1",
-    "@codemirror/commands": "6.10.0",
-    "@codemirror/language": "6.11.3",
-    "@codemirror/legacy-modes": "6.5.2",
+    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/commands": "6.8.1",
+    "@codemirror/language": "6.11.2",
+    "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.6",
-    "@date-fns/tz": "1.4.1",
+    "@codemirror/view": "6.38.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.2",
-    "@formatjs/intl-displaynames": "6.8.13",
-    "@formatjs/intl-durationformat": "0.7.6",
-    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.13",
-    "@formatjs/intl-locale": "4.2.13",
-    "@formatjs/intl-numberformat": "8.15.6",
-    "@formatjs/intl-pluralrules": "5.4.6",
-    "@formatjs/intl-relativetimeformat": "11.4.13",
+    "@formatjs/intl-datetimeformat": "6.18.0",
+    "@formatjs/intl-displaynames": "6.8.11",
+    "@formatjs/intl-durationformat": "0.7.4",
+    "@formatjs/intl-getcanonicallocales": "2.5.5",
+    "@formatjs/intl-listformat": "7.7.11",
+    "@formatjs/intl-locale": "4.2.11",
+    "@formatjs/intl-numberformat": "8.15.4",
+    "@formatjs/intl-pluralrules": "5.4.4",
+    "@formatjs/intl-relativetimeformat": "11.4.11",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
     "@fullcalendar/interaction": "6.1.19",
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0",
-    "@lezer/highlight": "1.2.3",
+    "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
     "@lit-labs/virtualizer": "2.1.1",
@@ -81,28 +80,30 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "2.4.1",
+    "@material/web": "2.3.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
+    "@shoelace-style/shoelace": "2.20.1",
     "@swc/helpers": "0.5.17",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.5",
-    "@vaadin/vaadin-themable-mixin": "24.9.5",
+    "@vaadin/combo-box": "24.8.5",
+    "@vaadin/vaadin-themable-mixin": "24.8.5",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.6",
-    "color-name": "2.0.2",
+    "barcode-detector": "3.0.5",
+    "color-name": "2.0.0",
     "comlink": "4.4.2",
-    "core-js": "3.46.0",
+    "core-js": "3.45.0",
     "cropperjs": "1.6.2",
     "culori": "4.0.2",
     "date-fns": "4.1.0",
+    "date-fns-tz": "3.2.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
@@ -111,18 +112,18 @@
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
     "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.14",
+    "hls.js": "1.6.9",
     "home-assistant-js-websocket": "9.5.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.18",
-    "js-yaml": "4.1.1",
+    "intl-messageformat": "10.7.16",
+    "js-yaml": "4.1.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",
     "lit": "3.3.1",
     "lit-html": "3.3.1",
-    "luxon": "3.7.2",
-    "marked": "17.0.0",
+    "luxon": "3.7.1",
+    "marked": "16.1.2",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -135,7 +136,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.6",
+    "ua-parser-js": "2.0.4",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -148,78 +149,78 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.5",
+    "@babel/core": "7.28.0",
     "@babel/helper-define-polyfill-provider": "0.6.5",
-    "@babel/plugin-transform-runtime": "7.28.5",
-    "@babel/preset-env": "7.28.5",
-    "@bundle-stats/plugin-webpack-filter": "4.21.6",
-    "@lokalise/node-api": "15.3.1",
-    "@octokit/auth-oauth-device": "8.0.3",
-    "@octokit/plugin-retry": "8.0.3",
-    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.8",
-    "@rspack/core": "1.6.1",
-    "@rspack/dev-server": "1.1.4",
+    "@babel/plugin-transform-runtime": "7.28.0",
+    "@babel/preset-env": "7.28.0",
+    "@bundle-stats/plugin-webpack-filter": "4.21.2",
+    "@lokalise/node-api": "15.0.0",
+    "@octokit/auth-oauth-device": "8.0.1",
+    "@octokit/plugin-retry": "8.0.1",
+    "@octokit/rest": "22.0.0",
+    "@rsdoctor/rspack-plugin": "1.2.1",
+    "@rspack/cli": "1.4.11",
+    "@rspack/core": "1.4.11",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.1",
+    "@types/culori": "4.0.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.21",
-    "@types/leaflet-draw": "1.0.13",
-    "@types/leaflet.markercluster": "1.5.6",
+    "@types/leaflet": "1.9.20",
+    "@types/leaflet-draw": "1.0.12",
+    "@types/leaflet.markercluster": "1.5.5",
     "@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/qrcode": "1.5.5",
+    "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.8",
+    "@vitest/coverage-v8": "3.2.4",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
-    "del": "8.0.1",
-    "eslint": "9.39.1",
+    "del": "8.0.0",
+    "eslint": "9.33.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-lit": "2.1.1",
     "eslint-plugin-lit-a11y": "5.1.1",
-    "eslint-plugin-unused-imports": "4.3.0",
-    "eslint-plugin-wc": "3.0.2",
+    "eslint-plugin-unused-imports": "4.1.4",
+    "eslint-plugin-wc": "3.0.1",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.2",
-    "glob": "12.0.0",
+    "fs-extra": "11.3.1",
+    "glob": "11.0.3",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.1.0",
+    "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.2.6",
+    "lint-staged": "16.1.5",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
     "map-stream": "0.0.7",
     "pinst": "3.0.0",
     "prettier": "3.6.2",
-    "rspack-manifest-plugin": "5.1.0",
-    "serve": "14.2.5",
+    "rspack-manifest-plugin": "5.0.3",
+    "serve": "14.2.4",
     "sinon": "21.0.0",
-    "tar": "7.5.2",
+    "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.9.3",
-    "typescript-eslint": "8.46.3",
+    "typescript": "5.9.2",
+    "typescript-eslint": "8.39.0",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.8",
+    "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -231,13 +232,10 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.1",
     "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.5.0",
+    "globals": "16.3.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "glob@^10.2.2": "^10.5.0"
+    "@vaadin/vaadin-themable-mixin": "24.8.5"
   },
-  "packageManager": "yarn@4.11.0",
-  "volta": {
-    "node": "22.21.1"
-  }
+  "packageManager": "yarn@4.9.2"
 }

prettier.config.js

@@ -1,11 +1,3 @@
 export default {
   trailingComma: "es5",
-  overrides: [
-    {
-      files: "*.globals.ts",
-      options: {
-        printWidth: 9999, // Effectively disables line wrapping for these files
-      },
-    },
-  ],
 };

public/static/images/dashboard-options/dark/icon-dashboard-home.svg

@@ -1,76 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4744_40067)">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="white" fill-opacity="0.48"/>
-<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="#1C1C1C"/>
-<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M6 32C6 28.6863 8.68629 26 12 26C15.3137 26 18 28.6863 18 32C18 35.3137 15.3137 38 12 38C8.68629 38 6 35.3137 6 32Z" fill="white" fill-opacity="0.24"/>
-<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="white" fill-opacity="0.24"/>
-<path d="M54.6666 28C54.6666 23.5817 58.2483 20 62.6666 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3333 44H62.6666C58.2484 44 54.6666 40.4183 54.6666 36V28Z" fill="#1C1C1C"/>
-<path d="M62.6666 20.5H97.3336C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3336 43.5H62.6666C58.5245 43.5 55.1666 40.1421 55.1666 36V28C55.1666 23.8579 58.5245 20.5 62.6666 20.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M60.6666 32C60.6666 28.6863 63.3529 26 66.6666 26C69.9803 26 72.6666 28.6863 72.6666 32C72.6666 35.3137 69.9803 38 66.6666 38C63.3529 38 60.6666 35.3137 60.6666 32Z" fill="white" fill-opacity="0.24"/>
-<path d="M78.6666 31C78.6666 29.3431 80.0098 28 81.6666 28H94.3333C95.9901 28 97.3333 29.3431 97.3333 31V33C97.3333 34.6569 95.9901 36 94.3333 36H81.6666C80.0098 36 78.6666 34.6569 78.6666 33V31Z" fill="white" fill-opacity="0.24"/>
-<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="#1C1C1C"/>
-<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="white" stroke-opacity="0.24"/>
-<path d="M115.333 32C115.333 28.6863 118.02 26 121.333 26C124.647 26 127.333 28.6863 127.333 32C127.333 35.3137 124.647 38 121.333 38C118.02 38 115.333 35.3137 115.333 32Z" fill="white" fill-opacity="0.24"/>
-<path d="M133.333 31C133.333 29.3431 134.677 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.677 36 133.333 34.6569 133.333 33V31Z" fill="white" fill-opacity="0.24"/>
-<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="white" fill-opacity="0.48"/>
-<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="#1C1C1C"/>
-<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="white" stroke-opacity="0.24"/>
-<mask id="mask0_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
-<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
-</mask>
-<g mask="url(#mask0_4744_40067)">
-<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="#1C1C1C"/>
-<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="white" stroke-opacity="0.24"/>
-<mask id="mask1_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
-<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
-</mask>
-<g mask="url(#mask1_4744_40067)">
-<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="#1C1C1C"/>
-<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="white" stroke-opacity="0.24"/>
-<mask id="mask2_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
-<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
-</mask>
-<g mask="url(#mask2_4744_40067)">
-<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="#1C1C1C"/>
-<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="white" stroke-opacity="0.24"/>
-<mask id="mask3_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
-<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
-</mask>
-<g mask="url(#mask3_4744_40067)">
-<rect x="129.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="white" fill-opacity="0.48"/>
-<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_40067)"/>
-<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_40067)" stroke-opacity="0.12"/>
-<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_40067)"/>
-<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_40067)" stroke-opacity="0.12"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-color="#1C1C1C"/>
-<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-color="#1C1C1C"/>
-<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_4744_40067">
-<rect width="160" height="160" fill="white"/>
-</clipPath>
-</defs>
-</svg>

public/static/images/dashboard-options/light/icon-dashboard-home.svg

@@ -1,76 +0,0 @@
-<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_4744_39984)">
-<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="black" fill-opacity="0.32"/>
-<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="white"/>
-<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="black" stroke-opacity="0.12"/>
-<rect x="6" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
-<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="black" fill-opacity="0.12"/>
-<path d="M54.6667 28C54.6667 23.5817 58.2484 20 62.6667 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3334 44H62.6667C58.2484 44 54.6667 40.4183 54.6667 36V28Z" fill="white"/>
-<path d="M62.6667 20.5H97.3337C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3337 43.5H62.6667C58.5246 43.5 55.1667 40.1421 55.1667 36V28C55.1667 23.8579 58.5246 20.5 62.6667 20.5Z" stroke="black" stroke-opacity="0.12"/>
-<rect x="60.6667" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
-<path d="M78.6667 31C78.6667 29.3431 80.0098 28 81.6667 28H94.3334C95.9902 28 97.3334 29.3431 97.3334 31V33C97.3334 34.6569 95.9902 36 94.3334 36H81.6667C80.0098 36 78.6667 34.6569 78.6667 33V31Z" fill="black" fill-opacity="0.12"/>
-<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="white"/>
-<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="black" stroke-opacity="0.12"/>
-<rect x="115.333" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
-<path d="M133.333 31C133.333 29.3431 134.676 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.676 36 133.333 34.6569 133.333 33V31Z" fill="black" fill-opacity="0.12"/>
-<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="black" fill-opacity="0.32"/>
-<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="white"/>
-<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="black" stroke-opacity="0.12"/>
-<mask id="mask0_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
-<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
-</mask>
-<g mask="url(#mask0_4744_39984)">
-<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="white"/>
-<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="black" stroke-opacity="0.12"/>
-<mask id="mask1_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
-<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
-</mask>
-<g mask="url(#mask1_4744_39984)">
-<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="white"/>
-<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="black" stroke-opacity="0.12"/>
-<mask id="mask2_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
-<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
-</mask>
-<g mask="url(#mask2_4744_39984)">
-<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
-</g>
-<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="white"/>
-<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="black" stroke-opacity="0.12"/>
-<mask id="mask3_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
-<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
-</mask>
-<g mask="url(#mask3_4744_39984)">
-<rect x="129.5" y="72" width="24" height="24" fill="#18BCF2"/>
-</g>
-<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="black" fill-opacity="0.32"/>
-<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_39984)"/>
-<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_39984)" stroke-opacity="0.12"/>
-<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_39984)"/>
-<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_39984)" stroke-opacity="0.12"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint1_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-opacity="0.12"/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-color="white"/>
-<stop offset="1" stop-color="white" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint3_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
-<stop offset="0.5" stop-opacity="0.12"/>
-<stop offset="1" stop-opacity="0"/>
-</linearGradient>
-<clipPath id="clip0_4744_39984">
-<rect width="160" height="160" fill="white"/>
-</clipPath>
-</defs>
-</svg>

pyproject.toml

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

renovate.json

@@ -9,7 +9,7 @@
     ":semanticCommitsDisabled",
     "group:monorepos",
     "group:recommended",
-    "security:minimumReleaseAgeNpm"
+    "npm:unpublishSafe"
   ],
   "enabledManagers": ["npm", "nvm"],
   "postUpdateOptions": ["yarnDedupeHighest"],

src/auth/ha-auth-flow.ts

@@ -59,8 +59,7 @@ export class HaAuthFlow extends LitElement {
   willUpdate(changedProps: PropertyValues) {
     super.willUpdate(changedProps);
 
-    if (!this.hasUpdated && this.clientId === genClientId()) {
-      // Preselect store token when logging in to own instance
+    if (!this.hasUpdated) {
       this._storeToken = this.initStoreToken;
     }
 

src/auth/ha-authorize.ts

@@ -1,5 +1,4 @@
 /* eslint-disable lit/prefer-static-styles */
-import { mdiOpenInNew } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -7,8 +6,6 @@ import punycode from "punycode";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import "../components/ha-alert";
-import "../components/ha-button";
-import "../components/ha-svg-icon";
 import type { AuthProvider, AuthUrlSearchParams } from "../data/auth";
 import { fetchAuthProviders } from "../data/auth";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
@@ -106,10 +103,7 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           );
           box-shadow: var(--ha-card-box-shadow, none);
           box-sizing: border-box;
-          border-radius: var(
-            --ha-card-border-radius,
-            var(--ha-border-radius-lg)
-          );
+          border-radius: var(--ha-card-border-radius, 12px);
           border-width: var(--ha-card-border-width, 1px);
           border-style: solid;
           border-color: var(
@@ -136,8 +130,25 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           justify-content: space-between;
           align-items: center;
         }
-        .footer ha-svg-icon {
-          --mdc-icon-size: var(--ha-space-5);
+        ha-language-picker {
+          width: 200px;
+          border-radius: 4px;
+          overflow: hidden;
+          --ha-select-height: 40px;
+          --mdc-select-fill-color: none;
+          --mdc-select-label-ink-color: var(--primary-text-color, #212121);
+          --mdc-select-ink-color: var(--primary-text-color, #212121);
+          --mdc-select-idle-line-color: transparent;
+          --mdc-select-hover-line-color: transparent;
+          --mdc-select-dropdown-icon-color: var(--primary-text-color, #212121);
+          --mdc-shape-small: 0;
+        }
+        .footer a {
+          text-decoration: none;
+          color: var(--primary-text-color);
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
         h1 {
           font-size: var(--ha-font-size-3xl);
@@ -191,21 +202,16 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         <ha-language-picker
           .value=${this.language}
           .label=${""}
-          button-style
           native-name
           @value-changed=${this._languageChanged}
           inline-arrow
         ></ha-language-picker>
-        <ha-button
-          appearance="plain"
-          variant="neutral"
+        <a
           href="https://www.home-assistant.io/docs/authentication/"
           target="_blank"
           rel="noreferrer noopener"
+          >${this.localize("ui.panel.page-authorize.help")}</a
         >
-          ${this.localize("ui.panel.page-authorize.help")}
-          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
-        </ha-button>
       </div>
     `;
   }

src/common/areas/areas-floor-hierarchy.ts

@@ -1,53 +0,0 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-
-export interface AreasFloorHierarchy {
-  floors: {
-    id: string;
-    areas: string[];
-  }[];
-  areas: string[];
-}
-
-export const getAreasFloorHierarchy = (
-  floors: FloorRegistryEntry[],
-  areas: AreaRegistryEntry[]
-): AreasFloorHierarchy => {
-  const floorAreas = new Map<string, string[]>();
-  const unassignedAreas: string[] = [];
-
-  for (const area of areas) {
-    if (area.floor_id) {
-      if (!floorAreas.has(area.floor_id)) {
-        floorAreas.set(area.floor_id, []);
-      }
-      floorAreas.get(area.floor_id)!.push(area.area_id);
-    } else {
-      unassignedAreas.push(area.area_id);
-    }
-  }
-
-  const hierarchy: AreasFloorHierarchy = {
-    floors: floors.map((floor) => ({
-      id: floor.floor_id,
-      areas: floorAreas.get(floor.floor_id) || [],
-    })),
-    areas: unassignedAreas,
-  };
-
-  return hierarchy;
-};
-
-export const getAreasOrder = (hierarchy: AreasFloorHierarchy): string[] => {
-  const order: string[] = [];
-
-  for (const floor of hierarchy.floors) {
-    order.push(...floor.areas);
-  }
-  order.push(...hierarchy.areas);
-
-  return order;
-};
-
-export const getFloorOrder = (hierarchy: AreasFloorHierarchy): string[] =>
-  hierarchy.floors.map((floor) => floor.id);

src/common/color/hex.ts

@@ -1,40 +1,23 @@
-import { formatHex, parse } from "culori";
-
-/**
- * Expands a 3-digit hex color to a 6-digit hex color.
- * @param hex - The hex color to expand.
- * @returns The expanded hex color.
- * @throws If the hex color is invalid.
- */
 export const expandHex = (hex: string): string => {
-  const color = parse(hex);
-  if (!color) {
-    throw new Error(`Invalid hex color: ${hex}`);
+  hex = hex.replace("#", "");
+  if (hex.length === 6) return hex;
+  let result = "";
+  for (const val of hex) {
+    result += val + val;
   }
-  const formattedColor = formatHex(color);
-  if (!formattedColor) {
-    throw new Error(`Could not format hex color: ${hex}`);
-  }
-  return formattedColor.replace("#", "");
+  return result;
 };
 
-/**
- * Blends two hex colors. c1 is placed over c2, blend is c1's opacity.
- * @param c1 - The first hex color.
- * @param c2 - The second hex color.
- * @param blend - The blend percentage (0-100).
- * @returns The blended hex color.
- */
+// Blend 2 hex colors: c1 is placed over c2, blend is c1's opacity.
 export const hexBlend = (c1: string, c2: string, blend = 50): string => {
+  let color = "";
   c1 = expandHex(c1);
   c2 = expandHex(c2);
-  let color = "";
   for (let i = 0; i <= 5; i += 2) {
     const h1 = parseInt(c1.substring(i, i + 2), 16);
     const h2 = parseInt(c2.substring(i, i + 2), 16);
-    const hex = Math.floor(h2 + (h1 - h2) * (blend / 100))
-      .toString(16)
-      .padStart(2, "0");
+    let hex = Math.floor(h2 + (h1 - h2) * (blend / 100)).toString(16);
+    while (hex.length < 2) hex = "0" + hex;
     color += hex;
   }
   return `#${color}`;

src/common/color/rgb.ts

@@ -1,49 +1,28 @@
-import { wcagLuminance, wcagContrast } from "culori";
+export const luminosity = (rgb: [number, number, number]): number => {
+  // http://www.w3.org/TR/WCAG20/#relativeluminancedef
+  const lum: [number, number, number] = [0, 0, 0];
+  for (let i = 0; i < rgb.length; i++) {
+    const chan = rgb[i] / 255;
+    lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
+  }
 
-/**
- * Calculates the luminosity of an RGB color.
- * @param rgb - The RGB color to calculate the luminosity of.
- * @returns The luminosity of the color.
- */
-export const luminosity = (rgb: [number, number, number]): number =>
-  wcagLuminance({
-    mode: "rgb",
-    r: rgb[0] / 255,
-    g: rgb[1] / 255,
-    b: rgb[2] / 255,
-  });
+  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
+};
 
-/**
- * Calculates the contrast ratio between two RGB colors.
- * @param color1 - The first color to calculate the contrast ratio of.
- * @param color2 - The second color to calculate the contrast ratio of.
- * @returns The contrast ratio between the two colors.
- */
 export const rgbContrast = (
   color1: [number, number, number],
   color2: [number, number, number]
-) =>
-  wcagContrast(
-    {
-      mode: "rgb",
-      r: color1[0] / 255,
-      g: color1[1] / 255,
-      b: color1[2] / 255,
-    },
-    {
-      mode: "rgb",
-      r: color2[0] / 255,
-      g: color2[1] / 255,
-      b: color2[2] / 255,
-    }
-  );
+) => {
+  const lum1 = luminosity(color1);
+  const lum2 = luminosity(color2);
+
+  if (lum1 > lum2) {
+    return (lum1 + 0.05) / (lum2 + 0.05);
+  }
+
+  return (lum2 + 0.05) / (lum1 + 0.05);
+};
 
-/**
- * Calculates the contrast ratio between two RGB colors.
- * @param rgb1 - The first color to calculate the contrast ratio of.
- * @param rgb2 - The second color to calculate the contrast ratio of.
- * @returns The contrast ratio between the two colors.
- */
 export const getRGBContrastRatio = (
   rgb1: [number, number, number],
   rgb2: [number, number, number]

src/common/condition/extract.ts

@@ -1,36 +0,0 @@
-import type {
-  Condition,
-  TimeCondition,
-} from "../../panels/lovelace/common/validate-condition";
-
-/**
- * Extract media queries from conditions recursively
- */
-export function extractMediaQueries(conditions: Condition[]): string[] {
-  return conditions.reduce<string[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractMediaQueries(c.conditions));
-    }
-    if (c.condition === "screen" && c.media_query) {
-      array.push(c.media_query);
-    }
-    return array;
-  }, []);
-}
-
-/**
- * Extract time conditions from conditions recursively
- */
-export function extractTimeConditions(
-  conditions: Condition[]
-): TimeCondition[] {
-  return conditions.reduce<TimeCondition[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractTimeConditions(c.conditions));
-    }
-    if (c.condition === "time") {
-      array.push(c);
-    }
-    return array;
-  }, []);
-}

src/common/condition/listeners.ts

@@ -1,89 +0,0 @@
-import { listenMediaQuery } from "../dom/media_query";
-import type { HomeAssistant } from "../../types";
-import type { Condition } from "../../panels/lovelace/common/validate-condition";
-import { checkConditionsMet } from "../../panels/lovelace/common/validate-condition";
-import { extractMediaQueries, extractTimeConditions } from "./extract";
-import { calculateNextTimeUpdate } from "./time-calculator";
-
-/** Maximum delay for setTimeout (2^31 - 1 milliseconds, ~24.8 days)
- * Values exceeding this will overflow and execute immediately
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout#maximum_delay_value
- */
-const MAX_TIMEOUT_DELAY = 2147483647;
-
-/**
- * Helper to setup media query listeners for conditional visibility
- */
-export function setupMediaQueryListeners(
-  conditions: Condition[],
-  hass: HomeAssistant,
-  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
-): void {
-  const mediaQueries = extractMediaQueries(conditions);
-
-  if (mediaQueries.length === 0) return;
-
-  // Optimization for single media query
-  const hasOnlyMediaQuery =
-    conditions.length === 1 &&
-    conditions[0].condition === "screen" &&
-    !!conditions[0].media_query;
-
-  mediaQueries.forEach((mediaQuery) => {
-    const unsub = listenMediaQuery(mediaQuery, (matches) => {
-      if (hasOnlyMediaQuery) {
-        onUpdate(matches);
-      } else {
-        const conditionsMet = checkConditionsMet(conditions, hass);
-        onUpdate(conditionsMet);
-      }
-    });
-    addListener(unsub);
-  });
-}
-
-/**
- * Helper to setup time-based listeners for conditional visibility
- */
-export function setupTimeListeners(
-  conditions: Condition[],
-  hass: HomeAssistant,
-  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
-): void {
-  const timeConditions = extractTimeConditions(conditions);
-
-  if (timeConditions.length === 0) return;
-
-  timeConditions.forEach((timeCondition) => {
-    let timeoutId: ReturnType<typeof setTimeout> | undefined;
-
-    const scheduleUpdate = () => {
-      const delay = calculateNextTimeUpdate(hass, timeCondition);
-
-      if (delay === undefined) return;
-
-      // Cap delay to prevent setTimeout overflow
-      const cappedDelay = Math.min(delay, MAX_TIMEOUT_DELAY);
-
-      timeoutId = setTimeout(() => {
-        if (delay <= MAX_TIMEOUT_DELAY) {
-          const conditionsMet = checkConditionsMet(conditions, hass);
-          onUpdate(conditionsMet);
-        }
-        scheduleUpdate();
-      }, cappedDelay);
-    };
-
-    // Register cleanup function once, outside of scheduleUpdate
-    addListener(() => {
-      if (timeoutId !== undefined) {
-        clearTimeout(timeoutId);
-      }
-    });
-
-    scheduleUpdate();
-  });
-}

src/common/condition/time-calculator.ts

@@ -1,73 +0,0 @@
-import { TZDate } from "@date-fns/tz";
-import {
-  startOfDay,
-  addDays,
-  addMinutes,
-  differenceInMilliseconds,
-} from "date-fns";
-import type { HomeAssistant } from "../../types";
-import { TimeZone } from "../../data/translation";
-import { parseTimeString } from "../datetime/check_time";
-import type { TimeCondition } from "../../panels/lovelace/common/validate-condition";
-
-/**
- * Calculate milliseconds until next time boundary for a time condition
- * @param hass Home Assistant object
- * @param timeCondition Time condition to calculate next update for
- * @returns Milliseconds until next boundary, or undefined if no boundaries
- */
-export function calculateNextTimeUpdate(
-  hass: HomeAssistant,
-  { after, before, weekdays }: Omit<TimeCondition, "condition">
-): number | undefined {
-  const timezone =
-    hass.locale.time_zone === TimeZone.server
-      ? hass.config.time_zone
-      : Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  const now = new TZDate(new Date(), timezone);
-  const updates: Date[] = [];
-
-  // Calculate next occurrence of after time
-  if (after) {
-    let afterDate = parseTimeString(after, timezone);
-    if (afterDate <= now) {
-      // If time has passed today, schedule for tomorrow
-      afterDate = addDays(afterDate, 1);
-    }
-    updates.push(afterDate);
-  }
-
-  // Calculate next occurrence of before time
-  if (before) {
-    let beforeDate = parseTimeString(before, timezone);
-    if (beforeDate <= now) {
-      // If time has passed today, schedule for tomorrow
-      beforeDate = addDays(beforeDate, 1);
-    }
-    updates.push(beforeDate);
-  }
-
-  // If weekdays are specified, check for midnight (weekday transition)
-  if (weekdays && weekdays.length > 0 && weekdays.length < 7) {
-    // Calculate next midnight using startOfDay + addDays
-    const tomorrow = addDays(now, 1);
-    const midnight = startOfDay(tomorrow);
-    updates.push(midnight);
-  }
-
-  if (updates.length === 0) {
-    return undefined;
-  }
-
-  // Find the soonest update time
-  const nextUpdate = updates.reduce((soonest, current) =>
-    current < soonest ? current : soonest
-  );
-
-  // Add 1 minute buffer to ensure we're past the boundary
-  const updateWithBuffer = addMinutes(nextUpdate, 1);
-
-  // Calculate difference in milliseconds
-  return differenceInMilliseconds(updateWithBuffer, now);
-}

src/common/controllers/undo-redo-controller.ts

@@ -1,141 +0,0 @@
-import type {
-  ReactiveController,
-  ReactiveControllerHost,
-} from "@lit/reactive-element/reactive-controller";
-
-const UNDO_REDO_STACK_LIMIT = 75;
-
-/**
- * Configuration options for the UndoRedoController.
- *
- * @template ConfigType The type of configuration to manage.
- */
-export interface UndoRedoControllerConfig<ConfigType> {
-  stackLimit?: number;
-  currentConfig: () => ConfigType;
-  apply: (config: ConfigType) => void;
-}
-
-/**
- * A controller to manage undo and redo operations for a given configuration type.
- *
- * @template ConfigType The type of configuration to manage.
- */
-export class UndoRedoController<ConfigType> implements ReactiveController {
-  private _host: ReactiveControllerHost;
-
-  private _undoStack: ConfigType[] = [];
-
-  private _redoStack: ConfigType[] = [];
-
-  private readonly _stackLimit: number = UNDO_REDO_STACK_LIMIT;
-
-  private readonly _apply: (config: ConfigType) => void = () => {
-    throw new Error("No apply function provided");
-  };
-
-  private readonly _currentConfig: () => ConfigType = () => {
-    throw new Error("No currentConfig function provided");
-  };
-
-  constructor(
-    host: ReactiveControllerHost,
-    options: UndoRedoControllerConfig<ConfigType>
-  ) {
-    if (options.stackLimit !== undefined) {
-      this._stackLimit = options.stackLimit;
-    }
-
-    this._apply = options.apply;
-    this._currentConfig = options.currentConfig;
-    this._host = host;
-    host.addController(this);
-  }
-
-  hostConnected() {
-    window.addEventListener("undo-change", this._onUndoChange);
-  }
-
-  hostDisconnected() {
-    window.removeEventListener("undo-change", this._onUndoChange);
-  }
-
-  private _onUndoChange = (ev: Event) => {
-    ev.stopPropagation();
-    this.undo();
-    this._host.requestUpdate();
-  };
-
-  /**
-   * Indicates whether there are actions available to undo.
-   *
-   * @returns `true` if there are actions to undo, `false` otherwise.
-   */
-  public get canUndo(): boolean {
-    return this._undoStack.length > 0;
-  }
-
-  /**
-   * Indicates whether there are actions available to redo.
-   *
-   * @returns `true` if there are actions to redo, `false` otherwise.
-   */
-  public get canRedo(): boolean {
-    return this._redoStack.length > 0;
-  }
-
-  /**
-   * Commits the current configuration to the undo stack and clears the redo stack.
-   *
-   * @param config The current configuration to commit.
-   */
-  public commit(config: ConfigType) {
-    if (this._undoStack.length >= this._stackLimit) {
-      this._undoStack.shift();
-    }
-    this._undoStack.push({ ...config });
-    this._redoStack = [];
-  }
-
-  /**
-   * Undoes the last action and applies the previous configuration
-   * while saving the current configuration to the redo stack.
-   */
-  public undo() {
-    if (this._undoStack.length === 0) {
-      return;
-    }
-    this._redoStack.push({ ...this._currentConfig() });
-    const config = this._undoStack.pop()!;
-    this._apply(config);
-    this._host.requestUpdate();
-  }
-
-  /**
-   * Redoes the last undone action and reapplies the configuration
-   * while saving the current configuration to the undo stack.
-   */
-  public redo() {
-    if (this._redoStack.length === 0) {
-      return;
-    }
-    this._undoStack.push({ ...this._currentConfig() });
-    const config = this._redoStack.pop()!;
-    this._apply(config);
-    this._host.requestUpdate();
-  }
-
-  /**
-   * Resets the undo and redo stacks, clearing all history.
-   */
-  public reset() {
-    this._undoStack = [];
-    this._redoStack = [];
-  }
-}
-
-declare global {
-  interface HASSDomEvents {
-    "undo-change": undefined;
-  }
-}

src/common/datetime/calc_date.ts

@@ -11,7 +11,7 @@ import {
   differenceInDays,
   addDays,
 } from "date-fns";
-import { TZDate } from "@date-fns/tz";
+import { toZonedTime, fromZonedTime } from "date-fns-tz";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
@@ -22,13 +22,12 @@ const calcZonedDate = (
   fn: (date: Date, options?: any) => Date | number | boolean,
   options?
 ) => {
-  const tzDate = new TZDate(date, tz);
-  const fnResult = fn(tzDate, options);
-  if (fnResult instanceof Date) {
-    // Convert back to regular Date in the specified timezone
-    return new Date(fnResult.getTime());
+  const inputZoned = toZonedTime(date, tz);
+  const fnZoned = fn(inputZoned, options);
+  if (fnZoned instanceof Date) {
+    return fromZonedTime(fnZoned, tz) as Date;
   }
-  return fnResult;
+  return fnZoned;
 };
 
 export const calcDate = (
@@ -66,7 +65,7 @@ export const calcDateDifferenceProperty = (
     locale,
     config,
     locale.time_zone === TimeZone.server
-      ? new TZDate(startDate, config.time_zone)
+      ? toZonedTime(startDate, config.time_zone)
       : startDate
   );
 
@@ -145,36 +144,3 @@ export const shiftDateRange = (
   }
   return { start, end };
 };
-
-/**
- * @description Parses a date in browser display timezone
- * @param date - The date to parse
- * @param timezone - The timezone to parse the date in
- * @returns The parsed date as a Date object
- */
-export const parseDate = (date: string, timezone: string): Date => {
-  const tzDate = new TZDate(date, timezone);
-  return new Date(tzDate.getTime());
-};
-
-/**
- * @description Formats a date in browser display timezone
- * @param date - The date to format
- * @param timezone - The timezone to format the date in
- * @returns The formatted date in YYYY-MM-DD format
- */
-export const formatDate = (date: Date, timezone: string): string => {
-  const tzDate = new TZDate(date, timezone);
-  return tzDate.toISOString().split("T")[0];
-};
-
-/**
- * @description Formats a time in browser display timezone
- * @param date - The date to format
- * @param timezone - The timezone to format the time in
- * @returns The formatted time in HH:mm:ss format
- */
-export const formatTime = (date: Date, timezone: string): string => {
-  const tzDate = new TZDate(date, timezone);
-  return tzDate.toISOString().split("T")[1].split(".")[0];
-};

src/common/datetime/check_time.ts

@@ -1,131 +0,0 @@
-import { TZDate } from "@date-fns/tz";
-import { isBefore, isAfter, isWithinInterval } from "date-fns";
-import type { HomeAssistant } from "../../types";
-import { TimeZone } from "../../data/translation";
-import { WEEKDAY_MAP } from "./weekday";
-import type { TimeCondition } from "../../panels/lovelace/common/validate-condition";
-
-/**
- * Validate a time string format and value ranges without creating Date objects
- * @param timeString Time string to validate (HH:MM or HH:MM:SS)
- * @returns true if valid, false otherwise
- */
-export function isValidTimeString(timeString: string): boolean {
-  // Reject empty strings
-  if (!timeString || timeString.trim() === "") {
-    return false;
-  }
-
-  const parts = timeString.split(":");
-
-  if (parts.length < 2 || parts.length > 3) {
-    return false;
-  }
-
-  // Ensure each part contains only digits (and optional leading zeros)
-  // This prevents "8:00 AM" from passing validation
-  if (!parts.every((part) => /^\d+$/.test(part))) {
-    return false;
-  }
-
-  const hours = parseInt(parts[0], 10);
-  const minutes = parseInt(parts[1], 10);
-  const seconds = parts.length === 3 ? parseInt(parts[2], 10) : 0;
-
-  if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) {
-    return false;
-  }
-
-  return (
-    hours >= 0 &&
-    hours <= 23 &&
-    minutes >= 0 &&
-    minutes <= 59 &&
-    seconds >= 0 &&
-    seconds <= 59
-  );
-}
-
-/**
- * Parse a time string (HH:MM or HH:MM:SS) and set it on today's date in the given timezone
- *
- * Note: This function assumes the time string has already been validated by
- * isValidTimeString() at configuration time. It does not re-validate at runtime
- * for consistency with other condition types (screen, user, location, etc.)
- *
- * @param timeString The time string to parse (must be pre-validated)
- * @param timezone The timezone to use
- * @returns The Date object
- */
-export const parseTimeString = (timeString: string, timezone: string): Date => {
-  const parts = timeString.split(":");
-  const hours = parseInt(parts[0], 10);
-  const minutes = parseInt(parts[1], 10);
-  const seconds = parts.length === 3 ? parseInt(parts[2], 10) : 0;
-
-  const now = new TZDate(new Date(), timezone);
-  const dateWithTime = new TZDate(
-    now.getFullYear(),
-    now.getMonth(),
-    now.getDate(),
-    hours,
-    minutes,
-    seconds,
-    0,
-    timezone
-  );
-
-  return new Date(dateWithTime.getTime());
-};
-
-/**
- * Check if the current time matches the time condition (after/before/weekday)
- * @param hass Home Assistant object
- * @param timeCondition Time condition to check
- * @returns true if current time matches the condition
- */
-export const checkTimeInRange = (
-  hass: HomeAssistant,
-  { after, before, weekdays }: Omit<TimeCondition, "condition">
-): boolean => {
-  const timezone =
-    hass.locale.time_zone === TimeZone.server
-      ? hass.config.time_zone
-      : Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  const now = new TZDate(new Date(), timezone);
-
-  // Check weekday condition
-  if (weekdays && weekdays.length > 0) {
-    const currentWeekday = WEEKDAY_MAP[now.getDay()];
-    if (!weekdays.includes(currentWeekday)) {
-      return false;
-    }
-  }
-
-  // Check time conditions
-  if (!after && !before) {
-    return true;
-  }
-
-  const afterDate = after ? parseTimeString(after, timezone) : undefined;
-  const beforeDate = before ? parseTimeString(before, timezone) : undefined;
-
-  if (afterDate && beforeDate) {
-    if (isBefore(beforeDate, afterDate)) {
-      // Crosses midnight (e.g., 22:00 to 06:00)
-      return !isBefore(now, afterDate) || !isAfter(now, beforeDate);
-    }
-    return isWithinInterval(now, { start: afterDate, end: beforeDate });
-  }
-
-  if (afterDate) {
-    return !isBefore(now, afterDate);
-  }
-
-  if (beforeDate) {
-    return !isAfter(now, beforeDate);
-  }
-
-  return true;
-};

src/common/datetime/first_weekday.ts

@@ -1,7 +1,18 @@
 import { getWeekStartByLocale } from "weekstart";
 import type { FrontendLocaleData } from "../../data/translation";
 import { FirstWeekday } from "../../data/translation";
-import { WEEKDAYS_LONG, type WeekdayIndex } from "./weekday";
+
+export const weekdays = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+
+type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
   if (locale.first_weekday === FirstWeekday.language) {
@@ -12,12 +23,12 @@ export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
     }
     return (getWeekStartByLocale(locale.language) % 7) as WeekdayIndex;
   }
-  return WEEKDAYS_LONG.includes(locale.first_weekday)
-    ? (WEEKDAYS_LONG.indexOf(locale.first_weekday) as WeekdayIndex)
+  return weekdays.includes(locale.first_weekday)
+    ? (weekdays.indexOf(locale.first_weekday) as WeekdayIndex)
     : 1;
 };
 
 export const firstWeekday = (locale: FrontendLocaleData) => {
   const index = firstWeekdayIndex(locale);
-  return WEEKDAYS_LONG[index];
+  return weekdays[index];
 };

src/common/datetime/weekday.ts

@@ -1,59 +0,0 @@
-export type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-export type WeekdayShort =
-  | "sun"
-  | "mon"
-  | "tue"
-  | "wed"
-  | "thu"
-  | "fri"
-  | "sat";
-
-export type WeekdayLong =
-  | "sunday"
-  | "monday"
-  | "tuesday"
-  | "wednesday"
-  | "thursday"
-  | "friday"
-  | "saturday";
-
-export const WEEKDAYS_SHORT = [
-  "sun",
-  "mon",
-  "tue",
-  "wed",
-  "thu",
-  "fri",
-  "sat",
-] as const satisfies readonly WeekdayShort[];
-
-export const WEEKDAYS_LONG = [
-  "sunday",
-  "monday",
-  "tuesday",
-  "wednesday",
-  "thursday",
-  "friday",
-  "saturday",
-] as const satisfies readonly WeekdayLong[];
-
-export const WEEKDAY_MAP = {
-  0: "sun",
-  1: "mon",
-  2: "tue",
-  3: "wed",
-  4: "thu",
-  5: "fri",
-  6: "sat",
-} as const satisfies Record<WeekdayIndex, WeekdayShort>;
-
-export const WEEKDAY_SHORT_TO_LONG = {
-  sun: "sunday",
-  mon: "monday",
-  tue: "tuesday",
-  wed: "wednesday",
-  thu: "thursday",
-  fri: "friday",
-  sat: "saturday",
-} as const satisfies Record<WeekdayShort, WeekdayLong>;