@limetech/lime-elements 37.64.2 → 37.64.3

package/dist/collection/components/action-bar/action-bar-item/action-bar-item.css

@@ -91,20 +91,34 @@ button {
   padding: 0 0.25rem;
 }
 button:not([disabled]) {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-action-bar-item-text-color);
   background-color: var(--action-bar-background-color);
 }
+button:not([disabled]):hover, button:not([disabled]):focus, button:not([disabled]):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 button:not([disabled]):hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--limel-action-bar-item-text-color);
   background-color: var(--action-bar-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 button:not([disabled]):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   background-color: var(--action-bar-background-color);
   box-shadow: var(--button-shadow-inset-pressed);
-  transform: translate3d(0, 0.05rem, 0);
+}
+button:not([disabled]):hover, button:not([disabled]):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 button:not([disabled]):focus {
   outline: none;

package/dist/collection/components/breadcrumbs/breadcrumbs.css

@@ -164,19 +164,33 @@ a.step:hover:before {
 }
 
 button.step:not(.last) {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-breadcrumbs-item-text-color);
   background-color: transparent;
 }
+button.step:not(.last):hover, button.step:not(.last):focus, button.step:not(.last):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 button.step:not(.last):hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 button.step:not(.last):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+button.step:not(.last):hover, button.step:not(.last):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 
 limel-icon {

package/dist/collection/components/button/button.css

@@ -161,7 +161,7 @@ button:disabled.outlined {
   border-color: rgba(var(--contrast-1700), 0.2);
 }
 button:not(:disabled) {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
@@ -174,14 +174,28 @@ button:not(:disabled):focus-visible {
   outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
+button:not(:disabled):hover, button:not(:disabled):focus, button:not(:disabled):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 button:not(:disabled):hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 button:not(:disabled):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+button:not(:disabled):hover, button:not(:disabled):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 :host(limel-button[primary]) button:not(:disabled) {
   color: var(--mdc-theme-on-primary, rgb(var(--color-white)));

package/dist/collection/components/button-group/button-group.css

@@ -744,7 +744,7 @@
 }
 
 .mdc-chip {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
@@ -756,15 +756,29 @@
   margin: 0.125rem !important;
   font-size: 0.875rem;
 }
+.mdc-chip:hover, .mdc-chip:focus, .mdc-chip:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .mdc-chip:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .mdc-chip:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   background-color: var(--mdc-theme-surface);
   box-shadow: var(--button-shadow-inset-pressed);
-  transform: translate3d(0, 0.05rem, 0);
+}
+.mdc-chip:hover, .mdc-chip:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .mdc-chip:not(:last-child):after {
   content: "";

package/dist/collection/components/chip/chip.css

@@ -92,7 +92,7 @@
   padding-left: 0;
 }
 .chip:not([disabled]) {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
@@ -105,15 +105,29 @@
   outline: none;
   box-shadow: var(--shadow-depth-8-focused);
 }
+.chip:not([disabled]):hover, .chip:not([disabled]):focus, .chip:not([disabled]):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .chip:not([disabled]):hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .chip:not([disabled]):active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   background-color: var(--mdc-theme-surface);
   box-shadow: var(--button-shadow-inset-pressed);
-  transform: translate3d(0, 0.05rem, 0);
+}
+.chip:not([disabled]):hover, .chip:not([disabled]):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .chip:has(limel-badge) {
   padding-right: 0.375rem;
@@ -216,7 +230,7 @@ limel-badge {
 
 .trailing-button {
   all: unset;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
@@ -231,14 +245,28 @@ limel-badge {
   height: calc(var(--limel-chip-height) - 0.25rem);
   border-radius: 50%;
 }
+.trailing-button:hover, .trailing-button:focus, .trailing-button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .trailing-button:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .trailing-button:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.trailing-button:hover, .trailing-button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .trailing-button svg {
   transition: color 0.2s ease, transform 0.2s ease;

package/dist/collection/components/chip-set/chip-set.css

@@ -2055,7 +2055,7 @@
 }
 
 .clear-all-button {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: rgb(var(--contrast-900));
@@ -2072,14 +2072,28 @@
   top: calc(2.5rem / 4);
   opacity: 0;
 }
+.clear-all-button:hover, .clear-all-button:focus, .clear-all-button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .clear-all-button:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: rgb(var(--contrast-1100));
   box-shadow: var(--button-shadow-hovered);
 }
 .clear-all-button:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.clear-all-button:hover, .clear-all-button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .clear-all-button:focus {
   outline: none;

package/dist/collection/components/code-editor/code-editor.css

@@ -719,7 +719,7 @@ span.CodeMirror-selectedtext { background: none; }
 }
 .cm-s-lime .CodeMirror-foldmarker {
   position: relative;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: transparent;
   background-color: var(--lime-elevated-surface-background-color);
@@ -732,14 +732,28 @@ span.CodeMirror-selectedtext { background: none; }
   background-repeat: no-repeat;
   background-position: center;
 }
+.cm-s-lime .CodeMirror-foldmarker:hover, .cm-s-lime .CodeMirror-foldmarker:focus, .cm-s-lime .CodeMirror-foldmarker:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .cm-s-lime .CodeMirror-foldmarker:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .cm-s-lime .CodeMirror-foldmarker:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.cm-s-lime .CodeMirror-foldmarker:hover, .cm-s-lime .CodeMirror-foldmarker:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .cm-s-lime [class^=CodeMirror-foldgutter] {
   color: var(--code-editor-neutral-text-color);

package/dist/collection/components/color-picker/color-picker-palette.css

@@ -785,20 +785,34 @@
 .picker-trigger {
   all: unset;
   border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
 }
+.picker-trigger:hover, .picker-trigger:focus, .picker-trigger:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .picker-trigger:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .picker-trigger:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:hover, .picker-trigger:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .picker-trigger:focus {
   outline: none;

package/dist/collection/components/color-picker/color-picker.css

@@ -175,20 +175,34 @@
 .picker-trigger {
   all: unset;
   border-radius: 0.5rem;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
 }
+.picker-trigger:hover, .picker-trigger:focus, .picker-trigger:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .picker-trigger:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .picker-trigger:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.picker-trigger:hover, .picker-trigger:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .picker-trigger:focus {
   outline: none;

package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css

@@ -690,19 +690,33 @@ svg {
   line-height: 2.5rem;
 }
 .dayContainer .flatpickr-day {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
 }
+.dayContainer .flatpickr-day:hover, .dayContainer .flatpickr-day:focus, .dayContainer .flatpickr-day:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .dayContainer .flatpickr-day:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .dayContainer .flatpickr-day:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.dayContainer .flatpickr-day:hover, .dayContainer .flatpickr-day:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .flatpickr-day:hover {
   z-index: 1;
@@ -816,17 +830,33 @@ svg {
 .flatpickr-next-month,
 .arrowUp,
 .arrowDown {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   border-radius: 0.25rem;
 }
+.flatpickr-monthDropdown-months:hover, .flatpickr-monthDropdown-months:focus, .flatpickr-monthDropdown-months:focus-visible,
+.flatpickr-prev-month:hover,
+.flatpickr-prev-month:focus,
+.flatpickr-prev-month:focus-visible,
+.flatpickr-next-month:hover,
+.flatpickr-next-month:focus,
+.flatpickr-next-month:focus-visible,
+.arrowUp:hover,
+.arrowUp:focus,
+.arrowUp:focus-visible,
+.arrowDown:hover,
+.arrowDown:focus,
+.arrowDown:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .flatpickr-monthDropdown-months:hover,
 .flatpickr-prev-month:hover,
 .flatpickr-next-month:hover,
 .arrowUp:hover,
 .arrowDown:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
@@ -836,8 +866,26 @@ svg {
 .flatpickr-next-month:active,
 .arrowUp:active,
 .arrowDown:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.flatpickr-monthDropdown-months:hover, .flatpickr-monthDropdown-months:active,
+.flatpickr-prev-month:hover,
+.flatpickr-prev-month:active,
+.flatpickr-next-month:hover,
+.flatpickr-next-month:active,
+.arrowUp:hover,
+.arrowUp:active,
+.arrowDown:hover,
+.arrowDown:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 
 .arrowUp {
@@ -887,16 +935,26 @@ svg {
 .datepicker-month,
 .datepicker-quarter,
 .datepicker-year {
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   min-width: 0;
   text-align: center;
 }
+.datepicker-month:hover, .datepicker-month:focus, .datepicker-month:focus-visible,
+.datepicker-quarter:hover,
+.datepicker-quarter:focus,
+.datepicker-quarter:focus-visible,
+.datepicker-year:hover,
+.datepicker-year:focus,
+.datepicker-year:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .datepicker-month:hover,
 .datepicker-quarter:hover,
 .datepicker-year:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
@@ -904,8 +962,22 @@ svg {
 .datepicker-month:active,
 .datepicker-quarter:active,
 .datepicker-year:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.datepicker-month:hover, .datepicker-month:active,
+.datepicker-quarter:hover,
+.datepicker-quarter:active,
+.datepicker-year:hover,
+.datepicker-year:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .datepicker-month.selected,
 .datepicker-quarter.selected,

package/dist/collection/components/dock/dock-button/dock-button.css

@@ -73,7 +73,7 @@
   all: unset;
   isolation: isolate;
   position: relative;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--limel-dock-item-text-color);
   background-color: var(--dock-background-color);
@@ -87,15 +87,29 @@
   padding: 0 0.5rem;
   min-width: var(--dock-item-height);
 }
+.button:hover, .button:focus, .button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .button:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .button:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   background-color: var(--mdc-theme-surface);
   box-shadow: var(--button-shadow-inset-pressed);
-  transform: translate3d(0, 0.05rem, 0);
+}
+.button:hover, .button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .button:focus {
   outline: none;

package/dist/collection/components/dock/dock.css

@@ -152,7 +152,7 @@ limel-dock-button:first-of-type {
 .expand-shrink {
   all: unset;
   box-sizing: border-box;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
@@ -164,14 +164,28 @@ limel-dock-button:first-of-type {
   margin: var(--limel-dock-padding);
   border-radius: 0.375rem;
 }
+.expand-shrink:hover, .expand-shrink:focus, .expand-shrink:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .expand-shrink:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .expand-shrink:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+.expand-shrink:hover, .expand-shrink:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .expand-shrink:focus {
   outline: none;

package/dist/collection/components/file-viewer/file-viewer.css

@@ -235,7 +235,7 @@ object[type="text/plain"] {
 
 [class^=button--] {
   all: unset;
-  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
   cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
@@ -250,14 +250,28 @@ object[type="text/plain"] {
   backdrop-filter: blur(0.25rem);
   -webkit-backdrop-filter: blur(0.25rem);
 }
+[class^=button--]:hover, [class^=button--]:focus, [class^=button--]:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 [class^=button--]:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 [class^=button--]:active {
+  --limel-clickable-transform-timing-function: cubic-bezier(
+      0.83,
+      -0.15,
+      0.49,
+      1.16
+  );
+  transform: translate3d(0, 0.05rem, 0);
   box-shadow: var(--button-shadow-pressed);
-  transform: translate3d(0, 0.08rem, 0);
+}
+[class^=button--]:hover, [class^=button--]:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 [class^=button--]:focus {
   outline: none;