@limetech/lime-elements 35.0.0-next.7 → 35.0.0

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

@@ -67,9 +67,9 @@
 .mdc-deprecated-chip-trailing-action__touch {
   position: absolute;
   top: 50%;
-  right: 0;
   height: 48px;
   /* @noflip */
+  /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -168,6 +168,7 @@
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -175,6 +176,7 @@
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--unbounded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded--foreground-activation .mdc-deprecated-chip-trailing-action__ripple::after {
@@ -188,6 +190,7 @@
 .mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -196,6 +199,7 @@
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @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%);
@@ -278,28 +282,40 @@
 
 .mdc-deprecated-chip-trailing-action {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 4px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-deprecated-chip-trailing-action, .mdc-deprecated-chip-trailing-action[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: -4px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 4px;
+  /*rtl:end:ignore*/
 }
 
 .mdc-chip__icon--trailing {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 4px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-chip__icon--trailing, .mdc-chip__icon--trailing[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: -4px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 4px;
+  /*rtl:end:ignore*/
 }
 
 .mdc-elevation-overlay {
@@ -363,23 +379,29 @@
 .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
 .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: -4px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 4px;
 }
-[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark, .mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl],
-[dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden),
-.mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl] {
+[dir=rtl] .mdc-chip.mdc-chip--selected .mdc-chip__checkmark, [dir=rtl] .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden), .mdc-chip.mdc-chip--selected .mdc-chip__checkmark[dir=rtl], .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden)[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 4px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: -4px;
+  /*rtl:end:ignore*/
 }
+
 .mdc-chip .mdc-elevation-overlay {
   width: 100%;
   height: 100%;
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
 }
 .mdc-chip::-moz-focus-inner {
@@ -394,9 +416,9 @@
 .mdc-chip .mdc-chip__touch {
   position: absolute;
   top: 50%;
-  right: 0;
   height: 48px;
   left: 0;
+  right: 0;
   transform: translateY(-50%);
 }
 
@@ -541,6 +563,7 @@
 .mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -548,6 +571,7 @@
 .mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after {
@@ -561,6 +585,7 @@
 .mdc-chip .mdc-chip__ripple::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;

package/dist/collection/components/checkbox/checkbox.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
  * This file is imported into every component!
  *
@@ -70,7 +71,7 @@
   padding: calc((var(--mdc-checkbox-ripple-size, 40px) - 18px) / 2);
   margin: calc((40px - 40px) / 2);
   /* @alternate */
-  margin: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-ripple-size, 40px)) / 2);
+  margin: calc((var(--mdc-checkbox-touch-target-size, 40px) - 40px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__ripple::before, .mdc-checkbox .mdc-checkbox__ripple::after {
   background-color: #000;
@@ -145,19 +146,19 @@
 .mdc-checkbox .mdc-checkbox__native-control {
   top: calc((40px - 40px) / 2);
   /* @alternate */
-  top: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-ripple-size, 40px)) / 2);
+  top: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);
   right: calc((40px - 40px) / 2);
   /* @alternate */
-  right: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-ripple-size, 40px)) / 2);
+  right: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);
   left: calc((40px - 40px) / 2);
   /* @alternate */
-  left: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-ripple-size, 40px)) / 2);
+  left: calc((40px - var(--mdc-checkbox-touch-target-size, 40px)) / 2);
   width: 40px;
   /* @alternate */
-  width: var(--mdc-checkbox-ripple-size, 40px);
+  width: var(--mdc-checkbox-touch-target-size, 40px);
   height: 40px;
   /* @alternate */
-  height: var(--mdc-checkbox-ripple-size, 40px);
+  height: var(--mdc-checkbox-touch-target-size, 40px);
 }
 .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {
   border-color: rgba(0, 0, 0, 0.54);
@@ -353,7 +354,7 @@
   vertical-align: bottom;
 }
 
-@media screen and (-ms-high-contrast: active) {
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
   .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate):not([data-indeterminate=true]) ~ .mdc-checkbox__background {
     border-color: GrayText;
     /* @alternate */
@@ -501,24 +502,24 @@
 .mdc-checkbox--touch {
   margin: calc((48px - 40px) / 2);
   /* @alternate */
-  margin: calc((var(--mdc-checkbox-touch-target-size, 48px) - var(--mdc-checkbox-ripple-size, 40px)) / 2);
+  margin: calc((var(--mdc-checkbox-state-layer-size, 48px) - var(--mdc-checkbox-state-layer-size, 40px)) / 2);
 }
 .mdc-checkbox--touch .mdc-checkbox__native-control {
   top: calc((40px - 48px) / 2);
   /* @alternate */
-  top: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-touch-target-size, 48px)) / 2);
+  top: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2);
   right: calc((40px - 48px) / 2);
   /* @alternate */
