@limetech/lime-elements 35.0.0-next.2 → 35.0.0-next.23

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

@@ -70,7 +70,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 +145,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 +353,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 +501,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 +610,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 +618,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 +632,7 @@
 .mdc-checkbox .mdc-checkbox__ripple::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -638,6 +641,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 +702,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 +745,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,12 +787,13 @@
   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 .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));
@@ -880,8 +911,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;
 }
 

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

@@ -4,26 +4,28 @@ 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,
+        } },
+        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 }),
+  ];
 };
 const HelperText = (props) => {
   if (typeof props.text !== 'string') {