From 886d14bcf6d155a1f084ba0fe3119e8eac1d808a Mon Sep 17 00:00:00 2001
From: Ludeeus <ludeeus@ludeeus.dev>
Date: Tue, 26 Oct 2021 13:22:41 +0000
Subject: [PATCH] prevent jumping for outlined

---
 gallery/src/demos/demo-ha-chip.ts | 2 +-
 src/components/ha-chip-set.ts     | 4 ++--
 src/components/ha-chip.ts         | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/gallery/src/demos/demo-ha-chip.ts b/gallery/src/demos/demo-ha-chip.ts
index e2b51c1226..d7a8eecffd 100644
--- a/gallery/src/demos/demo-ha-chip.ts
+++ b/gallery/src/demos/demo-ha-chip.ts
@@ -119,7 +119,7 @@ export class DemoHaChip extends LitElement {
         <div class="card-content">
           <ha-chip-set .items=${chips}> </ha-chip-set>
           <ha-chip-set
-            .items=${chips.map((chip) => ({ ...chip, outline: true }))}
+            .items=${chips.map((chip) => ({ ...chip, outlined: true }))}
           >
           </ha-chip-set>
         </div>
diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts
index c7f78a5120..b74609fd55 100644
--- a/src/components/ha-chip-set.ts
+++ b/src/components/ha-chip-set.ts
@@ -23,7 +23,7 @@ export interface HaChipSetItem {
   label?: string;
   leadingIcon?: string;
   trailingIcon?: string;
-  outline?: boolean;
+  outlined?: boolean;
 }
 
 @customElement("ha-chip-set")
@@ -43,7 +43,7 @@ export class HaChipSet extends LitElement {
                     .label=${item.label}
                     .leadingIcon=${item.leadingIcon}
                     .trailingIcon=${item.trailingIcon}
-                    ?outline=${item.outline}
+                    ?outlined=${item.outlined}
                   >
                   </ha-chip>
                 `
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index e0e183e17e..dfdec923ca 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -69,8 +69,9 @@ export class HaChip extends LitElement {
       }
 
       .mdc-chip.outlined {
+        margin: 0 -2px !important;
         border: 2px solid var(--ha-chip-background-color, var(--primary-color));
-        background: var(
+        background-color: var(
           --ha-chip-outlined-background-color,
           var(--card-background-color)
         );
@@ -79,7 +80,6 @@ export class HaChip extends LitElement {
 
       .mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
         margin-left: -12px !important;
-        margin-right: -2px !important;
       }
 
       .mdc-chip.outlined ha-svg-icon,