@limetech/lime-elements 36.0.0-next.9 → 36.1.0-dev.1

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

@@ -63,11 +63,16 @@
 /**
  * @prop --circular-progress-size: Determines the visual size of the visualization. This does not override the `size` property if it is specified.
  * @prop --circular-progress-track-color: Determines the color of the circular track. Defaults to `--contrast-400`.
+ * @prop --circular-progress-suffix-color: Determines the color of the prefix. Defaults to `--contrast-1000`.
+ * @prop --circular-progress-text-color: Determines the color of the value. Defaults to `--contrast-1200`.
+ * @prop --circular-progress-prefix-color: Determines the color of the suffix. Defaults to `--contrast-1000`.
  * @prop --circular-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.
+ * @prop --circular-progress-background-color: Determines the background color of the central section. Defaults to `--contrast-100`.
  */
 :host {
   display: block;
   box-sizing: border-box;
+  isolation: isolate;
 }
 
 :host([size=x-small]) {
@@ -99,13 +104,15 @@
       --circular-progress-track-color,
       rgb(var(--contrast-400))
   );
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: var(--size);
   height: var(--size);
   border-radius: 50%;
-  box-shadow: 0 0 0 0.125rem rgba(var(--contrast-100), 0.8);
+  line-height: normal;
+  box-shadow: 0 0 0 0.125rem rgb(var(--contrast-100), 0.7);
   background: conic-gradient(var(--fill-color) 0% var(--percentage), var(--track-color) var(--percentage) 100%);
 }
 .lime-circular-progress:before {
@@ -114,19 +121,34 @@
   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));
+  background-color: var(--circular-progress-background-color, rgb(var(--contrast-100)));
   box-shadow: var(--button-shadow-pressed);
 }
 
