@limetech/lime-elements 36.3.0-next.3 → 36.3.0-next.30

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

@@ -103,8 +103,7 @@
   width: 100%;
   height: 100%;
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
 }
 .mdc-button::-moz-focus-inner {
@@ -122,11 +121,9 @@
   pointer-events: none;
 }
 .mdc-button .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
   display: inline-block;
   position: relative;
@@ -134,11 +131,9 @@
 }
 [dir=rtl] .mdc-button .mdc-button__icon, .mdc-button .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
   /*rtl:end:ignore*/
 }
@@ -156,20 +151,16 @@
 }
 
 .mdc-button__label + .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
 }
 [dir=rtl] .mdc-button__label + .mdc-button__icon, .mdc-button__label + .mdc-button__icon[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*/
 }
@@ -290,16 +281,14 @@ svg.mdc-button__icon {
 }
 .mdc-button.mdc-ripple-upgraded .mdc-button__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-button.mdc-ripple-upgraded--unbounded .mdc-button__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-button.mdc-ripple-upgraded--foreground-activation .mdc-button__ripple::after {
@@ -312,8 +301,7 @@ svg.mdc-button__icon {
 .mdc-button .mdc-button__ripple::before,
 .mdc-button .mdc-button__ripple::after {
   top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -740,20 +728,16 @@ svg.mdc-button__icon {
 .mdc-button--raised .mdc-button__icon,
 .mdc-button--unelevated .mdc-button__icon,
 .mdc-button--outlined .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
 }
 [dir=rtl] .mdc-button--raised .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__icon, .mdc-button--raised .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
   /*rtl:end:ignore*/
 }
@@ -761,20 +745,16 @@ svg.mdc-button__icon {
 .mdc-button--raised .mdc-button__label + .mdc-button__icon,
 .mdc-button--unelevated .mdc-button__label + .mdc-button__icon,
 .mdc-button--outlined .mdc-button__label + .mdc-button__icon {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-button--raised .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--unelevated .mdc-button__label + .mdc-button__icon, [dir=rtl] .mdc-button--outlined .mdc-button__label + .mdc-button__icon, .mdc-button--raised .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--unelevated .mdc-button__label + .mdc-button__icon[dir=rtl], .mdc-button--outlined .mdc-button__label + .mdc-button__icon[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 8px;
   /*rtl:end:ignore*/
 }
@@ -803,10 +783,17 @@ button.mdc-button {
 }
 button.mdc-button:not(:disabled) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
-  color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));
+  color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
   box-shadow: var(--button-shadow-normal);
 }
+button.mdc-button:not(:disabled):focus {
+  outline: none;
+}
+button.mdc-button:not(:disabled):focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-depth-8-focused);
+}
 button.mdc-button:not(:disabled):hover {
   color: var(--mdc-theme-on-surface);
   background-color: var(--lime-elevated-surface-background-color);
@@ -816,24 +803,20 @@ button.mdc-button:not(:disabled):active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-button.mdc-button:not(:disabled):focus {
-  outline: none;
-}
-button.mdc-button:not(:disabled):focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-depth-8-focused);
-}
-button.mdc-button:not(:disabled).mdc-button--raised, button.mdc-button:not(:disabled).mdc-button--unelevated {
+:host(limel-button[primary]) button.mdc-button:not(:disabled) {
   color: var(--mdc-theme-on-primary, rgb(var(--color-white)));
   background-color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));
 }
