style: rename animation '-time' variables to '-duration' (#3187)

src/elements/alert/alert/alert.scss

@@ -22,7 +22,7 @@ $open-anim-opacity-to: 1;
   --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
   --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
   --sbb-alert-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-6x)
   );
   --sbb-alert-timing-function: ease-in;
@@ -85,7 +85,7 @@ $open-anim-opacity-to: 1;
       fill-mode: forwards;
       duration: var(--sbb-alert-animation-duration);
       timing-function: var(--sbb-alert-timing-function);
-      delay: 0s, var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));
+      delay: 0s, var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-2x));
     }
   }
 }

src/elements/button/common/button-common.scss

@@ -29,7 +29,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-min-height: var(--sbb-size-element-m);
   --sbb-button-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);

src/elements/calendar/calendar.scss

@@ -22,7 +22,7 @@
   --sbb-calendar-cell-disabled-height: #{sbb.px-to-rem-build(1.5)};
   --sbb-calendar-cell-disabled-width: #{sbb.px-to-rem-build(25.5)};
   --sbb-calendar-cell-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);

src/elements/clock/clock.scss

@@ -36,7 +36,7 @@
 }
 
 .sbb-clock__hand-minutes {
-  transition: transform var(--sbb-disable-animation-zero-time, 0.2s)
+  transition: transform var(--sbb-disable-animation-zero-duration, 0.2s)
     cubic-bezier(0.4, 2.08, 0.55, 0.44);
 
   @supports not (aspect-ratio: 1 / 1) {

src/elements/container/sticky-bar/sticky-bar.scss

@@ -8,11 +8,11 @@ $intersector-overlapping: 1px;
 :host {
   --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
   --sbb-sticky-bar-fade-in-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-5x)
   );
   --sbb-sticky-bar-fade-out-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);

src/elements/core/mixins/panel-common.scss

@@ -20,7 +20,7 @@
   --sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs)
     var(--sbb-spacing-responsive-xxs);
   --sbb-selection-panel-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-selection-panel-cursor: pointer;

src/elements/core/styles/mixins/animation.scss

@@ -3,11 +3,11 @@
 // ----------------------------------------------------------------------------------------------------
 
 @mixin disable-animation {
-  --sbb-disable-animation-time: 0.1ms;
-  --sbb-disable-animation-zero-time: 0s;
+  --sbb-disable-animation-duration: 0.1ms;
+  --sbb-disable-animation-zero-duration: 0s;
 }
 
 @mixin enable-animation {
-  --sbb-disable-animation-time: initial;
-  --sbb-disable-animation-zero-time: initial;
+  --sbb-disable-animation-duration: initial;
+  --sbb-disable-animation-zero-duration: initial;
 }

src/elements/core/styles/mixins/buttons.scss

@@ -64,7 +64,7 @@
   --sbb-button-border-disabled-style: dashed;
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-button-transition-easing-function: var(--sbb-animation-easing);

src/elements/core/styles/mixins/card.scss

@@ -13,7 +13,7 @@
   --sbb-card-background-color: var(--sbb-color-white);
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-1x)
   );
   --sbb-card-animation-easing: var(--sbb-animation-easing);

src/elements/core/styles/mixins/overlay.scss

@@ -16,7 +16,7 @@
   --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)
     var(--sbb-options-panel-border-radius);
   --sbb-options-panel-animation-duration: var(
-    --sbb-disable-animation-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-options-panel-animation-timing-function: ease;

src/elements/core/styles/mixins/panel.scss

@@ -19,7 +19,7 @@
   --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
   --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
   --sbb-panel-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-panel-animation-easing: var(--sbb-animation-easing);

src/elements/dialog/dialog/dialog.scss

@@ -18,7 +18,7 @@
   --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
   --sbb-dialog-padding-block: var(--sbb-spacing-responsive-s);
   --sbb-dialog-animation-duration: var(
-    --sbb-disable-animation-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-6x)
   );
   --sbb-dialog-animation-easing: ease;

src/elements/expansion-panel/expansion-panel-header/expansion-panel-header.scss

