@limetech/lime-elements 36.3.0-next.9 → 36.3.0

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

@@ -1,8 +1,10 @@
-/*
- * This file is imported into every component!
+/**
+ * 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.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 /**
 * @prop --shortcut-border-radius: defines the radius of corners of the shortcut. Defaults to `1rem`
@@ -41,10 +43,10 @@
 a {
   all: unset;
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: var(--shortcut-background-color, var(--lime-elevated-surface-background-color));
   box-shadow: var(--button-shadow-normal);
-  cursor: pointer;
   text-align: center;
   height: calc(100% - 1rem);
   width: calc(100% - 1rem);
@@ -89,6 +91,6 @@ span {
 
 limel-badge {
   position: absolute;
-  top: -0.5rem;
-  right: 0;
+  top: -0.25rem;
+  right: 0.125rem;
 }

package/dist/collection/components/slider/slider.css

@@ -124,16 +124,14 @@
 }
 .mdc-slider__thumb.mdc-ripple-upgraded::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-slider__thumb.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-slider__thumb.mdc-ripple-upgraded--foreground-activation::after {
@@ -145,16 +143,14 @@
 }
 .mdc-slider__thumb::before, .mdc-slider__thumb::after {
   top: calc(50% - 50%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
 }
 .mdc-slider__thumb.mdc-ripple-upgraded::before, .mdc-slider__thumb.mdc-ripple-upgraded::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
@@ -225,20 +221,16 @@
   height: 100%;
   width: 100%;
   position: relative;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   -webkit-transform-origin: left;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   transform-origin: left;
 }
 [dir=rtl] .mdc-slider .mdc-slider__track--active_fill, .mdc-slider .mdc-slider__track--active_fill[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   -webkit-transform-origin: right;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   transform-origin: right;
   /*rtl:end:ignore*/
 }
@@ -285,8 +277,7 @@
 }
 .mdc-slider .mdc-slider__value-indicator-container {
   bottom: 44px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   pointer-events: none;
   position: absolute;
@@ -309,8 +300,7 @@
   bottom: -5px;
   content: "";
   height: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   position: absolute;
   transform: translateX(-50%);
@@ -337,7 +327,7 @@
 }
 @media (prefers-reduced-motion) {
   .mdc-slider .mdc-slider__value-indicator,
-.mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {
+  .mdc-slider .mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {
     transition: none;
   }
 }
@@ -381,8 +371,7 @@
 .mdc-slider .mdc-slider__thumb {
   display: flex;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: -24px;
   outline: none;
   position: absolute;
@@ -404,8 +393,7 @@
   border-radius: 50%;
   box-sizing: border-box;
   height: 20px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   position: absolute;
   top: 50%;
@@ -515,7 +503,7 @@
 }
 @media (prefers-reduced-motion) {
   .mdc-slider--discrete .mdc-slider__thumb,
-.mdc-slider--discrete .mdc-slider__track--active_fill {
+  .mdc-slider--discrete .mdc-slider__track--active_fill {
     transition: none;
   }
 }
@@ -554,14 +542,11 @@
   /* @alternate */
   text-transform: var(--mdc-typography-subtitle1-text-transform, inherit);
   position: absolute;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   -webkit-transform-origin: left top;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   transform-origin: left top;
   line-height: 1.15rem;
   text-align: left;
@@ -575,20 +560,15 @@
 }
 [dir=rtl] .mdc-floating-label, .mdc-floating-label[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   right: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: auto;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   -webkit-transform-origin: right top;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   transform-origin: right top;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   text-align: right;
   /*rtl:end:ignore*/
 }
@@ -598,11 +578,9 @@
 }
 
 .mdc-floating-label--required::after {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 1px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0px;
   content: "*";
 }
@@ -611,11 +589,9 @@
   /*rtl:end:ignore*/
 }
 [dir=rtl] .mdc-floating-label--required::after, .mdc-floating-label--required[dir=rtl]::after {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 1px;
 }
 
@@ -629,46 +605,39 @@
 
 @keyframes mdc-floating-label-shake-float-above-standard {
   0% {
-    /* @noflip */
-    /*rtl:ignore*/
+    /* @noflip */ /*rtl:ignore*/
     transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
   }
   33% {
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    /* @noflip */
-    /*rtl:ignore*/
+    /* @noflip */ /*rtl:ignore*/
     transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
   }
   66% {
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    /* @noflip */
-    /*rtl:ignore*/
+    /* @noflip */ /*rtl:ignore*/
     transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
   }
   100% {
-    /* @noflip */
-    /*rtl:ignore*/
+    /* @noflip */ /*rtl:ignore*/
     transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
   }
 }
