Merge branch 'dev' into animate-ha-sidebar

src/components/ha-drawer.ts

@@ -90,6 +90,16 @@ export class HaDrawer extends DrawerBase {
         border-color: var(--divider-color, rgba(0, 0, 0, 0.12));
         inset-inline-start: 0 !important;
         inset-inline-end: initial !important;
+        transition-property: transform, width;
+        transition-duration:
+          var(--mdc-drawer-transition-duration, 0.2s),
+          var(--ha-animation-base-duration);
+        transition-timing-function:
+          var(
+            --mdc-drawer-transition-timing-function,
+            cubic-bezier(0.4, 0, 0.2, 1)
+          ),
+          ease;
       }
       .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
         z-index: 200;
@@ -103,6 +113,15 @@ export class HaDrawer extends DrawerBase {
         direction: var(--direction);
         width: 100%;
         box-sizing: border-box;
+        transition:
+          padding-left var(--ha-animation-base-duration) ease,
+          padding-inline-start var(--ha-animation-base-duration) ease;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .mdc-drawer,
+        .mdc-drawer-app-content {
+          transition: none;
+        }
       }
     `,
   ];

src/components/ha-sidebar.ts

@@ -731,6 +731,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           );
           font-size: var(--ha-font-size-xl);
           align-items: center;
+          overflow: hidden;
+          width: calc(56px + var(--safe-area-inset-left, 0px));
           padding-left: calc(
             var(--ha-space-1) + var(--safe-area-inset-left, 0px)
           );
@@ -739,6 +741,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           );
           padding-inline-end: initial;
           padding-top: var(--safe-area-inset-top, 0px);
+          transition: width var(--ha-animation-base-duration) ease;
         }
         :host([expanded]) .menu {
           width: calc(256px + var(--safe-area-inset-left, 0px));
@@ -753,15 +756,28 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           margin-left: 3px;
           margin-inline-start: 3px;
           margin-inline-end: initial;
-          width: 100%;
-          display: none;
+          flex: 1;
+          min-width: 0;
+          max-width: 0;
+          opacity: 0;
+          transform: translateX(-4px);
+          transition:
+            max-width var(--ha-animation-base-duration) ease,
+            opacity var(--ha-animation-base-duration) ease,
+            transform var(--ha-animation-base-duration) ease;
         }
         :host([narrow]) .title {
           margin: 0;
           padding: 0 var(--ha-space-4);
         }
         :host([expanded]) .title {
-          display: initial;
+          max-width: 100%;
+          opacity: 1;
+          transform: none;
+          transition-delay: 0ms, 80ms, 80ms;
+        }
+        :host(:not([expanded])) .title {
+          margin: 0;
         }
         .hidden-panel {
           display: none;
@@ -803,6 +819,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           --md-list-item-leading-space: var(--ha-space-3);
           --md-list-item-trailing-space: var(--ha-space-3);
           --md-list-item-leading-icon-size: var(--ha-space-6);
+          transition: width var(--ha-animation-base-duration) ease;
         }
         :host([expanded]) ha-md-list-item {
           width: 248px;
@@ -843,11 +860,25 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
 
         ha-md-list-item .item-text {
-          display: none;
+          display: block;
+          max-width: 0;
+          opacity: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          transform: translateX(-4px);
           font-size: var(--ha-font-size-m);
           font-weight: var(--ha-font-weight-medium);
+          transition:
+            max-width var(--ha-animation-base-duration) ease,
+            opacity var(--ha-animation-base-duration) ease,
+            transform var(--ha-animation-base-duration) ease;
         }
         :host([expanded]) ha-md-list-item .item-text {
+          max-width: 100%;
+          opacity: 1;
+          transform: none;
+          transition-delay: 0ms, 80ms, 80ms;
           display: block;
           overflow: hidden;
           text-overflow: ellipsis;
@@ -932,6 +963,15 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           -webkit-transform: scaleX(var(--scale-direction));
           transform: scaleX(var(--scale-direction));
         }
+
+        @media (prefers-reduced-motion: reduce) {
+          .menu,
+          ha-md-list-item,
+          ha-md-list-item .item-text,
+          .title {
+            transition: none;
+          }
+        }
       `,
     ];
   }

src/panels/climate/ha-panel-climate.ts

@@ -186,7 +186,11 @@ class PanelClimate extends LitElement {
           );
           padding-top: var(--safe-area-inset-top);
           z-index: 4;