@@ -82,7 +82,7 @@
 }
 
 .sbb-expansion-panel-header__toggle-icon {
-  transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));
+  transition: transform var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-4x));
 
   :host([aria-expanded]:not([aria-expanded='false'])) & {
     transform: rotate(-180deg);

src/elements/expansion-panel/expansion-panel/expansion-panel.scss

@@ -11,7 +11,7 @@ $open-anim-opacity-to: 1;
 
 :host {
   --sbb-expansion-panel-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-expansion-panel-background-color: var(--sbb-color-white);

src/elements/file-selector/file-selector.scss

@@ -9,7 +9,7 @@
   --sbb-file-selector-background-color: var(--sbb-color-white);
   --sbb-file-selector-border-color: var(--sbb-color-cloud);
   --sbb-file-selector-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);

src/elements/flip-card/flip-card-details/flip-card-details.scss

@@ -7,7 +7,7 @@
   --sbb-flip-card-details-opacity: 0;
   --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
   --sbb-flip-card-details-transition-delay: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-5x)
   );
   --sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);

src/elements/flip-card/flip-card-summary/flip-card-summary.scss

@@ -56,7 +56,7 @@
 
 ::slotted(*:not([slot='image'])) {
   transform: translateY(var(--sbb-flip-card-translate-title-y-hover, #{sbb.px-to-rem-build(0)}));
-  transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))
+  transition: transform var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-2x))
     var(--sbb-animation-easing);
 }
 

src/elements/flip-card/flip-card/flip-card.scss

@@ -9,15 +9,15 @@
   --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-flip-card-min-height: #{sbb.px-to-rem-build(280)};
   --sbb-flip-card-summary-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-5x)
   );
   --sbb-flip-card-summary-transition-delay: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-flip-card-details-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
 
@@ -39,7 +39,7 @@
 :host([data-flipped]) {
   --sbb-flip-card-toggle-icon-transform: rotate(45deg);
   --sbb-flip-card-details-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-flip-card-summary-transition-delay: 0s;
@@ -110,7 +110,8 @@
 
     // Use this large border radius to improve the appearance of the expanding dark background.
     border-radius: #{sbb.px-to-rem-build(256)};
-    transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease-out;
+    transition: var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-3x))
+      ease-out;
 
     :host([data-flipped]) & {
       opacity: 1;
@@ -119,7 +120,10 @@
       width: 100%;
       height: 100%;
       border-radius: var(--sbb-flip-card-border-radius);
-      transition-duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x));
+      transition-duration: var(
+        --sbb-disable-animation-zero-duration,
+        var(--sbb-animation-duration-5x)
+      );
     }
   }
 }

src/elements/form-field/form-field/form-field.scss

@@ -359,7 +359,7 @@
     will-change: transform, font-size;
 
     transition: {
-      duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));
+      duration: var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-2x));
       timing-function: var(--sbb-animation-easing);
       property: transform, font-size;
     }

src/elements/header/common/header-action.scss

@@ -16,7 +16,7 @@
   --sbb-header-action-min-height: var(--sbb-size-element-s);
   --sbb-header-action-min-width: var(--sbb-header-action-min-height);
   --sbb-header-action-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-header-action-transition-easing: var(--sbb-animation-easing);

src/elements/header/header/header.scss

@@ -14,7 +14,7 @@
   --sbb-signet-height: #{sbb.px-to-rem-build(16)};
   --sbb-header-position: fixed;
   --sbb-header-transition-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-6x)
   );
   --sbb-header-inset-inline-end: 0;

src/elements/image/image.scss

@@ -7,7 +7,7 @@
   --sbb-image-border-radius: var(--sbb-border-radius-4x);
   --sbb-image-aspect-ratio: auto;
   --sbb-image-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-image-object-fit: cover;

src/elements/loading-indicator/loading-indicator.scss

@@ -20,7 +20,7 @@
 
 :host([variant='circle']) {
   --sbb-loading-indicator-padding: var(--sbb-border-width-2x);
-  --sbb-loading-indicator-duration: var(--sbb-disable-animation-zero-time, 1.5s);
+  --sbb-loading-indicator-duration: var(--sbb-disable-animation-zero-duration, 1.5s);
   --sbb-loading-indicator-background-color: var(--sbb-color-white);
   --sbb-loading-indicator-circle-background: conic-gradient(
     from 90deg,
@@ -99,7 +99,7 @@
 :host([variant='window']) {
   --sbb-loading-indicator-padding: 0;
   --sbb-loading-indicator-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-6x)
   );
 }

src/elements/map-container/map-container.scss