-:host([disabled]:not([readonly])) .slider__label {
-  color: rgba(var(--contrast-1200), 0.5);
-}
-
-.slider {
+:host(limel-slider) {
+  isolation: isolate;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.25rem;
 }
 
 .slider__label {
-  color: rgba(var(--contrast-1200), 1);
   padding-left: 1.25rem;
   top: 0.5625rem;
+  color: rgba(var(--contrast-1200), 1);
 }
-
-.slider__content {
-  display: flex;
-  flex-direction: column;
-  margin-top: 0.25rem;
+:host(limel-slider.disabled:not(.readonly)) .slider__label {
+  color: rgba(var(--contrast-1200), 0.5);
 }
 
 .slider__content-range-container {
@@ -686,6 +655,7 @@
   opacity: 0.7;
   font-size: 0.75rem;
   top: 1.25rem;
+  color: rgba(var(--contrast-1200), 1);
 }
 .slider:hover .slider__content-min-label,
 .slider:hover .slider__content-max-label {
@@ -717,52 +687,71 @@
   transition: background-color 0.5s ease;
 }
 
-:host(.displays-percentage-colors) .slider.lime-slider--readonly {
+:host(.displays-percentage-colors[readonly]) {
   --mdc-theme-on-surface: var(--mdc-theme-primary);
 }
-:host(.displays-percentage-colors) .slider.percent-0 {
+
+:host(.displays-percentage-colors.percent-0) {
   --mdc-theme-primary: var(--color-percent--0);
 }
-:host(.displays-percentage-colors) .slider.percent-0-10 {
+
+:host(.displays-percentage-colors.percent-0-10) {
   --mdc-theme-primary: var(--color-percent--0to10);
 }
-:host(.displays-percentage-colors) .slider.percent-10-20 {
+
+:host(.displays-percentage-colors.percent-10-20) {
   --mdc-theme-primary: var(--color-percent--10to20);
 }
-:host(.displays-percentage-colors) .slider.percent-20-30 {
+
+:host(.displays-percentage-colors.percent-20-30) {
   --mdc-theme-primary: var(--color-percent--20to30);
 }
-:host(.displays-percentage-colors) .slider.percent-30-40 {
+
+:host(.displays-percentage-colors.percent-30-40) {
   --mdc-theme-primary: var(--color-percent--30to40);
 }
-:host(.displays-percentage-colors) .slider.percent-40-50 {
+
+:host(.displays-percentage-colors.percent-40-50) {
   --mdc-theme-primary: var(--color-percent--40to50);
 }
-:host(.displays-percentage-colors) .slider.percent-50-60 {
+
+:host(.displays-percentage-colors.percent-50-60) {
   --mdc-theme-primary: var(--color-percent--50to60);
 }
-:host(.displays-percentage-colors) .slider.percent-60-70 {
+
+:host(.displays-percentage-colors.percent-60-70) {
   --mdc-theme-primary: var(--color-percent--60to70);
 }
-:host(.displays-percentage-colors) .slider.percent-70-80 {
+
+:host(.displays-percentage-colors.percent-70-80) {
   --mdc-theme-primary: var(--color-percent--70to80);
 }
-:host(.displays-percentage-colors) .slider.percent-80-90 {
+
+:host(.displays-percentage-colors.percent-80-90) {
   --mdc-theme-primary: var(--color-percent--80to90);
 }
-:host(.displays-percentage-colors) .slider.percent-90-100 {
+
+:host(.displays-percentage-colors.percent-90-100) {
   --mdc-theme-primary: var(--color-percent--90to100);
 }
-:host(.displays-percentage-colors) .slider.percent-30-40 .mdc-slider__value-indicator-text, :host(.displays-percentage-colors) .slider.percent-40-50 .mdc-slider__value-indicator-text, :host(.displays-percentage-colors) .slider.percent-70-80 .mdc-slider__value-indicator-text {
+
+:host(.displays-percentage-colors.percent-30-40) .mdc-slider__value-indicator-text,
+:host(.displays-percentage-colors.percent-40-50) .mdc-slider__value-indicator-text,
+:host(.displays-percentage-colors.percent-70-80) .mdc-slider__value-indicator-text {
   color: rgb(var(--color-gray-darker));
 }
-:host(.displays-percentage-colors) .slider.percent-30-40 .mdc-slider--disabled .mdc-slider__value-indicator-text, :host(.displays-percentage-colors) .slider.percent-40-50 .mdc-slider--disabled .mdc-slider__value-indicator-text, :host(.displays-percentage-colors) .slider.percent-70-80 .mdc-slider--disabled .mdc-slider__value-indicator-text {
+:host(.displays-percentage-colors.percent-30-40) .mdc-slider--disabled .mdc-slider__value-indicator-text,
+:host(.displays-percentage-colors.percent-40-50) .mdc-slider--disabled .mdc-slider__value-indicator-text,
+:host(.displays-percentage-colors.percent-70-80) .mdc-slider--disabled .mdc-slider__value-indicator-text {
   color: rgb(var(--contrast-100));
 }
-:host(.displays-percentage-colors) .slider.percent-50-60 .mdc-slider__value-indicator-text, :host(.displays-percentage-colors) .slider.percent-60-70 .mdc-slider__value-indicator-text {
+
+:host(.displays-percentage-colors.percent-50-60) .mdc-slider__value-indicator-text,
+:host(.displays-percentage-colors.percent-60-70) .mdc-slider__value-indicator-text {
   color: rgb(var(--color-gray-dark));
 }
-:host(.displays-percentage-colors) .slider.percent-50-60 .mdc-slider--disabled .mdc-slider__value-indicator-text, :host(.displays-percentage-colors) .slider.percent-60-70 .mdc-slider--disabled .mdc-slider__value-indicator-text {
+:host(.displays-percentage-colors.percent-50-60) .mdc-slider--disabled .mdc-slider__value-indicator-text,
+:host(.displays-percentage-colors.percent-60-70) .mdc-slider--disabled .mdc-slider__value-indicator-text {
   color: rgb(var(--contrast-100));
 }
 
@@ -832,31 +821,31 @@
   );
 }
 
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled {
   opacity: 1;
 }
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__track,
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__track--active,
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive,
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track,
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active,
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--inactive,
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
   height: 1rem;
   border-radius: 1rem;
 }
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__track--active {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active {
   top: 0;
 }
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__value-indicator {
   transition: all 0s;
   transform: translateY(1.75rem);
 }
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
   opacity: 0;
 }
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill,
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill,
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__thumb-knob {
   background-color: var(--mdc-theme-primary);
 }
-.lime-slider--readonly .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill {
+:host(limel-slider.readonly) .mdc-slider.mdc-slider--disabled .mdc-slider__track--active_fill {
   border-color: var(--mdc-theme-primary);
 }
 
@@ -920,8 +909,7 @@
   box-shadow: var(--button-shadow-normal);
 }
 
-.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator,
-.slider.lime-slider--readonly .mdc-slider__value-indicator {
+.mdc-slider:not(.mdc-slider--disabled) .mdc-slider__value-indicator, :host(limel-slider[readonly]) .mdc-slider__value-indicator {
   background-color: var(--mdc-theme-primary);
 }
 
@@ -936,6 +924,7 @@
   padding-left: 1rem;
   flex-basis: 100%;
   width: 100%;
+  order: 3;
 }
 
 .mdc-slider-helper-text {

package/dist/collection/components/slider/slider.js

@@ -1,5 +1,5 @@
 import { MDCSlider } from '@material/slider';
-import { h, } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
 import { getPercentageClass } from './getPercentageClass';
 /**
  * @exampleComponent limel-example-slider
@@ -87,9 +87,9 @@ export class Slider {
   }
   getContainerClassList() {
     return {
-      slider: true,
-      'lime-slider--readonly': this.readonly,
       [this.percentageClass]: true,
+      disabled: this.disabled || this.readonly,
+      readonly: this.readonly,
     };
   }
   render() {
@@ -100,11 +100,11 @@ export class Slider {
     if (this.disabled || this.readonly) {
       inputProps.disabled = true;
     }
-    return (h("div", { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label), h("div", { class: "slider__content" }, h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
+    return (h(Host, { class: this.getContainerClassList() }, h("label", { class: "slider__label mdc-floating-label mdc-floating-label--float-above" }, this.label), h("div", { class: "slider__content-range-container" }, h("span", { class: "slider__content-min-label" }, this.multiplyByFactor(this.valuemin), this.unit), h("span", { class: "slider__content-max-label" }, this.multiplyByFactor(this.valuemax), this.unit)), h("div", { class: {
         'mdc-slider': true,
         'mdc-slider--discrete': true,
         'mdc-slider--disabled': this.disabled || this.readonly,
-      } }, h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-label": "Discrete slider demo" }, inputProps)), h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))), h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" })))), this.renderHelperLine()));
+      } }, h("input", Object.assign({ class: "mdc-slider__input", type: "range", min: this.multiplyByFactor(this.valuemin), max: this.multiplyByFactor(this.valuemax), value: this.multiplyByFactor(this.value), name: "volume", "aria-label": "Discrete slider demo" }, inputProps)), h("div", { class: "mdc-slider__track" }, h("div", { class: "mdc-slider__track--inactive" }), h("div", { class: "mdc-slider__track--active" }, h("div", { class: "mdc-slider__track--active_fill" }))), h("div", { class: "mdc-slider__thumb" }, h("div", { class: "mdc-slider__value-indicator-container", "aria-hidden": "true" }, h("div", { class: "mdc-slider__value-indicator" }, h("span", { class: "mdc-slider__value-indicator-text" }, this.multiplyByFactor(this.value)))), h("div", { class: "mdc-slider__thumb-knob" }))), this.renderHelperLine()));
   }
   renderHelperLine() {
     if (!this.helperText) {

package/dist/collection/components/snackbar/snackbar.css

@@ -127,21 +127,17 @@
 }
 
 .mdc-snackbar--stacked .mdc-snackbar__label {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 16px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 8px;
   padding-bottom: 12px;
 }
 [dir=rtl] .mdc-snackbar--stacked .mdc-snackbar__label, .mdc-snackbar--stacked .mdc-snackbar__label[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 16px;
   /*rtl:end:ignore*/
 }
@@ -156,11 +152,9 @@
 }
 
 .mdc-snackbar__surface {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 8px;
   display: flex;
   align-items: center;
@@ -183,11 +177,9 @@
 }
 [dir=rtl] .mdc-snackbar__surface, .mdc-snackbar__surface[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 0;
   /*rtl:end:ignore*/
 }
@@ -227,11 +219,9 @@
   text-transform: inherit;
   /* @alternate */
   text-transform: var(--mdc-typography-body2-text-transform, inherit);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 16px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 8px;
   width: 100%;
   flex-grow: 1;
@@ -243,11 +233,9 @@
 }
 [dir=rtl] .mdc-snackbar__label, .mdc-snackbar__label[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 16px;
   /*rtl:end:ignore*/
 }
@@ -350,28 +338,23 @@
   position: absolute;
   top: 50%;
   height: 36px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 36px;
   transform: translate(-50%, -50%);
 }
 
 .mdc-snackbar__action + .mdc-snackbar__dismiss {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
 }
 [dir=rtl] .mdc-snackbar__action + .mdc-snackbar__dismiss, .mdc-snackbar__action + .mdc-snackbar__dismiss[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
   /*rtl:end:ignore*/
 }
@@ -383,6 +366,8 @@
 
 .mdc-snackbar__label {
   color: var(--mdc-theme-on-surface);
+  display: flex;
+  justify-content: center;
 }
 
 .mdc-snackbar__actions {

package/dist/collection/components/snackbar/snackbar.js

@@ -179,7 +179,7 @@ export class Snackbar {
         "mutable": false,
         "complexType": {
           "original": "Languages",
-          "resolved": "\"da\" | \"en\" | \"fi\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
+          "resolved": "\"da\" | \"de\" | \"en\" | \"fi\" | \"fr\" | \"nb\" | \"nl\" | \"no\" | \"sv\"",
           "references": {
             "Languages": {
               "location": "import",

package/dist/collection/components/spinner/spinner.css

@@ -76,6 +76,10 @@
  * @prop --spinner-color-9: 9th animated stroke color, defaults to `--lime-brand-color-dark-blue`.
  * @prop --spinner-color-10: 10th animated stroke color, defaults to `--lime-brand-color-light-grey`.
  */
+:host(limel-spinner) {
+  display: block;
+}
+
 @keyframes spin {
   50% {
     transform: rotate(180deg);

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

@@ -1,8 +1,10 @@
-/*
- * This file is imported into every component!
+/**
+ * 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.
  *
- * Nothing in this file may output any CSS
- * without being explicitly called by outside code.
+ * Or, just don't import anything, that works too.
  */
 :host(limel-split-button.has-menu) {
   --button-padding-right: 2rem;
@@ -16,6 +18,14 @@
   box-sizing: border-box;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+}
+
+limel-button {
+  width: 100%;
+}
+
 limel-menu {
   display: flex;
   justify-content: flex-end;
@@ -57,6 +67,7 @@ limel-menu:hover:before, limel-menu:focus-within:before {
 }
 .menu-trigger:not(:disabled) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: var(--mdc-theme-on-surface);
   background-color: transparent;
   cursor: pointer;