@limetech/lime-elements 37.64.2 → 37.64.4

package/dist/collection/components/dynamic-label/dynamic-label.css

@@ -1,62 +1,3 @@
-@charset "UTF-8";
-/**
- * Note! This file is exported to `dist/scss/` in the published
- * node module, for consumer projects to import.
- * That means this file cannot import from any file that isn't
- * also exported, keeping the same relative path.
- *
- * Or, just don't import anything, that works too.
- */
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
 * {
   box-sizing: border-box;
   min-width: 0;
@@ -66,7 +7,7 @@
   --limel-dynamic-label-min-height: 1.75rem;
   display: flex;
   gap: 0.5rem;
-  align-items: center;
+  align-items: flex-start;
   border-radius: 0.5rem;
   min-width: 0;
 }
@@ -79,11 +20,10 @@ limel-icon {
   color: rgb(var(--contrast-900));
 }
 
-span {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+label {
   flex-grow: 1;
   font-size: 0.8125rem;
+  line-height: normal;
   color: var(--mdc-theme-on-surface);
+  padding-top: 0.375rem;
 }

package/dist/collection/components/dynamic-label/dynamic-label.js

@@ -53,7 +53,7 @@ export class DynamicLabel {
     return h("limel-icon", Object.assign({}, iconProps));
   }
   renderLabel(label = '') {
-    return h("span", null, label);
+    return h("label", null, label);
   }
   static get is() { return "limel-dynamic-label"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/dynamic-label/dynamic-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-label.js","sourceRoot":"","sources":["../../../src/components/dynamic-label/dynamic-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;EACzC,CAAC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,gBAAO,KAAK,CAAQ,CAAC;EAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <span>{label}</span>;\n    }\n}\n"]}
+{"version":3,"file":"dynamic-label.js","sourceRoot":"","sources":["../../../src/components/dynamic-label/dynamic-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;EACzC,CAAC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,iBAAQ,KAAK,CAAS,CAAC;EAClC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <label>{label}</label>;\n    }\n}\n"]}

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;

package/dist/collection/components/help/help.css

@@ -64,7 +64,7 @@ limel-popover {
 
 button[slot=trigger] {
   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);
@@ -79,14 +79,28 @@ button[slot=trigger] {
   height: 0.875rem;
   font-size: 0.75rem;
 }
+button[slot=trigger]:hover, button[slot=trigger]:focus, button[slot=trigger]:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 button[slot=trigger]:hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: rgb(var(--color-sky-dark));
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 button[slot=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);
+}
+button[slot=trigger]:hover, button[slot=trigger]:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 button[slot=trigger]:focus {
   outline: none;

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

@@ -79,19 +79,33 @@ button {
   border-radius: 50%;
 }
 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(--icon-background-color, transparent);
 }
+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.01rem, 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;
 }
 button:not(:disabled):focus {
   outline: none;

package/dist/collection/components/info-tile/info-tile.css

@@ -134,20 +134,34 @@ a {
   background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
 }
 a.is-clickable {
-  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(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-normal);
 }
+a.is-clickable:hover, a.is-clickable:focus, a.is-clickable:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 a.is-clickable:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--info-tile-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-hovered);
 }
 a.is-clickable: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);
+}
+a.is-clickable:hover, a.is-clickable:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 a.is-clickable:focus {
   outline: none;

package/dist/collection/components/input-field/input-field.css

@@ -2106,7 +2106,7 @@ input.mdc-text-field__input::placeholder {
   color: rgb(var(--contrast-900)) !important;
 }
 input.mdc-text-field__input::-webkit-search-cancel-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));
@@ -2125,14 +2125,28 @@ input.mdc-text-field__input::-webkit-search-cancel-button {
   bottom: 0;
   margin: auto;
 }
+input.mdc-text-field__input::-webkit-search-cancel-button:hover, input.mdc-text-field__input::-webkit-search-cancel-button:focus, input.mdc-text-field__input::-webkit-search-cancel-button:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 input.mdc-text-field__input::-webkit-search-cancel-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);
 }
 input.mdc-text-field__input::-webkit-search-cancel-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);
+}
+input.mdc-text-field__input::-webkit-search-cancel-button:hover, input.mdc-text-field__input::-webkit-search-cancel-button:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 input.mdc-text-field__input::-webkit-search-cancel-button:active {
   transform: none;

package/dist/collection/components/list/list.css

@@ -133,6 +133,12 @@
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -846,6 +852,7 @@
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -867,6 +874,8 @@
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {
@@ -4618,6 +4627,12 @@ a.mdc-list-item {
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -5300,6 +5315,7 @@ a.mdc-list-item {
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -5321,6 +5337,8 @@ a.mdc-list-item {
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {
@@ -5919,19 +5937,33 @@ a.mdc-list-item {
 }
 
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--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: transparent;
 }
+:host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover, :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):focus, :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--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);
 }
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--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);
+}
+:host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover, :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
   z-index: 1;