@@ -12,7 +12,7 @@
   --sbb-map-container-sidebar-background-color: var(--sbb-color-white);
   --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
   --sbb-map-container-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-map-container-map-height: calc(

src/elements/menu/menu/menu.scss

@@ -12,7 +12,7 @@
   --sbb-menu-position-x: 0;
   --sbb-menu-position-y: 0;
   --sbb-menu-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-6x)
   );
   --sbb-menu-animation-easing: ease;

src/elements/navigation/common/navigation-action.scss

@@ -55,7 +55,8 @@ sbb-icon {
   display: flex;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
-  transition: color var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease;
+  transition: color var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-3x))
+    ease;
   hyphens: auto;
   text-align: left;
   color: var(--sbb-navigation-action-color);

src/elements/navigation/navigation-marker/navigation-marker.scss

@@ -54,7 +54,7 @@
     border-block-start: var(--sbb-navigation-marker-border) solid var(--sbb-color-storm);
     margin-block: var(--sbb-navigation-marker-margin-block);
     transition: {
-      duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-6x));
+      duration: var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-6x));
       timing-function: ease;
       property: opacity, inset-block-start;
     }

src/elements/navigation/navigation-section/navigation-section.scss

@@ -9,7 +9,7 @@
   --sbb-navigation-section-position: fixed;
   --sbb-navigation-section-pointer-events: none;
   --sbb-navigation-section-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-3x)
   );
   --sbb-navigation-section-animation-easing: ease-out;
@@ -46,7 +46,7 @@
   @include sbb.mq($from: large) {
     --sbb-navigation-section-column: 5 / 9;
     --sbb-navigation-section-animation-duration: var(
-      --sbb-disable-animation-zero-time,
+      --sbb-disable-animation-zero-duration,
       var(--sbb-animation-duration-4x)
     );
     --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);

src/elements/navigation/navigation/navigation.scss

@@ -14,7 +14,7 @@
 :host {
   --sbb-navigation-grid-column: 1 / 5;
   --sbb-navigation-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-3x)
   );
   --sbb-navigation-animation-easing: ease-in;
@@ -53,7 +53,7 @@
   @include sbb.mq($from: large) {
     --sbb-navigation-grid-column: 1 / 5;
     --sbb-navigation-animation-duration: var(
-      --sbb-disable-animation-zero-time,
+      --sbb-disable-animation-zero-duration,
       var(--sbb-animation-duration-6x)
     );
     --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);

src/elements/notification/notification.scss

@@ -30,7 +30,7 @@ $open-anim-height-to: calc(
     var(--sbb-notification-base-radius) var(--sbb-notification-base-radius)
     calc(var(--sbb-notification-base-radius) / 2);
   --sbb-notification-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-notification-timing-function: ease-in;
@@ -157,7 +157,7 @@ $open-anim-height-to: calc(
       fill-mode: forwards;
       duration: var(--sbb-notification-animation-duration);
       timing-function: var(--sbb-notification-timing-function);
-      delay: 0s, var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x));
+      delay: 0s, var(--sbb-disable-animation-zero-duration, var(--sbb-animation-duration-2x));
     }
   }
 }

src/elements/overlay/overlay.scss

@@ -11,7 +11,7 @@
   --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-padding-block: calc(var(--sbb-spacing-fixed-14x) + var(--sbb-spacing-responsive-l));
   --sbb-overlay-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-6x)
   );
   --sbb-overlay-animation-easing: ease;

src/elements/paginator/paginator/paginator.scss

@@ -16,7 +16,7 @@
   --sbb-paginator-page-inset: 0;
   --sbb-paginator-animation-easing: var(--sbb-animation-easing);
   --sbb-paginator-animation-duration: var(
-    --sbb-disable-animation-zero-time,
+    --sbb-disable-animation-zero-duration,
     var(--sbb-animation-duration-2x)
   );
   --sbb-paginator-justify-content: start;

src/elements/popover/popover/popover.scss

@@ -16,7 +16,7 @@
   --sbb-popover-background: var(--sbb-color-white);
   --sbb-popover-color: var(--sbb-color-charcoal);
   --sbb-popover-animation-duration: var(
-    --sbb-disable-animation-time,
+    --sbb-disable-animation-duration,
     var(--sbb-animation-duration-4x)
   );
   --sbb-popover-animation-easing: ease-out;