-  right: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-touch-target-size, 48px)) / 2);
+  right: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2);
   left: calc((40px - 48px) / 2);
   /* @alternate */
-  left: calc((var(--mdc-checkbox-ripple-size, 40px) - var(--mdc-checkbox-touch-target-size, 48px)) / 2);
+  left: calc((var(--mdc-checkbox-state-layer-size, 40px) - var(--mdc-checkbox-state-layer-size, 48px)) / 2);
   width: 48px;
   /* @alternate */
-  width: var(--mdc-checkbox-touch-target-size, 48px);
+  width: var(--mdc-checkbox-state-layer-size, 48px);
   height: 48px;
   /* @alternate */
-  height: var(--mdc-checkbox-touch-target-size, 48px);
+  height: var(--mdc-checkbox-state-layer-size, 48px);
 }
 
 .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
@@ -610,6 +611,7 @@
 .mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -617,6 +619,7 @@
 .mdc-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple::after {
@@ -630,6 +633,7 @@
 .mdc-checkbox .mdc-checkbox__ripple::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -638,6 +642,7 @@
 .mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @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%);
@@ -698,26 +703,39 @@
 }
 .mdc-form-field > label {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: auto;
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 4px;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 0;
   order: 0;
 }
 [dir=rtl] .mdc-form-field > label, .mdc-form-field > label[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: auto;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 0;
+  /*rtl:end:ignore*/
 }
+
 [dir=rtl] .mdc-form-field > label, .mdc-form-field > label[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 4px;
+  /*rtl:end:ignore*/
 }
 
 .mdc-form-field--nowrap > label {
@@ -728,26 +746,39 @@
 
 .mdc-form-field--align-end > label {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: auto;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 0;
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 4px;
   order: -1;
 }
 [dir=rtl] .mdc-form-field--align-end > label, .mdc-form-field--align-end > label[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: auto;
+  /*rtl:end:ignore*/
 }
+
 [dir=rtl] .mdc-form-field--align-end > label, .mdc-form-field--align-end > label[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   padding-left: 4px;
   /* @noflip */
+  /*rtl:ignore*/
   padding-right: 0;
+  /*rtl:end:ignore*/
 }
 
 .mdc-form-field--space-between {
@@ -757,15 +788,21 @@
   margin: 0;
 }
 [dir=rtl] .mdc-form-field--space-between > label, .mdc-form-field--space-between > label[dir=rtl] {
+  /*rtl:begin:ignore*/
   margin: 0;
+  /*rtl:end:ignore*/
 }
 
 .mdc-form-field {
   display: flex;
-  flex-wrap: wrap;
+}
+.mdc-form-field .mdc-checkbox__background {
+  background-color: var(--lime-checkbox-unchecked-color);
 }
 .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: rgb(var(--contrast-300));
+  --lime-checkbox-unchecked-color: rgb(
+      var(--contrast-300)
+  );
 }
 .mdc-form-field .mdc-checkbox.mdc-checkbox--invalid .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
   border-color: var(--lime-error-text-color);
@@ -880,8 +917,7 @@
   opacity: 0;
   color: rgba(var(--contrast-1200), 1);
 }
-
-.mdc-form-field:hover .limel-checkbox-helper-text, .mdc-form-field:focus .limel-checkbox-helper-text, .mdc-form-field:focus-visible .limel-checkbox-helper-text, .mdc-form-field:focus-within .limel-checkbox-helper-text {
+:host(:hover) .limel-checkbox-helper-text, :host(:focus) .limel-checkbox-helper-text, :host(:focus-within) .limel-checkbox-helper-text {
   opacity: 1;
 }
 
@@ -889,4 +925,21 @@
   .limel-checkbox-helper-text {
     opacity: 1;
   }
+}
+.lime-checkbox--readonly.mdc-checkbox--disabled {
+  opacity: 1;
+  --mdc-ripple-press-opacity: 1;
+  --mdc-checkbox-disabled-color: transparent;
+  --mdc-checkbox-ink-color: var(--mdc-theme-primary);
+}
+.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background {
+  --mdc-checkbox-disabled-color: transparent;
+  --mdc-checkbox-ink-color: transparent;
+  --lime-checkbox-unchecked-color: transparent;
+}
+.lime-checkbox--readonly.mdc-checkbox--disabled :not(:checked):not(:indeterminate) ~ .mdc-checkbox__background:after {
+  color: rgb(var(--color-red-default));
+  content: "×";
+  font-size: 1.25rem;
+  position: absolute;
 }

