prevent jumping for outlined

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>

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>
                 `

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,