From 9c42eb5130850d8d43862b363d78849b6526c714 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Mon, 20 Feb 2023 14:41:58 +0100
Subject: [PATCH] Add better focus style for tile card when theme use
 box-shadow (#15476)

---
 src/components/ha-bar-slider.ts            | 1 +
 src/components/ha-bar-switch.ts            | 1 +
 src/panels/lovelace/cards/hui-tile-card.ts | 5 ++++-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ha-bar-slider.ts b/src/components/ha-bar-slider.ts
index 51bd09df6a..5854e06148 100644
--- a/src/components/ha-bar-slider.ts
+++ b/src/components/ha-bar-slider.ts
@@ -280,6 +280,7 @@ export class HaBarSlider extends LitElement {
         width: 100%;
         border-radius: var(--slider-bar-border-radius);
         outline: none;
+        transition: box-shadow 180ms ease-in-out;
       }
       :host(:focus-visible) {
         box-shadow: 0 0 0 2px var(--slider-bar-color);
diff --git a/src/components/ha-bar-switch.ts b/src/components/ha-bar-switch.ts
index c2e6b9d782..59f851923c 100644
--- a/src/components/ha-bar-switch.ts
+++ b/src/components/ha-bar-switch.ts
@@ -106,6 +106,7 @@ export class HaBarSwitch extends LitElement {
         cursor: pointer;
         border-radius: var(--switch-bar-border-radius);
         outline: none;
+        transition: box-shadow 180ms ease-in-out;
       }
       :host(:focus-visible) {
         box-shadow: 0 0 0 2px var(--switch-bar-off-color);
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 25b4eb071f..9f30749c03 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -422,14 +422,17 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         -webkit-tap-highlight-color: transparent;
       }
       ha-card:has(.background:focus-visible) {
+        --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+        --shadow-focus: 0 0 0 1px var(--tile-color);
         border-color: var(--tile-color);
-        box-shadow: 0 0 0 1px var(--tile-color);
+        box-shadow: var(--shadow-default), var(--shadow-focus);
       }
       ha-card {
         --mdc-ripple-color: var(--tile-color);
         height: 100%;
         z-index: 0;
         overflow: hidden;
+        transition: box-shadow 180ms ease-in-out, border-color 180ms ease-in-out;
       }
       ha-card.active {
         --tile-color: var(--state-icon-color);