@limetech/lime-elements 37.64.1 → 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/dialog/dialog.css

@@ -794,6 +794,11 @@ slot[name=button] {
   justify-content: flex-end;
 }
 
+footer.mdc-dialog__actions {
+  min-height: unset;
+  padding: 0.375rem;
+}
+
 @media screen and (max-width: 760px) {
   slot[name=button] {
     flex-direction: column-reverse;

package/dist/collection/components/dialog/dialog.js

@@ -35,7 +35,6 @@ import { createRandomString } from '../../util/random-string';
  */
 export class Dialog {
   constructor() {
-    this.showFooter = true;
     this.heading = undefined;
     this.fullscreen = false;
     this.open = false;
@@ -52,7 +51,6 @@ export class Dialog {
   }
   componentWillLoad() {
     this.id = createRandomString();
-    this.showFooter = !!this.host.querySelector('[slot="button"]');
   }
   componentDidLoad() {
     this.initialize();
@@ -134,9 +132,7 @@ export class Dialog {
     return null;
   }
   renderFooter() {
-    if (this.showFooter) {
-      return (h("footer", { class: "mdc-dialog__actions" }, h("slot", { name: "button" })));
-    }
+    return (h("footer", { class: "mdc-dialog__actions" }, h("slot", { name: "button" })));
   }
   setClosingActions() {
     this.mdcDialog.scrimClickAction = '';

package/dist/collection/components/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DialogHeading, ClosingActions } from './dialog.types';\nimport { MDCDialog } from '@material/dialog';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n *\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-heading-actions\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot header-actions - The dialog header buttons\n * @slot button - The dialog buttons\n */\n@Component({\n    tag: 'limel-dialog',\n    shadow: true,\n    styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n    /**\n     * The heading for the dialog, if any.\n     */\n    @Prop()\n    public heading: string | DialogHeading;\n\n    /**\n     * Set to `true` to make the dialog \"fullscreen\".\n     */\n    @Prop({ reflect: true })\n    public fullscreen = false;\n\n    /**\n     * `true` if the dialog is open, `false` otherwise.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public open = false;\n\n    /**\n     * Defines which action triggers a close-event.\n     */\n    @Prop({ reflect: true })\n    public closingActions: ClosingActions = {\n        escapeKey: true,\n        scrimClick: true,\n    };\n    /**\n     * Emitted when the dialog is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when the dialog is in the process of being closed.\n     */\n    @Event()\n    private closing: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelDialogElement;\n\n    private mdcDialog: MDCDialog;\n\n    private id: string;\n\n    private showFooter = true;\n\n    constructor() {\n        this.handleMdcOpened = this.handleMdcOpened.bind(this);\n        this.handleMdcClosed = this.handleMdcClosed.bind(this);\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.id = createRandomString();\n        this.showFooter = !!this.host.querySelector('[slot=\"button\"]');\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n        if (!element) {\n            return;\n        }\n\n        this.mdcDialog = new MDCDialog(element);\n        if (this.open) {\n            this.mdcDialog.open();\n        }\n\n        this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n        this.setClosingActions();\n    }\n\n    public disconnectedCallback() {\n        this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n        this.mdcDialog.destroy();\n    }\n\n    public render() {\n        return (\n            <div\n                class={{\n                    'mdc-dialog': true,\n                    'full-screen': !!this.fullscreen,\n                }}\n                role=\"alertdialog\"\n                aria-modal=\"true\"\n                aria-labelledby={'limel-dialog-title-' + this.id}\n                aria-describedby={'limel-dialog-content-' + this.id}\n            >\n                <input hidden={true} id=\"initialFocusEl\" />\n                <div class=\"mdc-dialog__container\">\n                    <div class=\"mdc-dialog__surface\">\n                        {/*\n                            The `initialFocusElement` below is needed to make\n                            focus trapping work. At the time of writing, the\n                            focusable elements inside the slots are not\n                            detected, so we supply our own hidden element for\n                            the focus trap to use. Read more here:\n                            https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n                        */}\n                        <input type=\"button\" id=\"initialFocusElement\" />\n                        {this.renderHeading()}\n                        <div\n                            class=\"mdc-dialog__content\"\n                            id={'limel-dialog-content-' + this.id}\n                        >\n                            <slot />\n                        </div>\n                        {this.renderFooter()}\n                    </div>\n                </div>\n                <div class=\"mdc-dialog__scrim\" />\n            </div>\n        );\n    }\n\n    @Watch('open')\n    protected watchHandler(newValue: boolean, oldValue: boolean) {\n        if (oldValue === newValue) {\n            return;\n        }\n\n        if (!this.mdcDialog) {\n            return;\n        }\n\n        if (newValue) {\n            this.mdcDialog.open();\n        } else {\n            this.mdcDialog.close();\n        }\n    }\n\n    @Watch('closingActions')\n    protected closingActionsChanged(\n        newValue: ClosingActions,\n        oldValue: ClosingActions,\n    ) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.setClosingActions();\n    }\n\n    private handleMdcOpened() {\n        // When the opening-animation has completed, dispatch a\n        // resize-event so that any content that depends on\n        // javascript for layout has a chance to update to the\n        // final layout of the dialog. /Ads\n        const waitForUiToRender = 100;\n        setTimeout(dispatchResizeEvent, waitForUiToRender);\n    }\n\n    private handleMdcClosed() {\n        if (this.open) {\n            this.close.emit();\n        }\n\n        this.open = false;\n    }\n\n    private handleMdcClosing() {\n        this.closing.emit();\n    }\n\n    private isBadgeHeading(\n        heading: string | DialogHeading,\n    ): heading is DialogHeading {\n        return typeof heading === 'object' && !!heading.title && !!heading.icon;\n    }\n\n    private renderHeading() {\n        if (this.isBadgeHeading(this.heading)) {\n            const { title, subtitle, supportingText, icon } = this.heading;\n\n            return (\n                <limel-header\n                    icon={icon}\n                    heading={title}\n                    subheading={subtitle}\n                    supportingText={supportingText}\n                >\n                    <slot name=\"header-actions\" slot=\"actions\" />\n                </limel-header>\n            );\n        } else if (typeof this.heading === 'string') {\n            return <limel-header heading={this.heading}></limel-header>;\n        }\n\n        return null;\n    }\n\n    private renderFooter() {\n        if (this.showFooter) {\n            return (\n                <footer class=\"mdc-dialog__actions\">\n                    <slot name=\"button\" />\n                </footer>\n            );\n        }\n    }\n\n    private setClosingActions() {\n        this.mdcDialog.scrimClickAction = '';\n        if (this.closingActions.scrimClick) {\n            this.mdcDialog.scrimClickAction = 'close';\n        }\n\n        this.mdcDialog.escapeKeyAction = '';\n        if (this.closingActions.escapeKey) {\n            this.mdcDialog.escapeKeyAction = 'close';\n        }\n    }\n}\n"]}
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../../src/components/dialog/dialog.tsx"],"names":[],"mappings":"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","sourcesContent":["import { DialogHeading, ClosingActions } from './dialog.types';\nimport { MDCDialog } from '@material/dialog';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    Watch,\n} from '@stencil/core';\nimport { isEqual } from 'lodash-es';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { createRandomString } from '../../util/random-string';\n\n/**\n * :::note\n * Regarding the `close` event: When putting other elements that emit `close`\n * events inside a dialog, those events must be caught and stopped inside the\n * dialog. If not, they will bubble to the event handler listening for `close`\n * events on the dialog, which will close the dialog too.\n *\n * See the example _Nested `close` events_.\n * :::\n *\n * :::important\n * Are you developing for\n * [Lime CRM](https://www.lime-technologies.com/en/lime-crm/)? Please note that\n * you should use the [DialogRenderer](https://lundalogik.github.io/lime-web-components/versions/latest/interfaces/DialogRenderer.html)\n * from Lime Web Components to open dialogs in Lime CRM.\n * :::\n *\n * @exampleComponent limel-example-dialog\n * @exampleComponent limel-example-dialog-nested-close-events\n * @exampleComponent limel-example-dialog-heading\n * @exampleComponent limel-example-dialog-heading-actions\n * @exampleComponent limel-example-dialog-form\n * @exampleComponent limel-example-dialog-size\n * @exampleComponent limel-example-dialog-fullscreen\n * @exampleComponent limel-example-dialog-closing-actions\n * @exampleComponent limel-example-dialog-action-buttons\n * @slot - Content to put inside the dialog\n * @slot header-actions - The dialog header buttons\n * @slot button - The dialog buttons\n */\n@Component({\n    tag: 'limel-dialog',\n    shadow: true,\n    styleUrl: 'dialog.scss',\n})\nexport class Dialog {\n    /**\n     * The heading for the dialog, if any.\n     */\n    @Prop()\n    public heading: string | DialogHeading;\n\n    /**\n     * Set to `true` to make the dialog \"fullscreen\".\n     */\n    @Prop({ reflect: true })\n    public fullscreen = false;\n\n    /**\n     * `true` if the dialog is open, `false` otherwise.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public open = false;\n\n    /**\n     * Defines which action triggers a close-event.\n     */\n    @Prop({ reflect: true })\n    public closingActions: ClosingActions = {\n        escapeKey: true,\n        scrimClick: true,\n    };\n    /**\n     * Emitted when the dialog is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when the dialog is in the process of being closed.\n     */\n    @Event()\n    private closing: EventEmitter<void>;\n\n    @Element()\n    private host: HTMLLimelDialogElement;\n\n    private mdcDialog: MDCDialog;\n\n    private id: string;\n\n    constructor() {\n        this.handleMdcOpened = this.handleMdcOpened.bind(this);\n        this.handleMdcClosed = this.handleMdcClosed.bind(this);\n        this.handleMdcClosing = this.handleMdcClosing.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentWillLoad() {\n        this.id = createRandomString();\n    }\n\n    public componentDidLoad() {\n        this.initialize();\n    }\n\n    private initialize() {\n        const element = this.host.shadowRoot.querySelector('.mdc-dialog');\n        if (!element) {\n            return;\n        }\n\n        this.mdcDialog = new MDCDialog(element);\n        if (this.open) {\n            this.mdcDialog.open();\n        }\n\n        this.mdcDialog.listen('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.listen('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.listen('MDCDialog:closing', this.handleMdcClosing);\n\n        this.setClosingActions();\n    }\n\n    public disconnectedCallback() {\n        this.mdcDialog.unlisten('MDCDialog:opened', this.handleMdcOpened);\n        this.mdcDialog.unlisten('MDCDialog:closed', this.handleMdcClosed);\n        this.mdcDialog.unlisten('MDCDialog:closing', this.handleMdcClosing);\n        this.mdcDialog.destroy();\n    }\n\n    public render() {\n        return (\n            <div\n                class={{\n                    'mdc-dialog': true,\n                    'full-screen': !!this.fullscreen,\n                }}\n                role=\"alertdialog\"\n                aria-modal=\"true\"\n                aria-labelledby={'limel-dialog-title-' + this.id}\n                aria-describedby={'limel-dialog-content-' + this.id}\n            >\n                <input hidden={true} id=\"initialFocusEl\" />\n                <div class=\"mdc-dialog__container\">\n                    <div class=\"mdc-dialog__surface\">\n                        {/*\n                            The `initialFocusElement` below is needed to make\n                            focus trapping work. At the time of writing, the\n                            focusable elements inside the slots are not\n                            detected, so we supply our own hidden element for\n                            the focus trap to use. Read more here:\n                            https://github.com/material-components/material-components-web/tree/v11.0.0/packages/mdc-dialog#handling-focus-trapping\n                        */}\n                        <input type=\"button\" id=\"initialFocusElement\" />\n                        {this.renderHeading()}\n                        <div\n                            class=\"mdc-dialog__content\"\n                            id={'limel-dialog-content-' + this.id}\n                        >\n                            <slot />\n                        </div>\n                        {this.renderFooter()}\n                    </div>\n                </div>\n                <div class=\"mdc-dialog__scrim\" />\n            </div>\n        );\n    }\n\n    @Watch('open')\n    protected watchHandler(newValue: boolean, oldValue: boolean) {\n        if (oldValue === newValue) {\n            return;\n        }\n\n        if (!this.mdcDialog) {\n            return;\n        }\n\n        if (newValue) {\n            this.mdcDialog.open();\n        } else {\n            this.mdcDialog.close();\n        }\n    }\n\n    @Watch('closingActions')\n    protected closingActionsChanged(\n        newValue: ClosingActions,\n        oldValue: ClosingActions,\n    ) {\n        if (isEqual(newValue, oldValue)) {\n            return;\n        }\n\n        this.setClosingActions();\n    }\n\n    private handleMdcOpened() {\n        // When the opening-animation has completed, dispatch a\n        // resize-event so that any content that depends on\n        // javascript for layout has a chance to update to the\n        // final layout of the dialog. /Ads\n        const waitForUiToRender = 100;\n        setTimeout(dispatchResizeEvent, waitForUiToRender);\n    }\n\n    private handleMdcClosed() {\n        if (this.open) {\n            this.close.emit();\n        }\n\n        this.open = false;\n    }\n\n    private handleMdcClosing() {\n        this.closing.emit();\n    }\n\n    private isBadgeHeading(\n        heading: string | DialogHeading,\n    ): heading is DialogHeading {\n        return typeof heading === 'object' && !!heading.title && !!heading.icon;\n    }\n\n    private renderHeading() {\n        if (this.isBadgeHeading(this.heading)) {\n            const { title, subtitle, supportingText, icon } = this.heading;\n\n            return (\n                <limel-header\n                    icon={icon}\n                    heading={title}\n                    subheading={subtitle}\n                    supportingText={supportingText}\n                >\n                    <slot name=\"header-actions\" slot=\"actions\" />\n                </limel-header>\n            );\n        } else if (typeof this.heading === 'string') {\n            return <limel-header heading={this.heading}></limel-header>;\n        }\n\n        return null;\n    }\n\n    private renderFooter() {\n        return (\n            <footer class=\"mdc-dialog__actions\">\n                <slot name=\"button\" />\n            </footer>\n        );\n    }\n\n    private setClosingActions() {\n        this.mdcDialog.scrimClickAction = '';\n        if (this.closingActions.scrimClick) {\n            this.mdcDialog.scrimClickAction = 'close';\n        }\n\n        this.mdcDialog.escapeKeyAction = '';\n        if (this.closingActions.escapeKey) {\n            this.mdcDialog.escapeKeyAction = 'close';\n        }\n    }\n}\n"]}