-button.mdc-button:disabled {
+:host(limel-button[primary]) button.mdc-button:disabled {
+  background-color: rgba(var(--contrast-1700), 0.15);
+}
+:host(limel-button:not([primary])) button.mdc-button:not(:disabled) {
+  color: var(--mdc-theme-primary, rgb(var(--color-teal-default)));
+}
+:host(limel-button:not([primary])) button.mdc-button:disabled {
   color: rgba(var(--contrast-1600), 0.37);
   background-color: rgba(var(--contrast-1600), 0.1);
 }
-button.mdc-button:disabled.mdc-button--raised, button.mdc-button:disabled.mdc-button--unelevated {
-  background-color: rgba(var(--contrast-1700), 0.15);
-}
 button.mdc-button:disabled.mdc-button--outlined {
   border-color: rgba(var(--contrast-1700), 0.2);
 }
@@ -951,7 +934,8 @@ button.just-failed {
 }
 :host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,
 :host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,
-:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg {
+:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,
+:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .mdc-button__icon {
   transition: all 0.3s ease;
   transition-delay: 0.3s;
   opacity: 0;

package/dist/collection/components/button/button.js

@@ -1,16 +1,16 @@
 import { h } from '@stencil/core';
 /**
  * @exampleComponent limel-example-button-basic
+ * @exampleComponent limel-example-button-primary
+ * @exampleComponent limel-example-button-outlined
  * @exampleComponent limel-example-button-disabled
  * @exampleComponent limel-example-button-icon
  * @exampleComponent limel-example-button-loading
- * @exampleComponent limel-example-button-outlined
- * @exampleComponent limel-example-button-primary
- * @exampleComponent limel-example-button-composite
  * @exampleComponent limel-example-button-click-success
  * @exampleComponent limel-example-button-click-fail
  * @exampleComponent limel-example-button-reduce-presence
  * @exampleComponent limel-example-button-colors
+ * @exampleComponent limel-example-button-composite
  */
 export class Button {
   constructor() {
@@ -26,7 +26,6 @@ export class Button {
   render() {
     return (h("button", { class: {
         'mdc-button': true,
-        'mdc-button--unelevated': this.primary,
         loading: this.loading,
         'just-loaded': this.justLoaded && !this.loadingFailed,
         'just-failed': this.justLoaded && this.loadingFailed,

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

@@ -72,8 +72,7 @@
   position: absolute;
   top: 50%;
   height: 48px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 50%;
   width: 48px;
   transform: translate(-50%, -50%);
@@ -171,16 +170,14 @@
 }
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .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*/
+  /* @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 {
@@ -193,8 +190,7 @@
 .mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::before,
 .mdc-deprecated-chip-trailing-action .mdc-deprecated-chip-trailing-action__ripple::after {
   top: calc(50% - 50%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -202,8 +198,7 @@
 .mdc-deprecated-chip-trailing-action.mdc-ripple-upgraded .mdc-deprecated-chip-trailing-action__ripple::before,
 .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*/
+  /* @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%);
@@ -285,39 +280,31 @@
 }
 
 .mdc-deprecated-chip-trailing-action {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @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*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 4px;
   /*rtl:end:ignore*/
 }
 
 .mdc-chip__icon--trailing {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
 }
 [dir=rtl] .mdc-chip__icon--trailing, .mdc-chip__icon--trailing[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 4px;
   /*rtl:end:ignore*/
 }
@@ -382,20 +369,16 @@
 }
 .mdc-chip.mdc-chip--selected .mdc-chip__checkmark,
 .mdc-chip .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: -4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 4px;
 }
 [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*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: -4px;
   /*rtl:end:ignore*/
 }
@@ -404,8 +387,7 @@
   width: 100%;
   height: 100%;
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
 }
 .mdc-chip::-moz-focus-inner {
@@ -566,16 +548,14 @@
 }
 .mdc-chip.mdc-ripple-upgraded .mdc-chip__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-chip.mdc-ripple-upgraded--unbounded .mdc-chip__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-chip.mdc-ripple-upgraded--foreground-activation .mdc-chip__ripple::after {
@@ -588,8 +568,7 @@
 .mdc-chip .mdc-chip__ripple::before,
 .mdc-chip .mdc-chip__ripple::after {
   top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -740,6 +719,11 @@
 .mdc-chip label {
   cursor: pointer;
   transition: color 0.2s ease;
+  display: flex;
+  align-items: center;
+}
+.mdc-chip label:has(> limel-badge) .mdc-chip__text {
+  padding-right: 0.25rem;
 }
 .mdc-chip input[type=radio] {
   width: 0;
@@ -800,4 +784,13 @@
   cursor: not-allowed;
   pointer-events: none;
   opacity: 0.4;
+}
+
+limel-badge {
+  margin-right: 0.25rem;
+  pointer-events: none;
+}
+
+.mdc-chip:not(.mdc-chip--selected) {
+  --badge-background-color: rgb(var(--contrast-200));
 }

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

@@ -33,6 +33,7 @@ import { createRandomString } from '../../util/random-string';
  * @exampleComponent limel-example-button-group-icons
  * @exampleComponent limel-example-button-group
  * @exampleComponent limel-example-button-group-mix
+ * @exampleComponent limel-example-button-group-badges
  * @exampleComponent limel-example-button-group-composite
  */
 export class ButtonGroup {
@@ -67,7 +68,7 @@ export class ButtonGroup {
       'mdc-chip': true,
       'mdc-chip--selected': this.isButtonChecked(button),
     };
-    return (h("div", { class: classes, role: "row" }, h("span", { role: "gridcell" }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button)))));
+    return (h("div", { class: classes, role: "row" }, h("span", { role: "gridcell" }, h("input", { type: "radio", name: this.radioGroupName, checked: this.isButtonChecked(button), id: buttonId, onChange: this.onChange }), h("label", { htmlFor: buttonId }, this.renderContent(button), this.renderBadge(button)))));
   }
   renderContent(button) {
     if (button.icon) {
@@ -90,6 +91,12 @@ export class ButtonGroup {
       h("limel-tooltip", { elementId: iconId, label: button.title }),
     ];
   }
+  renderBadge(button) {
+    if (!button.badge) {
+      return;
+    }
+    return h("limel-badge", { label: button.badge });
+  }
   onChange(event) {
     event.stopPropagation();
     const target = event.target;

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

@@ -373,16 +373,14 @@
     border-color: var(--mdc-checkbox-disabled-color, GrayText);
     background-color: transparent;
   }
-
   .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background,
-.mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background,
-.mdc-checkbox__native-control[data-indeterminate=true][disabled] ~ .mdc-checkbox__background {
+  .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background,
+  .mdc-checkbox__native-control[data-indeterminate=true][disabled] ~ .mdc-checkbox__background {
     border-color: GrayText;
     background-color: transparent;
     /* @alternate */
     background-color: var(--mdc-checkbox-disabled-color, transparent);
   }
-
   .mdc-checkbox__native-control:disabled ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
     color: GrayText;
     /* @alternate */
@@ -393,7 +391,6 @@
     /* @alternate */
     border-color: var(--mdc-checkbox-ink-color, GrayText);
   }
-
   .mdc-checkbox__mixedmark {
     margin: 0 1px;
   }
@@ -622,16 +619,14 @@
 }
 .mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-checkbox.mdc-ripple-upgraded--unbounded .mdc-checkbox__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-checkbox.mdc-ripple-upgraded--foreground-activation .mdc-checkbox__ripple::after {
@@ -644,8 +639,7 @@
 .mdc-checkbox .mdc-checkbox__ripple::before,
 .mdc-checkbox .mdc-checkbox__ripple::after {
   top: calc(50% - 50%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
@@ -653,8 +647,7 @@
 .mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::before,
 .mdc-checkbox.mdc-ripple-upgraded .mdc-checkbox__ripple::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%);
@@ -714,38 +707,30 @@
   vertical-align: middle;
 }
 .mdc-form-field > label {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: auto;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @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*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: auto;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @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*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 4px;
   /*rtl:end:ignore*/
 }
@@ -757,38 +742,30 @@
 }
 
 .mdc-form-field--align-end > label {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: auto;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   margin-right: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @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*/
+  /* @noflip */ /*rtl:ignore*/
   margin-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @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*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 4px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 0;
   /*rtl:end:ignore*/
 }