package/dist/collection/components/checkbox/checkbox.js

@@ -15,8 +15,9 @@ export class Checkbox {
      */
     this.disabled = false;
     /**
-     * Disables the checkbox when `true`. Works exactly the same as `disabled`.
-     * If either property is `true`, the checkbox will be disabled.
+     * Disables the checkbox when `true`. This visualizes the checkbox slightly differently.
+     * But shows no visual sign indicating that the checkbox is disabled
+     * or can ever become interactable.
      */
     this.readonly = false;
     /**
@@ -74,7 +75,7 @@ export class Checkbox {
     }
   }
   render() {
-    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
+    return (h(CheckboxTemplate, { disabled: this.disabled || this.readonly, label: this.label, helperText: this.helperText, checked: this.checked || this.indeterminate, indeterminate: this.indeterminate, required: this.required, readonly: this.readonly, invalid: this.required && this.modified && !this.checked, onChange: this.onChange, id: this.id }));
   }
   static get is() { return "limel-checkbox"; }
   static get encapsulation() { return "shadow"; }
@@ -115,7 +116,7 @@ export class Checkbox {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables the checkbox when `true`. Works exactly the same as `disabled`.\nIf either property is `true`, the checkbox will be disabled."
+        "text": "Disables the checkbox when `true`. This visualizes the checkbox slightly differently.\nBut shows no visual sign indicating that the checkbox is disabled\nor can ever become interactable."
       },
       "attribute": "readonly",
       "reflect": true,

package/dist/collection/components/checkbox/checkbox.template.js

@@ -4,26 +4,30 @@ export const CheckboxTemplate = (props) => {
   if (props.indeterminate) {
     inputProps['data-indeterminate'] = 'true';
   }
-  return (h("div", { class: "mdc-form-field " },
-    h("div", { class: {
-        'mdc-checkbox': true,
-        'mdc-checkbox--invalid': props.invalid,
-        'mdc-checkbox--disabled': props.disabled,
-        'mdc-checkbox--required': props.required,
-        'mdc-checkbox--indeterminate': props.indeterminate,
-      } },
-      h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled, required: props.required, onChange: props.onChange }, inputProps)),
-      h("div", { class: "mdc-checkbox__background" },
-        h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
-          h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
-        h("div", { class: "mdc-checkbox__mixedmark" }))),
-    h("label", { class: {
-        'mdc-checkbox--invalid': props.invalid,
-        'mdc-checkbox--disabled': props.disabled,
-        'mdc-checkbox--required': props.required,
-        'mdc-checkbox--indeterminate': props.indeterminate,
-      }, htmlFor: props.id }, props.label),
-    h(HelperText, { text: props.helperText })));
+  return [
+    h("div", { class: "mdc-form-field " },
+      h("div", { class: {
+          'mdc-checkbox': true,
+          'mdc-checkbox--invalid': props.invalid,
+          'mdc-checkbox--disabled': props.disabled,
+          'mdc-checkbox--required': props.required,
+          'mdc-checkbox--indeterminate': props.indeterminate,
+          'lime-checkbox--readonly': props.readonly,
+        } },
+        h("input", Object.assign({ type: "checkbox", class: "mdc-checkbox__native-control", id: props.id, checked: props.checked, disabled: props.disabled || props.readonly, required: props.required, onChange: props.onChange }, inputProps)),
+        h("div", { class: "mdc-checkbox__background" },
+          h("svg", { class: "mdc-checkbox__checkmark", viewBox: "0 0 24 24" },
+            h("path", { class: "mdc-checkbox__checkmark-path", fill: "none", d: "M1.73,12.91 8.1,19.28 22.79,4.59" })),
+          h("div", { class: "mdc-checkbox__mixedmark" }))),
+      h("label", { class: {
+          'mdc-checkbox--invalid': props.invalid,
+          'mdc-checkbox--disabled': props.disabled,
+          'mdc-checkbox--required': props.required,
+          'mdc-checkbox--indeterminate': props.indeterminate,
+          'lime-checkbox--readonly': props.readonly,
+        }, htmlFor: props.id }, props.label)),
+    h(HelperText, { text: props.helperText }),
+  ];
 };
 const HelperText = (props) => {
   if (typeof props.text !== 'string') {