+.prefix {
+  font-size: clamp(0.5rem, var(--size) * 0.16, 2.25rem);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+  color: var(--circular-progress-prefix-color, rgb(var(--contrast-1000)));
+  width: 45%;
+  top: 20%;
+  position: absolute;
+}
+
 .value {
-  font-size: calc(var(--size) * 0.25);
-  color: rgb(var(--contrast-1200));
+  display: flex;
+  font-size: clamp(0.5rem, var(--size) * 0.25, 4rem);
+  color: var(--circular-progress-text-color, rgb(var(--contrast-1200)));
   z-index: 1;
   cursor: default;
 }
 
 .suffix {
-  opacity: 0.7;
+  font-size: clamp(0.5rem, var(--size) * 0.18, 2.5rem);
+  color: var(--circular-progress-suffix-color, rgb(var(--contrast-1000)));
+  padding-top: 4%;
 }
 
 .displays-percentage-colors[style^="--percentage:1"] {

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

@@ -1,4 +1,4 @@
-import { Component, h, Prop } from '@stencil/core';
+import { h } from '@stencil/core';
 import { abbreviate } from '../badge/format';
 const PERCENT = 100;
 /**
@@ -27,22 +27,17 @@ const PERCENT = 100;
  */
 export class CircularProgress {
   constructor() {
-    /**
-     * The value of the progress bar.
-     */
+    this.renderPrefix = () => {
+      if (this.prefix) {
+        return h("span", { class: "prefix" }, this.prefix);
+      }
+    };
     this.value = 0;
-    /**
-     * The maximum value within the scale that the progress bar should visualize. Defaults to `100`.
-     */
     this.maxValue = PERCENT;
-    /**
-     * The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`
-     */
+    this.prefix = null;
     this.suffix = '%';
-    /**
-     * When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%.
-     */
     this.displayPercentageColors = false;
+    this.size = undefined;
   }
   render() {
     const classList = {
@@ -51,113 +46,134 @@ export class CircularProgress {
     };
     const currentPercentage = (this.value * PERCENT) / this.maxValue + '%';
     const value = Math.round(this.value * 10) / 10; // eslint-disable-line no-magic-numbers
-    return (h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } },
-      h("span", { class: "value" },
-        abbreviate(value),
-        h("span", { class: "suffix" }, this.suffix))));
+    return (h("div", { role: "progressbar", class: classList, "aria-label": "%", "aria-valuemin": "0", "aria-valuemax": this.maxValue, "aria-valuenow": this.value, style: { '--percentage': currentPercentage } }, this.renderPrefix(), h("span", { class: "value" }, abbreviate(value), h("span", { class: "suffix" }, this.suffix))));
   }
   static get is() { return "limel-circular-progress"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["circular-progress.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["circular-progress.css"]
-  }; }
-  static get properties() { return {
-    "value": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The value of the progress bar."
-      },
-      "attribute": "value",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "maxValue": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`."
+  static get originalStyleUrls() {
+    return {
+      "$": ["circular-progress.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["circular-progress.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The value of the progress bar."
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "max-value",
-      "reflect": false,
-      "defaultValue": "PERCENT"
-    },
-    "suffix": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "maxValue": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value within the scale that the progress bar should visualize. Defaults to `100`."
+        },
+        "attribute": "max-value",
+        "reflect": false,
+        "defaultValue": "PERCENT"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
+      "prefix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The prefix which is displayed before the `value`, must be a few characters characters long."
+        },
+        "attribute": "prefix",
+        "reflect": true,
+        "defaultValue": "null"
       },
-      "attribute": "suffix",
-      "reflect": false,
-      "defaultValue": "'%'"
-    },
-    "displayPercentageColors": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "suffix": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The suffix which is displayed after the `value`, must be one or two characters long. Defaults to `%`"
+        },
+        "attribute": "suffix",
+        "reflect": false,
+        "defaultValue": "'%'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%."
+      "displayPercentageColors": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When set to `true`, makes the filled section showing the percentage colorful. Colors change with intervals of 10%."
+        },
+        "attribute": "display-percentage-colors",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "display-percentage-colors",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "size": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CircularProgressSize",
-        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
-        "references": {
-          "CircularProgressSize": {
-            "location": "import",
-            "path": "./circular-progress.types"
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CircularProgressSize",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\"",
+          "references": {
+            "CircularProgressSize": {
+              "location": "import",
+              "path": "./circular-progress.types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified."
-      },
-      "attribute": "size",
-      "reflect": true
-    }
-  }; }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determines the visual size of the visualization from a preset size. This property can override the `--circular-progress-size` variable if it is specified."
+        },
+        "attribute": "size",
+        "reflect": true
+      }
+    };
+  }
 }

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

@@ -343,15 +343,125 @@ div.CodeMirror-dragcursors {
 /* Help users use markselection to safely style text background */
 span.CodeMirror-selectedtext { background: none; }
 
+/* The lint marker gutter */
+.CodeMirror-lint-markers {
+  width: 16px;
+}
+
+.CodeMirror-lint-tooltip {
+  background-color: #ffd;
+  border: 1px solid black;
+  border-radius: 4px 4px 4px 4px;
+  color: black;
+  font-family: monospace;
+  font-size: 10pt;
+  overflow: hidden;
+  padding: 2px 5px;
+  position: fixed;
+  white-space: pre;
+  white-space: pre-wrap;
+  z-index: 100;
+  max-width: 600px;
+  opacity: 0;
+  transition: opacity .4s;
+  -moz-transition: opacity .4s;
+  -webkit-transition: opacity .4s;
+  -o-transition: opacity .4s;
+  -ms-transition: opacity .4s;
+}
+
+.CodeMirror-lint-mark {
+  background-position: left bottom;
+  background-repeat: repeat-x;
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-mark-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
+}
+
+.CodeMirror-lint-marker {
+  background-position: center center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+  position: relative;
+}
+
+.CodeMirror-lint-message {
+  padding-left: 18px;
+  background-position: top left;
+  background-repeat: no-repeat;
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+  background-repeat: no-repeat;
+  background-position: right bottom;
+  width: 100%; height: 100%;
+}
+
+.CodeMirror-lint-line-error {
+  background-color: rgba(183, 76, 81, 0.08);
+}
+
+.CodeMirror-lint-line-warning {
+  background-color: rgba(255, 211, 0, 0.1);
+}
+
+.CodeMirror-foldmarker {
+  color: blue;
+  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+  font-family: arial;
+  line-height: .3;
+  cursor: pointer;
+}
+.CodeMirror-foldgutter {
+  width: .7em;
+}
+.CodeMirror-foldgutter-open,
+.CodeMirror-foldgutter-folded {
+  cursor: pointer;
+}
+.CodeMirror-foldgutter-open:after {
+  content: "\25BE";
+}
+.CodeMirror-foldgutter-folded:after {
+  content: "\25B8";
+}
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
 /**
  * @prop --code-editor-max-height: Defines how tall the code editor can get before content becomes scrollable, defaults to `10rem`.
+ * @prop --code-editor-font-size: Defines the font size of the code, defaults to `0.875rem`.
  */
 :host {
   display: flex;
-  font-size: 1rem;
+  font-size: var(--code-editor-font-size, 0.875rem);
 }
 
 .editor {
+  display: flex;
+  align-items: stretch;
   width: 100%;
 }
 .editor.is-light-mode {
@@ -477,6 +587,7 @@ span.CodeMirror-selectedtext { background: none; }
   background-color: rgb(var(--code-editor-background-color));
   border-radius: 0.25rem;
   height: auto;
+  width: 100%;
 }
 .cm-s-lime .CodeMirror-scroll {
   max-height: var(--code-editor-max-height, 10rem);
@@ -518,4 +629,45 @@ span.CodeMirror-selectedtext { background: none; }
   bottom: -0.4rem;
   left: 0;
   right: 0;
+}
+.cm-s-lime .CodeMirror-lint-marker-error,
+.cm-s-lime .CodeMirror-lint-message-error {
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs/><path fill='rgb(255,255,255)' d='M7.219 5.781L5.78 7.22 14.563 16 5.78 24.781 7.22 26.22 16 17.437l8.781 8.782 1.438-1.438L17.437 16l8.782-8.781L24.78 5.78 16 14.563z'/></svg>");
+  background-color: rgb(var(--color-red-default));
+  background-size: 0.75rem;
+  border-radius: 50%;
+}
+.cm-s-lime .CodeMirror-foldmarker {
+  position: relative;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  box-shadow: var(--button-shadow-normal);
+  color: transparent;
+  text-shadow: none;
+  padding: 0 0.5rem;
+  border-radius: 1rem;
+  background-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' xml:space='preserve'><circle cx='16' cy='16' r='2'/><circle cx='26' cy='16' r='2'/><circle cx='6' cy='16' r='2'/></svg>");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.cm-s-lime .CodeMirror-foldmarker:hover {
+  box-shadow: var(--button-shadow-hovered);
+}
+.cm-s-lime .CodeMirror-foldmarker:active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.is-dark-mode .cm-s-lime .CodeMirror-foldmarker {
+  background-color: rgb(var(--contrast-1200));
+}
+.cm-s-lime [class^=CodeMirror-foldgutter] {
+  color: var(--code-editor-neutral-text-color);
+  transition: opacity 0.2s ease;
+  opacity: 0.4;
+}
+.cm-s-lime [class^=CodeMirror-foldgutter]:hover {
+  opacity: 1;
+}
+.cm-s-lime .CodeMirror-foldgutter-folded {
+  opacity: 0.7;
 }