-          transition: box-shadow 200ms linear;
+          transition:
+            box-shadow 200ms linear,
+            width var(--ha-animation-base-duration) ease,
+            padding-left var(--ha-animation-base-duration) ease,
+            padding-right var(--ha-animation-base-duration) ease;
           display: flex;
           flex-direction: row;
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
@@ -211,6 +215,11 @@ class PanelClimate extends LitElement {
             0px 1px 10px 0px rgba(0, 0, 0, 0.12)
           );
         }
+        @media (prefers-reduced-motion: reduce) {
+          .header {
+            transition: box-shadow 200ms linear;
+          }
+        }
         .toolbar {
           height: var(--header-height);
           display: flex;

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -160,6 +160,10 @@ class PanelDeveloperTools extends LitElement {
           border-bottom: var(--app-header-border-bottom, none);
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
           backdrop-filter: var(--app-header-backdrop-filter, none);
+          transition:
+            width var(--ha-animation-base-duration) ease,
+            padding-left var(--ha-animation-base-duration) ease,
+            padding-right var(--ha-animation-base-duration) ease;
         }
         :host([narrow]) .header {
           width: calc(
@@ -170,6 +174,11 @@ class PanelDeveloperTools extends LitElement {
           );
           padding-left: var(--safe-area-inset-left);
         }
+        @media (prefers-reduced-motion: reduce) {
+          .header {
+            transition: none;
+          }
+        }
 
         .toolbar {
           height: var(--header-height);

src/panels/light/ha-panel-light.ts

@@ -186,7 +186,11 @@ class PanelLight extends LitElement {
           );
           padding-top: var(--safe-area-inset-top);
           z-index: 4;
-          transition: box-shadow 200ms linear;
+          transition:
+            box-shadow 200ms linear,
+            width var(--ha-animation-base-duration) ease,
+            padding-left var(--ha-animation-base-duration) ease,
+            padding-right var(--ha-animation-base-duration) ease;
           display: flex;
           flex-direction: row;
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
@@ -211,6 +215,11 @@ class PanelLight extends LitElement {
             0px 1px 10px 0px rgba(0, 0, 0, 0.12)
           );
         }
+        @media (prefers-reduced-motion: reduce) {
+          .header {
+            transition: box-shadow 200ms linear;
+          }
+        }
         .toolbar {
           height: var(--header-height);
           display: flex;

src/panels/lovelace/hui-root.ts

@@ -1376,7 +1376,11 @@ class HUIRoot extends LitElement {
           padding-top: var(--safe-area-inset-top);
           padding-right: var(--safe-area-inset-right);
           z-index: 4;
-          transition: box-shadow 200ms linear;
+          transition:
+            box-shadow 200ms linear,
+            width var(--ha-animation-base-duration) ease,
+            padding-left var(--ha-animation-base-duration) ease,
+            padding-right var(--ha-animation-base-duration) ease;
         }
         .narrow .header {
           width: calc(
@@ -1395,6 +1399,11 @@ class HUIRoot extends LitElement {
             0px 1px 10px 0px rgba(0, 0, 0, 0.12)
           );
         }
+        @media (prefers-reduced-motion: reduce) {
+          .header {
+            transition: box-shadow 200ms linear;
+          }
+        }
         .edit-mode .header {
           background-color: var(--app-header-edit-background-color, #455a64);
           color: var(--app-header-edit-text-color, white);

src/panels/security/ha-panel-security.ts

@@ -186,7 +186,11 @@ class PanelSecurity extends LitElement {
           );
           padding-top: var(--safe-area-inset-top);
           z-index: 4;
-          transition: box-shadow 200ms linear;
+          transition:
+            box-shadow 200ms linear,
+            width var(--ha-animation-base-duration) ease,
+            padding-left var(--ha-animation-base-duration) ease,
+            padding-right var(--ha-animation-base-duration) ease;
           display: flex;
           flex-direction: row;
           -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
@@ -211,6 +215,11 @@ class PanelSecurity extends LitElement {
             0px 1px 10px 0px rgba(0, 0, 0, 0.12)
           );
         }
+        @media (prefers-reduced-motion: reduce) {
+          .header {
+            transition: box-shadow 200ms linear;
+          }
+        }
         .toolbar {
           height: var(--header-height);
           display: flex;