package/dist/collection/components/menu-list/menu-list.css

@@ -139,6 +139,12 @@
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -909,6 +915,7 @@
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
@@ -935,6 +942,8 @@
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 
@@ -4688,6 +4697,12 @@ a.mdc-list-item {
       rgb(var(--contrast-900))
   );
   --lime-checkbox-unchecked-color: rgb(var(--contrast-300));
+  min-height: 2.5rem;
+}
+
+limel-dynamic-label {
+  margin-top: 0.375rem;
+  margin-left: 0.25rem;
 }
 
 .mdc-checkbox {
@@ -5370,6 +5385,7 @@ a.mdc-list-item {
 
 .mdc-form-field {
   display: flex;
+  align-items: flex-start;
 }
 .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background, .mdc-form-field .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   background-color: var(--lime-checkbox-unchecked-color);
@@ -5391,6 +5407,8 @@ a.mdc-list-item {
 .mdc-form-field label {
   cursor: pointer;
   line-height: normal;
+  letter-spacing: normal;
+  padding-top: 0.75rem;
   padding-left: 0;
 }
 .mdc-form-field label.mdc-checkbox--required::after {
@@ -5989,19 +6007,33 @@ a.mdc-list-item {
 }
 
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--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: transparent;
 }
+:host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover, :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):focus, :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--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);
 }
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--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);
+}
+:host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover, :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 :host(.has-interactive-items) .mdc-deprecated-list-item:not(.mdc-deprecated-list-item--disabled):hover {
   z-index: 1;

package/dist/collection/components/select/select.css

@@ -1720,20 +1720,34 @@
   fill: rgb(var(--contrast-1000));
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger {
-  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);
 }
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger:hover, .limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus, .limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .limel-select:not(.mdc-select--disabled) .limel-select-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);
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-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);
+}
+.limel-select:not(.mdc-select--disabled) .limel-select-trigger:hover, .limel-select:not(.mdc-select--disabled) .limel-select-trigger:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .limel-select:not(.mdc-select--disabled) .limel-select-trigger:focus {
   outline: none;

package/dist/collection/components/shortcut/shortcut.css

@@ -93,7 +93,7 @@
 
 a {
   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(--shortcut-background-color, var(--lime-elevated-surface-background-color));
@@ -104,14 +104,28 @@ a {
   padding: 0.5rem;
   border-radius: var(--shortcut-border-radius, 1rem);
 }
+a:hover, a:focus, a:focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 a:hover {
+  transform: translate3d(0, -0.04rem, 0);
   color: var(--mdc-theme-on-surface);
   background-color: var(--shortcut-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-hovered);
 }
 a: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);
+}
+a:hover, a:active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 a:focus {
   outline: none;

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

@@ -113,20 +113,34 @@ limel-menu:hover:before, limel-menu:focus-within:before {
   width: 1rem;
 }
 .menu-trigger: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: "inherit";
   background-color: transparent;
   cursor: pointer;
 }
+.menu-trigger:not(:disabled):hover, .menu-trigger:not(:disabled):focus, .menu-trigger:not(:disabled):focus-visible {
+  will-change: color, background-color, box-shadow, transform;
+}
 .menu-trigger:not(:disabled):hover {
+  transform: translate3d(0, 0.01rem, 0);
   color: "inherit";
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-hovered);
 }
 .menu-trigger: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);
+}
+.menu-trigger:not(:disabled):hover, .menu-trigger:not(:disabled):active {
+  --limel-clickable-transition-speed: 0.2s;
+  --limel-clickable-transform-speed: 0.16s;
 }
 .menu-trigger:not(:disabled):focus {
   outline: none;

package/dist/collection/components/switch/switch.css

@@ -754,9 +754,10 @@
 }
 :host(limel-switch) {
   isolation: isolate;
+  min-height: 1.75rem;
   display: flex;
-  align-items: center;
-  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 0.5rem;
   --mdc-switch-selected-icon-color: transparent;
   --mdc-switch-unselected-icon-color: transparent;
   --mdc-switch-disabled-selected-icon-opacity: 1;
@@ -804,7 +805,7 @@
 }
 
 .mdc-switch {
-  margin-right: 0.5rem;
+  margin-top: 0.25rem;
 }
 .mdc-switch:hover {
   --mdc-switch-handle-elevation: var(--button-shadow-hovered);
@@ -835,6 +836,9 @@ label {
   /* @alternate */
   text-transform: var(--mdc-typography-body2-text-transform, inherit);
   color: var(--mdc-theme-on-surface);
+  padding-top: 0.375rem;
+  line-height: normal;
+  letter-spacing: normal;
 }
 label:not(.disabled) {
   cursor: pointer;