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

package/dist/collection/components/circular-progress/circular-progress.css

@@ -111,8 +111,8 @@
 .lime-circular-progress:before {
   content: "";
   position: absolute;
-  width: calc( var(--size) * 0.75 + 0.25rem );
-  height: calc( var(--size) * 0.75 + 0.25rem );
+  width: calc(var(--size) * 0.75 + 0.25rem);
+  height: calc(var(--size) * 0.75 + 0.25rem);
   border-radius: 50%;
   background-color: rgb(var(--contrast-100));
   box-shadow: var(--button-shadow-pressed);

package/dist/collection/components/code-editor/code-editor.css

@@ -60,19 +60,13 @@
 .cm-fat-cursor div.CodeMirror-cursors {
   z-index: 1;
 }
-.cm-fat-cursor-mark {
-  background-color: rgba(20, 255, 20, 0.5);
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-}
-.cm-animate-fat-cursor {
-  width: auto;
-  -webkit-animation: blink 1.06s steps(1) infinite;
-  -moz-animation: blink 1.06s steps(1) infinite;
-  animation: blink 1.06s steps(1) infinite;
-  background-color: #7e7;
-}
+.cm-fat-cursor .CodeMirror-line::selection,
+.cm-fat-cursor .CodeMirror-line > span::selection, 
+.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
+.cm-fat-cursor .CodeMirror-line::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
+.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
+.cm-fat-cursor { caret-color: transparent; }
 @-moz-keyframes blink {
   0% {}
   50% { background-color: transparent; }
@@ -170,6 +164,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
+  z-index: 0;
 }
 .CodeMirror-sizer {
   position: relative;

package/dist/collection/components/dialog/dialog.css

@@ -79,37 +79,6 @@
   --header-icon-background-color: var(--dialog-heading-icon-background-color);
 }
 
-.mdc-elevation-overlay {
-  position: absolute;
-  border-radius: inherit;
-  pointer-events: none;
-  opacity: 0;
-  /* @alternate */
-  opacity: var(--mdc-elevation-overlay-opacity, 0);
-  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: #fff;
-  /* @alternate */
-  background-color: var(--mdc-elevation-overlay-color, #fff);
-}
-
-.mdc-dialog,
-.mdc-dialog__scrim {
-  position: fixed;
-  top: 0;
-  left: 0;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
-
-.mdc-dialog {
-  display: none;
-  z-index: 7;
-  /* @alternate */
-  z-index: var(--mdc-dialog-z-index, 7);
-}
 .mdc-dialog .mdc-dialog__surface {
   background-color: #fff;
   /* @alternate */
@@ -132,26 +101,26 @@
   /* @alternate */
   color: var(--mdc-theme-on-surface, #000);
 }
-.mdc-dialog .mdc-dialog__close::before, .mdc-dialog .mdc-dialog__close::after {
+.mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close .mdc-icon-button__ripple::after {
   background-color: #000;
   /* @alternate */
   background-color: var(--mdc-ripple-color, var(--mdc-theme-on-surface, #000));
 }
-.mdc-dialog .mdc-dialog__close:hover::before, .mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover::before {
+.mdc-dialog .mdc-dialog__close:hover .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close.mdc-ripple-surface--hover .mdc-icon-button__ripple::before {
   opacity: 0.04;
   /* @alternate */
   opacity: var(--mdc-ripple-hover-opacity, 0.04);
 }
-.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused::before, .mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus::before {
+.mdc-dialog .mdc-dialog__close.mdc-ripple-upgraded--background-focused .mdc-icon-button__ripple::before, .mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):focus .mdc-icon-button__ripple::before {
   transition-duration: 75ms;
   opacity: 0.12;
   /* @alternate */
   opacity: var(--mdc-ripple-focus-opacity, 0.12);
 }
-.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded)::after {
+.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded) .mdc-icon-button__ripple::after {
   transition: opacity 150ms linear;
 }
-.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active::after {
+.mdc-dialog .mdc-dialog__close:not(.mdc-ripple-upgraded):active .mdc-icon-button__ripple::after {
   transition-duration: 75ms;
   opacity: 0.12;
   /* @alternate */
@@ -171,6 +140,104 @@
   /* @alternate */
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
+.mdc-dialog .mdc-dialog__surface {
+  border-radius: 4px;
+  /* @alternate */
+  border-radius: var(--mdc-shape-medium, 4px);
+}
+
+.mdc-dialog__surface {
+  /* @alternate */
+  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
+}
+
+.mdc-dialog__title {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Roboto, sans-serif;
+  /* @alternate */
+  font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+  font-size: 0.875rem;
+  /* @alternate */
+  font-size: var(--mdc-typography-headline6-font-size, 0.875rem);
+  line-height: 0.875rem;
+  /* @alternate */
+  line-height: var(--mdc-typography-headline6-line-height, 0.875rem);
+  font-weight: 500;
+  /* @alternate */
+  font-weight: var(--mdc-typography-headline6-font-weight, 500);
+  letter-spacing: 0.0125em;
+  /* @alternate */
+  letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
+  text-decoration: inherit;
+  /* @alternate */
+  text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
+  text-transform: inherit;
+  /* @alternate */
+  text-transform: var(--mdc-typography-headline6-text-transform, inherit);
+}
+
+.mdc-dialog__content {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-family: Roboto, sans-serif;
+  /* @alternate */
+  font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
+  font-size: 0.8125rem;
+  /* @alternate */
+  font-size: var(--mdc-typography-body1-font-size, 0.8125rem);
+  line-height: 1.5rem;
+  /* @alternate */
+  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
+  font-weight: 400;
+  /* @alternate */
+  font-weight: var(--mdc-typography-body1-font-weight, 400);
+  letter-spacing: 0.03125em;
+  /* @alternate */
+  letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
+  text-decoration: inherit;
+  /* @alternate */
+  text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
+  text-transform: inherit;
+  /* @alternate */
+  text-transform: var(--mdc-typography-body1-text-transform, inherit);
+}
+
+.mdc-dialog__title-icon {
+  /** Hook for theming API. */
+}
+
+.mdc-elevation-overlay {
+  position: absolute;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  /* @alternate */
+  opacity: var(--mdc-elevation-overlay-opacity, 0);
+  transition: opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
+  background-color: #fff;
+  /* @alternate */
+  background-color: var(--mdc-elevation-overlay-color, #fff);
+}
+
+.mdc-dialog,
+.mdc-dialog__scrim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.mdc-dialog {
+  display: none;
+  z-index: 7;
+  /* @alternate */
+  z-index: var(--mdc-dialog-z-index, 7);
+}
 .mdc-dialog .mdc-dialog__content {
   padding: 20px 24px 20px 24px;
 }
@@ -196,51 +263,49 @@
     /* stylelint-enable*/
   }
 }
-.mdc-dialog .mdc-dialog__surface {
-  border-radius: 4px;
-  /* @alternate */
-  border-radius: var(--mdc-shape-medium, 4px);
+.mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
+  max-width: none;
 }
-@media (max-width: 960px) and (max-height: 1440px) {
+@media (max-width: 960px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
     max-height: 560px;
-    max-width: 560px;
+    width: 560px;
   }
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
     right: -12px;
   }
 }
-@media (max-width: 720px) and (max-height: 1023px) and (max-width: 672px) {
+@media (max-width: 720px) and (max-width: 672px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    max-width: calc(100vw - 112px);
+    width: calc(100vw - 112px);
   }
 }
-@media (max-width: 720px) and (max-height: 1023px) and (min-width: 672px) {
+@media (max-width: 720px) and (min-width: 672px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    max-width: 560px;
+    width: 560px;
   }
 }
-@media (max-width: 720px) and (max-height: 1023px) and (max-height: 720px) {
+@media (max-width: 720px) and (max-height: 720px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
     max-height: calc(100vh - 160px);
   }
 }
-@media (max-width: 720px) and (max-height: 1023px) and (min-height: 720px) {
+@media (max-width: 720px) and (min-height: 720px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
     max-height: 560px;
   }
 }
-@media (max-width: 720px) and (max-height: 1023px) {
+@media (max-width: 720px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
     right: -12px;
   }
 }
 @media (max-width: 720px) and (max-height: 400px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
+    height: 100%;
+    max-height: 100vh;
     max-width: 100vw;
     width: 100vw;
-    max-height: 100vh;
-    height: 100vh;
     border-radius: 0;
   }
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
@@ -255,12 +320,12 @@
     margin-left: calc(16px - 2 * 12px);
   }
 }
-@media (max-width: 600px) and (max-height: 960px) {
+@media (max-width: 600px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
+    height: 100%;
+    max-height: 100vh;
     max-width: 100vw;
     width: 100vw;
-    max-height: 100vh;
-    height: 100vh;
     border-radius: 0;
   }
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
@@ -275,9 +340,9 @@
     margin-left: calc(16px - 2 * 12px);
   }
 }
-@media (min-width: 960px) and (min-height: 1440px) {
+@media (min-width: 960px) {
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {
-    max-width: calc(100vw - 400px);
+    width: calc(100vw - 400px);
   }
   .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface .mdc-dialog__close {
     right: -12px;
@@ -307,8 +372,6 @@
 .mdc-dialog__surface {
   /* @alternate */
   position: relative;
-  /* @alternate */
-  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
   display: flex;
   flex-direction: column;
   flex-grow: 0;
@@ -324,13 +387,18 @@
   height: 100%;
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
 }
 [dir=rtl] .mdc-dialog__surface, .mdc-dialog__surface[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   text-align: right;
+  /*rtl:end:ignore*/
 }
-@media screen and (-ms-high-contrast: active) {
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
   .mdc-dialog__surface {
     outline: 2px solid windowText;
   }
@@ -357,30 +425,6 @@
   display: block;
   margin-top: 0;
   /* @alternate */
-  line-height: normal;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-headline6-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-headline6-font-size, 0.875rem);
-  line-height: 0.875rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-headline6-line-height, 0.875rem);
-  font-weight: 500;
-  /* @alternate */
-  font-weight: var(--mdc-typography-headline6-font-weight, 500);
-  letter-spacing: 0.0125em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-headline6-letter-spacing, 0.0125em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-headline6-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-headline6-text-transform, inherit);
   position: relative;
   flex-shrink: 0;
   box-sizing: border-box;
@@ -395,8 +439,11 @@
   vertical-align: 0;
 }
 [dir=rtl] .mdc-dialog__title, .mdc-dialog__title[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   text-align: right;
+  /*rtl:end:ignore*/
 }
 
 .mdc-dialog--scrollable .mdc-dialog__title {
@@ -405,11 +452,12 @@
 }
 
 .mdc-dialog--fullscreen .mdc-dialog__header {
-  display: inline-flex;
-  padding: 0 24px 9px;
+  align-items: baseline;
   border-bottom: 1px solid transparent;
+  display: inline-flex;
   justify-content: space-between;
-  align-items: baseline;
+  padding: 0 24px 9px;
+  z-index: 1;
 }
 .mdc-dialog--fullscreen .mdc-dialog__header .mdc-dialog__close {
   right: -12px;
@@ -431,29 +479,6 @@
 }
 
 .mdc-dialog__content {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-body1-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.8125rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-body1-font-size, 0.8125rem);
-  line-height: 1.5rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-body1-line-height, 1.5rem);
-  font-weight: 400;
-  /* @alternate */
-  font-weight: var(--mdc-typography-body1-font-weight, 400);
-  letter-spacing: 0.03125em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-body1-letter-spacing, 0.03125em);
-  text-decoration: inherit;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-body1-text-decoration, inherit);
-  text-transform: inherit;
-  /* @alternate */
-  text-transform: var(--mdc-typography-body1-text-transform, inherit);
   flex-grow: 1;
   box-sizing: border-box;
   margin: 0;
@@ -505,35 +530,54 @@
 
 .mdc-dialog__button {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 8px;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 0;
   max-width: 100%;
   /* @noflip */
+  /*rtl:ignore*/
   text-align: right;
 }
 [dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 8px;
+  /*rtl:end:ignore*/
 }
+
 .mdc-dialog__button:first-child {
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 0;
 }
 [dir=rtl] .mdc-dialog__button:first-child, .mdc-dialog__button:first-child[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   margin-left: 0;
   /* @noflip */
+  /*rtl:ignore*/
   margin-right: 0;
+  /*rtl:end:ignore*/
 }
+
 [dir=rtl] .mdc-dialog__button, .mdc-dialog__button[dir=rtl] {
+  /*rtl:begin:ignore*/
   /* @noflip */
+  /*rtl:ignore*/
   text-align: left;
+  /*rtl:end:ignore*/
 }
+
 .mdc-dialog--stacked .mdc-dialog__button:not(:first-child) {
   margin-top: 12px;
 }

package/dist/collection/components/flex-container/flex-container.js

@@ -1,5 +1,11 @@
 import { Component, h, Prop } from '@stencil/core';
 /**
+ * This component is deprecated and will be removed in a future version of
+ * Lime Elements. Please use CSS for your flexible container needs 🙂
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+ *
+ * @deprecated
+ * @private
  * @exampleComponent limel-example-flex-container
  * @slot - Container content
  */
@@ -22,6 +28,10 @@ export class FlexContainer {
      */
     this.reverse = false;
   }
+  componentWillLoad() {
+    /* eslint-disable-next-line no-console */
+    console.warn('limel-flex-container is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox');
+  }
   render() {
     return h("slot", null);
   }

package/dist/collection/components/form/form.css

@@ -501,9 +501,13 @@
 
 .limel-form-layout--grid limel-checkbox,
 .limel-form-layout--grid limel-switch {
+  min-height: calc(
+            var(--min-height-of-one-row) - 0.9375rem
+        );
+}
+.limel-form-layout--grid limel-checkbox {
   margin-top: 0.5rem;
   display: block;
-  min-height: calc( var(--min-height-of-one-row) - 0.9375rem );
 }
 .limel-form-layout--grid limel-switch {
   margin-left: 0.5rem;

package/dist/collection/components/form/templates/common.js

@@ -59,7 +59,10 @@ function findFirstEntry(data, subSchema) {
     getRequiredEntry(data, subSchema),
     ...Object.entries(data),
   ];
-  return entries.filter(([_, value]) => !!value && typeof value !== 'boolean')[0];
+  return entries.filter((entry) => {
+    const value = entry[1];
+    return !!value && typeof value !== 'boolean';
+  })[0];
 }
 function getRequiredEntry(data, subSchema) {
   if (!('required' in subSchema)) {