Bumped version to 20220516.0

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI, Frontend or Lovelace
+name: Report a bug with the UI / Dashboards
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom Lovelace cards.**
+        **Please not not report issues for custom cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases

.github/ISSUE_TEMPLATE/config.yml

@@ -1,17 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI, Frontend or Lovelace
+  - name: Request a feature for the UI / Dashboards
     url: https://github.com/home-assistant/frontend/discussions/category_choices
     about: Request an new feature for the Home Assistant frontend.
-  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
+  - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
+    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues
     about: Our documentation has its own issue tracker. Please report issues with the website there.
   - name: I have a question or need support
     url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs, check our website for resources on getting help.
+    about: We use GitHub for tracking bugs. Check our website for resources on getting help.
   - name: I'm unsure where to go
     url: https://www.home-assistant.io/join-chat
     about: If you are unsure where to go, then joining our chat is recommended; Just ask!

gallery/src/data/traces/basic_trace.ts

@@ -298,11 +298,11 @@ export const basicTrace: DemoTrace = {
       source: "state of input_boolean.toggle_1",
       entity_id: "automation.toggle_toggles",
       context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
-      when: "2021-03-25T04:36:51.240832+00:00",
+      when: 1616647011.240832,
       domain: "automation",
     },
     {
-      when: "2021-03-25T04:36:51.249828+00:00",
+      when: 1616647011.249828,
       name: "Toggle 4",
       state: "on",
       entity_id: "input_boolean.toggle_4",
@@ -313,7 +313,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: "2021-03-25T04:36:51.258947+00:00",
+      when: 1616647011.258947,
       name: "Toggle 2",
       state: "on",
       entity_id: "input_boolean.toggle_2",
@@ -324,7 +324,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: "2021-03-25T04:36:51.261806+00:00",
+      when: 1616647011.261806,
       name: "Toggle 3",
       state: "off",
       entity_id: "input_boolean.toggle_3",
@@ -335,7 +335,7 @@ export const basicTrace: DemoTrace = {
       context_name: "Ensure Party mode",
     },
     {
-      when: "2021-03-25T04:36:51.265246+00:00",
+      when: 1616647011.265246,
       name: "Toggle 4",
       state: "off",
       entity_id: "input_boolean.toggle_4",

gallery/src/data/traces/motion-light-trace.ts

@@ -185,11 +185,11 @@ export const motionLightTrace: DemoTrace = {
         "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
       entity_id: "automation.auto_elgato",
-      when: "2021-03-14T06:07:01.768492+00:00",
+      when: 1615702021.768492,
       domain: "automation",
     },
     {
-      when: "2021-03-14T06:07:01.872187+00:00",
+      when: 1615702021.872187,
       name: "Elgato Key Light Air",
       state: "on",
       entity_id: "light.elgato_key_light_air",
@@ -200,7 +200,7 @@ export const motionLightTrace: DemoTrace = {
       context_name: "Auto Elgato",
     },
     {
-      when: "2021-03-14T06:07:53.284505+00:00",
+      when: 1615702073.284505,
       name: "Elgato Key Light Air",
       state: "off",
       entity_id: "light.elgato_key_light_air",

hassio/src/addon-store/hassio-addon-repository.ts

@@ -68,6 +68,7 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
+                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}

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

@@ -50,6 +50,7 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">

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

@@ -162,7 +162,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card>
+      <ha-card outlined>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}

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

@@ -58,6 +58,7 @@ class HassioAddonNetwork extends LitElement {
 
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card>
+        <ha-card outlined>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

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

@@ -166,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card>
+      <ha-card outlined>
         <div class="card-content">
           <div class="addon-header">
             ${!this.narrow ? this.addon.name : ""}
@@ -649,7 +649,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card>
+            <ha-card outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -34,7 +34,7 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card>
+      <ha-card outlined>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

hassio/src/dashboard/hassio-addons.ts

@@ -26,7 +26,7 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
-                <ha-card>
+                <ha-card outlined>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -38,7 +38,11 @@ class HassioAddons extends LitElement {
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
-                    <ha-card .addon=${addon} @click=${this._addonTapped}>
+                    <ha-card
+                      outlined
+                      .addon=${addon}
+                      @click=${this._addonTapped}
+                    >
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

hassio/src/dashboard/hassio-update.ts

@@ -85,7 +85,7 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <ha-card>
+      <ha-card outlined>
         <div class="card-content">
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>

hassio/src/system/hassio-core-info.ts

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core">
+      <ha-card header="Core" outlined>
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-host-info.ts

@@ -66,7 +66,7 @@ class HassioHostInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Host">
+      <ha-card header="Host" outlined>
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

hassio/src/system/hassio-supervisor-info.ts

@@ -57,7 +57,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor">
+      <ha-card header="Supervisor" outlined>
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-supervisor-log.ts

@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

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

@@ -128,6 +128,7 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
+        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

package.json

@@ -106,7 +106,6 @@
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
-    "fuzzysort": "^1.2.1",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
     "home-assistant-js-websocket": "^7.0.3",

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220429.0
+version      = 20220516.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/common/dom/ancestors-with-property.ts

@@ -0,0 +1,41 @@
+const DEFAULT_OWN = true;
+
+// Finds the closest ancestor of an element that has a specific optionally owned property,
+// traversing slot and shadow root boundaries until the body element is reached
+export const closestWithProperty = (
+  element: Element | null,
+  property: string | symbol,
+  own = DEFAULT_OWN
+) => {
+  if (!element || element === document.body) return null;
+
+  element = element.assignedSlot ?? element;
+  if (element.parentElement) {
+    element = element.parentElement;
+  } else {
+    const root = element.getRootNode();
+    element = root instanceof ShadowRoot ? root.host : null;
+  }
+
+  if (
+    own
+      ? Object.prototype.hasOwnProperty.call(element, property)
+      : element && property in element
+  )
+    return element;
+  return closestWithProperty(element, property, own);
+};
+
+// Finds the set of all such ancestors and includes starting element as first in the set
+export const ancestorsWithProperty = (
+  element: Element | null,
+  property: string | symbol,
+  own = DEFAULT_OWN
+) => {
+  const ancestors: Set<Element> = new Set();
+  while (element) {
+    ancestors.add(element);
+    element = closestWithProperty(element, property, own);
+  }
+  return ancestors;
+};

src/common/string/filter/char-code.ts

@@ -0,0 +1,244 @@
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
+
+/**
+ * An inlined enum containing useful character codes (to be used with String.charCodeAt).
+ * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
+ */
+export enum CharCode {
+  Null = 0,
+  /**
+   * The `\b` character.
+   */
+  Backspace = 8,
+  /**
+   * The `\t` character.
+   */
+  Tab = 9,
+  /**
+   * The `\n` character.
+   */
+  LineFeed = 10,
+  /**
+   * The `\r` character.
+   */
+  CarriageReturn = 13,
+  Space = 32,
+  /**
+   * The `!` character.
+   */
+  ExclamationMark = 33,
+  /**
+   * The `"` character.
+   */
+  DoubleQuote = 34,
+  /**
+   * The `#` character.
+   */
+  Hash = 35,
+  /**
+   * The `$` character.
+   */
+  DollarSign = 36,
+  /**
+   * The `%` character.
+   */
+  PercentSign = 37,
+  /**
+   * The `&` character.
+   */
+  Ampersand = 38,
+  /**
+   * The `'` character.
+   */
+  SingleQuote = 39,
+  /**
+   * The `(` character.
+   */
+  OpenParen = 40,
+  /**
+   * The `)` character.
+   */
+  CloseParen = 41,
+  /**
+   * The `*` character.
+   */
+  Asterisk = 42,
+  /**
+   * The `+` character.
+   */
+  Plus = 43,
+  /**
+   * The `,` character.
+   */
+  Comma = 44,
+  /**
+   * The `-` character.
+   */
+  Dash = 45,
+  /**
+   * The `.` character.
+   */
+  Period = 46,
+  /**
+   * The `/` character.
+   */
+  Slash = 47,
+
+  Digit0 = 48,
+  Digit1 = 49,
+  Digit2 = 50,
+  Digit3 = 51,
+  Digit4 = 52,
+  Digit5 = 53,
+  Digit6 = 54,
+  Digit7 = 55,
+  Digit8 = 56,
+  Digit9 = 57,
+
+  /**
+   * The `:` character.
+   */
+  Colon = 58,
+  /**
+   * The `;` character.
+   */
+  Semicolon = 59,
+  /**
+   * The `<` character.
+   */
+  LessThan = 60,
+  /**
+   * The `=` character.
+   */
+  Equals = 61,
+  /**
+   * The `>` character.
+   */
+  GreaterThan = 62,
+  /**
+   * The `?` character.
+   */
+  QuestionMark = 63,
+  /**
+   * The `@` character.
+   */
+  AtSign = 64,
+
+  A = 65,
+  B = 66,
+  C = 67,
+  D = 68,
+  E = 69,
+  F = 70,
+  G = 71,
+  H = 72,
+  I = 73,
+  J = 74,
+  K = 75,
+  L = 76,
+  M = 77,
+  N = 78,
+  O = 79,
+  P = 80,
+  Q = 81,
+  R = 82,
+  S = 83,
+  T = 84,
+  U = 85,
+  V = 86,
+  W = 87,
+  X = 88,
+  Y = 89,
+  Z = 90,
+
+  /**
+   * The `[` character.
+   */
+  OpenSquareBracket = 91,
+  /**
+   * The `\` character.
+   */
+  Backslash = 92,
+  /**
+   * The `]` character.
+   */
+  CloseSquareBracket = 93,
+  /**
+   * The `^` character.
+   */
+  Caret = 94,
+  /**
+   * The `_` character.
+   */
+  Underline = 95,
+  /**
+   * The ``(`)`` character.
+   */
+  BackTick = 96,
+
+  a = 97,
+  b = 98,
+  c = 99,
+  d = 100,
+  e = 101,
+  f = 102,
+  g = 103,
+  h = 104,
+  i = 105,
+  j = 106,
+  k = 107,
+  l = 108,
+  m = 109,
+  n = 110,
+  o = 111,
+  p = 112,
+  q = 113,
+  r = 114,
+  s = 115,
+  t = 116,
+  u = 117,
+  v = 118,
+  w = 119,
+  x = 120,
+  y = 121,
+  z = 122,
+
+  /**
+   * The `{` character.
+   */
+  OpenCurlyBrace = 123,
+  /**
+   * The `|` character.
+   */
+  Pipe = 124,
+  /**
+   * The `}` character.
+   */
+  CloseCurlyBrace = 125,
+  /**
+   * The `~` character.
+   */
+  Tilde = 126,
+}

src/common/string/filter/filter.ts

@@ -0,0 +1,551 @@
+/* eslint-disable no-console */
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { CharCode } from "./char-code";
+
+const _debug = false;
+
+export interface Match {
+  start: number;
+  end: number;
+}
+
+const _maxLen = 128;
+
+function initTable() {
+  const table: number[][] = [];
+  const row: number[] = [];
+  for (let i = 0; i <= _maxLen; i++) {
+    row[i] = 0;
+  }
+  for (let i = 0; i <= _maxLen; i++) {
+    table.push(row.slice(0));
+  }
+  return table;
+}
+
+function isSeparatorAtPos(value: string, index: number): boolean {
+  if (index < 0 || index >= value.length) {
+    return false;
+  }
+  const code = value.codePointAt(index);
+  switch (code) {
+    case CharCode.Underline:
+    case CharCode.Dash:
+    case CharCode.Period:
+    case CharCode.Space:
+    case CharCode.Slash:
+    case CharCode.Backslash:
+    case CharCode.SingleQuote:
+    case CharCode.DoubleQuote:
+    case CharCode.Colon:
+    case CharCode.DollarSign:
+    case CharCode.LessThan:
+    case CharCode.OpenParen:
+    case CharCode.OpenSquareBracket:
+      return true;
+    case undefined:
+      return false;
+    default:
+      if (isEmojiImprecise(code)) {
+        return true;
+      }
+      return false;
+  }
+}
+
+function isWhitespaceAtPos(value: string, index: number): boolean {
+  if (index < 0 || index >= value.length) {
+    return false;
+  }
+  const code = value.charCodeAt(index);
+  switch (code) {
+    case CharCode.Space:
+    case CharCode.Tab:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
+  return word[pos] !== wordLow[pos];
+}
+
+export function isPatternInWord(
+  patternLow: string,
+  patternPos: number,
+  patternLen: number,
+  wordLow: string,
+  wordPos: number,
+  wordLen: number,
+  fillMinWordPosArr = false
+): boolean {
+  while (patternPos < patternLen && wordPos < wordLen) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      if (fillMinWordPosArr) {
+        // Remember the min word position for each pattern position
+        _minWordMatchPos[patternPos] = wordPos;
+      }
+      patternPos += 1;
+    }
+    wordPos += 1;
+  }
+  return patternPos === patternLen; // pattern must be exhausted
+}
+
+enum Arrow {
+  Diag = 1,
+  Left = 2,
+  LeftLeft = 3,
+}
+
+/**
+ * An array representing a fuzzy match.
+ *
+ * 0. the score
+ * 1. the offset at which matching started
+ * 2. `<match_pos_N>`
+ * 3. `<match_pos_1>`
+ * 4. `<match_pos_0>` etc
+ */
+// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
+export type FuzzyScore = Array<number>;
+
+export function fuzzyScore(
+  pattern: string,
+  patternLow: string,
+  patternStart: number,
+  word: string,
+  wordLow: string,
+  wordStart: number,
+  firstMatchCanBeWeak: boolean
+): FuzzyScore | undefined {
+  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
+  const wordLen = word.length > _maxLen ? _maxLen : word.length;
+
+  if (
+    patternStart >= patternLen ||
+    wordStart >= wordLen ||
+    patternLen - patternStart > wordLen - wordStart
+  ) {
+    return undefined;
+  }
+
+  // Run a simple check if the characters of pattern occur
+  // (in order) at all in word. If that isn't the case we
+  // stop because no match will be possible
+  if (
+    !isPatternInWord(
+      patternLow,
+      patternStart,
+      patternLen,
+      wordLow,
+      wordStart,
+      wordLen,
+      true
+    )
+  ) {
+    return undefined;
+  }
+
+  // Find the max matching word position for each pattern position
+  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
+  _fillInMaxWordMatchPos(
+    patternLen,
+    wordLen,
+    patternStart,
+    wordStart,
+    patternLow,
+    wordLow
+  );
+
+  let row: number;
+  let column = 1;
+  let patternPos: number;
+  let wordPos: number;
+
+  const hasStrongFirstMatch = [false];
+
+  // There will be a match, fill in tables
+  for (
+    row = 1, patternPos = patternStart;
+    patternPos < patternLen;
+    row++, patternPos++
+  ) {
+    // Reduce search space to possible matching word positions and to possible access from next row
+    const minWordMatchPos = _minWordMatchPos[patternPos];
+    const maxWordMatchPos = _maxWordMatchPos[patternPos];
+    const nextMaxWordMatchPos =
+      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
+
+    for (
+      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
+      wordPos < nextMaxWordMatchPos;
+      column++, wordPos++
+    ) {
+      let score = Number.MIN_SAFE_INTEGER;
+      let canComeDiag = false;
+
+      if (wordPos <= maxWordMatchPos) {
+        score = _doScore(
+          pattern,
+          patternLow,
+          patternPos,
+          patternStart,
+          word,
+          wordLow,
+          wordPos,
+          wordLen,
+          wordStart,
+          _diag[row - 1][column - 1] === 0,
+          hasStrongFirstMatch
+        );
+      }
+
+      let diagScore = 0;
+      if (score !== Number.MAX_SAFE_INTEGER) {
+        canComeDiag = true;
+        diagScore = score + _table[row - 1][column - 1];
+      }
+
+      const canComeLeft = wordPos > minWordMatchPos;
+      const leftScore = canComeLeft
+        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
+
+      const canComeLeftLeft =
+        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
+      const leftLeftScore = canComeLeftLeft
+        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
+
+      if (
+        canComeLeftLeft &&
+        (!canComeLeft || leftLeftScore >= leftScore) &&
+        (!canComeDiag || leftLeftScore >= diagScore)
+      ) {
+        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
+        _table[row][column] = leftLeftScore;
+        _arrows[row][column] = Arrow.LeftLeft;
+        _diag[row][column] = 0;
+      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
+        // always prefer choosing left since that means a match is earlier in the word
+        _table[row][column] = leftScore;
+        _arrows[row][column] = Arrow.Left;
+        _diag[row][column] = 0;
+      } else if (canComeDiag) {
+        _table[row][column] = diagScore;
+        _arrows[row][column] = Arrow.Diag;
+        _diag[row][column] = _diag[row - 1][column - 1] + 1;
+      } else {
+        throw new Error(`not possible`);
+      }
+    }
+  }
+
+  if (_debug) {
+    printTables(pattern, patternStart, word, wordStart);
+  }
+
+  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
+    return undefined;
+  }
+
+  row--;
+  column--;
+
+  const result: FuzzyScore = [_table[row][column], wordStart];
+
+  let backwardsDiagLength = 0;
+  let maxMatchColumn = 0;
+
+  while (row >= 1) {
+    // Find the column where we go diagonally up
+    let diagColumn = column;
+    do {
+      const arrow = _arrows[row][diagColumn];
+      if (arrow === Arrow.LeftLeft) {
+        diagColumn -= 2;
+      } else if (arrow === Arrow.Left) {
+        diagColumn -= 1;
+      } else {
+        // found the diagonal
+        break;
+      }
+    } while (diagColumn >= 1);
+
+    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
+    if (
+      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
+      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
+      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
+      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
+    ) {
+      diagColumn = column;
+    }
+
+    if (diagColumn === column) {
+      // this is a contiguous match
+      backwardsDiagLength++;
+    } else {
+      backwardsDiagLength = 1;
+    }
+
+    if (!maxMatchColumn) {
+      // remember the last matched column
+      maxMatchColumn = diagColumn;
+    }
+
+    row--;
+    column = diagColumn - 1;
+    result.push(column);
+  }
+
+  if (wordLen === patternLen) {
+    // the word matches the pattern with all characters!
+    // giving the score a total match boost (to come up ahead other words)
+    result[0] += 2;
+  }
+
+  // Add 1 penalty for each skipped character in the word
+  const skippedCharsCount = maxMatchColumn - patternLen;
+  result[0] -= skippedCharsCount;
+
+  return result;
+}
+
+function _doScore(
+  pattern: string,
+  patternLow: string,
+  patternPos: number,
+  patternStart: number,
+  word: string,
+  wordLow: string,
+  wordPos: number,
+  wordLen: number,
+  wordStart: number,
+  newMatchStart: boolean,
+  outFirstMatchStrong: boolean[]
+): number {
+  if (patternLow[patternPos] !== wordLow[wordPos]) {
+    return Number.MIN_SAFE_INTEGER;
+  }
+
+  let score = 1;
+  let isGapLocation = false;
+  if (wordPos === patternPos - patternStart) {
+    // common prefix: `foobar <-> foobaz`
+    //                            ^^^^^
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+  } else if (
+    isUpperCaseAtPos(wordPos, word, wordLow) &&
+    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
+  ) {
+    // hitting upper-case: `foo <-> forOthers`
+    //                              ^^ ^
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+    isGapLocation = true;
+  } else if (
+    isSeparatorAtPos(wordLow, wordPos) &&
+    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
+  ) {
+    // hitting a separator: `. <-> foo.bar`
+    //                                ^
+    score = 5;
+  } else if (
+    isSeparatorAtPos(wordLow, wordPos - 1) ||
+    isWhitespaceAtPos(wordLow, wordPos - 1)
+  ) {
+    // post separator: `foo <-> bar_foo`
+    //                              ^^^
+    score = 5;
+    isGapLocation = true;
+  }
+
+  if (score > 1 && patternPos === patternStart) {
+    outFirstMatchStrong[0] = true;
+  }
+
+  if (!isGapLocation) {
+    isGapLocation =
+      isUpperCaseAtPos(wordPos, word, wordLow) ||
+      isSeparatorAtPos(wordLow, wordPos - 1) ||
+      isWhitespaceAtPos(wordLow, wordPos - 1);
+  }
+
+  //
+  if (patternPos === patternStart) {
+    // first character in pattern
+    if (wordPos > wordStart) {
+      // the first pattern character would match a word character that is not at the word start
+      // so introduce a penalty to account for the gap preceding this match
+      score -= isGapLocation ? 3 : 5;
+    }
+  } else if (newMatchStart) {
+    // this would be the beginning of a new match (i.e. there would be a gap before this location)
+    score += isGapLocation ? 2 : 0;
+  } else {
+    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
+    score += isGapLocation ? 0 : 1;
+  }
+
+  if (wordPos + 1 === wordLen) {
+    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
+    // so pretend there is a gap after the last character in the word to normalize things
+    score -= isGapLocation ? 3 : 5;
+  }
+
+  return score;
+}
+
+function printTable(
+  table: number[][],
+  pattern: string,
+  patternLen: number,
+  word: string,
+  wordLen: number
+): string {
+  function pad(s: string, n: number, _pad = " ") {
+    while (s.length < n) {
+      s = _pad + s;
+    }
+    return s;
+  }
+  let ret = ` |   |${word
+    .split("")
+    .map((c) => pad(c, 3))
+    .join("|")}\n`;
+
+  for (let i = 0; i <= patternLen; i++) {
+    if (i === 0) {
+      ret += " |";
+    } else {
+      ret += `${pattern[i - 1]}|`;
+    }
+    ret +=
+      table[i]
+        .slice(0, wordLen + 1)
+        .map((n) => pad(n.toString(), 3))
+        .join("|") + "\n";
+  }
+  return ret;
+}
+
+function printTables(
+  pattern: string,
+  patternStart: number,
+  word: string,
+  wordStart: number
+): void {
+  pattern = pattern.substr(patternStart);
+  word = word.substr(wordStart);
+  console.log(printTable(_table, pattern, pattern.length, word, word.length));
+  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
+  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
+}
+
+const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
+const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
+const _diag = initTable(); // the length of a contiguous diagonal match
+const _table = initTable();
+const _arrows = <Arrow[][]>initTable();
+
+function initArr(maxLen: number) {
+  const row: number[] = [];
+  for (let i = 0; i <= maxLen; i++) {
+    row[i] = 0;
+  }
+  return row;
+}
+
+function _fillInMaxWordMatchPos(
+  patternLen: number,
+  wordLen: number,
+  patternStart: number,
+  wordStart: number,
+  patternLow: string,
+  wordLow: string
+) {
+  let patternPos = patternLen - 1;
+  let wordPos = wordLen - 1;
+  while (patternPos >= patternStart && wordPos >= wordStart) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      _maxWordMatchPos[patternPos] = wordPos;
+      patternPos--;
+    }
+    wordPos--;
+  }
+}
+
+export interface FuzzyScorer {
+  (
+    pattern: string,
+    lowPattern: string,
+    patternPos: number,
+    word: string,
+    lowWord: string,
+    wordPos: number,
+    firstMatchCanBeWeak: boolean
+  ): FuzzyScore | undefined;
+}
+
+export function createMatches(score: undefined | FuzzyScore): Match[] {
+  if (typeof score === "undefined") {
+    return [];
+  }
+  const res: Match[] = [];
+  const wordPos = score[1];
+  for (let i = score.length - 1; i > 1; i--) {
+    const pos = score[i] + wordPos;
+    const last = res[res.length - 1];
+    if (last && last.end === pos) {
+      last.end = pos + 1;
+    } else {
+      res.push({ start: pos, end: pos + 1 });
+    }
+  }
+  return res;
+}
+
+/**
+ * A fast function (therefore imprecise) to check if code points are emojis.
+ * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
+ */
+export function isEmojiImprecise(x: number): boolean {
+  return (
+    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
+    x === 8986 ||
+    x === 8987 ||
+    x === 9200 ||
+    x === 9203 ||
+    (x >= 9728 && x <= 10175) ||
+    x === 11088 ||
+    x === 11093 ||
+    (x >= 127744 && x <= 128591) ||
+    (x >= 128640 && x <= 128764) ||
+    (x >= 128992 && x <= 129003) ||
+    (x >= 129280 && x <= 129535) ||
+    (x >= 129648 && x <= 129750)
+  );
+}

src/common/string/filter/sequence-matching.ts

@@ -1,4 +1,52 @@
-import fuzzysort from "fuzzysort";
+import { fuzzyScore } from "./filter";
+
+/**
+ * Determine whether a sequence of letters exists in another string,
+ *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
+ *
+ * @param {string} filter - Sequence of letters to check for
+ * @param {ScorableTextItem} item - Item against whose strings will be checked
+ *
+ * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
+ */
+
+export const fuzzySequentialMatch = (
+  filter: string,
+  item: ScorableTextItem
+) => {
+  let topScore = Number.NEGATIVE_INFINITY;
+
+  for (const word of item.strings) {
+    const scores = fuzzyScore(
+      filter,
+      filter.toLowerCase(),
+      0,
+      word,
+      word.toLowerCase(),
+      0,
+      true
+    );
+
+    if (!scores) {
+      continue;
+    }
+
+    // The VS Code implementation of filter returns a 0 for a weak match.
+    // But if .filter() sees a "0", it considers that a failed match and will remove it.
+    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
+    const score = scores[0] === 0 ? 1 : scores[0];
+
+    if (score > topScore) {
+      topScore = score;
+    }
+  }
+
+  if (topScore === Number.NEGATIVE_INFINITY) {
+    return undefined;
+  }
+
+  return topScore;
+};
 
 /**
  * An interface that objects must extend in order to use the fuzzy sequence matcher
@@ -18,48 +66,18 @@ export interface ScorableTextItem {
   strings: string[];
 }
 
-export type FuzzyFilterSort = <T extends ScorableTextItem>(
+type FuzzyFilterSort = <T extends ScorableTextItem>(
   filter: string,
   items: T[]
 ) => T[];
 
-export function fuzzyMatcher(search: string | null): (string) => boolean {
-  const scorer = fuzzyScorer(search);
-  return (value: string) => scorer([value]) !== Number.NEGATIVE_INFINITY;
-}
-
-export function fuzzyScorer(
-  search: string | null
-): (values: string[]) => number {
-  const searchTerms = (search || "").match(/("[^"]+"|[^"\s]+)/g);
-  if (!searchTerms) {
-    return () => 0;
-  }
-  return (values) =>
-    searchTerms
-      .map((term) => {
-        const resultsForTerm = fuzzysort.go(term, values, {
-          allowTypo: true,
-        });
-        if (resultsForTerm.length > 0) {
-          return Math.max(...resultsForTerm.map((result) => result.score));
-        }
-        return Number.NEGATIVE_INFINITY;
-      })
-      .reduce((partial, current) => partial + current, 0);
-}
-
-export const fuzzySortFilterSort: FuzzyFilterSort = (filter, items) => {
-  const scorer = fuzzyScorer(filter);
-  return items
+export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
+  items
     .map((item) => {
-      item.score = scorer(item.strings);
+      item.score = fuzzySequentialMatch(filter, item);
       return item;
     })
-    .filter((item) => item.score !== undefined && item.score > -100000)
+    .filter((item) => item.score !== undefined)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );
-};
-
-export const defaultFuzzyFilterSort = fuzzySortFilterSort;

src/components/data-table/ha-data-table.ts

@@ -269,8 +269,8 @@ export class HaDataTable extends LitElement {
                       @change=${this._handleHeaderRowCheckboxClick}
                       .indeterminate=${this._checkedRows.length &&
                       this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length ===
-                      this._checkableRowsCount}
+                      .checked=${this._checkedRows.length &&
+                      this._checkedRows.length === this._checkableRowsCount}
                     >
                     </ha-checkbox>
                   </div>

src/components/data-table/sort_filter_worker.ts

@@ -7,26 +7,25 @@ import type {
   SortableColumnContainer,
   SortingDirection,
 } from "./ha-data-table";
-import { fuzzyMatcher } from "../../common/string/filter/sequence-matching";
 
 const filterData = (
   data: DataTableRowData[],
   columns: SortableColumnContainer,
   filter: string
 ) => {
-  const matcher = fuzzyMatcher(filter);
+  filter = filter.toUpperCase();
   return data.filter((row) =>
     Object.entries(columns).some((columnEntry) => {
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          matcher(
-            String(
-              column.filterKey
-                ? row[column.valueColumn || key][column.filterKey]
-                : row[column.valueColumn || key]
-            )
+          String(
+            column.filterKey
+              ? row[column.valueColumn || key][column.filterKey]
+              : row[column.valueColumn || key]
           )
+            .toUpperCase()
+            .includes(filter)
         ) {
           return true;
         }

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

@@ -15,7 +15,6 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
-import { defaultFuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 
 interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
@@ -337,18 +336,11 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value;
-
-    const sortableEntityStates = this._states.map((entityState) => ({
-      strings: [entityState.entity_id, computeStateName(entityState)],
-      entityState: entityState,
-    }));
-    const sortedEntityStates = defaultFuzzyFilterSort(
-      filterString,
-      sortableEntityStates
-    );
-    (this.comboBox as any).filteredItems = sortedEntityStates.map(
-      (sortableItem) => sortableItem.entityState
+    const filterString = ev.detail.value.toLowerCase();
+    (this.comboBox as any).filteredItems = this._states.filter(
+      (entityState) =>
+        entityState.entity_id.toLowerCase().includes(filterString) ||
+        computeStateName(entityState).toLowerCase().includes(filterString)
     );
   }
 

src/components/ha-button-menu.ts

@@ -1,17 +1,27 @@
+import type { Button } from "@material/mwc-button";
 import "@material/mwc-menu";
 import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import {
+  customElement,
+  property,
+  query,
+  queryAssignedElements,
+} from "lit/decorators";
+import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
+import type { HaIconButton } from "./ha-icon-button";
 
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
+  protected readonly [FOCUS_TARGET];
+
   @property() public corner: Corner = "TOP_START";
 
   @property() public menuCorner: MenuCorner = "START";
 
-  @property({ type: Number }) public x?: number;
+  @property({ type: Number }) public x: number | null = null;
 
-  @property({ type: Number }) public y?: number;
+  @property({ type: Number }) public y: number | null = null;
 
   @property({ type: Boolean }) public multi = false;
 
@@ -23,6 +33,12 @@ export class HaButtonMenu extends LitElement {
 
   @query("mwc-menu", true) private _menu?: Menu;
 
+  @queryAssignedElements({
+    slot: "trigger",
+    selector: "ha-icon-button, mwc-button",
+  })
+  private _triggerButton!: Array<HaIconButton | Button>;
+
   public get items() {
     return this._menu?.items;
   }
@@ -31,6 +47,14 @@ export class HaButtonMenu extends LitElement {
     return this._menu?.selected;
   }
 
+  public override focus() {
+    if (this._menu?.open) {
+      this._menu.focusItemAtIndex(0);
+    } else {
+      this._triggerButton[0]?.focus();
+    }
+  }
+
   protected render(): TemplateResult {
     return html`
       <div @click=${this._handleClick}>
@@ -50,6 +74,21 @@ export class HaButtonMenu extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps): void {
+    super.firstUpdated(changedProps);
+
+    if (document.dir === "rtl") {
+      this.updateComplete.then(() => {
+        this.querySelectorAll("mwc-list-item").forEach((item) => {
+          const style = document.createElement("style");
+          style.innerHTML =
+            "span.material-icons:first-of-type { margin-left: var(--mdc-list-item-graphic-margin, 32px) !important; margin-right: 0px !important;}";
+          item!.shadowRoot!.appendChild(style);
+        });
+      });
+    }
+  }
+
   private _handleClick(): void {
     if (this.disabled) {
       return;

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

@@ -47,10 +47,6 @@ export class HaClickableListItem extends ListItemBase {
           padding-left: 0px;
           padding-right: 0px;
         }
-        :host([rtl]) span {
-          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
-          margin-right: 0px !important;
-        }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
           height: 48px;
@@ -64,6 +60,19 @@ export class HaClickableListItem extends ListItemBase {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
+        span.material-icons:first-of-type {
+          margin-inline-start: 0px !important;
+          margin-inline-end: var(
+            --mdc-list-item-graphic-margin,
+            16px
+          ) !important;
+          direction: var(--direction);
+        }
+        span.material-icons:last-of-type {
+          margin-inline-start: auto !important;
+          margin-inline-end: 0px !important;
+          direction: var(--direction);
+        }
       `,
     ];
   }

src/components/ha-combo-box.ts

@@ -241,6 +241,9 @@ export class HaComboBox extends LitElement {
       .toggle-button {
         right: 12px;
         top: -10px;
+        inset-inline-start: initial;
+        inset-inline-end: 12px;
+        direction: var(--direction);
       }
       :host([opened]) .toggle-button {
         color: var(--primary-color);
@@ -249,18 +252,9 @@ export class HaComboBox extends LitElement {
         --mdc-icon-size: 20px;
         top: -7px;
         right: 36px;
-      }
-
-      :host-context([style*="direction: rtl;"]) .toggle-button {
-        left: 12px;
-        right: auto;
-        top: -10px;
-      }
-      :host-context([style*="direction: rtl;"]) .clear-button {
-        --mdc-icon-size: 20px;
-        top: -7px;
-        left: 36px;
-        right: auto;
+        inset-inline-start: initial;
+        inset-inline-end: 36px;
+        direction: var(--direction);
       }
     `;
   }

src/components/ha-dialog.ts

@@ -3,8 +3,8 @@ import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
 import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
-import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
+import { FOCUS_TARGET } from "../dialogs/make-dialog-manager";
 import "./ha-icon-button";
 
 export const createCloseHeading = (
@@ -17,12 +17,13 @@ export const createCloseHeading = (
     .path=${mdiClose}
     dialogAction="close"
     class="header_button"
-    dir=${computeRTLDirection(hass)}
   ></ha-icon-button>
 `;
 
 @customElement("ha-dialog")
 export class HaDialog extends DialogBase {
+  protected readonly [FOCUS_TARGET];
+
   public scrollToPos(x: number, y: number) {
     this.contentElement?.scrollTo(x, y);
   }
@@ -89,18 +90,18 @@ export class HaDialog extends DialogBase {
       }
       .header_title {
         margin-right: 40px;
+        margin-inline-end: 40px;
+        direction: var(--direction);
       }
-      [dir="rtl"].header_button {
-        right: auto;
-        left: 16px;
+      .header_button {
+        inset-inline-start: initial;
+        inset-inline-end: 16px;
+        direction: var(--direction);
       }
-      [dir="rtl"].header_title {
-        margin-left: 40px;
-        margin-right: 0px;
-      }
-      :host-context([style*="direction: rtl;"]) .dialog-actions {
-        left: 0px !important;
-        right: auto !important;
+      .dialog-actions {
+        inset-inline-start: initial !important;
+        inset-inline-end: 0px !important;
+        direction: var(--direction);
       }
     `,
   ];

src/components/ha-fab.ts

@@ -1,24 +1,25 @@
-import { Fab } from "@material/mwc-fab";
+import { FabBase } from "@material/mwc-fab/mwc-fab-base";
+import { styles } from "@material/mwc-fab/mwc-fab.css";
 import { customElement } from "lit/decorators";
 import { css } from "lit";
 
 @customElement("ha-fab")
-export class HaFab extends Fab {
+export class HaFab extends FabBase {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
   }
 
-  static override styles = Fab.styles.concat([
+  static override styles = [
+    styles,
     css`
-      :host-context([style*="direction: rtl;"])
-        .mdc-fab--extended
-        .mdc-fab__icon {
-        margin-left: 12px !important;
-        margin-right: calc(12px - 20px) !important;
+      :host .mdc-fab--extended .mdc-fab__icon {
+        margin-inline-start: -8px;
+        margin-inline-end: 12px;
+        direction: var(--direction);
       }
     `,
-  ]);
+  ];
 }
 
 declare global {

src/components/ha-file-upload.ts

@@ -175,24 +175,23 @@ export class HaFileUpload extends LitElement {
         }
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
-        }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field__icon--leading {
-          margin-right: 0px;
+          inset-inline-start: initial;
+          inset-inline-end: 0px;
+          direction: var(--direction);
         }
         .mdc-text-field--filled .mdc-floating-label--float-above {
           transform: scale(0.75);
           top: 8px;
         }
-        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-          left: initial;
-          right: 16px;
+        .mdc-floating-label {
+          inset-inline-start: 16px !important;
+          inset-inline-end: initial !important;
+          direction: var(--direction);
         }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field--filled
-          .mdc-floating-label {
-          left: initial;
-          right: 48px;
+        .mdc-text-field--filled .mdc-floating-label {
+          inset-inline-start: 48px !important;
+          inset-inline-end: initial !important;
+          direction: var(--direction);
         }
         .dragged:before {
           position: var(--layout-fit_-_position);

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

@@ -133,9 +133,10 @@ export class HaFormString extends LitElement implements HaFormElement {
         color: var(--secondary-text-color);
       }
 
-      :host-context([style*="direction: rtl;"]) ha-icon-button {
-        right: auto;
-        left: 12px;
+      ha-icon-button {
+        inset-inline-start: initial;
+        inset-inline-end: 12px;
+        direction: var(--direction);
       }
     `;
   }

src/components/ha-icon-button.ts

@@ -1,6 +1,7 @@
 import "@material/mwc-icon-button";
+import type { IconButton } from "@material/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import "./ha-svg-icon";
 
 @customElement("ha-icon-button")
@@ -15,6 +16,12 @@ export class HaIconButton extends LitElement {
 
   @property({ type: Boolean }) hideTitle = false;
 
+  @query("mwc-icon-button", true) private _button?: IconButton;
+
+  public override focus() {
+    this._button?.focus();
+  }
+
   static shadowRootOptions: ShadowRootInit = {
     mode: "open",
     delegatesFocus: true,

src/components/ha-select.ts

@@ -47,9 +47,10 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 16px !important;
-        left: initial !important;
+      .mdc-floating-label {
+        inset-inline-start: 16px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
       }
     `,
   ];

src/components/ha-target-picker.ts

@@ -616,9 +616,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         opacity: var(--light-disabled-opacity);
         pointer-events: none;
       }
-      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
-        margin-right: -14px !important;
-        margin-left: 4px !important;
+      .mdc-chip__icon {
+        margin-inline-start: -14px !important;
+        margin-inline-end: 4px !important;
+        direction: var(--direction);
       }
     `;
   }

src/components/ha-textfield.ts

@@ -92,17 +92,18 @@ export class HaTextField extends TextFieldBase {
         overflow: var(--text-field-overflow);
       }
 
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 10px !important;
-        left: initial !important;
+      .mdc-floating-label {
+        inset-inline-start: 16px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
       }
 
-      :host-context([style*="direction: rtl;"])
-        .mdc-text-field--with-leading-icon.mdc-text-field--filled
+      .mdc-text-field--with-leading-icon.mdc-text-field--filled
         .mdc-floating-label {
         max-width: calc(100% - 48px);
-        right: 48px !important;
-        left: initial !important;
+        inset-inline-start: 48px !important;
+        inset-inline-end: initial !important;
+        direction: var(--direction);
       }
     `,
   ];

src/components/media-player/dialog-media-manage.ts

@@ -314,9 +314,10 @@ class DialogMediaManage extends LitElement {
           vertical-align: middle;
         }
 
-        :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-          margin-left: 8px !important;
-          margin-right: 0px !important;
+        ha-svg-icon[slot="icon"] {
+          margin-inline-start: 0px !important;
+          margin-inline-end: 8px !important;
+          direction: var(--direction);
         }
 
         .refresh {

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

@@ -60,9 +60,10 @@ class MediaManageButton extends LitElement {
       vertical-align: middle;
     }
 
-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
-      margin-right: 0px;
+    ha-svg-icon[slot="icon"] {
+      margin-inline-start: 0px;
+      margin-inline-end: 8px;
+      direction: var(--direction);
     }
   `;
 }

src/components/media-player/ha-media-player-browse.ts

@@ -1,10 +1,11 @@
+import "@lit-labs/virtualizer";
+import type { LitVirtualizer } from "@lit-labs/virtualizer";
+import { grid } from "@lit-labs/virtualizer/layouts/grid";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import { grid } from "@lit-labs/virtualizer/layouts/grid";
-import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -21,10 +22,12 @@ import {
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
+import { getSignedPath } from "../../data/auth";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseMediaPlayer,
@@ -39,6 +42,7 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
@@ -49,8 +53,6 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-browse-media-tts";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
-import { getSignedPath } from "../../data/auth";
-import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 
 declare global {
   interface HASSDomEvents {
@@ -100,6 +102,10 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
+  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
+
+  private _observed = false;
+
   private _headerOffsetHeight = 0;
 
   private _resizeObserver?: ResizeObserver;
@@ -280,6 +286,19 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
+
+      // This fixes a race condition for resizing of the cards using the grid layout
+      if (this._observed) {
+        return;
+      }
+
+      // @ts-ignore
+      const virtualizer = this._virtualizer?._virtualizer;
+
+      if (virtualizer) {
+        this._observed = true;
+        setTimeout(() => virtualizer._observeMutations(), 0);
+      }
     }
   }
 
@@ -477,6 +496,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                       <lit-virtualizer
                         scroller
                         .items=${children}
+                        style=${styleMap({
+                          height: `${children.length * 72 + 26}px`,
+                        })}
                         .renderItem=${this._renderListItem}
                       ></lit-virtualizer>
                       ${currentItem.not_shown
@@ -606,7 +628,6 @@ export class HaMediaPlayerBrowse extends LitElement {
         </div>
         <span class="title">${child.title}</span>
       </mwc-list-item>
-      <li divider role="separator"></li>
     `;
   };
 

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

@@ -120,9 +120,10 @@ class MediaUploadButton extends LitElement {
       vertical-align: middle;
     }
 
-    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
-      margin-left: 8px;
-      margin-right: 0px;
+    ha-svg-icon[slot="icon"] {
+      margin-inline-start: 0px;
+      margin-inline-end: 8px;
+      direction: var(--direction);
     }
   `;
 }

src/components/trace/ha-timeline.ts

@@ -10,6 +10,8 @@ export class HaTimeline extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public raised = false;
 
+  @property({ reflect: true, type: Boolean }) notEnabled = false;
+
   @property({ type: Boolean }) public lastItem = false;
 
   @property({ type: String }) public icon?: string;
@@ -76,6 +78,9 @@ export class HaTimeline extends LitElement {
           margin-right: 8px;
           width: 24px;
         }
+        :host([notEnabled]) ha-svg-icon {
+          opacity: 0.5;
+        }
         ha-svg-icon {
           color: var(
             --timeline-ball-color,

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

@@ -114,6 +114,11 @@ export class HaTracePathDetails extends LitElement {
           const { path, timestamp, result, error, changed_variables, ...rest } =
             trace as any;
 
+          if (result?.enabled === false) {
+            return html`This node was disabled and skipped during execution so
+            no further trace information is available.`;
+          }
+
           return html`
             ${curPath === this.selected.path
               ? ""

src/components/trace/hat-graph-node.ts

@@ -19,6 +19,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ reflect: true, type: Boolean }) disabled?: boolean;
 
+  @property({ reflect: true, type: Boolean }) notEnabled = false;
+
   @property({ reflect: true, type: Boolean }) graphStart?: boolean;
 
   @property({ type: Boolean, attribute: "nofocus" }) noFocus = false;
@@ -114,8 +116,14 @@ export class HatGraphNode extends LitElement {
         --stroke-clr: var(--hover-clr);
         --icon-clr: var(--default-icon-clr);
       }
-      :host([disabled]) circle {
-        stroke: var(--disabled-clr);
+      :host([notEnabled]) circle {
+        --stroke-clr: var(--disabled-clr);
+      }
+      :host([notEnabled][active]) circle {
+        --stroke-clr: var(--disabled-active-clr);
+      }
+      :host([notEnabled]:hover) circle {
+        --stroke-clr: var(--disabled-hover-clr);
       }
       svg {
         width: 100%;

src/components/trace/hat-script-graph.ts

@@ -96,6 +96,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
+        .notEnabled=${config.enabled === false}
         tabindex=${track ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -130,20 +131,31 @@ export class HatScriptGraph extends LitElement {
     other: this.render_other_node,
   };
 
-  private render_action_node(node: Action, path: string, graphStart = false) {
+  private render_action_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     const type =
       Object.keys(this.typeRenderers).find((key) => key in node) || "other";
     this.renderedNodes[path] = { config: node, path };
     if (this.trace && path in this.trace.trace) {
       this.trackedNodes[path] = this.renderedNodes[path];
     }
-    return this.typeRenderers[type].bind(this)(node, path, graphStart);
+    return this.typeRenderers[type].bind(this)(
+      node,
+      path,
+      graphStart,
+      disabled
+    );
   }
 
   private render_choose_node(
     config: ChooseAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace = this.trace.trace[path] as ChooseActionTraceStep[] | undefined;
     const trace_path = trace
@@ -160,12 +172,14 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || config.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiArrowDecision}
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || config.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -188,12 +202,15 @@ export class HatScriptGraph extends LitElement {
                     @focus=${this.selectNode(config, branch_path)}
                     ?track=${track_this}
                     ?active=${this.selected === branch_path}
+                    .notEnabled=${disabled || config.enabled === false}
                   ></hat-graph-node>
                   ${branch.sequence !== null
                     ? ensureArray(branch.sequence).map((action, j) =>
                         this.render_action_node(
                           action,
-                          `${branch_path}/sequence/${j}`
+                          `${branch_path}/sequence/${j}`,
+                          false,
+                          disabled || config.enabled === false
                         )
                       )
                     : ""}
@@ -205,7 +222,12 @@ export class HatScriptGraph extends LitElement {
           <hat-graph-spacer ?track=${track_default}></hat-graph-spacer>
           ${config.default !== null
             ? ensureArray(config.default)?.map((action, i) =>
-                this.render_action_node(action, `${path}/default/${i}`)
+                this.render_action_node(
+                  action,
+                  `${path}/default/${i}`,
+                  false,
+                  disabled || config.enabled === false
+                )
               )
             : ""}
         </div>
@@ -213,7 +235,12 @@ export class HatScriptGraph extends LitElement {
     `;
   }
 
-  private render_if_node(config: IfAction, path: string, graphStart = false) {
+  private render_if_node(
+    config: IfAction,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     const trace = this.trace.trace[path] as IfActionTraceStep[] | undefined;
     let trackThen = false;
     let trackElse = false;
@@ -234,12 +261,14 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(config, path)}
         ?track=${trace !== undefined}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || config.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiCallSplit}
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || config.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -249,10 +278,16 @@ export class HatScriptGraph extends LitElement {
                 .iconPath=${mdiCallMissed}
                 ?track=${trackElse}
                 ?active=${this.selected === path}
+                .notEnabled=${disabled || config.enabled === false}
                 nofocus
               ></hat-graph-node
               >${ensureArray(config.else).map((action, j) =>
-                this.render_action_node(action, `${path}/else/${j}`)
+                this.render_action_node(
+                  action,
+                  `${path}/else/${j}`,
+                  false,
+                  disabled || config.enabled === false
+                )
               )}
             </div>`
           : html`<hat-graph-spacer ?track=${trackElse}></hat-graph-spacer>`}
@@ -261,10 +296,16 @@ export class HatScriptGraph extends LitElement {
             .iconPath=${mdiCallReceived}
             ?track=${trackThen}
             ?active=${this.selected === path}
+            .notEnabled=${disabled || config.enabled === false}
             nofocus
           ></hat-graph-node>
           ${ensureArray(config.then).map((action, j) =>
-            this.render_action_node(action, `${path}/then/${j}`)
+            this.render_action_node(
+              action,
+              `${path}/then/${j}`,
+              false,
+              disabled || config.enabled === false
+            )
           )}
         </div>
       </hat-graph-branch>
@@ -274,7 +315,8 @@ export class HatScriptGraph extends LitElement {
   private render_condition_node(
     node: Condition,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
     let track = false;
@@ -300,6 +342,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${track}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${trace === undefined ? "-1" : "0"}
         short
       >
@@ -308,6 +351,7 @@ export class HatScriptGraph extends LitElement {
           slot="head"
           ?track=${track}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           .iconPath=${mdiAbTesting}
           nofocus
         ></hat-graph-node>
@@ -322,6 +366,7 @@ export class HatScriptGraph extends LitElement {
           nofocus
           ?track=${trackFailed}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
         ></hat-graph-node>
       </hat-graph-branch>
     `;
@@ -330,7 +375,8 @@ export class HatScriptGraph extends LitElement {
   private render_delay_node(
     node: DelayAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -339,6 +385,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -347,7 +394,8 @@ export class HatScriptGraph extends LitElement {
   private render_device_node(
     node: DeviceAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -356,6 +404,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -364,7 +413,8 @@ export class HatScriptGraph extends LitElement {
   private render_event_node(
     node: EventAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -373,6 +423,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -381,7 +432,8 @@ export class HatScriptGraph extends LitElement {
   private render_repeat_node(
     node: RepeatAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace: any = this.trace.trace[path];
     const repeats = this.trace?.trace[`${path}/repeat/sequence/0`]?.length;
@@ -391,12 +443,14 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiRefresh}
           ?track=${path in this.trace.trace}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -404,12 +458,18 @@ export class HatScriptGraph extends LitElement {
           .iconPath=${mdiArrowUp}
           ?track=${repeats > 1}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           nofocus
           .badge=${repeats > 1 ? repeats : undefined}
         ></hat-graph-node>
         <div ?track=${trace}>
           ${ensureArray(node.repeat.sequence).map((action, i) =>
-            this.render_action_node(action, `${path}/repeat/sequence/${i}`)
+            this.render_action_node(
+              action,
+              `${path}/repeat/sequence/${i}`,
+              false,
+              disabled || node.enabled === false
+            )
           )}
         </div>
       </hat-graph-branch>
@@ -419,7 +479,8 @@ export class HatScriptGraph extends LitElement {
   private render_scene_node(
     node: SceneAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -428,6 +489,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -436,7 +498,8 @@ export class HatScriptGraph extends LitElement {
   private render_service_node(
     node: ServiceAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -445,6 +508,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -453,7 +517,8 @@ export class HatScriptGraph extends LitElement {
   private render_wait_node(
     node: WaitAction | WaitForTriggerAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     return html`
       <hat-graph-node
@@ -462,6 +527,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -470,7 +536,8 @@ export class HatScriptGraph extends LitElement {
   private render_parallel_node(
     node: ParallelAction,
     path: string,
-    graphStart = false
+    graphStart = false,
+    disabled = false
   ) {
     const trace: any = this.trace.trace[path];
     return html`
@@ -479,12 +546,14 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       >
         <hat-graph-node
           .graphStart=${graphStart}
           .iconPath=${mdiShuffleDisabled}
           ?track=${path in this.trace.trace}
           ?active=${this.selected === path}
+          .notEnabled=${disabled || node.enabled === false}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -495,20 +564,29 @@ export class HatScriptGraph extends LitElement {
                   (sAction, j) =>
                     this.render_action_node(
                       sAction,
-                      `${path}/parallel/${i}/sequence/${j}`
+                      `${path}/parallel/${i}/sequence/${j}`,
+                      false,
+                      disabled || node.enabled === false
                     )
                 )}
               </div>`
             : this.render_action_node(
                 action,
-                `${path}/parallel/${i}/sequence/0`
+                `${path}/parallel/${i}/sequence/0`,
+                false,
+                disabled || node.enabled === false
               )
         )}
       </hat-graph-branch>
     `;
   }
 
-  private render_stop_node(node: Action, path: string, graphStart = false) {
+  private render_stop_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
     return html`
       <hat-graph-node
@@ -519,11 +597,17 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;
   }
 
-  private render_other_node(node: Action, path: string, graphStart = false) {
+  private render_other_node(
+    node: Action,
+    path: string,
+    graphStart = false,
+    disabled = false
+  ) {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
@@ -531,6 +615,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;
   }
@@ -669,6 +754,8 @@ export class HatScriptGraph extends LitElement {
         --track-clr: var(--track-color, var(--accent-color));
         --hover-clr: var(--hover-color, var(--primary-color));
         --disabled-clr: var(--disabled-color, var(--disabled-text-color));
+        --disabled-active-clr: rgba(var(--rgb-primary-color), 0.5);
+        --disabled-hover-clr: rgba(var(--rgb-primary-color), 0.7);
         --default-trigger-color: 3, 169, 244;
         --rgb-trigger-color: var(--trigger-color, var(--default-trigger-color));
         --background-clr: var(--background-color, white);

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

@@ -26,6 +26,7 @@ import {
   ChooseActionChoice,
   getActionType,
   IfAction,
+  ParallelAction,
   RepeatAction,
 } from "../../data/script";
 import { describeAction } from "../../data/script_i18n";
@@ -291,7 +292,16 @@ class ActionRenderer {
       return this._handleIf(index);
     }
 
-    this._renderEntry(path, describeAction(this.hass, data, actionType));
+    if (actionType === "parallel") {
+      return this._handleParallel(index);
+    }
+
+    this._renderEntry(
+      path,
+      describeAction(this.hass, data, actionType),
+      undefined,
+      data.enabled === false
+    );
 
     let i = index + 1;
 
@@ -344,10 +354,16 @@ class ActionRenderer {
     const chooseConfig = this._getDataFromPath(
       this.keys[index]
     ) as ChooseAction;
+    const disabled = chooseConfig.enabled === false;
     const name = chooseConfig.alias || "Choose";
 
     if (defaultExecuted) {
-      this._renderEntry(choosePath, `${name}: Default action executed`);
+      this._renderEntry(
+        choosePath,
+        `${name}: Default action executed`,
+        undefined,
+        disabled
+      );
     } else if (chooseTrace.result) {
       const choiceNumeric =
         chooseTrace.result.choice !== "default"
@@ -359,9 +375,19 @@ class ActionRenderer {
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed`
         : `Error: ${chooseTrace.error}`;
-      this._renderEntry(choosePath, `${name}: ${choiceName}`);
+      this._renderEntry(
+        choosePath,
+        `${name}: ${choiceName}`,
+        undefined,
+        disabled
+      );
     } else {
-      this._renderEntry(choosePath, `${name}: No action taken`);
+      this._renderEntry(
+        choosePath,
+        `${name}: No action taken`,
+        undefined,
+        disabled
+      );
     }
 
     let i;
@@ -409,9 +435,11 @@ class ActionRenderer {
     const repeatConfig = this._getDataFromPath(
       this.keys[index]
     ) as RepeatAction;
+    const disabled = repeatConfig.enabled === false;
+
     const name = repeatConfig.alias || describeAction(this.hass, repeatConfig);
 
-    this._renderEntry(repeatPath, name);
+    this._renderEntry(repeatPath, name, undefined, disabled);
 
     let i;
 
@@ -436,18 +464,24 @@ class ActionRenderer {
 
     const ifTrace = this._getItem(index)[0] as IfActionTraceStep;
     const ifConfig = this._getDataFromPath(this.keys[index]) as IfAction;
+    const disabled = ifConfig.enabled === false;
     const name = ifConfig.alias || "If";
 
-    if (ifTrace.result) {
+    if (ifTrace.result?.choice) {
       const choiceConfig = this._getDataFromPath(
         `${this.keys[index]}/${ifTrace.result.choice}/`
       ) as any;
       const choiceName = choiceConfig
         ? `${choiceConfig.alias || `${ifTrace.result.choice} action executed`}`
         : `Error: ${ifTrace.error}`;
-      this._renderEntry(ifPath, `${name}: ${choiceName}`);
+      this._renderEntry(ifPath, `${name}: ${choiceName}`, undefined, disabled);
     } else {
-      this._renderEntry(ifPath, `${name}: No action taken`);
+      this._renderEntry(
+        ifPath,
+        `${name}: No action taken`,
+        undefined,
+        disabled
+      );
     }
 
     let i;
@@ -476,14 +510,48 @@ class ActionRenderer {
     return i;
   }
 
+  private _handleParallel(index: number): number {
+    const parallelPath = this.keys[index];
+    const startLevel = parallelPath.split("/").length;
+
+    const parallelConfig = this._getDataFromPath(
+      this.keys[index]
+    ) as ParallelAction;
+
+    const disabled = parallelConfig.enabled === false;
+
+    const name = parallelConfig.alias || "Execute in parallel";
+
+    this._renderEntry(parallelPath, name, undefined, disabled);
+
+    let i;
+
+    for (i = index + 1; i < this.keys.length; i++) {
+      const path = this.keys[i];
+      const parts = path.split("/");
+
+      // We're done if no more sequence in current level
+      if (parts.length <= startLevel) {
+        return i;
+      }
+
+      i = this._renderItem(i, getActionType(this._getDataFromPath(path)));
+    }
+
+    return i;
+  }
+
   private _renderEntry(
     path: string,
     description: string,
-    icon = mdiRecordCircleOutline
+    icon = mdiRecordCircleOutline,
+    disabled = false
   ) {
     this.entries.push(html`
-      <ha-timeline .icon=${icon} data-path=${path}>
-        ${description}
+      <ha-timeline .icon=${icon} data-path=${path} .notEnabled=${disabled}>
+        ${description}${disabled
+          ? html`<span class="disabled"> (disabled)</span>`
+          : ""}
       </ha-timeline>
     `);
   }

src/data/application_credential.ts

@@ -0,0 +1,44 @@
+import { HomeAssistant } from "../types";
+
+export interface ApplicationCredentialsConfig {
+  domains: string[];
+}
+
+export interface ApplicationCredential {
+  id: string;
+  domain: string;
+  client_id: string;
+  client_secret: string;
+}
+
+export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
+  hass.callWS<ApplicationCredentialsConfig>({
+    type: "application_credentials/config",
+  });
+
+export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
+  hass.callWS<ApplicationCredential[]>({
+    type: "application_credentials/list",
+  });
+
+export const createApplicationCredential = async (
+  hass: HomeAssistant,
+  domain: string,
+  clientId: string,
+  clientSecret: string
+) =>
+  hass.callWS<ApplicationCredential>({
+    type: "application_credentials/create",
+    domain,
+    client_id: clientId,
+    client_secret: clientSecret,
+  });
+
+export const deleteApplicationCredential = async (
+  hass: HomeAssistant,
+  applicationCredentialsId: string
+) =>
+  hass.callWS<void>({
+    type: "application_credentials/delete",
+    application_credentials_id: applicationCredentialsId,
+  });

src/data/automation.ts

@@ -157,6 +157,7 @@ export interface CalendarTrigger extends BaseTrigger {
   platform: "calendar";
   event: "start" | "end";
   entity_id: string;
+  offset: string;
 }
 
 export type Trigger =

src/data/hassio/supervisor.ts

@@ -179,7 +179,10 @@ export const fetchHassioInfo = async (
 };
 
 export const fetchHassioLogs = async (hass: HomeAssistant, provider: string) =>
-  hass.callApi<string>("GET", `hassio/${provider}/logs`);
+  hass.callApi<string>(
+    "GET",
+    `hassio/${provider.includes("_") ? `addons/${provider}` : provider}/logs`
+  );
 
 export const setSupervisorOption = async (
   hass: HomeAssistant,

src/data/logbook.ts

@@ -10,7 +10,7 @@ const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
 export const CONTINUOUS_DOMAINS = ["proximity", "sensor"];
 
 export interface LogbookEntry {
-  when: string;
+  when: number;
   name: string;
   message?: string;
   entity_id?: string;
@@ -25,6 +25,7 @@ export interface LogbookEntry {
   context_entity_id?: string;
   context_entity_id_name?: string;
   context_name?: string;
+  context_message?: string;
   state?: string;
 }
 
@@ -46,7 +47,6 @@ export const getLogbookDataForContext = async (
       startDate,
       undefined,
       undefined,
-      undefined,
       contextId
     )
   );
@@ -56,20 +56,13 @@ export const getLogbookData = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string,
-  entity_matches_only?: boolean
+  entityId?: string
 ): Promise<LogbookEntry[]> => {
   const localize = await hass.loadBackendTranslation("device_class");
   return addLogbookMessage(
     hass,
     localize,
-    await getLogbookDataCache(
-      hass,
-      startDate,
-      endDate,
-      entityId,
-      entity_matches_only
-    )
+    await getLogbookDataCache(hass, startDate, endDate, entityId)
   );
 };
 
@@ -97,8 +90,7 @@ export const getLogbookDataCache = async (
   hass: HomeAssistant,
   startDate: string,
   endDate: string,
-  entityId?: string,
-  entity_matches_only?: boolean
+  entityId?: string
 ) => {
   const ALL_ENTITIES = "*";
 
@@ -125,39 +117,31 @@ export const getLogbookDataCache = async (
     hass,
     startDate,
     endDate,
-    entityId !== ALL_ENTITIES ? entityId : undefined,
-    entity_matches_only
+    entityId !== ALL_ENTITIES ? entityId : undefined
   ).then((entries) => entries.reverse());
   return DATA_CACHE[cacheKey][entityId];
 };
 
-const getLogbookDataFromServer = async (
+export const getLogbookDataFromServer = (
   hass: HomeAssistant,
   startDate: string,
   endDate?: string,
   entityId?: string,
-  entitymatchesOnly?: boolean,
   contextId?: string
 ) => {
-  const params = new URLSearchParams();
-
+  let params: any = {
+    type: "logbook/get_events",
+    start_time: startDate,
+  };
   if (endDate) {
-    params.append("end_time", endDate);
+    params = { ...params, end_time: endDate };
   }
   if (entityId) {
-    params.append("entity", entityId);
+    params = { ...params, entity_ids: entityId.split(",") };
+  } else if (contextId) {
+    params = { ...params, context_id: contextId };
   }
-  if (entitymatchesOnly) {
-    params.append("entity_matches_only", "");
-  }
-  if (contextId) {
-    params.append("context_id", contextId);
-  }
-
-  return hass.callApi<LogbookEntry[]>(
-    "GET",
-    `logbook/${startDate}?${params.toString()}`
-  );
+  return hass.callWS<LogbookEntry[]>(params);
 };
 
 export const clearLogbookCache = (startDate: string, endDate: string) => {

src/data/update.ts

@@ -2,8 +2,10 @@ import type {
   HassEntities,
   HassEntityAttributeBase,
   HassEntityBase,
+  HassEvent,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } from "../common/const";
+import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
@@ -110,15 +112,32 @@ export const checkForEntityUpdates = async (
     return;
   }
 
+  let updated = 0;
+
+  const unsubscribeEvents = await hass.connection.subscribeEvents<HassEvent>(
+    (event) => {
+      if (computeDomain(event.data.entity_id) === "update") {
+        updated++;
+        showToast(element, {
+          message: hass.localize("ui.panel.config.updates.updates_refreshed", {
+            count: updated,
+          }),
+        });
+      }
+    },
+    "state_changed"
+  );
+
   await hass.callService("homeassistant", "update_entity", {
     entity_id: entities,
   });
 
-  if (filterUpdateEntitiesWithInstall(hass.states).length) {
-    showToast(element, {
-      message: hass.localize("ui.panel.config.updates.updates_refreshed"),
-    });
-  } else {
+  // there is no reliable way to know if all the updates are done updating, so we just wait a bit for now...
+  await new Promise((r) => setTimeout(r, 10000));
+
+  unsubscribeEvents();
+
+  if (updated === 0) {
     showToast(element, {
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -518,10 +518,9 @@ class DataEntryFlowDialog extends LitElement {
           position: absolute;
           top: 0;
           right: 0;
-        }
-        :host-context([style*="direction: rtl;"]) .dialog-actions {
-          right: auto;
-          left: 0;
+          inset-inline-start: initial;
+          inset-inline-end: 0px;
+          direction: var(--direction);
         }
         .dialog-actions > * {
           color: var(--secondary-text-color);

src/dialogs/config-flow/step-flow-form.ts

@@ -192,11 +192,8 @@ class StepFlowForm extends LitElement {
         }
         h2 {
           word-break: break-word;
-          padding-right: 72px;
-        }
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 72px !important;
+          padding-inline-end: 72px;
+          direction: var(--direction);
         }
       `,
     ];

src/dialogs/config-flow/step-flow-pick-flow.ts

@@ -104,11 +104,8 @@ class StepFlowPickFlow extends LitElement {
           margin: 16px 0;
         }
         h2 {
-          padding-right: 66px;
-        }
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 66px !important;
+          padding-inline-end: 66px;
+          direction: var(--direction);
         }
         @media all and (max-height: 900px) {
           div {

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -311,11 +311,8 @@ class StepFlowPickHandler extends LitElement {
           border-bottom-color: var(--divider-color);
         }
         h2 {
-          padding-right: 66px;
-        }
-        :host-context([style*="direction: rtl;"]) h2 {
-          padding-right: auto !important;
-          padding-left: 66px !important;
+          padding-inline-end: 66px;
+          direction: var(--direction);
         }
         @media all and (max-height: 900px) {
           mwc-list {

src/dialogs/config-flow/styles.ts

@@ -3,7 +3,11 @@ import { css } from "lit";
 export const configFlowContentStyles = css`
   h2 {
     margin: 24px 38px 0 0;
+    margin-inline-start: 0px;
+    margin-inline-end: 38px;
     padding: 0 24px;
+    padding-inline-start: 24px;
+    padding-inline-end: 24px;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-family: var(

src/dialogs/generic/dialog-box.ts

@@ -1,12 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
-import "../../components/ha-textfield";
+import { HaTextField } from "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
@@ -17,13 +18,10 @@ class DialogBox extends LitElement {
 
   @state() private _params?: DialogBoxParams;
 
-  @state() private _value?: string;
+  @query("ha-textfield") private _textField?: HaTextField;
 
   public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
-    if (params.prompt) {
-      this._value = params.defaultValue;
-    }
   }
 
   public closeDialog(): boolean {
@@ -75,9 +73,7 @@ class DialogBox extends LitElement {
             ? html`
                 <ha-textfield
                   dialogInitialFocus
-                  .value=${this._value || ""}
-                  @keyup=${this._handleKeyUp}
-                  @input=${this._valueChanged}
+                  value=${ifDefined(this._params.defaultValue)}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -109,10 +105,6 @@ class DialogBox extends LitElement {
     `;
   }
 
-  private _valueChanged(ev) {
-    this._value = ev.target.value;
-  }
-
   private _dismiss(): void {
     if (this._params?.cancel) {
       this._params.cancel();
@@ -120,15 +112,9 @@ class DialogBox extends LitElement {
     this._close();
   }
 
-  private _handleKeyUp(ev: KeyboardEvent) {
-    if (ev.keyCode === 13) {
-      this._confirm();
-    }
-  }
-
   private _confirm(): void {
     if (this._params!.confirm) {
-      this._params!.confirm(this._value);
+      this._params!.confirm(this._textField?.value);
     }
     this._close();
   }

src/dialogs/make-dialog-manager.ts

@@ -1,6 +1,9 @@
 import { HASSDomEvent, ValidHassDomEvent } from "../common/dom/fire_event";
 import { mainWindow } from "../common/dom/get_main_window";
 import { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
+import { ancestorsWithProperty } from "../common/dom/ancestors-with-property";
+import { deepActiveElement } from "../common/dom/deep-active-element";
+import { nextRender } from "../common/util/render-status";
 
 declare global {
   // for fire event
@@ -40,7 +43,17 @@ export interface DialogState {
   dialogParams?: unknown;
 }
 
-const LOADED = {};
+interface LoadedDialogInfo {
+  element: Promise<HassDialog>;
+  closedFocusTargets?: Set<Element>;
+}
+
+interface LoadedDialogsDict {
+  [tag: string]: LoadedDialogInfo;
+}
+
+const LOADED: LoadedDialogsDict = {};
+export const FOCUS_TARGET = Symbol.for("HA focus target");
 
 export const showDialog = async (
   element: HTMLElement & ProvideHassElement,
@@ -60,11 +73,24 @@ export const showDialog = async (
       }
       return;
     }
-    LOADED[dialogTag] = dialogImport().then(() => {
-      const dialogEl = document.createElement(dialogTag) as HassDialog;
-      element.provideHass(dialogEl);
-      return dialogEl;
-    });
+    LOADED[dialogTag] = {
+      element: dialogImport().then(() => {
+        const dialogEl = document.createElement(dialogTag) as HassDialog;
+        element.provideHass(dialogEl);
+        return dialogEl;
+      }),
+    };
+  }
+
+  // Get the focus targets after the dialog closes, but keep the original if dialog is being replaced
+  if (mainWindow.history.state?.replaced) {
+    LOADED[dialogTag].closedFocusTargets =
+      LOADED[mainWindow.history.state.dialog].closedFocusTargets;
+  } else {
+    LOADED[dialogTag].closedFocusTargets = ancestorsWithProperty(
+      deepActiveElement(),
+      FOCUS_TARGET
+    );
   }
 
   if (addHistory) {
@@ -93,25 +119,29 @@ export const showDialog = async (
       );
     }
   }
-  const dialogElement = await LOADED[dialogTag];
+
+  const dialogElement = await LOADED[dialogTag].element;
+  dialogElement.addEventListener("dialog-closed", _handleClosedFocus);
+
   // Append it again so it's the last element in the root,
   // so it's guaranteed to be on top of the other elements
   root.appendChild(dialogElement);
   dialogElement.showDialog(dialogParams);
 };
 
-export const replaceDialog = () => {
+export const replaceDialog = (dialogElement: HassDialog) => {
   mainWindow.history.replaceState(
     { ...mainWindow.history.state, replaced: true },
     ""
   );
+  dialogElement.removeEventListener("dialog-closed", _handleClosedFocus);
 };
 
 export const closeDialog = async (dialogTag: string): Promise<boolean> => {
   if (!(dialogTag in LOADED)) {
     return true;
   }
-  const dialogElement: HassDialog = await LOADED[dialogTag];
+  const dialogElement = await LOADED[dialogTag].element;
   if (dialogElement.closeDialog) {
     return dialogElement.closeDialog() !== false;
   }
@@ -137,3 +167,33 @@ export const makeDialogManager = (
     }
   );
 };
+
+const _handleClosedFocus = async (ev: HASSDomEvent<DialogClosedParams>) => {
+  const closedFocusTargets = LOADED[ev.detail.dialog].closedFocusTargets;
+  delete LOADED[ev.detail.dialog].closedFocusTargets;
+  if (!closedFocusTargets) return;
+
+  // Undo whatever the browser focused to provide easy checking
+  let focusedElement = deepActiveElement();
+  if (focusedElement instanceof HTMLElement) focusedElement.blur();
+
+  // Make sure backdrop is fully updated before trying (especially needed for underlay dialogs)
+  await nextRender();
+
+  // Try all targets in order and stop when one works
+  for (const focusTarget of closedFocusTargets) {
+    if (focusTarget instanceof HTMLElement) {
+      focusTarget.focus();
+      focusedElement = deepActiveElement();
+      if (focusedElement && focusedElement !== document.body) return;
+    }
+  }
+
+  if (__DEV__) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "Failed to focus any targets after closing dialog: %o",
+      closedFocusTargets
+    );
+  }
+};

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -295,7 +295,7 @@ export class MoreInfoDialog extends LitElement {
   }
 
   private _gotoSettings() {
-    replaceDialog();
+    replaceDialog(this);
     showEntityEditorDialog(this, {
       entity_id: this._entityId!,
     });

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -147,8 +147,7 @@ export class MoreInfoLogbook extends LitElement {
           this.hass,
           lastDate.toISOString(),
           now.toISOString(),
-          this.entityId,
-          true
+          this.entityId
         ),
         this.hass.user?.is_admin ? loadTraceContexts(this.hass) : {},
         this._fetchUserPromise,

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -17,6 +17,7 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../../common/config/can_show_page";
 import { componentsWithService } from "../../common/config/components_with_service";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -24,7 +25,7 @@ import { domainIcon } from "../../common/entity/domain_icon";
 import { navigate } from "../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import {
-  defaultFuzzyFilterSort,
+  fuzzyFilterSort,
   ScorableTextItem,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
@@ -33,6 +34,7 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import "../../components/ha-textfield";
+import { fetchHassioSupervisorInfo } from "../../data/hassio/supervisor";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
@@ -245,9 +247,10 @@ export class QuickBar extends LitElement {
     `;
   }
 
-  private _initializeItemsIfNeeded() {
+  private async _initializeItemsIfNeeded() {
     if (this._commandMode) {
-      this._commandItems = this._commandItems || this._generateCommandItems();
+      this._commandItems =
+        this._commandItems || (await this._generateCommandItems());
     } else {
       this._entityItems = this._entityItems || this._generateEntityItems();
     }
@@ -485,11 +488,11 @@ export class QuickBar extends LitElement {
       );
   }
 
-  private _generateCommandItems(): CommandItem[] {
+  private async _generateCommandItems(): Promise<CommandItem[]> {
     return [
       ...this._generateReloadCommands(),
       ...this._generateServerControlCommands(),
-      ...this._generateNavigationCommands(),
+      ...(await this._generateNavigationCommands()),
     ].sort((a, b) =>
       caseInsensitiveStringCompare(a.strings.join(" "), b.strings.join(" "))
     );
@@ -578,11 +581,40 @@ export class QuickBar extends LitElement {
     });
   }
 
-  private _generateNavigationCommands(): CommandItem[] {
+  private async _generateNavigationCommands(): Promise<CommandItem[]> {
     const panelItems = this._generateNavigationPanelCommands();
     const sectionItems = this._generateNavigationConfigSectionCommands();
+    const supervisorItems: BaseNavigationCommand[] = [];
+    if (isComponentLoaded(this.hass, "hassio")) {
+      const supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+      supervisorItems.push({
+        path: "/hassio/store",
+        primaryText: this.hass.localize(
+          "ui.dialogs.quick-bar.commands.navigation.addon_store"
+        ),
+      });
+      supervisorItems.push({
+        path: "/hassio/dashboard",
+        primaryText: this.hass.localize(
+          "ui.dialogs.quick-bar.commands.navigation.addon_dashboard"
+        ),
+      });
+      for (const addon of supervisorInfo.addons) {
+        supervisorItems.push({
+          path: `/hassio/addon/${addon.slug}`,
+          primaryText: this.hass.localize(
+            "ui.dialogs.quick-bar.commands.navigation.addon_info",
+            { addon: addon.name }
+          ),
+        });
+      }
+    }
 
-    return this._finalizeNavigationCommands([...panelItems, ...sectionItems]);
+    return this._finalizeNavigationCommands([
+      ...panelItems,
+      ...sectionItems,
+      ...supervisorItems,
+    ]);
   }
 
   private _generateNavigationPanelCommands(): BaseNavigationCommand[] {
@@ -610,20 +642,14 @@ export class QuickBar extends LitElement {
         if (!canShowPage(this.hass, page)) {
           continue;
         }
-        if (!page.component) {
-          continue;
-        }
+
         const info = this._getNavigationInfoFromConfig(page);
 
         if (!info) {
           continue;
         }
         // Add to list, but only if we do not already have an entry for the same path and component
-        if (
-          items.some(
-            (e) => e.path === info.path && e.component === info.component
-          )
-        ) {
+        if (items.some((e) => e.path === info.path)) {
           continue;
         }
 
@@ -637,14 +663,19 @@ export class QuickBar extends LitElement {
   private _getNavigationInfoFromConfig(
     page: PageNavigation
   ): NavigationInfo | undefined {
-    if (!page.component) {
-      return undefined;
-    }
-    const caption = this.hass.localize(
-      `ui.dialogs.quick-bar.commands.navigation.${page.component}`
-    );
+    const path = page.path.substring(1);
 
-    if (page.translationKey && caption) {
+    let name = path.substring(path.indexOf("/") + 1);
+    name = name.indexOf("/") > -1 ? name.substring(0, name.indexOf("/")) : name;
+
+    const caption =
+      (name &&
+        this.hass.localize(
+          `ui.dialogs.quick-bar.commands.navigation.${name}`
+        )) ||
+      (page.translationKey && this.hass.localize(page.translationKey));
+
+    if (caption) {
       return { ...page, primaryText: caption };
     }
 
@@ -694,7 +725,7 @@ export class QuickBar extends LitElement {
 
   private _filterItems = memoizeOne(
     (items: QuickBarItem[], filter: string): QuickBarItem[] =>
-      defaultFuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
+      fuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
   );
 
   static get styles() {

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -0,0 +1,224 @@
+import "@material/mwc-button";
+import "@material/mwc-list/mwc-list-item";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { fireEvent } from "../../../common/dom/fire_event";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-combo-box";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-textfield";
+import {
+  fetchApplicationCredentialsConfig,
+  createApplicationCredential,
+  ApplicationCredential,
+} from "../../../data/application_credential";
+import { domainToName } from "../../../data/integration";
+import { PolymerChangedEvent } from "../../../polymer-types";
+import { haStyleDialog } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
+
+interface Domain {
+  id: string;
+  name: string;
+}
+
+const rowRenderer: ComboBoxLitRenderer<Domain> = (item) => html`<mwc-list-item>
+  <span>${item.name}</span>
+</mwc-list-item>`;
+
+@customElement("dialog-add-application-credential")
+export class DialogAddApplicationCredential extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _loading = false;
+
+  // Error message when can't talk to server etc
+  @state() private _error?: string;
+
+  @state() private _params?: AddApplicationCredentialDialogParams;
+
+  @state() private _domain?: string;
+
+  @state() private _clientId?: string;
+
+  @state() private _clientSecret?: string;
+
+  @state() private _domains?: Domain[];
+
+  public showDialog(params: AddApplicationCredentialDialogParams) {
+    this._params = params;
+    this._domain = "";
+    this._clientId = "";
+    this._clientSecret = "";
+    this._error = undefined;
+    this._loading = false;
+    this._fetchConfig();
+  }
+
+  private async _fetchConfig() {
+    const config = await fetchApplicationCredentialsConfig(this.hass);
+    this._domains = config.domains.map((domain) => ({
+      id: domain,
+      name: domainToName(this.hass.localize, domain),
+    }));
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params || !this._domains) {
+      return html``;
+    }
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(
+            "ui.panel.config.application_credentials.editor.caption"
+          )
+        )}
+      >
+        <div>
+          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          <ha-combo-box
+            name="domain"
+            .hass=${this.hass}
+            .label=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.domain"
+            )}
+            .value=${this._domain}
+            .renderer=${rowRenderer}
+            .items=${this._domains}
+            item-id-path="id"
+            item-value-path="id"
+            item-label-path="name"
+            required
+            @value-changed=${this._handleDomainPicked}
+          ></ha-combo-box>
+          <ha-textfield
+            class="clientId"
+            name="clientId"
+            .label=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.client_id"
+            )}
+            .value=${this._clientId}
+            required
+            @input=${this._handleValueChanged}
+            error-message=${this.hass.localize("ui.common.error_required")}
+            dialogInitialFocus
+          ></ha-textfield>
+          <ha-textfield
+            .label=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.client_secret"
+            )}
+            type="password"
+            name="clientSecret"
+            .value=${this._clientSecret}
+            required
+            @input=${this._handleValueChanged}
+            error-message=${this.hass.localize("ui.common.error_required")}
+          ></ha-textfield>
+        </div>
+        ${this._loading
+          ? html`
+              <div slot="primaryAction" class="submit-spinner">
+                <ha-circular-progress active></ha-circular-progress>
+              </div>
+            `
+          : html`
+              <mwc-button
+                slot="primaryAction"
+                .disabled=${!this._domain ||
+                !this._clientId ||
+                !this._clientSecret}
+                @click=${this._createApplicationCredential}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.application_credentials.editor.create"
+                )}
+              </mwc-button>
+            `}
+      </ha-dialog>
+    `;
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    this._domains = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private async _handleDomainPicked(ev: PolymerChangedEvent<string>) {
+    const target = ev.target as any;
+    if (target.selectedItem) {
+      this._domain = target.selectedItem.id;
+    }
+  }
+
+  private _handleValueChanged(ev: CustomEvent) {
+    this._error = undefined;
+    const name = (ev.target as any).name;
+    const value = (ev.target as any).value;
+    this[`_${name}`] = value;
+  }
+
+  private async _createApplicationCredential(ev) {
+    ev.preventDefault();
+    if (!this._domain || !this._clientId || !this._clientSecret) {
+      return;
+    }
+
+    this._loading = true;
+    this._error = "";
+
+    let applicationCredential: ApplicationCredential;
+    try {
+      applicationCredential = await createApplicationCredential(
+        this.hass,
+        this._domain,
+        this._clientId,
+        this._clientSecret
+      );
+    } catch (err: any) {
+      this._loading = false;
+      this._error = err.message;
+      return;
+    }
+    this._params!.applicationCredentialAddedCallback(applicationCredential);
+    this.closeDialog();
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --mdc-dialog-max-width: 500px;
+          --dialog-z-index: 10;
+        }
+        .row {
+          display: flex;
+          padding: 8px 0;
+        }
+        ha-combo-box {
+          display: block;
+          margin-bottom: 24px;
+        }
+        ha-textfield {
+          display: block;
+          margin-bottom: 24px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-add-application-credential": DialogAddApplicationCredential;
+  }
+}

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -0,0 +1,259 @@
+import { mdiDelete, mdiPlus } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
+import type { HASSDomEvent } from "../../../common/dom/fire_event";
+import { LocalizeFunc } from "../../../common/translations/localize";
+import {
+  DataTableColumnContainer,
+  SelectionChangedEvent,
+} from "../../../components/data-table/ha-data-table";
+import "../../../components/data-table/ha-data-table-icon";
+import "../../../components/ha-fab";
+import "../../../components/ha-help-tooltip";
+import "../../../components/ha-svg-icon";
+import {
+  ApplicationCredential,
+  deleteApplicationCredential,
+  fetchApplicationCredentials,
+} from "../../../data/application_credential";
+import { domainToName } from "../../../data/integration";
+import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import "../../../layouts/hass-tabs-subpage-data-table";
+import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
+import { HomeAssistant, Route } from "../../../types";
+import { configSections } from "../ha-panel-config";
+import { showAddApplicationCredentialDialog } from "./show-dialog-add-application-credential";
+
+@customElement("ha-config-application-credentials")
+export class HaConfigApplicationCredentials extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() public _applicationCredentials: ApplicationCredential[] = [];
+
+  @property() public isWide!: boolean;
+
+  @property() public narrow!: boolean;
+
+  @property() public route!: Route;
+
+  @state() private _selected: string[] = [];
+
+  @query("hass-tabs-subpage-data-table", true)
+  private _dataTable!: HaTabsSubpageDataTable;
+
+  private _columns = memoizeOne(
+    (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
+      const columns: DataTableColumnContainer<ApplicationCredential> = {
+        clientId: {
+          title: localize(
+            "ui.panel.config.application_credentials.picker.headers.client_id"
+          ),
+          width: "25%",
+          direction: "asc",
+          grows: true,
+          template: (_, entry: ApplicationCredential) =>
+            html`${entry.client_id}`,
+        },
+        application: {
+          title: localize(
+            "ui.panel.config.application_credentials.picker.headers.application"
+          ),
+          sortable: true,
+          width: "20%",
+          direction: "asc",
+          hidden: narrow,
+          template: (_, entry) => html`${domainToName(localize, entry.domain)}`,
+        },
+      };
+
+      return columns;
+    }
+  );
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    this._loadTranslations();
+    this._fetchApplicationCredentials();
+  }
+
+  protected render() {
+    return html`
+      <hass-tabs-subpage-data-table
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+        backPath="/config"
+        .tabs=${configSections.devices}
+        .columns=${this._columns(this.narrow, this.hass.localize)}
+        .data=${this._applicationCredentials}
+        hasFab
+        selectable
+        @selection-changed=${this._handleSelectionChanged}
+      >
+        ${this._selected.length
+          ? html`
+              <div
+                class=${classMap({
+                  "header-toolbar": this.narrow,
+                  "table-header": !this.narrow,
+                })}
+                slot="header"
+              >
+                <p class="selected-txt">
+                  ${this.hass.localize(
+                    "ui.panel.config.application_credentials.picker.selected",
+                    "number",
+                    this._selected.length
+                  )}
+                </p>
+                <div class="header-btns">
+                  ${!this.narrow
+                    ? html`
+                        <mwc-button
+                          @click=${this._removeSelected}
+                          class="warning"
+                          >${this.hass.localize(
+                            "ui.panel.config.application_credentials.picker.remove_selected.button"
+                          )}</mwc-button
+                        >
+                      `
+                    : html`
+                        <ha-icon-button
+                          class="warning"
+                          id="remove-btn"
+                          @click=${this._removeSelected}
+                          .path=${mdiDelete}
+                          .label=${this.hass.localize("ui.common.remove")}
+                        ></ha-icon-button>
+                        <ha-help-tooltip
+                          .label=${this.hass.localize(
+                            "ui.panel.config.application_credentials.picker.remove_selected.button"
+                          )}
+                        >
+                        </ha-help-tooltip>
+                      `}
+                </div>
+              </div>
+            `
+          : html``}
+        <ha-fab
+          slot="fab"
+          .label=${this.hass.localize(
+            "ui.panel.config.application_credentials.picker.add_application_credential"
+          )}
+          extended
+          @click=${this._addApplicationCredential}
+        >
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-fab>
+      </hass-tabs-subpage-data-table>
+    `;
+  }
+
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selected = ev.detail.value;
+  }
+
+  private _removeSelected() {
+    showConfirmationDialog(this, {
+      title: this.hass.localize(
+        `ui.panel.config.application_credentials.picker.remove_selected.confirm_title`,
+        "number",
+        this._selected.length
+      ),
+      text: this.hass.localize(
+        "ui.panel.config.application_credentials.picker.remove_selected.confirm_text"
+      ),
+      confirmText: this.hass.localize("ui.common.remove"),
+      dismissText: this.hass.localize("ui.common.cancel"),
+      confirm: async () => {
+        await Promise.all(
+          this._selected.map(async (applicationCredential) => {
+            await deleteApplicationCredential(this.hass, applicationCredential);
+          })
+        );
+        this._dataTable.clearSelection();
+        this._fetchApplicationCredentials();
+      },
+    });
+  }
+
+  private async _loadTranslations() {
+    await this.hass.loadBackendTranslation("title", undefined, true);
+  }
+
+  private async _fetchApplicationCredentials() {
+    this._applicationCredentials = await fetchApplicationCredentials(this.hass);
+  }
+
+  private _addApplicationCredential() {
+    showAddApplicationCredentialDialog(this, {
+      applicationCredentialAddedCallback: async (
+        applicationCredential: ApplicationCredential
+      ) => {
+        if (applicationCredential) {
+          this._applicationCredentials = [
+            ...this._applicationCredentials,
+            applicationCredential,
+          ];
+        }
+      },
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .table-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 56px;
+        background-color: var(--mdc-text-field-fill-color, whitesmoke);
+        border-bottom: 1px solid
+          var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
+        box-sizing: border-box;
+      }
+      .header-toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        color: var(--secondary-text-color);
+        position: relative;
+        top: -4px;
+      }
+      .selected-txt {
+        font-weight: bold;
+        padding-left: 16px;
+      }
+      .table-header .selected-txt {
+        margin-top: 20px;
+      }
+      .header-toolbar .selected-txt {
+        font-size: 16px;
+      }
+      .header-toolbar .header-btns {
+        margin-right: -12px;
+      }
+      .header-btns {
+        display: flex;
+      }
+      .header-btns > mwc-button,
+      .header-btns > ha-icon-button {
+        margin: 8px;
+      }
+      ha-button-menu {
+        margin-left: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-application-credentials": HaConfigApplicationCredentials;
+  }
+}

src/panels/config/application_credentials/show-dialog-add-application-credential.ts

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../common/dom/fire_event";
+import { ApplicationCredential } from "../../../data/application_credential";
+
+export interface AddApplicationCredentialDialogParams {
+  applicationCredentialAddedCallback: (
+    applicationCredential: ApplicationCredential
+  ) => void;
+}
+
+export const loadAddApplicationCredentialDialog = () =>
+  import("./dialog-add-application-credential");
+
+export const showAddApplicationCredentialDialog = (
+  element: HTMLElement,
+  dialogParams: AddApplicationCredentialDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-add-application-credential",
+    dialogImport: loadAddApplicationCredentialDialog,
+    dialogParams,
+  });
+};

src/panels/config/areas/ha-config-area-page.ts

@@ -259,6 +259,7 @@ class HaConfigAreaPage extends LitElement {
                   <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
                 </mwc-button>`}
             <ha-card
+              outlined
               .header=${this.hass.localize("ui.panel.config.devices.caption")}
               >${devices.length
                 ? devices.map(
@@ -281,6 +282,7 @@ class HaConfigAreaPage extends LitElement {
                   `}
             </ha-card>
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.areas.editor.linked_entities_caption"
               )}
@@ -314,6 +316,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "automation")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.automation.automations_heading"
                     )}
@@ -361,6 +364,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "scene")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.scene.scenes_heading"
                     )}
@@ -400,6 +404,7 @@ class HaConfigAreaPage extends LitElement {
             ${isComponentLoaded(this.hass, "script")
               ? html`
                   <ha-card
+                    outlined
                     .header=${this.hass.localize(
                       "ui.panel.config.devices.script.scripts_heading"
                     )}

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -164,7 +164,7 @@ export default class HaAutomationActionRow extends LitElement {
     const yamlMode = this._yamlMode;
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this.action.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(
@@ -460,17 +460,13 @@ export default class HaAutomationActionRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
         .card-menu {
-          float: right;
+          float: var(--float-end, right);
           z-index: 3;
           margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;
         }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          right: initial;
-          left: 16px;
-        }
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }

src/panels/config/automation/action/ha-automation-action.ts

@@ -1,3 +1,4 @@
+import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -32,7 +33,7 @@ export default class HaAutomationAction extends LitElement {
           ></ha-automation-action-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addAction}>
             ${this.hass.localize(
@@ -83,7 +84,7 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.actions.concat(this.actions[index]),
+      value: this.actions.concat(deepClone(this.actions[index])),
     });
   }
 

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -69,7 +69,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addOption}>
             ${this.hass.localize(

src/panels/config/automation/blueprint-automation-editor.ts

@@ -75,7 +75,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(
@@ -145,6 +145,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
       </ha-config-section>
 
       <ha-card
+        outlined
         class="blueprint"
         .header=${this.hass.localize(
           "ui.panel.config.automation.editor.blueprint.header"

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -5,7 +5,6 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
-import "../../../../components/ha-card";
 import "../../../../components/ha-select";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-yaml-editor";

src/panels/config/automation/condition/ha-automation-condition-row.ts

@@ -67,7 +67,7 @@ export default class HaAutomationConditionRow extends LitElement {
       return html``;
     }
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this.condition.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(
@@ -288,16 +288,13 @@ export default class HaAutomationConditionRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
         .card-menu {
-          float: right;
+          float: var(--float-end, right);
           z-index: 3;
           margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;
         }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          float: left;
-        }
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -1,3 +1,4 @@
+import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -56,7 +57,7 @@ export default class HaAutomationCondition extends LitElement {
           ></ha-automation-condition-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addCondition}>
             ${this.hass.localize(
@@ -96,7 +97,7 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.conditions.concat(this.conditions[index]),
+      value: this.conditions.concat(deepClone(this.conditions[index])),
     });
   }
 

src/panels/config/automation/dialog-new-automation.ts

@@ -3,7 +3,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-blueprint-picker";
-import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import { showAutomationEditor } from "../../../data/automation";

src/panels/config/automation/ha-automation-editor.ts

@@ -239,8 +239,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                   ? html`
                       ${!this.narrow
                         ? html`
-                            <ha-card
-                              ><div class="card-header">
+                            <ha-card outlined>
+                              <div class="card-header">
                                 ${this._config.alias}
                               </div>
                               ${stateObj
@@ -275,8 +275,8 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         .defaultValue=${this._preprocessYaml()}
                         @value-changed=${this._yamlChanged}
                       ></ha-yaml-editor>
-                      <ha-card
-                        ><div class="card-actions">
+                      <ha-card outlined>
+                        <div class="card-actions">
                           <mwc-button @click=${this._copyYaml}>
                             ${this.hass.localize(
                               "ui.panel.config.automation.editor.copy_to_clipboard"

src/panels/config/automation/manual-automation-editor.ts

@@ -47,7 +47,7 @@ export class HaManualAutomationEditor extends LitElement {
             "ui.panel.config.automation.editor.introduction"
           )}
         </span>
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <ha-textfield
               .label=${this.hass.localize(

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -127,7 +127,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     const showId = "id" in this.trigger || this._requestShowId;
 
     return html`
-      <ha-card>
+      <ha-card outlined>
         ${this.trigger.enabled === false
           ? html`<div class="disabled-bar">
               ${this.hass.localize(
@@ -487,16 +487,13 @@ export default class HaAutomationTriggerRow extends LitElement {
           border-top-left-radius: var(--ha-card-border-radius);
         }
         .card-menu {
-          float: right;
+          float: var(--float-end, right);
           z-index: 3;
           margin: 4px;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
           display: flex;
           align-items: center;
         }
-        :host-context([style*="direction: rtl;"]) .card-menu {
-          float: left;
-        }
         .triggered {
           cursor: pointer;
           position: absolute;

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -1,3 +1,4 @@
+import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -27,7 +28,7 @@ export default class HaAutomationTrigger extends LitElement {
           ></ha-automation-trigger-row>
         `
       )}
-      <ha-card>
+      <ha-card outlined>
         <div class="card-actions add-card">
           <mwc-button @click=${this._addTrigger}>
             ${this.hass.localize(
@@ -67,7 +68,7 @@ export default class HaAutomationTrigger extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.triggers.concat(this.triggers[index]),
+      value: this.triggers.concat(deepClone(this.triggers[index])),
     });
   }
 

src/panels/config/automation/trigger/types/ha-automation-trigger-calendar.ts

@@ -5,7 +5,9 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { CalendarTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import type { TriggerElement } from "../ha-automation-trigger-row";
+import type { HaDurationData } from "../../../../../components/ha-duration-input";
 import type { HaFormSchema } from "../../../../../components/ha-form/types";
+import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 
 @customElement("ha-automation-trigger-calendar")
@@ -39,20 +41,57 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
         ],
       ],
     },
+    { name: "offset", selector: { duration: {} } },
+    {
+      name: "offset_type",
+      type: "select",
+      required: true,
+      options: [
+        [
+          "before",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.calendar.before"
+          ),
+        ],
+        [
+          "after",
+          localize(
+            "ui.panel.config.automation.editor.triggers.type.calendar.after"
+          ),
+        ],
+      ],
+    },
   ]);
 
   public static get defaultConfig() {
     return {
       event: "start" as CalendarTrigger["event"],
+      offset: 0,
     };
   }
 
   protected render() {
     const schema = this._schema(this.hass.localize);
+    // Convert from string representation to ha form duration representation
+    const trigger_offset = this.trigger.offset;
+    const duration: HaDurationData = createDurationData(trigger_offset)!;
+    let offset_type = "after";
+    if (
+      (typeof trigger_offset === "object" && duration!.hours! < 0) ||
+      (typeof trigger_offset === "string" && trigger_offset.startsWith("-"))
+    ) {
+      duration.hours = Math.abs(duration.hours!);
+      offset_type = "before";
+    }
+    const data = {
+      ...this.trigger,
+      offset: duration,
+      offset_type: offset_type,
+    };
     return html`
       <ha-form
         .schema=${schema}
-        .data=${this.trigger}
+        .data=${data}
         .hass=${this.hass}
         .computeLabel=${this._computeLabelCallback}
         @value-changed=${this._valueChanged}
@@ -62,7 +101,14 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
 
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    const newTrigger = ev.detail.value;
+    // Convert back to duration string representation
+    const duration = ev.detail.value.offset;
+    const offsetType = ev.detail.value.offset_type === "before" ? "-" : "";
+    const newTrigger = {
+      ...ev.detail.value,
+      offset: `${offsetType}${duration.hours}:${duration.minutes}:${duration.seconds}`,
+    };
+    delete newTrigger.offset_type;
     fireEvent(this, "value-changed", { value: newTrigger });
   }
 

src/panels/config/cloud/account/cloud-account.ts

@@ -1,26 +1,28 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import type { ActionDetail } from "@material/mwc-list";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { LitElement, css, html, PropertyValues } from "lit";
+import "@polymer/paper-item/paper-item-body";
+import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
+import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/buttons/ha-call-api-button";
-import "../../../../components/ha-card";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
-import { debounce } from "../../../../common/util/debounce";
 import {
   cloudLogout,
   CloudStatusLoggedIn,
   fetchCloudSubscriptionInfo,
   SubscriptionInfo,
 } from "../../../../data/cloud";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-subpage";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
 import "../../ha-config-section";
 import "./cloud-alexa-pref";
@@ -28,8 +30,6 @@ import "./cloud-google-pref";
 import "./cloud-remote-pref";
 import "./cloud-tts-pref";
 import "./cloud-webhooks";
-import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
-import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 
 @customElement("cloud-account")
 export class CloudAccount extends SubscribeMixin(LitElement) {
@@ -81,6 +81,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
             </div>
 
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.account.nabu_casa_account"
               )}
@@ -210,6 +211,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
 
             <cloud-webhooks
               .hass=${this.hass}
+              .narrow=${this.narrow}
               .cloudStatus=${this.cloudStatus}
               dir=${this._rtlDirection}
             ></cloud-webhooks>

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -26,6 +26,7 @@ export class CloudAlexaPref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass!.localize(
           "ui.panel.config.cloud.account.alexa.title"
         )}

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -31,6 +31,7 @@ export class CloudGooglePref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass.localize(
           "ui.panel.config.cloud.account.google.title"
         )}

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,9 +1,11 @@
 import "@material/mwc-button";
+import { mdiContentCopy } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-card";
+import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
 // eslint-disable-next-line
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -13,6 +15,7 @@ import {
   disconnectCloudRemote,
 } from "../../../../data/cloud";
 import type { HomeAssistant } from "../../../../types";
+import { showToast } from "../../../../util/toast";
 import { showCloudCertificateDialog } from "../dialog-cloud-certificate/show-dialog-cloud-certificate";
 
 @customElement("cloud-remote-pref")
@@ -34,6 +37,7 @@ export class CloudRemotePref extends LitElement {
     if (!remote_certificate) {
       return html`
         <ha-card
+          outlined
           header=${this.hass.localize(
             "ui.panel.config.cloud.account.remote.title"
           )}
@@ -47,8 +51,14 @@ export class CloudRemotePref extends LitElement {
       `;
     }
 
+    const urlParts = remote_domain!.split(".");
+    const hiddenURL = `https://${urlParts[0].substring(0, 5)}***.${
+      urlParts[1]
+    }.${urlParts[2]}.${urlParts[3]}`;
+
     return html`
       <ha-card
+        outlined
         header=${this.hass.localize(
           "ui.panel.config.cloud.account.remote.title"
         )}
@@ -83,8 +93,13 @@ export class CloudRemotePref extends LitElement {
             class="break-word"
             rel="noreferrer"
           >
-            https://${remote_domain}</a
+            ${hiddenURL}</a
           >.
+          <ha-svg-icon
+            .url=${`https://${remote_domain}`}
+            .path=${mdiContentCopy}
+            @click=${this._copyURL}
+          ></ha-svg-icon>
         </div>
         <div class="card-actions">
           <a
@@ -131,6 +146,14 @@ export class CloudRemotePref extends LitElement {
     }
   }
 
+  private async _copyURL(ev): Promise<void> {
+    const url = ev.currentTarget.url;
+    await copyToClipboard(url);
+    showToast(this, {
+      message: this.hass.localize("ui.common.copied_clipboard"),
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .preparing {
@@ -152,9 +175,6 @@ export class CloudRemotePref extends LitElement {
         font-weight: bold;
         margin-bottom: 1em;
       }
-      .warning ha-svg-icon {
-        color: var(--warning-color);
-      }
       .break-word {
         overflow-wrap: break-word;
       }
@@ -176,6 +196,11 @@ export class CloudRemotePref extends LitElement {
       .spacer {
         flex-grow: 1;
       }
+      ha-svg-icon {
+        --mdc-icon-size: 18px;
+        color: var(--secondary-text-color);
+        cursor: pointer;
+      }
     `;
   }
 }

src/panels/config/cloud/account/cloud-tts-pref.ts

@@ -44,6 +44,7 @@ export class CloudTTSPref extends LitElement {
 
     return html`
       <ha-card
+        outlined
         header=${this.hass.localize("ui.panel.config.cloud.account.tts.title")}
       >
         <div class="card-content">

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -40,6 +40,7 @@ export class CloudWebhooks extends LitElement {
   protected render() {
     return html`
       <ha-card
+        outlined
         header=${this.hass!.localize(
           "ui.panel.config.cloud.account.webhooks.title"
         )}

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -153,7 +153,7 @@ class CloudAlexa extends SubscribeMixin(LitElement) {
       ></ha-icon-button>`;
 
       target.push(html`
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <div class="top-line">
               <state-info

src/panels/config/cloud/forgot-password/cloud-forgot-password.ts

@@ -36,6 +36,7 @@ export class CloudForgotPassword extends LitElement {
       >
         <div class="content">
           <ha-card
+            outlined
             .header=${this.hass.localize(
               "ui.panel.config.cloud.forgot_password.subtitle"
             )}

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -159,7 +159,7 @@ class CloudGoogleAssistant extends SubscribeMixin(LitElement) {
       ></ha-icon-button>`;
 
       target.push(html`
-        <ha-card>
+        <ha-card outlined>
           <div class="card-content">
             <div class="top-line">
               <state-info

src/panels/config/cloud/login/cloud-login.ts

@@ -99,6 +99,7 @@ export class CloudLogin extends LitElement {
               : ""}
 
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.login.sign_in"
               )}
@@ -157,7 +158,7 @@ export class CloudLogin extends LitElement {
               </div>
             </ha-card>
 
-            <ha-card>
+            <ha-card outlined>
               <paper-item @click=${this._handleRegister}>
                 <paper-item-body two-line>
                   ${this.hass.localize(

src/panels/config/cloud/register/cloud-register.ts

@@ -121,6 +121,7 @@ export class CloudRegister extends LitElement {
               </ul>
             </div>
             <ha-card
+              outlined
               .header=${this.hass.localize(
                 "ui.panel.config.cloud.register.create_account"
               )}

src/panels/config/core/ha-config-section-updates.ts

@@ -109,7 +109,11 @@ class HaConfigSectionUpdates extends LitElement {
                     ></ha-config-updates>
                   `
                 : html`
-                    ${this.hass.localize("ui.panel.config.updates.no_updates")}
+                    <div class="no-updates">
+                      ${this.hass.localize(
+                        "ui.panel.config.updates.no_updates"
+                      )}
+                    </div>
                   `}
             </div>
           </ha-card>
@@ -196,6 +200,10 @@ class HaConfigSectionUpdates extends LitElement {
       display: flex;
       justify-content: space-between;
       flex-direction: column;
+      padding: 0;
+    }
+
+    .no-updates {
       padding: 16px;
     }
   `;

src/panels/config/core/ha-config-system-navigation.ts

@@ -1,9 +1,21 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { canShowPage } from "../../../common/config/can_show_page";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { relativeTime } from "../../../common/datetime/relative_time";
 import "../../../components/ha-card";
 import "../../../components/ha-navigation-list";
-import { CloudStatus } from "../../../data/cloud";
+import "../../../components/ha-tip";
+import { BackupContent, fetchBackupInfo } from "../../../data/backup";
+import { CloudStatus, fetchCloudStatus } from "../../../data/cloud";
+import { BOARD_NAMES } from "../../../data/hardware";
+import { fetchHassioBackups, HassioBackup } from "../../../data/hassio/backup";
+import {
+  fetchHassioHassOsInfo,
+  fetchHassioHostInfo,
+  HassioHassOSInfo,
+  HassioHostInfo,
+} from "../../../data/hassio/host";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -27,15 +39,80 @@ class HaConfigSystemNavigation extends LitElement {
 
   @property({ type: Boolean }) public showAdvanced!: boolean;
 
+  @state() private _latestBackupDate?: string;
+
+  @state() private _boardName?: string;
+
+  @state() private _storageInfo?: { used: number; free: number; total: number };
+
+  @state() private _externalAccess = false;
+
   protected render(): TemplateResult {
     const pages = configSections.general
       .filter((page) => canShowPage(this.hass, page))
-      .map((page) => ({
-        ...page,
-        name: page.translationKey
-          ? this.hass.localize(page.translationKey)
-          : page.name,
-      }));
+      .map((page) => {
+        let description = "";
+
+        switch (page.translationKey) {
+          case "backup":
+            description = this._latestBackupDate
+              ? this.hass.localize(
+                  "ui.panel.config.backup.description",
+                  "relative_time",
+                  relativeTime(
+                    new Date(this._latestBackupDate),
+                    this.hass.locale
+                  )
+                )
+              : this.hass.localize(
+                  "ui.panel.config.backup.description_no_backup"
+                );
+            break;
+          case "network":
+            description = this.hass.localize(
+              "ui.panel.config.network.description",
+              "state",
+              this._externalAccess
+                ? this.hass.localize("ui.panel.config.network.enabled")
+                : this.hass.localize("ui.panel.config.network.disabled")
+            );
+            break;
+          case "storage":
+            description = this._storageInfo
+              ? this.hass.localize(
+                  "ui.panel.config.storage.description",
+                  "percent_used",
+                  `${Math.round(
+                    (this._storageInfo.used / this._storageInfo.total) * 100
+                  )}%`,
+                  "free_space",
+                  `${this._storageInfo.free} GB`
+                )
+              : "";
+            break;
+          case "hardware":
+            description =
+              this._boardName ||
+              this.hass.localize("ui.panel.config.hardware.description");
+            break;
+
+          default:
+            description = this.hass.localize(
+              `ui.panel.config.${page.translationKey}.description`
+            );
+            break;
+        }
+
+        return {
+          ...page,
+          name: page.translationKey
+            ? this.hass.localize(
+                `ui.panel.config.${page.translationKey}.caption`
+              )
+            : page.name,
+          description,
+        };
+      });
 
     return html`
       <hass-subpage
@@ -59,14 +136,32 @@ class HaConfigSystemNavigation extends LitElement {
               .hass=${this.hass}
               .narrow=${this.narrow}
               .pages=${pages}
+              hasSecondary
             ></ha-navigation-list>
           </ha-card>
-          <div class="yaml-config">Looking for YAML Configuration? It has moved to <a href="/developer-tools/yaml">Developer Tools</a></a></div>
+          ${this.hass.userData?.showAdvanced
+            ? html`<ha-tip>
+                Looking for YAML Configuration? It has moved to
+                <a href="/developer-tools/yaml">Developer Tools</a>
+              </ha-tip>`
+            : ""}
         </ha-config-section>
       </hass-subpage>
     `;
   }
 
+  protected firstUpdated(_changedProperties): void {
+    super.firstUpdated(_changedProperties);
+
+    this._fetchNetworkStatus();
+    const isHassioLoaded = isComponentLoaded(this.hass, "hassio");
+    this._fetchBackupInfo(isHassioLoaded);
+    if (isHassioLoaded) {
+      this._fetchHardwareInfo();
+      this._fetchStorageInfo();
+    }
+  }
+
   private _restart() {
     showConfirmationDialog(this, {
       title: this.hass.localize(
@@ -91,6 +186,49 @@ class HaConfigSystemNavigation extends LitElement {
     });
   }
 
+  private async _fetchBackupInfo(isHassioLoaded: boolean) {
+    const backups: BackupContent[] | HassioBackup[] = isHassioLoaded
+      ? await fetchHassioBackups(this.hass)
+      : isComponentLoaded(this.hass, "backup")
+      ? await fetchBackupInfo(this.hass).then(
+          (backupData) => backupData.backups
+        )
+      : [];
+
+    if (backups.length > 0) {
+      this._latestBackupDate = (backups as any[]).reduce((a, b) =>
+        a.date > b.date ? a : b
+      ).date;
+    }
+  }
+
+  private async _fetchHardwareInfo() {
+    const osData: HassioHassOSInfo = await fetchHassioHassOsInfo(this.hass);
+    if (osData.board) {
+      this._boardName = BOARD_NAMES[osData.board];
+    }
+  }
+
+  private async _fetchStorageInfo() {
+    const hostInfo: HassioHostInfo = await fetchHassioHostInfo(this.hass);
+    this._storageInfo = {
+      used: hostInfo.disk_used,
+      free: hostInfo.disk_free,
+      total: hostInfo.disk_total,
+    };
+  }
+
+  private async _fetchNetworkStatus() {
+    if (isComponentLoaded(this.hass, "cloud")) {
+      const cloudStatus = await fetchCloudStatus(this.hass);
+      if (cloudStatus.logged_in) {
+        this._externalAccess = true;
+        return;
+      }
+    }
+    this._externalAccess = this.hass.config.external_url !== null;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -135,12 +273,9 @@ class HaConfigSystemNavigation extends LitElement {
 
         ha-navigation-list {
           --navigation-list-item-title-font-size: 16px;
-          --navigation-list-item-padding: 4px;
         }
-        .yaml-config {
-          margin-bottom: max(env(safe-area-inset-bottom), 24px);
-          text-align: center;
-          font-style: italic;
+        ha-tip {
+          margin-bottom: max(env(safe-area-inset-bottom), 8px);
         }
       `,
     ];

src/panels/config/dashboard/ha-config-navigation.ts

@@ -6,7 +6,7 @@ import { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-navigation-list";
-import type { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";
+import type { CloudStatus } from "../../../data/cloud";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../../../types";
 
@@ -37,9 +37,7 @@ class HaConfigNavigation extends LitElement {
             ? page.info.logged_in
               ? `
                   ${this.hass.localize(
-                    "ui.panel.config.cloud.description_login",
-                    "email",
-                    (page.info as CloudStatusLoggedIn).email
+                    "ui.panel.config.cloud.description_login"
                   )}
                 `
               : `

src/panels/config/dashboard/ha-config-updates.ts

@@ -9,6 +9,7 @@ import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
 import type { UpdateEntity } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-circular-progress";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends LitElement {
@@ -51,7 +52,18 @@ class HaConfigUpdates extends LitElement {
                 .title=${entity.attributes.title ||
                 entity.attributes.friendly_name}
                 .stateObj=${entity}
+                class=${this.narrow && entity.attributes.in_progress
+                  ? "updating"
+                  : ""}
               ></state-badge>
+              ${this.narrow && entity.attributes.in_progress
+                ? html`<ha-circular-progress
+                    active
+                    size="small"
+                    slot="graphic"
+                    class="absolute"
+                  ></ha-circular-progress>`
+                : ""}
               <span
                 >${entity.attributes.title ||
                 entity.attributes.friendly_name}</span
@@ -67,7 +79,13 @@ class HaConfigUpdates extends LitElement {
                   : ""}
               </span>
               ${!this.narrow
-                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
+                ? entity.attributes.in_progress
+                  ? html`<ha-circular-progress
+                      active
+                      size="small"
+                      slot="meta"
+                    ></ha-circular-progress>`
+                  : html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
             </mwc-list-item>
           `
@@ -121,6 +139,12 @@ class HaConfigUpdates extends LitElement {
           cursor: pointer;
           font-size: 16px;
         }
+        ha-circular-progress.absolute {
+          position: absolute;
+        }
+        state-badge.updating {
+          opacity: 0.5;
+        }
       `,
     ];
   }

src/panels/config/devices/device-detail/ha-device-actions-card.ts

@@ -1,5 +1,4 @@
 import { customElement } from "lit/decorators";
-import "../../../../components/ha-card";
 import {
   DeviceAction,
   localizeDeviceAutomationAction,

src/panels/config/devices/device-detail/ha-device-automation-card.ts

@@ -1,7 +1,6 @@
 import { css, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/ha-card";
 import "../../../../components/ha-chip";
 import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";

src/panels/config/devices/device-detail/ha-device-conditions-card.ts

@@ -1,5 +1,4 @@
 import { customElement } from "lit/decorators";
-import "../../../../components/ha-card";
 import {
   DeviceCondition,
   localizeDeviceAutomationCondition,

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -62,7 +62,7 @@ export class HaDeviceEntitiesCard extends LitElement {
   protected render(): TemplateResult {
     if (!this.entities.length) {
       return html`
-        <ha-card .header=${this.header}>
+        <ha-card outlined .header=${this.header}>
           <div class="empty card-content">
             ${this.hass.localize("ui.panel.config.devices.entities.none")}
           </div>
@@ -89,7 +89,7 @@ export class HaDeviceEntitiesCard extends LitElement {
     });
 
     return html`
-      <ha-card .header=${this.header}>
+      <ha-card outlined .header=${this.header}>
         <div id="entities" @hass-more-info=${this._overrideMoreInfo}>
           ${shownEntities.map((entry) =>
             this.hass.states[entry.entity_id]

src/panels/config/devices/device-detail/ha-device-info-card.ts

@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../../../../components/ha-card";
 import { AreaRegistryEntry } from "../../../../data/area_registry";
 import {
   computeDeviceName,
@@ -24,6 +25,7 @@ export class HaDeviceCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
+        outlined
         .header=${this.hass.localize(
           "ui.panel.config.devices.device_info",
           "type",
@@ -145,3 +147,9 @@ export class HaDeviceCard extends LitElement {
     ];
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-info-card": HaDeviceCard;
+  }
+}

src/panels/config/devices/ha-config-device-page.ts

@@ -579,7 +579,7 @@ export class HaConfigDevicePage extends LitElement {
             ${
               isComponentLoaded(this.hass, "automation")
                 ? html`
-                    <ha-card>
+                    <ha-card outlined>
                       <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.automation.automations_heading"
@@ -673,7 +673,7 @@ export class HaConfigDevicePage extends LitElement {
             ${
               isComponentLoaded(this.hass, "scene") && entities.length
                 ? html`
-                    <ha-card>
+                    <ha-card outlined>
                       <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.scene.scenes_heading"
@@ -771,7 +771,7 @@ export class HaConfigDevicePage extends LitElement {
               ${
                 isComponentLoaded(this.hass, "script")
                   ? html`
-                      <ha-card>
+                      <ha-card outlined>
                         <h1 class="card-header">
                           ${this.hass.localize(
                             "ui.panel.config.devices.script.scripts_heading"